/* ════════════════════════════════════════════════════════════
   OLLIN — REDESIGN FOUNDATION
   Token system + base components, locked from DESIGN-SYSTEM.md.
   Built once in P1. Every later phase reuses these — never
   redefines them. Screen-specific rules live in each screen's
   own <style> block and only ever reference these tokens.
═══════════════════════════════════════════════════════════════ */

/* ─── FONT BINDING ───────────────────────────────────────────
   SF Pro bound by name via local() so real device/OS copies are
   used where present; system sans-serif stack is the fallback.
   Magda Clean Mono has no web-loadable version — Spline Sans
   Mono (Google Fonts) stands in for it everywhere "mono" is
   specified below. No font named Optima anywhere. */
@font-face {
  font-family: "SF Pro";
  src: local("SF Pro Display"), local("SF Pro Text"), local(".SF NS Display"), local(".SF NS Text"), local(".AppleSystemUIFont");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Color: brown ramp (accent — data, selection, progress; never a field/background fill) */
  --espresso: #3F2C15;
  --bark:     #5E4020;
  --ollin-brown: #8B5E2B;
  --clay:     #B58A5A;
  --sand:     #E4D3BC;

  /* ── Color: neutrals & paper */
  --ink:   #17140F;
  --slate: #6E685F;
  --ash:   #9C968C;
  --mist:  #D8D3C9;
  --cream: #F4F1EA;
  --paper: #FFFFFF;

  --app-bg: #E9E4DB;
  --body-text: var(--ink);
  --selection-highlight: rgba(139,94,43,0.18);

  /* ── On-dark brown text tints (accent text over ink/glass-over-photo) */
  --brown-tint-1: #E4BE93;
  --brown-tint-2: #C9A47A;
  --brown-tint-3: #F3E2CE;

  /* ── Semantic (light-surface / dark-glass pairs) */
  --state-low-light: #B0453A;
  --state-low-dark:  #EE8B7E;
  --state-normal-light: #5F7F64;
  --state-normal-dark:  #93C1A0;
  --state-warn-light: var(--ollin-brown);
  --state-warn-dark:  var(--brown-tint-1);

  /* ── Type ── */
  --font-display: "SF Pro", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-text:    "SF Pro", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: 56px;
  --fs-title:   34px;
  --fs-heading: 22px;
  --fs-body:    16px;
  --fs-label:   11px;
  --fs-data:    15px;

  /* ── Spacing scale ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 48px; --sp-10: 64px;

  /* ── Radius scale ── */
  --r-control: 13px;
  --r-card:    20px;
  --r-pill:    999px;

  /* ── Material: light glass (on cream/paper) ── */
  --glass-light-bg: rgba(255,255,255,0.16);
  --glass-light-blur: blur(14px) saturate(1.7);
  --glass-light-border: 1px solid rgba(255,255,255,0.6);

  /* ── Material: dark glass (on ambient photo) ── */
  --glass-dark-bg: rgba(26,20,14,0.38);
  --glass-dark-bg-deep: rgba(18,18,18,0.55);
  --glass-dark-blur: blur(38px) saturate(1.25);
  --glass-dark-border: 1px solid rgba(255,255,255,0.14);
  --glass-dark-shadow: 0 11px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.09);

  /* ── Motion ── */
  --dur-micro:  60ms;
  --dur-fast:   120ms;
  --dur-normal: 200ms;
  --dur-medium: 300ms;
  --ease: cubic-bezier(.4,0,.2,1);

  --focus-ring: 0 0 0 3px rgba(139,94,43,0.28);

  /* ── Theme-flip tokens ──────────────────────────────────────
     RGB triplet used by every text/border declaration painted
     on a dark-glass surface or a .bg-ambient page. Default
     (dark theme) = cream/white; [data-theme="light"] below
     repoints it to ink so every one of those declarations
     flips in one place instead of per-rule. Kept as raw RGB
     (not a color) so existing rgba(...,alpha) call sites keep
     their exact alpha and only swap the color channel. */
  --onglass: 244,241,234;

  /* ── Hero-only warm studio-backdrop gradient (light mode). See
     LIGHT-MODE-GLASSMORPHISM-SPEC.md §2. ── */
  --bg-hero-light-1: #C9C0B4;
  --bg-hero-light-2: #D3C7B7;
  --bg-hero-light-3: #DED0BC;
  --bg-hero-glow:    #F1DFC6;
  --bg-hero-floor:   #D9C4A9;

  /* ── Heavier frosted-glass card variant (product/pricing cards).
     Extends --glass-light-* rather than replacing it — see §3. Lower
     opacity + higher blur/saturate than the first pass so the warm
     backdrop actually bleeds through instead of reading as an opaque
     card; shadow + inset highlight sell the floating-pane depth (see
     reference: OLLIN CORE pricing card). ── */
  --glass-frost-bg:     rgba(255,255,255,0.4);
  --glass-frost-blur:   blur(36px) saturate(1.8);
  --glass-frost-border: 1px solid rgba(255,255,255,0.75);
  --glass-frost-shadow: 0 24px 60px rgba(80,60,40,0.18), inset 0 1px 0 rgba(255,255,255,0.65);
  --r-card-frost:       28px;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME — toggled via [data-theme="light"] on <html>.
   Dark theme (ambient photo/gradient + dark glass) is the
   default and needs no override block; this repoints the
   dark-glass material recipe to a light-glass one and swaps
   the on-dark text/border tint, so every component built
   against --glass-dark-* / --onglass flips automatically.
   Structural light-glass surfaces (.card-light, bottom sheet,
   toast, ink buttons) are unaffected — they're already the
   same material in both themes. */
:root[data-theme="light"] {
  --onglass: 23,20,15;

  --glass-dark-bg: rgba(255,255,255,0.55);
  --glass-dark-bg-deep: rgba(255,255,255,0.7);
  --glass-dark-blur: blur(20px) saturate(1.6);
  --glass-dark-border: 1px solid rgba(23,20,15,0.1);
  --glass-dark-shadow: 0 11px 32px rgba(59,45,26,0.1), inset 0 1px 0 rgba(255,255,255,0.6);

  --brown-tint-1: var(--ollin-brown);
  --brown-tint-2: var(--bark);
  --brown-tint-3: var(--espresso);

  --state-low-dark: var(--state-low-light);
  --state-normal-dark: var(--state-normal-light);
  --state-warn-dark: var(--state-warn-light);
}

/* ── Ambient hero background, light-theme variant — same warm
   glow this design already uses for .bg-bloom, tuned to match
   the reference product-card photo (soft mocha/tan radial glow
   over a warm paper base) rather than the dark moody photo
   ramp. Swaps in wherever .bg-ambient is used (quiz/OTP/
   checkout/dashboard/protocol/etc.), so those screens read as
   a light hero instead of a dark one. */
:root[data-theme="light"] .page.bg-ambient,
:root[data-theme="light"] .bg-ambient {
  background:
    radial-gradient(70% 50% at 82% 12%, rgba(139,94,43,0.16), transparent 65%),
    radial-gradient(60% 48% at 8% 8%,   rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(65% 55% at 78% 92%, rgba(181,138,90,0.22), transparent 62%),
    linear-gradient(165deg, #F6F2EA 0%, #EFE7DA 38%, #E7DAC7 68%, #D9C6A9 100%);
}

/* ─── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-text); background: var(--app-bg); color: var(--body-text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; font-feature-settings: "kern" 1; font-synthesis: none;
}
button { border: none; cursor: pointer; font: inherit; background: none; color: inherit; }
input { font: inherit; color: inherit; }
svg { display: block; flex-shrink: 0; }
a { color: inherit; }
::selection { background: var(--selection-highlight); }

/* ─── AMBIENT BACKGROUND ─────────────────────────────────────
   Compound selector (not a bare .bg-ambient/.bg-bloom) so this
   utility always beats .page's own default background,
   regardless of source order.
   Correction (P7): back to a CSS gradient, this time to stay.
   P2 first tried a pixel-sampled gradient; P6 reverted to the
   real photo (reference/ambient-bg.png) at explicit instruction.
   Latest instruction reverses that again — colors below are
   pixel-sampled from that same photo (which the user's new
   reference screenshot matches closely), rebuilt as two radial
   layers (top-left cool falloff, mid-right warm highlight) over
   a vertical linear ramp. Percentage-based, so it reflows cleanly
   at any viewport width/height with no cover-crop or pixelation —
   the photo file stays on disk, unreferenced, for rollback. */
.page.bg-ambient, .bg-ambient {
  background:
    radial-gradient(85% 55% at 2% 4%,  rgba(32,29,26,0.30), transparent 70%),
    radial-gradient(85% 65% at 85% 38%, rgba(230,208,172,0.42), transparent 70%),
    linear-gradient(180deg,
      #55524C 0%, #726A5D 22%, #9C8C77 42%, #A69682 50%,
      #8D785F 62%, #6B5340 76%, #43302A 88%, #241A14 100%);
  background-attachment: fixed;
}
@supports (-webkit-touch-callout: none) {
  /* iOS Safari doesn't support background-attachment:fixed reliably — fall back to scroll. */
  .page.bg-ambient, .bg-ambient { background-attachment: scroll; }
}
.page.bg-bloom, .overlay--full.bg-bloom, .bg-bloom {
  background:
    radial-gradient(58% 45% at 10% 6%, rgba(139,94,43,0.2), transparent 60%),
    radial-gradient(58% 46% at 90% 16%, rgba(224,180,135,0.42), transparent 62%),
    radial-gradient(62% 52% at 74% 94%, rgba(150,160,190,0.38), transparent 60%),
    radial-gradient(56% 46% at 30% 76%, rgba(248,242,233,0.72), transparent 60%),
    linear-gradient(165deg, #EEEAE1 0%, #E7DED2 46%, #DED6CC 100%);
}

/* ── Hero-only warm studio-backdrop gradient (light mode). Scoped to
   .lp-hero, not a .bg-bloom replacement — rest of the landing page keeps
   the existing .bg-bloom gradient underneath. See LIGHT-MODE-GLASSMORPHISM-SPEC.md §2. ── */
.bg-hero-light {
  background:
    radial-gradient(85% 70% at 62% 80%, rgba(241,223,198,0.9), transparent 68%),
    radial-gradient(60% 48% at 88% 92%, rgba(217,196,169,0.55), transparent 62%),
    linear-gradient(180deg,
      var(--bg-hero-light-1) 0%,
      var(--bg-hero-light-2) 45%,
      var(--bg-hero-light-3) 100%);
}

/* ── Theme toggle — dark/light switch. Deliberately theme-invariant
   chrome (ink track, cream/brown knob), same reasoning as .btn-primary/
   .toast/.full-panel-footer: an always-dark pill reads clearly whether
   it's sitting on a dark-glass hero or a light cream surface, so it
   never needs its own on-dark/on-light variant. Geometry + knob color
   carry the state (no sun/moon glyph), per the icon stance. ── */
.theme-toggle {
  position: relative; flex-shrink: 0; width: 46px; height: 26px; border-radius: var(--r-pill);
  background: var(--ink); border: 1px solid rgba(255,255,255,0.14);
  transition: background var(--dur-normal) var(--ease);
}
.theme-toggle:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.theme-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--cream);
  transition: transform var(--dur-normal) var(--ease), background var(--dur-normal) var(--ease);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
:root[data-theme="light"] .theme-toggle::after { transform: translateX(20px); background: var(--brown-tint-1); }

/* ── Positioning modifier for the .app-bar right slot — sits left of
   whatever .app-bar-action (avatar/close) is already there; on bars
   with no other right-side action this offset just reads as the
   standard trailing inset. ── */
.theme-toggle--bar { position: absolute; top: 50%; right: var(--sp-3); transform: translateY(-50%); z-index: 5; }
.theme-toggle--bar-inset { right: 56px; }

/* ─── TYPE SCALE ──────────────────────────────────────────── */
.t-display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.t-title   { font-family: var(--font-display); font-size: var(--fs-title);   font-weight: 600; line-height: 1.1;  letter-spacing: -0.015em; }
.t-heading { font-family: var(--font-display); font-size: var(--fs-heading); font-weight: 600; line-height: 1.2; }
.t-body    { font-family: var(--font-text); font-size: var(--fs-body); font-weight: 400; line-height: 1.6; color: #4C4740; }
.t-label   { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ollin-brown); }
.t-label-on-dark { color: var(--brown-tint-1); }
.t-data    { font-family: var(--font-mono); font-size: var(--fs-data); font-weight: 400; }

/* ═══════════════════════════════════════════════════════════
   PAGE SHELL — single responsive markup per screen. No
   viewport-specific duplicate blocks: every page reflows via
   the breakpoints below. `.page` is the one wrapper a screen
   root uses; `.page.active` is shown, others hidden (this
   prototype is a single-document funnel navigated by `go()`).
═══════════════════════════════════════════════════════════ */
.page { display: none; flex-direction: column; min-height: 100vh; background: var(--app-bg); }
.page.active { display: flex; }
.page.enter { animation: pageEnter var(--dur-medium) var(--ease) forwards; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ─── SITE HEADER — marketing/landing screens ────────────────
   Real sticky nav, single markup. Logo left, primary action
   right; collapses spacing (not structure) at narrow widths. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: 68px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-6); background: rgba(233,228,219,0.86);
  backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border-bottom: 1px solid rgba(23,20,15,0.08);
}
@media (max-width: 640px) { .site-header { height: 56px; padding: 0 var(--sp-4); } }

/* ─── APP BAR — logged-in/flow screens (quiz, dashboard, etc.) ─
   Centered logo + optional back/close, same markup at any width. */
.app-bar {
  height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-start;
  background: var(--app-bg); padding: 0 var(--sp-4); position: relative;
}
.app-bar-logo { display: flex; align-items: center; cursor: pointer; }
.app-bar-action {
  position: absolute; right: var(--sp-3); width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  color: var(--slate); transition: background var(--dur-fast) var(--ease);
}
.app-bar-action:hover { background: rgba(23,20,15,0.06); }
.app-bar-action:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.app-bar-back { position: absolute; left: var(--sp-3); }
.app-bar-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: rgba(var(--onglass),1); margin-left: 44px; }
.app-bar--on-dark { background: transparent; }
.app-bar--on-dark .app-bar-action { color: rgba(var(--onglass),0.7); }
.app-bar--on-dark .app-bar-action:hover { background: rgba(var(--onglass),0.08); }

/* ─── STICKY CTA BAR — fixed bottom action on narrow viewports;
   inline in the header/hero on wide ones (each screen decides
   which via markup, this only supplies the fixed-bar mechanics). */
.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: var(--sp-3) var(--sp-5); padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: rgba(233,228,219,0.92); backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border-top: 1px solid rgba(23,20,15,0.08);
}
/* Reserve space for the fixed .cta-bar — scoped to whichever page actually
   has one (currently only 01.1), not a global body class. A global
   body-level padding here would leak 84px of stray scroll space onto
   every other page's true document end. */
