/* ==========================================================================
   MathWiz website
   Colour tokens are the app's own (lib/core/constants/colors.dart and the
   Brain Games glass kit, lib/features/session/games/glass_kit.dart). Light is
   "the drafting table": ink curves on the app's pale blue. Dark is "the
   observatory": the same curves glowing on the splash navy.
   Radii follow lib/core/constants/radii.dart: buttons and pills are full
   pills, cards 14px, sheets 20px, keys 12px, chips 8px.
   ========================================================================== */

@font-face{font-family:"Nunito";src:url("../fonts/nunito-normal-latin.woff2") format("woff2");font-weight:200 1000;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-italic-latin.woff2") format("woff2");font-weight:200 1000;font-style:italic;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-italic-latin.woff2") format("woff2");font-weight:400 600;font-style:italic;font-display:swap}
@font-face{font-family:"STIX Two";src:url("../fonts/stix-normal.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"STIX Two";src:url("../fonts/stix-italic.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}

/* ---- Tokens ------------------------------------------------------------- */
:root{
  --sans:"Nunito","STIX Two",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Fraunces","STIX Two",Georgia,"Times New Roman",serif;
  --math:"STIX Two","Cambria Math",Cambria,"Times New Roman",serif;

  /* brand constants, identical in both themes */
  --brand-deep:#2E3B82;--brand-mid:#4A57A8;--icon-blue:#B8C4E8;--splash:#0D1535;
  --amber:#F0A030;--gold:#F5C842;--green:#4CC68D;--red:#E8564A;
  --violet:#8B6FE0;--teal:#3FB8C4;--sky:#5B8DEF;--pink:#EC7BA0;--ember:#FF8A5B;--mauve:#B07CC6;
  --on-amber:#1A2560;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);

  --r-card:14px;--r-sheet:20px;--r-key:12px;--r-chip:8px;

  /* light: theme-aware tokens */
  color-scheme:light;
  --bg:#EAF1FB;--card:#FFFFFF;--surface:#B8C4E8;
  --amber-bg:#FAEEDA;--correct-bg:#EAF5EE;--wrong-bg:#FCEBEB;--correct-text:#085041;--wrong-text:#791F1F;
  --text:#2E3B82;--heading:#1A2560;--muted:#6E7AA7;
  --chat-surface:#EFF4FD;--chat-bubble:#FFFFFF;--chat-border:#D3DEF4;--chat-text:#1A2560;--chat-muted:#6E7AA7;
  --chat-user:#FCE9CE;--chat-user-text:#6B4405;--chat-step:#FFF8EC;

  /* glass kit, light */
  --gk-high:#F3F5FE;--gk-low:#E1E7F8;
  --gk-orb-a:#8FA6F5;--gk-orb-b:#C3A6F7;--gk-orb-c:#8FD8E8;--gk-orb-d:#FBD08A;
  --gk-panel-h:rgb(255 255 255 / .66);--gk-panel-l:rgb(255 255 255 / .42);
  --gk-edge-h:rgb(255 255 255 / .95);--gk-edge-l:rgb(255 255 255 / .30);
  --gk-slot-h:rgb(22 32 90 / .14);--gk-slot-l:rgb(22 32 90 / .06);--gk-slot-edge:rgb(22 32 90 / .12);
  --gk-tile-h:rgb(255 255 255 / .94);--gk-tile-l:rgb(255 255 255 / .64);
  --gk-ink:#16205A;--gk-accent:#4A57A8;--gk-fill-h:#6B78D8;--gk-fill-l:#3F4CA0;
  --gk-good:#0E8A5F;--gk-warn:#B26B00;--gk-bad:#C0392B;--gk-idle:#5A6795;
  --gk-shadow:rgb(42 53 112 / .16);

  /* site roles */
  --ink:var(--brand-mid);
  --caption:color-mix(in srgb,var(--text) 80%,var(--bg));
  --line:rgb(46 59 130 / .13);
  --line-strong:rgb(46 59 130 / .28);
  --glass:rgb(255 255 255 / .68);
  --glass-edge:rgb(255 255 255 / .92);
  --glass-inset:inset 0 1px 0 rgb(255 255 255 / .7);
  --lift:0 1px 2px rgb(26 37 96 / .06),0 14px 34px -12px rgb(26 37 96 / .24);
  --lift-lg:0 2px 4px rgb(26 37 96 / .06),0 34px 80px -28px rgb(26 37 96 / .42);
  --focus:#4A57A8;
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0C1230;--card:#161E45;--surface:#1E2750;
  --amber-bg:#31280F;--correct-bg:#12362A;--wrong-bg:#3A1C1C;--correct-text:#7FE3B5;--wrong-text:#F2A39B;
  --text:#C9D4F7;--heading:#E6EBFC;--muted:#98A4CC;
  --chat-surface:#0D1535;--chat-bubble:rgb(255 255 255 / .08);--chat-border:rgb(255 255 255 / .12);--chat-text:#FFFFFF;--chat-muted:rgb(255 255 255 / .6);
  --chat-user:rgb(240 160 48 / .18);--chat-user-text:#F5C842;--chat-step:rgb(13 21 53 / .55);

  --gk-high:#0B1230;--gk-low:#05091C;
  --gk-orb-a:#3B4BA8;--gk-orb-b:#6B44C4;--gk-orb-c:#1F7FA0;--gk-orb-d:#C4761A;
  --gk-panel-h:rgb(255 255 255 / .15);--gk-panel-l:rgb(255 255 255 / .07);
  --gk-edge-h:rgb(255 255 255 / .44);--gk-edge-l:rgb(255 255 255 / .06);
  --gk-slot-h:rgb(0 0 0 / .30);--gk-slot-l:rgb(0 0 0 / .16);--gk-slot-edge:rgb(255 255 255 / .10);
  --gk-tile-h:rgb(255 255 255 / .26);--gk-tile-l:rgb(255 255 255 / .11);
  --gk-ink:#FFFFFF;--gk-accent:#9DAEF8;--gk-fill-h:#5566D6;--gk-fill-l:#37429C;
  --gk-good:#4BE3A6;--gk-warn:#FFC663;--gk-bad:#FF8E7E;--gk-idle:#97A6DC;
  --gk-shadow:rgb(0 0 0 / .45);

  --ink:var(--amber);
  --caption:var(--muted);
  --line:rgb(184 196 232 / .12);
  --line-strong:rgb(184 196 232 / .26);
  --glass:rgb(22 30 69 / .64);
  --glass-edge:rgb(184 196 232 / .16);
  --glass-inset:inset 0 1px 0 rgb(255 255 255 / .06);
  --lift:0 1px 2px rgb(0 0 0 / .35),0 18px 44px -14px rgb(2 5 18 / .75);
  --lift-lg:0 2px 6px rgb(0 0 0 / .35),0 40px 90px -30px rgb(2 5 18 / .9);
  --focus:#F5C842;
}

/* Without JavaScript the page still follows the system theme. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    color-scheme:dark;
    --bg:#0C1230;--card:#161E45;--surface:#1E2750;
    --amber-bg:#31280F;--correct-bg:#12362A;--wrong-bg:#3A1C1C;--correct-text:#7FE3B5;--wrong-text:#F2A39B;
    --text:#C9D4F7;--heading:#E6EBFC;--muted:#98A4CC;
    --ink:var(--amber);--caption:var(--muted);
    --line:rgb(184 196 232 / .12);--line-strong:rgb(184 196 232 / .26);
    --glass:rgb(22 30 69 / .64);--glass-edge:rgb(184 196 232 / .16);--focus:#F5C842;
  }
}

/* ---- Base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:92px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--text);font:500 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(62vw 50vw at 92% -8%,rgb(184 196 232 / .62),transparent 62%),
    radial-gradient(48vw 40vw at -12% 34%,rgb(139 111 224 / .10),transparent 62%),
    radial-gradient(44vw 32vw at 68% 108%,rgb(240 160 48 / .10),transparent 62%)}
:root[data-theme="dark"] body::before{
  background:
    radial-gradient(70vw 58vw at 88% -12%,rgb(74 87 168 / .34),transparent 62%),
    radial-gradient(56vw 46vw at -16% 40%,rgb(139 111 224 / .13),transparent 62%),
    radial-gradient(48vw 36vw at 62% 112%,rgb(240 160 48 / .07),transparent 62%),
    linear-gradient(180deg,#0C1230 0%,#0A1029 60%,#070C22 100%)}
:root[data-theme="dark"] body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url("../img/stars-a.svg"),url("../img/stars-b.svg");opacity:.5}

img{max-width:100%;height:auto}
h1,h2,h3,p,figure,ol,ul{margin:0}
ul,ol{padding:0}
a{color:inherit}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
::selection{background:rgb(240 160 48 / .32)}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:6px}
/* Icons are sized here as well as in icons.css: that sheet loads after the page shows, and
   sized now, its arrival only paints the glyphs, it does not reflow the text around them. */
.ic{display:inline-block;flex:none;width:1em;height:1em;vertical-align:-0.14em}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--amber);color:var(--on-amber);font-weight:800;text-decoration:none;transition:top .2s var(--ease-out)}
.skip:focus{top:12px}

