/* ============================================================
   ProductDecoded — Marketing landing page
   Editorial "decode the label". Orange-led; cobalt reserved
   for scan/camera moments. Score colors are functional only.
   ============================================================ */

:root{
  /* brand constants */
  --orange:#EC5A13; --orange-deep:#C2440A;
  --coral:#FF6A4D; --gold:#FFC23C; --leaf:#1F8A5B;
  --cobalt:#1B2A9E; --cobalt-deep:#121d77;
  --ink:#16142E; --paper:#FBF6EC; --cream:#F4EBDA;

  /* lead = orange on the marketing page */
  --lead:var(--orange); --lead-deep:var(--orange-deep);

  /* theme surfaces (light) */
  --bg:var(--cream);
  --surface:var(--paper);
  --surface-2:#fff;
  --text:var(--ink);
  --muted:color-mix(in oklab, var(--ink) 56%, var(--cream));
  --faint:color-mix(in oklab, var(--ink) 9%, var(--cream));
  --hairline:color-mix(in oklab, var(--ink) 13%, transparent);
  --on-lead:#fff;

  --f-display:'Spectral',Georgia,serif;
  --f-sans:'Space Grotesk',system-ui,sans-serif;
  --f-mono:'Space Mono',ui-monospace,monospace;

  --r:22px; --r-lg:28px;
  --maxw:1180px;
  --gut:clamp(20px,5vw,56px);
}