.page:has(> .cta-bar) > main { padding-bottom: 84px; }
@media (min-width: 860px) {
  .cta-bar { display: none; }
  .page:has(> .cta-bar) > main { padding-bottom: 0; }
}
.cta-bar-row { display: flex; gap: 10px; max-width: 480px; margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════
   BASE COMPONENTS
═══════════════════════════════════════════════════════════ */

/* ── Buttons ── */
.btn-primary {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; width: 100%; border-radius: var(--r-control);
  background: var(--ink); color: var(--cream);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-primary:hover  { opacity: 0.88; }
.btn-primary:active { opacity: 0.96; transform: translateY(1px); }
.btn-primary:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-continue {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; flex: 1; border-radius: var(--r-control);
  background: var(--ink); color: var(--cream);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: opacity var(--dur-fast) var(--ease);
}
.btn-continue:hover  { opacity: 0.88; }
.btn-continue:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

.btn-secondary {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--sp-5); border-radius: var(--r-control);
  background: var(--glass-light-bg); backdrop-filter: var(--glass-light-blur); -webkit-backdrop-filter: var(--glass-light-blur);
  border: 1px solid rgba(23,20,15,0.16);
  color: var(--ink); font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: border-color var(--dur-fast) var(--ease);
}
.btn-secondary:hover { border-color: rgba(23,20,15,0.4); }
.btn-secondary:focus-visible { box-shadow: var(--focus-ring); outline: none; }

.btn-back {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; min-width: 88px; padding: 0 var(--sp-4); border-radius: var(--r-control);
  background: var(--glass-light-bg); backdrop-filter: var(--glass-light-blur); -webkit-backdrop-filter: var(--glass-light-blur);
  border: 1px solid rgba(23,20,15,0.16);
  color: var(--slate); font-family: var(--font-mono);
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
  transition: all var(--dur-fast) var(--ease);
}
.btn-back:hover { border-color: rgba(23,20,15,0.4); color: var(--ink); }
.btn-back:focus-visible { box-shadow: var(--focus-ring); outline: none; }

.btn-tertiary {
  font-family: var(--font-text); font-size: 14px; font-weight: 600;
  color: var(--ollin-brown); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
}
.btn-tertiary:hover { opacity: 0.8; }

/* ── Badge (trust signal) — geometry dot + mono word, no glyph ── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 26px; padding: 0 12px 0 10px; border-radius: var(--r-pill);
  background: var(--glass-light-bg); backdrop-filter: var(--glass-light-blur); -webkit-backdrop-filter: var(--glass-light-blur);
  border: var(--glass-light-border);
  color: var(--bark); font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ollin-brown); flex-shrink: 0; }
.badge-on-dark { color: var(--brown-tint-1); background: rgba(26,20,14,0.32); border-color: rgba(var(--onglass),0.14); }
.badge-on-dark::before { background: var(--brown-tint-1); }

/* ── Eyebrow / mono label ── */
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ollin-brown); }
.eyebrow-on-dark { color: var(--brown-tint-1); }

/* ── Glass cards ── */
.card-light {
  background: var(--glass-light-bg); backdrop-filter: var(--glass-light-blur); -webkit-backdrop-filter: var(--glass-light-blur);
  border: var(--glass-light-border); border-radius: var(--r-card);
}
.card-dark {
  background: var(--glass-dark-bg); backdrop-filter: var(--glass-dark-blur); -webkit-backdrop-filter: var(--glass-dark-blur);
  border: var(--glass-dark-border); border-radius: var(--r-card);
  box-shadow: var(--glass-dark-shadow);
}
.card-dark-deep { background: var(--glass-dark-bg-deep); }
/* ── Heavier frosted-glass variant — pricing/product cards over
   .bg-hero-light or other high-contrast light backdrops. Variant of
   .card-light, not a replacement (chips/list-row cards keep the
   subtler .card-light material). Carries a soft warm shadow + inset
   top highlight — documented exception to the "no shadow on
   light-context glass" rule, confirmed against reference; see
   DESIGN-SYSTEM.md Material section and §3 of the spec. ── */
.card-frost {
  background: var(--glass-frost-bg); backdrop-filter: var(--glass-frost-blur); -webkit-backdrop-filter: var(--glass-frost-blur);
  border: var(--glass-frost-border); border-radius: var(--r-card-frost);
  box-shadow: var(--glass-frost-shadow);
}

/* ── Dark card, ambient modifier — for a .card-dark widget that sits
   on an otherwise LIGHT page (e.g. dashboard accent widgets), not a
   full .bg-ambient hero. Backdrop-filter has nothing rich to blur
   there (just flat cream), so this paints the same ambient-gradient
   recipe directly as the card's own background instead of relying on
   what's behind it — same look, self-contained. ── */
.card-dark--ambient {
  background:
    var(--glass-dark-bg),
    radial-gradient(50% 36% at 87% 41%, rgba(216,199,168,0.55), transparent 68%),
    radial-gradient(60% 35% at 92% 8%,  rgba(163,157,143,0.35), transparent 62%),
    radial-gradient(55% 45% at 2% 2%,   rgba(20,19,17,0.40),   transparent 60%),
    linear-gradient(180deg,
      #66615B 0%, #8C7E6C 22%, #A08E76 40%, #957F68 55%,
      #6E5340 72%, #40301F 87%, #241A14 100%);
}

/* ── Selectable chip ── */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-pill);
  background: var(--glass-light-bg); backdrop-filter: var(--glass-light-blur); -webkit-backdrop-filter: var(--glass-light-blur);
  border: var(--glass-light-border);
  font-family: var(--font-text); font-size: 14px; font-weight: 500; color: var(--ink);
  transition: all var(--dur-normal) var(--ease);
}
.chip::after { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid rgba(23,20,15,0.25); flex-shrink: 0; margin-left: 2px; }
.chip.selected {
  background: rgba(139,94,43,0.16); backdrop-filter: blur(20px) saturate(1.9); -webkit-backdrop-filter: blur(20px) saturate(1.9);
  border: 1.5px solid rgba(216,168,122,0.6); color: var(--bark);
}
.chip.selected::after { border: none; background: var(--ollin-brown); }

/* ── Chip, plain modifier — no trailing dot, for label-only picks
   (e.g. concern selection) where the highlighted border/fill alone
   communicates selection. ── */
.chip--plain::after { display: none; }

/* ── Chip, on-dark modifier — over .bg-ambient hero screens,
   same glass treatment as .select-card--on-dark. ── */
.chip--on-dark {
  background: var(--glass-dark-bg); backdrop-filter: var(--glass-dark-blur); -webkit-backdrop-filter: var(--glass-dark-blur);
  border: var(--glass-dark-border); color: rgba(var(--onglass),1);
}
.chip--on-dark:hover { border-color: rgba(228,190,147,0.5); }
.chip--on-dark.selected {
  background: rgba(139,94,43,0.28); backdrop-filter: blur(44px) saturate(1.4); -webkit-backdrop-filter: blur(44px) saturate(1.4);
  border: 1.5px solid rgba(228,190,147,0.55); color: var(--brown-tint-3);
}

/* ── Inputs ── */
.field {
  width: 100%; min-height: 48px; padding: 14px 16px; border-radius: var(--r-control);
  background: var(--glass-light-bg); backdrop-filter: var(--glass-light-blur); -webkit-backdrop-filter: var(--glass-light-blur);
  border: 1px solid rgba(23,20,15,0.14);
  font-family: var(--font-text); font-size: 15px; color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease);
}
.field::placeholder { color: var(--ash); }
.field:focus { border-color: var(--ollin-brown); outline: none; }
.field-label { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); margin-bottom: 6px; }

/* ── Progress bar (linear) ── */
.progress-track { height: 6px; border-radius: 3px; background: rgba(23,20,15,0.1); overflow: hidden; }
.progress-track.on-dark { background: rgba(var(--onglass),0.15); }
.progress-fill { height: 100%; border-radius: 3px; background: var(--ollin-brown); transition: width var(--dur-medium) var(--ease); }

/* ── Ring progress ── */
.ring-track { stroke: rgba(23,20,15,0.1); }
.ring-track.on-dark { stroke: rgba(var(--onglass),0.16); }
.ring-fill { stroke: var(--ollin-brown); stroke-linecap: round; transform-origin: center; transform: rotate(-90deg); transition: stroke-dashoffset var(--dur-medium) var(--ease); }

/* ── Status dot ── */
.status-dot { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.status-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.low     { color: var(--state-low-light); }    .status-dot.low::before     { background: var(--state-low-light); }
.status-dot.normal  { color: var(--state-normal-light); } .status-dot.normal::before  { background: var(--state-normal-light); }
.status-dot.warn    { color: var(--state-warn-light); }   .status-dot.warn::before    { background: var(--state-warn-light); }
.status-dot.on-dark.low    { color: var(--state-low-dark); }    .status-dot.on-dark.low::before    { background: var(--state-low-dark); }
.status-dot.on-dark.normal { color: var(--state-normal-dark); } .status-dot.on-dark.normal::before { background: var(--state-normal-dark); }
.status-dot.on-dark.warn   { color: var(--state-warn-dark); }   .status-dot.on-dark.warn::before   { background: var(--state-warn-dark); }

/* ── Toggle row ── */
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid rgba(23,20,15,0.08); }
.toggle-row:last-child { border-bottom: none; }
.toggle-row-label { font-family: var(--font-text); font-size: 14px; font-weight: 500; color: var(--ink); }
.toggle-row-state { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.toggle-row-state.on  { color: var(--ollin-brown); }
.toggle-row-state.off { color: var(--ash); }

/* ── Bottom sheet / modal ── */
.overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-end; }
.overlay.hidden { display: none; }
.overlay-backdrop { position: absolute; inset: 0; background: rgba(23,20,15,0.45); animation: fadeIn var(--dur-normal) var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.bottom-sheet {
  position: relative; z-index: 1; width: 100%; max-width: 393px; margin: 0 auto;
  background: var(--cream); border-radius: var(--r-card) var(--r-card) 0 0;
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
  animation: slideUp var(--dur-medium) var(--ease);
}
@keyframes slideUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.bottom-sheet-handle { width: 36px; height: 4px; background: var(--mist); border-radius: 2px; margin: 0 auto var(--sp-5); }
.bottom-sheet-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.bottom-sheet-body  { font-family: var(--font-text); font-size: 14px; color: var(--slate); line-height: 1.55; margin-bottom: var(--sp-5); }
.bottom-sheet-actions { display: flex; flex-direction: column; gap: 10px; }

/* ── Toast ── */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--cream); font-family: var(--font-text); font-size: 13px; font-weight: 500;
  box-shadow: 0 12px 30px rgba(0,0,0,0.3); z-index: 3000;
  animation: toastIn var(--dur-medium) var(--ease);
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── Empty / error / loading states ── */
.state-block { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); text-align: center; padding: var(--sp-8) var(--sp-6); }
.state-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); }
.state-body  { font-family: var(--font-text); font-size: 14px; color: var(--slate); line-height: 1.5; max-width: 280px; }
.state-action { margin-top: var(--sp-3); }
.state-block--on-dark .state-title { color: rgba(var(--onglass),1); }
.state-block--on-dark .state-body { color: rgba(var(--onglass),0.6); }