.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}

/* ---- Type --------------------------------------------------------------- */
.display{color:var(--heading)}
.display .l1{display:block;font:900 clamp(2.7rem,4.55vw,4.7rem)/1.02 var(--sans);letter-spacing:-.03em;white-space:nowrap}
.display .l2{display:block;font:italic 500 clamp(2.9rem,4.9vw,5.05rem)/1.12 var(--serif);letter-spacing:-.012em;color:var(--ink);padding-bottom:.06em}
.h2{font:900 clamp(2rem,3.6vw,3.3rem)/1.05 var(--sans);letter-spacing:-.024em;color:var(--heading);text-wrap:balance}
.h2 .l1{display:block}
.h2 .l2{display:block;font:italic 500 1.07em/1.12 var(--serif);letter-spacing:-.01em;color:var(--ink);padding-bottom:.05em}
.h3{font:900 clamp(1.45rem,2.2vw,1.95rem)/1.1 var(--sans);letter-spacing:-.016em;color:var(--heading)}
.lead{font-size:clamp(1.05rem,1.22vw,1.2rem);line-height:1.55;color:var(--text);max-width:40ch;text-wrap:pretty}
.eyebrow{font:800 .8rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin-bottom:22px}
.caption{font:italic 400 1rem/1.5 var(--serif);color:var(--caption);max-width:46ch;text-wrap:pretty}
.caption b{font-weight:600;color:var(--heading)}
.math{font-family:var(--math);font-style:italic;font-weight:400;letter-spacing:0;white-space:nowrap}
.math sub,.math sup{font-size:.68em;line-height:0}
.lead a,.ans a,.plan-note a,.chat-note a,.rule-lead a,.privacy-links a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}

/* ---- Buttons ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;height:54px;padding:0 26px;border-radius:999px;border:0;
  font:800 1rem/1 var(--sans);letter-spacing:.005em;text-decoration:none;white-space:nowrap;
  transition:transform .16s var(--ease-out),box-shadow .25s var(--ease-out),background-color .2s ease}
.btn .ic{font-size:1.25em}
.btn-amber{background:var(--amber);color:var(--on-amber);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .45),0 12px 26px -10px rgb(240 160 48 / .7)}
.btn-ghost{background:transparent;color:var(--heading);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn-sm{height:40px;padding:0 16px;font-size:.92rem}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .btn-amber:hover{box-shadow:inset 0 1px 0 rgb(255 255 255 / .5),0 16px 34px -10px rgb(240 160 48 / .85)}
  .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--heading)}
}
.link-btn{border:0;background:none;padding:4px 0;color:var(--ink);font:700 .95rem/1.3 var(--sans);text-align:left;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;display:inline-flex;align-items:center;gap:6px}
.link-btn .ic{font-size:1.1em}

/* ---- Range sliders ------------------------------------------------------ */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0;touch-action:pan-y}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--ink) var(--p,0%),var(--line-strong) var(--p,0%))}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:var(--line-strong)}
input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--ink)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;
  background:var(--amber);border:3px solid var(--card);box-shadow:0 2px 8px rgb(26 37 96 / .35);transition:transform .16s var(--ease-out)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--amber);border:3px solid var(--card);box-shadow:0 2px 8px rgb(26 37 96 / .35)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.ctl-label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:800 .95rem/1.2 var(--sans);color:var(--heading)}
.ctl-label output,.dial-ctl output,.phyllo-ctl output,.epi-ctl output,.xp-ctl output{font:italic 400 1.15rem/1 var(--math);color:var(--ink)}

/* ---- Navigation --------------------------------------------------------- */
.nav{position:fixed;top:12px;left:12px;right:12px;z-index:40;pointer-events:none}
.nav-capsule{position:relative;pointer-events:auto;max-width:1180px;height:58px;margin:0 auto;display:flex;align-items:center;gap:4px;
  padding:0 8px 0 8px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:var(--lift),var(--glass-inset)}
.brand{display:inline-flex;align-items:center;gap:10px;padding:6px 12px 6px 4px;border-radius:999px;
  font:900 1.18rem/1 var(--sans);letter-spacing:-.01em;color:var(--heading);text-decoration:none}
.brand img{width:32px;height:32px;border-radius:9px;display:block}
.nav-links{display:flex;gap:2px;margin-left:auto}
.nav-links a{position:relative;padding:10px 13px;border-radius:999px;font:700 .95rem/1 var(--sans);color:var(--text);text-decoration:none;
  transition:background-color .2s ease,color .2s ease}
