/* ============================================================
   DuesPaid marketing site — shared stylesheet (site.css)
   "Bolder Orange Statement" · light default + dark
   Display: Gabarito · Body/data: Plus Jakarta Sans (tabular-nums)
   Signature motif: the focus arc (the app's timer ring), reused.
   Faithful to the app's DESIGN.md, elevated for the web.
   ============================================================ */
/* impeccable-disable overused-font (Plus Jakarta Sans is the committed brand identity:
   mandated in DESIGN.md, used across the app and legal pages; identity-preservation
   per brand.md. User kept it as the body face; only the display font was tweaked.) */

/* ---------- Self-hosted fonts (woff2 in assets/fonts) ---------- */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/plus-jakarta-sans-400.woff2") format("woff2");}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/plus-jakarta-sans-500.woff2") format("woff2");}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/plus-jakarta-sans-600.woff2") format("woff2");}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/plus-jakarta-sans-700.woff2") format("woff2");}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url("assets/fonts/plus-jakarta-sans-800.woff2") format("woff2");}
@font-face{font-family:"Gabarito";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/gabarito-600.woff2") format("woff2");}
@font-face{font-family:"Gabarito";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/gabarito-700.woff2") format("woff2");}
@font-face{font-family:"Gabarito";font-style:normal;font-weight:800;font-display:swap;src:url("assets/fonts/gabarito-800.woff2") format("woff2");}

/* ---------- Tokens: light ---------- */
:root {
  /* Brand — warm orange (the asset no competitor owns) */
  --brand:#FF6B35; --brand-dark:#E55425; --brand-darker:#C8401A;
  --brand-deep:#B5360F; --brand-deepest:#8F2A0B;
  --amber:#FF9500; --amber-soft:#FFB04A;
  --brand-50:#FFF4EC; --brand-100:#FFE7D7; --brand-200:#FFD0B3; --brand-300:#FFB088;
  --brand-a08:rgba(255,107,53,.08); --brand-a12:rgba(255,107,53,.12);
  --brand-a16:rgba(255,107,53,.16); --brand-a24:rgba(255,107,53,.24);

  /* Ink / navy */
  --ink:#1A1A2E; --ink-soft:#2A2A42;

  /* Warm neutral ramp */
  --bg:#FAF9F7; --bg-sunk:#F2F0ED; --surface:#FFFFFF; --surface-warm:#FDFBF8;
  --border:#E5E2DE; --border-strong:#D8D4CE;
  --text:#1A1A2E; --text-secondary:#5C5854; --text-tertiary:#696460;
  --text-disabled:#B8B4AE; --text-on-brand:#FFFFFF; --text-on-ink:#F3F1EE;
  --text-on-ink-muted:rgba(243,241,238,.78);

  /* Semantic (warmed) */
  --success:#2D9F5E; --success-bg:rgba(45,159,94,.10);
  --warning:#E5A100; --warning-bg:rgba(229,161,0,.12);
  --error:#D94040;   --error-bg:rgba(217,64,64,.12);
  --info:#3B82C4;    --info-bg:rgba(59,130,196,.10);

  /* Hero "drenched orange" wash — biased deep behind copy for AA white text */
  --hero-on:#FFFFFF; --hero-on-muted:rgba(255,246,240,.92); --hero-glow:rgba(255,149,0,.55);

  /* Type */
  --font-display:"Gabarito","Plus Jakarta Sans",system-ui,sans-serif;
  --font-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extra:800;

  --fs-caption:.8125rem; --fs-small:.875rem; --fs-body:1rem;
  --fs-body-lg:clamp(1.0625rem,1.01rem + .28vw,1.1875rem);
  --fs-h5:clamp(1.125rem,1.06rem + .32vw,1.3125rem);
  --fs-h4:clamp(1.375rem,1.24rem + .66vw,1.75rem);
  --fs-h3:clamp(1.75rem,1.5rem + 1.25vw,2.5rem);
  --fs-h2:clamp(2.25rem,1.78rem + 2.35vw,3.5rem);
  --fs-h1:clamp(2.75rem,1.95rem + 4vw,4.5rem);
  --fs-display:clamp(3rem,1.9rem + 5.5vw,5.5rem); /* ceiling < 6rem — no overflow */

  --lh-tight:1.05; --lh-snug:1.16; --lh-normal:1.5; --lh-relaxed:1.65;
  --ls-display:-.03em; --ls-heading:-.02em; --ls-normal:0; --ls-label:.04em;

  /* Spacing (4px base + section scale) */
  --space-2xs:.125rem; --space-xs:.25rem; --space-sm:.5rem; --space-md:1rem;
  --space-lg:1.5rem; --space-xl:2rem; --space-2xl:3rem; --space-3xl:4rem;
  --space-4xl:6rem; --space-5xl:8rem;
  --section-y:clamp(3.5rem,2.2rem + 6.5vw,8rem);
  --gutter:clamp(1.25rem,.6rem + 3.2vw,3rem);
  --container:1200px; --container-prose:68ch; --container-narrow:780px;

  /* Radius */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px;
  --radius-2xl:24px; --radius-3xl:32px; --radius-full:9999px;

  /* Shadows (warm-tinted) */
  --shadow-xs:0 1px 2px rgba(26,26,46,.06); --shadow-sm:0 2px 6px rgba(26,26,46,.08);
  --shadow-md:0 8px 24px rgba(26,26,46,.10); --shadow-lg:0 18px 48px rgba(26,26,46,.14);
  --shadow-xl:0 32px 80px rgba(26,26,46,.18);
  --shadow-brand:0 12px 32px rgba(255,107,53,.35);
  --shadow-brand-lg:0 24px 64px rgba(229,84,37,.42);
  --ring:0 0 0 3px rgba(255,107,53,.45);

  /* Motion (mirrors app DESIGN.md) */
  --ease-out:cubic-bezier(.16,.84,.44,1); --ease-in:cubic-bezier(.5,0,.84,.42);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-micro:100ms; --dur-short:200ms; --dur-med:320ms; --dur-long:600ms; --dur-feed:250ms;

  /* Z-index ladder */
  --z-base:0; --z-raised:10; --z-sticky:1100; --z-modal-backdrop:1200;
  --z-modal:1300; --z-toast:1400; --z-tooltip:1500;
}

/* ---------- Tokens: dark (navy base; orange stays vibrant) ---------- */
:root[data-theme="dark"]{
  --brand:#FF7D4D; --brand-dark:#FF6B35; --brand-darker:#FF7D4D; --brand-deep:#C8401A; --brand-deepest:#7A2A12;
  --amber:#FFA52B; --amber-soft:#FFB84D;
  --brand-50:#2A2018; --brand-100:#3A2A1E; --brand-200:#4A3526; --brand-300:#5C4530;
  --brand-a08:rgba(255,125,77,.10); --brand-a12:rgba(255,125,77,.16);
  --brand-a16:rgba(255,125,77,.22); --brand-a24:rgba(255,125,77,.30);
  --ink:#0E0D12; --ink-soft:#1A1922;
  --bg:#141318; --bg-sunk:#0F0E13; --surface:#1E1D24; --surface-warm:#232128;
  --border:#2E2D33; --border-strong:#3A3940;
  --text:#EEEDF2; --text-secondary:#B8B4AE; --text-tertiary:#94908B;
  --text-disabled:#5C5854; --text-on-brand:#1A1A2E; --text-on-ink:#EEEDF2;
  --text-on-ink-muted:rgba(238,237,242,.70);
  --success:#34B86B; --success-bg:rgba(52,184,107,.16);
  --warning:#E5A100; --warning-bg:rgba(229,161,0,.18);
  --error:#E05050; --error-bg:rgba(224,80,80,.18);
  --info:#4A93D4; --info-bg:rgba(74,147,212,.16);
  --hero-on:#FFF6F0; --hero-on-muted:rgba(255,246,240,.86); --hero-glow:rgba(255,125,77,.42);
  --shadow-xs:0 1px 2px rgba(0,0,0,.40); --shadow-sm:0 2px 6px rgba(0,0,0,.45);
  --shadow-md:0 8px 24px rgba(0,0,0,.50); --shadow-lg:0 18px 48px rgba(0,0,0,.55);
  --shadow-xl:0 32px 80px rgba(0,0,0,.62);
  --shadow-brand:0 12px 32px rgba(255,125,77,.28); --shadow-brand-lg:0 24px 64px rgba(255,125,77,.34);
  --ring:0 0 0 3px rgba(255,125,77,.55);
}
/* System-preference fallback — an explicit data-theme choice always wins */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --brand:#FF7D4D; --brand-dark:#FF6B35; --brand-darker:#FF7D4D; --brand-deep:#C8401A; --brand-deepest:#7A2A12;
    --amber:#FFA52B; --amber-soft:#FFB84D;
    --brand-50:#2A2018; --brand-100:#3A2A1E; --brand-200:#4A3526; --brand-300:#5C4530;
    --brand-a08:rgba(255,125,77,.10); --brand-a12:rgba(255,125,77,.16);
    --brand-a16:rgba(255,125,77,.22); --brand-a24:rgba(255,125,77,.30);
    --ink:#0E0D12; --ink-soft:#1A1922;
    --bg:#141318; --bg-sunk:#0F0E13; --surface:#1E1D24; --surface-warm:#232128;
    --border:#2E2D33; --border-strong:#3A3940;
    --text:#EEEDF2; --text-secondary:#B8B4AE; --text-tertiary:#94908B;
    --text-disabled:#5C5854; --text-on-brand:#1A1A2E; --text-on-ink:#EEEDF2;
    --text-on-ink-muted:rgba(238,237,242,.70);
    --success:#34B86B; --success-bg:rgba(52,184,107,.16);
    --warning:#E5A100; --warning-bg:rgba(229,161,0,.18);
    --error:#E05050; --error-bg:rgba(224,80,80,.18);
    --info:#4A93D4; --info-bg:rgba(74,147,212,.16);
    --hero-on:#FFF6F0; --hero-on-muted:rgba(255,246,240,.86); --hero-glow:rgba(255,125,77,.42);
    --shadow-xs:0 1px 2px rgba(0,0,0,.40); --shadow-sm:0 2px 6px rgba(0,0,0,.45);
    --shadow-md:0 8px 24px rgba(0,0,0,.50); --shadow-lg:0 18px 48px rgba(0,0,0,.55);
    --shadow-xl:0 32px 80px rgba(0,0,0,.62);
    --shadow-brand:0 12px 32px rgba(255,125,77,.28); --shadow-brand-lg:0 24px 64px rgba(255,125,77,.34);
    --ring:0 0 0 3px rgba(255,125,77,.55);
  }
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; -webkit-tap-highlight-color:transparent;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-sans); font-size:var(--fs-body); line-height:var(--lh-relaxed);
  font-feature-settings:"cv05" 1; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%;}
