/* Rebirth Labs storefront. Direction: "Every page is a Rebirth label scaled to the screen." See docs/DIRECTION.md.
   Layers: tokens, base, layout, components, pages, motion. Only transform, opacity and clip-path animate. */
@layer tokens, base, layout, components, pages, motion;

@layer tokens {
  :root {
    /* material: label paper on the studio ground, cap red, carbon ink */
    --surface-0: oklch(0.99 0.002 30);
    --surface-1: oklch(0.935 0.004 30);
    --surface-2: oklch(0.905 0.005 30);
    --line: oklch(0.86 0.006 30);
    --line-soft: oklch(0.91 0.005 30);
    --ink: oklch(0.20 0.012 20);
    --ok: oklch(0.47 0.13 152);   /* the box ledger's savings rows */
    --ink-2: oklch(0.42 0.012 20);
    --ink-3: oklch(0.50 0.014 20);
    /* The brand red is #e44052 (owner, 09-22). White text on it measures 4.07:1, under the 4.5 floor for a
       14px bold button label, so --accent-hi is the same red one step deeper (4.65:1) and is used only where
       white text sits on a solid fill. --accent-deep is for small red text on light. */
    --accent: #e44052;
    --accent-hi: oklch(0.585 0.198 20.5);
    --accent-deep: oklch(0.45 0.19 20.5);
    --accent-ink: #fff;
    --accent-tint: oklch(0.96 0.032 20.5);
    --focus: var(--accent);
    --surface-inverse: oklch(0.17 0.01 20);
    --ink-inverse: oklch(0.97 0.003 30);

    /* light from a softbox above: warm, soft */
    --shadow-sm: 0 1px 2px oklch(0.2 0.02 30 / 0.06), 0 1px 1px oklch(0.2 0.02 30 / 0.04);
    --shadow-md: 0 2px 4px oklch(0.2 0.02 30 / 0.05), 0 10px 20px oklch(0.2 0.02 30 / 0.07);
    --shadow-lg: 0 4px 8px oklch(0.2 0.02 30 / 0.05), 0 24px 48px oklch(0.2 0.02 30 / 0.10);

    /* type: Archivo carries everything; JetBrains Mono is the label layer */
    --font: "Archivo", "Archivo Fallback", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
    --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1.0625rem; --text-lg: 1.1875rem;
    --text-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
    --text-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
    --text-h1: clamp(2.5rem, 1.6rem + 4vw, 5rem);
    --text-display: clamp(3rem, 1.4rem + 7vw, 7.5rem);
    --leading-tight: 0.95; --leading-snug: 1.1; --leading-body: 1.55;

    /* space with big jumps */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
    --space-section: clamp(6rem, 5rem + 6vw, 12rem);
    --space-section-tight: clamp(3rem, 2.5rem + 3vw, 6rem);

    /* grid */
    --cols: 4; --gutter: 16px; --margin: 20px; --max: 1440px;

    /* radius language: the label's die-cut corner */
    --r-chip: 4px; --r-card: 10px; --r-ctl: 8px;

    /* motion */
    --dur-instant: 80ms; --dur-micro: 160ms; --dur-short: 320ms; --dur-base: 560ms; --dur-long: 900ms;
    --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-move: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-stack: linear(0, 0.42 22%, 0.86 44%, 1.02 62%, 0.99 78%, 1);
    --stagger-tight: 24ms; --stagger-base: 60ms; --stagger-loose: 110ms;
  }
  @media (min-width: 40em) { :root { --cols: 8; --gutter: 20px; --margin: 32px; } }
  @media (min-width: 64em) { :root { --cols: 12; --gutter: clamp(24px, 2vw, 32px); --margin: clamp(40px, 5vw, 80px); } }
}

@layer base {
  @font-face { font-family: "Archivo"; src: url("/fonts/archivo-normal-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
  @font-face { font-family: "Archivo"; src: url("/fonts/archivo-italic-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }
  @font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrainsmono-normal-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
  @font-face { font-family: "Archivo Fallback"; src: local("Arial"); size-adjust: 101%; ascent-override: 88%; descent-override: 22%; line-gap-override: 0%; }

  *, *::before, *::after { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html { font-family: var(--font); color: var(--ink); background: var(--surface-0); -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
  body { margin: 0; font-size: var(--text-base); line-height: var(--leading-body); font-variation-settings: "wdth" 100; text-rendering: optimizeLegibility; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: var(--leading-snug); letter-spacing: -0.02em; font-variation-settings: "wdth" 104; text-wrap: balance; }
  h1 { font-size: var(--text-h1); line-height: var(--leading-tight); }
  h2 { font-size: var(--text-h2); }
  h3 { font-size: var(--text-h3); }
  p { margin: 0; }
  p + p { margin-top: var(--s-4); }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
  button { font: inherit; color: inherit; }
  ::selection { background: oklch(0.57 0.22 24 / 0.18); }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-chip); }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mono { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
  .eyebrow { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: var(--accent-deep); display: inline-flex; align-items: center; gap: 10px; }
  .eyebrow::before { content: ""; width: 18px; height: 6px; background: var(--accent); border-radius: 1px; }
  .lead { font-size: var(--text-lg); color: var(--ink-2); max-width: 58ch; text-wrap: pretty; }
  .num { font-variant-numeric: tabular-nums; }
  hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
}

@layer layout {
  .wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--margin); }
  .grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); }
  .section { padding-block: var(--space-section); }
  .section--tight { padding-block: var(--space-section-tight); }
  .section--flush { padding-block-start: 0; }
  .section--ground { background: var(--surface-1); }
  .stack > * + * { margin-top: var(--s-5); }
  .row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
  .head { display: grid; gap: var(--s-4); max-width: 62ch; margin-bottom: var(--s-7); }
  .head--wide { max-width: none; grid-template-columns: 1fr; }
  @media (min-width: 64em) { .head--split { max-width: none; grid-template-columns: 7fr 5fr; align-items: end; column-gap: var(--gutter); } .head--split .lead { justify-self: end; max-width: 46ch; } }
}

@layer components {
  /* the header: the label's red band, then the label row */
  .hdr { position: sticky; top: 0; z-index: 50; background: color-mix(in oklch, var(--surface-0) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft); }
  .hdr__band { height: 4px; background: var(--accent); }
  .hdr__row { display: flex; align-items: center; gap: var(--s-5); height: 64px; }
  /* the wordmark is a flex item with no basis, so a wide nav squeezed it to nothing below about 1200px.
     It never shrinks; the nav gives ground instead. */
  .hdr__logo { flex: none; }
  .hdr__logo img { height: 26px; width: auto; }
  .hdr__nav { display: none; gap: var(--s-5); margin-left: var(--s-4); white-space: nowrap; }
  .hdr__nav a { text-decoration: none; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); padding: 6px 0; border-bottom: 2px solid transparent; }
  .hdr__nav a:hover, .hdr__nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
  .hdr__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
  /* seven items: keep each label on one line and tighten the rhythm before the phone menu takes over */
  .hdr__nav a { white-space: nowrap; }
  @media (max-width: 82em) { .hdr__nav { gap: clamp(12px, 1.5vw, 20px); } .hdr__nav a { font-size: 13.5px; } .tag-new { margin-left: 5px; padding: 0 5px; font-size: 9px; } }
  .hdr__btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-0); text-decoration: none; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
  .hdr__btn:hover { background: var(--surface-1); }
  .hdr__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
  .hdr__menu { display: inline-flex; }
  .mnav { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-short) var(--ease-reveal); border-top: 1px solid transparent; }
  .mnav[data-open="true"] { grid-template-rows: 1fr; border-top-color: var(--line-soft); }
  .mnav > div { overflow: hidden; }
  .mnav a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line-soft); text-decoration: none; font-weight: 600; }
  .hdr__account { display: none; }
  @media (min-width: 64em) { .hdr__nav { display: flex; } .hdr__account { display: inline-flex; } .hdr__menu, .mnav { display: none; } }

  /* buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 20px; border-radius: var(--r-ctl); border: 1px solid transparent; font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-reveal), transform var(--dur-micro) var(--ease-reveal), border-color var(--dur-micro) var(--ease-reveal); }
  .btn--primary { background: var(--accent-hi); color: var(--accent-ink); }
  .btn--primary:hover { background: oklch(from var(--accent-hi) calc(l - 0.05) c h); transform: translateY(-1px); }
  .btn--primary:active { background: oklch(from var(--accent-hi) calc(l - 0.1) calc(c * 0.9) h); transform: none; }
  .btn--ink { background: var(--ink); color: var(--ink-inverse); }
  .btn--ink:hover { background: oklch(from var(--ink) calc(l + 0.08) c h); transform: translateY(-1px); }
  .btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
  .btn--ghost:hover { background: var(--surface-1); border-color: var(--ink-3); }
  .btn--lg { height: 56px; padding: 0 28px; font-size: var(--text-base); }
  .btn--block { width: 100%; }
  .btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
  .btn__arrow { width: 16px; height: 16px; }

  /* the size chip: the label's red mg chip */
  .chip { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: var(--r-chip); background: var(--accent-hi); color: var(--accent-ink); font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
  .chip--quiet { background: var(--surface-2); color: var(--ink-2); }
  .chip--line { background: transparent; border: 1px solid var(--line); color: var(--ink-2); }

  /* label name: the compound name as printed */
  .lname { font-weight: 800; font-variation-settings: "wdth" 112; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; }

  /* the vial glyph */
  .vial { width: 14px; height: 26px; flex: none; }

  /* label card: label paper with a red band carrying one number */
  .lbl { background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
  .lbl__band { background: var(--accent-hi); color: var(--accent-ink); padding: 14px 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .lbl__band b { font-size: var(--text-h2); font-weight: 800; font-variation-settings: "wdth" 110; letter-spacing: -0.01em; line-height: 1; }
  .lbl__band span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
  .lbl__body { padding: 20px; display: grid; gap: 12px; align-content: start; }
  .lbl__body h3, .lbl__body h2 { font-size: var(--text-h3); }
  .lbl__body p { color: var(--ink-2); font-size: var(--text-sm); }
  .lbl__foot { padding: 16px 20px; border-top: 1px solid var(--line-soft); }
  .lbl__foot a { font-weight: 700; font-size: var(--text-sm); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
  .lbl__foot a:hover .btn__arrow { transform: translateX(4px); }
  .lbl__foot .btn__arrow { transition: transform var(--dur-micro) var(--ease-reveal); }

  /* facts row: the label's small print */

  /* tables: the price list */
  .tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
  .tbl th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
  .tbl td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
  .tbl td.r, .tbl th.r { text-align: right; padding-right: 0; }

  /* the drawer: the bench */
  .drawer { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
  .drawer__scrim { position: absolute; inset: 0; background: oklch(0.2 0.01 20 / 0.4); opacity: 0; transition: opacity var(--dur-short) var(--ease-move); }
  .drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--surface-0); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform 200ms var(--ease-exit); display: grid; grid-template-rows: auto 1fr auto; }
  .drawer[data-open="true"] { pointer-events: auto; }
  .drawer[data-open="true"] .drawer__scrim { opacity: 1; }
  .drawer[data-open="true"] .drawer__panel { transform: none; transition: transform var(--dur-short) var(--ease-move); }
  .drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line-soft); }
  .drawer__body { overflow: auto; padding: 8px 20px; }
  .drawer__foot { padding: 16px 20px 20px; border-top: 1px solid var(--line-soft); display: grid; gap: 12px; background: var(--surface-1); }
  .cart-line { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
  .cart-line img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: var(--surface-1); }
  .cart-line__name { font-weight: 700; font-size: var(--text-sm); }
  .cart-line__meta { color: var(--ink-3); font-size: var(--text-xs); font-family: var(--mono); letter-spacing: 0.06em; }
  .qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; }
  .qty button { width: 32px; height: 32px; border: 0; background: var(--surface-0); cursor: pointer; }
  .qty button:hover { background: var(--surface-1); }
  .qty output { min-width: 32px; text-align: center; font-family: var(--mono); font-size: 13px; }
  .empty { text-align: center; padding: 40px 12px; color: var(--ink-2); display: grid; gap: 12px; justify-items: center; }

  /* progress band while the cart talks to the store */
  .busy { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent-hi); z-index: 100; transition: width var(--dur-base) var(--ease-settle), opacity var(--dur-micro); opacity: 0; }
  .busy[data-on="true"] { opacity: 1; width: 70%; }

  .notice { padding: 14px 16px; border-radius: var(--r-ctl); background: var(--accent-tint); color: var(--accent-deep); font-size: var(--text-sm); border: 1px solid oklch(0.85 0.08 24); }
  .notice--ink { background: var(--surface-1); color: var(--ink-2); border-color: var(--line); }
}

