/* ============================================================
   Crion AI — marketing site
   Plain CSS, no build step. Loaded by index.html only; /admin/*
   pages have their own admin/shared/admin.css and never see this.
   ============================================================ */

/* ============================================================
   FONTS — self-hosted variable subsets (SIL OFL 1.1, see fonts/)
   Variable wght axis in one file per family: 82KB total vs 132KB
   for the six static weights this page actually uses.
   ============================================================ */
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:100 800;
  font-display:swap;
  src:url('fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* site palette — dark, soft purples + blues */
  --void:#04050A;
  --deep:#080A14;
  --slate:#0E1122;
  --line:rgba(150,160,220,0.13);
  --line-strong:rgba(160,170,230,0.24);

  --violet:#9B8CFF;
  --violet-deep:#6C5CE0;
  --blue:#5B8DFF;
  --ice:#7FD8F0;

  --text:#EEF0FA;
  --text-2:#B4B9D4;
  --muted:#8B91B0;          /* raised from #7A80A0 for WCAG AA on --void */

  --glow-violet:rgba(155,140,255,0.32);
  --glow-blue:rgba(91,141,255,0.28);

  /* product screen palette — the app's real "Sky & Mint" system.
     The -text variants exist because the app's accent/positive/negative are
     tuned as FILL colours and land at 3.2-3.3:1 on the pale card, under the
     4.5:1 AA needs for text. Measured against the rendered pixels, not the
     token values. The fills themselves are untouched so the mockup still
     shows the real app's colours. */
  --sm-bg-a:#EAF4FC;
  --sm-bg-b:#EAFBF4;
  --sm-accent:#2F8FE0;              /* fill only */
  --sm-accent-text:#175E9E;         /* 6.48:1 on card, 5.07:1 on the progress track */
  --sm-positive:#2F9E76;            /* fill only */
  --sm-positive-text:#1C6E4E;       /* 5.98:1 / 4.68:1 */
  --sm-negative:#E08585;            /* fill only */
  --sm-negative-text:#A83C3C;       /* 6.01:1 / 4.70:1 */
  --sm-text:#233042;
  --sm-muted:#54626F;               /* darkened from #5E6C7C for AA on the pale phone screen */

  --display:'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --body:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --maxw:1140px;
  --pad:clamp(20px, 5vw, 40px);

  /* ---- motion tokens ----
     One rhythm for the whole page. ease-out for anything entering or
     expanding, ease-in for anything leaving, ease-io for two-way movement
     that has no clear "in" or "out" (the scrubber meters). Exits run at
     roughly 65% of their matching enter so dismissals feel responsive. */
  --ease-out:cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:cubic-bezier(0.4, 0, 1, 1);
  --ease-io:cubic-bezier(0.65, 0, 0.35, 1);
  /* Press release is a fast exponential settle, not an overshoot. A bounce
     curve here reads as toy-like on a product that is asking to be trusted
     with money. */
  --ease-press:cubic-bezier(0.165, 0.84, 0.44, 1);

  --dur-press:140ms;
  --dur-base:220ms;
  --dur-exit:150ms;
  --dur-slow:380ms;
  --dur-enter:620ms;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--void);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}

/* Visible focus ring everywhere. Never removed — only restyled. */
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:4px;}

/* ---- browser surfaces ----
   The parts of the page the browser draws still belong to the design. Left
   at defaults, the selection highlight and scrollbar are the two places a
   dark site gives itself away. */
::selection{background:rgba(155,140,255,0.34);color:var(--text);}
::-moz-selection{background:rgba(155,140,255,0.34);color:var(--text);}
:root{
  scrollbar-color:rgba(155,140,255,0.38) transparent;   /* Firefox */
  scrollbar-width:thin;
  accent-color:var(--violet);                            /* native radio/checkbox */
}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:var(--void);}
::-webkit-scrollbar-thumb{
  background:rgba(155,140,255,0.30);border-radius:999px;
  border:3px solid var(--void);background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(155,140,255,0.50);background-clip:padding-box;}
input{caret-color:var(--violet);}

/* Figures are monospaced for a reason — keep them from jittering in width as
   the scrubber counts up and down. */
.meter-label b,.p-amt,.p-stat b,.p-goal-head span,.coach-msg .fig,.g-msg b{
  font-variant-numeric:tabular-nums;
}