.nav-links a[aria-current="true"]{color:var(--heading)}
.nav-links a[aria-current="true"]::after{content:"";position:absolute;left:50%;bottom:3px;width:16px;height:2.5px;border-radius:2px;background:var(--amber);transform:translateX(-50%)}
@media (hover:hover) and (pointer:fine){.nav-links a:hover{background:var(--line);color:var(--heading)}}
.theme-btn,.menu-btn{flex:none;width:42px;height:42px;border-radius:999px;border:0;background:transparent;color:var(--heading);display:grid;place-items:center;font-size:21px;
  transition:background-color .2s ease,transform .16s var(--ease-out)}
.theme-btn:active,.menu-btn:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.theme-btn:hover,.menu-btn:hover{background:var(--line)}}
.theme-btn .i-sun,:root[data-theme="dark"] .theme-btn .i-moon{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:inline-block}
.nav-cta{margin-left:4px}
.menu-btn{display:none}
.menu-btn .i-close{display:none}
.nav.open .menu-btn .i-close{display:inline-block}
.nav.open .menu-btn .i-menu{display:none}

@media (max-width:980px){
  /* Nested inside the capsule's own backdrop-filter, the sheet cannot blur the
     page behind it, so it is near-opaque instead of glass. */
  .nav-links{position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;gap:2px;padding:10px;border-radius:24px;
    background:var(--card);border:1px solid var(--glass-edge);
    box-shadow:var(--lift-lg);opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;visibility:hidden;
    transition:opacity .18s ease,transform .22s var(--ease-out),visibility 0s linear .22s}
  .nav.open .nav-links{opacity:1;transform:none;visibility:visible;transition:opacity .18s ease,transform .22s var(--ease-out),visibility 0s}
  .nav-links a{padding:14px 16px;font-size:1.05rem}
  .nav-links a[aria-current="true"]::after{left:6px;top:50%;bottom:auto;width:3px;height:16px;transform:translateY(-50%)}
  .menu-btn{display:grid}
  .theme-btn{margin-left:auto}
}
@media (max-width:400px){.nav-cta{display:none}}

/* ---- Phone (a real capture in a slim device) ---------------------------- */
.phone{--w:260px;position:relative;width:var(--w);padding:calc(var(--w) * .033);border-radius:calc(var(--w) * .135);
  background:linear-gradient(150deg,#1E2750,#05091C 70%);
  box-shadow:inset 0 0 0 1px rgb(184 196 232 / .34),var(--lift-lg);transform:rotate(var(--tilt,0deg))}
.phone .scr{display:block;width:100%;height:auto;aspect-ratio:1179/2556;border-radius:calc(var(--w) * .105);object-fit:cover;background:var(--surface)}
.phone::after{content:"";position:absolute;left:50%;top:calc(var(--w) * .058);width:calc(var(--w) * .036);aspect-ratio:1;border-radius:50%;
  background:#05091C;box-shadow:0 0 0 1px rgb(184 196 232 / .3);transform:translateX(-50%)}
.phone picture{display:block}

/* ---- Figures ------------------------------------------------------------ */
.fig-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---- Hero --------------------------------------------------------------- */
.hero{position:relative;min-height:100dvh;padding:104px 0 36px;display:flex;align-items:center}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(12px,2.5vw,36px)}
.hero-copy{position:relative;z-index:3}
.hero .lead{margin-top:26px;max-width:31ch}
.cta-row{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.hero-fig{position:relative;height:clamp(600px,82vh,780px)}
.hero-phone{position:absolute;z-index:2;--w:clamp(196px,17.5vw,248px);left:0;top:0;will-change:transform}
.hero-wiz{position:absolute;z-index:1;left:0;top:0;width:120px;height:auto;pointer-events:none;transform:translate(-50%,-50%)}
/* Wiz fades in over the second half of the curve's draw; the labels wait for it. */
.js .hero-wiz{opacity:0;transition:opacity .95s linear}
.js .tier{opacity:0}
.tier{position:absolute;left:0;top:0;z-index:3;display:flex;flex-direction:column;gap:4px;pointer-events:none;white-space:nowrap}
.tier b{font:800 .78rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--heading);display:flex;align-items:center;gap:7px}
.tier b::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c)}
.tier .math{font-size:1.05rem;color:var(--caption)}
#tierEasy{--c:var(--sky)}#tierMedium{--c:var(--pink)}#tierHard{--c:var(--amber)}
:root[data-theme="dark"] .tier b{color:var(--c)}
:root[data-theme="dark"] .tier b::before{display:none}
.tier.on b{text-decoration:underline;text-decoration-color:var(--c);text-decoration-thickness:2px;text-underline-offset:5px}

.try{position:absolute;z-index:4;right:0;bottom:92px;width:min(330px,100%);padding:16px 16px 14px;border-radius:var(--r-sheet);
  background:var(--glass);border:1px solid var(--glass-edge);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:var(--lift),var(--glass-inset)}
.try-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:800 .72rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--caption)}
.try-k{font-weight:700;letter-spacing:.02em;text-transform:none;font-size:.86rem;color:var(--text)}
.try-k .math{font-size:1rem}
.try-row{display:flex;align-items:center;gap:10px;margin-top:12px}
.try-q{font:900 clamp(1.6rem,2.3vw,2rem)/1 var(--sans);letter-spacing:-.01em;color:var(--heading);white-space:nowrap}
.try-in{flex:1;min-width:0;width:0;height:54px;border-radius:var(--r-key);border:1.5px solid var(--line-strong);background:var(--card);color:var(--heading);
  font:900 1.65rem/1 var(--sans);text-align:center;padding:0 6px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}
.try-in:focus{border-color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 20%,transparent)}
.try-go{flex:none;width:54px;height:54px;border-radius:var(--r-key);border:0;background:var(--amber);color:var(--on-amber);font-size:26px;display:grid;place-items:center;
  transition:transform .16s var(--ease-out)}
.try-go:active{transform:scale(.94)}
.try-feedback{margin-top:10px;min-height:2.9em;font-size:.93rem;line-height:1.42;color:var(--text)}
.try-feedback .ok{color:var(--correct-text);font-weight:800}
.try-feedback .no{color:var(--wrong-text);font-weight:800}
.try-feedback .gz{font-style:italic;font-weight:700}
.try.flash-ok .try-in{border-color:var(--green);box-shadow:0 0 0 4px rgb(76 198 141 / .25)}
.try.flash-no .try-in{border-color:var(--red);box-shadow:0 0 0 4px rgb(232 86 74 / .22)}
.try.shake{animation:shake .34s var(--ease-out)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}55%{transform:translateX(5px)}80%{transform:translateX(-2px)}}
.hero-fig .caption{position:absolute;right:0;bottom:0;text-align:right;max-width:40ch;font-size:.95rem}

