/* =========================================================================
   Save&Fix — light editorial theme
   Palette: paper white + warm grey canvas, near-black ink, one lime accent.
   Type: Fraunces (serif display heads) / Archivo (labels, nav, prices) /
         Inter (UI copy) / JetBrains Mono (codes).
   ========================================================================= */

:root {
  --paper: #ffffff;
  --bg: #f6f6f4;
  --bg-2: #eeeeea;
  --tile: #f1f1ed;

  --ink: #0e0f10;
  --ink-2: #5c6066;
  --ink-3: #8b9097;

  --line: #e6e6e1;
  --line-2: #d7d7d1;

  --accent: #c2f24a;
  --accent-2: #b3e733;
  --accent-ink: #10140a;
  --dark: #101112;

  --ok: #14a06a;
  --ok-bg: #eaf7f1;
  --warn: #a96700;
  --warn-bg: #fdf4e5;
  --danger: #cf3838;
  --danger-bg: #fdeeee;
  --info-bg: #eef1f6;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;

  --sh-1: 0 1px 2px rgba(16, 17, 18, .05);
  --sh-2: 0 1px 2px rgba(16, 17, 18, .04), 0 10px 30px -14px rgba(16, 17, 18, .13);
  --sh-3: 0 2px 4px rgba(16, 17, 18, .04), 0 30px 70px -28px rgba(16, 17, 18, .26);

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Archivo', 'Inter', system-ui, sans-serif;
  /* The editorial voice. Only the big headlines use it — mixing it into small
     labels kills the contrast that makes it read as a headline at all. */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  --maxw: 1240px;
  --gut: 22px;
  --bar-h: 66px;
}
/* ------------------------------- reset -------------------------------- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
}

p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 6px;
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* ------------------------------- canvas ------------------------------- */

/* Two very soft washes. Enough to stop the page reading as flat #fff, not
   enough to compete with the content — the old dark blobs are gone. */
.canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}

.wash {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.wash.w1 {
  width: 60vw; height: 60vw;
  top: -22vw; right: -14vw;
  background: rgba(194, 242, 74, .22);
}

.wash.w2 {
  width: 46vw; height: 46vw;
  bottom: -18vw; left: -12vw;
  background: rgba(16, 17, 18, .05);
}

/* Kept so any leftover markup that still says `glass` reads as a paper card. */
.glass {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
/* ------------------------------- topbar ------------------------------- */

/* Floating pill navbar (ref: Minglee). The header itself is a transparent
   full-width rail; `.bar` is the visible white pill inside it. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 14px var(--gut) 6px;
}

/* The rail around the pill is transparent, so a scrolling page showed slivers of
   itself in the gap above and below it — a chip row half-visible over the header
   reads as a rendering fault. This paints the rail in the page colour and fades
   out under the pill so content slides away cleanly instead. The rgba stop
   repeats --bg on purpose: fading to `transparent` interpolates through grey. */
.topbar::before {
  content: '';
  position: absolute;
  inset: 0 0 -16px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 58%, rgba(246, 246, 244, 0) 100%);
}

.bar {
  max-width: var(--maxw);
  margin: 0 auto;
  height: var(--bar-h);
  padding: 0 8px 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding-right: 4px;
}

.brand-mark {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--dark);
  color: var(--accent);
  box-shadow: 0 2px 6px -2px rgba(16, 17, 18, .45);
}

.brand-mark.sm { width: 26px; height: 26px; border-radius: 8px; }
.brand-mark svg { width: 17px; height: 17px; }

.brand-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.045em;
}

.brand-name em { font-style: normal; color: var(--ink-3); }
/* Centre group. `margin:auto` on both sides keeps the links optically centred
   even though the two end groups have different widths. */
.topnav {
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.topnav a {
  position: relative;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}

.topnav a:hover { color: var(--ink); background: var(--bg-2); }

.topnav a[aria-current='page'] {
  color: var(--ink);
  background: var(--bg-2);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--line);
}

.dot {
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 3px;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(179, 231, 51, .28);
}

/* Count bubble on the Cart nav link. Hidden by the `hidden` attr when empty. */
.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: 1px;
}
.topnav a[aria-current='page'] .cart-count { background: var(--accent-2); color: var(--accent-ink); }
/* A class `display` beats the UA `[hidden]` rule, so restore it explicitly —
   otherwise the empty-cart badge shows a "0". */
.cart-count[hidden] { display: none; }

.bar-end {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
}
/* The account button doubles as the "Get started" CTA when logged out, so it
   carries the dark pill styling from ref 5's right-hand button. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--dark);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 2px 8px -3px rgba(16, 17, 18, .4);
  transition: transform .18s ease, box-shadow .18s ease, opacity .16s;
}

.chip:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(16, 17, 18, .55); }
.chip:active { transform: translateY(0); box-shadow: 0 2px 8px -3px rgba(16, 17, 18, .4); }

.chip .ini {
  width: 24px; height: 24px;
  margin-left: -6px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--display);
}

.chip svg { width: 15px; height: 15px; opacity: .8; }
.usermenu {
  position: absolute;
  top: calc(100% - 2px);
  right: max(18px, calc(50vw - var(--maxw) / 2 + 8px));
  z-index: 70;
  width: 236px;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  animation: pop .16s ease-out;
}

@keyframes pop {
  from { opacity: 0; transform: translateY(-6px); }
}

.usermenu-mail {
  padding: 8px 10px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-3);
  word-break: break-all;
}

.usermenu a,
.usermenu button {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
}

.usermenu a:hover,
.usermenu button:hover { background: var(--bg-2); color: var(--ink); }
.usermenu button[data-action='logout'] { color: var(--danger); margin-top: 2px; }
/* ---------------------------- shell + footer --------------------------- */

.view {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px var(--gut) 96px;
}

.page { max-width: 780px; }

.foot {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 30px var(--gut) 44px;
  border-top: 1px solid var(--line);
}

.foot-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.foot-brand { display: inline-flex; align-items: center; gap: 8px; }
.foot-brand .brand-name { font-size: 16px; }

.foot-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--ink-2);
}

.foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.foot-fine {
  margin-top: 16px;
  max-width: 700px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-3);
}
/* ------------------------------- buttons ------------------------------- */

/* 12px radius rather than a full pill: pills read playful, and this store is
   asking people for money. Pills are kept for nav links and filter chips. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--dark);
  border-radius: var(--r-sm);
  background: var(--dark);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  white-space: nowrap;
  /* Some buttons are <a> elements so the browser opens the tab itself. */
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s, color .15s;
}

.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(16, 17, 18, .6); }
.btn:active { transform: none; box-shadow: none; }

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn.lime {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn.lime:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  box-shadow: 0 10px 22px -12px rgba(140, 190, 20, .8);
}

.btn.outline { background: var(--paper); border-color: var(--line-2); color: var(--ink); }
.btn.outline:hover { border-color: var(--ink); box-shadow: var(--sh-2); }

.btn.ghost { background: none; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--bg-2); color: var(--ink); box-shadow: none; transform: none; }

.btn.danger { background: var(--paper); border-color: #f0caca; color: var(--danger); }
.btn.danger:hover { background: var(--danger-bg); border-color: var(--danger); box-shadow: none; }

.btn.block { width: 100%; }
.btn.lg { height: 50px; padding: 0 26px; font-size: 15.5px; }
.btn.sm { height: 34px; padding: 0 13px; font-size: 13px; border-radius: 10px; }
/* Label is hidden and a ring spins in its place, so the button keeps its width
   and the layout does not jump while a request is in flight. */
.btn.spin { color: transparent !important; pointer-events: none; }

.btn.spin::after {
  content: '';
  position: absolute;
  width: 17px; height: 17px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  color: #fff;
  animation: spin .6s linear infinite;
}

.btn.lime.spin::after,
.btn.outline.spin::after,
.btn.ghost.spin::after { color: var(--ink); }

@keyframes spin { to { transform: rotate(360deg); } }

.btn svg { width: 16px; height: 16px; }

.linkish {
  border: 0;
  background: none;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.linkish:hover { color: var(--ink-2); }

.linkish.plain { text-decoration: none; color: var(--ink-2); font-weight: 500; }
.linkish.plain:hover { color: var(--ink); text-decoration: underline; }
/* -------------------------------- fields ------------------------------- */

.field { display: block; }
.field + .field { margin-top: 15px; }

.field label,
.field > span.lab {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  font-size: 14.5px;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
}

.field textarea { height: auto; min-height: 108px; padding: 11px 13px; line-height: 1.55; resize: vertical; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-3); }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #c3c3bc; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(14, 15, 16, .08);
}