@layer pages {
  /* HERO: the bench */
  /* the original molecule render sits behind the label layout; a maroon scrim keeps the left column readable */
  .hero { position: relative; isolation: isolate; background: #2A0A0E; color: #FBF5F5; overflow: hidden; }
  .hero__bg { position: absolute; inset: 0; z-index: -1; }
  .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }
  .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.17 0.06 20 / 0.94) 0%, oklch(0.17 0.06 20 / 0.74) 36%, oklch(0.17 0.06 20 / 0.22) 62%, oklch(0.17 0.06 20 / 0.30) 100%), linear-gradient(0deg, oklch(0.15 0.05 20 / 0.70), transparent 36%); }
  .hero .eyebrow { color: oklch(0.86 0.06 24); }
  .hero .lead { color: oklch(0.92 0.01 20 / 0.86); }
  .hero .btn--ghost { border-color: oklch(1 0 0 / 0.38); color: #fff; }
  .hero .btn--ghost:hover { background: oklch(1 0 0 / 0.10); border-color: oklch(1 0 0 / 0.6); }
  @media (max-width: 40em) { .hero__bg img { object-position: 56% 50%; } .hero__bg::after { background: linear-gradient(180deg, oklch(0.17 0.06 20 / 0.78) 0%, oklch(0.17 0.06 20 / 0.62) 55%, oklch(0.15 0.05 20 / 0.72) 100%); } }
  .hero__grid { display: grid; grid-template-columns: 1fr; align-items: end; gap: var(--s-6); padding-block: var(--s-8) 0; min-height: min(70vh, 640px); }
  .hero__copy { display: grid; gap: var(--s-4); padding-bottom: var(--s-7); }
  .hero__h1 { font-size: var(--text-display); line-height: 0.92; letter-spacing: -0.03em; font-variation-settings: "wdth" 104; font-weight: 800; }
  .hero__h1 em { font-style: normal; color: oklch(0.74 0.21 24); }
  .hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
  .hero__vials { display: flex; align-items: flex-end; justify-content: center; align-self: end; gap: 0; }
  .hero__vials img { width: auto; height: clamp(300px, 46vw, 560px); filter: drop-shadow(0 22px 28px oklch(0 0 0 / 0.38)); }
  .hero__vials img:nth-child(1), .hero__vials img:nth-child(3) { height: clamp(240px, 38vw, 470px); }
  .hero__vials img:nth-child(1) { margin-right: -9%; } .hero__vials img:nth-child(3) { margin-left: -9%; }
  .hero__vials img:nth-child(2) { position: relative; z-index: 1; }
  @media (max-width: 40em) { .hero__vials img:nth-child(1), .hero__vials img:nth-child(3) { display: none; } .hero__vials img:nth-child(2) { height: 380px; } }
  @media (min-width: 64em) { .hero__grid { grid-template-columns: 7fr 5fr; column-gap: var(--gutter); min-height: min(78vh, 760px); padding-block: var(--s-9) 0; } .hero__copy { padding-bottom: var(--s-9); } }

  /* TIER STRIP: 1 / 3 / 5 / 10 */
  .tiers { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--surface-0); }
  .tiers__cell { padding: 20px; display: grid; gap: 10px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
  .tiers__cell:nth-child(2n) { border-right: 0; }
  .tiers__vials { display: flex; gap: 3px; align-items: flex-end; min-height: 26px; }
  .tiers__off { font-size: var(--text-h2); font-weight: 800; font-variation-settings: "wdth" 110; letter-spacing: -0.02em; line-height: 1; }
  .tiers__off small { font-size: var(--text-sm); font-weight: 600; color: var(--ink-3); letter-spacing: 0; margin-left: 6px; }
  .tiers__note { color: var(--ink-2); font-size: var(--text-sm); }
  .tiers__cell--best { background: var(--accent-tint); }
  @media (min-width: 64em) { .tiers { grid-template-columns: repeat(4, 1fr); } .tiers__cell { border-bottom: 0; } .tiers__cell:nth-child(2n) { border-right: 1px solid var(--line-soft); } .tiers__cell:last-child { border-right: 0; } }

  /* INDEX: the price list */
  .idx__filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--s-5); }
  .idx__filters button { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-0); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
  .idx__filters button[aria-pressed="true"] { background: var(--ink); color: var(--ink-inverse); border-color: var(--ink); }
  .idx { display: grid; border-top: 1px solid var(--line); }
  .idx__row { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-soft); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-reveal); }
  .idx__row:hover { background: var(--surface-1); }
  .idx__row img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; background: var(--surface-1); }
  .idx__name { font-weight: 800; font-variation-settings: "wdth" 108; text-transform: uppercase; letter-spacing: 0.01em; font-size: var(--text-base); }
  .idx__sizes { color: var(--ink-3); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; margin-top: 4px; }
  .idx__price { text-align: right; font-variant-numeric: tabular-nums; }
  .idx__price b { display: block; font-weight: 800; font-size: var(--text-base); }
  .idx__price span { font-size: var(--text-xs); color: var(--ink-3); font-family: var(--mono); letter-spacing: 0.04em; }
  .idx__ten, .idx__coa, .idx__go { display: none; }
  .idx__oos { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
  @media (min-width: 64em) {
    .idx__row { grid-template-columns: 64px minmax(0, 3fr) minmax(0, 2fr) 120px 140px 110px 24px; gap: 20px; padding: 14px 8px; }
    .idx__row:hover { background: var(--surface-1); }
    .idx__sizes { margin-top: 0; }
    .idx__ten { display: block; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
    .idx__ten b { color: var(--accent-deep); font-weight: 800; }
    .idx__ten span { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-3); text-transform: uppercase; }
    .idx__coa { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
    .idx__coa::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
    .idx__go { display: block; width: 18px; height: 18px; color: var(--ink-3); transition: transform var(--dur-micro) var(--ease-reveal); }
    .idx__row:hover .idx__go { transform: translateX(4px); color: var(--ink); }
    .idx__head { display: grid; grid-template-columns: 64px minmax(0, 3fr) minmax(0, 2fr) 120px 140px 110px 24px; gap: 20px; padding: 0 8px 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
    .idx__head .r { text-align: right; }
  }
  @media (max-width: 63.9em) { .idx__head { display: none; } }

  /* PROGRAMS: four labels */
  .labels { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
  @media (min-width: 40em) { .labels { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 64em) { .labels { grid-template-columns: repeat(4, 1fr); } }

  /* COA strip */
  .coa { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 300px); gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-4); margin-right: calc(-1 * var(--margin)); padding-right: var(--margin); scrollbar-width: thin; }
  .coa__cert { scroll-snap-align: start; background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; text-decoration: none; box-shadow: var(--shadow-sm); display: grid; grid-template-rows: auto 1fr; }
  .coa__cert img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; object-position: top; background: var(--surface-1); }
  .coa__meta { padding: 12px 14px; display: grid; gap: 4px; }
  .coa__meta b { font-weight: 800; text-transform: uppercase; font-variation-settings: "wdth" 108; font-size: var(--text-sm); }
  .coa__meta span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3); }

  /* RUO statement: the label's small print, large */
  /* the research-use line closes a page; it should read as a quiet footnote, not a headline (owner, 09-22) */
  .ruo { border-top: 1px solid var(--line); padding-block: clamp(28px, 4vw, 44px); text-align: center; }
  .ruo .wrap { display: grid; justify-items: center; gap: 8px; }
  .ruo p { font-size: var(--text-sm); font-weight: 500; line-height: 1.6; letter-spacing: 0; color: var(--ink-2); max-width: 72ch; text-wrap: pretty; }
  .ruo p::before { content: ""; display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--accent); margin: 0 auto 14px; }
  .ruo small { display: block; color: var(--ink-3); font-size: 12px; max-width: 70ch; }

  /* FOOTER: the bottom band */
  .ftr { background: var(--surface-inverse); color: var(--ink-inverse); }
  .ftr__band { height: 6px; background: var(--accent); }
  .ftr__grid { display: grid; gap: var(--s-7); padding-block: var(--s-8) var(--s-7); }
  .ftr__h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: oklch(0.7 0.01 30); margin-bottom: 14px; font-weight: 500; }
  .ftr__col a { display: block; text-decoration: none; padding: 6px 0; color: oklch(0.9 0.005 30); font-size: var(--text-sm); }
  .ftr__col a:hover { color: #fff; text-decoration: underline; }
  .ftr__logo img { height: 22px; width: auto; }
  .ftr__note { color: oklch(0.72 0.01 30); font-size: var(--text-sm); max-width: 40ch; margin-top: 14px; }
  .ftr__legal { border-top: 1px solid oklch(0.3 0.01 20); padding-block: var(--s-5) var(--s-6); font-size: var(--text-xs); color: oklch(0.65 0.01 30); display: grid; gap: 10px; }
  @media (min-width: 40em) { .ftr__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

  /* PDP: 5/7, the label */
  .pdp { display: grid; gap: var(--s-6); padding-block: var(--s-6) var(--space-section); }
  .pdp__media { background: var(--surface-1); border-radius: var(--r-card); overflow: hidden; aspect-ratio: 1; display: grid; place-items: center; position: relative; }
  .pdp__media img { width: 100%; height: 100%; object-fit: cover; }
  .pdp__media--photo img { object-fit: contain; }
  .pdp__label { display: grid; gap: var(--s-5); align-content: start; }
  .pdp__title { display: grid; gap: 10px; }
  .pdp__name { font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4rem); }
  .pdp__sizes { display: flex; gap: 8px; flex-wrap: wrap; }
  .pdp__size { height: 40px; padding: 0 14px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--surface-0); font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: background-color var(--dur-instant), color var(--dur-instant), border-color var(--dur-instant); }
  .pdp__size[aria-pressed="true"] { background: var(--accent-hi); color: var(--accent-ink); border-color: var(--accent-hi); }
  .pdp__size[disabled] { opacity: 0.45; text-decoration: line-through; cursor: not-allowed; }
  .pdp__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .pdp__price b { font-size: var(--text-h2); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .pdp__price s { color: var(--ink-3); font-size: var(--text-base); }
  .pdp__price .chip { height: 26px; }
  .pdp__per { color: var(--ink-3); font-size: var(--text-sm); font-family: var(--mono); letter-spacing: 0.04em; }
  .pdp__points { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--ink-2); }
  .pdp__points b { color: var(--accent-deep); }
  .pdp__add { display: grid; gap: 10px; }
  .pdp__ship { margin: 2px 0 0; text-align: center; text-wrap: balance; color: var(--ink-2); font-size: 12.5px; line-height: 1.5; }
  @media (min-width: 64em) { .pdp { grid-template-columns: 5fr 7fr; column-gap: calc(var(--gutter) * 2); padding-block: var(--s-8) var(--space-section); } .pdp__media { position: sticky; top: 88px; } }

  /* the tier picker (signature) */
  @media (max-width: 40em) { .tp { grid-template-columns: repeat(2, 1fr); } }

  /* PDP lower chapters */
  .chapters { display: grid; gap: var(--space-section-tight); }
  .chapter { display: grid; gap: var(--s-5); }
  @media (min-width: 64em) { .chapter { grid-template-columns: 4fr 8fr; column-gap: var(--gutter); } }
  .spec { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
  .spec div { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--text-sm); }
  .spec dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); align-self: center; }
  .spec dd { margin: 0; font-weight: 600; }
  .related { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  @media (min-width: 64em) { .related { grid-template-columns: repeat(4, 1fr); } }
  /* long card grids cost more in layout than in script: let the browser skip what is off screen.
     "auto" remembers each card's real size after its first render, so the scrollbar never jumps.
     Unsupported engines simply lay everything out as before. (perf pass, 09-22) */
  .shop > .pcard, .bkgrid > .bk { content-visibility: auto; contain-intrinsic-height: auto 320px; }
  .pcard { display: grid; gap: 10px; text-decoration: none; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--surface-0); transition: box-shadow var(--dur-micro) var(--ease-reveal), transform var(--dur-micro) var(--ease-reveal); }
  .pcard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
  .pcard img { aspect-ratio: 1; width: 100%; object-fit: cover; background: var(--surface-1); }
  .pcard div { padding: 0 14px 14px; display: grid; gap: 4px; }
  .pcard b { font-weight: 800; text-transform: uppercase; font-variation-settings: "wdth" 108; font-size: var(--text-sm); }
  .pcard span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-3); }

  /* the catalogue title sits a step below the h1 scale: it labels a grid rather than opening a page */
  .shop__h1 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem); letter-spacing: -0.02em; }

  /* SHOP grid */
  .shop { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  @media (min-width: 40em) { .shop { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 64em) { .shop { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); } }
  /* homepage catalog: 4 across x 4 rows on desktop, 3 x 4 in between, 2 across x 3 rows on phones (owner, 09-22) */
  .shop--home > :nth-child(n + 7) { display: none; }
  @media (min-width: 40em) { .shop--home > :nth-child(n + 7) { display: grid; } .shop--home > :nth-child(n + 13) { display: none; } }
  @media (min-width: 64em) { .shop--home > :nth-child(n + 13) { display: grid; } }
  .shop__more { margin-top: var(--s-5); display: flex; justify-content: center; }
  @media (max-width: 39.99em) { .shop__more .btn { width: 100%; } }
  .pcard__price { display: flex; align-items: baseline; gap: 2px 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
  .pcard__price span { white-space: nowrap; }
  .pcard__price b { text-transform: none; font-variation-settings: "wdth" 100; font-size: var(--text-base); }

  /* COA LIBRARY */
  .coalib { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  @media (min-width: 40em) { .coalib { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 64em) { .coalib { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); } }
  .cert { display: grid; grid-template-rows: auto 1fr; text-decoration: none; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--surface-0); box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-micro) var(--ease-reveal), transform var(--dur-micro) var(--ease-reveal); }
  .cert:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
  .cert img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; object-position: top; background: var(--surface-1); }
  .cert__meta { padding: 12px 14px 14px; display: grid; gap: 4px; }
  .cert__meta b { font-weight: 800; text-transform: uppercase; font-variation-settings: "wdth" 108; font-size: var(--text-sm); }
  .cert__meta span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3); }
  .search { display: flex; gap: 10px; align-items: center; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-0); max-width: 420px; }
  .search input { border: 0; outline: 0; background: transparent; font: inherit; flex: 1; min-width: 0; }
  .search svg { width: 18px; height: 18px; color: var(--ink-3); }

  /* MEMBERSHIP plans */
  .billing { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
  .billing button { height: 36px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; font-weight: 600; font-size: var(--text-sm); cursor: pointer; }
  .billing button[aria-pressed="true"] { background: var(--ink); color: var(--ink-inverse); }
  .plans { display: grid; gap: var(--s-4); grid-template-columns: 1fr; align-items: stretch; }
  @media (min-width: 40em) { .plans { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 64em) { .plans { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); } }
  .plan { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 18px; padding: 26px 22px 22px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-0); }
  .plan--popular { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .plan--dark { background: var(--surface-inverse); color: var(--ink-inverse); border-color: var(--surface-inverse); }
  .plan__flag { position: absolute; top: -12px; left: 22px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--accent-hi); color: var(--accent-ink); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; display: inline-flex; align-items: center; }
  .plan h2, .plan h3 { font-size: var(--text-h3); font-variation-settings: "wdth" 108; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 800; }
  .plan__tag { color: var(--ink-2); font-size: var(--text-sm); min-height: 2.6em; }
  .plan--dark .plan__tag { color: oklch(0.8 0.01 30); }
  .plan--dark .plan__price span, .plan--dark .plan__yr { color: oklch(0.80 0.012 30); }
  .plan__price { display: flex; align-items: baseline; gap: 6px; }
  .plan__price b { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .plan__price span { color: var(--ink-3); font-size: var(--text-sm); }
  .plan__yr { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .plan__yr .chip { height: 22px; font-size: 10.5px; }
  .plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; border-top: 1px solid var(--line-soft); padding-top: 18px; }
  .plan--dark ul { border-top-color: oklch(0.3 0.01 20); }
  .plan li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); }
  .plan li svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
  .plan li.off { color: var(--ink-3); text-decoration: line-through; }
  .plan--dark li.off { color: oklch(0.55 0.01 30); }
  .plan__mult { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); }
  .plan--dark .plan__mult { color: oklch(0.8 0.15 24); }

  /* POINTS calculator */
  .calc { display: grid; gap: var(--s-5); padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-0); }
  .calc input[type="range"] { width: 100%; accent-color: var(--accent-hi); }
  .calc__out { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
  .calc__out div { display: grid; gap: 4px; }
  .calc__out b { font-size: var(--text-h2); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
  .calc__out span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
  .steps { display: grid; gap: var(--s-4); counter-reset: step; }
  .step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line-soft); }
  .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--mono); font-weight: 700; color: var(--accent-deep); font-size: var(--text-sm); padding-top: 3px; }
  .step h3 { font-size: var(--text-lg); }
  .step p { color: var(--ink-2); font-size: var(--text-sm); margin-top: 6px; }

  /* BUILD A BOX */
  .bx { display: grid; gap: var(--s-6); }
  @media (min-width: 64em) { .bx { grid-template-columns: 7fr 5fr; column-gap: calc(var(--gutter) * 2); align-items: start; } .bx__tray { position: sticky; top: 88px; } }
  .bx__list { display: grid; gap: 8px; }
  .bx__item { display: grid; grid-template-columns: 48px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-0); }
  .bx__item img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--surface-1); }
  .bx__item b { font-weight: 800; text-transform: uppercase; font-variation-settings: "wdth" 108; font-size: var(--text-sm); }
  .bx__item select { height: 34px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; background: var(--surface-0); }
  .bx__item button { height: 34px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--ink); background: var(--ink); color: var(--ink-inverse); font-weight: 700; font-size: 13px; cursor: pointer; }
  .bx__item button[disabled] { opacity: 0.4; cursor: not-allowed; }
  .bx__tray { display: grid; gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-1); }
  .bx__tabs { display: flex; gap: 6px; flex-wrap: wrap; }
  .bx__tabs button { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-0); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; cursor: pointer; }
  .bx__tabs button[aria-pressed="true"] { background: var(--ink); color: var(--ink-inverse); border-color: var(--ink); }
  .bx__slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .bx__slot { aspect-ratio: 3 / 4; border: 1px dashed var(--line); border-radius: 8px; background: var(--surface-0); display: grid; place-items: center; position: relative; overflow: hidden; }
  .bx__slot img { width: 100%; height: 100%; object-fit: cover; }
  .bx__slot.is-full { border-style: solid; }
  .bx__slot small { position: absolute; left: 6px; bottom: 6px; right: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; background: oklch(1 0 0 / 0.88); padding: 3px 5px; border-radius: 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bx__slot button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--ink); color: var(--ink-inverse); cursor: pointer; font-size: 12px; line-height: 1; }
  .bx__slot .vial { width: 16px; height: 30px; opacity: 0.35; }
  .bx__sum { display: grid; gap: 8px; font-size: var(--text-sm); }
  .bx__sum div { display: flex; justify-content: space-between; gap: 12px; }
  .bx__sum .tot { font-weight: 800; font-size: var(--text-lg); border-top: 1px solid var(--line); padding-top: 10px; }
  .bx__sum s { color: var(--ink-3); }
  .bx__fine { color: var(--ink-3); font-size: var(--text-xs); }

  /* WHOLESALE */
  .ws-tiers { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
  @media (min-width: 40em) { .ws-tiers { grid-template-columns: repeat(2, 1fr); } }
  .form { display: grid; gap: 14px; }
  .form label { display: grid; gap: 6px; font-size: var(--text-sm); font-weight: 600; }
  .form input, .form textarea, .form select { height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); font: inherit; background: var(--surface-0); }
  .form textarea { height: auto; padding: 12px 14px; min-height: 120px; resize: vertical; }
  .form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--accent-hi); }
  .form__err { color: var(--accent-deep); font-size: var(--text-xs); font-weight: 600; border-left: 3px solid var(--accent); padding-left: 8px; }
  .form__row { display: grid; gap: 14px; }
  @media (min-width: 40em) { .form__row { grid-template-columns: 1fr 1fr; } }

  /* WHOLESALE builder: cards on the left, the order tray on the right */
  .ws-head { max-width: 72ch; gap: var(--s-3); }
  .ws-h1 { font-size: var(--text-h2); }
  .ws-sub { font-size: var(--text-base); color: var(--ink-2); font-weight: 400; text-wrap: pretty; }
  .ws { display: grid; gap: var(--s-6); align-items: start; }
  .ws__tools { display: grid; gap: var(--s-4); margin-bottom: var(--s-5); }
  .bkgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  .bk { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-0); overflow: hidden; box-shadow: var(--shadow-sm); }
  .bk__media { position: relative; background: var(--surface-1); }
  .bk__media img { aspect-ratio: 1; width: 100%; object-fit: cover; }
  .bk__coa { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 6px; background: oklch(1 0 0 / 0.9); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
  .bk__coa::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  .bk__body { padding: 14px; display: grid; gap: 10px; align-content: start; }
  .bk__name { font-weight: 800; text-transform: none; font-variation-settings: "wdth" 100; letter-spacing: -0.015em; font-size: var(--text-lg); line-height: 1.18; text-wrap: balance; }
  .bk__fam { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-top: -6px; }
  .bk__sizes { display: grid; gap: 6px; }
  .bk__size { display: flex; justify-content: space-between; align-items: center; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-0); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
  .bk__size span:last-child { font-family: var(--mono); font-weight: 500; color: var(--ink-2); font-size: 12px; }
  .bk__size[aria-pressed="true"] { background: var(--ink); color: var(--ink-inverse); border-color: var(--ink); }
  .bk__size[aria-pressed="true"] span:last-child { color: oklch(0.85 0.01 30); }
  .bk__size[disabled] { opacity: 0.45; cursor: not-allowed; }
  /* two or four sizes sit in rows of two, label over price, so the card stays short (owner, 09-22) */
  .bk__sizes[data-n="2"], .bk__sizes[data-n="4"] { grid-template-columns: 1fr 1fr; }
  .bk__sizes[data-n="2"] .bk__size, .bk__sizes[data-n="4"] .bk__size { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; height: auto; min-height: 48px; padding: 7px 10px; line-height: 1.15; }
  .bk__sizes[data-n="2"] .bk__size[disabled] span:last-child, .bk__sizes[data-n="4"] .bk__size[disabled] span:last-child { font-size: 11px; letter-spacing: -0.02em; white-space: nowrap; }
  .bk__size[disabled] span:first-child { text-decoration: line-through; }
  .bk__unit { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: var(--text-xs); color: var(--ink-3); }
  .bk__unit b { font-size: var(--text-lg); color: var(--ink); font-weight: 800; }
  .bk__add { height: 44px; }
  .ws-tray { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-0); box-shadow: var(--shadow-md); }
  .ws-tray__head { display: flex; justify-content: space-between; align-items: baseline; }
  .ws-tray__head b { font-size: var(--text-lg); font-weight: 800; }
  .ws-ladder { display: grid; gap: 8px; padding: 14px; border-radius: var(--r-ctl); background: var(--surface-1); }
  .ws-ladder__bar { position: relative; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
  .ws-ladder__bar i { display: block; height: 100%; width: 0; background: var(--accent-hi); border-radius: 4px; transition: width var(--dur-base) var(--ease-settle); }
  .ws-ladder__bar em { position: absolute; top: 0; bottom: 0; width: 2px; background: oklch(1 0 0 / 0.9); }
  .ws-ladder__marks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
  .ws-ladder[data-tier="2"] .ws-ladder__marks span:nth-child(2) { color: var(--accent-deep); font-weight: 700; }
  .ws-ladder__note { font-size: var(--text-sm); color: var(--ink-2); }
  .ws-lines { display: grid; max-height: 46vh; overflow: auto; }
  .ws-line { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  .ws-line img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; background: var(--surface-1); }
  .ws-line b { font-weight: 800; text-transform: uppercase; font-variation-settings: "wdth" 108; font-size: var(--text-sm); display: block; }
  .ws-line .mono { color: var(--ink-3); font-size: 10.5px; letter-spacing: 0.06em; display: block; margin: 2px 0 6px; text-transform: none; }
  .ws-line .qty button { width: auto; min-width: 32px; padding: 0 8px; font-family: var(--mono); font-size: 12px; }
  .ws-sum { display: grid; gap: 8px; font-size: var(--text-sm); }
  .ws-sum div { display: flex; justify-content: space-between; gap: 12px; }
  .ws-sum .tot { font-weight: 800; font-size: var(--text-lg); border-top: 1px solid var(--line); padding-top: 10px; }
  .ws-sum s { color: var(--ink-3); }
  .ws-sum [data-ws-rate] { color: var(--accent-deep); }
  .empty--tight { padding: 22px 8px; }
  .ws-peek { display: none; }
  @media (min-width: 64em) {
    .ws { grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr); column-gap: calc(var(--gutter) * 1.5); }
    .ws-tray { position: sticky; top: 88px; }
    .bkgrid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (min-width: 80em) { .bkgrid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 63.9em) {
    .ws-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; border-radius: 16px 16px 0 0; max-height: 82vh; overflow: auto; transform: translateY(calc(100% + 80px)); transition: transform var(--dur-short) var(--ease-move); padding-bottom: 88px; }
    .ws-tray.is-open { transform: none; }
    .ws-peek { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 61; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; padding: 0 16px; border-radius: 14px; background: var(--ink); color: var(--ink-inverse); border: 0; box-shadow: var(--shadow-lg); cursor: pointer; text-align: left; }
    .ws-peek > span:first-child { display: grid; line-height: 1.15; }
    .ws-peek .mono { color: oklch(0.7 0.01 30); font-size: 10px; }
    .ws-peek__cta { padding: 8px 12px; border-radius: 8px; background: var(--accent-hi); color: var(--accent-ink); font-weight: 700; font-size: var(--text-sm); }
    .ws-lines { max-height: none; }
    .ws { padding-bottom: 96px; }
  }

  /* BUILD A BOX: tiles, tinted cards, the panel */
  .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin-top: var(--s-5); }
  .tiles--row { grid-template-columns: 1fr; margin-top: var(--s-4); }
  @media (min-width: 64em) { .tiles { grid-template-columns: repeat(4, 1fr); } .tiles--row { grid-template-columns: repeat(2, 1fr); } }
  .tile { position: relative; display: grid; align-content: end; gap: 4px; min-height: 192px; padding: 18px 20px; border-radius: 20px; overflow: hidden; }
  .tile--red { background: oklch(0.95 0.035 24); } .tile--cool { background: oklch(0.95 0.012 240); } .tile--cream { background: oklch(0.96 0.02 85); } .tile--warm { background: oklch(0.95 0.04 150); }
  .tile__big { font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-bottom: auto; font-variation-settings: "wdth" 106; }
  .tile__h { font-weight: 700; font-size: var(--text-sm); } .tile__s { font-size: var(--text-xs); color: var(--ink-3); }
  .tile__chip { position: absolute; top: 16px; left: 20px; height: 22px; font-size: 10.5px; background: var(--surface-0); width: max-content; justify-self: start; }
  /* the water vial: a cutout that floats in the upper right of its tile, never over the copy at the bottom */
  .tile__float { position: absolute; right: 14px; top: 12px; height: 84px; width: auto; display: block; }
  .tile__float .tile__img { position: static; height: 100%; width: auto; border-radius: 0; transform: none; opacity: 1; filter: drop-shadow(0 8px 10px oklch(0.2 0.03 240 / 0.18)); }
  @media (prefers-reduced-motion: no-preference) { .tile__float { animation: tile-float 3.6s ease-in-out infinite; } }
  @keyframes tile-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  .tile--cool .tile__h, .tile--cool .tile__s { max-width: calc(100% - 64px); }
  .tile > *:not(.tile__float):not(.tile__chip):not(.tile__coa):not(.tile__months) { position: relative; z-index: 1; } .tile__float { z-index: 0; } .tile__chip { z-index: 2; }
  @media (max-width: 40em) { .tile__float { height: 96px; right: 12px; top: 10px; } .tile { min-height: 196px; } .tile--cool .tile__h, .tile--cool .tile__s { max-width: none; } }
  .tile__coa { position: absolute; top: 16px; left: 20px; display: inline-grid; grid-template-columns: auto auto; gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-0); box-shadow: var(--shadow-sm); }
  .tile__coa b { font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.02em; } .tile__coa i { grid-column: 1; font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
  .tile__coa em { grid-column: 2; grid-row: 1; font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; padding: 2px 6px; border-radius: 4px; background: oklch(0.93 0.06 24); color: var(--accent-deep); }
  .tile__months { position: absolute; top: 16px; left: 20px; right: 20px; display: flex; gap: 6px; flex-wrap: wrap; }
  .tile__months i, .bxp__pills i { font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: var(--ink-inverse); }
  .tile__months i.off, .bxp__pills i.off { background: transparent; color: var(--ink-3); border: 1px solid var(--line); }
  .tile--line { min-height: 0; grid-template-columns: 40px 1fr; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid var(--line); background: var(--surface-0); border-radius: 14px; }
  .tile--line svg { width: 22px; height: 22px; color: var(--accent-deep); justify-self: center; }
  .tile--line b { display: block; font-size: var(--text-sm); } .tile--line small { color: var(--ink-3); font-size: var(--text-xs); }
  .bk--box { border-radius: 20px; }
  .bk--box .bk__media { background: var(--surface-1); }
  .bk__check { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--ink-inverse); display: none; place-items: center; font-size: 13px; font-weight: 700; }
  .bk--box.is-picked .bk__check { display: grid; }
  .bk--box .bk__coa { bottom: 14px; left: 22px; }
  .bxp { gap: 12px; }
  .bxp__tabs { display: flex; gap: 6px; flex-wrap: wrap; }
  .bxp__tabs button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-0); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; cursor: pointer; }
  .bxp__tabs button[aria-pressed="true"] { background: var(--ink); color: var(--ink-inverse); border-color: var(--ink); }
  .bxp__slots { display: grid; gap: 8px; }
  .bxp__slot { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 12px; color: var(--ink-3); font-size: var(--text-sm); }
  .bxp__slot i { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-1); display: grid; place-items: center; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
  .bxp__slot.is-full { grid-template-columns: 40px 1fr auto 24px; border-style: solid; background: var(--surface-1); color: var(--ink); }
  .bxp__slot.is-full img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; background: var(--surface-0); }
  .bxp__slot.is-full b { display: block; font-size: var(--text-sm); font-weight: 800; text-transform: none; font-variation-settings: "wdth" 100; letter-spacing: -0.01em; } .bxp__slot.is-full small { color: var(--ink-3); font-size: 11px; }
  .bxp__price { text-align: right; } .bxp__price b { display: block; font-size: var(--text-sm); font-weight: 800; } .bxp__price s { font-size: 11px; color: var(--ink-3); }
  .bxp__slot button { width: 24px; height: 24px; border: 0; background: transparent; color: var(--ink-3); font-size: 18px; line-height: 1; cursor: pointer; }
  .bxp__slot button:hover { color: var(--accent-deep); }
  .bxp__free { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: oklch(0.95 0.012 240); }
  .bxp__free img { width: 36px; height: 36px; object-fit: cover; border-radius: 8px; background: var(--surface-0); }
  .bxp__free b { display: block; font-size: var(--text-sm); font-weight: 700; } .bxp__free small { color: var(--ink-3); font-size: 11px; }
  .bxp__freep { text-align: right; } .bxp__freep b { display: block; font-size: var(--text-sm); color: var(--ok); } .bxp__freep s { font-size: 11px; color: var(--ink-3); }
  .bxp__packed { display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: oklch(0.95 0.035 24); }
  .bxp__packed b { font-size: var(--text-sm); } .bxp__packed p { font-size: var(--text-xs); color: var(--ink-2); }
  .bxp__packed-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; } .bxp__packed-btns .btn { height: 40px; font-size: 13px; padding: 0 10px; }
  .bxp__ledger { display: grid; gap: 6px; font-size: var(--text-sm); padding-top: 4px; }
  .bxp__ledger div { display: flex; justify-content: space-between; gap: 12px; } .bxp__ledger s { color: var(--ink-3); } .bxp__ledger .ok { color: var(--ok); }
  .bxp__ledger .tot { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; color: var(--ink); font-weight: 800; align-items: baseline; } .bxp__ledger .tot .num { font-size: var(--text-h3); } .bxp__ledger .tot small { font-weight: 500; color: var(--ink-3); font-size: 12px; }
  .bxp__months { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--surface-1); } .bxp__pills { display: flex; gap: 6px; flex-wrap: wrap; } .bxp__months p { font-size: var(--text-xs); color: var(--ink-3); }
  .bxp [data-box-checkout] small { display: block; font-weight: 500; font-size: 11px; opacity: 0.85; }

  /* 404 */
  .nf { min-height: 60vh; display: grid; align-content: center; gap: var(--s-5); text-align: left; }
  .nf .vial { width: 48px; height: 92px; opacity: 0.4; }

  /* FAQ */
  .faq { border-top: 1px solid var(--line); }
  .faq details { border-bottom: 1px solid var(--line-soft); }
  .faq summary { cursor: pointer; padding: 18px 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
  .faq summary::after { content: "+"; font-family: var(--mono); color: var(--ink-3); }
  .faq details[open] summary::after { content: "\2212"; }
  .faq details p { padding-bottom: 18px; color: var(--ink-2); font-size: var(--text-sm); max-width: 70ch; }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .rv { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-base) var(--ease-settle), transform var(--dur-base) var(--ease-settle); transition-delay: var(--rv-delay, 0ms); }
    .rv.is-in { opacity: 1; transform: none; }
    .hero__vials img { animation: hero-vial var(--dur-long) var(--ease-settle) both; }
    .hero__vials img:nth-child(2) { animation-delay: 80ms; } .hero__vials img:nth-child(3) { animation-delay: 160ms; }
    .hero__line { display: block; clip-path: inset(0 0 100% 0); animation: line-in 700ms var(--ease-settle) both; }
    .hero__line:nth-child(2) { animation-delay: 80ms; } .hero__line:nth-child(3) { animation-delay: 160ms; }
    .hero__copy > :not(.hero__h1) { animation: fade-up 480ms var(--ease-reveal) 420ms both; }
    .hdr__count.is-bump { animation: bump 360ms var(--ease-stack); }
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }
  }
  @keyframes hero-vial { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  @keyframes line-in { to { clip-path: inset(0 0 -10% 0); } }
  @keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes bump { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } }
  @media (prefers-reduced-motion: reduce) {
    .mnav, .drawer__panel, .drawer__scrim, .btn, .idx__go { transition: none; }
  }
}