/* ---- Slide rule ---------------------------------------------------------- */
.rule-sec{padding:clamp(40px,6vw,88px) 0 clamp(56px,7vw,100px)}
.rule-lead{margin-top:10px;max-width:62ch;color:var(--text)}
.rule{position:relative;margin:30px auto 14px;max-width:1400px;height:230px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.rule.grabbing{cursor:grabbing}
.rule-canvas{display:block;width:100%;height:100%}
.rule-readout{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;color:var(--caption);font-size:.95rem}
.rule-readout .math{font-size:1.55rem;color:var(--heading)}
.rule-legend{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;list-style:none}
.rule-legend b{font-weight:900;color:var(--ink);margin-right:4px}

/* ---- Learn --------------------------------------------------------------- */
.learn,.games,.arena,.progress,.levels,.wiz,.pro,.privacy,.faq{position:relative;padding:clamp(72px,8.5vw,128px) 0}
.learn-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(28px,4.5vw,72px);align-items:start}
.dial-fig{position:relative;display:flex;flex-direction:column;gap:18px;padding-bottom:10px}
.dial-stage{position:relative}
.dial-stage .fig-canvas{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1}
.dial-phone{position:absolute;--w:clamp(112px,11vw,158px);right:-6%;bottom:1%;z-index:2}
.dial-ctl{display:grid;gap:8px;max-width:420px}
.dial-ctl label,.phyllo-ctl label,.epi-ctl label,.xp-ctl label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:800 .95rem/1.2 var(--sans);color:var(--heading)}
.dial-name{font:italic 400 1rem/1.4 var(--serif);color:var(--caption)}
.learn-copy{padding-top:clamp(0px,3vw,40px)}
.learn-copy .lead{margin-top:20px}

.trick{margin-top:30px}
.trick-tabs{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 12px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.trick-tabs::-webkit-scrollbar{display:none}
.trick-tab{flex:none;scroll-snap-align:start;height:40px;padding:0 15px;border-radius:999px;border:0;background:transparent;color:var(--text);
  box-shadow:inset 0 0 0 1.5px var(--line-strong);font:800 .92rem/1 var(--sans);white-space:nowrap;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease,transform .16s var(--ease-out)}
.trick-tab:active{transform:scale(.96)}
.trick-tab[aria-selected="true"]{background:var(--heading);color:var(--bg);box-shadow:none}
.trick-card{position:relative;padding:22px 22px 20px;border-radius:var(--r-card);background:var(--card);border:1px solid var(--line);box-shadow:var(--lift)}
.trick-title{font:900 1.3rem/1.2 var(--sans);color:var(--heading)}
.trick-idea{margin-top:6px;font-size:.98rem;line-height:1.5;color:var(--text)}
.trick-ask{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font:800 1rem/1.2 var(--sans);color:var(--heading)}
.trick-ask input{width:6ch;height:46px;border-radius:var(--r-key);border:1.5px solid var(--line-strong);background:var(--bg);color:var(--heading);
  font:900 1.3rem/1 var(--sans);text-align:center;outline:none;transition:border-color .2s ease,box-shadow .2s ease}
.trick-ask input:focus{border-color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 18%,transparent)}
.trick-ask .hint{font-weight:600;font-size:.88rem;color:var(--caption)}
.trick-label{margin-top:20px;display:flex;align-items:center;gap:8px;font:800 .72rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--caption)}
.trick-label .ic{font-size:1.4em;color:var(--ink)}
.trick-problem{margin-top:10px;font:900 1.9rem/1.1 var(--sans);letter-spacing:-.01em;color:var(--heading)}
.trick-steps{list-style:none;margin-top:12px;display:grid;gap:9px;counter-reset:s}
.trick-steps li{counter-increment:s;display:flex;gap:11px;align-items:baseline;font-size:1rem;line-height:1.45;color:var(--text)}
.trick-steps li::before{content:counter(s);flex:none;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;
  background:var(--amber-bg);color:var(--chat-user-text);font:900 .8rem/1 var(--sans);transform:translateY(-1px)}
.trick-answer{margin-top:16px;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;background:var(--correct-bg);color:var(--correct-text);font:900 1rem/1 var(--sans)}
.trick-answer .ic{font-size:1.2em}
.trick-foot{margin-top:14px;font-size:.9rem;line-height:1.45;color:var(--caption)}
.js .trick-steps li,.js .trick-answer{animation:step-in .42s var(--ease-out) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes step-in{from{opacity:0;transform:translateY(6px)}}
.js .trick-card.static .trick-steps li,.js .trick-card.static .trick-answer{animation:none}

/* ---- Brain Games ---------------------------------------------------------- */
.games-lead{margin-top:18px;max-width:44ch}
.games-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,4vw,60px);align-items:start}
.games-left .phyllo-fig{margin-top:clamp(8px,2vw,28px)}
@media (min-width:1081px){.game-stage{position:sticky;top:96px}}
.phyllo-fig{position:relative;display:flex;flex-direction:column;gap:18px}
.phyllo-fig .fig-canvas{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1}
.game-nodes{position:absolute;left:0;top:0;width:100%;aspect-ratio:1;pointer-events:none}
.game-node{position:absolute;left:50%;top:50%;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:6px;border:0;background:none;color:var(--heading);transform:translate(-50%,-50%);border-radius:18px}
.gn-dot{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-size:27px;color:var(--c);background:var(--card);
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c) 60%,transparent),var(--lift);transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out)}
.game-node[aria-selected="true"] .gn-dot{transform:scale(1.08);
  box-shadow:0 0 0 3px var(--c),0 0 0 10px color-mix(in srgb,var(--c) 20%,transparent),var(--lift)}
.game-node:active .gn-dot{transform:scale(.96)}
.gn-name{font:900 .92rem/1.1 var(--sans);white-space:nowrap;padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--bg) 70%,transparent)}
.gn-tag{display:inline-flex;align-items:center;gap:3px;font:800 .66rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--caption)}
.game-node.is-pro .gn-tag{color:var(--ink)}
.gn-tag .ic{font-size:1.2em}
.phyllo-ctl{display:grid;gap:8px;max-width:470px}

/* The Brain Games glass kit, as the app draws it */
.glass-kit{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;padding:22px 22px 24px;min-height:560px;
  background:linear-gradient(180deg,var(--gk-high),var(--gk-low));box-shadow:var(--lift-lg);color:var(--gk-ink)}
/* The colour field is soft gradients rather than a blur filter, which re-ran whenever anything in the
   panel repainted. The stops follow the original 70% fade blurred by 40px. */