.field input:disabled { background: var(--bg-2); color: var(--ink-3); cursor: not-allowed; }

.hint { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
/* A select needs its own chevron once `appearance:none` removes the native one. */
.field select {
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6066' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}

/* Icon sitting inside the control (ref: the mail glyph in the email field). */
.field.icon input { padding-left: 40px; }

/**
 * The wrapper pins the glyph to the input's own box. Anchoring it to the bottom of
 * the whole `.field` put it on top of the hint line in any field that has one.
 */
.field.icon .wrap { position: relative; }

.field.icon .wrap > .fi {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--ink-3);
  pointer-events: none;
}

.field.icon .wrap > .fi svg { width: 100%; height: 100%; }

/* Fixed country prefix welded to the left of the input. */
.field.pre .wrap {
  display: flex;
  align-items: stretch;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}

.field.pre .wrap:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(14, 15, 16, .08); }

.field.pre .cc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  border-right: 1px solid var(--line);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}

.field.pre input { border: 0; border-radius: 0 10px 10px 0; box-shadow: none !important; }
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 18px;
}

.grid2 .field + .field { margin-top: 0; }
.grid2 .field.wide { grid-column: 1 / -1; }

/* Checkbox row — "Remember for 30 days" in ref 1. */
.check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}

.check input {
  width: 17px; height: 17px;
  margin: 0;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  background: var(--paper);
  appearance: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.check input:checked {
  background: var(--dark);
  border-color: var(--dark);
}

.check input:checked::after {
  content: '';
  width: 9px; height: 5px;
  border: 2px solid #fff;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translateY(-1px);
}

/* Divider carrying a word, e.g. OR between the form and the social buttons. */
.orline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ink-3);
}

.orline::before,
.orline::after { content: ''; flex: 1; height: 1px; background: var(--line); }
/* -------------------------- alerts + type bits ------------------------- */

.alert {
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--info-bg);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.alert b { color: var(--ink); }
.alert.info { background: var(--info-bg); border-color: #dfe4ec; }
.alert.err { background: var(--danger-bg); border-color: #f5d5d5; color: #a52c2c; }
.alert.ok { background: var(--ok-bg); border-color: #cfeade; color: #0d7a51; }
.alert.warn { background: var(--warn-bg); border-color: #f2e0bd; color: #8a5500; }

.eyebrow {
  display: inline-block;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lede {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.65;
}

/* Section head: editorial serif, sentence case. Uppercase Archivo read like a
   gym poster; the store is meant to read like a shop. */
.sec-head { margin: 4px 0 24px; }

.sec-head h1,
.sec-head h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 600;
  font-variation-settings: 'opsz' 96;
  text-transform: none;
  letter-spacing: -.022em;
  line-height: 1.06;
}

.sec-head .lede {
  max-width: 62ch;
  margin: 12px 0 0;
  font-size: 14.5px;
}

.sec-head.center { text-align: center; }
.sec-head.center .lede { margin-left: auto; margin-right: auto; }
.sec-head.left { text-align: left; }
.sec-head.left .lede { margin-left: 0; }
/* --------------------------------- auth -------------------------------- */

.auth {
  min-height: calc(100vh - 190px);
  display: grid;
  place-items: center;
  padding: 24px 0 40px;
}

.auth-card {
  width: 100%;
  max-width: 412px;
  padding: 34px 34px 30px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  justify-content: center;
  margin-bottom: 24px;
}

.auth-brand .brand-name { font-size: 19px; }

.auth-head { text-align: center; margin-bottom: 24px; }

.auth-head h1 {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.035em;
}

.auth-head p {
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--ink-2);
}

.auth-head .who {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--bg-2);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
}
/* "Remember for 30 days" left, "Forgot password" right — ref 1. */
.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 20px;
}

.auth-alt {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-2);
}

.auth-alt .linkish { margin-left: 4px; }

.auth-fine {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-3);
  text-align: center;
}

.auth-warn,
.auth-dev { margin-bottom: 16px; }

/* Social buttons: white, bordered, icon + label centred (ref 1). */
.soc { display: grid; gap: 10px; }

.soc .btn { justify-content: center; font-weight: 500; color: var(--ink-2); }
.soc .btn svg { width: 17px; height: 17px; }

.mailrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  margin-bottom: 18px;
  background: var(--bg-2);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--ink-2);
}

.mailrow b { color: var(--ink); word-break: break-all; }
.mailrow .ic { flex: 0 0 auto; width: 17px; height: 17px; color: var(--ink-3); }
.mailrow .ic svg { width: 100%; height: 100%; }
.otp-inputs {
  display: grid;
  /* `1fr` is `minmax(auto, 1fr)`, and an <input>'s auto minimum is its default
     ~20-character width — six of those blew the card open and forced the page to
     scroll sideways. `minmax(0, 1fr)` lets the boxes actually divide the row. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.otp-inputs input {
  min-width: 0;
  width: 100%;
  height: 52px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--paper);
  text-align: center;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}

.otp-inputs input:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(14, 15, 16, .08);
}

.otp-inputs input:not(:placeholder-shown) { border-color: var(--ink); }

/* Progress pips for the 2-step signup / reset flows. */
.steps-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;
}

.steps-dots i {
  width: 22px; height: 3px;
  border-radius: 2px;
  background: var(--line-2);
  transition: background .2s, width .2s;
}

.steps-dots i.on { background: var(--ink); width: 30px; }
.steps-dots i.done { background: var(--accent-2); }
/* -------------------------------- plans -------------------------------- */

/* The whole catalogue sits on one floating paper panel (ref 2). */
.shell {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
  padding: 30px 26px 34px;
}

.hero { text-align: center; padding: 8px 0 4px; }

.hero h1 {
  font-size: clamp(32px, 7vw, 60px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.04em;
}

.hero .lede { max-width: 540px; margin: 14px auto 0; font-size: 14.5px; }

.hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
}

.pill b { color: var(--ink); font-weight: 600; }
.pill .sq { width: 6px; height: 6px; border-radius: 2px; background: var(--accent-2); }
/* Filter chips: active is solid black, the rest are white outlines (ref 2). */
.filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 28px;
}

.chipf {
  height: 38px;
  padding: 0 17px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--paper);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s, transform .16s;
}

.chipf:hover { border-color: var(--ink); color: var(--ink); }

.chipf[aria-pressed='true'] {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
  font-weight: 600;
}

.plans-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 6px 0 18px;
}

/* Explicit column counts, not `auto-fill minmax()`. Auto-fill decided the count
   from the leftover width, so four cards could land as 3 + 1 with a ragged last
   row and visibly unequal tracks. `minmax(0, 1fr)` because plain `1fr` is
   `minmax(auto, 1fr)` and a long plan title would then push its track wider. */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}
.plan-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

.plan-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-2);
  box-shadow: var(--sh-2);
}

.plan-card.sel {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink), var(--sh-2);
}