.loading-rings { position: relative; width: 72px; height: 72px; margin: 0 auto var(--sp-5); }
.loading-rings svg:first-child { position: absolute; inset: 0; animation: spin 9s linear infinite; }
.loading-rings svg:last-child { position: absolute; inset: 10px; animation: spin 12s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }

/* ─── LAYOUT ─────────────────────────────────────────────── */
.max-content { max-width: 1180px; margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════
   P2 ADDITIONS — extends foundation, does not duplicate it.
   Needed the first time a "flow" screen (quiz, checkout, etc.
   — app-bar + scrollable content + persistent bottom action,
   no marketing hero to fall back to) appears; reused by every
   later flow screen (auth, checkout, account…).
═══════════════════════════════════════════════════════════ */

/* ── Flow bar — persistent bottom action bar for flow screens.
   Unlike .cta-bar (which hides ≥860px because the same action
   lives inline in a hero) this stays visible at every width. ── */
.flow-bar {
  position: sticky; bottom: 0; z-index: 90; flex-shrink: 0;
  padding: var(--sp-4) var(--sp-5); padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
}
.flow-bar-row { display: flex; gap: 10px; max-width: 480px; margin: 0 auto; }
@media (min-width: 860px) { .flow-bar-row { max-width: 640px; } }

/* ── Flow bar, on-dark modifier — for hero screens sitting over
   .bg-ambient. Descendant rule re-skins any .btn-back inside so
   it stays legible with no bar background behind it. ── */
.flow-bar--on-dark .btn-back {
  background: rgba(var(--onglass),0.08); border-color: rgba(var(--onglass),0.16); color: rgba(var(--onglass),0.7);
}
.flow-bar--on-dark .btn-back:hover { border-color: rgba(var(--onglass),0.32); color: rgba(var(--onglass),1); }

/* ── Select card — block-level selectable card (concern picks,
   quiz options): light glass, hover lift, brown-accent selected
   state, trailing filled dot indicator (no checkmark glyph, per
   icon stance). Grid variant carries a sub-line; row variant is
   single-line and centers the dot vertically. ── */
.select-card {
  position: relative; width: 100%; text-align: left; cursor: pointer;
  border-radius: var(--r-control);
  background: var(--glass-light-bg); backdrop-filter: var(--glass-light-blur); -webkit-backdrop-filter: var(--glass-light-blur);
  border: var(--glass-light-border);
  padding: 14px 40px 14px 16px;
  transition: border-color var(--dur-normal) var(--ease), background var(--dur-normal) var(--ease), transform var(--dur-fast) var(--ease);
}
.select-card:hover { transform: translateY(-2px); border-color: rgba(139,94,43,0.35); }
.select-card:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.select-card:active { transform: translateY(0) scale(0.99); }
.select-card.selected {
  background: rgba(139,94,43,0.16); backdrop-filter: blur(20px) saturate(1.9); -webkit-backdrop-filter: blur(20px) saturate(1.9);
  border: 1.5px solid rgba(216,168,122,0.6);
}
.select-card::after {
  content: ''; position: absolute; right: 14px; top: 16px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid rgba(23,20,15,0.2); background: transparent;
  transition: all var(--dur-normal) var(--ease);
}
.select-card.selected::after { border: none; background: var(--ollin-brown); }
.select-card-label { display: block; font-family: var(--font-text); font-size: 14px; font-weight: 500; color: var(--ink); }
.select-card.selected .select-card-label { color: var(--bark); }
.select-card-sub { display: block; font-family: var(--font-text); font-size: 12px; color: var(--slate); line-height: 1.4; margin-top: 3px; }
.select-card--row { min-height: 50px; display: flex; align-items: center; }
.select-card--row::after { top: 50%; margin-top: -8px; }

/* ── Select card, on-dark modifier — same component, over the
   ambient photo/gradient instead of cream. Per DESIGN-SYSTEM.md:
   "on the dark/photo context the same pattern shifts to
   rgba(26,20,14,0.32) glass pills." Add alongside `.select-card`
   (and `--row`/`--selected` as usual) on hero-screen chips. ── */
.select-card--on-dark {
  background: var(--glass-dark-bg); backdrop-filter: var(--glass-dark-blur); -webkit-backdrop-filter: var(--glass-dark-blur);
  border: var(--glass-dark-border);
}
.select-card--on-dark:hover { border-color: rgba(228,190,147,0.5); }
.select-card--on-dark.selected {
  background: rgba(139,94,43,0.28); backdrop-filter: blur(44px) saturate(1.4); -webkit-backdrop-filter: blur(44px) saturate(1.4);
  border: 1.5px solid rgba(228,190,147,0.55);
}
.select-card--on-dark::after { border-color: rgba(var(--onglass),0.28); }
.select-card--on-dark.selected::after { background: var(--brown-tint-1); }
.select-card--on-dark .select-card-label { color: rgba(var(--onglass),1); }
.select-card--on-dark.selected .select-card-label { color: var(--brown-tint-3); }
.select-card--on-dark .select-card-sub { color: rgba(var(--onglass),0.6); }

/* ── Select card, multi modifier — checkbox variant for "select all
   that apply" quiz questions. Square (per consent-checkbox precedent)
   so the two selection modes read as visually distinct affordances;
   a checkmark glyph confirms the pick since several boxes can be
   filled at once here (unlike the single dot, one glance isn't enough
   to confirm which of many are checked). Doesn't auto-advance the quiz. ── */
.select-card--multi::after { border-radius: 5px; }
.select-card--multi.selected::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4L3.6 6.6L9 1' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ── Question-transition motion — quiet slide, per motion tokens ── */
@keyframes slideInR { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInL { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
.slide-r { animation: slideInR var(--dur-medium) var(--ease) forwards; }
.slide-l { animation: slideInL var(--dur-medium) var(--ease) forwards; }

/* ── Question progress dots (geometry, per icon stance) ── */
.qd { width: 5px; height: 5px; border-radius: 50%; border: 1.5px solid rgba(23,20,15,0.18); background: transparent; transition: all var(--dur-fast) var(--ease); }
.qd.done { border: none; background: var(--ollin-brown); }
.qd.active { width: 14px; height: 5px; border-radius: 999px; border: none; background: var(--ollin-brown); }
.qd.on-dark { border-color: rgba(var(--onglass),0.28); }
.qd.on-dark.done, .qd.on-dark.active { border: none; background: var(--brown-tint-1); }

/* ── Toggle row — text wrapper + description line (foundation gap
   surfaced by checkout's WhatsApp-reminder row: label + supporting
   copy, not just a label). ── */
.toggle-row-text { display: flex; flex-direction: column; gap: 2px; }
.toggle-row-desc { font-family: var(--font-text); font-size: 12px; color: var(--slate); line-height: 1.4; max-width: 320px; }
.toggle-row--on-dark { border-bottom-color: rgba(var(--onglass),0.1); }
.toggle-row--on-dark .toggle-row-label { color: rgba(var(--onglass),1); }
.toggle-row--on-dark .toggle-row-desc { color: rgba(var(--onglass),0.55); }
.toggle-row--on-dark .toggle-row-state.on  { color: var(--brown-tint-1); }
.toggle-row--on-dark .toggle-row-state.off { color: rgba(var(--onglass),0.4); }

/* ═══════════════════════════════════════════════════════════
   P3 ADDITIONS — Auth (OTP), Protocol Teaser, Checkout. Extends
   foundation; every piece here is reused by later phases (account
   settings reuses field--on-dark/consent/toggle patterns, protocol
   detail reuses ing-card, referral reuses plan/feature-row shapes).
═══════════════════════════════════════════════════════════ */

/* ── Field, on-dark modifier ── */
.field--on-dark {
  background: var(--glass-dark-bg); backdrop-filter: var(--glass-dark-blur); -webkit-backdrop-filter: var(--glass-dark-blur);
  border: var(--glass-dark-border); color: rgba(var(--onglass),1);
}
.field--on-dark::placeholder { color: rgba(var(--onglass),0.38); }
.field--on-dark:focus { border-color: var(--brown-tint-1); }
.field-label--on-dark { color: rgba(var(--onglass),0.55); }

/* ── Phone input row: country-code chip + field ── */
.phone-row { display: flex; gap: 8px; }
.phone-cc {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  min-width: 52px; min-height: 48px; border-radius: var(--r-control);
  background: var(--glass-dark-bg); border: var(--glass-dark-border);
  font-family: var(--font-mono); font-size: 15px; color: rgba(var(--onglass),1);
}

/* ── OTP cell grid ── */
.otp-grid { display: flex; gap: 8px; }
.otp-cell {
  width: 100%; aspect-ratio: 1; max-width: 48px; text-align: center;
  border-radius: var(--r-control); background: var(--glass-dark-bg);
  backdrop-filter: var(--glass-dark-blur); -webkit-backdrop-filter: var(--glass-dark-blur);
  border: var(--glass-dark-border);
  font-family: var(--font-mono); font-size: 20px; font-weight: 500; color: rgba(var(--onglass),1);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.otp-cell:focus { border-color: var(--brown-tint-1); outline: none; }
.otp-cell.filled { border-color: rgba(228,190,147,0.55); background: rgba(139,94,43,0.22); }
.otp-cell.error { border-color: var(--state-low-dark); color: var(--state-low-dark); }
@keyframes otpShake { 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} }
.otp-shake { animation: otpShake 0.5s var(--ease); }

/* ── Inline link on dark glass (e.g. "Edit number") ── */
.link-on-dark { font-family: var(--font-text); font-size: 13px; font-weight: 600; color: var(--brown-tint-1); }
.link-on-dark:hover { opacity: 0.8; }

/* ── Stat ring — ring-track/ring-fill primitives + centered mono value ── */
.stat-ring { position: relative; flex-shrink: 0; }
.stat-ring-value {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--brown-tint-1);
}

/* ── Ingredient card (protocol teaser / full reveal) — material (.card-dark)
   + layout (.ing-card) come from elsewhere; this is the content typography,
   which belongs here since it's shared across 01.8 and 01.10, not scoped to
   either screen's own <style> block. ── */
.ing-card { position: relative; padding: var(--sp-5); }
.ing-card--locked { overflow: hidden; }
.ing-card-blurred { filter: blur(6px); user-select: none; pointer-events: none; }
.ing-locked-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(18,18,18,0.4);
}
.ing-category { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brown-tint-1); margin-bottom: 8px; }
.ing-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ing-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: rgba(var(--onglass),1); letter-spacing: -0.005em; }
.ing-desc { font-family: var(--font-text); font-size: 13px; color: rgba(var(--onglass),0.68); line-height: 1.6; margin-bottom: 14px; }
.ing-dose { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: rgba(var(--onglass),0.45); text-transform: uppercase; letter-spacing: 0.08em; padding-top: 12px; border-top: 1px solid rgba(var(--onglass),0.08); }
.ing-dose span { font-family: var(--font-text); font-size: 13px; font-weight: 600; color: var(--brown-tint-1); text-transform: none; letter-spacing: 0; margin-left: 6px; }

/* ── Dot-line — single-line inclusion item, replaces ✓ glyph per icon stance ── */
.dot-line { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; font-family: var(--font-text); font-size: 13px; color: rgba(var(--onglass),0.75); }
.dot-line::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ollin-brown); flex-shrink: 0; margin-top: 2px; }

/* ── Feature row — dot + title + description (checkout's "included" list) ── */
.feat-row { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(var(--onglass),0.08); }
.feat-row:last-child { border-bottom: none; }
.feat-row::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ollin-brown); flex-shrink: 0; margin-top: 6px; }
.feat-title { font-family: var(--font-text); font-size: 14px; font-weight: 600; color: rgba(var(--onglass),1); }
.feat-desc { font-family: var(--font-text); font-size: 12px; color: rgba(var(--onglass),0.55); margin-top: 2px; line-height: 1.4; }

/* ── Plan toggle (segmented control — one-time vs subscribe) ── */
.plan-toggle { display: flex; gap: 8px; }
.plan-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 10px; border-radius: var(--r-control);
  background: var(--glass-dark-bg); backdrop-filter: var(--glass-dark-blur); -webkit-backdrop-filter: var(--glass-dark-blur);
  border: var(--glass-dark-border); color: rgba(var(--onglass),0.6);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  transition: all var(--dur-normal) var(--ease);
}
.plan-tab-sub { font-size: 11px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; opacity: 0.8; }
.plan-tab.active { background: rgba(139,94,43,0.28); border: 1.5px solid rgba(228,190,147,0.55); color: var(--brown-tint-3); }