.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 — first tab stop, pulls into view on focus. */
.skip{
  position:absolute;left:50%;top:0;translate:-50% -120%;z-index:100;
  background:var(--slate);border:1px solid var(--line-strong);
  padding:10px 18px;border-radius:0 0 10px 10px;font-size:14px;
  transition:translate var(--dur-base) var(--ease-out);
}
.skip:focus-visible{translate:-50% 0;}

/* ============================================================
   AMBIENT BACKGROUND
   ============================================================ */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  contain:strict;}
/* will-change promotes each orb to its own layer so the 90px blur is
   rasterised once and then only composited. Without it the blur is repainted
   every frame of the 26-38s drift, which is the single most expensive thing
   on the page. */
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:0.55;
  will-change:transform;
  transition:background 1.2s ease, opacity 1.2s ease;}
.orb-a{width:52vw;height:52vw;left:-14vw;top:-12vw;background:radial-gradient(circle,var(--glow-violet),transparent 70%);animation:drift-a 26s ease-in-out infinite;}
.orb-b{width:46vw;height:46vw;right:-12vw;top:24vh;background:radial-gradient(circle,var(--glow-blue),transparent 70%);animation:drift-b 32s ease-in-out infinite;}
.orb-c{width:40vw;height:40vw;left:22vw;bottom:-16vw;background:radial-gradient(circle,rgba(127,216,240,0.14),transparent 70%);animation:drift-a 38s ease-in-out infinite reverse;}
@keyframes drift-a{0%,100%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(6vw,5vh,0) scale(1.12);}}
@keyframes drift-b{0%,100%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(-7vw,-4vh,0) scale(1.08);}}
.mesh{position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%);
  opacity:0.5;}
.grain{position:absolute;inset:0;opacity:0.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);position:relative;z-index:1;}
section{position:relative;z-index:1;padding-block:clamp(72px,11vw,132px);}
/* The nav is fixed at 68px, so anchor jumps would otherwise land with the
   section heading tucked underneath it. */
:target,section[id],div[id]{scroll-margin-top:88px;}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--violet);display:flex;align-items:center;gap:10px;margin:0 0 18px;}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--violet),transparent);}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-0.03em;line-height:1.06;margin:0;}
h2{font-size:clamp(30px,4.6vw,50px);}
h3{font-size:19px;letter-spacing:-0.015em;line-height:1.25;}
p{margin:0;}
.lede{color:var(--text-2);font-size:clamp(16px,1.5vw,18.5px);line-height:1.65;max-width:60ch;}
.sec-head{max-width:720px;margin-bottom:clamp(36px,5vw,60px);}
.sec-head p{margin-top:18px;}

/* reveal — enters from below (hierarchy-motion: below = deeper in the page)
   Scoped to .js-reveal on <html>, which the inline boot script in index.html
   adds and then REMOVES again if site.js has not started within 2s. Content
   must never be hidden by an animation that might not arrive: no JS, a script
   error, or opening the file over file:// (where module scripts don't load)
   would otherwise leave the whole page blank. */
.js-reveal .rv{opacity:0;transform:translateY(22px);
  transition:opacity var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out);}
.js-reveal .rv.in{opacity:1;transform:none;}

/* ============================================================
   NAV
   ============================================================ */
.scrollbar{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;transform-origin:left;
  background:linear-gradient(90deg,var(--violet),var(--blue),var(--ice));}
header.nav{position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease;
  border-bottom:1px solid transparent;}
header.nav.stuck{background:rgba(6,8,16,0.72);backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);border-bottom-color:var(--line);}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px;}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-0.02em;}
/* Spark mark sits on its own — no badge, tile or circle behind it. */
.logo .mk{width:22px;height:22px;flex:0 0 auto;display:block;}
.nav-links{display:flex;gap:28px;font-size:14px;color:var(--text-2);}
.nav-links a{position:relative;padding:4px 0;transition:color var(--dur-base) var(--ease-out);}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--violet);transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur-base) var(--ease-out);}
.nav-links a:hover{color:var(--text);}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left;}
.nav-links a[aria-current="true"]{color:var(--text);}
.nav-links a[aria-current="true"]::after{transform:scaleX(1);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:999px;font-size:14.5px;font-weight:600;
  min-height:44px;
  transition:transform var(--dur-press) var(--ease-press),
             filter var(--dur-press) ease,
             background var(--dur-base) ease,
             border-color var(--dur-base) ease;}