/* Grey tile behind the product shot, exactly as in ref 2. */
.plan-media {
  position: relative;
  margin: 10px 10px 0;
  border-radius: var(--r-md);
  background: var(--tile);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* `position` here is not decoration. The `.ph` fallback below is absolutely
   positioned, and a positioned element paints above in-flow content no matter
   which one comes first in the markup — so without this the initials wash sits
   on top of a perfectly good photo, and the photo only appears on hover (when
   `transform` promotes the img into the same paint layer). Giving the img its
   own layer keeps it above the fallback at all times. Same reason on
   `.sheet-hero .shot img` and `.rd-media img`. */
.plan-media img {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.plan-card:hover .plan-media img { transform: scale(1.035); }

/* Fallback when no image is set yet: initials on the plan's accent wash. */
.plan-media .ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--pa, #c2f24a) 26%, #fff), var(--tile));
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: rgba(14, 15, 16, .32);
}
/* Ref 2 puts a rating chip here. A real store cannot invent ratings, so the
   slot carries the one number that is genuinely true: the discount. */
/* The three overlays below sit above the photo's new z-index: 1. */
.plan-badge {
  position: absolute;
  z-index: 2;
  top: 10px; left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 27px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: var(--sh-1);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}

.plan-badge svg { width: 12px; height: 12px; color: #e0a800; }

.plan-tag {
  position: absolute;
  z-index: 2;
  bottom: 10px; left: 10px;
  height: 25px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--dark);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.plan-tag.out { background: var(--danger); }

/* Out of stock: the card stays fully readable — someone still wants to know what
   it is and what it costs — but the photo is drained so a scan of the grid tells
   you which ones you can actually buy. */
.plan-card.sold .plan-media img,
.plan-card.sold .plan-media .ph { filter: grayscale(1); opacity: .62; }
.plan-card.sold .price-row .save { display: none; }

.plan-fav {
  position: absolute;
  z-index: 2;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--sh-1);
  color: var(--ink-2);
  cursor: pointer;
  transition: transform .15s, color .15s;
}

.plan-fav:hover { transform: scale(1.08); color: var(--ink); }
.plan-fav svg { width: 15px; height: 15px; }
.plan-fav[aria-pressed='true'] { color: #e0374b; }
.plan-fav[aria-pressed='true'] svg { fill: #e0374b; }
.plan-body {
  padding: 16px 16px 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.plan-dur {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-family: var(--display);
}

.plan-title {
  margin-top: 7px;
  font-size: 18.5px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.25;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.price {
  font-family: var(--display);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.045em;
}

.mrp { font-size: 13.5px; color: var(--ink-3); text-decoration: line-through; }

.save {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 700;
}
.feat {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.feat li {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

.tick {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
}

.tick svg { width: 9px; height: 9px; }

.plan-foot {
  display: flex;
  gap: 9px;
  padding: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--line);
}

.plan-foot .btn { flex: 1; }

.feat-groups { display: grid; gap: 18px; }

.fg-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.fg-head::after { content: ''; flex: 1; height: 1px; background: var(--line); }
/* ----------------------------- redeem panel ---------------------------- */

.redeem-panel {
  margin-top: 24px;
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}

.rp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.rp-head h3 { font-size: 20px; }
.rp-head .lede { font-size: 13.5px; margin-top: 6px; }

.rp-price { text-align: right; }
.rp-price .price { font-size: 28px; }
.rp-price .mrp { display: block; }

/* Numbered flow: what happens after you press buy. */
.flowline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.flowstep {
  padding: 13px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.flowstep i {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-bottom: 8px;
  border-radius: 7px;
  background: var(--dark);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
}

.flowstep b { display: block; font-size: 13.5px; }
.flowstep p { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.5; }
.rp-brands {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.rp-brand {
  display: flex;
  gap: 12px;
  padding: 13px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.bmark {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ba, #c2f24a) 22%, #fff);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.rp-brand b { display: block; font-size: 13.5px; }
.rp-brand p { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-top: 2px; }

.bsteps {
  margin: 8px 0 0;
  padding-left: 15px;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.6;
}

.rp-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.rp-cta .fine { font-size: 12.5px; color: var(--ink-3); flex: 1; min-width: 180px; }
/* -------------------------------- sheet -------------------------------- */

.sheet-wrap { position: fixed; inset: 0; z-index: 90; }

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 21, 22, .38);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: fade .2s ease-out;
}

@keyframes fade { from { opacity: 0; } }

.sheet {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(980px, 100%);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-3);
  animation: rise .28s cubic-bezier(.22, 1, .36, 1);
  overflow: hidden;
}

@keyframes rise { from { transform: translate(-50%, 26px); opacity: .4; } }

.sheet-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 4;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--ink-2);
  cursor: pointer;
}

.sheet-close:hover { background: var(--bg-2); color: var(--ink); }
.sheet-close svg { width: 15px; height: 15px; }

.sheet-body { overflow-y: auto; overscroll-behavior: contain; }
/* Ref 3: eyebrow, then a headline large enough to run over the product photo. */
.sheet-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 0;
  padding: 34px 30px 6px;
}

.sheet-hero .txt { position: relative; z-index: 2; }

.sheet-hero h2 {
  margin-top: 10px;
  font-size: clamp(30px, 4.6vw, 58px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .96;
  text-transform: uppercase;
}

.sheet-hero h2 em {
  display: block;
  font-style: normal;
  color: var(--ink-3);
}

/* Pulled left so the type crosses the image edge, as in the reference. */
.sheet-hero .shot {
  position: relative;
  z-index: 1;
  margin-left: -46px;
  border-radius: var(--r-lg);
  background: var(--tile);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.sheet-hero .shot img {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
}

.sheet-hero .shot .ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--pa, #c2f24a) 28%, #fff), var(--tile));
  font-family: var(--display);
  font-size: 38px;
  font-weight: 800;
  color: rgba(14, 15, 16, .3);
}
.sheet-hero .blurb {
  margin-top: 14px;
  max-width: 40ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* Three boxed facts standing in for ref 3's Qty / Size / Color dropdowns. */
.spec-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
  max-width: 430px;
}

.spec {
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--paper);
}

.spec span {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.spec b { font-size: 13.5px; font-weight: 600; }

.hero-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* Section index, bottom-right of the hero (ref 3's 01–04 pager). */
.pager {
  position: absolute;
  right: 30px; bottom: 14px;
  z-index: 3;
  display: flex;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-3);
}

.pager a { transition: color .15s; }
.pager a:hover { color: var(--ink); }
.pager a.on { color: var(--ink); }
/* Vertical-text info cards, straight from the reference's "Info" row. */
.info-wrap { padding: 24px 30px 4px; }

.info-lab {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}

.info-cards {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.vcard {
  flex: 0 0 auto;
  width: 118px;
  height: 168px;
  padding: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
}

.vcard .vt {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: uppercase;
  line-height: 1.2;
}

.vcard .vn {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  align-self: flex-start;
}

.vcard.hot { background: var(--accent); border-color: var(--accent); }
.vcard.hot .vn { color: rgba(16, 20, 10, .55); }
.sheet-in { padding: 24px 30px 26px; display: grid; gap: 26px; }

.detail-block h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}

.detail-block p { font-size: 14px; line-height: 1.7; color: var(--ink-2); }

.item-list { display: grid; gap: 10px; }

.item {
  display: flex;
  gap: 13px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.item:hover { border-color: var(--line-2); box-shadow: var(--sh-1); }
.item b { display: block; font-size: 14px; }
.item p { font-size: 13px; color: var(--ink-2); margin-top: 3px; line-height: 1.55; }

.item .thumb {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 11px;
  background: var(--tile);
  overflow: hidden;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-3);
}

.item .thumb img { width: 100%; height: 100%; object-fit: cover; }

.sticky-cta {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 30px;
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}

.sticky-cta .price { font-size: 22px; }
.sticky-cta .grow { flex: 1; }
/* ------------------------------- checkout ------------------------------ */

.co { max-width: 720px; margin: 0 auto; display: grid; gap: 18px; }

.crumb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: start;
  height: 34px;
  padding: 0 13px 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
}

.crumb:hover { border-color: var(--ink); color: var(--ink); }
.crumb svg { width: 14px; height: 14px; }

/* Four numbered pips with the labels underneath. */
.co-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.co-steps div { text-align: center; }

.co-steps i {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--line-2);
  margin-bottom: 7px;
}

.co-steps div.on i { background: var(--ink); }
.co-steps div.done i { background: var(--accent-2); }

.co-steps span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.co-steps div.on span { color: var(--ink); }
.card {
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  display: grid;
  gap: 18px;
}

.card.mid { text-align: center; justify-items: center; }

/* Ref 4's form header: title, one grey line of help text, then a hairline. */
.form-head { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.form-head h2 { font-size: 19px; }
.form-head p { margin-top: 5px; font-size: 13.5px; color: var(--ink-2); }

/* Photo / avatar row from ref 4. */
.avarow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

.avarow .ava {
  width: 46px; height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 800;
}

.avarow .meta { flex: 1; min-width: 0; }
.avarow .meta b { display: block; font-size: 13.5px; }
.avarow .meta span { font-size: 12.5px; color: var(--ink-3); word-break: break-all; }

/* Order recap. A stacked card now — header, one row per cart line, then the
   subtotal / discount / total block — instead of the old single-price strip. */
.sum {
  display: grid;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.sum-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}
.sum .ph {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--tile);
  overflow: hidden;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-3);
}

.sum .ph img { width: 100%; height: 100%; object-fit: cover; }
.sum .who { flex: 1; min-width: 0; }
.sum .who b { display: block; font-size: 14.5px; }
.sum .who span { font-size: 12.5px; color: var(--ink-3); }

.sum-lines { display: grid; gap: 4px; padding: 14px 18px; }
.sum-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.sum-line > span { color: var(--ink-2); min-width: 0; }
.sum-line > b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum-line i { font-style: normal; color: var(--ink-3); font-size: 12.5px; }

.sum-tot {
  display: grid;
  gap: 6px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.sum-line.disc { color: var(--ok); }
.sum-line.disc > span { color: var(--ok); display: inline-flex; align-items: center; gap: 5px; }
.sum-line.disc svg { width: 14px; height: 14px; }
.sum-line.disc > b { color: var(--ok); }
.sum-line.grand {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px dashed var(--line-2);
  font-size: 15px;
}
.sum-line.grand > span { color: var(--ink); font-weight: 600; }
.sum-line.grand > b {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ---------------------------- apply-coupon block -------------------------- */

/* Its own card on the details / awaiting-payment step. Lime hairline so it reads
   as the one place on the page where the price can still move. */
.promo-card { border-color: var(--line-2); }
.promo-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}
.promo-head h3 svg { width: 17px; height: 17px; color: var(--accent-2); }
.promo-head p { margin-top: 5px; font-size: 13px; color: var(--ink-2); }

/* Code box + Apply. The input grows, the button stays put. */
.promo-in { display: flex; gap: 10px; }
.promo-in input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.promo-in input:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(16, 17, 18, .06);
}
.promo-in .btn.sm { height: 44px; padding: 0 20px; }

/* Applied state — a settled green strip, not a form. */
.promo-on {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  background: var(--ok-bg);
  border: 1px solid #bfe6d3;
}
.promo-on .pt {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--ok);
  color: #fff;
}
.promo-on .pt svg { width: 17px; height: 17px; }
.pt-txt { flex: 1; min-width: 0; }
.pt-txt b { display: block; font-size: 14px; }
.pt-txt span { font-size: 12.5px; color: var(--ink-2); }

/* Public coupons the owner published — tap one instead of typing it. */
.promo-list { display: grid; gap: 8px; margin-top: 4px; }
.promo-list-h {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.promo-chip {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3px 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.promo-chip:hover { border-color: var(--ink); background: var(--paper); transform: translateY(-1px); }
.pc-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .03em;
}
.pc-code svg { width: 14px; height: 14px; color: var(--accent-2); }
.pc-terms { grid-column: 1; font-size: 12px; color: var(--ink-2); }
.pc-go {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 6px 12px;
  border-radius: 999px;
}

/* --------------------------------- cart ---------------------------------- */

.cart-head h1 { font-family: var(--serif); font-size: clamp(28px, 6vw, 40px); }
.cart-head p { margin-top: 6px; font-size: 14px; color: var(--ink-2); }

.cart-list { padding: 8px 18px; gap: 0; }
.cart-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
}
.cart-row + .cart-row { border-top: 1px solid var(--line); }
.cr-ph {
  position: relative;
  flex: 0 0 auto;
  width: 54px; height: 54px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--tile);
  display: grid;
  place-items: center;
}
.cr-ph .ph {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  color: var(--ink-3);
}
.cr-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-txt { flex: 1; min-width: 0; }
.cr-txt b { display: block; font-size: 15px; }
.cr-txt span { font-size: 12.5px; color: var(--ink-3); }