@layer pages {
  /* ================= How it works: five numbered cards under the home catalog =================
     Grounds are the tile tints already used on the Build a Box page plus the studio grey, so this
     section inherits the palette rather than introducing one. Red appears only where the object
     itself carries a band (the shipping label, the box), which keeps it at cap scale. */
  .bento { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
  @media (min-width: 48em) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .bento > .bnt--wide { grid-column: span 2; }
  }
  @media (min-width: 64em) {
    .bento { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
    .bento > .bnt--wide { grid-column: span 2; }
  }
  .bento > .bnt:nth-child(2) { --rv-delay: 70ms; }
  .bento > .bnt:nth-child(3) { --rv-delay: 140ms; }
  .bento > .bnt:nth-child(4) { --rv-delay: 200ms; }
  .bento > .bnt:nth-child(5) { --rv-delay: 260ms; }

  .bnt { position: relative; display: flex; flex-direction: column; padding: 22px; border-radius: 22px; overflow: hidden; isolation: isolate; background: var(--surface-1); }
  @media (min-width: 64em) { .bnt { padding: 26px; border-radius: 26px; } }
  .bnt--studio { background: var(--surface-1); }
  .bnt--green  { background: oklch(0.95 0.04 150); }
  .bnt--cool   { background: oklch(0.95 0.012 240); }
  .bnt--cream  { background: oklch(0.96 0.02 85); }
  .bnt--red    { background: oklch(0.95 0.035 24); }

  .bnt__no { margin: 0 0 18px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
  .bnt__no i { font-style: normal; color: var(--accent-hi); padding: 0 2px; }
  .bnt__body { margin-top: auto; }
  .bnt__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-0); color: var(--ink); margin-bottom: 14px; box-shadow: 0 1px 2px oklch(0.2 0.02 20 / 0.10), 0 4px 10px -6px oklch(0.2 0.02 20 / 0.28); }
  .bnt__icon svg { width: 20px; height: 20px; }
  .bnt__h { margin: 0 0 8px; font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.01em; font-variation-settings: "wdth" 104; }
  .bnt__p { margin: 0; font-size: var(--text-sm); color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
  .bnt__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: var(--text-sm); font-weight: 700; color: var(--ink); text-decoration: none; }
  .bnt__go .btn__arrow { width: 15px; height: 15px; }
  .bnt__art { position: relative; margin: 2px 0 22px; min-height: 178px; }

  /* the wide card puts its copy beside the object once there is room for both */
  @media (min-width: 64em) {
    .bnt--wide { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); grid-template-rows: auto 1fr; column-gap: var(--s-5); }
    .bnt--wide .bnt__no { grid-column: 1 / -1; }
    .bnt--wide .bnt__body { grid-column: 1; grid-row: 2; margin-top: 0; align-self: center; padding-bottom: 10px; }
    .bnt--wide .bnt__art { grid-column: 2; grid-row: 2; margin: 0; min-height: 300px; }
  }

  /* ---- 01 the certificate we actually ship ---- */
  .art-coa { min-height: 250px; }
  .lotsheet { position: absolute; right: -26px; top: 0; width: 80%; margin: 0; padding: 7px; border-radius: 10px; background: var(--surface-0); transform: rotate(-3deg); transform-origin: 100% 0; box-shadow: 0 1px 2px oklch(0.2 0.02 20 / 0.12), 0 16px 30px -12px oklch(0.2 0.02 20 / 0.30); }
  .lotsheet img { display: block; width: 100%; height: auto; border-radius: 4px; }
  .lotsheet__vial { position: absolute; left: 2px; bottom: -22px; z-index: 2; width: auto; height: 86%; max-height: 260px; filter: drop-shadow(0 12px 16px oklch(0.2 0.03 20 / 0.24)); }
  .lotsheet__lot { position: absolute; right: 2px; bottom: 6px; z-index: 3; margin: 0; display: grid; gap: 3px; padding: 9px 13px; border-radius: 13px; background: var(--surface-0); box-shadow: 0 1px 2px oklch(0.2 0.02 20 / 0.12), 0 10px 20px -10px oklch(0.2 0.02 20 / 0.30); }
  .lotsheet__lot b { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
  .lotsheet__lot span { font-size: 11px; color: var(--ink-2); }
  @media (max-width: 47.99em) { .lotsheet { width: 74%; right: -18px; } .lotsheet__vial { height: 76%; bottom: -14px; } .lotsheet__lot { position: static; margin-top: 8px; box-shadow: none; padding: 0; background: none; } .art-coa { min-height: 214px; } }

  /* ---- 02 one inbox: the answer is set in carbon, the same black facts as the label ---- */
  .art-talk { display: flex; flex-direction: column; gap: 9px; }
  .talk__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 2px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
  .talk__who { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
  .talk__who i { width: 7px; height: 7px; border-radius: 50%; background: oklch(0.52 0.13 150); }
  .talk__ask, .talk__say { margin: 0; padding: 10px 13px; font-size: var(--text-sm); max-width: 90%; }
  .talk__ask { align-self: flex-end; background: var(--surface-0); border-radius: 14px 14px 4px 14px; box-shadow: 0 1px 2px oklch(0.2 0.02 20 / 0.10); }
  .talk__say { align-self: flex-start; background: var(--ink); color: var(--ink-inverse); border-radius: 14px 14px 14px 4px; box-shadow: 0 6px 14px -8px oklch(0.2 0.02 20 / 0.5); }
  .talk__sig { margin: 4px 0 0; font-family: var(--mono); font-size: 11px; color: var(--ink-2); }

  /* ---- 03 the real questions from our own FAQ, as a stack of cards ---- */
  .art-asks { min-height: 172px; }
  .ask { position: absolute; right: 0; margin: 0; padding: 11px 14px; border-radius: 14px; background: var(--surface-0); font-size: var(--text-sm); font-weight: 600; line-height: 1.3; box-shadow: 0 1px 2px oklch(0.2 0.02 20 / 0.10), 0 10px 20px -14px oklch(0.2 0.02 20 / 0.40); transition: transform var(--dur-short) var(--ease-reveal); }
  .ask--3 { top: 0; left: 20px; }
  .ask--2 { top: 46px; left: 10px; }
  .ask--1 { top: 92px; left: 0; }
  .ask--1 b { display: block; margin-top: 5px; font-weight: 700; color: var(--ink); }
  .bnt--cool:hover .ask--3 { transform: translateY(-7px); }
  .bnt--cool:hover .ask--2 { transform: translateY(-3px); }

  /* ---- 04 a shipping label is a label, which is the concept; the band is the only red ---- */
  .art-ship { display: flex; flex-direction: column; justify-content: center; gap: 18px; }
  .shiplabel { position: relative; padding: 14px 14px 11px; border-radius: 12px; background: var(--surface-0); overflow: hidden; transform: rotate(-1.1deg); box-shadow: 0 1px 2px oklch(0.2 0.02 20 / 0.12), 0 14px 26px -14px oklch(0.2 0.02 20 / 0.34); }
  .shiplabel__band { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--accent-hi); }
  .shiplabel__from { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 3px 0 0; }
  .shiplabel__from b { font-size: var(--text-sm); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; font-variation-settings: "wdth" 108; }
  .shiplabel__from span { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
  .shiplabel__to { margin: 3px 0 9px; font-size: 12px; color: var(--ink-2); }
  .shiplabel__code { display: block; width: 100%; height: 28px; fill: var(--ink); }
  .track__rail { position: relative; display: block; margin: 0 5px; border-top: 2px dashed var(--line); }
  .track__runner { position: absolute; left: 0; top: -5px; width: calc(100% - 9px); height: 9px; }
  .track__dot { position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 0 3px oklch(0.57 0.22 24 / 0.15); }
  .track__legend { display: flex; justify-content: space-between; margin: 10px 0 0; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }

  /* ---- 05 the box: paper walls, a red band, four vials standing in it ---- */
  /* The carton, read from slightly above: a back wall behind the vials, the vials standing on a floor you
     never see, a front wall that hides their cut bottoms. Depth comes from three paper tones and two shadows,
     not from an outline. */
  .art-box { display: flex; align-items: flex-end; justify-content: center; min-height: 214px; }
  .bxo { position: relative; width: min(100%, 322px); height: 212px; }
  .bxo__cast { position: absolute; left: 6%; right: 6%; bottom: 0; height: 16px; border-radius: 50%; background: oklch(0.2 0.03 20 / 0.22); filter: blur(9px); }
  .bxo__back { position: absolute; left: 12px; right: 12px; bottom: 44px; height: 82px; border-radius: 5px 5px 0 0; background: oklch(0.905 0.007 30); box-shadow: inset 0 4px 8px -4px oklch(0.2 0.02 20 / 0.45); }
  .bxo__vials { position: absolute; left: 0; right: 0; bottom: 50px; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
  .bxo__v { width: 75px; height: auto; filter: drop-shadow(0 8px 10px oklch(0.2 0.03 20 / 0.26)); }
  .bxo__front { position: absolute; left: 0; right: 0; bottom: 6px; height: 72px; padding: 0 15px 20px; display: flex; flex-direction: column; justify-content: center; gap: 3px; border-radius: 3px 3px 11px 11px; background: var(--surface-0); box-shadow: inset 0 1.5px 0 oklch(1 0 0), inset 0 -1px 0 oklch(0.2 0.02 20 / 0.05), 0 -1px 0 oklch(0.2 0.02 20 / 0.12), 0 18px 26px -16px oklch(0.2 0.03 20 / 0.42); }
  .bxo__band { position: absolute; left: 0; right: 0; bottom: 0; height: 13px; background: var(--accent-hi); border-radius: 0 0 11px 11px; }
  .bxo__mark { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-variation-settings: "wdth" 108; color: oklch(0.36 0.16 26); }
  .bxo__pick { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }

  /* ---- states ---- */
  .bnt__go:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: 4px; }
}

@layer motion {
  /* Every animation below is transform or opacity only, and every one lives inside the no-preference
     query so the reduced state is the plain DOM in its finished position. The reveal itself is the
     site's existing .rv observer; these hang off the .is-in it sets. */
  .bnt { transition: transform var(--dur-micro) var(--ease-reveal), box-shadow var(--dur-micro) var(--ease-reveal); }
  .bnt:hover { box-shadow: 0 2px 4px oklch(0.2 0.02 20 / 0.06), 0 18px 34px -18px oklch(0.2 0.02 20 / 0.34); }
  .bnt__go .btn__arrow { transition: transform var(--dur-micro) var(--ease-reveal); }
  .bnt:hover .bnt__go .btn__arrow { transform: translateX(3px); }
  .lotsheet { transition: transform var(--dur-short) var(--ease-reveal), box-shadow var(--dur-short) var(--ease-reveal); }

  @media (prefers-reduced-motion: no-preference) {
    .bnt:hover { transform: translateY(-3px); }
    .bnt--wide:hover .lotsheet { transform: rotate(-1.4deg) translateY(-7px); box-shadow: 0 2px 5px oklch(0.2 0.02 20 / 0.12), 0 26px 44px -16px oklch(0.2 0.02 20 / 0.34); }

    /* 01 the vial is a physical object on a bench, so it never sits perfectly still */
    .lotsheet__vial { animation: bnt-float 4.6s ease-in-out infinite; }

    /* 02 the question is already there; the answer arrives */
    .talk__say { opacity: 0; transform: translateY(8px); }
    .bnt--green.is-in .talk__say { animation: bnt-rise 460ms var(--ease-reveal) 560ms forwards; }

    /* 04 dispatch to arrival, once, when the card comes into view */
    .track__runner { transform: translateX(0); }
    .bnt--cream.is-in .track__runner { animation: bnt-travel 1500ms cubic-bezier(0.5, 0, 0.2, 1) 420ms forwards; }

    /* 05 THE SIGNATURE MOVE: the fourth pick drops into the box */
    .bxo__v--4 { opacity: 0; transform: translateY(-42px); }
    .bnt--red.is-in .bxo__v--4 { animation: bnt-drop 680ms cubic-bezier(0.34, 1.3, 0.5, 1) 620ms forwards; }
  }

  @keyframes bnt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
  @keyframes bnt-rise { to { opacity: 1; transform: none; } }
  @keyframes bnt-travel { to { transform: translateX(100%); } }
  @keyframes bnt-drop { 0% { opacity: 0; transform: translateY(-42px); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
}

@layer pages {
  /* ================= About =================
     The studio ground under the whole band, the render bleeding off the right edge, and a label-paper panel of
     facts sitting across the seam. The bleed is deliberate: every other section on this page is contained, so
     this one anchors to the screen edge to change the rhythm. */
  .abt { background: var(--surface-1); overflow: hidden; }
  .abt__grid { display: grid; gap: var(--s-5); }
  .abt__h { margin: 10px 0 0; font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; font-variation-settings: "wdth" 112; line-height: 0.98; }
  .abt__blocks { margin-top: var(--s-5); display: grid; gap: 0; }
  .abt__block { padding: 20px 0; border-top: 1px solid var(--line); }
  .abt__block:last-child { border-bottom: 1px solid var(--line); }
  .abt__block h3 { margin: 0 0 7px; font-size: var(--text-base); font-weight: 800; letter-spacing: -0.005em; font-variation-settings: "wdth" 104; }
  .abt__block p { margin: 0; font-size: var(--text-sm); color: var(--ink-2); max-width: 58ch; text-wrap: pretty; }

  .abt__art.rv { --rv-delay: 90ms; }
  .abt__spec.rv { --rv-delay: 160ms; }
  .abt__art { position: relative; margin: 0; border-radius: 20px; overflow: hidden; background: var(--surface-0); box-shadow: 0 1px 2px oklch(0.2 0.02 20 / 0.08), 0 16px 30px -22px oklch(0.2 0.02 20 / 0.32); }
  .abt__art img { display: block; width: 100%; height: auto; object-fit: cover; aspect-ratio: 1 / 1; }

  /* the facts, as a label panel rather than a list */
  .abt__spec { margin: 0; padding: 20px 22px; border-radius: 18px; background: var(--surface-0); box-shadow: 0 1px 2px oklch(0.2 0.02 20 / 0.10), 0 18px 34px -20px oklch(0.2 0.02 20 / 0.38); }
  .abt__spec > div { display: grid; gap: 2px; padding: 11px 0; border-top: 1px solid var(--line-soft, var(--line)); }
  .abt__spec > div:first-child { border-top: 0; padding-top: 0; }
  .abt__spec > div:last-child { padding-bottom: 0; }
  .abt__spec dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
  .abt__spec dd { margin: 0; font-size: var(--text-sm); font-weight: 600; }

  @media (min-width: 48em) {
    .abt__spec { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; padding: 22px 26px; }
    .abt__spec > div:nth-child(2) { border-top: 0; padding-top: 0; }
  }

  @media (min-width: 64em) {
    /* copy and picture side by side inside the wrap, facts as a strip under both. The picture is a grid column,
       so it scales with the page instead of running off the edge. */
    .abt__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 76px); row-gap: var(--s-5); align-items: start; }
    .abt__copy { grid-column: 1; grid-row: 1; }
    .abt__art { grid-column: 2; grid-row: 1; }
    .abt__spec { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 30px; padding: 24px 28px; }
    .abt__spec > div { border-top: 0; padding: 0; }
  }
}

@layer pages {
  /* ================= Shop card =================
     The home teaser card is a single link; the shop card is an article, because a link cannot legally contain
     buttons. Structure overrides are written as .pcard--shop .pcard__x so they outrank the generic `.pcard div`. */
  .pcard--shop { grid-template-rows: auto 1fr; gap: 0; }
  .pcard--shop .pcard__media { position: relative; padding: 0; display: block; background: var(--surface-1); }
  .pcard--shop .pcard__hit { display: block; }
  .pcard--shop .pcard__body { padding: 12px 14px 14px; display: grid; gap: 5px; align-content: start; }
  .pcard--shop .pcard__name { font-size: var(--text-base); font-weight: 800; font-variation-settings: "wdth" 100; letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); text-decoration: none; text-wrap: balance; }
  .pcard--shop .pcard__name:hover { text-decoration: underline; text-underline-offset: 2px; }
  .pcard--shop .pcard__sizes { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-2); }

  /* the badges sit on the foot of the picture, the certificate left and the bestseller right */
  /* .pcard div is (0,1,1) and would beat a bare .pbadges, turning this row into the body grid */
  .pcard--shop .pbadges { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap-reverse; gap: 6px 8px; pointer-events: none; }
  .pbadge { pointer-events: auto; display: inline-flex; align-items: center; gap: 5px; height: 29px; padding: 0 10px; border-radius: 999px; background: var(--surface-0); font-size: 12px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; box-shadow: 0 1px 2px oklch(0.2 0.02 20 / 0.14), 0 5px 12px -6px oklch(0.2 0.02 20 / 0.34); }
  .pbadge b { font-weight: 800; font-size: 12px; text-transform: none; font-variation-settings: "wdth" 100; letter-spacing: 0; }
  .pbadge__ic { width: 13px; height: 13px; color: var(--ok); flex: none; }
  .pbadge__chev { width: 11px; height: 11px; color: var(--ink-3); flex: none; margin-left: -1px; }
  .pbadge__star { width: 12px; height: 12px; flex: none; }
  .pbadge--coa span { font-family: var(--font); font-size: 12px; letter-spacing: 0; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
  .pbadge--coa:hover span { color: var(--ink); }
  .pbadge--best { background: oklch(0.94 0.09 98); color: oklch(0.32 0.07 80); font-weight: 800; margin-left: auto; }

  /* Details and Add */
  .pcard--shop .pcard__acts { margin-top: 9px; padding: 0; display: grid; grid-template-columns: 1fr 1.12fr; gap: 8px; }
  .btn--sm { height: 40px; padding: 0 14px; font-size: var(--text-sm); border-radius: 999px; gap: 7px; }
  .pcard--shop .pcard__acts .btn { width: 100%; }
  .pcard__add[disabled] { opacity: 0.45; cursor: not-allowed; }

  @media (max-width: 40em) {
    .pcard--shop .pbadges { left: 7px; right: 7px; bottom: 7px; gap: 6px; }
    .pbadge { height: 26px; padding: 0 8px; font-size: 11px; gap: 5px; }
    .pbadge b, .pbadge--coa span { font-size: 11px; }
    .pbadge--best { margin-left: 0; }
    .pcard--shop .pcard__acts { grid-template-columns: 1fr 1fr; gap: 6px; }
    .btn--sm { height: 38px; padding: 0 10px; }
  }
}