.glass-kit::before{content:"";position:absolute;inset:-20%;z-index:-1;opacity:.55;
  background:
    radial-gradient(38% 30% at 30% 22%,color-mix(in srgb,var(--gk-orb-a) 69%,transparent),color-mix(in srgb,var(--gk-orb-a) 59%,transparent) 20%,color-mix(in srgb,var(--gk-orb-a) 37%,transparent) 40%,color-mix(in srgb,var(--gk-orb-a) 16%,transparent) 60%,color-mix(in srgb,var(--gk-orb-a) 3.5%,transparent) 80%,transparent),
    radial-gradient(34% 28% at 78% 36%,color-mix(in srgb,var(--gk-orb-b) 69%,transparent),color-mix(in srgb,var(--gk-orb-b) 59%,transparent) 20%,color-mix(in srgb,var(--gk-orb-b) 37%,transparent) 40%,color-mix(in srgb,var(--gk-orb-b) 16%,transparent) 60%,color-mix(in srgb,var(--gk-orb-b) 3.5%,transparent) 80%,transparent),
    radial-gradient(32% 26% at 26% 74%,color-mix(in srgb,var(--gk-orb-c) 69%,transparent),color-mix(in srgb,var(--gk-orb-c) 59%,transparent) 20%,color-mix(in srgb,var(--gk-orb-c) 37%,transparent) 40%,color-mix(in srgb,var(--gk-orb-c) 16%,transparent) 60%,color-mix(in srgb,var(--gk-orb-c) 3.5%,transparent) 80%,transparent),
    radial-gradient(36% 28% at 70% 88%,color-mix(in srgb,var(--gk-orb-d) 69%,transparent),color-mix(in srgb,var(--gk-orb-d) 59%,transparent) 20%,color-mix(in srgb,var(--gk-orb-d) 37%,transparent) 40%,color-mix(in srgb,var(--gk-orb-d) 16%,transparent) 60%,color-mix(in srgb,var(--gk-orb-d) 3.5%,transparent) 80%,transparent)}
.gp{display:flex;flex-direction:column;gap:14px}
.gk-meta{display:flex;justify-content:space-between;font:800 .9rem/1 var(--sans);color:color-mix(in srgb,var(--gk-ink) 62%,transparent)}
.gk-meta b{font-weight:900}
.gk-pill{align-self:center;display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;
  background:linear-gradient(135deg,var(--gk-fill-h),var(--gk-fill-l));color:#fff;font:900 .86rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),0 10px 24px -10px var(--gk-shadow)}
.gk-pill .ic{font-size:1.4em}
.gk-sub{text-align:center;font:800 .92rem/1.4 var(--sans);color:color-mix(in srgb,var(--gk-ink) 62%,transparent)}
.gk-panel{position:relative;border-radius:24px;padding:18px;background:linear-gradient(160deg,var(--gk-panel-h),var(--gk-panel-l));
  box-shadow:inset 1px 1px 0 var(--gk-edge-h),inset -1px -1px 0 var(--gk-edge-l),0 18px 40px -22px var(--gk-shadow);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.gk-cap{margin-top:14px;font:900 .76rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gk-accent)}
.gk-bar{margin-top:10px;height:6px;border-radius:6px;background:var(--gk-slot-l);overflow:hidden}
.gk-bar span{display:block;height:100%;width:100%;border-radius:6px;background:linear-gradient(90deg,var(--gk-fill-l),var(--gk-fill-h));transform-origin:left}
.gk-entry{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px}
.gk-entry label{grid-column:1/-1;font:900 .74rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gk-good)}
.gk-entry input{min-width:0;height:56px;border-radius:18px;border:0;padding:0 14px;text-align:center;font:900 1.5rem/1 var(--sans);color:var(--gk-ink);
  background:linear-gradient(160deg,var(--gk-slot-h),var(--gk-slot-l));box-shadow:inset 0 0 0 1px var(--gk-slot-edge);outline:none;transition:box-shadow .2s ease}
.gk-entry input::placeholder{font-size:.9rem;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--gk-ink) 50%,transparent)}
.gk-entry input:focus{box-shadow:inset 0 0 0 2px var(--gk-accent)}
.gk-entry input:disabled{opacity:.7}
.gk-btn{height:56px;padding:0 20px;border:0;border-radius:999px;display:inline-flex;white-space:nowrap;align-items:center;gap:8px;color:#fff;font:900 1rem/1 var(--sans);
  background:linear-gradient(135deg,var(--gk-fill-h),var(--gk-fill-l));box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),0 12px 24px -12px var(--gk-shadow);
  transition:transform .16s var(--ease-out),opacity .2s ease}
.gk-btn:active{transform:scale(.97)}
.gk-btn .ic{font-size:1.3em}
.gk-feedback{min-height:1.5em;text-align:center;font:800 .95rem/1.4 var(--sans);color:var(--gk-idle)}
.gk-feedback.good{color:var(--gk-good)}
.gk-feedback.bad{color:var(--gk-bad)}