.cr-side { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--bg);
}
.qbtn {
  width: 32px; height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.qbtn:hover:not(:disabled) { background: var(--bg-2); }
.qbtn:disabled { color: var(--ink-3); cursor: default; }
.qn {
  min-width: 24px;
  text-align: center;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cr-sum {
  min-width: 76px;
  text-align: right;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.cr-del {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.cr-del:hover { background: var(--danger-bg); color: var(--danger); }
.cr-del svg { width: 17px; height: 17px; }

.cart-foot { gap: 14px; }
.cart-tot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.cart-tot span { font-size: 14px; color: var(--ink-2); }
.cart-tot b {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.cart-note {
  font-size: 12.5px;
  color: var(--ink-3);
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.empty-cart { text-align: center; justify-items: center; padding: 44px 24px; }
.empty-cart .ic {
  display: grid;
  place-items: center;
  width: 66px; height: 66px;
  border-radius: 50%;
  background: var(--tile);
  color: var(--ink-3);
}
.empty-cart .ic svg { width: 30px; height: 30px; }
.empty-cart h2 { font-family: var(--serif); font-size: 26px; }
.empty-cart .lede { max-width: 42ch; font-size: 14px; color: var(--ink-2); }

/* ------------------------- smart cart bar (floating) ---------------------- */

/* Slides up from the bottom whenever the cart has items. A dark floating pill
   that echoes the account chip, so it reads as one system with the top bar. */
.cartbar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(540px, calc(100% - 28px));
  padding: 9px 10px 9px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--dark);
  color: #fff;
  box-shadow: var(--sh-3);
  cursor: pointer;
  text-align: left;
  animation: cartbar-up .3s cubic-bezier(.2, .8, .2, 1);
}
.cartbar:hover { background: #000; }
.cartbar[hidden] { display: none; }

.cartbar-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--accent);
}
.cartbar-ic svg { width: 19px; height: 19px; }

.cartbar-txt { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.cartbar-txt b { font-family: var(--display); font-size: 14px; font-weight: 700; }
.cartbar-txt span {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .62);
  font-variant-numeric: tabular-nums;
}

.cartbar-go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 700;
}
.cartbar-go svg { width: 15px; height: 15px; }

@keyframes cartbar-up {
  from { opacity: 0; transform: translate(-50%, 120%); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .cartbar { animation: none; }
}

.pay-wrap {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.qr-frame {
  flex: 0 0 auto;
  width: 216px;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}

.qr-frame img { width: 100%; border-radius: 8px; display: block; }

.qr-frame .load {
  aspect-ratio: 1;
  border-radius: 8px;
  background: linear-gradient(100deg, var(--bg-2) 20%, #f7f7f5 40%, var(--bg-2) 60%);
  background-size: 220% 100%;
  animation: shine 1.2s linear infinite;
}

@keyframes shine { to { background-position: -180% 0; } }

.qr-note { margin-top: 9px; font-size: 12px; color: var(--ink-3); text-align: center; }
.qr-note.bad { color: var(--danger); }

/* ------------------------- payment screen (scan to pay) ------------------- */

/*
 * One column, centred, nothing to read left-to-right. The customer arrives here
 * holding a phone in one hand, so everything they need is stacked in the order
 * they need it: what to pay, the code to scan, how long they have, and what is
 * happening next.
 *
 * There is deliberately no UPI id, payee name or copy button. The QR already
 * carries all three, and a visible id is a field to mistype into the wrong
 * account plus a real name sitting in every payment screenshot.
 */
.pay-card { justify-items: center; text-align: center; gap: 18px; }

.pay-head h2 {
  font-family: var(--display);
  font-size: 23px;
  letter-spacing: -.02em;
  margin: 9px 0 0;
}

.pay-head p { color: var(--ink-2); font-size: 13.5px; margin: 6px 0 0; }

/* The recessed tile the QR sits in. Light grey against the white card, so the
   code reads as an object to point a camera at rather than page decoration. */
.qr-panel {
  position: relative;
  width: min(268px, 78vw);
  padding: 20px;
  background: var(--tile);
  border-radius: var(--r-lg);
}

.qr-hold { background: var(--paper); border-radius: 10px; overflow: hidden; }
.qr-hold img { width: 100%; display: block; }

.upi-open-hint {
  margin: 10px 2px 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
  text-align: center;
}

.qr-hold .load {
  aspect-ratio: 1;
  background: linear-gradient(100deg, var(--bg-2) 20%, #f7f7f5 40%, var(--bg-2) 60%);
  background-size: 220% 100%;
  animation: shine 1.2s linear infinite;
}

.qr-miss {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin: 0;
  padding: 22px;
  font-size: 13px;
  color: var(--ink-2);
}

/* Corner brackets. Drawn on the panel rather than around the code itself so they
   never eat into the quiet zone, which readers need in order to lock on. */
.qr-bracket {
  position: absolute;
  width: 17px;
  height: 17px;
  border: 2.5px solid var(--ink);
  border-radius: 3px;
  pointer-events: none;
}

.qr-bracket.tl { top: 9px; left: 9px; border-right: 0; border-bottom: 0; }
.qr-bracket.tr { top: 9px; right: 9px; border-left: 0; border-bottom: 0; }
.qr-bracket.bl { bottom: 9px; left: 9px; border-right: 0; border-top: 0; }
.qr-bracket.br { bottom: 9px; right: 9px; border-left: 0; border-top: 0; }

.pay-wait {
  display: grid;
  justify-items: center;
  gap: 7px;
  max-width: 330px;
}

.pay-wait b { font-size: 14.5px; }
.pay-wait span:last-child { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

.rings.sm {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2.5px solid var(--line);
  border-top-color: var(--ink);
  animation: spin 1s linear infinite;
  margin-bottom: 3px;
}

@media (max-width: 420px) {
  .pay-head h2 { font-size: 20px; }
  .qr-panel { padding: 15px; border-radius: var(--r-md); }
  .qr-bracket { width: 14px; height: 14px; top: 7px; }
  .qr-bracket.bl, .qr-bracket.br { top: auto; bottom: 7px; }
  .qr-bracket.tl, .qr-bracket.bl { left: 7px; }
  .qr-bracket.tr, .qr-bracket.br { right: 7px; }
}
.upi-box {
  flex: 1;
  min-width: 240px;
  display: grid;
  gap: 12px;
}

.upi-box .row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.upi-box .row code {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  word-break: break-all;
  color: var(--ink);
}

.upi-box .lab {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.timer svg { width: 14px; height: 14px; color: var(--ink-3); }
.timer.hot { background: var(--danger-bg); border-color: #f2cfcf; color: var(--danger); }
.timer.hot svg { color: var(--danger); }
.timer.cool { background: var(--ok-bg); border-color: #cfeade; color: var(--ok); }
.waiting { display: grid; gap: 14px; justify-items: center; text-align: center; }

.waiting .rings {
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--ink);
  animation: spin 1s linear infinite;
}

.dropzone {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 26px 18px;
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-md);
  background: var(--bg);
  text-align: center;
  cursor: pointer;
  transition: border-color .16s, background .16s;
}

.dropzone:hover,
.dropzone.over { border-color: var(--ink); background: var(--bg-2); }

.dropzone .ic { width: 26px; height: 26px; color: var(--ink-3); }
.dropzone .ic svg { width: 100%; height: 100%; }
.dropzone b { font-size: 14px; }
.dropzone span { font-size: 12.5px; color: var(--ink-3); }

.shot-preview {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-2);
}

.shot-preview img { width: 100%; max-height: 320px; object-fit: contain; }

.shot-preview button {
  position: absolute;
  top: 9px; right: 9px;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(16, 17, 18, .78);
  color: #fff;
  cursor: pointer;
}

.shot-preview button svg { width: 13px; height: 13px; }
.status-card { display: grid; gap: 14px; justify-items: center; text-align: center; }

.status-ic {
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--ink-2);
}

.status-ic svg { width: 24px; height: 24px; }
.status-ic.ok { background: var(--ok-bg); color: var(--ok); }
.status-ic.wait { background: var(--warn-bg); color: var(--warn); }
.status-ic.bad { background: var(--danger-bg); color: var(--danger); }

/* ------------------------------- redeem -------------------------------- */

.rd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}

.rd-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}

.rd-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-2); }

.rd-media {
  position: relative;
  margin: 10px 10px 0;
  border-radius: var(--r-md);
  background: var(--tile);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.rd-media img {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
}

.rd-media .ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--pa, #c2f24a) 26%, #fff), var(--tile));
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  color: rgba(14, 15, 16, .3);
}
.rd-body { padding: 15px 16px 17px; display: grid; gap: 9px; flex: 1; }
.rd-body h3 { font-size: 17px; }
.rd-body .meta { font-size: 12.5px; color: var(--ink-3); }

.rd-avatars { display: flex; align-items: center; }

.rd-avatars .a {
  width: 28px; height: 28px;
  margin-right: -7px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--paper);
  background: var(--bg-2);
  font-family: var(--display);
  font-size: 10px;
  font-weight: 800;
  color: var(--ink-2);
}

.rd-more { margin-left: 14px; font-size: 12.5px; color: var(--ink-3); }

.cp-list { display: grid; gap: 14px; }

.cp {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.cp-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--line);
}