/* ── Essentials product card (small, horizontal-scroll row) ── */
.ess-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.ess-card { min-width: 164px; flex-shrink: 0; padding: var(--sp-4); }
.ess-name { font-family: var(--font-text); font-size: 13px; font-weight: 600; color: rgba(var(--onglass),1); margin-bottom: 3px; }
.ess-desc { font-family: var(--font-text); font-size: 11px; color: rgba(var(--onglass),0.55); line-height: 1.4; margin-bottom: 8px; }
.ess-price { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: rgba(var(--onglass),1); margin-bottom: 10px; }
.ess-add {
  width: 100%; min-height: 32px; border-radius: var(--r-control);
  border: 1.5px solid rgba(var(--onglass),0.2); background: transparent; color: rgba(var(--onglass),1);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  transition: all var(--dur-fast) var(--ease);
}
.ess-add:hover { border-color: rgba(228,190,147,0.5); }
.ess-add:disabled { border-color: var(--state-normal-dark); color: var(--state-normal-dark); cursor: default; }

/* ── Consent checkbox — custom, no checkmark glyph; a filled square
   communicates "checked" by color alone, per icon stance. ── */
.consent-row { display: flex; align-items: flex-start; gap: 10px; }
.consent-check {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
  border-radius: 4px; border: 1.5px solid rgba(var(--onglass),0.28); background: transparent; cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.consent-check:checked { background: var(--ollin-brown); border-color: var(--ollin-brown); }
.consent-check:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.consent-text { font-family: var(--font-text); font-size: 13px; color: rgba(var(--onglass),0.75); line-height: 1.5; }
.consent-link { color: var(--brown-tint-1); text-decoration: underline; }

/* ── Divider, on-dark ── */
.hr-on-dark { height: 1px; background: rgba(var(--onglass),0.1); }

/* ═══════════════════════════════════════════════════════════
   P4: REVEAL & CONFIRM — receipt-style card + numbered step
   timeline (order confirmation "what happens next"), first
   needed here but generic enough for any future left-aligned
   dark-glass info card / ordered list.
═══════════════════════════════════════════════════════════════ */

/* ── Receipt card — pairs with .card-dark / .card-dark-deep, which
   supply material only; this supplies padding + left alignment ── */
.receipt-card { text-align: left; padding: var(--sp-5); }
.receipt-card-title { font-family: var(--font-text); font-size: 15px; font-weight: 600; color: rgba(var(--onglass),1); margin-bottom: 5px; }
.receipt-card-body  { font-family: var(--font-text); font-size: 13px; color: rgba(var(--onglass),0.65); line-height: 1.55; }

/* ── Numbered step row — geometry (mono digit in a ring), no icon set ── */
.step-row { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.step-num {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--brown-tint-1);
  background: rgba(139,94,43,0.22); border: 1px solid rgba(228,190,147,0.3);
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.step-body { font-family: var(--font-text); font-size: 14px; color: rgba(var(--onglass),0.8); line-height: 1.55; }

/* ═══════════════════════════════════════════════════════════
   P5: POST-PURCHASE TRACKING — delivery tracking (dark hero),
   dashboard (light, two order-status states in one file), and
   the Ollin Care detail overlay. Extends foundation; the ring
   grid/calendar/full-panel pieces here are generic enough for
   Ollin Care (05.1) and biomarkers (05.3/05.4) to reuse later.
═══════════════════════════════════════════════════════════════ */

/* ── Dashboard app bar — logo + account avatar ── */
.dash-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26,20,14,0.32); border: 1px solid rgba(var(--onglass),0.18); color: var(--brown-tint-1);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  transition: opacity var(--dur-fast) var(--ease);
}
.dash-avatar:hover { opacity: 0.85; }

/* ── Greeting header ── */
.dash-greeting { padding: var(--sp-5) var(--sp-5) 0; }
.dash-greeting-name { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; color: rgba(var(--onglass),1); }
.dash-greeting-sub { display: flex; align-items: center; gap: 7px; font-family: var(--font-text); font-size: 13px; color: rgba(var(--onglass),0.6); margin-top: 4px; }
.online-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--state-normal-dark); flex-shrink: 0; }

/* ── Widget stack — dashboard = one scrolling column of glass
   widgets (per DESIGN-SYSTEM.md); each widget is .card-light or
   .card-dark + this padding/typography layer. ── */
.dash-col { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) var(--sp-9); }
.widget { padding: var(--sp-5); }
.widget-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: 6px; }
.widget-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.widget-title-on-dark { color: rgba(var(--onglass),1); }
.widget-body-text, .widget-body-text-on-dark { font-family: var(--font-text); font-size: 13px; color: rgba(var(--onglass),0.65); line-height: 1.55; margin-bottom: var(--sp-4); }
.widget-link { font-family: var(--font-text); font-size: 12px; font-weight: 600; color: var(--brown-tint-1); }
.widget-link:hover { opacity: 0.8; }
.widget-stat { font-family: var(--font-text); font-size: 11px; font-weight: 700; color: var(--brown-tint-1); }

/* ── Mini shipment timeline (dashboard widget, 3 steps) ── */
.mini-track { display: flex; align-items: flex-start; }
.mini-step { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mini-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(var(--onglass),0.16); display: flex; align-items: center; justify-content: center; }
.mini-dot.done { background: var(--ollin-brown); border-color: var(--ollin-brown); }
.mini-dot.active { border-color: var(--ollin-brown); }
.mini-dot.active::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ollin-brown); }
.mini-label { font-family: var(--font-text); font-size: 10px; color: rgba(var(--onglass),0.5); text-align: center; }
.mini-label.on { color: var(--brown-tint-1); }
.mini-connector { flex: 1; height: 2px; background: rgba(var(--onglass),0.14); margin: 7px 4px 0; }
.mini-connector.done { background: var(--ollin-brown); }

/* ── Full vertical shipment timeline (delivery-tracking.html) ── */
.ship-track { display: flex; flex-direction: column; }
.ship-step { display: flex; gap: 14px; }
.ship-dot-col { display: flex; flex-direction: column; align-items: center; }
.ship-dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(var(--onglass),0.18); display: flex; align-items: center; justify-content: center; }
.ship-dot.done { background: var(--ollin-brown); border-color: var(--ollin-brown); }
.ship-dot.active { border-color: var(--ollin-brown); }
.ship-dot.active::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ollin-brown); }
.ship-connector { width: 2px; flex: 1; min-height: 28px; background: rgba(var(--onglass),0.14); }
.ship-connector.done { background: var(--ollin-brown); }
.ship-step-body { padding-bottom: 22px; }
.ship-label { font-family: var(--font-text); font-size: 14px; font-weight: 600; color: rgba(var(--onglass),1); }
.ship-label.dim { color: rgba(var(--onglass),0.4); }
.ship-sub { font-family: var(--font-text); font-size: 12px; color: rgba(var(--onglass),0.55); margin-top: 2px; }
.ship-sub.on { color: var(--brown-tint-1); }

/* ── Tracking ID row + copy button ── */
.track-row { display: flex; align-items: center; justify-content: space-between; padding-top: var(--sp-4); margin-top: var(--sp-3); border-top: 1px solid rgba(var(--onglass),0.1); }
.track-id-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--onglass),0.45); margin-bottom: 3px; }
.track-id-val { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: rgba(var(--onglass),1); }
.btn-copy {
  min-height: 34px; padding: 0 14px; border-radius: var(--r-control);
  border: 1px solid rgba(var(--onglass),0.18); background: rgba(var(--onglass),0.06); color: rgba(var(--onglass),0.8);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  transition: all var(--dur-fast) var(--ease);
}
.btn-copy:hover { border-color: rgba(var(--onglass),0.32); }
.btn-copy.copied { border-color: var(--state-normal-dark); color: var(--state-normal-dark); }

/* ── Delivery confirmed banner ── */
.delivery-banner { display: flex; gap: 12px; align-items: flex-start; padding: var(--sp-4) var(--sp-5); }
.delivery-banner-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--state-normal-dark); flex-shrink: 0; }

/* ── Rings row — 3 stat rings across, reuses .stat-ring/.stat-ring-value ── */
.rings-row { display: flex; justify-content: space-between; gap: var(--sp-2); }
.ring-item { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; }
.ring-caption { font-family: var(--font-text); font-size: 10px; color: rgba(var(--onglass),0.5); text-align: center; line-height: 1.3; }

/* ── Today's dose row ── */
.dose-row { display: flex; align-items: center; justify-content: space-between; padding-top: var(--sp-4); margin-top: var(--sp-1); border-top: 1px solid rgba(var(--onglass),0.1); }
.dose-label { font-family: var(--font-text); font-size: 13px; font-weight: 600; color: rgba(var(--onglass),1); }
.dose-sub { font-family: var(--font-text); font-size: 11px; color: rgba(var(--onglass),0.5); margin-top: 1px; }
.btn-taken {
  min-height: 36px; padding: 0 16px; border-radius: var(--r-control);
  background: var(--ollin-brown); color: var(--cream);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  transition: opacity var(--dur-fast) var(--ease);
}
.btn-taken:hover { opacity: 0.88; }
.btn-taken.confirmed { background: rgba(147,193,160,0.2); color: var(--state-normal-dark); }

/* ── Upload zone — the one permitted stroked line-icon (arrow into
   tray), per DESIGN-SYSTEM.md's icon-stance exception for blood-test
   upload. Everything else here is geometry/type, no icon set. ── */
.upload-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: var(--sp-6) var(--sp-4); border-radius: var(--r-control);
  border: 1.5px dashed rgba(23,20,15,0.18); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.upload-zone:hover { border-color: rgba(139,94,43,0.4); background: rgba(139,94,43,0.04); }
.upload-zone-icon { width: 22px; height: 22px; color: var(--ollin-brown); }
.upload-zone-label { font-family: var(--font-text); font-size: 13px; font-weight: 600; color: var(--ink); }
.upload-zone-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ash); text-transform: uppercase; }
.upload-zone--on-dark { border-color: rgba(var(--onglass),0.2); }
.upload-zone--on-dark:hover { border-color: rgba(228,190,147,0.5); background: rgba(139,94,43,0.1); }
.upload-zone--on-dark .upload-zone-label { color: rgba(var(--onglass),1); }
.upload-zone--on-dark .upload-zone-icon { color: var(--brown-tint-1); }
.upload-zone--on-dark .upload-zone-sub { color: rgba(var(--onglass),0.5); }

/* ── Biomarker preview row (post-upload) — reuses .status-dot ── */
.biomarker-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(var(--onglass),0.08); }
.biomarker-row:last-child { border-bottom: none; }
.biomarker-name { font-family: var(--font-text); font-size: 13px; color: rgba(var(--onglass),1); }

/* ── Report row — previous-report list item (icon + name/sub + status
   pill). First needed by P8's blood-test-upload.html / blood-test-detail.html;
   generic enough for any later "file on record" list. On-dark only for now —
   every screen that lists past reports so far is a bg-ambient hero. ── */
.icon-box { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: rgba(228,190,147,0.14); color: var(--brown-tint-1); }
.icon-box svg { width: 18px; height: 18px; }
.report-row { display: flex; align-items: center; gap: var(--sp-3); padding: 12px 0; border-bottom: 1px solid rgba(var(--onglass),0.08); }
.report-row:last-child { border-bottom: none; }
.report-row-name { font-family: var(--font-text); font-size: 13px; font-weight: 600; color: rgba(var(--onglass),1); }
.report-row-sub { font-family: var(--font-text); font-size: 11px; color: rgba(var(--onglass),0.5); margin-top: 2px; }
.report-row-status { flex-shrink: 0; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--state-normal-dark); background: rgba(147,193,160,0.14); padding: 5px 9px; border-radius: 4px; }

/* ── Upload progress + processing states (blood-test-upload.html) ── */
.upload-progress { text-align: center; padding: var(--sp-7) 0; }
.upload-progress .icon-box { margin: 0 auto var(--sp-4); }
.upload-progress-title { font-family: var(--font-text); font-size: 15px; font-weight: 600; color: rgba(var(--onglass),1); margin-bottom: 4px; }
.upload-progress-sub { font-family: var(--font-text); font-size: 12px; color: rgba(var(--onglass),0.5); margin-bottom: var(--sp-5); }
.upload-processing-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); text-align: left; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-line { height: 13px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.06) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; margin-bottom: 10px; }
.skeleton-line:last-child { margin-bottom: 0; }

/* ── Essentials preview pills (dashboard teaser row) ── */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  padding: 7px 12px; border-radius: var(--r-pill); background: rgba(var(--onglass),0.08);
  font-family: var(--font-text); font-size: 12px; color: rgba(var(--onglass),0.65);
}
.pill-price { font-weight: 600; color: rgba(var(--onglass),1); }

/* ── Full-panel overlay — a detail view that covers the viewport
   over the page it was opened from (Ollin Care detail today; generic
   enough for any future drill-down that isn't a bottom-sheet-sized
   confirmation). Distinct from `.overlay`/`.bottom-sheet` which stay
   anchored to the bottom for short confirmations. ── */
