/* Working: landing page. An AI product page: dark ground, real product, one spectrum of light. One type family. */
@font-face{font-family:Geist;src:url(../fonts/Geist-Variable.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Geist;src:url(../fonts/Geist-Italic-Variable.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(../fonts/GeistMono-Variable.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(../fonts/InstrumentSerif-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
 /* night: the product's own ground */
 --night:#070708;--night-2:#111114;--night-3:#18181c;--night-rule:rgba(255,255,255,.09);--night-ink:#f3f2ef;--night-soft:#a19fa8;--night-faint:#6d6b74;
 /* day: light sections are true white, so the spectrum fades into the ground with no grey seam */
 --paper:#ffffff;--paper-2:#f3f3f1;--rule:#e7e6e2;--ink:#0e0e10;--ink-soft:#5c5a62;--ink-faint:#8c8a92;
 /* the one colour: a full spectrum of light */
 --s-pink:#ff8fc8;--s-amber:#ffc46b;--s-lime:#c8f07a;--s-mint:#7ef0c8;--s-sky:#7cc8ff;--s-violet:#b49cff;
 --spectrum:linear-gradient(90deg,var(--s-pink),var(--s-amber) 20%,var(--s-lime) 38%,var(--s-mint) 55%,var(--s-sky) 75%,var(--s-violet));
 --sans:Geist,system-ui,sans-serif;--mono:'Geist Mono',ui-monospace,monospace;--serif:var(--sans);
 --gutter:clamp(20px,4vw,64px);--max:1440px;--measure:58ch;--section:clamp(104px,12vw,192px);--component-space:clamp(48px,6vw,88px);
 --ease:cubic-bezier(.23,1,.32,1);--r:16px;--r-lg:24px;--r-xl:40px;
 --e1:0 1px 2px rgba(10,10,12,.06),0 3px 8px rgba(10,10,12,.05);
 --e2:0 24px 50px -24px rgba(10,10,12,.35),0 8px 18px -10px rgba(10,10,12,.2);
 --e3:0 50px 100px -40px rgba(0,0,0,.7),0 20px 40px -20px rgba(0,0,0,.5);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--night)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--night);color:var(--night-ink);font:400 17px/1.6 var(--sans);letter-spacing:-.006em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
::selection{background:var(--s-sky);color:var(--night)}
img,video,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
button{font:inherit;color:inherit}
h1,h2,h3,p,ol,ul,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--s-sky);outline-offset:3px;border-radius:8px}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--night-ink);color:var(--night);padding:10px 16px;border-radius:999px;text-decoration:none}
.skip:focus{top:12px}
.grain{position:fixed;inset:-50%;z-index:150;pointer-events:none;opacity:.04;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{width:min(var(--max),100% - var(--gutter)*2);margin-inline:auto}
section{position:relative}
.day{background:var(--paper);color:var(--ink)}
.day ::selection{background:var(--ink);color:var(--paper)}
.day :focus-visible{outline-color:var(--ink)}

/* type */
.display{font-weight:460;font-size:clamp(2.6rem,5.4vw,5.2rem);line-height:1.08;letter-spacing:-.032em;text-wrap:balance}
.soft{color:var(--night-faint)}
.day .soft{color:var(--ink-faint)}
.lede{font-size:clamp(1.06rem,1.3vw,1.22rem);line-height:1.6;color:var(--night-soft);max-width:var(--measure);text-wrap:pretty}
.day .lede{color:var(--ink-soft)}
.lede strong{color:var(--night-ink);font-weight:550}
.day .lede strong{color:var(--ink)}
.center{text-align:center;margin-inline:auto}

/* buttons: one primary label everywhere, "Start free" */
.btn{--bg:var(--night-ink);--fg:var(--night);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;background:var(--bg);color:var(--fg);font-weight:560;font-size:15px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;transition:transform .14s var(--ease),background-color .18s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.08),0 10px 30px -8px rgba(124,200,255,.45)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn .arrow{width:16px;height:16px;transition:transform .18s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
.btn--ghost{--bg:rgba(255,255,255,.06);--fg:var(--night-ink);box-shadow:inset 0 0 0 1px var(--night-rule)}
.btn--ghost:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.day .btn{--bg:var(--ink);--fg:var(--paper)}
.day .btn:hover{background:#26262b;box-shadow:var(--e2)}
.day .btn--ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.day .btn--ghost:hover{background:var(--paper-2)}

/* ---------- top bar ---------- */
.topbar{position:fixed;inset:0 0 auto 0;z-index:60;height:72px;display:grid;grid-template-columns:1fr auto;align-items:center;padding:0 var(--gutter);transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.topbar.scrolled{background:rgba(7,7,8,.62);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 0 var(--night-rule)}
.wordmark{display:inline-flex;align-items:center;gap:10px;font-weight:640;font-size:20px;letter-spacing:-.045em;text-decoration:none;color:inherit;justify-self:start}
.wordmark svg{width:26px;height:26px}
.topbar .wordmark{color:var(--night-ink)}
.account{justify-self:end;display:flex;align-items:center;gap:6px;padding:5px;border-radius:999px;background:rgba(14,14,16,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--night-rule)}
.account a.login{padding:0 14px;height:38px;display:inline-flex;align-items:center;font-size:14.5px;color:var(--night-soft);text-decoration:none;border-radius:999px;transition:color .15s var(--ease)}
.account a.login:hover{color:var(--night-ink)}
.account .btn{height:38px;padding:0 16px;font-size:14px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;display:grid;place-items:center;padding:120px 0 80px}
.hero-sky{position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse 60% 50% at 50% 70%,rgba(124,200,255,.09),transparent 70%),var(--night)}
.hero-aurora{position:absolute;left:-10%;right:-10%;bottom:-40%;height:70%;z-index:-1;background:conic-gradient(from 200deg at 50% 50%,var(--s-pink),var(--s-amber),var(--s-lime),var(--s-mint),var(--s-sky),var(--s-violet),var(--s-pink));filter:blur(110px) saturate(1.05);opacity:.22;border-radius:50%;-webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 60% 60% at 50% 40%,#000 30%,transparent 75%)}
.hero-copy{position:relative;z-index:5;text-align:center;display:grid;justify-items:center;padding-inline:var(--gutter);margin-top:-14vh}
.pill{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--night-rule);font-size:13.5px;color:var(--night-soft);text-decoration:none;margin-bottom:20px;transition:background-color .2s var(--ease),color .2s var(--ease)}
.pill:hover{background:rgba(255,255,255,.09);color:var(--night-ink)}
.pill b{font-weight:560;color:var(--night);background:var(--spectrum);padding:3px 9px;border-radius:999px;font-size:12px}
.hero h1{font-weight:560;font-size:clamp(3.1rem,7.6vw,7.4rem);line-height:.96;letter-spacing:-.055em;text-wrap:balance}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .line>span{display:inline-block}
/* The word that changes: same face as the line, filled with light that sweeps left to right. */
.cycle{position:relative;display:inline-block;vertical-align:baseline;text-align:left}
.cycle .learn-word{display:inline-block;white-space:nowrap;font-style:normal;padding-right:.04em;
 background:linear-gradient(90deg,#ff8fc8,#ffc46b,#c8f07a,#7ef0c8,#7cc8ff,#b49cff,#ff8fc8);background-size:200% 100%;
 -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-family:inherit;font-weight:inherit;animation:sweep 3s ease-in-out infinite alternate}
@keyframes sweep{from{background-position:100% 50%}to{background-position:0% 50%}}
.hero .lede{margin-top:18px;max-width:40ch;text-align:center;font-size:clamp(1.08rem,1.4vw,1.26rem)}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.stage{position:absolute;inset:0;z-index:1;perspective:1400px;perspective-origin:50% 45%;pointer-events:none}
.stage-inner{position:absolute;inset:0;transform-style:preserve-3d}
.hero-orb{position:absolute;left:50%;top:var(--orb-top,calc(69% + 49px));width:min(64vw,820px);aspect-ratio:1;translate:-50% 0;z-index:2}
.hero-orb .tutor-orb{width:100%;height:100%}
.tile{position:absolute;width:var(--w,300px);transform-style:preserve-3d;will-change:transform}
.tile img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
/* Hero product fragments: the app's own surfaces (app.css tokens), scaled down, each carrying the mark. */
.pf{--s1:#191918;--s2:#1f1f1e;--s3:#272725;--s4:#30302e;--l1:rgba(255,255,255,.07);--l2:rgba(255,255,255,.11);--l3:rgba(255,255,255,.17);--t1:#ececea;--t2:#b9b9b4;--t3:#8b8b85;--t4:#62625d;--ok:#86dca0;position:relative;border-radius:18px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--l2),inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(0,0,0,.55),0 34px 70px -24px rgba(0,0,0,.85);color:var(--t1);font:400 12px/1.5 var(--sans);letter-spacing:-.005em;text-align:left;overflow:hidden}
.pf-bar{display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-bottom:1px solid var(--l1);background:#151514;font-size:11px;font-weight:500;color:var(--t2);white-space:nowrap}
.pf-mark{width:13px;height:13px;flex:none;color:var(--t1)}
.pf-bar em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:450;color:var(--t4)}
.pf-body{padding:13px}
.pf p{margin:0}
.pf-user{width:fit-content;max-width:88%;margin:0 0 10px auto!important;padding:6px 10px;border-radius:12px 12px 4px 12px;background:var(--s3);color:var(--t1);font-size:11.5px}
.pf-ai{font-size:11.5px;color:var(--t2)}.pf-ai b{color:var(--t1);font-weight:550}
.pf-math{margin-top:10px;padding:9px 10px;border-radius:10px;background:#0e0e0d;box-shadow:inset 0 0 0 1px var(--l1);font:400 15px/1 'Cambria Math','Times New Roman',serif;color:var(--t1);white-space:nowrap;word-spacing:2px}
.pf-math i{font-style:italic}.pf-math sup{font-size:.68em;vertical-align:.6em;line-height:0}
.pf-math .frac{display:inline-grid;vertical-align:middle;margin-right:3px;text-align:center;font-size:.82em;line-height:1.15}.pf-math .frac i:first-child{border-bottom:1px solid currentColor;padding:0 1px}
.pf-q{font-size:12.5px;font-weight:550;margin-bottom:10px!important}
.pf-opt{display:flex;align-items:center;gap:9px;min-height:34px;padding:6px 8px;margin-top:5px;border-radius:9px;background:var(--s2);box-shadow:inset 0 0 0 1px var(--l1);font-size:11.5px;color:var(--t2)}
.pf-opt b{display:grid;place-items:center;flex:none;width:19px;height:19px;border-radius:5px;font:600 9.5px/1 var(--mono);color:var(--t3);background:var(--s3);box-shadow:inset 0 0 0 1px var(--l2)}
.pf-opt.is-correct{background:rgba(134,220,160,.12);box-shadow:inset 0 0 0 1px rgba(134,220,160,.45);color:var(--t1)}
.pf-opt.is-correct b{background:var(--ok);color:#062a12;box-shadow:none}
.pf-opt em{margin-left:auto;font-style:normal;font-size:10px;font-weight:550;color:var(--ok)}
.pf-map{list-style:none;margin:0;padding:6px 13px 8px;counter-reset:c}
.pf-map li{position:relative;padding:8px 0 8px 30px;font-size:11.5px;color:var(--t3);border-bottom:1px solid var(--l1)}
.pf-map li:last-child{border-bottom:0}
.pf-map li::before{counter-increment:c;content:counter(c);position:absolute;left:0;top:6.5px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:9.5px;font-weight:600;color:var(--t2);background:var(--s3);box-shadow:inset 0 0 0 1px var(--l2)}
.pf-map li:not(:last-child)::after{content:'';position:absolute;left:9.5px;top:27px;bottom:-7px;width:1px;background:var(--l2)}
.pf-map li.done{color:var(--t2)}.pf-map li.done::before{content:'✓';background:var(--s4);color:var(--t1)}
.pf-map li.now{color:var(--t1);font-weight:550}.pf-map li.now::before{background:var(--t1);color:#141413;box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.pf-orb{width:13px;height:13px;flex:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 8%,#9fd8ff 28%,#7b6cff 62%,#2a1c5c 100%);box-shadow:0 0 8px rgba(140,170,255,.55)}
.pf-paper{background:#1b1b1a}
.pf-sheet{position:relative;margin:10px;padding:12px 12px 6px;background:#fff;color:#1d1d1f;border-radius:3px;box-shadow:0 4px 18px rgba(0,0,0,.45)}
.pf-sheet p{font:400 11px/1.45 Arial,'Helvetica Neue',sans-serif;padding-right:46px;text-wrap:pretty}.pf-sheet p b{font-weight:700;margin-right:6px}
.pf-marks{position:absolute;right:10px;top:12px;font:700 9.5px/1.45 Arial,sans-serif}
.pf-ink{display:block;width:100%;height:auto;margin-top:6px;overflow:visible}
.pf-ink path{fill:none;stroke:#1a233d;stroke-linecap:round;stroke-linejoin:round}
.pf-plot figure{margin:10px;padding:8px 8px 6px;border-radius:10px;background:#0e0e0d;box-shadow:inset 0 0 0 1px var(--l1)}
.pf-plot figure svg{display:block;width:100%;height:auto;overflow:visible}
.pf-plot path{fill:none}.pf-plot .plot-grid{stroke:rgba(255,255,255,.05)}.pf-plot .plot-axis{stroke:var(--t4)}
.pf-plot .plot-curve{stroke:var(--t1);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pf-plot .plot-tangent{stroke:var(--t3);stroke-width:1.2;stroke-dasharray:3 4;stroke-linecap:round}
.pf-plot .plot-point{fill:#0e0e0d;stroke:var(--t1);stroke-width:1.6}
.pf-plot text{fill:var(--t3);font:500 8.5px var(--mono)}
.pf-plot figcaption{margin-top:4px;font-size:10.5px;color:var(--t3);text-align:center}
.pf-streak{display:flex;align-items:center;gap:6px;color:var(--t3)!important}
.pf-streak::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(134,220,160,.12)}
.pf-dots{display:grid;grid-template-columns:repeat(var(--cols,14),minmax(0,1fr));gap:2.5px;height:84px;padding:14px 13px 10px}
.pf-dots span{display:flex;flex-direction:column-reverse;gap:2.5px}
.pf-dots i{flex:1;border-radius:2px;background:var(--s3)}
.pf-dots i.on{background:var(--t2)}.pf-dots i.peak{background:var(--t1)}
.pf-metric{display:grid;gap:3px;padding:10px 13px 12px;border-top:1px solid var(--l1);position:relative}
.pf-metric::before{content:'';position:absolute;left:0;top:-1px;width:50%;height:2px;background:var(--t1)}
.pf-metric span{font-size:10.5px;color:var(--t2)}.pf-metric strong{font-size:19px;font-weight:600;letter-spacing:-.03em;line-height:1.1}.pf-metric small{font-size:10px;color:var(--ok)}
/* A long, eased fade so the hero settles into the next section without a visible band. */
.hero-fade{position:absolute;inset:auto 0 0 0;height:40%;z-index:3;pointer-events:none;background:linear-gradient(to top,var(--night) 0%,rgba(7,7,8,.94) 14%,rgba(7,7,8,.78) 30%,rgba(7,7,8,.52) 48%,rgba(7,7,8,.24) 68%,rgba(7,7,8,.07) 86%,rgba(7,7,8,0) 100%)}
.hero-shade{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse 40% 30% at 50% 36%,rgba(7,7,8,.7),rgba(7,7,8,.3) 60%,transparent 85%)}

/* orb (from the app) */
.tutor-orb[data-orb=cosmic]{position:relative;isolation:isolate;overflow:visible}
.tutor-orb[data-orb=cosmic] .orb-stage{position:absolute;inset:0;display:block;transform-origin:50% 50%;will-change:transform}
.tutor-orb[data-orb=cosmic] .orb-motion{width:100%!important;height:100%!important;animation:none!important}
.tutor-orb[data-orb=cosmic] .orb-clip{clip-path:none;-webkit-clip-path:none;mask-image:none;-webkit-mask-image:none;border-radius:50%;overflow:hidden;transform:translateZ(0)}
.tutor-orb[data-orb=cosmic] .orb-canvas{clip-path:none;-webkit-clip-path:none;transform-origin:50% 50%;will-change:transform}
.orb-halo{position:absolute;inset:-18%;z-index:-1;border-radius:50%;pointer-events:none;opacity:.2;background:radial-gradient(circle,rgba(150,230,235,.38) 0%,rgba(130,150,255,.16) 38%,transparent 68%);will-change:transform,opacity}
.orb-sheen{position:absolute;inset:0;z-index:2;border-radius:50%;pointer-events:none;opacity:.22;mix-blend-mode:screen;background:conic-gradient(from 0deg,transparent 0 35deg,rgba(255,255,255,.42) 58deg,transparent 92deg,transparent 190deg,rgba(170,225,255,.3) 222deg,transparent 256deg);-webkit-mask-image:radial-gradient(circle,transparent 46%,#000 78%);mask-image:radial-gradient(circle,transparent 46%,#000 78%)}

/* ---------- the opposite ---------- */
.opposite{padding-block:calc(var(--section) * .7) calc(var(--section) * .8)}
.statement{font-weight:540;font-size:clamp(2.25rem,4.8vw,4.6rem);line-height:1.08;letter-spacing:-.04em;max-width:22ch;text-wrap:balance}
.statement .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hand{display:block;width:min(820px,100%);height:auto;aspect-ratio:820/110;margin:34px 0 0 -8px;overflow:visible}
.hand path{fill:none;stroke:url(#spectrumStroke);stroke-linecap:round;stroke-linejoin:round}
.opposite .after{margin-top:56px;max-width:52ch}
.opposite-answer{font-family:var(--sans);font-size:clamp(1.9rem,3.5vw,3.5rem);font-weight:540;letter-spacing:-.04em;line-height:1.15;margin-top:42px;color:var(--night-ink);text-wrap:balance}
.opposite-answer em{font-family:'Instrument Serif',Georgia,serif;font-size:1.16em;font-weight:400;letter-spacing:-.025em;color:#c4c2cc}

/* ---------- day sections carry the spectrum across their top edge ---------- */
.day-top{position:relative;padding-top:calc(var(--section) * .9)}
.spectrum-band{position:absolute;inset:0 0 auto;height:clamp(240px,32vw,420px);pointer-events:none;overflow:hidden;z-index:0;background:var(--paper)}
.spectrum-band::before{content:'';position:absolute;left:-20%;right:-20%;top:-180px;height:400px;background:var(--spectrum);filter:blur(65px);opacity:.52;transform:translateX(var(--sx,0));mask-image:linear-gradient(#000 0%,#000 35%,transparent 94%);-webkit-mask-image:linear-gradient(#000 0%,#000 35%,transparent 94%)}
.day-top>.wrap{position:relative;z-index:1}
#agents{padding-bottom:calc(var(--section) * .8)}

.section-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end;margin-bottom:56px}
.section-head .display{grid-column:1/8}
.section-head .lede{grid-column:8/13;justify-self:end}

/* ---------- bento: custom illustrated cards ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:330px 330px;gap:14px}
.card{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-lg);text-decoration:none;color:var(--night-ink);
 background:radial-gradient(120% 80% at 50% 0%,#1d1d22 0%,#141417 55%,#111114 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 30px 60px -40px rgba(10,10,12,.6);transition:transform .5s var(--ease),box-shadow .3s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 40px 70px -40px rgba(10,10,12,.7)}
.card h3{position:relative;z-index:3;padding:26px 24px 0;text-align:center;font-weight:600;font-size:18px;letter-spacing:-.02em}
.card h3.bottom{position:absolute;left:0;right:0;bottom:22px;padding:0 24px;font-size:16px;line-height:1.35}
.c-learn{grid-column:1/7;grid-row:1}
.c-quick{grid-column:7/10;grid-row:1}
.c-tutor{grid-column:10/13;grid-row:1/3}
.c-turn{grid-column:1/4;grid-row:2}
.c-papers{grid-column:4/10;grid-row:2}
.art{position:absolute;inset:0;z-index:1;pointer-events:none}
.rings{position:absolute;left:50%;top:62%;width:640px;height:640px;translate:-50% -50%;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 46px,rgba(255,255,255,.035) 46px 47px);-webkit-mask-image:radial-gradient(circle,#000 30%,transparent 70%);mask-image:radial-gradient(circle,#000 30%,transparent 70%)}
/* Learn: a route of light */
.art-route .rings{top:100%;left:20%}
.route{position:absolute;left:0;right:0;bottom:0;width:100%;height:78%}
.route path{fill:none;stroke-linecap:round}
.route-glow{stroke:url(#spectrumSmall);stroke-width:18;opacity:.22;filter:blur(10px)}
.route-line{stroke:url(#spectrumSmall);stroke-width:3.5}
.node{position:absolute;translate:-50% -50%;display:grid;justify-items:center;gap:10px}
.node i{width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.08),0 0 18px rgba(255,255,255,.7)}
.node em{font-style:normal;font-size:12.5px;font-weight:540;color:var(--night-soft);background:rgba(255,255,255,.06);padding:4px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--night-rule);translate:0 -46px;white-space:nowrap}
.route-bot{position:absolute;translate:-50% -50%;filter:drop-shadow(0 10px 24px rgba(255,196,107,.35))}
.bot{display:block;width:var(--bot-size,64px);height:var(--bot-size,64px);flex-shrink:0;overflow:visible}
/* The avatar renderer deliberately overscans beyond its layout box. */
.bot canvas{max-width:none;flex-shrink:0}
/* Quick Revision: the agent, lit from behind */
.art-quick .halo{position:absolute;left:50%;top:52%;width:240px;height:240px;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(124,200,255,.45),rgba(124,200,255,.08) 45%,transparent 70%);filter:blur(6px)}
.art-quick .bot{position:absolute;left:50%;top:50%;translate:-50% -50%;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.art-quick .chip{position:absolute;left:50%;bottom:30px;translate:-50% 0;white-space:nowrap;font-family:var(--mono);font-size:13px;color:var(--night-ink);padding:9px 14px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 0 0 1px rgba(255,255,255,.08),0 12px 30px -10px rgba(0,0,0,.6)}
.art-quick .chip span{color:var(--s-sky)}
/* Tutor: the real orb under a beam, writing on the desk */
.art-tutor .beam{position:absolute;left:50%;top:-10%;width:120%;height:110%;translate:-50% 0;background:conic-gradient(from 160deg at 50% 0%,transparent 0deg,rgba(124,200,255,.18) 15deg,rgba(124,200,255,.06) 25deg,transparent 40deg);filter:blur(8px);-webkit-mask-image:linear-gradient(to bottom,#000 25%,transparent 100%);mask-image:linear-gradient(to bottom,#000 25%,transparent 100%)}
.mini-orb-host{position:absolute;left:50%;top:40%;width:190px;height:190px;translate:-50% -50%}
.mini-orb-host .tutor-orb{width:100%;height:100%}
.desk-ink{position:absolute;left:10%;right:10%;bottom:9%;width:80%;height:auto;aspect-ratio:320/70;overflow:visible}
.desk-ink path{fill:none;stroke:url(#spectrumSmall);stroke-linecap:round;stroke-linejoin:round}
/* Your turn: a ring that completes */
.art-ring{display:grid;place-items:center;padding-bottom:60px}
.art-ring svg{width:148px;height:148px;transform:rotate(-90deg);filter:drop-shadow(0 0 22px rgba(124,200,255,.25))}
.art-ring circle{fill:none;stroke-width:9}
.art-ring .track{stroke:rgba(255,255,255,.07)}
.art-ring .fill{stroke:url(#spectrumSmall);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.ring-label{position:absolute;left:50%;top:calc(50% - 30px);translate:-50% -50%;text-align:center;font-weight:600;font-size:17px;line-height:1.1;letter-spacing:-.02em}
/* Real past papers: a stack and a key */
.art-papers .sheet{position:absolute;width:250px;height:190px;border-radius:12px;background:linear-gradient(180deg,#f7f7f5,#e9e9e6);box-shadow:0 30px 50px -20px rgba(0,0,0,.6);padding:18px 18px;color:#1b1b1f}
.art-papers .sheet b{display:block;font-size:13px;font-weight:650;letter-spacing:-.01em;margin-bottom:14px}
.art-papers .sheet i{display:block;height:7px;border-radius:4px;background:#d8d8d4;margin-bottom:9px}
.art-papers .sheet i:nth-of-type(2){width:82%}.art-papers .sheet i:nth-of-type(3){width:90%}.art-papers .sheet i:nth-of-type(4){width:60%}
.art-papers .s1{left:16%;top:22%;rotate:-6deg;z-index:3}
.art-papers .s2{left:24%;top:16%;rotate:2deg;z-index:2;opacity:.85}
.art-papers .s3{left:32%;top:11%;rotate:9deg;z-index:1;opacity:.6}
.art-papers .key{position:absolute;right:9%;top:26%;z-index:4;padding:22px 34px;border-radius:18px;font-weight:650;font-size:22px;letter-spacing:-.02em;color:#fff;rotate:-14deg;
 background:linear-gradient(160deg,#8fd0ff 0%,#3d8dff 45%,#2457d8 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -6px 12px rgba(10,30,90,.45),0 14px 0 -2px #183a8f,0 30px 50px -10px rgba(36,87,216,.6)}

/* ---------- custom player ---------- */
.player-wrap{position:relative;margin-inline:auto}
.film-glow{position:absolute;inset:8% 6% -6%;z-index:-1;background:var(--spectrum);filter:blur(70px);opacity:.2;border-radius:40px}
.player{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#000;aspect-ratio:16/10;box-shadow:0 0 0 1px rgba(255,255,255,.08),var(--e3)}
.player video{width:100%;height:100%;object-fit:cover}
/* ---------- Quick Revision: open, full width ---------- */
.feature{padding-block:var(--section)}
.feature-head{display:grid;justify-items:center;text-align:center;gap:22px;margin-bottom:64px}
.feature-head .display{max-width:16ch}
.feature-head .lede{text-align:center;max-width:52ch}
.quick .player-wrap,#papers .player-wrap{max-width:1180px}
.quick .feature-head{grid-template-columns:1.2fr 1fr;align-items:end;justify-items:start;text-align:left;gap:80px;margin-bottom:56px}
.quick .feature-head .display{max-width:18ch}.quick .feature-head .lede{text-align:left;max-width:36ch}
.quick .player-wrap,#papers .player-wrap{max-width:none}
.points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1180px;margin:56px auto 0}
.points li{display:grid;gap:6px;padding-top:20px;border-top:1px solid var(--night-rule)}
.points b{font-weight:580;font-size:17px;letter-spacing:-.015em}
.points span{color:var(--night-soft);font-size:15px}

/* ---------- Learn: a timeline beside a held film ---------- */
.learn{padding-block:var(--section) calc(var(--section) * .7)}
.learn-title{max-width:22ch;margin-bottom:80px}
.learn-grid{display:grid;grid-template-columns:minmax(0,3.4fr) minmax(0,8.6fr);gap:80px;align-items:start}
.timeline{position:relative;padding-left:44px}
.tl-line{position:absolute;left:11px;top:14px;bottom:14px;width:2px;background:var(--rule);border-radius:2px}
.tl-fill{position:absolute;left:0;right:0;top:0;height:100%;border-radius:2px;background:linear-gradient(180deg,var(--s-pink),var(--s-amber),var(--s-mint),var(--s-sky),var(--s-violet));transform-origin:50% 0;transform:scaleY(0)}
.step{position:relative;min-height:48vh;display:flex;flex-direction:column;justify-content:center;gap:12px}
.step .dot{position:absolute;left:-44px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px var(--rule);transition:box-shadow .4s var(--ease),background-color .4s var(--ease)}
.step .dot::after{content:'';position:absolute;inset:7px;border-radius:50%;background:var(--rule);transition:background-color .4s var(--ease),transform .4s var(--ease)}
.step.is-active .dot{box-shadow:inset 0 0 0 2px var(--ink),0 0 0 6px rgba(14,14,16,.06)}
.step.is-active .dot::after{background:var(--ink);transform:scale(1.15)}
.step h3{font-weight:560;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.08;letter-spacing:-.035em;color:var(--ink-faint);transition:color .4s var(--ease)}
.step p{color:var(--ink-faint);max-width:36ch;transition:color .4s var(--ease)}
.step.is-active h3{color:var(--ink)}
.step.is-active p{color:var(--ink-soft)}
.held{position:sticky;top:110px;align-self:start}

/* ---------- Tutor: title and film have independent space; no overlap or scroll seeking. ---------- */
.tutor-stage{height:auto;padding-top:var(--section);background:var(--night)}
.ts-pin{position:relative;height:auto;overflow:visible}
.ts-title{position:relative;width:min(var(--max),100% - var(--gutter)*2);margin:0 auto 64px;display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:end}
.ts-title .display{max-width:12ch}.ts-title .lede{max-width:39ch}
.ts-frame{position:relative;width:min(var(--max),100% - var(--gutter)*2);height:auto;aspect-ratio:16/10;margin:0 auto;border-radius:24px;overflow:hidden;background:#111;box-shadow:inset 0 0 0 1px var(--night-rule),var(--e3)}
.ts-frame video{width:100%;height:100%;object-fit:contain}
.tutor-after{padding-block:calc(var(--section) * .6) var(--section)}
.ta-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.ta-grid .display{grid-column:1/8;font-size:clamp(2.2rem,4vw,3.8rem)}
.ta-grid .lede{grid-column:8/13}

/* ---------- papers ---------- */
.note{font-size:13px;color:var(--ink-faint);max-width:60ch;margin-top:24px}

/* ---------- principles: miniature product moments ---------- */
.principles{padding-block:calc(var(--section) * .65) var(--section)}
.principles-heading{max-width:none}.principles-heading .lede{margin-top:22px}
#prH{white-space:nowrap;font-size:clamp(1.35rem,5.5vw,5.2rem)}
.eyebrow{font:500 11px/1.5 var(--mono);letter-spacing:.12em;color:var(--night-soft);margin-bottom:22px}
.p-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:56px}
.p-card{min-width:0;overflow:hidden;isolation:isolate;border-radius:24px;background:radial-gradient(120% 80% at 50% 0%,#1d1d22 0%,#141417 55%,#111114 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 30px 60px -40px rgba(0,0,0,.6);transition:transform .5s var(--ease),box-shadow .3s var(--ease)}
.p-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 40px 70px -40px rgba(0,0,0,.7)}
.p-copy{padding:10px 36px 32px}.p-copy h3{font-size:25px;font-weight:480;letter-spacing:-.025em;line-height:1.25;margin:0 0 10px}.p-copy p{font-size:15px;line-height:1.65;color:var(--night-soft);max-width:43ch}
/* The art: crafted, lit objects in the same family as the agent cards. */
.p-art{position:relative;height:280px;overflow:hidden;mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent)}
.p-art .rings{top:58%}
.p-art .chip{position:absolute;font-size:13px;font-weight:540;color:var(--night-soft);padding:7px 14px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.07),0 12px 24px -12px rgba(0,0,0,.6);white-space:nowrap}
.p-art .chip.on{color:#fff;background:linear-gradient(180deg,rgba(124,200,255,.35),rgba(124,200,255,.12));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(124,200,255,.45),0 0 24px rgba(124,200,255,.35)}
/* 01: a question, lit from behind */
.art-ask .halo{position:absolute;left:50%;top:48%;width:260px;height:260px;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(124,200,255,.42),rgba(124,200,255,.08) 45%,transparent 70%);filter:blur(6px)}
.bubble{position:absolute;left:50%;top:44%;translate:-50% -50%;rotate:-6deg;width:132px;height:112px;border-radius:34px;display:grid;place-items:center;font-weight:700;font-size:64px;letter-spacing:-.04em;color:#fff;
 background:linear-gradient(160deg,#a9dcff 0%,#4d9bff 42%,#2457d8 100%);box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -10px 18px rgba(10,30,90,.5),0 18px 0 -4px #183a8f,0 40px 60px -14px rgba(36,87,216,.65);text-shadow:0 2px 0 rgba(10,30,90,.35)}
.art-ask .c1{left:calc(50% - 150px);bottom:34px}.art-ask .c2{left:50%;translate:-50% 0;bottom:26px}.art-ask .c3{left:calc(50% + 100px);bottom:34px}
/* 02: the working, as glass steps that climb */
.slab{position:absolute;display:flex;align-items:center;gap:14px;width:260px;height:56px;padding:0 18px;border-radius:16px;font-size:16px;letter-spacing:-.02em;color:var(--night-ink);
 background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.08),0 24px 40px -20px rgba(0,0,0,.8);backdrop-filter:blur(6px)}
.slab b{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;font:600 12px var(--mono);color:var(--night);background:var(--night-ink)}
.slab::before{content:'';position:absolute;left:16px;right:16px;top:0;height:1px;background:var(--spectrum);opacity:.7}
.art-steps .s1{left:calc(50% - 210px);top:178px;opacity:.6}
.art-steps .s2{left:calc(50% - 130px);top:112px;opacity:.82}
.art-steps .s3{left:calc(50% - 50px);top:46px;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(124,200,255,.4),0 0 40px rgba(124,200,255,.25),0 24px 40px -20px rgba(0,0,0,.8)}
.art-steps .s3 b{background:var(--spectrum)}
.spark{position:absolute;right:-6px;top:-6px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.1),0 0 22px rgba(255,255,255,.9)}
/* 03: a pen, writing a line of light */
.pen-trail{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pen-trail path{fill:none;stroke:url(#spectrumSmall);stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 10px rgba(124,200,255,.45))}
.art-pen{container-type:inline-size}
.pen{position:absolute;left:79.5%;top:56%;width:22px;height:clamp(96px,29cqw,160px);rotate:28deg;translate:-50% -100%;transform-origin:50% 100%}
.pen::before{content:"";position:absolute;inset:0 0 28px;border-radius:11px;background:linear-gradient(90deg,#2a2a31,#5a5a66 38%,#1b1b20 70%,#101013);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),18px 26px 36px -14px rgba(0,0,0,.8)}
.pen .cap{position:absolute;left:-1px;right:-1px;top:-2px;height:min(64px,34%);border-radius:12px 12px 6px 6px;background:linear-gradient(90deg,#9aa0ad,#f2f4f8 38%,#8a8f9b 72%,#5d616b)}
.pen .band{position:absolute;left:0;right:0;top:60%;height:8px;background:var(--spectrum)}
.pen .nib{position:absolute;left:0;bottom:0;width:22px;height:30px;overflow:visible}
.art-pen .turn{position:absolute;left:28px;top:26px;font-size:12.5px;font-weight:560;color:var(--night-soft);padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--night-rule)}
/* 04: the syllabus as a target, with the boards and levels around it */
.target{position:absolute;left:50%;top:50%;width:220px;height:220px;translate:-50% -50%}
.target i{position:absolute;border-radius:50%;left:50%;top:50%;translate:-50% -50%}
.target .t1{width:220px;height:220px;background:radial-gradient(circle,rgba(255,255,255,.02) 60%,rgba(255,255,255,.07));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.target .t2{width:150px;height:150px;background:radial-gradient(circle,rgba(255,255,255,.03) 55%,rgba(255,255,255,.09));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.target .t3{width:84px;height:84px;background:radial-gradient(circle,rgba(124,200,255,.1),rgba(124,200,255,.22));box-shadow:inset 0 0 0 1px rgba(124,200,255,.35),0 0 40px rgba(124,200,255,.25)}
.target .core{width:26px;height:26px;background:conic-gradient(from 0deg,var(--s-pink),var(--s-amber),var(--s-lime),var(--s-mint),var(--s-sky),var(--s-violet),var(--s-pink));box-shadow:0 0 0 5px rgba(255,255,255,.08),0 0 30px rgba(255,255,255,.55)}
.art-target .ca{left:calc(50% - 190px);top:70px}.art-target .cb{left:calc(50% + 110px);top:104px}.art-target .cc{left:50%;translate:-50% 0;bottom:12px}
/* ---------- plans ---------- */
.plans{padding-block:calc(var(--section) * .7) var(--section);scroll-margin-top:100px}
.plans .plans-head{display:flex;justify-content:space-between;align-items:end;gap:36px;margin-bottom:40px}
.plans-intro h2{font-size:clamp(32px,3.6vw,52px);font-weight:500;line-height:1.12;letter-spacing:-.045em}
.plans-intro>p{font-size:16px;line-height:1.6;color:var(--ink-soft);margin-top:16px;max-width:46ch}
.billing-choice{flex-shrink:0;text-align:right}.billing-choice>p{font-size:12px;color:var(--ink-soft);margin-top:10px}
.plans .toggle{display:inline-flex;padding:4px;border:1px solid var(--rule);border-radius:12px;background:#f5f5f3}
.plans .toggle button{border:0;background:none;min-height:38px;padding:8px 20px;border-radius:8px;font-size:13px;font-weight:500;color:var(--ink-soft);cursor:pointer;transition:background-color .15s,color .15s,box-shadow .15s}
.plans .toggle button:hover{color:var(--ink);background:#eeedeb}
.plans .toggle button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 4px #00000010}
.plans .price-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--rule);border-radius:20px;overflow:hidden}
.plans .plan{position:relative;min-width:0;padding:28px;display:flex;flex-direction:column;background:#fff}
.plans .plan+.plan{border-left:1px solid var(--rule)}
.plan-heading{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:30px}
.plan h3{font-weight:550;font-size:19px;letter-spacing:-.025em}
.plan .for{font-size:14px;line-height:1.5;color:var(--ink-soft);min-height:42px;margin-top:10px}
.plan-price{margin-top:30px;margin-bottom:26px}
.plan .amount{font-weight:500;font-size:44px;letter-spacing:-.055em;line-height:1.15;font-variant-numeric:tabular-nums}
.plan .amount small{font-size:13px;font-weight:400;letter-spacing:0;color:var(--ink-soft);margin-left:5px}
.billing-detail{font-size:12px;line-height:1.5;color:var(--ink-soft);margin-top:8px;min-height:18px}
.plans .plan .btn{width:100%;height:44px;padding:0 16px;justify-content:space-between;border-radius:10px;font-size:13px;box-shadow:inset 0 0 0 1px #dededb}
.plans .plan .btn>span{font-size:17px;font-weight:400}
.plans .plan.rec .btn{box-shadow:none}
.plan .replies{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--rule);padding-top:22px;margin-top:26px}
.replies strong{font-size:20px;letter-spacing:-.025em;font-weight:500;font-variant-numeric:tabular-nums}
.replies>span{font-size:12px;color:var(--ink-soft)}
.plans .plan.rec{background:#f5f5f2}
.plan .tag{font-size:10px;line-height:1.4;font-weight:500;padding:4px 7px;border-radius:5px;background:#e6e6e1;color:var(--ink)}
.plans-foot{display:flex;justify-content:space-between;gap:16px;margin-top:20px;font-size:12px;line-height:1.6;color:var(--ink-soft)}
@media(max-width:1100px){.plans .plan{padding:24px 20px}.plan-heading{min-height:58px;align-content:start}.plans .price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.plans .plan:nth-child(3){border-left:0}.plans .plan:nth-child(n+3){border-top:1px solid var(--rule)}.plan .for{min-height:21px}}
@media(max-width:700px){.plans .plans-head{align-items:start;flex-direction:column;gap:24px;margin-bottom:28px}.billing-choice{text-align:left}.plan-heading{min-height:30px}.plans-foot{flex-direction:column;gap:4px}}
@media(max-width:480px){.plans .price-grid{grid-template-columns:1fr}.plans .plan{padding:26px}.plans .plan+.plan{border-left:0;border-top:1px solid var(--rule)}.plan-price{margin-top:22px}.plan .for{min-height:0}.plan .replies{flex-direction:row;align-items:baseline;gap:8px;padding-top:18px;margin-top:22px}}

/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-bottom:var(--section)}
.faq .display{grid-column:1/5;font-size:clamp(2.2rem,3.6vw,3.4rem)}
.faq .list{grid-column:6/13;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;cursor:pointer;list-style:none;font-size:17px;font-weight:540;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:none;width:11px;height:11px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s var(--ease);opacity:.55}
.faq details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.faq details p{padding:0 0 24px;color:var(--ink-soft);max-width:62ch}

/* ---------- close ---------- */
.closing{padding-bottom:calc(var(--section) * .7)}

/* ---------- footer ---------- */
.footer{position:relative;overflow:hidden;padding-top:72px}
.footer-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 24px;font-size:14.5px}
.footer-grid .about{grid-column:1/5;display:grid;gap:14px;align-content:start;color:var(--ink-soft)}
.footer-grid nav{grid-column:span 2;display:grid;gap:10px;align-content:start}
.footer-grid nav h3{font-size:13px;font-weight:560;color:var(--ink);margin-bottom:4px}
.footer-grid nav a{text-decoration:none;color:var(--ink-soft);transition:color .15s var(--ease)}
.footer-grid nav a:hover{color:var(--ink)}
.fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:64px;padding-top:24px;border-top:1px solid var(--rule);font-size:12.5px;color:var(--ink-faint)}
.bigmark{position:relative;margin-top:48px;height:clamp(140px,22vw,340px);overflow:hidden}
.bigmark .glow{position:absolute;left:-10%;right:-10%;bottom:-40%;height:120%;background:var(--spectrum);filter:blur(80px);opacity:.5;border-radius:50% 50% 0 0}
.bigmark .word{position:absolute;left:50%;bottom:-.2em;translate:-50% 0;font-weight:640;font-size:clamp(9rem,27vw,26rem);line-height:.8;letter-spacing:-.075em;color:var(--ink);white-space:nowrap;mix-blend-mode:multiply;opacity:.92}

/* ---------- responsive ---------- */
@media (max-width:1100px){
 .quick .feature-head,.ts-title{gap:36px}.learn-title{max-width:20ch}
 .topbar{grid-template-columns:1fr auto}
 .section-head .display,.section-head .lede{grid-column:1/-1;justify-self:start}
 .bento{grid-template-rows:none;grid-auto-rows:320px}
 .c-learn,.c-quick,.c-tutor,.c-turn,.c-papers{grid-column:auto;grid-row:auto}
 .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
 .c-learn,.c-papers{grid-column:1/-1}
 .c-tutor{grid-row:span 2}
 .learn-grid{grid-template-columns:1fr;gap:40px}
 .held{position:relative;top:auto;z-index:2;order:-1}
 .step{min-height:38vh}
 .p-grid,.price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .faq .display,.faq .list{grid-column:1/-1}
 .ta-grid .display,.ta-grid .lede{grid-column:1/-1}
 .footer-grid .about{grid-column:1/-1}
 .footer-grid nav{grid-column:span 4}
}
@media (max-width:700px){
 .quick .feature-head,.ts-title{grid-template-columns:1fr;gap:24px;text-align:left}.quick .feature-head .lede{max-width:46ch}.feature-head{margin-bottom:40px}.learn-title{margin-bottom:40px}.learn-grid{gap:32px}.step{min-height:240px}.timeline{padding-left:38px}.step .dot{left:-38px}.tl-line{left:11px}.controls{gap:6px;padding-right:10px}.controls button{width:30px;height:32px}.player,.ts-frame{border-radius:16px}
 body{font-size:16px}
 .topbar{height:64px}
 .account a.login{display:none}
 .hero{padding:100px 0 60px}
 .hero h1{font-size:clamp(2.9rem,13.5vw,4.4rem)}
 .hero h1 .cycle{display:grid;margin-inline:auto}
 .hero-orb{width:120vw;top:var(--orb-top,calc(66% + 33px))}
 .tile.m-hide,.tile:not(.m-keep){display:none}
 .tile{opacity:.5}
 .bento{grid-template-columns:1fr;grid-auto-rows:300px}
 .c-tutor{grid-row:span 1;min-height:380px}
 .points{grid-template-columns:1fr;gap:0}
 .points li{padding:16px 0}
 .p-grid,.price-grid{grid-template-columns:1fr}
 .footer-grid nav{grid-column:span 6}
 .tutor-stage{height:auto}
 .ts-title{grid-template-columns:1fr;gap:24px;margin-bottom:40px}.ts-title .display{max-width:16ch}

 .controls{left:10px;right:10px;bottom:10px}
 .time{display:none}
}

/* Original light sections grouped after the dark stories, with one transition. */
#agents{padding-top:calc(var(--section) * .8)}
.light-start{padding-top:var(--section);border-radius:40px 40px 0 0}
.light-start{isolation:isolate}
.light-start>.spectrum-band{border-radius:inherit}
.light-start>.wrap{position:relative;z-index:1}
.hero h1{font-weight:480;letter-spacing:-.04em;line-height:1.02}
.ta-grid .display{font-weight:460;line-height:1.12;letter-spacing:-.03em}
.statement{font-weight:480;letter-spacing:-.032em;line-height:1.14}
.opposite-answer{font-weight:470;letter-spacing:-.028em}
@media(max-width:700px){.p-art{height:250px}.p-copy{padding:8px 24px 26px}.p-copy h3{font-size:23px}.light-start{border-radius:24px 24px 0 0}.art-ask .c1{left:calc(50% - 130px)}.art-ask .c3{left:calc(50% + 74px)}.art-steps .slab{width:220px}.art-steps .s1{left:calc(50% - 170px)}.art-steps .s2{left:calc(50% - 110px)}.art-steps .s3{left:calc(50% - 60px)}.art-target .ca{left:16px}.art-target .cb{left:auto;right:16px}}

/* An edge-aligned, full-width editorial statement. */
.opposite{padding-block:var(--section)}
.opposite .wrap{width:auto;max-width:none;margin:0;padding-inline:var(--gutter)}
.statement{font-size:clamp(calc(2.7rem - 4px),calc(6.8vw - 4px),calc(7.5rem - 4px));font-weight:460;line-height:1.08;letter-spacing:-.037em;max-width:26ch;text-align:left;text-wrap:wrap}
/* A flat editorial news grid; preserve the existing light background. */
.news{padding-bottom:var(--section)}
.news .news-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:40px}
.news-heading h2{font-size:20px;line-height:1.4;font-weight:500;letter-spacing:-.02em;margin:0}
.news-overview{font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;color:var(--ink);padding:8px 0}
.news-overview:hover{text-decoration:underline}
.news .news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.news-card{min-width:0}.news-card>a{display:block;text-decoration:none;border-radius:6px;color:var(--ink)}
.news .news-image{aspect-ratio:1;overflow:hidden;border-radius:6px;background:var(--paper-2)}
.news-image img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .3s var(--ease)}
.news-card h3{font-size:16px;font-weight:500;line-height:1.45;letter-spacing:-.018em;margin:15px 0 12px;max-width:42ch}
.news-meta{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:12px;line-height:1.5;color:var(--ink);margin:0}
.news-meta>span+span{color:var(--ink-faint)}
.news-summary{font-size:14px;line-height:1.65;color:var(--ink-soft);margin:0 0 16px;max-width:38ch}
.news-card a:hover .news-image img{transform:scale(1.025)}
@media(max-width:960px){.news .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.news .news-grid{grid-template-columns:1fr;gap:32px}.news .news-heading{gap:16px;margin-bottom:28px}.news-heading h2{font-size:18px}.news-overview{font-size:12px}}
/* Heat map adapted from Bencho; the original field notes live in components/HeatMap.tsx. */
.footer-brand{margin:24px auto 0;max-width:960px;text-align:center;padding-bottom:32px}
#footerHeat{width:100%;aspect-ratio:5/3}#footerHeat>img{height:75%;width:auto;margin:auto;padding-top:40px}
.heat{position:relative;touch-action:pan-y;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.heat-canvas{display:block;max-width:none}
.footer-brand>p{font-size:12px;letter-spacing:.02em;color:var(--ink-faint);margin-top:-25px;position:relative;pointer-events:none}
.topbar.on-paper{color:var(--ink);background:#ffffffed;box-shadow:0 1px 0 var(--rule)}
.topbar.on-paper .wordmark{color:var(--ink)}
.topbar.on-paper .account a.login:hover{color:var(--ink)}
.topbar.on-paper .account{background:#f3f3f1;box-shadow:inset 0 0 0 1px var(--rule)}
.topbar.on-paper .account a.login{color:var(--ink-soft)}
.topbar.on-paper .account .btn{--bg:var(--ink);--fg:var(--paper)}
.papers-section{padding-top:var(--section)}
/* A generous section break without stacking two full section paddings. */
.opposite + .quick,.quick + .tutor-stage,.tutor-after + .principles,
#agents + .learn,.learn + .papers-section,.papers-section + .plans{padding-top:calc(var(--section) * .15)}
.ts-title{grid-template-columns:1fr;gap:24px;align-items:start}
.ts-title .lede{max-width:52ch}
#tutorH{max-width:none;white-space:nowrap;font-size:clamp(1.5rem,6.3vw,5.2rem)}
@media(max-width:800px){.news-grid{grid-template-columns:1fr;gap:48px}.news-heading{display:block}.news-heading>.lede{margin-top:22px}.news-image{aspect-ratio:1.7}.statement{font-size:clamp(2.7rem,7vw,4rem)}.footer-brand>p{margin-top:0}.news-copy h3 br{display:none}}


/* Give each heading, demonstration and card group its own breathing room. */
.section-head,.feature-head,.quick .feature-head,.learn-title,.ts-title,.plans-head,.news-heading{margin-bottom:var(--component-space)}
.p-grid,.points{margin-top:var(--component-space)}
.bento{gap:22px}
.p-grid,.news-grid{gap:32px}
.price-grid{gap:20px}
@media(max-width:700px){
 .bento,.p-grid,.price-grid{gap:20px}
 .news-grid{gap:56px}
 .points{row-gap:8px}
}
/* UK / US wording switch in the footer. */
.region-switch{display:inline-flex;gap:2px;padding:2px;border-radius:8px;box-shadow:inset 0 0 0 1px currentColor;opacity:.75}.region-switch button{border:0;background:none;color:inherit;font:inherit;font-size:12px;padding:2px 8px;border-radius:6px;cursor:pointer;opacity:.6}.region-switch button[aria-pressed=true]{opacity:1;background:color-mix(in srgb,currentColor 14%,transparent)}