.cp-head .bmark { width: 40px; height: 40px; }
.cp-head .t { flex: 1; min-width: 0; }
.cp-head .t b { display: block; font-size: 15px; }
.cp-head .t span { font-size: 12.5px; color: var(--ink-3); }

.cp-state {
  height: 26px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: var(--bg-2);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}

.cp-state.ok { background: var(--ok-bg); color: var(--ok); }
.cp-state.wait { background: var(--warn-bg); color: var(--warn); }
.cp-body { padding: 16px 17px; display: grid; gap: 14px; }

.codebox {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg);
}

.codebox code {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  word-break: break-all;
}

.codebox.hid { justify-content: center; border-style: solid; }
.codebox.hid code { filter: blur(6px); user-select: none; text-align: center; }

.steps-ol {
  margin: 0;
  padding-left: 19px;
  display: grid;
  gap: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}

.steps-ol li::marker { color: var(--ink-3); font-weight: 600; }

.cp-actions { display: flex; gap: 9px; flex-wrap: wrap; }

.applink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-size: 13px;
  color: var(--ink-2);
  /* Also rendered as an <a> for the redeem link, which must not look like body copy. */
  text-decoration: none;
  word-break: break-all;
}

.applink:hover { border-color: var(--ink); color: var(--ink); }
.applink svg { width: 14px; height: 14px; }
/* --------------------------- about + contact --------------------------- */

.val-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.val {
  padding: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.val .n {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-3);
}