button,input{font:inherit; color:inherit;}
a{color:var(--brand-darker); text-decoration:none;}
a:hover{text-decoration:underline;}
:where(a,button,input,summary):focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--radius-sm);}
::selection{background:var(--brand-a24); color:var(--ink);}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:var(--fw-extra); line-height:var(--lh-tight); letter-spacing:var(--ls-heading); color:var(--text); margin:0;}
p{margin:0;}
.tnum{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;}

/* Accessibility helpers */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.skip-link{position:fixed; top:-100px; left:var(--space-md); z-index:var(--z-tooltip);
  background:var(--ink); color:#fff; padding:.625rem 1rem; border-radius:var(--radius-md); font-weight:var(--fw-semibold);
  transition:top var(--dur-short) var(--ease-out);}
.skip-link:focus{top:var(--space-md); text-decoration:none;}

/* ---------- Layout ---------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);}
.section{padding-block:var(--section-y);}
section[id], [id].hero{scroll-margin-top:76px;}
.section--tight{padding-block:clamp(2.5rem,1.8rem + 3.5vw,5rem);}
.eyebrow-arc{display:inline-flex; align-items:center; gap:.5rem; color:var(--brand-darker);
  font-weight:var(--fw-bold); font-size:var(--fs-small); margin-bottom:var(--space-md);}
.section__head{max-width:46ch; margin-bottom:var(--space-2xl);}
.section__title{font-size:var(--fs-h2); text-wrap:balance;}
.section__lede{margin-top:var(--space-md); font-size:var(--fs-body-lg); color:var(--text-secondary); line-height:var(--lh-normal); text-wrap:pretty;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-sans); font-weight:var(--fw-bold); font-size:var(--fs-body);
  padding:.875rem 1.5rem; border-radius:var(--radius-full); border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap; text-decoration:none; line-height:1;
  transition:transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);}
.btn:hover{text-decoration:none;}
.btn:active{transform:translateY(1px) scale(.985);}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55; cursor:not-allowed; pointer-events:none;}
.btn--brand{background:var(--brand); color:var(--ink); box-shadow:var(--shadow-brand);}
.btn--brand:hover{background:var(--brand-dark); box-shadow:var(--shadow-brand-lg); transform:translateY(-2px);}
.btn--ink{background:var(--ink); color:#fff;}
.btn--ink:hover{background:var(--ink-soft); transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.btn--ghost{background:transparent; color:var(--text); border-color:var(--border-strong);}
.btn--ghost:hover{border-color:var(--ink); background:var(--surface);}
.btn--on-wash{background:var(--ink); color:#fff;} /* navy button reads crisply on orange */
.btn--on-wash:hover{background:#0F0E18; transform:translateY(-2px); box-shadow:var(--shadow-xl);}
.btn--lg{padding:1.0625rem 2rem; font-size:var(--fs-body-lg);}
.btn--block{width:100%;}

/* ---------- Header / nav ---------- */
.nav{position:sticky; top:0; z-index:var(--z-sticky);
  transition:background var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
  border-bottom:1px solid transparent;}
.nav__bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-lg);
  padding-block:var(--space-md); min-height:64px;}