@layer components {
  /* "New" beside a nav item. Light red because the owner asked for red; his reference image was a mint pill,
     which does not belong to this palette. Sized so it never changes the nav's line height. */
  .tag-new { display: inline-block; margin-left: 7px; padding: 0 6px; border-radius: 999px; background: oklch(0.93 0.055 25); color: oklch(0.42 0.17 25); font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 17px; vertical-align: 1px; }
  .mnav .tag-new { font-size: 10px; line-height: 19px; padding: 0 7px; margin-left: 8px; vertical-align: 2px; }
}

@layer pages {
  /* The Founder card wears the Rebirth mark as an emblem: large, bled off the lower right, and faint enough that
     the text over it keeps its contrast. Upscaled from public/brand/logo-logotype2.png (464px) to 900 and 1350. */
  .plan--dark { position: relative; overflow: hidden; isolation: isolate; }
  .plan__mark { position: absolute; z-index: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 132%; height: auto; opacity: 0.075; pointer-events: none; user-select: none; filter: saturate(1.3) contrast(1.05); }
  .plan--dark > *:not(.plan__mark) { position: relative; z-index: 1; }
  @media (max-width: 63.9em) { .plan__mark { width: 118%; opacity: 0.085; } }
}

@layer base {
  /* the live site's face, subset to the characters this site prints. Used for the hero headline and the footer,
     which are the two places the owner asked to match rebirthlabs.org. */
  @font-face { font-family: "Outfit"; src: url("/fonts/outfit-subset.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
}

@layer pages {
  /* ---- hero headline in the live site's voice ---- */
  /* the hero now carries one call to action, set in the headline's voice */
  .hero__cta { font-family: "Outfit", var(--font); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; font-variation-settings: normal; }
  .hero__ctas { margin-top: 6px; }
  .hero__h1--alt { font-family: "Outfit", var(--font); text-transform: uppercase; font-weight: 700; letter-spacing: -0.005em; line-height: 0.96; font-variation-settings: normal;
                   font-size: clamp(2.4rem, 1.35rem + 5vw, 5.5rem); }
  .hero__h1--alt em { font-style: normal; color: #ff6766; }
  .hero__lead { margin-top: 18px; max-width: 46ch; color: oklch(1 0 0 / 0.84); }

  /* ---- the call to action above the footer ----
     A red field falling into the footer's black. The direction bans decorative gradients; this one is the live
     site's own transition and the owner asked to match it, so it is a deliberate exception, not a default. */
  /* A gradient over the whole band cost about 220ms of main-thread time on a throttled phone, because the painted
     area is huge and it repaints on scroll. The field is a flat fill and only the fade into the footer is a
     gradient, over roughly half the height. Visually the same transition, a fraction of the paint. */
  .cta { position: relative; background: var(--accent-hi); color: #fff; padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 9vw, 120px); text-align: center; }
  .cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; pointer-events: none; background: linear-gradient(180deg, oklch(0.57 0.22 24 / 0) 0%, oklch(0.42 0.17 24) 42%, var(--surface-inverse) 100%); }
  .cta__in { position: relative; z-index: 1; }
  .cta__in { display: grid; justify-items: center; gap: 14px; position: relative; z-index: 1; }
  .cta__h { font-family: "Outfit", var(--font); text-transform: uppercase; font-weight: 700; letter-spacing: 0.01em; font-size: clamp(1.5rem, 1rem + 2.4vw, 2.5rem); margin: 0; font-variation-settings: normal; }
  .cta__p { margin: 0; max-width: 60ch; font-size: var(--text-sm); color: oklch(1 0 0 / 0.88); }
  .cta__btn { margin-top: 10px; background: #fff; color: var(--ink); border-radius: 999px; height: 46px; padding: 0 26px; font-weight: 700; }
  .cta__btn:hover { background: oklch(0.96 0.01 30); }

  /* ---- the footer ---- */
  /* no padding on the footer itself: the call to action is the first thing inside it, so any padding here
     paints a bar of footer background above the red. The columns carry their own top space instead. */
  .ftr { background: var(--surface-inverse); color: var(--ink-inverse); font-family: "Outfit", var(--font); }
  .ftr__grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; padding: clamp(40px, 6vw, 72px) 0 clamp(36px, 5vw, 64px); }
  @media (min-width: 48em) { .ftr__grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 64em) { .ftr__grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: var(--s-6, 56px); } }
  .ftr__mark { display: inline-block; margin-bottom: 18px; }
  .ftr__mark img { display: block; width: 52px; height: auto; }
  .ftr__h { margin: 0 0 16px; font-size: var(--text-base); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; }
  .ftr__col a { display: block; margin-bottom: 11px; text-transform: uppercase; letter-spacing: 0.035em; font-size: var(--text-sm); font-weight: 500; color: oklch(1 0 0 / 0.82); text-decoration: none; }
  .ftr__col a:hover { color: #fff; }
  .ftr__note { margin: 0 0 14px; font-size: var(--text-sm); color: oklch(1 0 0 / 0.78); max-width: 42ch; line-height: 1.55; text-transform: none; letter-spacing: 0; }
  .ftr__brand .ftr__note a { display: inline; margin: 0; text-transform: none; letter-spacing: 0; color: oklch(1 0 0 / 0.9); }

  /* subscribe */
  .sub { position: relative; margin-top: 4px; max-width: 360px; }
  .sub__in { width: 100%; height: 52px; padding: 0 52px 0 18px; border-radius: 10px; border: 1px solid oklch(1 0 0 / 0.16); background: #fff; color: var(--ink); font-family: var(--font); font-size: var(--text-sm); }
  .sub__in::placeholder { color: var(--ink-3); }
  .sub__in:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
  .sub__go { position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; }
  .sub__go svg { width: 20px; height: 20px; }
  .sub__go:hover { background: var(--surface-1); }
  .sub__msg { margin: 10px 0 0; font-size: 12.5px; color: oklch(1 0 0 / 0.86); }
  .sub__msg a { color: #fff; }

  /* bottom bar */
  .ftr__bar { border-top: 1px solid oklch(1 0 0 / 0.1); background: oklch(0.14 0.008 20); }
  .ftr__bar-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px 0; }
  .ftr__bar-in p { margin: 0; font-size: 12.5px; color: oklch(1 0 0 / 0.72); }
  .ftr__pay { height: 14px; width: auto; opacity: 0.92; }
  .ftr__legal { padding: 26px 0 40px; }
  .ftr__legal .ftr__h { font-size: 12px; letter-spacing: 0.08em; margin-bottom: 10px; }
  .ftr__legal p:not(.ftr__h) { margin: 0; font-size: 12.5px; line-height: 1.7; color: oklch(1 0 0 / 0.62); max-width: 118ch; }
}

@layer pages {
  /* The home page has grown to ten sections and its main-thread cost is layout, not script. The heavy
     below-the-fold blocks skip layout until they are near the viewport; "auto" remembers each one's real size
     so the scrollbar never jumps, and engines without support lay everything out as before. */
  .bento > .bnt { content-visibility: auto; contain-intrinsic-height: auto 460px; }
  .abt__art, .coa__cert { content-visibility: auto; contain-intrinsic-height: auto 400px; }
  .ftr__legal { content-visibility: auto; contain-intrinsic-height: auto 160px; }
}

@layer pages {
  /* the compound's own write-up, under the spec strip on the product page */
  .pdp__about { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
  .pdp__about-h { margin: 0 0 10px; font-size: var(--text-base); font-weight: 800; font-variation-settings: "wdth" 104; letter-spacing: -0.01em; }
  .pdp__about p { margin: 0; font-size: var(--text-sm); line-height: 1.65; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
  .pdp__formula { margin-top: 12px !important; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .pdp__formula span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
  .pdp__formula b { font-family: var(--mono); font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
}

@layer pages {
  /* the best-seller rail under the buy box */
  .rail-sec { padding-bottom: 0; }
  .rail__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: var(--s-4); }
  .rail__h { margin: 8px 0 0; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); letter-spacing: -0.02em; }
  .rail__nav { display: flex; gap: 8px; flex: none; }
  .rail__btn { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-0); color: var(--ink); cursor: pointer; }
  .rail__btn svg { width: 17px; height: 17px; }
  .rail__btn:hover { background: var(--surface-1); }
  .rail__btn[disabled] { opacity: 0.35; cursor: default; }
  /* the snapport is the padding box, so without scroll-padding the first card snaps past the gutter and the
     rail loads already scrolled by its own padding */
  .rail { display: grid; grid-auto-flow: column; grid-auto-columns: 200px; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--margin); padding: 4px var(--margin) var(--s-4); scrollbar-width: thin; }
  .rail > * { scroll-snap-align: start; }
  .rail:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; }
  .rail__card .pcard__body { padding: 10px 12px 12px; gap: 4px; }
  .rail__card .pcard__name { font-size: var(--text-sm); }
  .rail__card .pcard__price b { font-size: var(--text-base); }
  .rail__card .pcard__add { width: 100%; margin-top: 6px; }
  .rail__card .pbadge { height: 24px; padding: 0 8px; font-size: 10.5px; gap: 4px; }
  .rail__card .pbadge b, .rail__card .pbadge--coa span { font-size: 10.5px; }
  /* .pcard span is (0,1,1) and was winning the colour, exactly as it did for the badge row */
  .rail__card .rail__tier { position: absolute; right: 7px; top: 7px; z-index: 2; height: 22px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--accent-deep); color: #fff; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }
  @media (min-width: 64em) { .rail { grid-auto-columns: 214px; } }
}

@layer pages {
  /* certificate panel: the lab's released report for this lot */
  .qc { }
  .qc__head { text-align: center; max-width: 66ch; margin: 0 auto var(--s-5); }
  .qc__h { margin: 10px 0 10px; font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.1rem); letter-spacing: -0.02em; }
  .qc__sub { margin: 0; font-size: var(--text-sm); color: var(--ink-2); text-wrap: pretty; }
  .qc__grid { display: grid; gap: var(--s-4); }
  @media (min-width: 64em) { .qc__grid { grid-template-columns: 0.82fr 1.18fr; align-items: start; } }

  .qc__card { background: var(--surface-inverse); color: var(--ink-inverse); border-radius: 18px; padding: 22px; }
  .qc__lab { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
  .qc__logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #fff; flex: none; overflow: hidden; }
  .qc__logo img { width: 36px; height: auto; }
  .qc__labtxt { display: grid; gap: 1px; min-width: 0; }
  .qc__labtxt b { font-size: var(--text-sm); font-weight: 700; }
  .qc__labtxt small { font-size: 11px; color: oklch(1 0 0 / 0.66); }
  .qc__k { margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(1 0 0 / 0.66); }
  .qc__k--dim { color: oklch(1 0 0 / 0.5); margin-top: 2px; }
  .qc__big { margin: 8px 0 0; }
  .qc__big b { font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
  .qc__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid oklch(1 0 0 / 0.14); }
  .qc__meta dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(1 0 0 / 0.58); }
  .qc__meta dd { margin: 3px 0 0; font-size: var(--text-sm); font-weight: 600; }
  .qc__ok { color: oklch(0.82 0.16 150); }
  .qc__chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 0; }
  .qc__chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: oklch(1 0 0 / 0.1); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: oklch(1 0 0 / 0.86); }
  .qc__card .qc__cta { margin-top: 18px; width: 100%; background: #fff; color: var(--ink); border-radius: 999px; height: 44px; font-weight: 700; }
  .qc__card .qc__cta:hover { background: oklch(0.95 0.01 30); }

  .qc__panel { border: 1px solid var(--line); border-radius: 18px; background: var(--surface-0); overflow: hidden; }
  .qc__panelhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
  .qc__count { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: oklch(0.95 0.05 150); color: var(--ok); letter-spacing: 0.06em; }
  .qc__count svg { width: 11px; height: 11px; }
  .qc__rows { list-style: none; margin: 0; padding: 0; }
  .qc__rows li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line-soft, var(--line)); }
  .qc__rows li:last-child { border-bottom: 0; }
  .qc__row-n { display: grid; gap: 1px; min-width: 0; }
  .qc__row-n b { font-size: var(--text-sm); font-weight: 700; }
  .qc__row-n small { font-size: 11px; color: var(--ink-2); }
  .qc__row-v { font-size: var(--text-sm); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
  .qc__tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
  .qc__tag svg { width: 11px; height: 11px; }
  .qc__tag--pass { background: oklch(0.95 0.05 150); color: var(--ok); }
  .qc__tag--reported { background: var(--surface-1); color: var(--ink-2); }
  .qc__foot { margin: 0; padding: 13px 18px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-2); }
  @media (max-width: 47.99em) { .qc__rows li { grid-template-columns: 1fr auto; row-gap: 6px; } .qc__tag { grid-column: 2; } .qc__row-v { grid-column: 1 / -1; text-align: left; } }

  /* the fallback, for a product whose certificate has not been transcribed yet */
  .qc--slim { border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; background: var(--surface-0); display: grid; gap: 12px; justify-items: start; }
  .qc__labline { display: flex; align-items: center; gap: 11px; }
  .qc__labline img { width: 56px; height: auto; }
  .qc__labline b { display: block; font-size: var(--text-sm); font-weight: 700; }
  .qc__labline small { font-size: 11.5px; color: var(--ink-2); }
  .qc__slimp { margin: 0; font-size: var(--text-sm); color: var(--ink-2); max-width: 70ch; }
}

