/* Gifted.
 *
 * Near-black and warm. A gift is not an infrastructure purchase, so the accent
 * is gold rather than the indigo every developer tool reaches for, and the card
 * itself is jade so the product stands apart from the page it sits on.
 *
 * Hierarchy comes from weight, scale and space. Borders are a last resort: a
 * page where everything is a bordered box has said nothing about what matters. */

:root {
  color-scheme: dark;

  --ink: #0a0a0c;
  --ink-raised: #141416;
  --ink-sunken: #0e0e11;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.16);

  --fg: #f5f2eb;
  --fg-muted: #a5a099;
  --fg-subtle: #6f6b64;

  --gold: #f2b544;
  --gold-lift: #ffc862;
  --gold-wash: rgba(242, 181, 68, 0.13);
  --jade: #2f8f6f;
  --danger: #ff7a72;

  --radius: 20px;
  --radius-sm: 12px;
  --measure: 34rem;

  /* The two bands the page is not free to overlap: a panel sized to the
     viewport has to leave room for them. */
  --masthead: 4.75rem;
  --colophon: 5.4rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(880px 460px at 10% -10%, rgba(242, 181, 68, 0.10), transparent 62%),
    radial-gradient(720px 420px at 92% 2%, rgba(47, 143, 111, 0.12), transparent 60%),
    var(--ink);
  color: var(--fg);
  font: 16px/1.6 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.shell { width: min(1120px, 100% - 3rem); margin-inline: auto; }

/* The pinned bar reaches the edges of the window; what is in it does not. */
.masthead.shell { width: 100%; padding-inline: max(1.5rem, calc((100% - 1120px) / 2)); }

/* Panels -------------------------------------------------------------------
 *
 * The page is two screens: the card and the transaction, then what the card
 * actually is. Splitting them means the purchase is never competing with the
 * explanation, and neither has to be squeezed to share a fold. */

.panel {
  display: grid;
  align-content: center;
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.panel-shelf { min-height: calc(100dvh - var(--masthead) - var(--colophon)); }
.panel-counter { min-height: calc(100dvh - var(--masthead)); }

/* Pages that are a list or a form rather than a display start at the top.
   Centring suits a shop window, where the card is the thing and the space
   around it is deliberate. On a page with four lines on it, the same rule
   just leaves a hole above the content. */
.panel-top {
  min-height: calc(100dvh - var(--masthead) - var(--colophon));
  align-content: start;
}
.panel-detail { min-height: calc(100dvh - var(--colophon)); }

/* Snapping is for screens with room for it. On a short or narrow viewport the
   content is taller than the fold anyway, and snapping would only fight the
   reader. Proximity rather than mandatory: it settles a scroll that is nearly
   at a panel and stays out of the way of one that is not. */
@media (min-width: 58rem) and (min-height: 42rem) {
  html { scroll-snap-type: y proximity; }
  /* Only where two screens are the point. A page that is a list wants none of
     it: snapping pulls the panel's top to the top of the window, which takes
     the header with it, and then argues with anyone scrolling back for it.
     Nothing outside a snapping deck is a target, so the rule above is inert
     on every other page. */
  .deck-snap .panel { scroll-snap-align: start; }
  /* Snapped-to content stops below the pinned header rather than under it.
     The first panel overshoots on purpose: the browser clamps a snap position
     to the top of the document, so it lands at zero however tall the header
     actually turns out to be. */
  .deck-snap .panel { scroll-margin-top: var(--masthead); }
  .deck-snap .panel-counter { scroll-margin-top: calc(var(--masthead) + 1rem); }
}

/* Header ------------------------------------------------------------------ */

/* Pinned. The shop is one place however far down the page you are, and the way
   back to it should not have to be scrolled for.
 *
 * Translucent with a blur rather than solid: content passing underneath stays
 * visible enough to read as passing underneath, instead of disappearing at a
 * hard edge. The colour underneath it is the page's own, so a browser without
 * backdrop-filter still gets a bar rather than a smear. */
.masthead {
  position: sticky;
  top: 0;
  /* Above the card, which makes its own stacking context to be tilted in and
     comes later in the document. */
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
  background: rgba(10, 10, 12, 0.72);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead { background: var(--ink); }
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 660;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
/* The suffix is part of the name but not the part that carries it, so it is
   set back a step rather than dropped. */
.wordmark-suffix { color: var(--gold); font-weight: 560; }
.giftcard-face .wordmark-suffix { color: rgba(255, 255, 255, 0.55); }

.masthead nav { display: flex; align-items: center; gap: 1.6rem; font-size: 0.93rem; }
/* A label that breaks mid-phrase reads as two broken links rather than one. */
.masthead nav a { color: var(--fg-muted); text-decoration: none; white-space: nowrap; transition: color 0.15s; }
.masthead nav a:hover { color: var(--fg); }

/* Signing out is a POST, so it is a form. It should still read as one of the
   links beside it. */
.masthead nav form { margin: 0; display: inline-flex; }
.masthead nav button,
.linklike {
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-muted);
  font: inherit;
  font-size: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s;
}
.masthead nav button:hover,
.linklike:hover { color: var(--fg); }

.sign-out { margin-top: 2rem; }

.locale-switch { display: inline-flex; gap: 0.2rem; }
.locale-switch a {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-subtle);
}
.locale-switch a[aria-current="true"] { background: var(--gold-wash); color: var(--gold); }

/* Opening words ----------------------------------------------------------- */

.lede-band { margin-bottom: clamp(2rem, 5vw, 3.25rem); max-width: 46rem; }

.eyebrow {
  display: inline-block;
  margin-bottom: 1.1rem;
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 680;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.lede-band h1 {
  margin: 0;
  font-size: clamp(2.1rem, 4.6vw, 3.35rem);
  line-height: 1.06;
  letter-spacing: -0.037em;
  font-weight: 690;
  text-wrap: balance;
}
.lede-band p {
  margin: 1.1rem 0 0;
  max-width: var(--measure);
  color: var(--fg-muted);
  font-size: clamp(1rem, 1.6vw, 1.1rem);
}

/* The counter: product on the left, the transaction on the right ----------- */

.counter {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: start;
  padding-bottom: 3.5rem;
}
@media (max-width: 58rem) { .counter { grid-template-columns: 1fr; } }

/* The gift card ----------------------------------------------------------- */

/* The figure is the stage the card is tilted on; the depth lives here so the
   face can be rotated about its own centre. */
.giftcard {
  margin: 0;
  perspective: 1100px;
}

.giftcard-face {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --press: 0px;
  --glare-x: 50%;
  --glare-y: 50%;

  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1.586;              /* the proportions of a real card */
  padding: clamp(1.3rem, 2.6vw, 1.9rem);
  border-radius: 22px;
  background: linear-gradient(145deg, #0f3a30 0%, #175a45 52%, #2f8f6f 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 28px 64px -30px rgba(0, 0, 0, 0.95);
  /* The resting angle is applied last so it stays a flat rotation in the
     card's own plane, under whatever tilt the pointer is asking for. */
  transform:
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translateZ(var(--press))
    rotate(-1.3deg);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
/* While the pointer is on the card the face follows it within the frame; the
   long ease is kept for the release, where it reads as the card settling.
   The compositing hint is scoped to that window too: a layer promoted for the
   life of the page is a layer the compositor has to keep right for the life of
   the page. */
.giftcard.is-tracking .giftcard-face {
  transition: transform 90ms linear;
  will-change: transform;
}

/* Light catching the point being pressed. It sits above the artwork because
   that is where a reflection is: on the surface, not under it. */
.giftcard-face::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(
    38% 55% at var(--glare-x) var(--glare-y),
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.05) 45%,
    transparent 72%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.giftcard.is-tracking .giftcard-face::before { opacity: 1; }

/* A sheen across the face, so it reads as an object rather than a coloured
   rectangle. */
.giftcard-face::after {
  content: "";
  position: absolute;
  inset: -40% -10%;
  background: linear-gradient(
    102deg,
    transparent 38%,
    rgba(255, 255, 255, 0.13) 47%,
    rgba(255, 255, 255, 0.03) 53%,
    transparent 62%
  );
  pointer-events: none;
}

.giftcard-face header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 660;
  font-size: 0.97rem;
  letter-spacing: -0.01em;
  color: #f7f4ec;
}

.giftcard-value {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.giftcard-value strong {
  font-size: clamp(2.5rem, 5.8vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.048em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gold-lift);
}
.giftcard-value span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.94rem;
  font-weight: 560;
}

.giftcard-face footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.giftcard-issuer { font-size: 0.9rem; font-weight: 620; color: rgba(255, 255, 255, 0.92); }
.giftcard-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  /* Scales with the card so the masked code stays on one line at every width;
     wrapped, it stops looking like a code. */
  font-size: clamp(0.6rem, 1.5vw, 0.76rem);
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.42);
}

/* The transaction --------------------------------------------------------- */

.buybox h1 {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 680;
  letter-spacing: -0.028em;
}
.buybox-lede { margin: 0.45rem 0 0; color: var(--fg-muted); font-size: 0.96rem; }

/* Amounts: four shortcuts and the real thing.
 *
 * The typed amount is the product, so it is a pill among the pills but the
 * larger and warmer one, and it is labelled rather than left to a placeholder
 * a filled box would hide. */
/* One row: four shortcuts and the box for anything else, all offering the same
   thing. It wraps when it must rather than being split by hand, so the row
   stays a row wherever there is room for one. */
.amounts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.6rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  padding-inline: 1.05rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--fg-muted);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
button.pill { cursor: pointer; }
button.pill:hover { color: var(--fg); border-color: var(--hairline-strong); }
button.pill.is-selected {
  background: var(--gold-wash);
  border-color: rgba(242, 181, 68, 0.5);
  color: var(--gold-lift);
}