/* Balance */
.gk-panel.balance{height:236px;padding:0}
.beam-svg{position:absolute;left:5%;top:14px;width:90%;height:auto;overflow:visible}
.beam{transform-box:view-box;transform-origin:160px 42px;transition:none}
.beam-bar{stroke:var(--gk-fill-h);stroke-width:12;stroke-linecap:round}
.beam-cord{stroke:color-mix(in srgb,var(--gk-ink) 30%,transparent);stroke-width:1.5}
.beam-post{fill:color-mix(in srgb,var(--gk-ink) 16%,transparent)}
.beam-pivot{fill:var(--gk-fill-l)}
.beam-pin{fill:#fff}
.pan{position:absolute;display:flex;align-items:center;justify-content:center;gap:8px;min-width:118px;height:62px;padding:0 12px;border-radius:18px;
  background:linear-gradient(160deg,var(--gk-slot-h),var(--gk-slot-l));box-shadow:inset 0 0 0 1px var(--gk-slot-edge);top:0;left:0;will-change:transform}
.tile{min-width:44px;height:44px;padding:0 8px;border-radius:12px;display:grid;place-items:center;font:900 1.3rem/1 var(--sans);color:var(--gk-ink);
  background:linear-gradient(160deg,var(--gk-tile-h),var(--gk-tile-l));box-shadow:inset 1px 1px 0 var(--gk-edge-h),0 6px 14px -8px var(--gk-shadow)}
.tile.q{color:color-mix(in srgb,var(--gk-ink) 55%,transparent);background:linear-gradient(160deg,var(--gk-slot-h),var(--gk-slot-l))}
.tile.op{min-width:38px;width:38px;height:38px;border-radius:50%;color:#fff;background:linear-gradient(135deg,var(--gk-fill-h),var(--gk-fill-l))}
.gk-panel.balance.level .beam-bar{stroke:var(--gk-good)}

/* Number Memory */
.gk-panel.memory{padding:24px 20px 20px}
.mem-digits{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;min-height:64px}
.mem-digits .tile{width:52px;height:60px;font-size:1.6rem}
.js .mem-digits .tile{animation:tile-in .32s var(--ease-out) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes tile-in{from{opacity:0;transform:translateY(8px) scale(.96)}}
.mem-digits.hidden .tile{color:transparent;background:linear-gradient(160deg,var(--gk-slot-h),var(--gk-slot-l))}

/* Pro glimpses */
.gp-pro{gap:16px}
.glimpse{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 18px 40px -20px var(--gk-shadow);cursor:not-allowed}
.glimpse img{display:block;width:100%;height:auto;filter:blur(1.2px) saturate(.92);transform:scale(1.01);transition:filter .3s ease}
.glimpse::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,color-mix(in srgb,var(--gk-low) 55%,transparent))}
.lock-plate{position:absolute;right:14px;bottom:14px;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;
  background:rgb(22 32 90 / .78);color:#fff;font:900 .8rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 20px -10px rgb(0 0 0 / .5)}
.glimpse.nudge{animation:nudge .36s var(--ease-out)}
@keyframes nudge{0%,100%{transform:translateX(0)}30%{transform:translateX(-5px)}65%{transform:translateX(4px)}}
.tease{font:800 1.02rem/1.5 var(--sans);color:var(--gk-ink);text-align:center;text-wrap:balance}
.tease em{font:italic 500 1.08em/1.3 var(--serif);color:var(--gk-accent)}
.pro-note{text-align:center;font:700 .9rem/1.4 var(--sans);color:color-mix(in srgb,var(--gk-ink) 62%,transparent)}

/* ---- Arena ----------------------------------------------------------------- */
.arena-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.arena-head .lead{margin-top:18px;max-width:46ch}
.arena-stage{margin-top:clamp(28px,4vw,56px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,64px);align-items:center}
.pursuit-fig{position:relative;display:flex;flex-direction:column;gap:14px;max-width:640px;width:100%;justify-self:center}
.pursuit-fig .fig-canvas{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1}
.racers{position:absolute;left:0;top:0;width:100%;aspect-ratio:1;pointer-events:none}
.racer{position:absolute;display:flex;flex-direction:column;align-items:center;gap:3px;transform:translate(-50%,-50%);text-align:center}
.racer .av{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:900 1.2rem/1 var(--sans);color:var(--c);
  background:var(--card);box-shadow:0 0 0 2.5px var(--c),0 0 0 9px color-mix(in srgb,var(--c) 16%,transparent),var(--lift)}
.racer b{font:900 .95rem/1 var(--sans);color:var(--heading);margin-top:6px}
.racer small{font:800 .66rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--caption)}
.bubble{position:absolute;z-index:3;max-width:170px;padding:8px 12px;border-radius:14px 14px 14px 4px;background:var(--card);color:var(--heading);
  font:italic 500 .98rem/1.3 var(--serif);box-shadow:var(--lift);pointer-events:none;transform-origin:0 100%;
  animation:bubble 2.6s var(--ease-out) both}
.bubble b{display:block;font:800 .62rem/1 var(--sans);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--c);margin-bottom:4px}
@keyframes bubble{0%{opacity:0;transform:translateY(6px) scale(.94)}12%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-4px)}}
.replay{align-self:flex-start}
.arena-side{display:flex;flex-direction:column;align-items:center;gap:24px}
.arena-phone{--w:clamp(200px,20vw,256px)}
.phone-lock{position:absolute;left:calc(var(--w) * .07);right:calc(var(--w) * .07);bottom:calc(var(--w) * .1);display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:16px;background:rgb(13 21 53 / .82);color:#fff;font:700 .84rem/1.35 var(--sans);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 30px -10px rgb(0 0 0 / .6)}
.phone-lock .ic{flex:none;font-size:1.5em;color:var(--gold)}
.arena-note{max-width:34ch;text-align:center;font-size:.98rem;color:var(--text)}

/* ---- Progress -------------------------------------------------------------- */
.progress-head .lead{margin-top:18px;max-width:48ch}
.progress-head .h2{max-width:18ch}
.progress-stage{position:relative;margin-top:clamp(24px,3vw,44px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,48px);align-items:center}
.brach-fig{position:relative;display:flex;flex-direction:column;gap:14px}
.brach-fig .fig-canvas{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9;touch-action:none}
.brach-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.brach-readout{font-size:.98rem;color:var(--text)}
.brach-readout .math{font-size:1.1rem}
.chart-phone{--w:clamp(180px,17vw,236px)}

/* ---- Levels ---------------------------------------------------------------- */
.levels-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.levels-copy .lead{margin-top:18px}
.xp-ctl{margin-top:30px;display:grid;gap:8px;max-width:440px}
.xp-level{margin-top:8px;font:800 1.05rem/1.3 var(--sans);color:var(--text)}
.xp-level b{font:900 2.2rem/1 var(--sans);letter-spacing:-.02em;color:var(--heading);margin-right:6px}
.xp-next{font-size:.95rem;color:var(--caption)}
.xp-pro{display:flex;align-items:center;gap:8px;margin-top:6px;font:700 .92rem/1.4 var(--sans);color:var(--ink)}
.levels-streak{margin-top:28px;max-width:44ch;color:var(--text);font-size:1rem}
.spiral-fig{position:relative;display:flex;flex-direction:column;gap:14px}
.spiral-fig .fig-canvas{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1}
.badges{position:absolute;left:0;top:0;width:100%;aspect-ratio:1;list-style:none;pointer-events:none}
.badge{position:absolute;pointer-events:auto;transform:translate(-50%,-50%)}
.badge button{width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;font-size:19px;color:var(--c,var(--amber));
  background:var(--card);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c,var(--amber)) 55%,transparent),var(--lift);transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.badge button[aria-pressed="true"]{transform:scale(1.12);box-shadow:0 0 0 3px var(--c,var(--amber)),0 0 0 9px color-mix(in srgb,var(--c,var(--amber)) 18%,transparent),var(--lift)}
.badge button:active{transform:scale(.94)}
.badge-say{min-height:3.7em;max-width:48ch}
.badge-say b{display:block;font:900 1.15rem/1.2 var(--sans);color:var(--heading)}
.badge-say span{display:block;margin-top:4px;font:italic 500 1.04rem/1.4 var(--serif);color:var(--ink)}