@layer pages {
  /* the two new product-page sections are below the fold and layout-heavy; skip what is off screen.
     The rail keeps its scroll width because each skipped card still reserves its intrinsic size. */
  .rail > .rail__card { content-visibility: auto; contain-intrinsic-size: auto 200px auto 330px; }
  .qc__panel, .qc__card { content-visibility: auto; contain-intrinsic-height: auto 420px; }
  /* height only: a single length would also fix the width, and these are grid items whose track is auto
     on a phone, so the guessed width became the real width and pushed the page 95px wide. */
}

@layer pages {
  /* the owner asked for the scroll bar under the rail to go; the arrows carry the affordance and touch scrolls */
  .rail { scrollbar-width: none; }
  .rail::-webkit-scrollbar { width: 0; height: 0; }

  /* the whole certificate block sits on the studio ground as one panel, the Rebirth reading of the reference */
  .qc { background: var(--surface-1); border-radius: 26px; padding: clamp(24px, 4vw, 52px) clamp(18px, 3vw, 40px); }
  .qc__grid { align-items: stretch; }
  .qc__card, .qc__panel { height: 100%; }

  /* every lot on record */
  .qc__lots { margin-top: clamp(26px, 4vw, 44px); padding-top: clamp(22px, 3vw, 34px); border-top: 1px solid var(--line); }
  .qc__lotshead { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: var(--s-4); }
  .qc__lotsh { margin: 0; font-size: var(--text-base); font-weight: 800; letter-spacing: -0.01em; }
  .qc__lotsp { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-2); max-width: 62ch; }
  .rail--lots { grid-auto-columns: 268px; padding-inline: 0; scroll-padding-inline: 0; }
  @media (min-width: 64em) { .rail--lots { grid-auto-columns: 286px; } }

  .lotcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-0); padding: 16px 16px 14px; }
  .lotcard__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .lotcard__top b { font-size: var(--text-sm); font-weight: 800; letter-spacing: -0.01em; }
  .lotcard__flag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ok); flex: none; }
  .lotcard__lot { margin: 3px 0 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
  .lotcard__lot b { color: var(--ink); font-weight: 600; }
  .lotcard__pur { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .lotcard__tick { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: oklch(0.95 0.05 150); color: var(--ok); flex: none; align-self: center; }
  .lotcard__tick svg { width: 11px; height: 11px; }
  .lotcard__pur b { font-size: var(--text-h3); font-weight: 800; letter-spacing: -0.02em; color: var(--ok); font-variant-numeric: tabular-nums; }
  .lotcard__pur small { font-size: 11px; color: var(--ink-2); width: 100%; margin-top: -2px; }
  .lotcard__rows { margin: 0; padding: 10px 0 0; display: grid; gap: 0; }
  .lotcard__rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft, var(--line)); }
  .lotcard__rows > div:last-child { border-bottom: 0; }
  .lotcard__rows dt { font-size: 12px; color: var(--ink-2); flex: none; }
  .lotcard__rows dd { margin: 0; font-size: 12px; font-weight: 600; text-align: right; }
  .lotcard__foot { margin: 10px 0 0; font-size: 11px; color: var(--ink-2); }
  .lotcard__cta { margin-top: 12px; width: 100%; }
}