.pill-own {
  height: 3rem;
  padding-inline: 1.05rem;
  border-color: rgba(242, 181, 68, 0.4);
  background: rgba(242, 181, 68, 0.05);
  cursor: text;
}
.pill-own:focus-within {
  border-color: var(--gold);
  background: rgba(242, 181, 68, 0.09);
  box-shadow: 0 0 0 4px var(--gold-wash);
}
.pill-own input {
  /* Room for the hint, and for the largest amount on sale. Wider than that and
     the box stops looking like one of the pills beside it. */
  width: 6rem;
  text-align: center;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--gold-lift);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 680;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.pill-own input::placeholder { color: var(--fg-subtle); font-weight: 600; }

/* Price and action share a line, divided from the input by a rule rather than
   by another box. */
.checkout-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}

.price > span:first-child {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--fg-subtle);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.price-value {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  /* Holds its height whether or not there is a figure, so a quote arriving or
     clearing never moves the button. */
  min-height: 2.6rem;
}
.price-value strong {
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.price-currency { color: var(--fg-muted); font-size: 1rem; font-weight: 620; }
.buybox.is-quoting .price-value { opacity: 0.35; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.15rem;
  min-width: 12rem;
  padding-inline: 1.75rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-lift) 0%, var(--gold) 100%);
  color: #17120a;
  font: inherit;
  font-size: 1rem;
  font-weight: 680;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 14px 32px -16px rgba(242, 181, 68, 0.85);
  transition: filter 0.15s, transform 0.1s, box-shadow 0.15s;
}
.button:hover { filter: brightness(1.06); }
.button:active { transform: translateY(1px); }
.button[disabled] { filter: grayscale(0.7) brightness(0.6); box-shadow: none; cursor: not-allowed; }