.val b { display: block; margin-top: 9px; font-size: 15px; }
.val p { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

.contact-card {
  padding: 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.empty {
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 46px 24px;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.empty .ic {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--ink-3);
}

.empty .ic svg { width: 21px; height: 21px; }
.empty h3 { font-size: 19px; }
.empty p { font-size: 13.5px; color: var(--ink-2); max-width: 44ch; }
/* ---------------------------- toasts + skel ---------------------------- */

.toasts {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  display: grid;
  gap: 8px;
  width: min(430px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: var(--dark);
  color: #fff;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-3);
  font-size: 13.5px;
  animation: toast-in .22s cubic-bezier(.22, 1, .36, 1);
}

@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

.toast.out { animation: toast-out .2s ease-in forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px); } }

.toast .ic { flex: 0 0 auto; width: 16px; height: 16px; color: var(--accent); }
.toast .ic svg { width: 100%; height: 100%; }
.toast.err .ic { color: #ff9a9a; }

.skel {
  height: 320px;
  border-radius: var(--r-lg);
  background: linear-gradient(100deg, var(--bg-2) 20%, #fafaf8 40%, var(--bg-2) 60%);
  background-size: 220% 100%;
  animation: shine 1.2s linear infinite;
}
/* ------------------------------ responsive ----------------------------- */

@media (max-width: 900px) {
  .sheet-hero { grid-template-columns: 1fr; padding: 30px 22px 4px; }
  .sheet-hero .shot { margin-left: 0; margin-top: 16px; }
  .pager { position: static; margin: 14px 0 0; justify-content: flex-start; }
  .sheet-in, .info-wrap, .sticky-cta { padding-left: 22px; padding-right: 22px; }
}

@media (max-width: 720px) {
  .topbar { padding: 10px var(--gut) 4px; }
  .bar { height: 58px; padding: 0 7px 0 14px; gap: 6px; }
  .topnav a.wide { display: none; }
  .topnav a { padding: 7px 12px; font-size: 13.5px; }
  .brand-name { font-size: 16px; }
  .chip { height: 38px; padding: 0 14px; font-size: 13px; }
  .chip .lbl { display: none; }
  .usermenu { right: 12px; }

  /* Padding comes from `--gut` (set to 15px in the phone block further down) so
     the full-bleed `.catbar` lines up with the content on either side of it. */
  .view { padding: 16px var(--gut) 76px; }
  .shell { padding: 22px 16px 26px; border-radius: var(--r-lg); }
  .grid2 { grid-template-columns: 1fr; }
  .auth-card { padding: 26px 20px 24px; border-radius: var(--r-md); }
  .otp-inputs { gap: 6px; }
  .otp-inputs input { height: 48px; font-size: 18px; }
  .card { padding: 18px; }
  .spec-row { grid-template-columns: 1fr; max-width: none; }
  .qr-frame { width: 100%; }
  .co-steps span { font-size: 9.5px; letter-spacing: 0; }
  .foot { padding: 24px var(--gut) 36px; }
  .sheet { max-height: 96vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .sticky-cta { padding: 12px 16px; }
  .sticky-cta .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------- late additions ------------------------- */

/* The second half of a headline, greyed back so the first half leads. */
.hero h1 em,
.plans-head h2 em { font-style: normal; color: var(--ink-3); }

/* Bundle rows inside the sheet: brand name as a small eyebrow over the title. */
.item .who {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.item h4 {
  margin-top: 2px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.item > div { min-width: 0; }
.item .feat-groups { margin-top: 13px; }

/**
 * Brand thumbnails are optional: every chip renders its initials first and the
 * remote image sits on top, so an unset `/img` key degrades to a readable mark
 * instead of a broken-image glyph. The image has to be clipped to the chip.
 */
.bmark,
.rd-avatars .a { position: relative; overflow: hidden; }

.bmark img,
.rd-avatars .a img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "Active" flag on a bought pack — the one badge the redeem grid needs. */
.rd-tag {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  height: 24px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--dark);
  color: var(--accent);
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* The UPI / email readout stacks its label tight against the value. */
.upi-box { gap: 8px; }

/**
 * Set on <body> while the detail sheet is open. Without it the page kept scrolling
 * behind the backdrop, so closing the sheet dumped you somewhere else in the list.
 */
body.locked { overflow: hidden; }

/* =========================================================================
   Save&Fix redesign — editorial display type, the category system, the
   landing page, and the responsive tiers. Appended last so these rules win
   over the older ones they replace.
   ========================================================================= */

/* ------------------------- display type ------------------------- */

/* Fraunces is opted into by name rather than set on `h1..h4`, because half the
   headings in this file are 11px uppercase labels where a serif would just look
   like a mistake. Archivo keeps those, and the prices. */
.lp-hero h1,
.lp-head h2,
.cat-head h1,
.cat-card h3,
.auth-head h1,
.sheet-hero h2,
.empty h3,
.form-head h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-variation-settings: 'opsz' 96;
  letter-spacing: -.02em;
  text-transform: none;
}

/* The second clause of a headline, set in italic lime/grey so the eye lands on
   the first half. `em` is the markup the JS already emits. */
.lp-hero h1 em,
.cat-head h1 em,
.sheet-hero h2 em {
  font-style: italic;
  font-weight: 500;
}

/* ------------------------- landing: promo card ------------------------- */

/* The hero is a stack, not a track: every slide is placed in the same grid cell,
   so the card is as tall as its tallest slide and nothing reflows when one fades
   into the next. Absolutely positioning the slides instead would have collapsed
   the card to zero height and forced a hardcoded min-height per breakpoint. */
.lp-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 18px;
  border-radius: var(--r-xl);
  background: var(--dark);
  background-image: radial-gradient(120% 140% at 8% 0%, #1d2022 0%, #101112 58%);
  color: #fff;
  overflow: hidden;
  box-shadow: var(--sh-3);
}

.lp-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: stretch;
  opacity: 0;
  /* visibility keeps the off-screen slides out of hit testing and out of the
     accessibility tree; it flips discretely so the fade still reads. */
  visibility: hidden;
  transform: translate3d(0, 10px, 0);
  transition: opacity .55s ease, transform .55s ease, visibility .55s;
}

.lp-slide.on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.lp-dots {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(10, 11, 12, .5);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
}

.lp-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .34);
  cursor: pointer;
  transition: background .25s ease, width .25s ease;
}

.lp-dot:hover { background: rgba(255, 255, 255, .62); }
.lp-dot[aria-current='true'] { width: 22px; background: var(--accent); }

.lp-copy { padding: 46px 12px 46px 44px; align-self: center; }

.lp-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 13px 0 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}

.lp-tag i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(194, 242, 74, .18);
}

.lp-hero h1 {
  margin-top: 20px;
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -.028em;
}

.lp-hero h1 em { color: var(--accent); }

.lp-copy > p {
  margin-top: 16px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.68;
  color: rgba(255, 255, 255, .7);
}

.lp-cta { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; }

/* The outline button is designed for paper, so it is re-skinned here rather
   than given its own modifier the rest of the app would have to know about. */
.lp-hero .btn.outline {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}

.lp-hero .btn.outline:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .4); }
.lp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px;
  color: rgba(255, 255, 255, .58);
}

.lp-facts b { color: #fff; font-weight: 600; }

/* Photo bleeds off the right edge and fades into the card on its left, so the
   headline can sit close to it without fighting the image for contrast. The
   gradient underneath is not a placeholder colour — plan thumbnails are optional
   in this catalogue, and `onerror` removes the <img>, so this is what a plan with
   no artwork set actually shows. */
.lp-art {
  position: relative;
  min-height: 300px;
  background:
    radial-gradient(120% 120% at 82% 18%, rgba(194, 242, 74, .3) 0%, rgba(194, 242, 74, 0) 58%),
    linear-gradient(160deg, #24272a 0%, #15171899 60%, #101112 100%);
}

.lp-art img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 32%;
  opacity: .92;
}

/* Sits under the photo, so a section whose plans have no artwork set still reads
   as itself instead of as an empty dark panel. */
.lp-ghost {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(194, 242, 74, .42);
}

.lp-ghost svg {
  width: 44%;
  max-width: 168px;
  height: auto;
  stroke-width: 1;
}

.lp-art::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, #101112 0%, rgba(16, 17, 18, .78) 26%, rgba(16, 17, 18, 0) 72%);
}

/* ------------------------- landing: sections ------------------------- */

.lp-sec { margin-top: 54px; }

.lp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 24px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.lp-head > div { min-width: 0; }

.lp-head h2 {
  font-size: clamp(25px, 3.4vw, 36px);
  line-height: 1.08;
}

.lp-sub {
  margin-top: 9px;
  max-width: 66ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
}
/* "View all ›" — the section link from the reference. */
.viewall {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 4px;
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}

.viewall i { font-style: normal; font-size: 17px; line-height: 1; transition: transform .18s; }
.viewall:hover { color: var(--ink); border-bottom-color: var(--ink); }
.viewall:hover i { transform: translateX(3px); }

/* Numbered how-it-works strip. */
.lp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.lp-steps li {
  display: flex;
  gap: 14px;
  padding: 22px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.lp-steps b {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--dark);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12.5px;
}

.lp-steps > li > div { min-width: 0; }
.lp-steps strong { display: block; font-size: 15px; letter-spacing: -.015em; }
.lp-steps p { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
/* ------------------------- the category toggle ------------------------- */

/* Sub-navigation under the main header. It scrolls sideways instead of wrapping,
   so adding a sixth category never pushes the page content down a row. */
.catbar {
  margin: 0 calc(var(--gut) * -1) 6px;
  padding: 0 var(--gut);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.catbar::-webkit-scrollbar { display: none; }

.catbar-in {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: var(--sh-1);
}

.cseg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background .16s, color .16s;
}

.cseg:hover { background: var(--bg-2); color: var(--ink); }

.cseg .ci { display: grid; place-items: center; width: 17px; height: 17px; color: var(--ink-3); }
.cseg .ci svg { width: 100%; height: 100%; }
.cseg .cl { letter-spacing: -.01em; }

.cseg .cn {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: var(--ink-3);
}
.cseg.on {
  background: var(--dark);
  color: #fff;
  font-weight: 600;
}

.cseg.on .ci { color: var(--accent); }
.cseg.on .cn { background: rgba(255, 255, 255, .14); color: var(--accent); }

/* `dim` marks a section with nothing in stock. Faded, but still a live link —
   the page it opens explains what is coming, which is the point. */
.cseg.dim { color: var(--ink-3); }
.cseg.dim .cn { font-family: var(--display); letter-spacing: .06em; text-transform: uppercase; }
.cseg.on.dim { color: #fff; }

/* ------------------------- category boxes ------------------------- */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}

/* A faint lime wash from the top-left corner, so the tiles read as a set
   without needing five different photographs. */
.cat-card::before {
  content: '';
  position: absolute;
  top: -46px; left: -46px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: rgba(194, 242, 74, .3);
  filter: blur(28px);
  transition: opacity .22s;
}

.cat-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: var(--sh-2);
}

.cat-card > * { position: relative; }

/* Optional picture band, full-bleed out of the card's own padding. If the file
   is missing the img's `error` handler deletes this whole span, so the tile
   falls back to exactly the icon-only layout it had before — which is why the
   negative margins live here and not on the card. */
.cc-art {
  display: block;
  margin: -22px -20px 2px;
  aspect-ratio: 16 / 9;
  background: var(--bg-2);
  overflow: hidden;
}