@layer pages {
  /* ---- quantity stepper, above the bundle row ---- */
  .buyq { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
  .buyq__k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
  .qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-0); overflow: hidden; }
  .qty__b { width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
  .qty__b svg { width: 16px; height: 16px; }
  .qty__b:hover { background: var(--surface-1); }
  .qty__b:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -3px; }
  .qty__in { width: 46px; height: 38px; border: 0; border-inline: 1px solid var(--line); background: transparent; text-align: center;
    font-family: var(--mono); font-size: var(--text-sm); font-weight: 700; color: var(--ink); -moz-appearance: textfield; }
  .qty__in::-webkit-outer-spin-button, .qty__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .qty__in:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -3px; }

  /* ---- the bundle row, condensed: a card is a shortcut to a threshold ---- */
  .tp { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  @media (min-width: 40em) { .tp { grid-template-columns: repeat(4, 1fr); gap: 9px; } }
  .tp__opt { position: relative; display: flex; align-items: center; gap: 9px; padding: 13px 11px 11px; margin-top: 9px;
    border: 1px solid var(--line); border-radius: 13px; background: var(--surface-0); cursor: pointer; text-align: left;
    transition: border-color var(--dur-micro) var(--ease-reveal), box-shadow var(--dur-micro) var(--ease-reveal); }
  .tp__opt:hover { border-color: var(--ink-3); }
  .tp__opt[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .tp__opt:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

  /* the flag sits on the card's top edge, as the reference does */
  .tp__flag { position: absolute; top: -9px; left: 10px; height: 18px; padding: 0 7px; display: inline-flex; align-items: center;
    border-radius: 5px; background: var(--ink); color: var(--surface-0); white-space: nowrap;
    font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
  .tp__flag--best { background: var(--accent-hi); }
  .tp__flag--bulk { background: var(--ink-2); }

  /* the real vials, overlapped so three still fit in a narrow card */
  .tp__vials { display: inline-flex; align-items: center; flex: none; }
  .tp__vials img { width: 30px; height: 30px; object-fit: cover; border-radius: 6px; background: var(--surface-1); }
  .tp__vials img + img { margin-left: -13px; }
  .tp__txt { display: grid; gap: 1px; min-width: 0; }
  .tp__txt b { font-size: 12.5px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
  .tp__off { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
  .tp__opt[aria-pressed="true"] .tp__off { color: var(--accent-deep); }
  @media (max-width: 22em) { .tp__vials img + img { display: none; } }
}

@layer pages {
  /* ================= the proof block under the cart button =================
     Three facts, the lab's own verdicts, then the promise. Every figure is read off the certificate for this
     product; see tools/trust-strip.mjs for what is and is not asserted. */

  /* the certificate button, sitting beside the stepper so the proof is next to the decision */
  .coabtn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--surface-0); color: var(--ink);
    font-size: 12.5px; font-weight: 700; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
    transition: background-color var(--dur-micro) var(--ease-reveal), border-color var(--dur-micro) var(--ease-reveal); }
  .coabtn svg { width: 17px; height: 17px; flex: none; }
  .coabtn:hover { background: var(--surface-1); border-color: var(--ink-3); }
  .coabtn:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
  .coabtn--off { color: var(--ink-2); background: var(--surface-1); cursor: default; }

  .trust { display: grid; gap: 10px; margin-top: 2px; }

  .trust__row { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden;
    border: 1px solid var(--line); border-radius: 14px; background: var(--surface-0); }
  .trust__cell { display: grid; justify-items: center; align-content: start; gap: 7px; padding: 16px 6px 15px; text-align: center; }
  .trust__cell + .trust__cell { border-left: 1px solid var(--line-soft); }
  .trust__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
    background: linear-gradient(oklch(0.985 0.002 30), var(--surface-1)); border: 1px solid var(--line-soft);
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.9), 0 1px 2px oklch(0.2 0.02 20 / 0.06); }
  .trust__ico svg { width: 22px; height: 22px; color: var(--ink); }
  .trust__cell b { font-size: 12.5px; font-weight: 800; letter-spacing: -0.012em; font-variation-settings: "wdth" 106; }
  .trust__cell small { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); line-height: 1.35; }

  /* the lab's verdicts. green is functional here, the same green the box ledger uses for a saving */
  .trust__res { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .trust__res--one { grid-template-columns: 1fr; }
  .tpill { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px;
    background: oklch(0.955 0.035 152); color: var(--ok); }
  .tpill svg { width: 18px; height: 18px; flex: none; }
  .tpill b { display: block; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
  .tpill small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.3; }
  .tpill--flat { background: var(--surface-1); color: var(--ink-2); }

  /* the promise, on the brand's own tint rather than the borrowed blue */
  .trust__prot { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 12px;
    background: var(--accent-tint); border: 1px solid oklch(0.90 0.055 20.5); }
  .trust__prot > svg { width: 30px; height: 30px; flex: none; color: var(--accent-deep); }
  .trust__prot b { display: block; font-size: 13px; font-weight: 800; letter-spacing: -0.012em; color: var(--ink); }
  .trust__prot small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-2); line-height: 1.35; }

  /* below 352px three columns starve the copy, so each fact becomes a row: icon left, fact right */
  @media (max-width: 22em) {
    .trust__row { grid-template-columns: 1fr; }
    .trust__cell { grid-template-columns: 40px 1fr; justify-items: start; align-items: center; text-align: left; gap: 2px 12px; padding: 11px 13px; }
    .trust__ico { grid-row: 1 / span 2; }
    .trust__cell + .trust__cell { border-left: 0; border-top: 1px solid var(--line-soft); }
    .trust__res { grid-template-columns: 1fr; }
  }
}