.overlay--full { position: fixed; inset: 0; z-index: 2500; display: flex; flex-direction: column; background: var(--app-bg); }
.overlay--full.hidden { display: none; }
.full-panel-header { flex-shrink: 0; height: 56px; display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); border-bottom: 1px solid rgba(23,20,15,0.08); }
.full-panel-close {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--slate); transition: background var(--dur-fast) var(--ease);
}
.full-panel-close:hover { background: rgba(23,20,15,0.06); }
.full-panel-title { font-family: var(--font-text); font-size: 15px; font-weight: 700; color: var(--ink); }
.full-panel-scroll { flex: 1; overflow-y: auto; }
.full-panel-inner { max-width: 560px; margin: 0 auto; padding: var(--sp-5) var(--sp-5) var(--sp-9); }
.full-panel-footer {
  flex-shrink: 0; padding: var(--sp-4) var(--sp-5); padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  background: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.full-panel-footer-label { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brown-tint-1); margin-bottom: 3px; }
.full-panel-footer-sub { font-family: var(--font-text); font-size: 13px; color: rgba(244,241,234,0.7); }
.btn-set-reminder {
  flex-shrink: 0; min-height: 36px; padding: 0 16px; border-radius: var(--r-control);
  background: var(--ollin-brown); color: var(--cream);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.btn-set-reminder:hover { opacity: 0.88; }

/* ── Month nav + calendar grid (dosage history) ── */
.month-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.month-nav-btn { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--slate); transition: background var(--dur-fast) var(--ease); }
.month-nav-btn:hover { background: rgba(23,20,15,0.06); }
.month-label { font-family: var(--font-text); font-size: 13px; font-weight: 600; color: var(--ink); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-day-hdr { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ash); text-align: center; padding-bottom: 4px; }
.cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--slate);
}
.cal-day.today { border: 1.5px solid var(--ollin-brown); color: var(--ink); font-weight: 600; }
.cal-day.logged { background: rgba(139,94,43,0.16); color: var(--bark); font-weight: 600; }
.cal-day.pickable { cursor: pointer; }
.cal-day.pickable:hover { background: rgba(23,20,15,0.05); }

/* ── Time slot picker (WhatsApp reminder modal) — mono word + time,
   no emoji per icon stance (source used 🌅☀️🌙; dropped here). ── */
.time-slot-row { display: flex; flex-direction: column; gap: 8px; }
.time-slot {
  display: flex; align-items: baseline; justify-content: space-between; width: 100%; text-align: left;
  padding: 13px 16px; border-radius: var(--r-control);
  background: var(--glass-light-bg); border: 1px solid rgba(23,20,15,0.12);
  transition: all var(--dur-fast) var(--ease);
}
.time-slot:hover { border-color: rgba(139,94,43,0.3); }
.time-slot.sel { background: rgba(139,94,43,0.14); border: 1.5px solid rgba(139,94,43,0.5); }
.time-slot-name { font-family: var(--font-text); font-size: 14px; font-weight: 600; color: var(--ink); }
.time-slot-time { font-family: var(--font-mono); font-size: 12px; color: var(--slate); }
.time-slot.sel .time-slot-time { color: var(--ollin-brown); }
@keyframes nudge { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.time-slot.nudge { animation: nudge 220ms var(--ease) 2; }

/* ── App bar, has-back modifier — clears space so a permanently
   visible back button doesn't collide with the logo (existing
   OTP-style back buttons default to display:none so this gap
   never showed up before delivery-tracking.html). ── */
.app-bar--has-back .app-bar-logo { margin-left: 44px; }

/* ── Toggle helpers for the dashboard's two order-status widget
   stacks and the pre/post blood-upload state — reused pattern
   already established (.adherence-widget.visible etc.). ── */
.care-prompt-collapse { transition: opacity var(--dur-normal) var(--ease); }
.care-prompt-collapse.collapsed { opacity: 0; pointer-events: none; }
.adherence-widget { display: none; }
.adherence-widget.visible { display: block; animation: pageEnter var(--dur-medium) var(--ease); }
.blood-uploaded { display: none; }
.blood-uploaded.visible { display: block; }

/* ═══════════════════════════════════════════════════════════
   P6: PROTOCOL & ADD-ONS — protocol detail, essentials
   marketplace, refer a friend. All three are light pages with a
   .card-dark--ambient "hero" widget up top (protocol.html,
   refer.html) or accent zone (essentials.html), matching the
   dashboard's own light-page-with-dark-accent-card pattern
   rather than a full .bg-ambient hero — these are detail/list
   screens reached mid-session, not a first-open moment.
═══════════════════════════════════════════════════════════════ */

/* ── Secondary ghost button, on dark glass — generic (refer.html's
   "Share link" today; any future dark-card secondary action). ── */
.btn-secondary-on-dark {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 var(--sp-4); border-radius: var(--r-control);
  border: 1.5px solid rgba(var(--onglass),0.2); background: transparent; color: rgba(var(--onglass),1);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  transition: all var(--dur-fast) var(--ease);
}
.btn-secondary-on-dark:hover { border-color: rgba(228,190,147,0.5); }
.btn-secondary-on-dark.copied { border-color: var(--state-normal-dark); color: var(--state-normal-dark); }

/* ── Danger modifier — destructive/cautionary secondary action
   (e.g. account.html's "Cancel" subscription button). ── */
.btn-secondary-on-dark--danger { border-color: rgba(238,139,126,0.3); color: var(--state-low-dark); }
.btn-secondary-on-dark--danger:hover { border-color: rgba(238,139,126,0.55); }

/* ── Filter pill row (essentials category filter) — single-select,
   mono word, no dot glyph (this is a filter, not a selection chip
   with the concern/quiz-style trailing dot). Dark-glass by default:
   essentials.html is a full .bg-ambient page, same family as
   protocol.html/refer.html/dashboard.html (see PROGRESS.md's P6
   rework entry — this whole page family moved to the dark-hero
   treatment, reversing P6's own first-draft light-page attempt). ── */
.filter-pill-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.filter-pill {
  flex-shrink: 0; min-height: 34px; padding: 0 16px; border-radius: var(--r-pill);
  background: rgba(26,20,14,0.32); backdrop-filter: var(--glass-dark-blur); -webkit-backdrop-filter: var(--glass-dark-blur);
  border: 1px solid rgba(var(--onglass),0.14);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--onglass),0.6);
  transition: all var(--dur-fast) var(--ease);
}
.filter-pill:hover { border-color: rgba(228,190,147,0.4); }
.filter-pill.active { background: rgba(139,94,43,0.28); border-color: rgba(228,190,147,0.55); color: var(--brown-tint-3); }

/* ── Product card (essentials grid + matched-row) — dark-glass,
   same reasoning as the filter pills above. Image area stays a
   plain warm-gradient block, no category icon: the source used a
   different decorative line-icon per product, which is exactly the
   icon-set icon stance rules out; name + category text already
   carry the meaning. ── */
.prod-card { border-radius: var(--r-card); overflow: hidden; background: var(--glass-dark-bg); backdrop-filter: var(--glass-dark-blur); -webkit-backdrop-filter: var(--glass-dark-blur); border: var(--glass-dark-border); box-shadow: var(--glass-dark-shadow); }
.prod-card-image { height: 100px; position: relative; background: linear-gradient(135deg, var(--sand), var(--mist)); }
.prod-card-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.prod-card-name { font-family: var(--font-text); font-size: 13px; font-weight: 600; color: rgba(var(--onglass),1); margin-bottom: 2px; }
.prod-card-desc { font-family: var(--font-text); font-size: 11px; color: rgba(var(--onglass),0.55); line-height: 1.4; margin-bottom: 8px; }
.prod-card-price { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: rgba(var(--onglass),1); margin-bottom: 8px; }
/* Add-to-cart button reuses .ess-add (checkout's on-dark ghost product
   button, P3) rather than a new class — identical visual need. */

/* ── Matched row — same .prod-card, sized for horizontal scroll ── */
.prod-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.prod-card--sm { min-width: 168px; flex-shrink: 0; }

/* ── Essentials fixed cart bar — hidden until an item is added,
   then persistent at any width (a cart summary isn't a "current
   step" action like .cta-bar's mobile-only pattern, it should stay
   reachable whenever the cart has items, same reasoning as
   .flow-bar). "VIEW CART" has no destination, matching the
   source's own inert button (no onclick there either). ── */
.ess-cart-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none;
  align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5); padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: var(--ink); border-top: 1px solid rgba(255,255,255,0.1);
}
.ess-cart-bar.visible { display: flex; }
.ess-cart-count { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brown-tint-1); }
.ess-cart-total { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--cream); margin-top: 1px; }
.ess-cart-bar .btn-primary { width: auto; padding: 0 var(--sp-5); background: var(--cream); color: var(--ink); }

/* ═══════════════════════════════════════════════════════════
   P7: ACCOUNT — account.html, protocol-retake.html. Both full
   bg-ambient pages per DESIGN-SYSTEM.md's ambient-background scope
   note ("account modals... should follow the same rule"), same
   family as dashboard/protocol/refer. Screen text sits directly in
   cream/rgba(244,241,234,…) tones with no --on-dark suffix needed,
   same reasoning already established by protocol.html's .pr-* rules:
   the whole page is the dark context, not a light page with a dark
   accent card.
═══════════════════════════════════════════════════════════════ */

/* ── Account avatar — larger profile-header circle, distinct from
   the 34px .dash-avatar used in nav bars. ── */
.acc-avatar {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(139,94,43,0.22); border: 1px solid rgba(228,190,147,0.35);
  color: var(--brown-tint-1); font-family: var(--font-display); font-size: 26px; font-weight: 600;
}

/* ── Settings row — label (+ optional sub-line) left, value/control
   right, hairline divider. Generic enough for any info/nav row list;
   first needed for account profile/support/legal sections. ── */
.acc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 14px 0; border-bottom: 1px solid rgba(var(--onglass),0.08); }
.acc-row:last-child { border-bottom: none; }
.acc-row--action { cursor: pointer; transition: opacity var(--dur-fast) var(--ease); }
.acc-row--action:hover { opacity: 0.8; }
.acc-row-label { font-family: var(--font-text); font-size: 14px; font-weight: 500; color: rgba(var(--onglass),1); }
.acc-row-sub { font-family: var(--font-text); font-size: 12px; color: rgba(var(--onglass),0.55); margin-top: 2px; }
.acc-row-value { display: flex; align-items: center; gap: 6px; font-family: var(--font-text); font-size: 13px; color: rgba(var(--onglass),0.55); }
.acc-row-caret { color: rgba(var(--onglass),0.3); font-size: 15px; line-height: 1; }
.acc-row--danger .acc-row-label { color: var(--state-low-dark); }

/* ── Status pill — colored state label (subscription/order status),
   distinct from .badge (which always carries a brown dot + is a
   trust-signal, not a state indicator). ── */
.status-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.status-pill--success { background: rgba(147,193,160,0.16); color: var(--state-normal-dark); }
.status-pill--warn    { background: rgba(139,94,43,0.2);   color: var(--brown-tint-1); }

/* ── Notice banner — success-tinted reassurance copy (retake screen).
   Generic enough for any future inline confirmation banner. ── */
.notice-banner { display: flex; gap: 10px; align-items: flex-start; padding: var(--sp-4); border-radius: var(--r-control); font-family: var(--font-text); font-size: 13px; line-height: 1.55; }
.notice-banner--success { background: rgba(147,193,160,0.12); border: 1px solid rgba(147,193,160,0.28); color: var(--state-normal-dark); }

/* ── Dosage badge — small mono pill marking a dose value as data,
   per DESIGN-SYSTEM.md's rule that the brown ramp marks data. ── */
.dosage-badge { font-family: var(--font-mono); font-size: 11px; color: var(--brown-tint-1); background: rgba(139,94,43,0.14); padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; }

/* ── Protocol-history card — version label + status pill + date,
   ingredient rows beneath (reuses .biomarker-row for the divided
   list). Always-expanded, no click-to-toggle accordion — same
   chevron-avoids-icon-stance reasoning already established for
   01.10/07.1's ingredient lists: nothing is hidden, so no disclosure
   affordance is needed. ── */
.proto-hist-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: 2px; }
.proto-hist-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-text); font-size: 15px; font-weight: 600; color: rgba(var(--onglass),1); }
.proto-hist-date { font-family: var(--font-text); font-size: 12px; color: rgba(var(--onglass),0.5); margin-bottom: 12px; }

/* ═══════════════════════════════════════════════════════════
   STAGING SYNC — pre-payment flow (disclaimer → checkout).
   Mirrors the o-* components on app-stg.ollinwellness.com so
   these screens match staging 1:1; class names follow staging's
   own so future syncs map across directly. Existing components
   above are left as-is because post-payment screens still use
   them.
═══════════════════════════════════════════════════════════ */
:root {
  --o-glass-blur: blur(38px) saturate(1.25);
  --o-error: #9B251B;
}