.btn-primary{background:linear-gradient(135deg,var(--violet),var(--violet-deep));color:#0A0B14;
  box-shadow:0 6px 22px rgba(108,92,224,0.30);}
.btn-ghost{border:1px solid var(--line-strong);color:var(--text);}
@media(hover:hover){
  .btn-primary:hover{filter:brightness(1.08);}
  .btn-ghost:hover{background:rgba(255,255,255,0.05);border-color:var(--violet);}
}
.btn:active{transform:scale(0.97);}
@media(max-width:820px){.nav-links{display:none;}}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-top:clamp(120px,17vh,180px);padding-bottom:clamp(60px,9vw,100px);}
.hero-grid{display:grid;grid-template-columns:1.08fr 0.92fr;gap:clamp(36px,5vw,72px);align-items:center;}
.hero h1{font-size:clamp(38px,6.4vw,74px);font-weight:600;letter-spacing:-0.04em;}
.hero h1 .accent{background:linear-gradient(100deg,var(--violet) 10%,var(--blue) 55%,var(--ice) 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.hero .lede{margin-top:24px;font-size:clamp(16.5px,1.6vw,19px);}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;}
.hero-note{margin-top:20px;font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:0.04em;}

/* live coach card — the hero artifact */
.coach{position:relative;border-radius:24px;padding:1px;
  background:linear-gradient(150deg,rgba(155,140,255,0.55),rgba(91,141,255,0.2) 45%,rgba(255,255,255,0.05));}
.coach-in{background:linear-gradient(165deg,rgba(16,18,34,0.94),rgba(9,11,22,0.97));
  border-radius:23px;padding:24px 24px 20px;backdrop-filter:blur(8px);}
.coach-top{display:flex;align-items:center;gap:9px;margin-bottom:16px;}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--violet);
  box-shadow:0 0 0 0 rgba(155,140,255,0.6);animation:pulse 2.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(155,140,255,0.55);}70%{box-shadow:0 0 0 11px rgba(155,140,255,0);}100%{box-shadow:0 0 0 0 rgba(155,140,255,0);}}
.coach-top span{font-family:var(--mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--violet);}
.coach-msg{font-family:var(--display);font-size:clamp(18px,2vw,21.5px);font-weight:500;line-height:1.42;
  min-height:5.4em;letter-spacing:-0.015em;}
.coach-msg .fig{font-family:var(--mono);font-weight:600;color:var(--ice);font-size:0.94em;}
.caret{display:inline-block;width:2px;height:1.05em;translate:0 3px;background:var(--violet);
  animation:blink 1.05s steps(1) infinite;}
@keyframes blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}
.coach-bar{display:flex;align-items:center;gap:10px;margin-top:20px;padding:11px 14px;border-radius:999px;
  background:rgba(255,255,255,0.045);border:1px solid var(--line);}
.coach-bar input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:13.5px;font-family:var(--body);}
.coach-bar input::placeholder{color:var(--muted);}
.coach-send{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--violet),var(--violet-deep));}
.coach-dots{display:flex;gap:6px;margin-top:16px;}
.coach-dots i{width:16px;height:3px;border-radius:2px;background:rgba(255,255,255,0.14);
  transition:background var(--dur-base) var(--ease-out);}
.coach-dots i.on{background:var(--violet);}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;}}

/* ============================================================
   MARQUEE STRIP
   ============================================================ */