.buybox-status { margin: 0.9rem 0 0; min-height: 1.3rem; color: var(--fg-muted); font-size: 0.87rem; }
.buybox-status.is-error { color: var(--danger); }
.quote-validity {
  margin: 0.9rem 0 0;
  min-height: 1.3rem;
  color: var(--fg-subtle);
  font-size: 0.8rem;
}
.buybox-terms { margin: 1.25rem 0 0; color: var(--fg-subtle); font-size: 0.8rem; }

/* A way back to the shelf, small enough not to compete with the card. */
.crumb {
  display: inline-block;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  color: var(--fg-subtle);
  font-size: 0.85rem;
  text-decoration: none;
}
.crumb::before { content: "\2190"; margin-right: 0.45rem; }
.crumb:hover { color: var(--fg-muted); }

/* The detail panel -------------------------------------------------------- */

.panel-detail h2 {
  margin: 0 0 1.75rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 680;
  letter-spacing: -0.03em;
}

.brand-block {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--hairline);
}
.brand-block p { margin: 0; max-width: 46rem; color: var(--fg-muted); }
.brand-block-site {
  margin-bottom: 0.3rem !important;
  color: var(--gold) !important;
  font-weight: 640;
}

/* Three columns rather than three boxes: the panel is theirs, so they do not
   need borders to be told apart. */