.nav__links{display:flex; align-items:center; gap:var(--space-lg);}
.nav__links a{font-weight:var(--fw-semibold); font-size:var(--fs-small); color:inherit; opacity:.86;}
.nav__links a:hover{opacity:1; text-decoration:none;}
.nav__right{display:flex; align-items:center; gap:var(--space-md);}
/* over the hero: transparent + light text */
.nav--over{color:#fff;}
.nav--over .wordmark{color:#fff;}
.nav--over .wordmark span{color:#fff;}
.nav--over .nav__links a{opacity:1;}
.nav--over .btn--ghost{border-color:rgba(255,255,255,.72); color:#fff;}
.nav--over .btn--ghost:hover{border-color:#fff; background:rgba(255,255,255,.12);}
/* scrolled onto light: solid surface + ink text */
.nav--scrolled{background:var(--surface); background:color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter:saturate(1.4) blur(8px); -webkit-backdrop-filter:saturate(1.4) blur(8px); border-bottom-color:var(--border); box-shadow:var(--shadow-sm); color:var(--text);}
.nav--scrolled .wordmark{color:var(--text);} .nav--scrolled .wordmark span{color:var(--brand-darker);}
.nav--scrolled .btn--ghost{border-color:var(--border-strong); color:var(--text);}
/* reading-progress focus-arc rail */
.nav__progress{position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:transparent; overflow:hidden;}
.nav__progress i{display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--amber),var(--brand)); transform:scaleX(var(--progress,0)); transform-origin:0 50%; transition:transform .08s linear;}

.wordmark{display:inline-flex; align-items:baseline; font-family:var(--font-display); font-weight:var(--fw-extra);
  font-size:1.3125rem; letter-spacing:-.02em; color:var(--text);}
.wordmark span{color:var(--brand-darker);}
.wordmark:hover{text-decoration:none;}

/* ---------- Hero (drenched waitlist) ---------- */
/* Deep-orange base everywhere (AA white copy), bright amber glow confined to the
   top-right behind the device, plus a top scrim so the over-hero nav stays legible. */
.hero{position:relative; isolation:isolate; color:var(--hero-on); overflow:hidden;
  background:
    linear-gradient(180deg, rgba(42,12,4,.42) 0, rgba(42,12,4,0) 128px),
    radial-gradient(46% 54% at 84% 34%, var(--amber) 0%, rgba(255,107,53,.5) 34%, transparent 64%),
    linear-gradient(155deg, var(--brand-deep) 0%, var(--brand-deepest) 100%);
  margin-top:-64px; padding-top:calc(64px + var(--space-3xl)); padding-bottom:var(--space-4xl);}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,1rem + 4vw,5rem); align-items:center;}
.hero__copy{max-width:34rem;}
.hero__headline{font-size:var(--fs-display); color:#fff; letter-spacing:var(--ls-display); text-wrap:balance;}
.hero__headline .u-arc{position:relative; white-space:nowrap;}
.hero__headline .u-arc::after{content:""; position:absolute; left:0; right:0; bottom:.04em; height:.16em;
  background:var(--amber); border-radius:var(--radius-full); transform:scaleX(var(--u,1)); transform-origin:0 50%;}
.hero__lede{margin-top:var(--space-lg); font-size:var(--fs-body-lg); line-height:var(--lh-normal); color:var(--hero-on-muted); max-width:30rem; text-wrap:pretty;}
.hero__actions{margin-top:var(--space-xl); display:flex; flex-direction:column; gap:var(--space-md); max-width:30rem;}
.hero__trust{margin-top:var(--space-md); font-size:var(--fs-small); color:var(--hero-on-muted); display:flex; align-items:center; gap:.5rem;}

/* waitlist form */
.waitlist{display:flex; gap:.5rem; background:#fff; padding:.4rem .4rem .4rem 1rem; border-radius:var(--radius-full);
  box-shadow:var(--shadow-lg); align-items:center;}
.waitlist input[type="email"]{flex:1; min-width:0; border:0; background:transparent; color:var(--ink);
  font-size:var(--fs-body); padding:.6rem 0;}
.waitlist input::placeholder{color:#6E6A63;}
.waitlist:focus-within{box-shadow:var(--shadow-lg), var(--ring);}
.waitlist input:focus-visible{outline:none; box-shadow:none;}
.waitlist .btn{flex:none;}
.waitlist--inline{max-width:30rem;}
.form-note{min-height:1.25rem; margin-top:.625rem; font-size:var(--fs-small); display:flex; align-items:center; gap:.4rem;}
.form-note--ok{color:#fff; font-weight:var(--fw-semibold);}
.form-note--err{color:#FFE0D6; font-weight:var(--fw-semibold);}
.on-light .form-note--ok{color:var(--success);} .on-light .form-note--err{color:var(--error);}

/* App Store "coming soon" badge */
.appstore{display:inline-flex; align-items:center; gap:.6rem; padding:.7rem 1.1rem; border-radius:var(--radius-md);
  background:rgba(0,0,0,.28); border:1.5px solid rgba(255,255,255,.35); color:#fff; width:max-content;}
.appstore svg{flex:none;}
.appstore b{font-family:var(--font-display); font-weight:var(--fw-bold); font-size:1.0625rem; line-height:1;}
.appstore small{display:block; font-size:.6875rem; opacity:.82; letter-spacing:var(--ls-label); text-transform:uppercase;}
.appstore[aria-disabled="true"]{cursor:default;}

/* ---------- Phone frame + facsimiles ---------- */
.phone{position:relative; width:min(320px,82vw); aspect-ratio:9/19.5; margin-inline:auto;
  background:var(--ink); border-radius:46px; padding:11px; box-shadow:var(--shadow-brand-lg), 0 0 0 2px rgba(0,0,0,.18);
  transform:rotate(var(--tilt,0deg));}
.hero .phone{--tilt:5deg;}
.phone__screen{position:relative; height:100%; width:100%; background:var(--surface); border-radius:36px; overflow:hidden;
  display:flex; flex-direction:column;}
.phone__notch{position:absolute; top:8px; left:50%; transform:translateX(-50%); width:34%; height:22px; background:var(--ink); border-radius:var(--radius-full); z-index:2;}
.phone--float{animation:float 6s var(--ease-in-out) infinite;}
@keyframes float{0%,100%{transform:rotate(var(--tilt,0deg)) translateY(0);}50%{transform:rotate(var(--tilt,0deg)) translateY(-10px);}}

/* app screen scaffold */
.scr{flex:1; display:flex; flex-direction:column; padding:42px 20px 20px; gap:14px; background:var(--surface);}
.scr__bar{display:flex; align-items:center; justify-content:space-between; color:var(--text-tertiary); font-size:.75rem; font-weight:var(--fw-semibold);}
.subject-chip{display:inline-flex; align-items:center; gap:.4rem; align-self:center; padding:.35rem .75rem; border-radius:var(--radius-full);
  background:var(--brand-50); color:var(--brand-darker); font-weight:var(--fw-bold); font-size:.8125rem;}
.subject-chip::before{content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--brand);}

/* focus-arc timer ring (SVG) */
.ring{display:block; margin:6px auto; width:62%;}
.ring__track{fill:none; stroke:var(--brand-a16); stroke-width:11;}
.ring__fill{fill:none; stroke:var(--brand); stroke-width:11; stroke-linecap:round;
  stroke-dasharray:var(--circ); stroke-dashoffset:calc(var(--circ) * (1 - var(--p,.4))); transform:rotate(-90deg); transform-origin:50% 50%;
  transition:stroke-dashoffset 1.1s var(--ease-out), stroke var(--dur-med) var(--ease-out);}
.ring--checking .ring__fill{stroke:var(--error);}
.ring__label{text-align:center; margin-top:-8px;}
.ring__time{font-family:var(--font-sans); font-variant-numeric:tabular-nums; font-weight:var(--fw-extra); font-size:1.9rem; color:var(--text); letter-spacing:-.02em;}
.ring__sub{font-size:.75rem; color:var(--text-tertiary); font-weight:var(--fw-semibold); letter-spacing:var(--ls-label); text-transform:uppercase;}

.pip-row{display:flex; gap:6px; justify-content:center;}
.pip{width:34px; height:6px; border-radius:var(--radius-full); background:var(--bg-sunk);}
.pip--on{background:var(--brand);}
.scr__cta{margin-top:auto; text-align:center; padding:.85rem; border-radius:var(--radius-lg); background:var(--brand); color:#fff; font-weight:var(--fw-bold);}
.scr__cta--check{background:var(--error);}
.scr__cta-row{display:flex; gap:8px;}
.scr__cta-row > *{flex:1;}
.scr__ghost{margin-top:auto; text-align:center; padding:.85rem; border-radius:var(--radius-lg); background:var(--bg-sunk); color:var(--text-secondary); font-weight:var(--fw-bold);}

/* floating proof chips at device edges */
.float-chip{position:absolute; z-index:3; display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .8rem;
  border-radius:var(--radius-full); background:var(--surface); box-shadow:var(--shadow-lg); font-weight:var(--fw-bold); font-size:.8125rem; color:var(--text);}
.float-chip svg{flex:none;}
.float-chip--verified{top:14%; left:-12%; color:var(--success);}
.float-chip--streak{bottom:16%; right:-10%; color:var(--brand-darker);}
.float-chip .tnum{color:inherit;}

/* ---------- The core loop ("session strip") ---------- */
.loop{display:grid; gap:var(--space-lg); grid-template-columns:repeat(4,1fr);}
.loop__beat{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); padding:var(--space-lg);
  display:flex; flex-direction:column; gap:.75rem; position:relative; overflow:hidden;}
.loop__beat h3{font-size:var(--fs-h5);}
.loop__beat p{color:var(--text-secondary); font-size:var(--fs-small); line-height:var(--lh-normal);}
.loop__art{height:120px; display:grid; place-items:center; border-radius:var(--radius-lg); background:var(--brand-50); margin-bottom:.25rem;}
.loop__beat--check .loop__art{background:var(--error-bg);}
.loop__beat--reward .loop__art{background:var(--success-bg);}
.loop__beat--earn .loop__art{background:var(--brand-50);}
.mini-ring{width:84px; height:84px;}
.mini-ring .ring__fill{stroke-width:9;}

/* ---------- Plate (navy social-proof section) ---------- */
.plate-ink{background:var(--ink); color:var(--text-on-ink);}
.plate-ink .section__title{color:#fff;}
.plate-ink .section__lede{color:var(--text-on-ink-muted);}
.plate-ink .card{background:var(--ink-soft); border-color:rgba(255,255,255,.08);}
.proof-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--space-xl); align-items:start;}

/* leaderboard facsimile */
.board{background:var(--ink-soft); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-xl); padding:var(--space-md); display:flex; flex-direction:column; gap:.5rem;}
.board__row{display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:.75rem; padding:.6rem .75rem; border-radius:var(--radius-md);}
.board__row--you{background:var(--brand-a16); outline:1px solid var(--brand);}
.board__rank{font-variant-numeric:tabular-nums; font-weight:var(--fw-extra); width:1.6rem; text-align:center; color:var(--text-on-ink-muted);}
.board__name{font-weight:var(--fw-semibold);}
.board__hrs{font-variant-numeric:tabular-nums; font-weight:var(--fw-bold); color:var(--amber);}
.avatar{width:2.25rem; height:2.25rem; border-radius:50%; display:grid; place-items:center; font-weight:var(--fw-extra); color:#fff; font-size:.8125rem; position:relative;}
.avatar--arc::after{content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--brand); border-right-color:transparent; transform:rotate(-45deg);}

/* feed card facsimile */
.feedcard{background:var(--ink-soft); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-xl); padding:var(--space-md); display:flex; flex-direction:column; gap:.75rem;}
.feedcard__head{display:flex; align-items:center; gap:.6rem;}
.feedcard__meta{display:flex; flex-direction:column;}
.feedcard__name{font-weight:var(--fw-bold);}
.feedcard__time{font-size:.75rem; color:var(--text-on-ink-muted);}
.feedcard__stats{display:flex; gap:1.25rem;}
.stat{display:flex; flex-direction:column;}
.stat b{font-family:var(--font-sans); font-weight:var(--fw-extra); font-size:1.25rem; font-variant-numeric:tabular-nums; color:#fff;}
.stat small{font-size:.6875rem; color:var(--text-on-ink-muted); text-transform:uppercase; letter-spacing:var(--ls-label);}
.feedcard__foot{display:flex; gap:1rem; color:var(--text-on-ink-muted); font-size:.8125rem; font-weight:var(--fw-semibold);}

/* ---------- Rewards ---------- */
.rewards-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-md);}
.reward{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-md); display:flex; flex-direction:column; gap:.6rem;}
.reward__logo{width:2.75rem; height:2.75rem; border-radius:var(--radius-md); display:grid; place-items:center; font-weight:var(--fw-extra); color:#fff;}
.reward__title{font-weight:var(--fw-bold);}
.reward__desc{font-size:var(--fs-small); color:var(--text-secondary); line-height:var(--lh-normal);}
.reward__cost{margin-top:auto; font-weight:var(--fw-extra); color:var(--brand-darker); font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:.4rem;}
.reward__cost::before{content:""; width:1rem; height:1rem; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--amber), var(--brand));}
.wallet{display:inline-flex; align-items:center; gap:.6rem; padding:.6rem 1rem; border-radius:var(--radius-full); background:var(--brand-50); color:var(--brand-darker); font-weight:var(--fw-bold);}
.wallet b{font-variant-numeric:tabular-nums; font-size:1.125rem;}

