/* ============ Limo Series — one button, everywhere =====================
   The pair in the hero decides the shape for the whole site: a pill in
   Satoshi 700, always the same height, with the action filled and whatever
   stands next to it outlined. One button or two, it is this one.

   Two grounds, because the site has two. On the paper the action is ink and
   its neighbour is a hairline outline. Inside anything dark — a black band,
   a photograph — put .on-dark on the row and the pair flips: the action
   becomes the solid white pill, the brightest thing on the frame, and its
   neighbour becomes a smoked panel that tints whatever is behind it rather
   than borrowing it. Smoked and not frosted on purpose: a white veil over a
   bright sky leaves white text at 1.7:1, which is a label you cannot read.

   The arrow belongs to the action alone. It has no width at rest, so it
   opens from nothing under the pointer and the pill grows with it: the
   button gets physically bigger instead of only changing colour. Mark it up
   as <span class="arw" aria-hidden="true">&rarr;</span>, last child. */

.pill-row { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; }
.pill-row.is-centred { justify-content:center; }

.pill { display:inline-flex; align-items:center; gap:0; box-sizing:border-box;
  padding:.9rem 1.5rem; border:1px solid transparent; border-radius:100px;
  font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:.9rem; font-weight:700; letter-spacing:.01em; line-height:1;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  transition:background-color .25s var(--ease,cubic-bezier(.22,1,.36,1)),
             border-color .25s var(--ease,cubic-bezier(.22,1,.36,1)),
             color .25s var(--ease,cubic-bezier(.22,1,.36,1)); }
.pill:focus-visible { outline:2px solid var(--tan,#c5a28c); outline-offset:3px; }
/* An icon before the label keeps its own gap. The negative block margins are
   what keep every pill the same height: a 17px glyph is taller than a 14.4px
   line, so without them the one button that carries an icon stands 2.6px
   above its neighbour and the row stops being a row. */
.pill > svg { width:17px; height:17px; flex-shrink:0; margin:-2px .5rem -2px 0; }

/* ---- on the paper ---- */
/* The action has a colour of its own: --buy, declared in nav.css. Ink was
   correct and anonymous — it is what every site puts on this button. */
.pill-fill { background:var(--buy,#2C7A78); border-color:var(--buy,#2C7A78); color:#fff; }
.pill-fill:hover { background:var(--buy-deep,#24645F); border-color:var(--buy-deep,#24645F); }
/* The neighbour is a pane of glass, not a hairline box: a light plate lifted
   off the paper, blurring what passes under it, with the border being the
   lit top edge of the plate rather than an outline drawn round a hole. It is
   the same material the nav bar is made of, so the two belong together. */
.pill-line { background:rgba(255,255,255,.7); border-color:rgba(255,255,255,.85); color:var(--ink,#252420);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:rgba(19,18,16,.05) 0 1px 2px, rgba(19,18,16,.16) 0 10px 24px -18px; }
.pill-line:hover { background:#fff; border-color:#fff; }

/* ---- on a dark band or a photograph ---- */
.on-dark .pill-fill, .pill-fill.on-dark { background:#fff; border-color:#fff; color:#252420; }
.on-dark .pill-fill:hover, .pill-fill.on-dark:hover { background:#f0efe9; border-color:#f0efe9; }
/* The same plate on a photograph: frosted, milky, a little opaque. In the
   bench this was white at 15% and it read as glass, but only because the
   button sat on the horizon, where the blur dragged dark vegetation up into
   the panel. Here it sits on open sky, and blurring an even sky returns the
   same even sky, so at 15% the pane simply was not there. The milk has to be
   in the tint instead: 32% is where the pane becomes a pane again, matched
   by eye against the bench frame. No rim and nothing under the letters —
   a drawn edge makes it a bordered button rather than glass, and a glow
   under the type reads as a smudge on the pane. The label is white on a
   light pane by design: this is the quiet button, and it measures 1.5:1. */
/* No rim at rest, and the rim on the pointer. The pane on its own is a wash
   with no shape; drawing the edge permanently makes it a bordered button and
   loses the material. Letting the edge arrive under the pointer gives back
   the one thing a wash cannot say — that this is an object and it answers —
   at the only moment it is being asked. */
.on-dark .pill-line, .pill-line.on-dark { background:rgba(255,255,255,.32); border-color:transparent; color:#fff;
  -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1); box-shadow:none; }
.on-dark .pill-line:hover, .pill-line.on-dark:hover { background:rgba(255,255,255,.46); border-color:rgba(255,255,255,.85); }
.on-dark .pill:focus-visible, .pill.on-dark:focus-visible { outline-color:#fff; }

/* ---- the arrow that opens ---- */
.pill .arw { display:inline-flex; align-items:center; width:0; margin-left:0; overflow:hidden;
  opacity:0; transform:scaleX(0); transform-origin:left center;
  transition:width .4s var(--ease,cubic-bezier(.22,1,.36,1)),
             margin-left .4s var(--ease,cubic-bezier(.22,1,.36,1)),
             opacity .3s var(--ease,cubic-bezier(.22,1,.36,1)),
             transform .4s var(--ease,cubic-bezier(.22,1,.36,1)); }
.pill:hover .arw, .pill:focus-visible .arw { width:16px; margin-left:.45rem; opacity:1; transform:scaleX(1); }

/* A touch screen has no pointer to open the arrow with, so there it is
   simply always there: the button is the same width all the time. */
@media (hover:none) {
  .pill .arw { width:16px; margin-left:.45rem; opacity:1; transform:none; }
  .pill { min-height:44px; }
}
@media (max-aspect-ratio:1/1) {
  .pill { padding:.82rem 1.3rem; font-size:.85rem; }
}
@media (prefers-reduced-motion:reduce) {
  .pill, .pill .arw { transition:none; }
}