.assurances {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 58rem) { .assurances { grid-template-columns: 1fr; } }

.assurances li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--fg-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}
.assurances li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-wash);
}
.assurances strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--fg);
  font-size: 1rem;
  font-weight: 650;
}

/* The shelf --------------------------------------------------------------- */

.rack { margin: 0; padding: 0; list-style: none; display: grid; gap: 3rem; }

.rack-item {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 58rem) { .rack-item { grid-template-columns: 1fr; } }

.rack-link { display: block; text-decoration: none; }

.rack-copy h2 { margin: 0; font-size: 1.6rem; font-weight: 680; letter-spacing: -0.03em; }
.rack-site { margin: 0.2rem 0 1rem; color: var(--gold); font-size: 0.92rem; font-weight: 630; }
.rack-copy p { margin: 0 0 1rem; max-width: var(--measure); color: var(--fg-muted); }
.rack-range { color: var(--fg-subtle) !important; font-size: 0.9rem; }
.rack-copy .button { margin-top: 0.4rem; }

/* Footer ------------------------------------------------------------------ */

.colophon {
  display: flex;
  align-items: center;
  min-height: var(--colophon);
  margin-top: auto;
  padding-block: 1.5rem;
  border-top: 1px solid var(--hairline);
  color: var(--fg-subtle);
  font-size: 0.85rem;
}
.colophon .shell { width: min(1120px, 100% - 3rem); display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: space-between; }
.colophon nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.colophon a { text-decoration: none; }
.colophon a:hover { color: var(--fg-muted); }

/* Sign-in ----------------------------------------------------------------- */

.shell.narrow { width: min(34rem, 100% - 3rem); }

.shell.narrow h1 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 690;
  letter-spacing: -0.035em;
}
.shell.narrow .lede { margin: 0.9rem 0 2rem; color: var(--fg-muted); }

/* Signing in with someone else's account is their button, not ours: the mark
   is theirs, and the surface is quiet so the mark is what is recognised. The
   label is centred in the full width while the mark sits at the edge, which is
   what keeps a row of these aligned when there is more than one. */