/* ---------- Testimonials ---------- */
.voices{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--space-lg);}
.voice{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); padding:var(--space-lg); display:flex; flex-direction:column; gap:.85rem; box-shadow:var(--shadow-xs);}
.voice__stars{color:var(--amber); letter-spacing:2px; font-size:1rem;}
.voice__quote{color:var(--text); line-height:var(--lh-normal); text-wrap:pretty;}
.voice__who{display:flex; align-items:center; gap:.6rem; margin-top:auto;}
.voice__name{font-weight:var(--fw-bold); font-size:var(--fs-small);}
.voice__role{font-size:.75rem; color:var(--text-tertiary);}

/* ---------- FAQ ---------- */
.faq{max-width:var(--container-narrow); margin-inline:auto; display:flex; flex-direction:column; gap:.5rem;}
.faq details{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;}
.faq details[open]{box-shadow:var(--shadow-sm);}
.faq summary{display:flex; align-items:center; gap:.75rem; padding:1.1rem 1.25rem; cursor:pointer; list-style:none; font-weight:var(--fw-bold); font-size:var(--fs-body-lg);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:""; flex:none; width:1.1rem; height:1.1rem; border-radius:50%;
  border:2.5px solid var(--brand); border-right-color:transparent; transition:transform var(--dur-short) var(--ease-out);}