/* ── App bar ── */
.o-app-bar { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-start; height: 56px; padding: 0 20px; }
.o-app-bar-logo { display: flex; align-items: center; width: 66px; cursor: pointer; color: rgba(var(--onglass),1); }
.o-app-bar-back {
  position: absolute; left: 12px; top: 8px; width: 40px; height: 40px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center; color: rgba(var(--onglass),0.7);
  transition: background var(--dur-fast) var(--ease);
}
.o-app-bar-back:hover { color: rgba(var(--onglass),1); background: rgba(255,255,255,0.08); }
.o-app-bar-title { margin-left: 44px; font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 24px; color: rgba(var(--onglass),1); }
@media (min-width: 768px) { .o-app-bar { padding: 0 32px; } }

/* ── Flow content shell — centred column, width set per screen ── */
.o-flow-main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 10px 20px 12px; }
.o-flow-col { width: 100%; max-width: var(--o-col, 600px); }
.o-flow-col--440 { --o-col: 440px; }
.o-flow-col--480 { --o-col: 480px; }
.o-flow-col--640 { --o-col: 640px; }
.o-flow-col--720 { --o-col: 720px; }
@media (min-width: 768px) { .o-flow-main { padding: 10px 32px 28.8px; } }

/* ── Type ── */
.o-headline { font-family: var(--font-display); font-size: clamp(24px, 4vw, 34px); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; color: rgba(var(--onglass),1); }
.o-subtext { font-family: var(--font-text); font-size: 15px; line-height: 1.4; color: rgba(var(--onglass),0.68); }
.o-helper { font-family: var(--font-text); font-size: 14px; line-height: 20px; color: rgba(254,254,251,0.5); }
.o-question { font-family: var(--font-display); font-size: clamp(20px, 3vw, 28px); font-weight: 600; line-height: 1.28; letter-spacing: -0.01em; color: rgba(var(--onglass),1); }
.o-eyebrow { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brown-tint-1); }
.o-eyebrow--compact { font-size: 12.5px; }
@media (max-width: 1366px), (max-height: 820px) { .o-eyebrow--compact { font-size: 10px; letter-spacing: 0.14em; } }
@media (max-width: 767px) { .o-eyebrow--compact { font-size: 11px; letter-spacing: 0.12em; } }
.o-error { margin-top: 10px; font-family: var(--font-text); font-size: 14px; font-weight: 500; line-height: 20px; color: var(--o-error); }

/* ── Fields ── */
.o-field-label { display: block; margin-bottom: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--onglass),0.9); }
.o-field {
  width: 100%; min-height: 48px; padding: 14px 16px; border-radius: var(--r-control);
  background: rgba(26,20,14,0.32); backdrop-filter: var(--o-glass-blur); -webkit-backdrop-filter: var(--o-glass-blur);
  border: 1px solid rgba(255,255,255,0.32);
  font-family: var(--font-text); font-size: 15px; line-height: 24px; color: rgba(var(--onglass),1);
  transition: border-color var(--dur-fast) var(--ease);
}
.o-field::placeholder { color: rgba(var(--onglass),0.55); }
.o-field:focus { outline: none; border-color: rgba(228,190,147,0.55); }
.o-field.is-error { border-color: var(--o-error); }

/* ── Select card (single + multi) ── */
.o-select-card {
  position: relative; width: 100%; text-align: left; cursor: pointer; padding: 14px 40px 14px 16px; border-radius: var(--r-control);
  background: rgba(26,20,14,0.32); backdrop-filter: var(--o-glass-blur); -webkit-backdrop-filter: var(--o-glass-blur);
  border: 1px solid rgba(255,255,255,0.32);
  transition: border-color var(--dur-normal) var(--ease), background var(--dur-normal) var(--ease), transform var(--dur-fast) var(--ease);
}
.o-select-card:hover { border-color: rgba(228,190,147,0.5); transform: translateY(-2px); }
.o-select-card:active { transform: translateY(0) scale(0.99); }
.o-select-card:focus-visible { outline: none; }
.o-select-card.is-selected { background: rgba(139,94,43,0.28); border-color: rgba(228,190,147,0.55); backdrop-filter: blur(44px) saturate(1.4); -webkit-backdrop-filter: blur(44px) saturate(1.4); }
.o-select-card::after { content: ''; position: absolute; right: 14px; top: 16px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.28); background: transparent; transition: all var(--dur-normal) var(--ease); }
.o-select-card.is-selected::after { border: none; background: var(--brown-tint-1); }
.o-select-card-label { display: block; font-family: var(--font-text); font-size: 14px; font-weight: 500; line-height: 20px; color: rgba(var(--onglass),1); }
.o-select-card.is-selected .o-select-card-label { color: var(--brown-tint-3); }
.o-select-card-row { min-height: 50px; display: flex; align-items: center; }
.o-select-card-row::after { top: 50%; margin-top: -8px; }
.o-select-card-multi::after { border-radius: 3px; }
.o-select-card-multi.is-selected::after {
  background: var(--brown-tint-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.8 2.8 5.2-5.6' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / 11px no-repeat;
  border-radius: 3px;
}
.o-opts { display: flex; flex-direction: column; gap: 12px; }

/* ── Choice card (goal-path picker) ── */
.o-choice-card {
  display: block; width: 100%; text-align: left; cursor: pointer; padding: 20px 24px; border-radius: var(--r-card);
  background: rgba(26,20,14,0.38); backdrop-filter: var(--o-glass-blur); -webkit-backdrop-filter: var(--o-glass-blur);
  border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 11px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.09);
  transition: border-color var(--dur-normal) var(--ease), transform var(--dur-fast) var(--ease);
}
.o-choice-card:hover { border-color: rgba(139,94,43,0.55); transform: translateY(-2px); }
.o-choice-card:active { transform: translateY(0) scale(0.99); }
.o-choice-card-title { margin-bottom: 5px; font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 24.3px; color: rgba(var(--onglass),1); }

/* ── Goal chip ── */
.o-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.o-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-pill); cursor: pointer;
  background: rgba(23,20,15,0.24); backdrop-filter: var(--o-glass-blur); -webkit-backdrop-filter: var(--o-glass-blur);
  border: 1px solid rgba(244,241,234,0.22);
  font-family: var(--font-text); font-size: 14px; font-weight: 500; line-height: 1.42857; color: rgba(244,241,234,0.78);
  transition: all var(--dur-normal) var(--ease);
}
.o-chip:hover { color: var(--cream); background: rgba(23,20,15,0.32); border-color: rgba(228,190,147,0.52); }
.o-chip:focus { outline: none; }
.o-chip:focus-visible { outline: 2px solid rgba(228,190,147,0.5); outline-offset: 2px; }
.o-chip.is-selected {
  color: var(--brown-tint-3); background: rgba(228,190,147,0.22); border-color: rgba(228,190,147,0.9);
  box-shadow: inset 0 0 0 1px rgba(244,241,234,0.12), 0 0 0 1px rgba(228,190,147,0.14);
  backdrop-filter: blur(44px) saturate(1.4); -webkit-backdrop-filter: blur(44px) saturate(1.4);
}
.o-chip.is-limit-reached, .o-chip.is-limit-reached:hover { color: rgba(244,241,234,0.32); background: rgba(23,20,15,0.14); border-color: rgba(244,241,234,0.08); box-shadow: none; cursor: not-allowed; }
.o-chip:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.o-chip-mark { margin-right: 6px; }
.o-chip-mark--add { margin-right: 4px; }
@media (max-width: 639px) { .o-chip { gap: 4px; padding: 6px 11px; font-size: 12px; } }

/* ── "In every scoop" foundations card ── */
.o-base-card {
  display: flex; align-items: baseline; gap: 16px; max-width: 560px; padding: 16px 20px; border-radius: var(--r-card);
  background: rgba(26,20,14,0.38); backdrop-filter: var(--o-glass-blur); -webkit-backdrop-filter: var(--o-glass-blur);
  border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 11px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.09);
}
.o-base-card-label { flex-shrink: 0; font-family: var(--font-mono); font-size: 10px; line-height: 14.3px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brown-tint-1); }
.o-base-card-text { font-family: var(--font-text); font-size: 14px; line-height: 1.5; color: rgba(var(--onglass),0.8); }
@media (max-width: 520px) { .o-base-card { flex-direction: column; gap: 6px; } }

/* ── Buttons ── */
.o-flow-bar { flex-shrink: 0; padding-top: 20px; padding-bottom: calc(180px + env(safe-area-inset-bottom)); }
.o-flow-bar-row { position: relative; z-index: 60; display: flex; gap: 10px; }
@media (min-width: 768px) { .o-flow-bar { padding-bottom: 72px; } }
.o-btn-back {
  display: inline-flex; align-items: center; justify-content: center; min-width: 88px; min-height: 48px; padding: 0 16px; border-radius: var(--r-control);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(var(--onglass),0.7);
  transition: all var(--dur-fast) var(--ease);
}
.o-btn-back:hover { color: rgba(var(--onglass),1); border-color: rgba(255,255,255,0.32); }
.o-btn-continue, .o-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--r-control); cursor: pointer;
  background: var(--ink); color: var(--cream);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.o-btn-continue { flex: 1; }
.o-btn-primary { width: 100%; padding: 0 24px; }
.o-btn-continue:hover, .o-btn-primary:hover { opacity: 0.88; }
.o-btn-primary:active { transform: translateY(1px); }
.o-btn-continue:disabled, .o-btn-primary:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

/* ── Fixed food-supplement disclaimer at the foot of flow screens ── */
.o-disclaimer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; pointer-events: none;
  padding: 10px 24px calc(14px + env(safe-area-inset-bottom));
  font-family: var(--font-text); font-size: 12px; line-height: 1.55; text-align: center; color: rgba(255,255,255,0.72);
}