@layer pages {
  /* ================= certificate panel, craft pass =================
     Structure is unchanged. What changed: the black card fills its own height instead of leaving a void under the
     button, the brand red appears where nothing carried it before, the seven green pills stopped competing with
     the numbers they sit beside, and both cards sit on the ground with a shadow instead of floating flat. */

  /* ---- the black card ---- */
  /* the card is as tall as the panel beside it and its content is not, so the mark fills the foot the way it
     already does on the Founder plan. Same asset, same treatment, never redrawn. */
  .qc__card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 24px;
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.13), 0 1px 2px oklch(0.2 0.02 20 / 0.12), 0 34px 64px -46px oklch(0.2 0.02 20 / 0.65); }
  .qc__mark { position: absolute; z-index: 0; left: -30%; bottom: -44%; width: 142%; height: auto;
    opacity: 0.05; pointer-events: none; user-select: none; filter: saturate(1.25); }
  .qc__card > *:not(.qc__mark) { position: relative; z-index: 1; }
  .qc__lab { margin-bottom: 26px; }
  .qc__labtxt small { color: oklch(1 0 0 / 0.6); }

  /* the eyebrow carries the same red rule the rest of the site puts in front of a section label */
  .qc__card .qc__k:not(.qc__k--dim) { display: flex; align-items: center; gap: 10px; }
  .qc__card .qc__k:not(.qc__k--dim)::before { content: ""; width: 16px; height: 2px; border-radius: 2px; background: var(--accent); flex: none; }

  .qc__big { margin: 12px 0 0; display: flex; align-items: baseline; gap: 2px; line-height: 0.84; }
  .qc__big b { font-size: clamp(2.7rem, 1.9rem + 2.9vw, 3.9rem); letter-spacing: -0.045em; }
  .qc__big i { font-style: normal; font-size: clamp(1.1rem, 0.85rem + 0.9vw, 1.5rem); font-weight: 700; color: oklch(1 0 0 / 0.5); }
  .qc__k--dim { margin-top: 10px; }

  /* the record reads as ruled lines rather than four floating pairs */
  .qc__meta { grid-template-columns: 1fr 1fr; gap: 0 18px; margin-top: 24px; padding-top: 0; border-top: 0; }
  .qc__meta > div { padding: 13px 0; border-top: 1px solid oklch(1 0 0 / 0.13); }
  .qc__meta dd { margin-top: 4px; font-size: 13.5px; font-weight: 700; letter-spacing: -0.005em; }
  .qc__ok { color: oklch(0.86 0.14 152); }

  /* chips and the action hug the foot, so the card fills the height it is given */
  .qc__chips { margin-top: auto; padding-top: 26px; }
  .qc__chip { height: 25px; border: 1px solid oklch(1 0 0 / 0.16); background: transparent; color: oklch(1 0 0 / 0.78); }
  .qc__card .qc__cta { margin-top: 14px; height: 46px; font-size: 14px; }

  /* ---- the QC panel ---- */
  .qc__panel { box-shadow: 0 1px 2px oklch(0.2 0.02 20 / 0.05), 0 18px 34px -30px oklch(0.2 0.02 20 / 0.4); }
  .qc__panelhead { padding: 15px 20px; }
  /* an outline, not a seventh green fill */
  .qc__count { background: transparent; border: 1px solid var(--line); color: var(--ink-2); height: 25px; }
  .qc__count svg { color: var(--ok); }

  .qc__rows li { padding: 13px 20px; transition: background-color var(--dur-micro) var(--ease-reveal); }
  .qc__rows li:hover { background: var(--surface-1); }
  .qc__row-n b { font-size: 13.5px; letter-spacing: -0.005em; }
  .qc__row-n small { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
  .qc__row-v { font-size: 13.5px; font-weight: 700; }

  /* the verdict is a mark beside the value, not a filled capsule shouting over it */
  .qc__tag { height: auto; padding: 0; background: transparent !important; min-width: 58px; justify-content: flex-end; font-size: 9px; letter-spacing: 0.14em; }
  .qc__tag--pass { color: var(--ok); }
  .qc__tag--reported { color: var(--ink-2); }
  .qc__tag svg { width: 12px; height: 12px; }
  .qc__foot { padding: 15px 20px; }

  /* ---- the lot cards ---- */

  /* four certificates or fewer fit without scrolling, so they lay out as a grid and the arrows are not rendered */
  .rail--fit { display: grid; grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    overflow: visible; scroll-snap-type: none; padding-bottom: 0; margin-right: 0; padding-right: 0; }
  .lotcard { border-radius: 14px; padding: 17px 17px 15px;
    transition: box-shadow var(--dur-micro) var(--ease-reveal), transform var(--dur-micro) var(--ease-reveal); }
  .lotcard:hover { transform: translateY(-2px); box-shadow: 0 2px 4px oklch(0.2 0.02 20 / 0.05), 0 16px 30px -18px oklch(0.2 0.02 20 / 0.32); }
  .lotcard__top b { font-size: 13.5px; font-weight: 800; letter-spacing: -0.012em; }
  /* the newest lot is the brand's own flag, not a third green thing */
  .lotcard__flag { color: var(--accent-deep); font-size: 8.5px; }
  .lotcard__lot { margin-top: 6px; font-size: 10px; }

  /* the figure is data, so it is set in carbon; the tick beside it is the verdict and stays green */
  .lotcard__pur { gap: 9px; margin-top: 14px; padding-bottom: 14px; }
  .lotcard__pur b { color: var(--ink); font-size: 1.85rem; font-weight: 800; letter-spacing: -0.035em; }
  .lotcard__pur small { margin-top: 6px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
  .lotcard__tick { width: 18px; height: 18px; }
  .lotcard__tick svg { width: 10px; height: 10px; }

  .lotcard__rows > div { padding: 8px 0; }
  .lotcard__rows dt { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
  .lotcard__rows dd { font-size: 12px; font-weight: 700; letter-spacing: -0.005em; }
  .lotcard__foot { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line);
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }

  /* four filled black slabs in a row out-shouted every number above them */
  .lotcard .lotcard__cta { margin-top: 13px; height: 38px; border-radius: 999px;
    background: transparent; border: 1px solid var(--line); color: var(--ink); font-weight: 700; }
  .lotcard .lotcard__cta:hover { background: var(--ink); border-color: var(--ink); color: var(--surface-0); }
}

@layer pages {
  /* The product name is set in the live site's own face. Outfit has no width axis and its own tighter sidebearings,
     so the Archivo settings underneath it (wdth 112, +0.02em tracking) have to be unset or the name renders wide
     and loose. The subset already carries the full ASCII range, so every one of the 47 names is covered. */
  .pdp__name { font-family: "Outfit", var(--font); font-variation-settings: normal; font-weight: 500;
    letter-spacing: normal; line-height: 1.04; text-wrap: balance; }
}

@layer pages {
  /* ---- buy box, condensed: quantity, bundle & save, then the action row ---- */
  .buyq { margin-bottom: 0; }

  .tpbox { display: grid; gap: 9px; }
  .tp__k { display: block; font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }

  /* tighter cards: the row carries four options, so every pixel of padding is spent four times */
  .tp { gap: 7px; }
  .tp__opt { padding: 11px 9px 10px; gap: 8px; margin-top: 8px; }
  .tp__vials img { width: 28px; height: 28px; }
  .tp__vials img + img { margin-left: -12px; }
  .tp__txt b { font-size: 12px; }
  .tp__off { font-size: 9px; }
  .tp__flag { top: -8px; left: 9px; height: 17px; padding: 0 6px; font-size: 8px; }

  /* the certificate is an action, so it sits with the other action rather than up in the quantity row */
  .pdp__buy { display: flex; align-items: stretch; gap: 10px; }
  .pdp__buy .btn { flex: 1 1 auto; min-width: 0; }
  .pdp__buy .coabtn { flex: none; height: auto; padding: 0 20px; border-radius: 999px; font-size: 13px; }
  .pdp__buy .coabtn svg { width: 18px; height: 18px; }
  .btn__price { margin-left: 0.5em; font-variant-numeric: tabular-nums; white-space: nowrap; }

  @media (max-width: 26em) {
    .pdp__buy .coabtn { padding: 0 16px; }
    .btn--lg { padding: 0 18px; }
  }
}

@layer pages {
  /* ---- first render: lay out only what is on screen ----
     Under a throttled phone the first style + layout pass was a single 1.1-1.4s task that held the product photo's
     paint for ~1.6s after it had downloaded. Everything below the buy box is skipped until it nears the viewport.
     Heights are the measured ones (390 / 1440); `auto` keeps the real height once a section has rendered. */
  .pdp ~ .rail-sec { content-visibility: auto; contain-intrinsic-height: auto 500px; }
  .pdp ~ .section--tight:not(.rail-sec) { content-visibility: auto; contain-intrinsic-height: auto 2500px; }
  .ruo { content-visibility: auto; contain-intrinsic-height: auto 150px; }
  .ftr { content-visibility: auto; contain-intrinsic-height: auto 1574px; }
  @media (min-width: 64em) {
    .pdp ~ .section--tight:not(.rail-sec) { contain-intrinsic-height: auto 1650px; }
    .ftr { contain-intrinsic-height: auto 1081px; }
  }

  /* the closed cart drawer is off screen: take it out of layout, the tab order and the accessibility tree, and
     keep it rendered for the 200ms slide-out. Without this its close button and checkout link were focusable
     while aria-hidden. */
  .drawer:not([data-open="true"]) .drawer__panel { visibility: hidden; content-visibility: hidden;
    transition: transform 200ms var(--ease-exit), visibility 0s linear 200ms, content-visibility 0s linear 200ms;
    transition-behavior: allow-discrete; }
}

@layer pages {
  /* home: sections below the catalog skip layout until they near the viewport (build.mjs deferBelowCatalog sets the
     measured heights). Took the hero's paint from 2.44s to ~1.5s on the throttled phone. */
  .defer { content-visibility: auto; contain-intrinsic-height: auto var(--defer-h, 1000px); }
  @media (min-width: 64em) { .defer { contain-intrinsic-height: auto var(--defer-hd, 800px); } }
}

@layer pages {
  /* Safari has no scroll anchoring: when a skipped section above a /#answers or /#shipping target renders at a height
     other than its placeholder (WebKit sets text a little shorter), the page slides and the jump lands 137px past the
     heading. Browsers without anchoring keep the sections rendered; this switches itself on when WebKit ships it. */
  @supports not (overflow-anchor: auto) { .defer { content-visibility: visible; } }
}