.faq details[open] summary::before{transform:rotate(135deg);}
.faq__body{padding:0 1.25rem 1.25rem; color:var(--text-secondary); line-height:var(--lh-relaxed);}
.faq__body a{font-weight:var(--fw-semibold);}

/* ---------- Final CTA (second drench) ---------- */
.cta{position:relative; isolation:isolate; color:#fff; overflow:hidden; text-align:center;
  background:
    radial-gradient(60% 75% at 50% -6%, var(--amber) 0%, rgba(255,107,53,.45) 30%, transparent 62%),
    linear-gradient(180deg, var(--brand-deep) 0%, var(--brand-deepest) 100%);}
.cta__inner{max-width:42rem; margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:var(--space-lg);}
.cta__title{font-size:var(--fs-h1); color:#fff; text-wrap:balance;}
.cta .waitlist{width:100%; max-width:30rem;}

/* ---------- Footer ---------- */
.footer{background:var(--ink); color:var(--text-on-ink); padding-block:var(--space-3xl) var(--space-xl);}
.footer__top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-xl); padding-bottom:var(--space-xl); border-bottom:1px solid rgba(255,255,255,.1);}
.footer__brand{max-width:22rem; display:flex; flex-direction:column; gap:.75rem;}
.footer .wordmark{color:#fff;} .footer .wordmark span{color:var(--brand);}
.footer__tag{color:var(--text-on-ink-muted); font-size:var(--fs-small); line-height:var(--lh-normal);}
.footer__cols{display:flex; gap:var(--space-3xl); flex-wrap:wrap;}
.footer__col{display:flex; flex-direction:column; gap:.6rem;}
.footer__col h4{font-family:var(--font-sans); font-size:.75rem; text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--text-on-ink-muted); font-weight:var(--fw-bold);}
.footer__col a{color:var(--text-on-ink); opacity:.85; font-size:var(--fs-small); font-weight:var(--fw-medium); display:inline-flex; align-items:center; min-height:44px;}
.footer__col a:hover{opacity:1;}
.footer__bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-md); padding-top:var(--space-lg); color:var(--text-on-ink-muted); font-size:var(--fs-small);}