html.dark{
  --bg:#170d33;
  --surface:#241552;
  --surface-2:#2c1c63;
  --text:#F4EBDA;
  --muted:color-mix(in oklab, #F4EBDA 58%, #170d33);
  --faint:color-mix(in oklab, #fff 8%, #170d33);
  --hairline:color-mix(in oklab, #fff 15%, transparent);
  /* accents nudge brighter on plum */
  --gold:#FFD05E; --coral:#FF7D62; --leaf:#34B57C;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--f-sans); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .5s ease, color .5s ease;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut);}

/* ---------- type helpers ---------- */
.kicker{
  font-family:var(--f-mono); font-size:11px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--lead-deep);
  display:inline-flex; align-items:center; gap:10px;
}
.kicker.muted{ color:var(--muted); font-weight:400; }
.kicker::before{
  content:""; width:22px; height:1px; background:currentColor; opacity:.55;
}
.kicker.nolead::before{ display:none; }
.serif{ font-family:var(--f-display); }
.mono{ font-family:var(--f-mono); }
em.hl{ font-style:italic; color:var(--lead); }

h1,h2,h3{ font-family:var(--f-display); font-weight:700; letter-spacing:-.02em; margin:0; text-wrap:balance; }
.section-h{ font-size:clamp(30px,4.4vw,52px); line-height:1.02; margin:16px 0 0; }
.section-lede{ font-size:clamp(16px,1.7vw,19px); color:var(--muted); max-width:46ch; margin:18px 0 0; line-height:1.5; }

section{ padding:clamp(64px,9vw,128px) 0; position:relative; }
.section-tint{ background:var(--surface); }

/* reveal on scroll (subtle) */
.rise{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.rise.in{ opacity:1; transform:none; }
.rise.d1{ transition-delay:.08s; } .rise.d2{ transition-delay:.16s; } .rise.d3{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){
  .rise{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.nav.scrolled{ border-color:var(--hairline); }
.nav-in{ max-width:var(--maxw); margin:0 auto; padding:14px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand .mark{ width:30px; height:30px; flex:none; }
.brand .wm{ font-family:var(--f-display); font-weight:600; font-size:21px; letter-spacing:-.02em; }
.brand .wm b{ color:var(--lead); font-weight:600; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-size:14px; color:var(--muted); transition:color .15s ease; }
.nav-links a:hover{ color:var(--text); }
.nav-right{ display:flex; align-items:center; gap:14px; }
.theme-btn{
  width:38px; height:38px; border-radius:11px; flex:none;
  background:var(--surface); border:1px solid var(--hairline); color:var(--text);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform .12s ease, border-color .15s ease;
}
.theme-btn:hover{ border-color:var(--lead); }
.theme-btn:active{ transform:scale(.94); }
.theme-ic{ display:flex; align-items:center; justify-content:center; }
.btn{
  font-family:var(--f-sans); font-weight:600; font-size:15px; cursor:pointer;
  border:none; border-radius:13px; padding:0 20px; height:46px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{ background:var(--lead); color:var(--on-lead); box-shadow:0 10px 22px -12px var(--lead-deep); }
.btn-primary:hover{ background:var(--lead-deep); transform:translateY(-1px); }
.btn-primary:active{ transform:translateY(0); }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--hairline); }
.btn-ghost:hover{ border-color:var(--lead); }
.btn-sm{ height:42px; font-size:14px; }
@media(max-width:860px){ .nav-links{ display:none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-top:clamp(40px,7vw,84px); padding-bottom:clamp(48px,7vw,92px); overflow:hidden; }
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px);
  align-items:center;
}
.hero-eyebrow{ margin-bottom:26px; }
.hero h1{ font-size:clamp(44px,7.2vw,86px); line-height:.96; }
.scramble{ display:inline; }
.scramble .ch{ display:inline-block; }
.hero-sub{ font-size:clamp(17px,2vw,21px); color:var(--muted); max-width:40ch; margin:26px 0 0; line-height:1.5; }
.hero-sub b{ color:var(--text); font-weight:600; }
.hero-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.hpill{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 13px; border-radius:999px; background:var(--surface);
  border:1px solid var(--hairline); color:var(--muted);
  display:inline-flex; align-items:center; gap:8px;
}
.hpill i{ width:7px; height:7px; border-radius:50%; background:var(--leaf); }
.store-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.store-badge{
  display:inline-flex; align-items:center; gap:12px;
  height:58px; padding:0 22px 0 18px; border-radius:15px;
  background:var(--ink); color:#fff; cursor:pointer;
  transition:transform .14s ease, box-shadow .2s ease;
  box-shadow:0 12px 26px -16px rgba(0,0,0,.55);
}
html.dark .store-badge{ background:#000; border:1px solid var(--hairline); }
.store-badge:hover{ transform:translateY(-2px); }
.store-badge svg{ flex:none; }
.store-badge .sb-txt{ display:flex; flex-direction:column; line-height:1.1; }
.store-badge .sb-txt small{ font-family:var(--f-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; opacity:.7; }
.store-badge .sb-txt b{ font-family:var(--f-sans); font-size:17px; font-weight:600; }
.hero-trust{ margin-top:22px; font-size:13px; color:var(--muted); display:flex; align-items:center; gap:9px; }
.hero-trust .stars{ color:var(--gold); letter-spacing:2px; }

/* ---------- hero variant layouts (via Tweaks) ---------- */
body[data-hero="centered"] .hero-grid{ grid-template-columns:1fr; text-align:center; justify-items:center; }
body[data-hero="centered"] .hero-sub{ margin-left:auto; margin-right:auto; }
body[data-hero="centered"] .hero-pills,
body[data-hero="centered"] .store-row,
body[data-hero="centered"] .hero-trust{ justify-content:center; }
body[data-hero="centered"] .hero-eyebrow{ justify-content:center; }
body[data-hero="centered"] .hero-stage{ margin-top:10px; }
body[data-hero="centered"] .hero-copy{ order:1; }
body[data-hero="centered"] .hero-stage{ order:2; }

body[data-hero="readout"] .hero-grid{ grid-template-columns:.92fr 1.08fr; }
body[data-hero="readout"] .hero-copy{ order:2; }
body[data-hero="readout"] .hero-stage{ order:1; }
body[data-hero="readout"] .readout-card{ display:flex; }

@media(max-width:880px){
  .hero-grid{ grid-template-columns:1fr; text-align:left; }
  .hero-copy{ order:1 !important; }
  .hero-stage{ order:2 !important; }
}

/* ---------- phone stage ---------- */
.hero-stage{ position:relative; display:flex; justify-content:center; align-items:center; }
.stage-glow{
  position:absolute; width:120%; height:120%; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in oklab,var(--lead) 22%, transparent), transparent 72%);
  filter:blur(8px); z-index:0; pointer-events:none;
}
.readout-card{ display:none; }

/* phone */
.phone{
  position:relative; width:300px; flex:none; z-index:2;
  border-radius:46px; padding:11px;
  background:linear-gradient(160deg,#23203d,#0f0e1d);
  box-shadow:0 44px 90px -36px rgba(20,12,40,.6), 0 8px 0 0 rgba(0,0,0,.04);
}
html.dark .phone{ background:linear-gradient(160deg,#322255,#100a26); }
.phone-screen{
  position:relative; border-radius:36px; overflow:hidden;
  background:var(--cream); aspect-ratio:300/640;
  color:var(--ink);
}
html.dark .phone-screen{ background:#1a0f3d; color:#F4EBDA; }
.phone-notch{
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:108px; height:26px; border-radius:0 0 16px 16px; background:#0f0e1d; z-index:20;
}
.statusbar{
  position:absolute; top:0; left:0; right:0; height:42px; z-index:15;
  display:flex; align-items:center; justify-content:space-between; padding:0 22px;
  font-family:var(--f-sans); font-size:13px; font-weight:600;
}
.statusbar .si{ display:flex; gap:5px; align-items:center; }

/* in-phone results screen (rebuilt from the real app) */
.scr{ position:absolute; inset:0; overflow:hidden; padding:50px 16px 0; }
.scr-bar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.scr-pill{
  height:30px; padding:0 11px; border-radius:999px; display:inline-flex; align-items:center; gap:6px;
  background:var(--paper); border:1px solid var(--hairline);
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
}
html.dark .scr-pill{ background:#241552; border-color:rgba(255,255,255,.14); color:#F4EBDA; }
.scr-photo{
  height:96px; border-radius:16px; position:relative; overflow:hidden; border:1px solid var(--hairline);
  background:repeating-linear-gradient(45deg, color-mix(in oklab,var(--ink) 8%, var(--paper)) 0 7px, transparent 7px 14px);
}
html.dark .scr-photo{ background:repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 7px, transparent 7px 14px); }
.scr-photo .lbl{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.scr-cats{ display:flex; gap:6px; margin:12px 0 0; }
.scr-cats .t{ font-family:var(--f-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 7px; border-radius:6px; background:var(--faint); color:var(--muted); }
.scr-name{ font-family:var(--f-display); font-weight:700; font-size:27px; line-height:1; letter-spacing:-.02em; margin:9px 0 0; }
.scr-brand{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.1em; color:var(--muted); margin-top:8px; }
.scr-score{ display:flex; align-items:center; gap:14px; margin-top:16px; }
.scr-verdict{ font-family:var(--f-display); font-weight:700; font-size:18px; line-height:1.05; }
.scr-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.scr-tags .vt{ font-family:var(--f-mono); font-size:8px; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 7px; border-radius:999px; background:var(--faint); color:var(--ink); border:1px solid var(--hairline); }
html.dark .scr-tags .vt{ color:#F4EBDA; }

/* score dial */
.dial{ position:relative; width:108px; height:108px; flex:none; }
.dial svg{ width:108px; height:108px; transform:rotate(-90deg); }
.dial .track{ fill:none; stroke:var(--faint); stroke-width:9; }
.dial .prog{ fill:none; stroke-width:9; stroke-linecap:round; transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1); }
.dial .num{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.dial .num b{ font-family:var(--f-display); font-weight:700; font-size:40px; line-height:.85; }
.dial .num span{ font-family:var(--f-mono); font-size:8px; letter-spacing:.16em; color:var(--muted); margin-top:3px; }

.scr-glance{ font-family:var(--f-mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  margin:18px 0 9px; display:flex; align-items:center; gap:8px; }
.scr-glance::after{ content:""; flex:1; height:1px; background:var(--hairline); }
.scr-stats{ display:grid; grid-template-columns:1fr 1fr 1fr; border:1px solid var(--hairline); border-radius:13px; overflow:hidden; background:var(--paper); }
html.dark .scr-stats{ background:#241552; }
.scr-stats .st{ padding:10px 9px; }
.scr-stats .st + .st{ border-left:1px solid var(--hairline); }
.scr-stats .st .v{ font-family:var(--f-display); font-weight:700; font-size:21px; line-height:1; }
.scr-stats .st .v small{ font-size:11px; color:var(--muted); }
.scr-stats .st .k{ font-family:var(--f-mono); font-size:7.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:5px; }

/* big readout (hero variant 3) */
.readout-card{
  flex-direction:column; gap:18px; max-width:440px;
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:34px;
}
.readout-card .ro-top{ display:flex; align-items:center; gap:20px; }
.readout-card .ro-big{ font-family:var(--f-display); font-weight:700; font-size:96px; line-height:.8; letter-spacing:-.03em; }
.readout-card .ro-big small{ font-size:30px; color:var(--muted); }
.readout-card .ro-grade{ width:64px; height:64px; border-radius:16px; color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:700; font-size:38px; flex:none; }

/* ============================================================
   MARQUEE — decoded E-numbers texture strip
   ============================================================ */
.marquee{
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  background:var(--surface); padding:18px 0; overflow:hidden; position:relative;
}
.marquee::before,.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(90deg, var(--surface), transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg, var(--surface), transparent); }
.marquee-track{ display:flex; gap:0; width:max-content; animation:marquee 60s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.mq-item{ display:inline-flex; align-items:center; gap:12px; padding:0 30px; white-space:nowrap;
  font-family:var(--f-mono); font-size:13px; letter-spacing:.04em; }
.mq-item .e{ font-weight:700; }
.mq-item .arr{ color:var(--muted); }
.mq-item .name{ text-transform:uppercase; font-size:11px; letter-spacing:.1em; color:var(--muted); }
.mq-item .dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.mq-sep{ color:var(--hairline); }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; flex-wrap:nowrap; overflow-x:auto; } }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:54px; }
@media(max-width:820px){ .steps{ grid-template-columns:1fr; } }
.step{
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:30px; position:relative; overflow:hidden;
}
.step-n{ font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; color:var(--muted); }
.step-ic{
  width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center;
  margin:20px 0 22px; background:color-mix(in oklab, var(--lead) 12%, transparent); color:var(--lead);
}
.step.scan .step-ic{ background:color-mix(in oklab, var(--cobalt) 14%, transparent); color:var(--cobalt); }
html.dark .step.scan .step-ic{ color:#7e8bff; background:color-mix(in oklab, var(--cobalt) 36%, transparent); }
.step h3{ font-size:25px; }
.step p{ color:var(--muted); font-size:15px; margin:12px 0 0; line-height:1.5; }
.step-tag{ margin-top:18px; font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--lead-deep); }
.step.scan .step-tag{ color:var(--cobalt); }
html.dark .step.scan .step-tag{ color:#8b97ff; }

/* ============================================================
   THE SCORE, EXPLAINED
   ============================================================ */
.score-explain{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(34px,5vw,76px); align-items:center; margin-top:56px; }
@media(max-width:880px){ .score-explain{ grid-template-columns:1fr; } }
.scale-card{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:clamp(26px,3.5vw,40px); }
.scale-bar{ height:18px; border-radius:10px; background:linear-gradient(90deg, var(--coral), var(--gold) 50%, var(--leaf)); position:relative; margin:8px 0 0; }
.scale-ticks{ display:flex; justify-content:space-between; margin-top:10px; font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; color:var(--muted); }
.grade-rows{ display:flex; flex-direction:column; gap:0; margin-top:30px; }
.grade-row{ display:flex; align-items:center; gap:16px; padding:15px 0; border-top:1px solid var(--hairline); }
.grade-row:last-child{ border-bottom:1px solid var(--hairline); }
.grade-badge{ width:42px; height:42px; border-radius:11px; flex:none; color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:700; font-size:22px; }
.grade-info{ flex:1; }
.grade-info b{ font-size:16px; font-weight:600; }
.grade-info .rng{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; color:var(--muted); margin-left:8px; }
.grade-info p{ margin:3px 0 0; font-size:13px; color:var(--muted); }
.score-points{ display:flex; flex-direction:column; gap:24px; }
.spt{ display:flex; gap:18px; }
.spt .spt-ic{ width:46px; height:46px; border-radius:13px; flex:none; display:flex; align-items:center; justify-content:center;
  background:color-mix(in oklab,var(--lead) 11%, transparent); color:var(--lead); }
.spt h3{ font-size:20px; }
.spt p{ color:var(--muted); font-size:15px; margin:6px 0 0; line-height:1.5; }
.spt .w{ font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:8px; }

/* ============================================================
   THE "WHY" BREAKDOWN
   ============================================================ */
.why-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4vw,56px); margin-top:54px; align-items:start; }
@media(max-width:880px){ .why-grid{ grid-template-columns:1fr; } }
.ingredient-panel{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:28px; position:sticky; top:90px; }
@media(max-width:880px){ .ingredient-panel{ position:static; } }
.ip-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.ip-head .nm{ font-family:var(--f-display); font-weight:700; font-size:22px; line-height:1; }
.ip-head .gr{ width:38px; height:38px; border-radius:10px; color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:700; font-size:19px; flex:none; }
.ip-label{ font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.ip-list{ font-size:14px; line-height:1.85; color:var(--text); }
.ip-list .add{ color:var(--lead-deep); font-weight:600; cursor:pointer; border-bottom:1px dashed color-mix(in oklab,var(--lead) 50%, transparent); }
html.dark .ip-list .add{ color:var(--gold); border-bottom-color:color-mix(in oklab,var(--gold) 50%, transparent); }
.ip-foot{ margin-top:18px; padding-top:16px; border-top:1px solid var(--hairline); font-family:var(--f-mono);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:flex; justify-content:space-between; }

.add-list{ display:flex; flex-direction:column; gap:12px; }
.acard{
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r); overflow:hidden;
  transition:border-color .2s ease;
}
.acard.open{ border-color:color-mix(in oklab,var(--lead) 40%, var(--hairline)); }
.acard-row{ display:flex; align-items:center; gap:16px; padding:18px 22px; cursor:pointer; }
.acard-dot{ width:13px; height:13px; border-radius:50%; flex:none; }
.acard-main{ flex:1; min-width:0; }
.acard-main .nm{ font-weight:600; font-size:17px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.acard-main .nm .e{ font-family:var(--f-mono); font-size:12px; color:var(--muted); letter-spacing:.04em; }
.acard-main .sh{ font-size:13.5px; color:var(--muted); margin-top:4px; line-height:1.4; }
.acard-lvl{ font-family:var(--f-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:5px 9px; border-radius:7px; flex:none; }
.acard-chev{ color:var(--muted); flex:none; transition:transform .3s ease; }
.acard.open .acard-chev{ transform:rotate(90deg); }
.acard-body{ max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.2,.8,.2,1); }
.acard.open .acard-body{ max-height:420px; }
.acard-inner{ padding:0 22px 22px; display:flex; flex-direction:column; gap:16px; }
.acard-q{ display:grid; grid-template-columns:84px 1fr; gap:14px; align-items:start; }
.acard-q .ql{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--lead-deep); padding-top:3px; }
html.dark .acard-q .ql{ color:var(--gold); }
.acard-q p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--text); }
.acard-found{ display:flex; flex-wrap:wrap; gap:7px; }
.acard-found .ch{ font-size:12px; padding:6px 11px; border-radius:999px; background:var(--faint); color:var(--text); }

/* ============================================================
   FREE vs PREMIUM
   ============================================================ */
.plans{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:54px; }
@media(max-width:820px){ .plans{ grid-template-columns:1fr; } }
.plan{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:clamp(28px,3.5vw,42px); position:relative; }
.plan.free{ border-color:color-mix(in oklab,var(--leaf) 38%, var(--hairline)); }
.plan.premium{ background:var(--ink); color:#F4EBDA; border-color:var(--ink); overflow:hidden; }
html.dark .plan.premium{ background:#2c1c63; border-color:#3a2576; }
.plan-tag{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; display:inline-flex; align-items:center; gap:8px; }
.plan.free .plan-tag{ color:var(--leaf); }
.plan.premium .plan-tag{ color:var(--gold); }
.plan-price{ display:flex; align-items:baseline; gap:8px; margin:20px 0 4px; }
.plan-price b{ font-family:var(--f-display); font-weight:700; font-size:46px; letter-spacing:-.02em; }
.plan-price .per{ font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; color:var(--muted); }
.plan.premium .plan-price .per{ color:color-mix(in oklab,#F4EBDA 60%, transparent); }
.plan-desc{ font-size:14.5px; color:var(--muted); max-width:34ch; line-height:1.5; margin:0 0 24px; }
.plan.premium .plan-desc{ color:color-mix(in oklab,#F4EBDA 66%, transparent); }
.plan-feats{ display:flex; flex-direction:column; gap:13px; margin:0 0 28px; }
.plan-feat{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.4; }
.plan-feat .fic{ flex:none; margin-top:1px; }
.plan-feat .fsub{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.plan.premium .plan-feat .fsub{ color:color-mix(in oklab,#F4EBDA 55%, transparent); }
.plan .btn{ width:100%; }
.plan.premium .btn-primary{ background:var(--gold); color:var(--ink); box-shadow:none; }
.plan.premium .btn-primary:hover{ background:#ffce63; }
.plan-soft{ text-align:center; margin-top:14px; font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.plan.premium .plan-soft{ color:color-mix(in oklab,#F4EBDA 50%, transparent); }
.plan-ribbon{ position:absolute; top:20px; right:0; background:var(--gold); color:var(--ink);
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  padding:5px 14px 5px 12px; border-radius:8px 0 0 8px; }
.free-banner{ margin-top:30px; text-align:center; font-size:15px; color:var(--muted); }
.free-banner b{ color:var(--text); font-weight:600; }

/* ============================================================
   TRUST / PRIVACY
   ============================================================ */
.trust{ background:var(--ink); color:#F4EBDA; border-radius:var(--r-lg); padding:clamp(36px,5vw,68px); position:relative; overflow:hidden; }
html.dark .trust{ background:#1f1147; border:1px solid var(--hairline); }
.trust .kicker{ color:var(--gold); }
.trust h2{ color:#fff; }
.trust .section-lede{ color:color-mix(in oklab,#F4EBDA 72%, transparent); }
.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
@media(max-width:820px){ .trust-grid{ grid-template-columns:1fr; } }
.trust-item{ border-top:1px solid rgba(255,255,255,.16); padding-top:20px; }
.trust-item .ti-ic{ width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.08); color:var(--gold);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.trust-item h3{ color:#fff; font-size:20px; }
.trust-item p{ color:color-mix(in oklab,#F4EBDA 66%, transparent); font-size:14px; margin:10px 0 0; line-height:1.55; }
.trust-item a{ color:var(--gold); font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:6px; margin-top:14px; }
.disclaimer{ margin-top:44px; padding-top:24px; border-top:1px solid rgba(255,255,255,.16);
  font-size:13px; color:color-mix(in oklab,#F4EBDA 56%, transparent); line-height:1.6; max-width:70ch; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{ margin-top:46px; max-width:840px; }
.faq{ border-top:1px solid var(--hairline); }
.faq:last-child{ border-bottom:1px solid var(--hairline); }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 4px; cursor:pointer; }
.faq-q h3{ font-family:var(--f-sans); font-weight:600; font-size:clamp(17px,2vw,21px); letter-spacing:0; }
.faq-ic{ width:26px; height:26px; flex:none; position:relative; }
.faq-ic::before,.faq-ic::after{ content:""; position:absolute; background:var(--lead); border-radius:2px; transition:transform .3s ease; }
.faq-ic::before{ top:12px; left:3px; right:3px; height:2px; }
.faq-ic::after{ left:12px; top:3px; bottom:3px; width:2px; }
.faq.open .faq-ic::after{ transform:scaleY(0); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.2,.8,.2,1); }
.faq.open .faq-a{ max-height:260px; }
.faq-a p{ margin:0; padding:0 4px 26px; font-size:16px; color:var(--muted); line-height:1.6; max-width:66ch; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{ text-align:center; }
.final-card{
  background:var(--lead); color:#fff; border-radius:var(--r-lg);
  padding:clamp(48px,7vw,92px) clamp(28px,5vw,64px); position:relative; overflow:hidden;
}
.final-card .ghost-mark{ position:absolute; right:-40px; bottom:-80px; width:340px; height:340px; opacity:.13; pointer-events:none; }
.final-card .kicker{ color:rgba(255,255,255,.8); }
.final-card .kicker::before{ background:rgba(255,255,255,.8); }
.final-card h2{ color:#fff; font-size:clamp(34px,5.5vw,62px); line-height:1; margin-top:18px; position:relative; }
.final-card p{ color:rgba(255,255,255,.85); font-size:clamp(16px,2vw,20px); max-width:40ch; margin:22px auto 0; position:relative; }
.final-card .store-row{ justify-content:center; position:relative; margin-top:38px; }
.final-card .store-badge{ background:#fff; color:var(--ink); box-shadow:0 14px 30px -16px rgba(0,0,0,.4); }
.final-card .hero-trust{ justify-content:center; color:rgba(255,255,255,.82); margin-top:24px; position:relative; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ padding:64px 0 70px; border-top:1px solid var(--hairline); }
.footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.footer-brand{ max-width:32ch; }
.footer-brand p{ color:var(--muted); font-size:14px; margin:16px 0 0; line-height:1.55; }
.footer-cols{ display:flex; gap:clamp(30px,6vw,80px); flex-wrap:wrap; }
.footer-col h4{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 16px; font-weight:700; }
.footer-col a{ display:block; font-size:14px; color:var(--text); padding:5px 0; transition:color .15s ease; }
.footer-col a:hover{ color:var(--lead); }
.footer-bottom{ margin-top:54px; padding-top:26px; border-top:1px solid var(--hairline);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--muted); }
.aisle-tags{ display:flex; gap:8px; }
.aisle-tags .at{ font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:999px; border:1px solid var(--hairline); }
.aisle-tags .at.live{ background:var(--lead); color:#fff; border-color:var(--lead); }

/* ============================================================
   TWEAKS PANEL (vanilla)
   ============================================================ */
.twk{
  position:fixed; right:22px; bottom:22px; z-index:200; width:280px;
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--hairline); border-radius:18px;
  box-shadow:0 30px 70px -28px rgba(20,12,40,.5);
  font-family:var(--f-sans); display:none; overflow:hidden;
}
.twk.show{ display:block; }
.twk-hd{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--hairline); cursor:grab; }
.twk-hd b{ font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.twk-x{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:15px; line-height:1; }
.twk-body{ padding:14px 16px 18px; display:flex; flex-direction:column; gap:18px; }
.twk-sect{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.twk-row{ display:flex; flex-direction:column; gap:9px; }
.twk-lbl{ font-size:13px; font-weight:500; display:flex; justify-content:space-between; }
.twk-seg{ display:flex; background:var(--faint); border-radius:10px; padding:3px; gap:3px; position:relative; }
.twk-seg button{ flex:1; border:none; background:none; cursor:pointer; font-family:var(--f-sans); font-size:11.5px; color:var(--muted);
  padding:7px 4px; border-radius:7px; transition:color .15s ease, background .15s ease; }
.twk-seg button.on{ background:var(--surface-2); color:var(--text); box-shadow:0 2px 6px -3px rgba(0,0,0,.3); font-weight:600; }
.twk-swatches{ display:flex; gap:8px; }
.twk-sw{ width:30px; height:30px; border-radius:8px; cursor:pointer; border:2px solid transparent; transition:transform .12s ease; position:relative; }
.twk-sw:hover{ transform:scale(1.08); }
.twk-sw.on{ border-color:var(--text); }
.twk-toggle{ width:44px; height:26px; border-radius:999px; border:none; background:var(--faint); cursor:pointer; position:relative; transition:background .2s ease; }
.twk-toggle[data-on="1"]{ background:var(--lead); }
.twk-toggle i{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .2s ease; }
.twk-toggle[data-on="1"] i{ transform:translateX(18px); }
.twk-row-h{ flex-direction:row; align-items:center; justify-content:space-between; }