/* ---- Ask Wiz ----------------------------------------------------------------- */
.wiz-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.epi-fig{position:relative;display:flex;flex-direction:column;gap:16px}
.epi-fig .fig-canvas{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1/.92}
.epi-ctl{display:grid;gap:8px;max-width:420px}
.wiz-copy .lead{margin-top:18px}
.chat{margin-top:28px;border-radius:var(--r-sheet);background:var(--chat-surface);border:1px solid var(--chat-border);box-shadow:var(--lift-lg);overflow:hidden;color:var(--chat-text)}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--chat-border)}
.chat-head img{width:44px;height:44px}
.chat-title{font:900 1.2rem/1.1 var(--sans);color:var(--chat-text)}
.chat-sub{font-size:.88rem;color:var(--chat-muted)}
.chat-log{height:330px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth;overscroll-behavior:contain;outline:none}
.msg{max-width:88%;padding:12px 14px;border-radius:16px;font-size:.97rem;line-height:1.5;animation:msg-in .3s var(--ease-out) both;transform-origin:0 100%}
@keyframes msg-in{from{opacity:0;transform:translateY(6px) scale(.98)}}
.msg-wiz{align-self:flex-start;background:var(--chat-bubble);border:1px solid var(--chat-border);border-bottom-left-radius:6px}
.msg-me{align-self:flex-end;background:var(--chat-user);color:var(--chat-user-text);font-weight:800;border-bottom-right-radius:6px;transform-origin:100% 100%}
.msg p+p{margin-top:8px}
.steps{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--chat-step);border:1px solid color-mix(in srgb,var(--amber) 35%,transparent)}
.steps-h{display:flex;align-items:center;gap:6px;font:900 .7rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--chat-user-text)}
.steps ol{list-style:none;margin-top:10px;display:grid;gap:7px;counter-reset:w}
.steps li{counter-increment:w;display:flex;gap:10px;align-items:baseline;font-family:var(--sans);font-weight:600}
.steps li::before{content:counter(w);flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--amber-bg);color:var(--chat-user-text);font:900 .74rem/1 var(--sans)}
.learn-link{margin-top:12px;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--brand-mid);color:#fff;
  font:800 .9rem/1 var(--sans);text-decoration:none;transition:transform .16s var(--ease-out)}
.learn-link:active{transform:scale(.97)}
.learn-link .ic{color:var(--gold);font-size:1.2em}
.chat-chips{display:flex;gap:8px;overflow-x:auto;padding:0 16px 12px;scrollbar-width:none}
.chat-chips::-webkit-scrollbar{display:none}
.chat-chips button{flex:none;height:36px;padding:0 14px;border-radius:999px;border:1.5px solid var(--chat-border);background:transparent;color:var(--chat-text);
  font:800 .86rem/1 var(--sans);white-space:nowrap;transition:transform .16s var(--ease-out),background-color .2s ease}
.chat-chips button:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.chat-chips button:hover{background:var(--chat-bubble)}}
.chat-form{display:flex;gap:10px;padding:12px 14px 14px;border-top:1px solid var(--chat-border)}
.chat-form input{flex:1;min-width:0;width:0;height:50px;border-radius:999px;border:1.5px solid var(--chat-border);background:var(--chat-bubble);color:var(--chat-text);padding:0 18px;outline:none;font-weight:600}
.chat-form input::placeholder{color:var(--chat-muted)}
.chat-form input:focus{border-color:var(--amber)}
.chat-form button{flex:none;width:50px;height:50px;border-radius:50%;border:0;background:var(--amber);color:var(--on-amber);font-size:24px;display:grid;place-items:center;transition:transform .16s var(--ease-out)}
.chat-form button:active{transform:scale(.94)}
.chat-note{margin-top:12px;font-size:.9rem;line-height:1.45;color:var(--caption);max-width:52ch}