.provider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(22rem, 100%);
  min-height: 3.4rem;
  padding: 0.75rem 3.5rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: var(--ink-raised);
  color: var(--fg);
  font-size: 1rem;
  font-weight: 620;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.provider:hover { border-color: rgba(255, 255, 255, 0.3); background: #1b1b1f; }
.provider:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.provider-mark {
  position: absolute;
  left: 0.85rem;
  width: 28px;
  height: 28px;
  display: block;
  user-select: none;
}

/* The address, then the code. One column, because on a phone the field and
   the button side by side leave room for neither. */
.signin-form { display: grid; gap: 1rem; justify-items: start; }
.signin-form label { display: grid; gap: 0.4rem; width: min(22rem, 100%); }
.signin-form label > span {
  color: var(--fg-subtle);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.signin-form input {
  width: 100%;
  height: 3.4rem;
  padding-inline: 1.1rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--ink-sunken);
  color: var(--fg);
  font: inherit;
  font-size: 1.05rem;
  transition: border-color 0.15s;
}
.signin-form input:focus { outline: none; border-color: rgba(242, 181, 68, 0.6); }
.signin-form .consent-check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.65rem;
  color: var(--fg-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}
.signin-form .consent-check input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.12rem;
  accent-color: var(--gold);
}
.signin-form .consent-check span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.consent-check a { color: var(--gold); text-underline-offset: 2px; }
/* The code is six digits and nothing else, so it is spaced like six digits. */
.signin-form input[name="code"] {
  width: min(11rem, 100%);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.4rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
}

/* A rule with the word sitting in it. */
.signin-or {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(22rem, 100%);
  margin: 1.75rem 0;
  color: var(--fg-subtle);
  font-size: 0.85rem;
}
.signin-or::before,
.signin-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.signin-again {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
/* A button that does what a link does should look like one — but it has to be
   a button, because asking for another code changes something. */
.linkish {
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-subtle);
  font: inherit;
  font-size: 0.88rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.linkish:hover { color: var(--fg); }

.crumb-forward { color: var(--fg-subtle); font-size: 0.88rem; }

/* The account area -------------------------------------------------------- */

/* Narrowing the list ------------------------------------------------------ */

.sift {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  margin-top: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--hairline);
}

.sift label { display: grid; gap: 0.35rem; }
.sift label > span:first-child {
  color: var(--fg-subtle);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sift input,
.sift select {
  height: 2.5rem;
  padding-inline: 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--ink-sunken);
  color: var(--fg);
  font: inherit;
  font-size: 0.92rem;
  transition: border-color 0.15s;
}
.sift input:focus,
.sift select:focus { outline: none; border-color: rgba(242, 181, 68, 0.55); }
.sift input::placeholder { color: var(--fg-subtle); }

.sift select { min-width: 11rem; }
.sift input[type="date"] { min-width: 9.5rem; }

/* A range is two boxes reading as one control. */
.sift-pair { display: flex; gap: 0.35rem; }
.sift-pair input { width: 5.5rem; text-align: center; font-variant-numeric: tabular-nums; }

.sift-actions { display: flex; align-items: center; gap: 0.9rem; height: 2.5rem; }
.pill-action {
  height: 2.5rem;
  cursor: pointer;
  border-color: var(--hairline-strong);
  color: var(--fg);
}
.pill-action:hover { background: var(--ink-raised); }
.sift-clear { color: var(--fg-subtle); font-size: 0.88rem; }
.sift-clear:hover { color: var(--fg-muted); }

@media (max-width: 40rem) {
  .sift label,
  .sift-actions { width: 100%; }
  .sift select,
  .sift input[type="date"] { width: 100%; }
  .sift-pair input { width: 100%; }
}

/* Moving between pages ---------------------------------------------------- */

.paging {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  color: var(--fg-subtle);
  font-size: 0.88rem;
}
.paging-count { font-variant-numeric: tabular-nums; }
.paging-steps { display: flex; gap: 1.25rem; }
.paging-steps a { color: var(--gold); text-decoration: none; }
.paging-steps a:hover { text-decoration: underline; text-underline-offset: 3px; }

.ledger { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }

.ledger-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.ledger-row:hover { border-color: var(--hairline-strong); background: var(--ink-raised); }