.strip{border-block:1px solid var(--line);overflow:hidden;position:relative;z-index:1;
  background:rgba(255,255,255,0.012);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.strip-track{display:flex;gap:56px;padding:15px 0;width:max-content;animation:slide 42s linear infinite;}
@keyframes slide{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
.strip-track span{font-family:var(--mono);font-size:11.5px;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}

/* ============================================================
   MISSION
   ============================================================ */
.mission-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:clamp(28px,4vw,56px);align-items:start;}
.belief{padding:26px 0;border-top:1px solid var(--line);}
.belief:first-child{border-top:none;padding-top:0;}
.belief h3{margin-bottom:10px;}
.belief p{color:var(--text-2);font-size:15.5px;line-height:1.62;}
.founder{background:linear-gradient(165deg,rgba(20,22,40,0.85),rgba(10,12,24,0.9));
  border:1px solid var(--line);border-radius:22px;padding:30px 28px;position:sticky;top:100px;}
.founder-q{margin:0;font-family:var(--display);font-size:clamp(19px,2.2vw,24px);font-weight:500;line-height:1.35;letter-spacing:-0.02em;}
.founder-by{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line);}
.founder-av{width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:15px;color:#0a0b14;
  background:linear-gradient(135deg,var(--violet),var(--ice));}
.founder-by p{font-size:14.5px;font-weight:600;}
.founder-by small{display:block;color:var(--muted);font-size:12.5px;}
@media(max-width:900px){
  .mission-grid{grid-template-columns:1fr;}
  .founder{position:static;}
}

/* ============================================================
   SIGNATURE: THE CONTROL SCRUBBER
   ============================================================ */
.shift-stage{background:linear-gradient(170deg,rgba(18,20,38,0.8),rgba(8,10,20,0.9));
  border:1px solid var(--line);border-radius:26px;padding:clamp(24px,3.4vw,40px);}
.stage-top{display:grid;grid-template-columns:1.2fr 0.8fr;gap:clamp(24px,4vw,52px);margin-bottom:34px;}
.stage-state{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  margin-bottom:12px;transition:color var(--dur-slow) var(--ease-io);}
.stage-title{font-family:var(--display);font-size:clamp(24px,3.2vw,36px);font-weight:600;letter-spacing:-0.03em;line-height:1.12;}
.stage-body{color:var(--text-2);margin-top:14px;font-size:16px;line-height:1.6;max-width:48ch;}
.signals{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px;}
.signals li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--text-2);line-height:1.5;}
.signals b{color:var(--text);font-weight:600;}
.sig-dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto;margin-top:8px;
  transition:background var(--dur-slow) var(--ease-io);}
.stage-meters{display:grid;gap:20px;align-content:start;}
.meter-label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;font-size:13.5px;color:var(--text-2);}
.meter-label b{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text);}
/* Track + fill. The fill is scaled on the X axis rather than having its width
   animated — width animation forces layout on every frame, scaleX stays on
   the compositor. transform-origin:left so it grows from the left edge. */
.meter{height:7px;border-radius:999px;background:rgba(255,255,255,0.07);overflow:hidden;}
.meter i{display:block;height:100%;width:100%;border-radius:999px;transform-origin:left;
  transform:scaleX(0);transition:transform var(--dur-slow) var(--ease-io);}
.m-worry i{background:linear-gradient(90deg,#E08585,#c96c8c);}
.m-clarity i{background:linear-gradient(90deg,var(--violet),var(--blue));}
.m-saved i{background:linear-gradient(90deg,var(--blue),var(--ice));}

.scrub{border-top:1px solid var(--line);padding-top:26px;position:relative;}
.scrub-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.scrub-head p{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);}
.scrub-head b{color:var(--text);}
.scrubber{-webkit-appearance:none;appearance:none;width:100%;height:34px;background:none;cursor:grab;display:block;}
.scrubber:active{cursor:grabbing;}
.scrubber::-webkit-slider-runnable-track{height:6px;border-radius:999px;
  background:linear-gradient(90deg,rgba(224,133,133,0.5),rgba(155,140,255,0.5),rgba(127,216,240,0.5));}
.scrubber::-moz-range-track{height:6px;border-radius:999px;
  background:linear-gradient(90deg,rgba(224,133,133,0.5),rgba(155,140,255,0.5),rgba(127,216,240,0.5));}
.scrubber::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
  margin-top:-10px;background:linear-gradient(135deg,#fff,#cfd4f5);border:2px solid var(--violet);
  box-shadow:0 3px 14px rgba(155,140,255,0.5);
  transition:transform var(--dur-press) var(--ease-press),box-shadow var(--dur-press) ease;}
.scrubber::-moz-range-thumb{width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,#fff,#cfd4f5);border:2px solid var(--violet);
  box-shadow:0 3px 14px rgba(155,140,255,0.5);
  transition:transform var(--dur-press) var(--ease-press),box-shadow var(--dur-press) ease;}
.scrubber:active::-webkit-slider-thumb{transform:scale(1.12);}
.scrubber:active::-moz-range-thumb{transform:scale(1.12);}
.scrubber:focus-visible{outline:none;}
.scrubber:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(155,140,255,0.45);}
.scrubber:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(155,140,255,0.45);}