.cc-art img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.cat-card:hover .cc-art img { transform: scale(1.04); }

/* The badge rides the photo's lower edge instead of sitting under it — two
   stacked blocks would push the plan count off a 225px tile. */
.cc-art + .cc-ic {
  margin-top: -34px;
  margin-left: 2px;
  box-shadow: 0 8px 20px rgba(14, 15, 16, .3);
}

.cc-ic {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--dark);
  color: var(--accent);
}

.cc-ic svg { width: 21px; height: 21px; }

.cc-tag {
  align-self: flex-start;
  height: 24px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--bg-2);
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cc-tag.live { background: var(--accent); color: var(--accent-ink); }

.cat-card h3 { font-size: 21px; line-height: 1.12; }

.cc-pts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

.cc-pts li { padding-left: 13px; position: relative; }

.cc-pts li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 5px; height: 5px;
  border-radius: 2px;
  background: var(--line-2);
}
.cc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-2);
}

.cc-foot b { font-weight: 600; letter-spacing: -.01em; }

.cc-foot i {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--ink);
  transition: background .16s, color .16s, transform .16s;
}

.cc-foot i svg { width: 13px; height: 13px; }
.cat-card:hover .cc-foot i { background: var(--accent); color: var(--accent-ink); transform: translateX(2px); }

/* Not-yet-stocked tile: the wash and the arrow step back so the live ones lead. */
.cat-card.dim { background: #fbfbf9; }
.cat-card.dim::before { opacity: 0; }
.cat-card.dim .cc-ic { background: var(--bg-2); color: var(--ink-3); }
/* Coming-soon sections keep their photo but lose some of its punch, so a live
   tile still wins the row on colour alone. */
.cat-card.dim .cc-art img { filter: saturate(.55) contrast(.98); opacity: .88; }
.cat-card.dim .cc-art + .cc-ic { box-shadow: var(--sh-1); }
.cat-card.dim h3 { color: var(--ink-2); }
.cat-card.dim .cc-foot { color: var(--ink-3); }

/* ------------------------- category page head ------------------------- */

.cat-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 216px;
  align-items: center;
  gap: 30px;
  margin: 14px 0 34px;
  padding: 34px 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
}

.ch-copy h1 {
  margin-top: 12px;
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.04;
}
.ch-copy .lede { margin-top: 14px; max-width: 62ch; font-size: 15px; }

.ch-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

.ch-side {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 24px 18px;
  border-radius: var(--r-lg);
  background: var(--bg);
  border: 1px solid var(--line);
  text-align: center;
}

.ch-ic {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  border-radius: 12px;
  background: var(--dark);
  color: var(--accent);
}

.ch-ic svg { width: 20px; height: 20px; }

.ch-n {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 600;
  font-variation-settings: 'opsz' 96;
  line-height: 1;
  letter-spacing: -.03em;
}

.ch-l {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ------------------------- small shared bits ------------------------- */

/* Section head with an action parked on the right. */
.sec-head.split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 24px;
  flex-wrap: wrap;
}

.sec-head.split > div { min-width: 0; }
.sec-head.split .btn { flex: 0 0 auto; }
/* "You have an order in progress" — full width, above everything else. */
.resume-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  padding: 13px 16px;
  border-radius: var(--r-md);
}

.resume-alert .linkish { color: inherit; white-space: nowrap; }

/* The empty state a coming-soon category shows instead of a fake listing. It
   already sits inside a `.shell`, so it drops its own card chrome rather than
   drawing a second white box inside the first one. */
.empty.big {
  padding: 60px 26px;
  background: none;
  border: 0;
  border-radius: 0;
}

.empty.big h3 { font-size: 26px; }
.empty.big .ic { width: 58px; height: 58px; }
.empty.big .ic svg { width: 26px; height: 26px; }
.empty-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }

.hero-fine { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }

/* ------------------------- FAQ accordion ------------------------- */

.faq-list {
  display: grid;
  gap: 10px;
  max-width: 860px;
}

.faq-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .16s, box-shadow .16s;
}

.faq-item[open] { border-color: var(--line-2); box-shadow: var(--sh-1); }
.faq-item:hover { border-color: var(--line-2); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.015em;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--ink-2);
  transition: transform .2s, background .16s;
}

.faq-item summary i svg { width: 13px; height: 13px; }
.faq-item[open] summary i { transform: rotate(180deg); background: var(--accent); color: var(--accent-ink); }