/* ── Short-laptop compaction (staging: 1024–1366w, ≤820h) ── */
@media (min-width: 1024px) and (max-width: 1366px) and (max-height: 820px) {
  .o-select-card.o-select-card-row { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .o-btn-continue, .o-btn-back { min-height: 44px; }
  .o-app-bar { height: 36px; }
}

/* ── Staging has no light mode on these screens: pin the dark tokens and
   ambient background even when a light theme was saved elsewhere. ── */
.o-theme-dark [hidden] { display: none !important; }
.o-theme-dark { --onglass: 244,241,234; --brown-tint-1: #E4BE93; --brown-tint-2: #C9A47A; --brown-tint-3: #F3E2CE; font-size: 14px; line-height: 1.42857; }
:root[data-theme="light"] .page.bg-ambient.o-theme-dark {
  background:
    radial-gradient(85% 55% at 2% 4%,  rgba(32,29,26,0.30), transparent 70%),
    radial-gradient(85% 65% at 85% 38%, rgba(230,208,172,0.42), transparent 70%),
    linear-gradient(180deg, #55524C 0%, #726A5D 22%, #9C8C77 42%, #A69682 50%, #8D785F 62%, #6B5340 76%, #43302A 88%, #241A14 100%);
  background-attachment: fixed;
}

/* ── Journey disclaimer — frosted sheet over the ambient background,
   scrolls internally; the agree button arms once the box is ticked. ── */
.o-disc { --disc-ink: #090806; --disc-body: #4A3828; --disc-muted: #9A8870; --disc-line: #C4A882; --disc-brown: #5C3A1A; --disc-brown-mid: #8B5E2A; --disc-acc: #C4936A; --disc-ease: cubic-bezier(.16,1,.3,1);
  height: 100vh; height: 100svh; min-height: 0; overflow: hidden; color: var(--disc-body); }
.o-disc-header { position: relative; z-index: 1; flex-shrink: 0; padding: 22px clamp(16px, 3.2vw, 40px) 0; }
.o-disc-logo { display: inline-block; line-height: 0; color: #fff; cursor: pointer; transition: opacity 0.2s; }
.o-disc-logo:hover { opacity: 0.8; }
.o-disc-main { position: relative; z-index: 1; flex: 1; display: flex; width: 100%; max-width: 760px; min-height: 0; margin: 0 auto; padding: 18px 32px 28px; }
.o-disc-sheet {
  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 26px;
  background: rgba(255,253,249,0.62); border: 1px solid rgba(255,255,255,0.7);
  backdrop-filter: blur(30px) saturate(130%); -webkit-backdrop-filter: blur(30px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 30px 64px -34px rgba(60,36,14,0.5);
  animation: oDiscRise .8s 80ms var(--disc-ease) both;
}
@keyframes oDiscRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.o-disc-progress { flex-shrink: 0; height: 3px; background: rgba(196,147,106,0.16); overflow: hidden; }
.o-disc-progress span { display: block; height: 100%; width: 0; border-radius: 0 3px 3px 0; background: var(--disc-acc); transition: width .15s linear; }
.o-disc-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px clamp(22px, 3.6vw, 40px) 24px;
  scrollbar-width: thin; scrollbar-color: rgba(92,58,26,0.25) transparent;
  -webkit-mask-image: linear-gradient(transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
}
.o-disc-scroll::-webkit-scrollbar { width: 6px; }
.o-disc-scroll::-webkit-scrollbar-thumb { background: rgba(92,58,26,0.22); border-radius: 6px; }
.o-disc-title { margin-top: 24px; font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; color: var(--ollin-brown); }
@media (min-width: 768px) { .o-disc-title { font-size: 30px; } }
.o-disc-sec { padding: 24px 0; }
.o-disc-sec + .o-disc-sec { border-top: 1px solid rgba(92,58,26,0.12); }
.o-disc-sec h2 { margin-bottom: 10px; font-family: var(--font-display); font-size: 18px; font-weight: 500; line-height: 24px; letter-spacing: -0.015em; color: var(--disc-ink); }
.o-disc-sec p { font-size: 15px; line-height: 1.65; color: var(--disc-body); }
.o-disc-sec p + p { margin-top: 12px; }
.o-disc-sec .o-disc-lead { margin-bottom: 4px; font-weight: 600; color: var(--disc-ink); }
.o-disc-sec .o-disc-lead + p { margin-top: 0; }
.o-disc-cb {
  position: relative; display: grid; grid-template-columns: 26px 1fr; align-items: start; gap: 16px; margin-top: 8px; padding: 20px 22px; border-radius: 18px; cursor: pointer; scroll-margin: 24px;
  background: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  transition: border-color .25s, background .3s, box-shadow .35s var(--disc-ease), transform .3s var(--disc-ease);
  -webkit-tap-highlight-color: transparent;
}
.o-disc-cb input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.o-disc-cb:hover { background: rgba(255,255,255,0.75); border-color: rgba(196,160,112,0.5); }
.o-disc-cb:active { transform: scale(0.996); }
.o-disc-cb:has(input:focus-visible) { border-color: var(--disc-acc); box-shadow: 0 0 0 3px rgba(196,147,106,0.45), inset 0 1px 0 rgba(255,255,255,0.6); }
.o-disc-cb:has(input:checked) { background: rgba(255,255,255,0.9); border-color: rgba(196,147,106,0.6); box-shadow: 0 12px 28px -16px rgba(120,76,36,0.5), inset 0 1px 0 rgba(255,255,255,0.6); }
.o-disc-box { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 8px; background: rgba(255,255,255,0.9); border: 1.5px solid var(--disc-line); transition: background .2s, border-color .2s, transform .3s var(--disc-ease); }
.o-disc-cb:hover .o-disc-box { border-color: var(--disc-brown-mid); }
.o-disc-box svg { width: 13px; height: 13px; opacity: 0; transition: opacity .35s var(--disc-ease) 50ms; }
.o-disc-cb input:checked + .o-disc-box { background: var(--disc-ink); border-color: var(--disc-ink); }
.o-disc-cb input:checked + .o-disc-box svg { opacity: 1; }
.o-disc-list { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.o-disc-list li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.6; color: var(--disc-body); }
.o-disc-list li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--disc-line); transition: background .3s; }
.o-disc-cb:has(input:checked) .o-disc-list li::before { background: var(--disc-ink); }
.o-disc-cb.is-nudge { border-color: var(--disc-acc); animation: oDiscNudge .5s .1s var(--disc-ease); }
.o-disc-cb.is-nudge .o-disc-box { border-color: var(--disc-brown-mid); }
@keyframes oDiscNudge { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.o-disc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.o-disc-foot { flex-shrink: 0; display: flex; justify-content: flex-end; padding: 14px clamp(16px, 2.4vw, 22px) calc(14px + env(safe-area-inset-bottom)); background: rgba(255,253,249,0.35); border-top: 1px solid rgba(255,255,255,0.6); }
.o-disc-btn {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 220px; height: 54px; border-radius: 999px;
  background: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.75); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25);
  font-family: var(--font-display); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--disc-muted);
  transition: color .35s, border-color .35s, box-shadow .35s var(--disc-ease), transform .2s var(--disc-ease), width .5s var(--disc-ease);
}
.o-disc-btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--disc-ink); transform: scaleX(0); transform-origin: 0 center; transition: transform .55s var(--disc-ease), background .25s; }
.o-disc-btn .o-disc-arr { width: 0; opacity: 0; transform: translateX(-6px); transition: width .4s var(--disc-ease), opacity .3s, transform .4s var(--disc-ease); }
.o-disc-btn .o-disc-done { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.o-disc-btn.is-on { color: #FAFAF7; border-color: var(--disc-ink); box-shadow: 0 14px 28px -14px rgba(30,18,6,0.7); }
.o-disc-btn.is-on::before { transform: scaleX(1); }
.o-disc-btn.is-on .o-disc-arr { width: 16px; opacity: 1; transform: none; }
.o-disc-btn.is-on:hover::before { background: var(--disc-brown); }
.o-disc-btn.is-on:hover .o-disc-arr { transform: translateX(4px); }
.o-disc-btn.is-on:hover { transform: translateY(-1px); }
.o-disc-btn:not(.is-on):hover { color: #6A5840; background: rgba(255,255,255,0.65); }
.o-disc-btn:active { transform: scale(0.97); }
.o-disc-btn.is-sent { width: 54px; pointer-events: none; }
.o-disc-btn.is-sent .o-disc-lbl, .o-disc-btn.is-sent .o-disc-arr { opacity: 0; }
.o-disc-btn.is-sent .o-disc-done { opacity: 1; transition: opacity .2s .3s; }
@media (max-width: 600px) {
  .o-disc-header { padding: 18px 16px 0; }
  .o-disc-main { padding: 14px 12px 12px; }
  .o-disc-sheet { border-radius: 22px; }
  .o-disc-scroll { padding: 2px 18px 20px; }
  .o-disc-sec { padding: 20px 0; }
  .o-disc-sec h2 { font-size: 17px; }
  .o-disc-cb { gap: 12px; padding: 16px; }
  .o-disc-foot { justify-content: stretch; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .o-disc-btn { width: 100%; }
  .o-disc-btn.is-sent { width: 54px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .o-disc-sheet { animation-duration: .01s; } }

/* ── Goal-path choice (staging /quiz) ── */
.o-goal-title { margin-bottom: 24px; }
.o-goal-choices { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }

/* ── About you (staging /quiz/about-you) ── */
.o-demo-title { margin-bottom: 20px; }
.o-demo-field { margin-bottom: 24px; }
.o-demo-field .o-field { min-height: 54px; }

/* ── Goal selection (staging /quiz/concerns) ── */
.o-cs-title { margin-bottom: 10px; }
.o-cs-sub { max-width: 480px; margin-bottom: 28px; }
.o-cs-base { margin-bottom: 20px; }
.o-cs-chips { margin-bottom: 20px; }
.o-cs-limit { margin-top: 16px; }

/* ── Concern Finder quiz (staging /quiz/stage1, stage2a, stage2b) ── */
.o-quiz-progress-header { flex-shrink: 0; padding: 10px 20px; }
.o-quiz-progress-inner { max-width: 640px; margin: 0 auto; }
.o-quiz-segments { display: flex; gap: 4px; margin-bottom: 8px; }
.o-progress-track { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.15); overflow: hidden; }
.o-progress-fill { width: 0; height: 100%; border-radius: 3px; background: var(--ollin-brown); transition: width var(--dur-medium) var(--ease); }
.o-quiz-progress-row { display: flex; align-items: center; justify-content: space-between; }
.o-quiz-dots { display: flex; align-items: center; gap: 5px; }
.o-qd { width: 5px; height: 5px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.28); background: transparent; transition: all var(--dur-fast) var(--ease); }
.o-qd.is-done { border: none; background: var(--brown-tint-1); }
.o-qd.is-active { width: 14px; border: none; border-radius: var(--r-pill); background: var(--brown-tint-1); }
.o-quiz-content { padding-top: 20px; }
.o-quiz-q { display: flex; flex-direction: column; gap: 24px; }
.o-quiz-hint { margin-bottom: -16px; }
.o-quiz-validation-error { margin-top: -8px; }
@media (min-width: 1024px) and (max-width: 1366px) and (max-height: 820px) {
  .o-quiz-progress-header { padding-top: 0; padding-bottom: 8px; }
  .o-quiz-content { padding-top: 0; }
}

/* ── Recommended goals (staging /quiz/recommendation) ── */
.o-rec-title { margin: 8px 0 10px; }
.o-rec-picked { margin: 16px 0 4px; }
.o-rec-remove { margin-top: 8px; }
.o-rec-more { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); }
.o-rec-more.is-alone { margin-top: 4px; }
.o-rec-more-title { margin-bottom: 4px; }
.o-rec-more-hint { margin-bottom: 12px; color: #fff; }
.o-rec-base { margin-top: 24px; }
.o-rec-empty { margin-top: 16px; }

/* ── Building your formula (staging loader) ── */
.o-gen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; }
.o-gen-logo { display: flex; color: rgba(var(--onglass),1); cursor: pointer; }
.o-gen-rings { margin: 32px 0 0; }
.o-gen-title { margin: 24px 0 10px; }
.o-gen-sub { max-width: 320px; }

/* ── Your formula (staging /protocol) — two columns from 960px with a
   sticky summary; one column below, with the CTA pinned to the foot. ── */
.o-proto { height: 100vh; height: 100dvh; overflow: hidden; }
.o-proto-main { flex: 1; min-height: 0; overflow-y: auto; padding: 0 0 40px;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 56px), transparent); mask-image: linear-gradient(#000 calc(100% - 56px), transparent); }
.o-proto-grid { display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; padding: 0 20px; }
.o-proto-aside { display: contents; }
.o-proto-summary { order: 1; padding-top: 6px; }
.o-proto-body { order: 2; min-width: 0; }
.o-proto-disclaimer { order: 3; margin-top: 32px; padding-top: 16px; border-top: 1px solid rgba(244,241,234,0.1); font-family: var(--font-text); font-size: 11px; line-height: 1.55; color: rgba(244,241,234,0.7); }
.o-proto-eyebrow { margin-bottom: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brown-tint-1); }
.o-proto-title { margin-bottom: 10px; font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; color: rgba(var(--onglass),1); }
.o-proto-count { max-width: 340px; font-family: var(--font-text); font-size: 14px; line-height: 1.5; color: rgba(244,241,234,0.7); }
.o-proto-count b { font-weight: 600; color: rgba(244,241,234,0.95); }
.o-proto-cta { display: none; margin-top: 32px; }
.o-proto-cta .o-btn-continue { width: 100%; }

.o-proto-tabs {
  display: flex; gap: 4px; margin: 24px 0 20px; padding: 4px; border-radius: var(--r-pill);
  background: rgba(26,20,14,0.38); border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: var(--o-glass-blur); -webkit-backdrop-filter: var(--o-glass-blur);
}
.o-proto-tab {
  flex: 1; padding: 8px 6px; border-radius: var(--r-pill); text-align: center; white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; line-height: normal; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(244,241,234,0.6); transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.o-proto-tab:hover { color: rgba(244,241,234,0.95); }
.o-proto-tab:focus-visible { outline: 2px solid var(--brown-tint-1); outline-offset: 3px; }
.o-proto-tab.is-active { background: var(--brown-tint-1); color: var(--ink); }
@media (min-width: 482px) {
  .o-proto-tabs { display: inline-flex; }
  .o-proto-tab { flex: none; padding: 8px 16px; font-size: 11px; letter-spacing: 0.1em; }
}

.o-proto-panel { display: flex; flex-direction: column; gap: 24px; }
.o-proto-panel[hidden] { display: none; }
.o-proto-cat-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding: 0 4px;
  font-family: var(--font-text); font-size: 10px; font-weight: 500; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244,241,234,0.8);
}
.o-proto-list {
  list-style: none; overflow: hidden; border-radius: var(--r-card);
  background: rgba(26,20,14,0.38); border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: var(--o-glass-blur); -webkit-backdrop-filter: var(--o-glass-blur);
}
.o-proto-item { border-bottom: 1px solid rgba(244,241,234,0.08); }
.o-proto-item:last-child { border-bottom: none; }
.o-proto-row { display: grid; grid-template-columns: minmax(0,1fr) auto 14px; align-items: center; gap: 16px 10px; width: 100%; padding: 14px 16px; text-align: left; }
.o-proto-name { font-family: var(--font-text); font-size: 14px; font-weight: 500; line-height: normal; color: rgba(244,241,234,0.95); transition: color var(--dur-fast) var(--ease); }
.o-proto-dose { max-width: 92px; text-align: right; font-family: var(--font-mono); font-size: 11px; line-height: normal; color: rgba(244,241,234,0.5); }
.o-proto-chev { justify-self: end; width: 7px; height: 7px; margin-top: -3px; border-right: 1px solid rgba(244,241,234,0.45); border-bottom: 1px solid rgba(244,241,234,0.45); transform: rotate(45deg); transition: transform var(--dur-normal) var(--ease), margin var(--dur-normal) var(--ease); }
.o-proto-item.is-open .o-proto-name { color: var(--brown-tint-1); }
.o-proto-item.is-open .o-proto-chev { margin-top: 3px; transform: rotate(-135deg); }
.o-proto-detail { max-width: 62ch; padding: 0 16px 20px; font-family: var(--font-text); font-size: 13px; line-height: 1.6; color: rgba(244,241,234,0.66); }
.o-proto-form { margin-top: 12px; font-family: var(--font-mono); font-size: 10px; line-height: 1.6; letter-spacing: 0.06em; color: rgba(244,241,234,0.45); }