.scrub-ticks{display:flex;justify-content:space-between;margin-top:10px;gap:6px;}
.scrub-ticks button{font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--muted);padding:8px 6px;min-height:34px;border-radius:8px;flex:1;
  transition:color var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out);}
.scrub-ticks button.on{color:var(--text);background:rgba(255,255,255,0.05);}
@media(hover:hover){.scrub-ticks button:hover{color:var(--text-2);}}
@media(max-width:820px){
  .stage-top{grid-template-columns:1fr;}
  .scrub-ticks button{font-size:9.5px;letter-spacing:0.02em;padding:8px 2px;}
}

/* ============================================================
   PRODUCT TABS + PHONE
   ============================================================ */
.prod-grid{display:grid;grid-template-columns:1fr 0.82fr;gap:clamp(30px,5vw,72px);align-items:center;}
.tabs{display:grid;}
.tab{display:flex;gap:16px;text-align:left;padding:22px 4px;border-top:1px solid var(--line);width:100%;
  transition:opacity var(--dur-base) var(--ease-out);}
.tab:first-child{border-top:none;}
.tab-ix{font-family:var(--mono);font-size:11px;color:var(--muted);padding-top:3px;
  transition:color var(--dur-base) var(--ease-out);}
/* Styled like an h3 but not marked up as one — a heading inside a role="tab"
   button confuses screen-reader heading navigation. */
.tab-t{display:block;font-family:var(--display);font-weight:600;font-size:19px;
  letter-spacing:-0.015em;line-height:1.25;
  transition:color var(--dur-base) var(--ease-out);}
.tab p{color:var(--muted);font-size:14.5px;line-height:1.55;margin-top:8px;
  transition:color var(--dur-base) var(--ease-out);}
.tab[aria-selected="true"] .tab-ix{color:var(--violet);}
.tab[aria-selected="true"] p{color:var(--text-2);}
.tab[aria-selected="false"]{opacity:0.55;}
@media(hover:hover){.tab[aria-selected="false"]:hover{opacity:0.8;}}

.phone-hold{display:grid;place-items:center;}
.phone{width:min(300px,78vw);aspect-ratio:9/19.3;border-radius:42px;padding:9px;flex:0 0 auto;
  background:linear-gradient(160deg,#2a2c46,#111324);
  box-shadow:0 40px 90px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.06);}
.phone-screen{width:100%;height:100%;border-radius:34px;overflow:hidden;position:relative;
  background:linear-gradient(165deg,var(--sm-bg-a),var(--sm-bg-b));
  color:var(--sm-text);padding:26px 15px 60px;font-size:13px;}
.notch{position:absolute;top:9px;left:50%;translate:-50% 0;width:74px;height:19px;border-radius:999px;background:#0d0f1c;}
.p-status{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--sm-muted);margin-bottom:12px;}

/* Panes are stacked so switching crossfades in place instead of the layout
   jumping. Inactive panes get `inert` in JS, which takes them out of both the
   accessibility tree and the tab order — deliberately NOT `hidden`, because
   display:none cancels the transition and the outgoing pane would vanish
   instantly instead of fading. */
.p-panes{position:relative;}
.p-pane{position:absolute;inset:0;opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity var(--dur-exit) var(--ease-in),transform var(--dur-exit) var(--ease-in);}
.p-pane.on{position:relative;opacity:1;transform:none;pointer-events:auto;
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);}
.p-h{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-0.02em;margin-bottom:3px;}
.p-sub{font-size:11px;color:var(--sm-muted);margin-bottom:13px;}
.g-card{background:rgba(255,255,255,0.62);border:1px solid rgba(255,255,255,0.85);
  border-radius:15px;padding:12px 13px;margin-bottom:9px;box-shadow:0 5px 18px rgba(47,143,224,0.09);}