/* ---------- Legal documents (privacy / terms) ---------- */
.doc-hero{position:relative; isolation:isolate; color:#fff; overflow:hidden; padding-block:var(--space-3xl) var(--space-2xl); margin-top:-64px; padding-top:calc(64px + var(--space-2xl));
  background:radial-gradient(120% 180% at 90% 0%, var(--amber) 0%, var(--brand) 32%, var(--brand-deep) 80%, var(--brand-deepest) 100%);}
.doc-hero::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(96deg, rgba(60,18,5,.4), transparent 65%);}
.doc-hero__title{font-size:var(--fs-h1); color:#fff;}
.doc-hero__meta{margin-top:.5rem; color:var(--hero-on-muted); font-weight:var(--fw-medium); font-size:var(--fs-small);}
.doc-layout{display:grid; grid-template-columns:1fr; gap:var(--space-2xl); align-items:start; padding-block:var(--space-2xl) var(--space-4xl);}
.doc{max-width:var(--container-prose); margin-inline:auto; padding-block:var(--space-2xl) var(--space-4xl);}
.doc .lede{font-size:var(--fs-body-lg); color:var(--text-secondary); margin-bottom:var(--space-md); line-height:var(--lh-relaxed);}
.doc p{margin-bottom:var(--space-md); color:var(--text-secondary); line-height:var(--lh-relaxed);}
.doc h2.section{font-family:var(--font-display); font-size:var(--fs-h4); font-weight:var(--fw-extra); margin:var(--space-2xl) 0 var(--space-sm); scroll-margin-top:84px; display:flex; align-items:baseline; gap:.6rem; padding-block:0;}
.doc h3{font-family:var(--font-sans); font-size:var(--fs-h5); font-weight:var(--fw-bold); margin:var(--space-lg) 0 var(--space-xs); color:var(--text);}
.doc .num{font-family:var(--font-sans); font-variant-numeric:tabular-nums; color:var(--brand-darker); font-weight:var(--fw-extra);
  flex:none; display:inline-grid; place-items:center; min-width:2.1rem; height:2.1rem; border-radius:50%;
  border:2px solid var(--brand); border-right-color:transparent; font-size:.9rem; transform:rotate(-20deg);}
.doc .num{transform:none;} /* keep numerals upright; ring carries the arc */
.doc ul,.doc ol.body{padding-left:1.4rem; margin-bottom:var(--space-md);}
.doc li{margin-bottom:.5rem; color:var(--text-secondary); line-height:var(--lh-relaxed);}
.doc strong{color:var(--text); font-weight:var(--fw-bold);}
.doc .doc-meta{color:var(--text-tertiary); font-size:var(--fs-small); font-weight:var(--fw-medium); margin-bottom:var(--space-lg);}

.toc{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-md) var(--space-lg); margin-bottom:var(--space-xl);}
.toc h2{font-family:var(--font-sans); font-size:.75rem; text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--text-tertiary); margin:0 0 var(--space-sm); font-weight:var(--fw-bold);}
.toc ol{margin:0; padding-left:1.25rem; columns:2; column-gap:var(--space-xl);}
.toc li{margin-bottom:.4rem; font-size:var(--fs-small);}
.toc a{color:var(--text-secondary); font-weight:var(--fw-medium); display:inline-block; padding-block:.35rem;}
.toc a:hover{color:var(--brand-darker);}