.o-proto-bar { flex-shrink: 0; padding: 6px 20px calc(12px + env(safe-area-inset-bottom)); }
.o-proto-bar-inner { max-width: 600px; margin: 0 auto; }
.o-proto-bar .o-btn-continue { width: 100%; }

@media (min-width: 960px) {
  .o-proto-main { padding-bottom: 64px; -webkit-mask-image: none; mask-image: none; }
  .o-proto-grid { display: grid; grid-template-columns: 360px minmax(0,1fr); align-items: start; gap: 64px; max-width: 1120px; padding: 32px 32px 0; }
  .o-proto-aside { display: block; position: sticky; top: 32px; }
  .o-proto-summary { padding-top: 0; }
  .o-proto-disclaimer { margin-top: 24px; }
  .o-proto-title { font-size: 36px; }
  .o-proto-cta { display: flex; }
  .o-proto-tabs { margin-top: 0; }
  .o-proto-row { gap: 16px; padding: 14px 20px; }
  .o-proto-dose { max-width: none; text-align: left; }
  .o-proto-detail { padding: 0 20px 20px; }
  .o-proto-bar { display: none; }
}

/* ── Loading skeleton shown briefly before the formula ── */
.o-proto-skel { display: none; flex: 1; padding: 10px 20px 24px; }
.o-proto.is-loading .o-proto-skel { display: block; }
.o-proto.is-loading .o-proto-main, .o-proto.is-loading .o-proto-bar { display: none; }
.o-proto-skel-inner { max-width: 560px; margin: 0 auto; animation: oSkelPulse 1.4s ease-in-out infinite; }
.o-skel { border-radius: 4px; background: rgba(244,241,234,0.1); }
.o-skel--soft { background: rgba(244,241,234,0.08); }
.o-skel--pill { border-radius: var(--r-pill); }
.o-skel-row { height: 56px; margin-bottom: 4px; background: rgba(244,241,234,0.04); border-bottom: 1px solid rgba(255,255,255,0.08); }
.o-skel-row:last-child { margin-bottom: 0; }
@keyframes oSkelPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@media (min-width: 768px) { .o-proto-skel { padding: 10px 40px 24px; } }

/* ── Sign in: email + 6-digit code (staging /verify-user, /verify-otp) ── */
.o-auth-main { flex: 1; display: flex; flex-direction: column; padding: 10px 24px 40px; }
.o-auth-col { width: 100%; max-width: 420px; margin: 0 auto; }
.o-auth-form { display: flow-root; }
@media (min-width: 768px) { .o-auth-main { padding: 10px 40px 40px; } }
.o-auth-eyebrow { margin-bottom: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brown-tint-1); }
.o-auth-title { margin-bottom: 10px; font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.28; letter-spacing: -0.01em; color: rgba(var(--onglass),1); overflow-wrap: anywhere; }
.o-auth-title--otp { margin-top: 6px; }
@media (min-width: 768px) { .o-auth-title { font-size: 26px; } }
.o-auth-sub { margin-bottom: 28px; font-family: var(--font-text); font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.7); }
.o-auth-field {
  display: flex; width: 100%; min-height: 56px; margin-top: 6px; padding: 4px 16px; border-radius: var(--r-control);
  background: rgba(26,20,14,0.32); border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(38px); -webkit-backdrop-filter: blur(38px);
  font-family: var(--font-text); font-size: 15px; color: rgba(var(--onglass),1);
  transition: border-color var(--dur-fast) var(--ease);
}
.o-auth-field::placeholder { color: rgba(244,241,234,0.55); }
@media (max-width: 767px) { .o-auth-field { min-height: 52px; } }
.o-auth-field:focus { outline: none; border-color: var(--brown-tint-1); }
.o-auth-field-error { margin-top: 6px; font-family: var(--font-text); font-size: 14px; line-height: 20px; color: #E7000B; }
.o-auth-note { margin-top: 10px; font-family: var(--font-text); font-size: 12px; line-height: 1.4286; color: rgba(255,255,255,0.6); }
.o-auth-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 36px; padding: 0 32px; border-radius: var(--r-control);
  background: var(--ink); color: var(--cream);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  transition: opacity var(--dur-fast) var(--ease);
}
.o-auth-btn:hover { opacity: 0.88; }
.o-auth-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.o-auth-btn--verify { min-height: 52px; padding: 8px 16px; }
.o-auth-btn--verify:disabled { opacity: 0.45; }
.o-auth-link { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-text); font-size: 13px; font-weight: 600; line-height: 1.55; color: var(--brown-tint-1); }
.o-auth-link:hover { opacity: 0.85; }
.o-auth-edit { margin-bottom: 28px; }

.o-otp { position: relative; width: max-content; max-width: 100%; }
.o-otp-cells { display: flex; gap: 8px; }
.o-otp-cell {
  position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--r-control);
  background: rgba(26,20,14,0.32); border: 1px solid rgba(255,255,255,0.14);
  font-family: var(--font-text); font-size: 20px; font-weight: 500; color: rgba(var(--onglass),1);
  transition: border-color var(--dur-fast) var(--ease);
}
.o-otp-cell.is-filled { border-color: rgba(228,190,147,0.55); }
.o-otp-cell.is-active { border: 2px solid var(--brown-tint-1); }
.o-otp.is-error .o-otp-cell { border: 2px solid #DF1137; }
.o-otp.is-error .o-otp-cell.is-active { border-color: var(--brown-tint-1); }
.o-otp-caret { width: 1px; height: 16px; background: var(--cream); animation: oCaret 1s steps(2) infinite; }
@keyframes oCaret { 50% { opacity: 0; } }
.o-otp-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: 16px; caret-color: transparent; }
.o-otp-error { margin: 8px 0 12px; font-family: var(--font-text); font-size: 12px; line-height: 1.55; color: var(--state-low-dark); }
.o-otp-resend { margin-top: 16px; }
.o-otp-timer { font-family: var(--font-text); font-size: 13px; line-height: 1.4286; color: rgba(244,241,234,0.45); }
.o-otp-terms { position: relative; display: flex; align-items: flex-start; gap: 10px; margin-top: 24px; cursor: pointer; font-family: var(--font-text); font-size: 13px; line-height: 20px; color: rgba(244,241,234,0.7); }
.o-otp-terms input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.o-otp-terms-box { flex-shrink: 0; width: 20px; height: 20px; border-radius: 5px; background: transparent; border: 1px solid rgba(244,241,234,0.4); transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.o-otp-terms input:checked + .o-otp-terms-box {
  background: var(--brown-tint-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.8 2.8 5.2-5.6' stroke='%2317140F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / 12px no-repeat;
  border-color: var(--brown-tint-1);
}
.o-otp-terms input:focus-visible + .o-otp-terms-box { outline: 2px solid var(--brown-tint-1); outline-offset: 2px; }
.o-otp-terms a { color: var(--brown-tint-1); text-decoration: underline; text-underline-offset: 2px; }

/* ── Session expired ── */
.o-expired { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 24px; }
.o-expired-inner { width: 100%; max-width: 400px; text-align: center; }
.o-expired-title { margin-bottom: 24px; font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 24px; color: rgba(var(--onglass),1); }
.o-expired-body { margin-bottom: 24px; font-family: var(--font-text); font-size: 13px; line-height: 1.65; color: rgba(244,241,234,0.55); }
.o-expired-btn { margin-top: 0; padding: 8px 16px; }

/* ── Checkout (staging /checkout) — scrolling order details over a
   pinned pay bar. ── */
.o-ck { height: 100vh; height: 100dvh; overflow: hidden; }
.o-ck-bar { padding: 0 16px; }
.o-ck-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 20px 24px; }
.o-ck-col { max-width: 560px; margin: 0 auto; }
.o-ck-plan { margin-bottom: 20px; }
.o-ck-label { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brown-tint-1); }
.o-ck-plans { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.o-ck-opt {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 11px 13px 12px; border-radius: var(--r-control); text-align: left;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.o-ck-opt.is-active { background: rgba(139,94,43,0.26); border-color: rgba(228,190,147,0.7); }
.o-ck-opt-name { display: flex; align-items: center; min-height: 14px; padding-right: 16px; white-space: nowrap; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: rgba(244,241,234,0.55); }
.o-ck-opt.is-active .o-ck-opt-name { color: var(--brown-tint-1); }
.o-ck-radio { position: absolute; top: 12px; right: 13px; display: flex; align-items: center; justify-content: center; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(244,241,234,0.3); }
.o-ck-opt.is-active .o-ck-radio { border-color: var(--brown-tint-1); }
.o-ck-opt.is-active .o-ck-radio::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brown-tint-1); }
.o-ck-opt-price { margin-top: 7px; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1; color: rgba(var(--onglass),1); }
.o-ck-opt-price span { font-size: 12px; font-weight: 500; color: rgba(244,241,234,0.5); }
.o-ck-opt-meta { margin-top: 6px; font-family: var(--font-text); font-size: 12px; line-height: 1.45; color: rgba(244,241,234,0.7); }
.o-ck-explain { margin-top: 12px; font-family: var(--font-text); font-size: 13px; line-height: 1.55; color: rgba(244,241,234,0.75); }
.o-ck-card {
  border-radius: var(--r-card); background: rgba(26,20,14,0.38); border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 11px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.09);
  backdrop-filter: var(--o-glass-blur); -webkit-backdrop-filter: var(--o-glass-blur);
}
.o-ck-summary { padding: 20px; }
.o-ck-sum-title { margin-bottom: 4px; font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1.4286; color: rgba(var(--onglass),1); }
.o-ck-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 0; font-family: var(--font-text); font-size: 13px; line-height: 1.4286; color: rgba(244,241,234,0.7); }
.o-ck-line > span:last-child { flex-shrink: 0; white-space: nowrap; }
.o-ck-line--flush { padding: 0; }
.o-ck-save { color: #B5D0A0; }
.o-ck-rule { height: 1px; margin: 10px 0; background: rgba(255,255,255,0.1); }
.o-ck-total { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--font-text); font-size: 14px; color: rgba(var(--onglass),1); }
.o-ck-total-value { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.4286; color: var(--brown-tint-1); }
.o-ck-rewards { margin-top: 12px; }
.o-ck-rewards-empty { margin-bottom: 8px; font-family: var(--font-text); font-size: 13px; line-height: 1.4286; color: rgba(244,241,234,0.45); }
.o-ck-points { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; }
.o-ck-points-text { display: flex; flex-direction: column; gap: 2px; }
.o-ck-points-title { font-family: var(--font-text); font-size: 14px; font-weight: 600; color: rgba(var(--onglass),1); }
.o-ck-points-sub { font-family: var(--font-text); font-size: 11px; color: rgba(244,241,234,0.45); }
.o-ck-points-ctrl { display: flex; align-items: center; gap: 12px; }
.o-ck-points-n { font-family: var(--font-text); font-size: 13px; color: rgba(244,241,234,0.65); }
.o-switch { display: flex; align-items: center; flex-shrink: 0; width: 36px; height: 20px; border-radius: var(--r-pill); border: 2px solid transparent; background: rgba(255,255,255,0.16); cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.o-switch span { width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform var(--dur-fast) var(--ease); }
.o-switch[aria-checked="true"] { background: var(--brown-tint-1); }
.o-switch[aria-checked="true"] span { transform: translateX(16px); }
.o-switch:disabled { cursor: not-allowed; opacity: 0.5; }
.o-ck-note { margin: 12px 0; padding: 16px; font-family: var(--font-text); font-size: 12px; line-height: 1.55; color: rgba(244,241,234,0.55); }
.o-ck-note strong { font-weight: 600; color: var(--brown-tint-1); }
.o-ck-pay { flex-shrink: 0; padding: 12px 20px; }
.o-ck-pay-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 560px; margin: 0 auto; }
.o-pay-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 0 20px; border-radius: var(--r-control);
  background: linear-gradient(180deg, #E4BE93, #D3AA7E); border: 1px solid rgba(228,190,147,0.55); box-shadow: 0 10px 28px rgba(0,0,0,0.34);
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.o-pay-btn:hover:not(:disabled) { transform: translateY(-1px); }
.o-pay-btn:active:not(:disabled) { transform: translateY(1px); }
.o-pay-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.o-pay-btn-label { font-family: var(--font-text); }
.o-pay-btn-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-family: var(--font-text); }
.o-pay-btn-amt > span:first-child { font-size: 14px; font-weight: 700; line-height: 14px; letter-spacing: 0.02em; }
.o-pay-btn-gst { font-size: 9px; font-weight: 500; line-height: 9px; letter-spacing: 0.02em; text-transform: none; opacity: 0.75; }
.o-ck-secure { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; color: rgba(244,241,234,0.4); }