/* ---- Pro: a centred composition, the two plans either side of the sets ------ */
.pro-head{display:flex;flex-direction:column;align-items:center;text-align:center}
.pro-title{font-size:clamp(2.6rem,5.2vw,4.6rem)}
.pro-title .math.sub{font-style:normal;font-weight:400;color:var(--ink);margin:0 .08em}
.pro-head .lead{margin-top:16px;max-width:46ch}
.pro-stage{margin-top:clamp(20px,3vw,36px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center}
.sets{position:relative;width:100%;justify-self:center}
.sets-svg{display:block;width:100%;height:auto;overflow:visible;touch-action:none}
.set-pro{fill:color-mix(in srgb,var(--amber) 7%,transparent);stroke:var(--amber);stroke-width:2.5}
.set-free{fill:color-mix(in srgb,var(--sky) 9%,transparent);stroke:var(--sky);stroke-width:2.5}
.ring text{font:800 21px var(--sans);fill:var(--heading);letter-spacing:.01em}
.ring-pro text{fill:var(--ink)}
.set-label{font:italic 500 64px var(--serif);text-anchor:middle;fill:var(--heading)}
.set-label-pro{font-size:44px;fill:var(--ink);text-anchor:start}
.set-count{font:800 19px var(--sans);letter-spacing:.14em;text-transform:uppercase;text-anchor:middle;fill:var(--caption)}
.ring{transform-box:view-box;transform-origin:450px 450px}
.js .sets .set-pro,.js .sets .set-free{stroke-dasharray:2800;stroke-dashoffset:2800;transition:stroke-dashoffset 1.8s var(--ease-out)}
.js .sets .set-free{transition-delay:.25s}
.js .sets.in .set-pro,.js .sets.in .set-free{stroke-dashoffset:0}
.js .sets .ring text{opacity:0;transition:opacity .6s ease}
.js .sets.in .ring text{opacity:1}
.plan{max-width:250px}
.plan-l{justify-self:end;text-align:right;padding-right:18px;border-right:3px solid var(--sky)}
.plan-r{justify-self:start;padding-left:18px;border-left:3px solid var(--amber)}
.plan h3{font:900 1.45rem/1.1 var(--sans);color:var(--heading)}
.plan p{margin-top:8px;font-size:.98rem;line-height:1.5;color:var(--text)}
.pro-foot{margin-top:clamp(20px,3vw,36px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.plan-note{max-width:64ch;font-size:.93rem;line-height:1.55;color:var(--caption)}
.sets-list{display:none;text-align:left}

/* ---- Privacy ------------------------------------------------------------------ */
.privacy-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.privacy-copy .lead{margin-top:18px}
.privacy-cross{margin-top:18px;max-width:46ch;color:var(--text)}
.privacy-links{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 22px;font-weight:800}
.jordan-fig{position:relative;display:flex;flex-direction:column;gap:14px}
.jordan-fig .fig-canvas{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1.18;touch-action:pan-y}
.jordan-readout{font-size:.98rem;color:var(--text);min-height:1.6em}
.jordan-readout b{color:var(--heading)}

/* ---- FAQ ------------------------------------------------------------------------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.faq-side{position:sticky;top:110px}
.faq-side .lead{margin-top:16px}
.qa-list{display:grid}
.qa{border-bottom:1.5px solid var(--line)}
.qa:first-child{border-top:1.5px solid var(--line)}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 2px;cursor:pointer;
  font:900 1.14rem/1.3 var(--sans);color:var(--heading);border-radius:8px}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ic{flex:none;font-size:1.4rem;color:var(--ink);transition:transform .25s var(--ease-out)}
.qa[open] summary .ic{transform:rotate(45deg)}
.qa .ans{padding:0 2px 22px;max-width:62ch;color:var(--text)}
.qa .ans p+p{margin-top:10px}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .qa::details-content{height:0;overflow:clip;transition:height .3s var(--ease-out),content-visibility .3s allow-discrete}
  .qa[open]::details-content{height:auto}
}

/* ---- Close and footer --------------------------------------------------------------- */
.close{padding:clamp(80px,9vw,140px) 0 clamp(90px,10vw,150px)}
.close-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.close-wiz{width:clamp(120px,14vw,170px);height:auto;margin-bottom:10px}
.close .lead{margin-top:14px}
.close .btn{margin-top:28px}
.foot{padding:56px 0 calc(28px + env(safe-area-inset-bottom));border-top:1.5px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.foot-brand p{margin-top:14px;max-width:34ch;font-size:.95rem;color:var(--text)}
.foot-col h2{font:900 .78rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--caption);margin-bottom:16px}
.foot-col ul{list-style:none;display:grid;gap:10px}
.foot-col a{color:var(--heading);text-decoration:none;font-weight:700;font-size:.96rem;display:inline-flex;align-items:center;gap:4px}
@media (hover:hover) and (pointer:fine){.foot-col a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}}
.foot-small{margin-top:14px;font-size:.9rem;line-height:1.55;color:var(--caption)}
.foot-bottom{margin-top:44px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;font-size:.86rem;color:var(--caption)}
.qed{margin-left:auto;font:400 1.5rem/1 var(--math);color:var(--heading)}

.mbar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:35;display:none;align-items:center;gap:12px;padding:9px 9px 9px 12px;
  border-radius:999px;background:var(--glass);border:1px solid var(--glass-edge);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:var(--lift-lg);transform:translateY(140%);transition:transform .4s var(--ease-drawer)}
.mbar img{width:36px;height:36px;border-radius:10px}
.mbar p{display:flex;flex-direction:column;line-height:1.2;margin-right:auto}
.mbar b{font:900 1rem/1.2 var(--sans);color:var(--heading)}
.mbar span{font-size:.8rem;color:var(--caption)}
.mbar.show{transform:none}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:60;max-width:min(420px,calc(100vw - 32px));padding:12px 18px;border-radius:16px;
  background:var(--heading);color:var(--bg);font:700 .95rem/1.4 var(--sans);box-shadow:var(--lift-lg);opacity:0;pointer-events:none;
  transform:translate(-50%,10px);transition:opacity .2s ease,transform .3s var(--ease-out)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---- Reveal on scroll (only when JavaScript runs) ------------------------------------ */
/* `translate`, not `transform`, so a revealed phone keeps its tilt. */
.js [data-reveal]{opacity:0;translate:0 16px;transition:opacity .7s var(--ease-out),translate .8s var(--ease-out);transition-delay:calc(var(--d,0) * 80ms)}
.js [data-reveal].in{opacity:1;translate:none}

/* ---- Responsive -------------------------------------------------------------------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:8px}
  .hero{padding-top:100px;min-height:auto}
  .hero-copy{max-width:640px}
  .hero-fig{height:clamp(520px,92vw,700px)}
  .learn-grid,.games-grid,.levels-grid,.wiz-grid,.privacy-grid{grid-template-columns:minmax(0,1fr)}
  .pro-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sets{grid-column:1/-1;grid-row:1;max-width:560px}
  .plan-l,.plan-r{grid-row:2}
  .learn-copy{order:-1;padding-top:0}
  .dial-fig,.phyllo-fig,.spiral-fig,.epi-fig,.jordan-fig{max-width:640px;width:100%;justify-self:center}
  .game-stage{max-width:520px;width:100%;justify-self:center}
  .arena-stage{grid-template-columns:minmax(0,1fr)}
  .progress-stage{grid-template-columns:minmax(0,1fr)}
  .chart-phone{justify-self:center}
  .faq-grid{grid-template-columns:minmax(0,1fr)}
  .faq-side{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:760px){
  body{font-size:1rem}
  .hero{padding-top:92px}
  .hero-fig{height:auto;display:flex;flex-direction:column;gap:14px}
  .hero-fig .fig-canvas{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1/1.08}
  .try{position:relative;right:auto;bottom:auto;width:100%}
  .hero-fig .caption{position:static;text-align:left}
  .tier b{font-size:.68rem;letter-spacing:.16em}
  .tier .math{font-size:.9rem}
  .rule{height:158px}
  .rule-legend{position:static!important;width:auto;height:auto;margin:18px 0 0;overflow:visible;clip:auto;white-space:normal;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;font-size:.92rem;line-height:1.35;color:var(--text)}
  .dial-phone{--w:118px;right:-2%;top:52%}
  .gn-dot{width:48px;height:48px;font-size:22px}
  .gn-name{font-size:.8rem}
  .glass-kit{padding:18px 14px 20px;min-height:0;border-radius:24px}
  .gk-panel.balance{height:210px}
  .pan{min-width:96px;height:54px;gap:6px}
  .tile{min-width:38px;height:38px;font-size:1.1rem}
  .tile.op{min-width:32px;width:32px;height:32px}
  .arena-phone{--w:220px}
  .racer .av{width:40px;height:40px;font-size:1rem}
  .racer small{display:none}
  .sets{display:none}
  .sets-list{display:grid;gap:14px}
  .pro-stage{grid-template-columns:minmax(0,1fr);gap:18px}
  .plan-l,.plan-r{grid-row:auto;justify-self:stretch;max-width:none;text-align:left;padding:0 0 0 16px;border-right:0;border-left:3px solid var(--sky)}
  .plan-r{border-left-color:var(--amber)}
  .pro-head,.pro-foot{align-items:flex-start;text-align:left}
  .set-line{font-size:1.02rem;line-height:1.6;color:var(--heading);font-weight:700}
  .set-line .math{font-size:1.2rem;color:var(--ink)}
  .set-line-pro{padding-top:14px;border-top:1.5px solid var(--line)}
  .badge button{width:32px;height:32px;font-size:15px}
  .chat-log{height:300px}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .mbar{display:flex}
  .qed{margin-left:0}
}

/* ---- Preferences -------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;translate:none}
}
@media (prefers-reduced-transparency:reduce){
  .nav-capsule,.nav-links,.try,.mbar,.lock-plate,.phone-lock{background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root{--line:rgb(46 59 130 / .5);--line-strong:rgb(46 59 130 / .8);--caption:var(--text)}
  :root[data-theme="dark"]{--line:rgb(184 196 232 / .5);--line-strong:rgb(184 196 232 / .8);--caption:var(--text)}
  .nav-capsule,.try,.chat{border-width:2px}
}
@media (forced-colors:active){
  .ic{background-color:CanvasText}
  .btn,.try-go,.gk-btn{border:2px solid ButtonText}
}
@media print{
  .nav,.mbar,.toast,.fig-canvas,.try,.chat-form{display:none!important}
  body::before,body::after{display:none}
}