.callout{background:var(--brand-50); border:1px solid var(--brand-200); border-radius:var(--radius-md); padding:var(--space-md) var(--space-lg); margin:var(--space-lg) 0;}
.callout p{margin:0; color:var(--text);}
.callout--key{background:var(--success-bg); border-color:color-mix(in srgb,var(--success) 35%, transparent);}

.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:var(--space-sm) 0 var(--space-lg); border:1px solid var(--border); border-radius:var(--radius-md);}
table.data{width:100%; border-collapse:collapse; font-size:var(--fs-small); min-width:520px;}
table.data th,table.data td{text-align:left; padding:.75rem .9rem; border-bottom:1px solid var(--border); vertical-align:top;}
table.data th{color:var(--text); font-weight:var(--fw-bold); background:var(--bg-sunk);}
table.data td{color:var(--text-secondary);}
table.data tr:last-child td{border-bottom:0;}

/* reading-progress on legal pages reuses .nav__progress */
.legal-foot-cta{background:var(--bg-sunk); border-top:1px solid var(--border); padding-block:var(--space-2xl);}
.legal-foot-cta .container{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-md);}

/* ---------- Reveal (one-shot, enhances already-visible content) ---------- */
.js .reveal{opacity:0; transform:translateY(8px); transition:opacity var(--dur-feed) var(--ease-out), transform var(--dur-feed) var(--ease-out);}
.reveal.is-inview{opacity:1; transform:none;}
.js .reveal-stagger > *{opacity:0; transform:translateY(8px);}
.reveal-stagger.is-inview > *{opacity:1; transform:none; transition:opacity var(--dur-feed) var(--ease-out), transform var(--dur-feed) var(--ease-out);}
.reveal-stagger.is-inview > *:nth-child(2){transition-delay:60ms;}
.reveal-stagger.is-inview > *:nth-child(3){transition-delay:120ms;}
.reveal-stagger.is-inview > *:nth-child(4){transition-delay:180ms;}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  /* single column: drop the bright glow so all white copy sits on deep orange */
  .hero{background:linear-gradient(180deg, rgba(42,12,4,.42) 0, rgba(42,12,4,0) 120px), linear-gradient(160deg, var(--brand-deep), var(--brand-deepest));}
  .hero__grid{grid-template-columns:1fr; gap:var(--space-2xl);}
  .hero__copy{max-width:none;}
  .hero .phone{--tilt:0deg;}
  .float-chip--verified{left:-4%;}
  .float-chip--streak{right:-4%;}
  .proof-grid{grid-template-columns:1fr;}
  .loop{grid-template-columns:repeat(2,1fr);}
  .nav__links{display:none;}
}
@media (max-width:560px){
  .loop{grid-template-columns:1fr;}
  .toc ol{columns:1;}
  .waitlist{flex-direction:column; background:transparent; box-shadow:none; padding:0; gap:.6rem;}
  .waitlist input[type="email"]{background:#fff; border-radius:var(--radius-full); padding:.85rem 1.1rem; width:100%;}
  .waitlist .btn{width:100%;}
  .footer__top{flex-direction:column; gap:var(--space-lg);}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;}
  .reveal,.reveal-stagger > *{opacity:1!important; transform:none!important;}
  .phone--float{animation:none!important;}
}

/* ---------- Print (legal pages) ---------- */
@media print{
  .nav,.doc-hero::after,.legal-foot-cta,.footer,.skip-link{display:none!important;}
  .doc-hero{background:none!important; color:#000!important; margin:0; padding:0 0 1rem;}
  .doc-hero__title{color:#000!important;}
  body{background:#fff!important; color:#000!important;}
  .doc p,.doc li,.doc .lede{color:#000!important;}
  .doc .num{border-color:#000!important; color:#000!important;}
  a{color:#000!important; text-decoration:underline;}
  .callout,.toc,.table-wrap{break-inside:avoid; box-shadow:none!important;}
}