.g-lab{font-size:8.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--sm-muted);margin-bottom:6px;}
.g-msg{font-family:var(--display);font-size:14.5px;font-weight:500;line-height:1.4;letter-spacing:-0.01em;}
.g-msg b{font-family:var(--mono);font-weight:600;color:var(--sm-accent-text);}
.g-input{display:flex;align-items:center;justify-content:space-between;margin-top:11px;padding:7px 9px;
  border-radius:999px;background:rgba(255,255,255,0.75);font-size:10.5px;color:var(--sm-muted);}
.g-input .dot{width:19px;height:19px;border-radius:50%;background:var(--sm-accent);display:grid;place-items:center;}
.p-row{display:flex;gap:7px;margin-bottom:9px;}
.p-stat{flex:1;background:rgba(255,255,255,0.62);border:1px solid rgba(255,255,255,0.85);
  border-radius:13px;padding:9px 8px;text-align:center;}
.p-stat small{display:block;font-size:8.5px;color:var(--sm-muted);text-transform:uppercase;letter-spacing:0.1em;}
.p-stat b{font-family:var(--mono);font-size:16px;font-weight:600;}
.p-stat.pos b{color:var(--sm-positive-text);}
.p-bars{display:flex;align-items:flex-end;justify-content:space-between;height:70px;gap:5px;margin-top:4px;}
.p-bars div{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;}
.p-bars i{width:100%;border-radius:4px;display:block;}
.p-bars small{font-size:8.5px;color:var(--sm-muted);}
.p-goal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;}
.p-goal-head b{font-family:var(--display);font-size:14.5px;font-weight:600;}
.p-goal-head span{font-family:var(--mono);font-size:12px;color:var(--sm-positive-text);font-weight:600;}
.p-goal-head span.neg{color:var(--sm-negative-text);}
.p-prog{height:6px;border-radius:999px;background:rgba(47,143,224,0.14);overflow:hidden;}
.p-prog i{display:block;height:100%;border-radius:999px;background:var(--sm-accent);}
.p-prog i.neg{background:var(--sm-negative);}
.p-mini{font-size:10px;color:var(--sm-muted);margin-top:6px;line-height:1.4;}
.p-seg{display:flex;background:rgba(47,143,224,0.10);border-radius:999px;padding:3px;margin-bottom:14px;}
.p-seg span{flex:1;text-align:center;font-size:11px;padding:7px 0;border-radius:999px;color:var(--sm-muted);}
.p-seg span.on{background:#fff;color:var(--sm-text);font-weight:600;box-shadow:0 2px 8px rgba(47,143,224,0.16);}
.p-amt{font-family:var(--mono);font-size:34px;font-weight:600;text-align:center;margin:14px 0 4px;letter-spacing:-0.02em;}
.p-key{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:14px;}
/* Spans, not buttons — this keypad is a picture of the app, not a control.
   Real buttons here would land in the tab order and announce as actionable. */
.p-key span{display:block;text-align:center;background:rgba(255,255,255,0.62);
  border:1px solid rgba(255,255,255,0.85);border-radius:11px;
  padding:11px 0;font-family:var(--mono);font-size:16px;font-weight:500;color:var(--sm-text);}
.p-nav{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-around;
  padding:9px 0 13px;background:rgba(255,255,255,0.7);border-top:1px solid rgba(255,255,255,0.9);
  backdrop-filter:blur(10px);}
.p-nav b{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:8.5px;font-weight:500;color:var(--sm-muted);}
.p-nav b i{width:15px;height:15px;border-radius:5px;background:currentColor;opacity:0.35;display:block;}
.p-nav b.on{color:var(--sm-accent-text);font-weight:600;}
.p-nav b.on i{opacity:1;}
@media(max-width:900px){
  .prod-grid{grid-template-columns:1fr;}
  .phone-hold{order:-1;}
}

/* ============================================================
   STEPS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px);}
.step{background:linear-gradient(170deg,rgba(18,20,38,0.7),rgba(9,11,22,0.85));
  border:1px solid var(--line);border-radius:20px;padding:28px 24px;}
.step-n{font-family:var(--mono);font-size:11px;color:var(--violet);letter-spacing:0.14em;margin-bottom:20px;}
.step h3{margin-bottom:10px;}
.step p{color:var(--text-2);font-size:14.5px;line-height:1.6;}
@media(max-width:820px){.steps{grid-template-columns:1fr;}}

/* ============================================================
   NOT-THIS COMPARISON
   ============================================================ */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,26px);}