.ledger-amount { font-size: 1.15rem; font-weight: 660; font-variant-numeric: tabular-nums; }
.ledger-amount em { color: var(--fg-subtle); font-size: 0.85rem; font-style: normal; font-weight: 500; }
.ledger-price { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.ledger-date { color: var(--fg-subtle); font-size: 0.85rem; font-variant-numeric: tabular-nums; }

.ledger-status {
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 620;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg-muted);
}
.ledger-status.is-delivered { background: rgba(47, 143, 111, 0.18); color: #6fd3ab; }
.ledger-status.is-pending { background: var(--gold-wash); color: var(--gold); }
.ledger-status.is-failed,
.ledger-status.is-canceled { background: rgba(255, 122, 114, 0.15); color: var(--danger); }

@media (max-width: 40rem) {
  .ledger-row { grid-template-columns: 1fr auto; gap: 0.5rem 1rem; }
}

/* Only what actually just changed. Put on the element itself, the animation
   would also play on every ordinary page load. */
.is-settling .ledger-status,
.is-settling .lede { animation: settle 0.45s ease; }

@keyframes settle {
  from { opacity: 0.2; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .is-settling .ledger-status,
  .is-settling .lede { animation: none; }
}

/* The code, hidden until asked for --------------------------------------- */

.code-reveal { margin-top: 0.35rem; }
/* Room between the control and the thing it opens: touching, they read as one
   broken box rather than a button above a panel. */
.code-reveal[open] summary { margin-bottom: 0.9rem; }

.code-reveal summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: var(--ink-raised);
  color: var(--fg);
  font-size: 0.92rem;
  font-weight: 620;
  cursor: pointer;
  list-style: none;
  transition: border-color 0.15s, background 0.15s;
}
.code-reveal summary::-webkit-details-marker { display: none; }
.code-reveal summary:hover { border-color: rgba(255, 255, 255, 0.3); background: #1b1b1f; }
.code-reveal summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* One summary, two labels: whichever fits the state it is in. */
.code-reveal .code-shown { display: none; }
.code-reveal[open] .code-shown { display: inline; }
.code-reveal[open] .code-hidden { display: none; }

/* The placeholder stands where the code will, so the page does not jump when
   it arrives. It goes away once the code is open. */
.code-mask {
  margin: 0.9rem 0 0;
  color: var(--fg-subtle);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  letter-spacing: 0.1em;
}
.code-reveal[open] + .code-mask { display: none; }

.code-copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.code-copy:hover { color: var(--fg); border-color: var(--hairline-strong); background: rgba(255, 255, 255, 0.04); }
.code-copy:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.code-copy.is-done { color: var(--jade); border-color: rgba(47, 143, 111, 0.5); }

/* The code is the target, not just the button beside it. */
.code-out.is-copyable { cursor: pointer; }
.code-out.is-copyable:hover { border-color: rgba(242, 181, 68, 0.55); }
.code-out.is-copied { border-color: rgba(47, 143, 111, 0.55); }

/* The code itself: large, monospaced and easy to select in one gesture. */
.field-label {
  margin: 2rem 0 0.5rem;
  color: var(--fg-subtle);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* The note under the code, with the issuer's link in it. */
.code-note { margin: 1rem 0 0; color: var(--fg-muted); font-size: 0.9rem; }
.code-note a { color: var(--gold); text-underline-offset: 3px; }

.code-out {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.9rem 0.9rem 0.9rem 1.25rem;
  border: 1px solid rgba(242, 181, 68, 0.35);
  border-radius: var(--radius-sm);
  background: rgba(242, 181, 68, 0.05);
  color: var(--gold-lift);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  overflow-wrap: anywhere;
  user-select: all;
}

/* Documents --------------------------------------------------------------- */

.prose { max-width: 44rem; }
.prose h1 {
  margin: 0 0 2rem;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 690;
  letter-spacing: -0.035em;
}
.prose h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.15rem;
  font-weight: 660;
  letter-spacing: -0.02em;
}
.prose p { margin: 0 0 1rem; color: var(--fg-muted); line-height: 1.7; }
.prose ul { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--fg-muted); line-height: 1.7; }
.prose li { margin-bottom: 0.4rem; }
.prose strong { color: var(--fg); font-weight: 640; }

.contact-rows { margin: 1.5rem 0 0; }
.contact-rows dt {
  margin-top: 1.25rem;
  color: var(--fg-subtle);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.contact-rows dd {
  margin: 0.3rem 0 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.05rem;
}

/* Shared page furniture --------------------------------------------------- */

.page { padding-block: clamp(2rem, 5vw, 3.5rem); }
.page h1 { margin: 0 0 0.6rem; font-size: clamp(1.6rem, 3.5vw, 2.2rem); letter-spacing: -0.03em; }
.page > p { margin: 0 0 2rem; color: var(--fg-muted); }

.notice {
  padding: 1rem 1.15rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--ink-raised);
  color: var(--fg-muted);
}
.notice.is-error { border-color: rgba(255, 122, 114, 0.4); color: var(--danger); }

/* Narrow screens ---------------------------------------------------------- */

@media (max-width: 30rem) {
  .shell { width: min(1120px, 100% - 2rem); }

  .masthead { flex-wrap: wrap; gap: 0.75rem; padding-block: 0.85rem; }
  .masthead.shell { padding-inline: 1rem; }
  .masthead nav { gap: 0.85rem; font-size: 0.85rem; }
  /* The site name already links home. */
  .nav-home { display: none; }
  .locale-switch { gap: 0.1rem; }
  .locale-switch a { padding: 0.15rem 0.4rem; font-size: 0.72rem; }
  .checkout-line .button { width: 100%; }
  /* Four shortcuts on one row, which is what makes them read as a set. */
  .pill { padding-inline: 0.9rem; }
  .pill-own { padding-inline: 0.9rem 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
  .giftcard-face { transform: none; }
  .giftcard-face::before { display: none; }
}

/* Contact controls mirror Omnipix LegalContactReveal and its Button variants. */
.gate { margin-top: 2rem; }
.gate-choice { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem; margin-top: 1.25rem; }
.contact-decline, .contact-consent {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; font-family: inherit; text-decoration: none; cursor: pointer;
  transition: all .15s cubic-bezier(.4, 0, .2, 1);
}
.contact-decline {
  height: 3.5rem; padding: .875rem 1.75rem; border: 0;
  font-size: 1rem; line-height: 1.5rem; font-weight: 700; color: #030712;
  background: oklch(76.5% .177 163.223);
  box-shadow: 0 0 18px rgba(52, 211, 153, .38);
  animation: contact-decline-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}
.contact-decline:hover {
  color: #030712; background: oklch(84.5% .143 164.978);
  box-shadow: 0 0 22px rgba(52, 211, 153, .5);
}
.contact-consent {
  height: 2.25rem; padding: .375rem .75rem;
  font-size: .75rem; line-height: 1rem; font-weight: 500;
  border: 1px solid rgba(93, 44, 34, .45);
  background: rgba(33, 20, 17, .8); color: #8c5f51;
  opacity: .8; box-shadow: none;
}
.contact-consent:hover { background: #2a1713; color: #9b6b5a; opacity: .9; }
.contact-decline:focus-visible { outline: 2px solid oklch(84.5% .143 164.978 / .5); outline-offset: 2px; }
.contact-consent:focus-visible { outline: 2px solid rgba(93, 44, 34, .4); outline-offset: 2px; }
@keyframes contact-decline-pulse { 50% { opacity: .5; } }
@media (pointer: coarse) {
  .contact-decline::after, .contact-consent::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
}
.contact-card { display: block; width: 100%; max-width: 900px; height: auto; }
.gate-form { display: grid; gap: 1rem; }
.gate-form .button { justify-self: start; }
@media (prefers-reduced-motion: reduce) { .contact-decline { animation: none; } }