.faq-item > p {
  padding: 0 18px 18px;
  max-width: 74ch;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* ------------------------- sheet: brand strip ------------------------- */

.brand-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 30px 0;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.bs-mark {
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  /* The JS sets `--pa` on `.brand-strip`, so read that name, not `--ba`. */
  background: color-mix(in srgb, var(--pa, #c2f24a) 24%, #fff);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.bs-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bs-txt { min-width: 0; flex: 1; }
.bs-lab {
  display: block;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.bs-txt b { display: block; margin-top: 2px; font-size: 15px; letter-spacing: -.02em; }
.bs-txt p { margin-top: 3px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }

.bs-tag {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
}

/* ------------------------- sheet: numbered sections ------------------------- */

.ssec { scroll-margin-top: 20px; }

.ssec-h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.ssec-h .n {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-3);
}

.ssec-h h3 {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  font-variation-settings: 'opsz' 72;
  letter-spacing: -.02em;
}

.ssec-h::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.ssec-lede { font-size: 14px; line-height: 1.65; color: var(--ink-2); margin-bottom: 14px; max-width: 72ch; }
.prose { display: grid; gap: 12px; max-width: 74ch; }
.prose p { font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }
.prose p:first-child { font-size: 16px; color: var(--ink); }

/* Spec table. A grid rather than a <table> so it can stack on a phone. */
.kv {
  display: grid;
  gap: 1px;
  margin-bottom: 18px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.kv-row {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 14px;
  padding: 12px 15px;
  background: var(--paper);
}

.kv-row span { font-size: 13px; color: var(--ink-3); }
.kv-row b { font-size: 13.5px; font-weight: 600; }

/* Numbered how-to list. */
.howto {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.howto li {
  display: flex;
  gap: 14px;
  padding: 15px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.howto > li > div { min-width: 0; }
.howto b { display: block; font-size: 14.5px; letter-spacing: -.015em; }
.howto p { margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

.hn {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  color: var(--ink-3);
}
/* The brand's own redemption steps, tinted with that brand's accent so it reads
   as quoted from them rather than as more of our copy. */
.redeem-card {
  padding: 18px 20px 20px;
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--pa, #c2f24a) 40%, var(--line));
  background: color-mix(in srgb, var(--pa, #c2f24a) 9%, #fff);
}

.rc-lab {
  display: block;
  margin-bottom: 12px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.redeem-card .steps-ol { margin: 0; }

.notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 74ch;
}

.notes li { display: flex; gap: 11px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

.notes i {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--ink-2);
}

.notes i svg { width: 11px; height: 11px; }

/* Inside the sheet the FAQ sits on the grey wash, so the rows go white-on-grey. */
.ssec .faq-list { max-width: none; }
.ssec .faq-item { background: var(--paper); }
/* The old rule set `line-height:.96` for uppercase Archivo. A serif with real
   descenders clips at that, so the sheet headline gets a little more room. */
.sheet-hero h2 { line-height: 1.02; font-size: clamp(28px, 4.2vw, 50px); }

/* ------------------------- desktop: wide tier ------------------------- */

/* Above the max width the page is centred by `.view`, but the landing hero and
   the tiles were the two places where a fixed min-width made everything hug the
   left edge. Both are `minmax(0, 1fr)` grids now, so they always fill the row. */
@media (min-width: 1281px) {
  .lp-copy { padding: 56px 20px 56px 52px; }
  .lp-sec { margin-top: 62px; }
}

/* ------------------------- laptop ------------------------- */

@media (max-width: 1180px) {
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-copy { padding: 40px 16px 40px 34px; }
  .cat-head { grid-template-columns: minmax(0, 1fr) 190px; padding: 30px 26px; }
}

/* ------------------------- tablet ------------------------- */

@media (max-width: 980px) {
  /* Stacked promo card: photo first, then the copy, with the fade turned
     through 90 degrees so the text still sits on solid dark.

     `auto 1fr` matters. Every slide is stretched to the tallest one inside the
     hero cell, and with two `auto` rows the leftover height was split between
     them — which stretched the photo row past its own aspect ratio, so the art
     derived a width from that height and spilled ~12% out of the card. Handing
     the slack to the copy row instead keeps the photo at its ratio. */
  .lp-slide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .lp-art { order: -1; min-height: 0; aspect-ratio: 21 / 9; }
  .lp-art::after {
    background: linear-gradient(0deg, #101112 6%, rgba(16, 17, 18, .55) 60%, rgba(16, 17, 18, .1) 100%);
  }
  .lp-copy { padding: 30px 26px 32px; }
  .lp-hero h1 { font-size: clamp(34px, 6.4vw, 48px); }
  /* The photo is on top now, so the dots ride it instead of sitting on the
     facts row at the bottom of the copy. */
  .lp-dots { top: 13px; right: 13px; bottom: auto; }

  .cat-head { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ch-side {
    grid-template-columns: auto auto auto;
    justify-items: start;
    align-items: center;
    gap: 4px 14px;
    padding: 16px 18px;
    text-align: left;
  }
  .ch-ic { margin-bottom: 0; }
  .ch-n { font-size: 30px; }

  .lp-sec { margin-top: 46px; }
}
@media (max-width: 860px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  /* Five categories into two columns leaves a hole in the last row. Letting the
     odd tile out span both keeps the block rectangular. */
  .cat-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .lp-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lp-steps li { padding: 17px 16px; }
  .kv-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .brand-strip { flex-wrap: wrap; }
  .bs-tag { order: 3; width: 100%; text-align: center; }
}

/* ------------------------- phone ------------------------- */

@media (max-width: 720px) {
  /* One knob for the page gutter. `.catbar` bleeds edge-to-edge with a negative
     margin of exactly this size, so hardcoding a different padding on `.view`
     is what would knock the two out of alignment. */
  :root { --gut: 15px; }

  .lp-hero { margin-top: 12px; border-radius: var(--r-lg); }
  .lp-art { aspect-ratio: 2 / 1; }
  .lp-copy { padding: 20px 18px 22px; }
  .lp-tag { height: 27px; padding: 0 11px 0 10px; font-size: 10.5px; }
  .lp-hero h1 { margin-top: 12px; font-size: clamp(26px, 7.4vw, 33px); }
  /* Two lines of pitch, then stop. The full write-up is on the section page a tap
     away, and on a 812px screen every extra line of it costs a category tile. */
  .lp-copy > p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.58;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .lp-cta { margin-top: 18px; gap: 9px; }
  /* Full-width stacked buttons: a 44px-tall pill next to another one leaves both
     too narrow to read the label on a 360px screen. */
  .lp-cta .btn { flex: 1 1 100%; }
  /* One tap in the hero on a phone. "How it works" is a footer link and the
     how-a-buy-works strip is a few hundred pixels down this same page, so a
     second stacked pill was spending most of the first screen on a duplicate. */
  .lp-hero .lp-cta .btn.outline { display: none; }
  .lp-facts { margin-top: 16px; padding-top: 13px; gap: 6px 14px; font-size: 12px; }
  /* Two facts fit on one line; the third wrapped onto a second row for every
     coming-soon slide and bought nothing the tile below does not already say. */
  .lp-facts span:nth-child(n + 3) { display: none; }

  .lp-sec { margin-top: 38px; }
  .lp-head { margin-bottom: 16px; gap: 10px 16px; }
  .lp-head h2 { font-size: clamp(23px, 6.6vw, 30px); }
  .lp-sub { font-size: 13.5px; }
  .viewall { font-size: 13px; }

  .catbar { margin-bottom: 4px; }
  .cseg { height: 38px; padding: 0 13px; font-size: 13px; gap: 7px; }
  .cseg .cl { max-width: 128px; overflow: hidden; text-overflow: ellipsis; }

  .cat-head { margin: 10px 0 26px; padding: 24px 20px; border-radius: var(--r-lg); }
  .ch-copy h1 { margin-top: 10px; font-size: clamp(27px, 8vw, 36px); }
  .ch-copy .lede { margin-top: 12px; font-size: 14.5px; }
  .ch-pills { margin-top: 16px; }

  .sec-head { margin-bottom: 18px; }
  .sec-head h1, .sec-head h2 { font-size: clamp(24px, 7vw, 32px); }
  .sec-head.split .btn { width: 100%; }

  .empty.big { padding: 44px 20px; }
  .empty.big h3 { font-size: 22px; }
  .empty-cta .btn { width: 100%; }
}
@media (max-width: 720px) {
  .faq-item summary { padding: 14px 15px; font-size: 14px; gap: 10px; }
  .faq-item > p { padding: 0 15px 16px; font-size: 13.5px; }
  .brand-strip { margin: 14px 16px 0; padding: 12px 13px; }
  .ssec-h h3 { font-size: 20px; }
  .howto li { padding: 13px 14px; }
  .redeem-card { padding: 15px 16px 17px; }
  .cat-card { padding: 18px 16px 15px; gap: 10px; }
  .cc-art { margin: -18px -16px 2px; aspect-ratio: 5 / 3; }
  .cc-ic { width: 38px; height: 38px; border-radius: 12px; }
  .cc-ic svg { width: 18px; height: 18px; }
  .cc-art + .cc-ic { margin-top: -29px; }
  .cat-card h3 { font-size: 18px; }
  /* Two tiles per row is the layout from the reference; the bullet list is what
     has to give way for it, and the tag already says whether the section is live. */
  .cc-pts { display: none; }
  .cc-foot { padding-top: 11px; font-size: 11.5px; }
}

/* Two per row, finally. The card used to carry a subtitle and four feature lines
   and none of that survived at ~150px, which is why an earlier pass gave up and
   went full width. That content now lives behind "Read more", so what is left —
   artwork, duration, name, price, two taps — is exactly what a tile can hold,
   and it matches the reference layout instead of four 400px-tall columns. */
@media (max-width: 560px) {
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .plan-media { margin: 8px 8px 0; aspect-ratio: 1 / 1; }
  .plan-badge { top: 7px; left: 7px; height: 23px; padding: 0 8px; gap: 4px; font-size: 11px; }
  .plan-badge svg { width: 10px; height: 10px; }
  .plan-tag { bottom: 7px; left: 7px; height: 21px; padding: 0 8px; font-size: 9.5px; }
  .plan-fav { top: 7px; right: 7px; width: 28px; height: 28px; }
  .plan-body { padding: 12px 12px 0; }
  .plan-dur { font-size: 10px; letter-spacing: .07em; }
  .plan-title { margin-top: 5px; font-size: 15.5px; }
  .price-row { margin-top: 9px; gap: 5px 7px; }
  .price { font-size: 20px; }
  .mrp { font-size: 12px; }
  /* The saving is already stated by the "% off" badge on the artwork, and at tile
     width this pill was the line that pushed the price onto a third row. */
  .save { display: none; }
  /* Stacked, full-width actions: side by side inside a ~148px tile leaves neither
     label readable, and these are the two taps that matter on this page. */
  .plan-foot { flex-direction: column; gap: 7px; padding: 12px; margin-top: 12px; }
  .plan-foot .btn { width: 100%; }

  .lp-steps b { width: 26px; height: 26px; font-size: 11.5px; }
  .lp-steps strong { font-size: 14.5px; }
  .lp-steps p { font-size: 13px; }
  .filters { gap: 7px; margin-bottom: 22px; }
  .chipf { height: 34px; padding: 0 13px; font-size: 12.5px; }
}

/* Narrowest phones: the category tile keeps its two-up grid, it just loses the
   padding it can no longer afford. */
@media (max-width: 400px) {
  .cat-grid { gap: 10px; }
  .cat-card { padding: 15px 13px 13px; gap: 9px; }
  .cc-art { margin: -15px -13px 2px; aspect-ratio: 3 / 2; }
  .cat-card h3 { font-size: 16.5px; }
  .cc-ic { width: 34px; height: 34px; border-radius: 11px; }
  .cc-ic svg { width: 17px; height: 17px; }
  .cc-art + .cc-ic { margin-top: -26px; }
  .cc-tag { height: 21px; padding: 0 8px; font-size: 9.5px; }
  .cc-foot { font-size: 11px; }
  .cc-foot i { width: 23px; height: 23px; }
  .cc-foot i svg { width: 11px; height: 11px; }
}

/* The hero keeps rotating when motion is reduced — it just cuts instead of
   sliding up, since the global block near the top already flattens the
   transition and only the offset transform is left to undo. */
@media (prefers-reduced-motion: reduce) {
  .lp-slide { transform: none; }
}