.vs-card{border-radius:22px;padding:30px 26px;border:1px solid var(--line);}
.vs-card.no{background:rgba(255,255,255,0.018);}
.vs-card.yes{background:linear-gradient(165deg,rgba(155,140,255,0.10),rgba(91,141,255,0.04));border-color:rgba(155,140,255,0.26);}
.vs-h{font-family:var(--mono);font-size:11px;letter-spacing:0.15em;text-transform:uppercase;margin-bottom:20px;}
.vs-card.no .vs-h{color:var(--muted);}
.vs-card.yes .vs-h{color:var(--violet);}
.vs-list{list-style:none;padding:0;margin:0;display:grid;gap:14px;}
.vs-list li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.5;}
.vs-list svg{flex:0 0 auto;margin-top:3px;}
.vs-card.no .vs-list li{color:var(--muted);}
.vs-card.yes .vs-list li{color:var(--text);}
@media(max-width:760px){.versus{grid-template-columns:1fr;}}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:grid;gap:0;border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
/* Each question is an h3 wrapping the button, so the FAQ is navigable by
   heading. The h3 is layout-neutral; the button carries all the styling. */
.faq-h{margin:0;font:inherit;letter-spacing:normal;line-height:inherit;}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 4px;text-align:left;font-family:var(--display);font-size:clamp(16.5px,1.9vw,19px);
  font-weight:500;letter-spacing:-0.015em;line-height:1.35;min-height:44px;
  transition:color var(--dur-base) var(--ease-out);}
@media(hover:hover){.faq-q:hover{color:var(--violet);}}
.faq-ic{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid var(--line-strong);
  transition:transform var(--dur-slow) var(--ease-out),background var(--dur-base) var(--ease-out);}
.faq-item.open .faq-ic{transform:rotate(135deg);background:rgba(155,140,255,0.18);}
/* Expand/collapse via grid-template-rows 0fr -> 1fr. This animates without
   needing a measured pixel height, so copy edits can't desync the animation.
   Collapse runs shorter than expand (exit ~68% of enter). */
.faq-a{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-exit) var(--ease-in);}
.faq-item.open .faq-a{grid-template-rows:1fr;
  transition:grid-template-rows var(--dur-slow) var(--ease-out);}
.faq-a > div{overflow:hidden;min-height:0;}
.faq-a p{color:var(--text-2);font-size:15.5px;line-height:1.65;max-width:70ch;
  padding:0 4px 26px;opacity:0;transition:opacity var(--dur-exit) var(--ease-in);}
.faq-item.open .faq-a p{opacity:1;transition:opacity var(--dur-slow) var(--ease-out) 60ms;}

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.cta-box{background:linear-gradient(165deg,rgba(24,26,48,0.9),rgba(10,12,24,0.94));
  border:1px solid var(--line-strong);border-radius:28px;padding:clamp(34px,5vw,62px);text-align:center;
  position:relative;overflow:hidden;}
.cta-box::before{content:"";position:absolute;top:-60%;left:50%;translate:-50% 0;width:120%;height:150%;
  background:radial-gradient(ellipse at center,rgba(155,140,255,0.16),transparent 60%);pointer-events:none;}
.cta-box > *{position:relative;}
.cta-box .lede{margin:18px auto 0;}
.perk{display:inline-flex;align-items:center;gap:9px;margin-top:24px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ice);background:rgba(127,216,240,0.10);
  border:1px solid rgba(127,216,240,0.30);border-radius:999px;padding:9px 18px;}
.perk svg{flex:0 0 auto;}

.form{display:grid;gap:14px;max-width:520px;margin:26px auto 0;text-align:left;}
.field label,.field .d-label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--text-2);}
.field label .opt{font-weight:400;color:var(--muted);}
.form input[type="text"],.form input[type="email"]{
  width:100%;background:rgba(255,255,255,0.05);border:1px solid var(--line-strong);
  border-radius:12px;padding:13px 16px;min-height:48px;color:var(--text);font-size:15px;font-family:var(--body);
  transition:border-color var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out);}
.form input::placeholder{color:var(--muted);}
.form input:hover{border-color:rgba(160,170,230,0.36);}
.form input[aria-invalid="true"]{border-color:#E08585;}

/* Age range is a real radiogroup, not a select — three options is under the
   threshold where a dropdown earns its extra tap, and radios stay operable
   with arrow keys for free. */
.ages{display:flex;gap:9px;flex-wrap:wrap;}
.age{position:relative;flex:1;min-width:96px;cursor:pointer;}
.age input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.age span{display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px 10px;
  border-radius:12px;border:1px solid var(--line-strong);background:rgba(255,255,255,0.05);
  font-family:var(--mono);font-size:13.5px;color:var(--text-2);
  transition:border-color var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out),transform var(--dur-press) var(--ease-press);}
.age input:checked + span{border-color:var(--violet);background:rgba(155,140,255,0.16);color:var(--text);}
.age input:focus-visible + span{outline:2px solid var(--violet);outline-offset:3px;}
.age input:active + span{transform:scale(0.97);}
@media(hover:hover){.age input:not(:checked):hover + span{border-color:rgba(160,170,230,0.4);}}
.ages[aria-invalid="true"] .age span{border-color:#E08585;}

.form button[type="submit"]{width:100%;margin-top:4px;min-height:50px;}
.form button[type="submit"][disabled]{opacity:0.65;cursor:progress;}
.form button[type="submit"][disabled]:active{transform:none;}

.form-msg{margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:0.05em;
  min-height:1.4em;line-height:1.5;}
.form-msg.err{color:#F2A0A0;}
.field-err{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:0.04em;
  color:#F2A0A0;margin-top:7px;min-height:0;}

/* Success state replaces the form in place. */
.done{display:none;max-width:520px;margin:26px auto 0;text-align:center;}
.done.show{display:block;animation:doneIn var(--dur-slow) var(--ease-out) both;}
@keyframes doneIn{from{opacity:0;transform:translateY(8px) scale(0.985);}to{opacity:1;transform:none;}}
.done-tick{width:46px;height:46px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;
  background:rgba(127,216,240,0.14);border:1px solid rgba(127,216,240,0.34);}
.done-tick path{stroke-dasharray:40;stroke-dashoffset:40;}
.done.show .done-tick path{animation:draw 460ms var(--ease-out) 140ms forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
.done h3{font-size:22px;margin-bottom:8px;}
.done p{color:var(--text-2);font-size:15px;line-height:1.6;}
.cta-fine{margin-top:22px;font-size:12.5px;color:var(--muted);}

footer{border-top:1px solid var(--line);padding-block:44px;position:relative;z-index:1;}
.foot{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-start;}
.foot small{display:block;color:var(--muted);font-size:12.5px;line-height:1.65;max-width:52ch;}
.foot-links{display:flex;gap:6px 22px;flex-wrap:wrap;font-size:13.5px;color:var(--text-2);}
/* min-height 44px: these are the smallest tap targets on the page and were
   22px tall on text line-height alone. */
.foot-links a{display:inline-flex;align-items:center;min-height:44px;
  transition:color var(--dur-base) var(--ease-out);}
@media(hover:hover){.foot-links a:hover{color:var(--violet);}}

/* ============================================================
   REDUCED MOTION
   Kills every animation and transition on the page, including the four
   continuous ones (drifting orbs, marquee, coach typing, pulse dot) and the
   6.5s tab autoplay, which is disabled in JS rather than CSS.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .rv{opacity:1 !important;transform:none !important;}
  .orb{animation:none !important;}
  .strip-track{animation:none !important;}
  .pulse{animation:none !important;}
  .caret{display:none !important;}
  .meter i{transition:none !important;}
  .p-pane{transition:none !important;}
  .faq-a,.faq-item.open .faq-a{transition:none !important;}
  .faq-a p,.faq-item.open .faq-a p{transition:none !important;opacity:1 !important;}
  .done.show{animation:none !important;}
  .done.show .done-tick path{animation:none !important;stroke-dashoffset:0 !important;}
  .btn:active,.age input:active + span{transform:none !important;}
}

/* Print — the ambient layers and the phone are pure decoration. */
@media print{
  .atmos,.scrollbar,.phone-hold,.strip{display:none !important;}
  header.nav{position:static;}
  body{background:#fff;color:#000;}
}