@font-face{font-family:'Atkinson Hyperlegible Next';src:url('/fonts/atkinson-hyperlegible-next.woff') format('woff');font-weight:200 800;font-style:normal;font-display:swap}
:root{
  --paper:#f5f4fa;--paper-2:#ecebf4;--card:#ffffff;--ink:#1f1b3a;--ink-2:#4a4566;--ink-3:#77718f;--line:#e2dfec;
  --brand:#1f1b3a;--brand-ink:#ffffff;--gold:#c8902a;--gold-soft:#f6e7c6;
  --math:#c0612b;--math-soft:#fbe9dc;--coding:#1d7a6c;--coding-soft:#dcf0eb;--human:#7a4f9e;--human-soft:#efe5f7;
  --shadow:0 18px 40px -24px rgba(31,27,58,.35),0 4px 12px -6px rgba(31,27,58,.08);
  --font:"Atkinson Hyperlegible Next",ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:var(--font);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#15132a;--paper-2:#1c1a35;--card:#211f3d;--ink:#f2eefb;--ink-2:#c9c3dd;--ink-3:#9a93b4;--line:#34315a;
  --brand:#f2eefb;--brand-ink:#1d1a38;--gold:#e8b85c;--gold-soft:#3a2f17;
  --math:#f0915a;--math-soft:#3b2318;--coding:#4cc2ad;--coding-soft:#132f2b;--human:#bf98e6;--human-soft:#2c2140;
  --shadow:0 18px 40px -20px rgba(0,0,0,.7);color-scheme:dark;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{width:min(1160px,calc(100% - 32px));margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--card);padding:10px 14px;border-radius:8px;z-index:10}
.skip:focus{left:12px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:750;letter-spacing:-.03em;font-size:1.2rem;white-space:nowrap}
.brand.small{font-size:1rem}
.mark{width:32px;height:32px;flex:none}
.mark rect{fill:var(--brand)}
.mark path{fill:var(--gold)}
nav{display:flex;align-items:center;gap:24px;font-size:.92rem;font-weight:600}
nav a{text-decoration:none;color:var(--ink-2)}
nav a:hover{color:var(--ink)}
nav .btn{color:var(--brand-ink)}

.btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;background:var(--brand);color:var(--brand-ink);text-decoration:none;font-weight:650;padding:14px 22px;border-radius:999px;box-shadow:var(--shadow);transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}
.btn-small{padding:9px 16px;font-size:.88rem;box-shadow:none}
.link{font-weight:600;color:var(--ink-2)}

.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:.92rem;font-weight:700;color:var(--ink-3)}
.eyebrow span{width:26px;height:2px;background:var(--gold);display:inline-block}
h1,h2{font-family:var(--serif);font-weight:800;letter-spacing:-.025em;line-height:1.06;margin:0}
h1{font-size:clamp(2.6rem,5.6vw,4.4rem)}
h1 em{font-style:normal;color:inherit}
h2{font-size:clamp(2rem,3.6vw,2.9rem)}
h3{margin:0 0 10px;font-size:1.2rem;letter-spacing:-.01em}

.hero{padding:72px 0 64px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.lede{font-size:1.15rem;color:var(--ink-2);max-width:560px;margin:22px 0 30px}
.actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.fine{font-size:.85rem;color:var(--ink-3);margin:18px 0 0}
.hero-art{margin:0}
.hero-art svg{width:100%;height:auto;display:block}
.hero-art .path{fill:none;stroke:var(--gold);stroke-width:4;stroke-linecap:round;stroke-dasharray:2 12}
.hero-art .dot{stroke:#fff;stroke-width:4}
.hero-art .d1{fill:#c0612b}.hero-art .d2{fill:#1d7a6c}.hero-art .d3{fill:#7a4f9e}.hero-art .d4{fill:#1f1b3a}
.hero-art .card rect{fill:#fff;filter:drop-shadow(0 10px 18px rgba(31,27,58,.14))}
.hero-art text{font:700 19px var(--font);fill:#1f1b3a}
.hero-art text.small{font:600 13px var(--font);fill:#4a4566}

.band{padding:84px 0;border-top:1px solid var(--line)}
.band.alt{background:var(--paper-2)}
.head{max-width:720px;margin-bottom:40px}
.head p:last-child{color:var(--ink-2);font-size:1.08rem;margin:16px 0 0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--shadow)}
.card p{color:var(--ink-2);margin:0}
.subject{border-top:5px solid}
.subject.math{border-top-color:var(--math)}.subject.coding{border-top-color:var(--coding)}.subject.human{border-top-color:var(--human)}
.subject ul,.ticks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}
.subject li,.ticks li{position:relative;padding-left:26px;color:var(--ink-2);font-size:.95rem}
.subject li::before,.ticks li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:7px;border-left:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);transform:rotate(-45deg)}
.tag{display:inline-block;vertical-align:middle;margin-left:6px;font-size:.78rem;font-weight:700;background:var(--human-soft);color:var(--human);padding:3px 9px;border-radius:999px}

.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.split>div p:last-child{color:var(--ink-2);font-size:1.08rem;margin:16px 0 0}
.strands{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.strands li{display:grid;grid-template-columns:190px 1fr;gap:16px;align-items:baseline;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 22px}
.strands span{color:var(--ink-2)}

.portal h3{font-size:1.35rem}
.points{margin-top:20px;display:grid;grid-template-columns:1.3fr .7fr;gap:32px;align-items:center;background:var(--gold-soft);border-radius:22px;padding:32px}
.points h3{font-family:var(--serif);font-size:1.6rem;font-weight:800}
.points p{color:var(--ink-2);margin:0}
.points .ticks{margin:0}

.price{display:grid;grid-template-columns:1fr 380px;gap:56px;align-items:center}
.price>div>p:last-child{color:var(--ink-2);font-size:1.08rem;margin:16px 0 0}
.pricecard .amount{margin:0;font-size:1.1rem;color:var(--ink-3)}
.pricecard .amount span{font-family:ui-rounded,"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;font-size:3.4rem;color:var(--ink);font-weight:700;margin-right:4px}
.pricecard .btn{margin-top:22px;width:100%;justify-content:center}

.foot{border-top:1px solid var(--line);padding:36px 0 48px}
.foot-inner{display:flex;gap:24px;align-items:center;flex-wrap:wrap;color:var(--ink-3);font-size:.85rem}
.foot-inner p{margin:0}
.foot-inner p:last-child{margin-left:auto}

@media (max-width:900px){
  .hero-grid,.split,.price,.points{grid-template-columns:1fr}
  .grid3,.grid2{grid-template-columns:1fr}
  .hero{padding:48px 0}
  .hero-art{max-width:460px}
  .band{padding:60px 0}
  .strands li{grid-template-columns:1fr;gap:4px}
  .foot-inner p:last-child{margin-left:0}
}

.legal{border-top:0}
.narrow{max-width:760px}
.legal h1{margin:6px 0 14px}
.legal h2{font-size:1.5rem;margin:36px 0 10px}
.legal p,.legal li{color:var(--ink-2)}
.foot-inner a{color:inherit}

/* Request forms (free course, schools). Plain HTML forms: no scripts. */
.form-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.form-intro h1{font-size:clamp(2.1rem,4.4vw,3.2rem)}
.form-intro .ticks{margin-top:22px}
.form-intro .note{margin-top:28px;padding:22px 24px;border-radius:18px;background:var(--gold-soft)}
.form-intro .note h2{font-size:1.15rem;letter-spacing:-.01em;margin:0 0 6px}
.form-intro .note p{margin:0;color:var(--ink-2)}
.form{display:grid;gap:18px}
.form h2{font-size:1.5rem}
.form .fine{margin:-10px 0 0}
.field{display:grid;gap:6px;margin:0;padding:0;border:0;min-width:0}
.field label,.field legend{font-weight:700;font-size:.95rem;padding:0}
.field small{color:var(--ink-3);font-size:.85rem}
.optional{font-weight:400;color:var(--ink-3)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form input[type=text],.form input[type=email],.form input[type=number],.form select,.form textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;min-height:48px}
.form textarea{resize:vertical;min-height:110px}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--ink-3)}
.form input:user-invalid,.form select:user-invalid,.form textarea:user-invalid{border-color:var(--math)}
.choices{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.choice{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1.5px solid var(--line);border-radius:999px;background:var(--paper);font-weight:600;cursor:pointer;min-height:44px}
.choice:has(input:checked){border-color:var(--ink);background:var(--card)}
.choice input,.check input{width:18px;height:18px;accent-color:var(--brand);margin:0;flex:none}
.check{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2);font-size:.95rem;line-height:1.5}
.check input{margin-top:3px}
.form .btn{justify-content:center;border:0;cursor:pointer;font:inherit;font-weight:650;font-size:1rem}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tier .amount{margin:12px 0 2px;color:var(--ink-3);font-size:1.05rem}
.tier .amount span{font-family:ui-rounded,"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;font-size:3rem;color:var(--ink);font-weight:700;margin-right:4px}
.tier .amount span.word{font-family:var(--font);font-size:2.2rem;font-weight:800;letter-spacing:-.02em}
.tier.featured{border:2px solid var(--gold)}
.band .fine a,.pricecard a.link{color:var(--ink-2)}
.help-links{display:grid;gap:10px;margin-top:18px}
.help-links a{font-weight:650;color:var(--ink-2)}
@media (max-width:900px){.form-layout,.tiers,.field-row{grid-template-columns:1fr}.form-layout{gap:32px}}
.form .choice{padding:10px 18px 10px 14px}
.form fieldset.field{gap:10px}
.field{align-content:start}
.form select{height:52px;padding-block:0}

/* Proof sections */
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);box-shadow:none}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0 0 28px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow)}
.stat strong{display:block;font-size:2.4rem;line-height:1;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px}
.stat span{color:var(--ink-2);font-size:.98rem}
.ticks.plain{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 28px}
.ticks.plain li{color:var(--ink-2);padding-left:0}
.ticks.plain li::before{content:none}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card.age h3,.card.project h3{margin:8px 0 12px;font-size:1.25rem}
.card.age ul,.card.project ul{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:8px}
.card.age li,.card.project li{color:var(--ink-2);font-size:.95rem;line-height:1.5}
.card.age em,.card.project em{font-style:normal;font-weight:700;color:var(--ink)}
.card.age .link{font-weight:700}
.card.letter{background:var(--paper);border-left:6px solid var(--gold)}
.card.letter h3{margin:8px 0 14px;font-size:1.3rem}
.card.letter p{margin:0 0 12px;line-height:1.6}
.faq{max-width:820px}
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700;font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ink-2);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--ink-2);margin:12px 0 0;line-height:1.65}
@media (max-width:900px){.stats,.grid4{grid-template-columns:repeat(2,1fr)}.ticks.plain{grid-template-columns:1fr}}
@media (max-width:560px){.stats,.grid4{grid-template-columns:1fr}}
.terms{margin-top:36px}
.terms .card h3{margin:0 0 14px}
.terms .ticks li{margin:8px 0}

/* ---- Real screens: framed screenshots of the product ---- */
.shot{margin:0;position:relative}
.shot img{display:block;width:100%;height:auto;border-radius:0 0 16px 16px;border:1px solid var(--line);border-top:0;background:var(--card)}
.shot-frame{display:flex;gap:6px;align-items:center;height:30px;padding:0 14px;background:var(--card);border:1px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0}
.shot-frame span{width:10px;height:10px;border-radius:50%;background:var(--line)}
.shot figcaption{font-size:.82rem;color:var(--ink-3);margin-top:10px;text-align:center}
.hero-shot{box-shadow:0 40px 80px -40px rgba(31,27,58,.45);border-radius:16px;transform:rotate(-1deg)}
.portal-shot{display:block;width:calc(100% + 60px);max-width:none;height:auto;margin:-30px -30px 22px;border-radius:22px 22px 0 0;border-bottom:1px solid var(--line);aspect-ratio:16/9;object-fit:cover;object-position:top left}

/* ---- Header menu: section links stay in the bar on wide screens; phones get a Menu button ---- */
.nav-menu{display:none;position:relative}
.nav-menu summary{list-style:none;cursor:pointer;white-space:nowrap;font-weight:700;color:var(--ink);padding:8px 14px;border:1.5px solid var(--line);border-radius:999px;background:var(--card)}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary::after{content:" ▾";font-size:.8em;color:var(--ink-3)}
.nav-menu[open] summary::after{content:" ▴"}
.nav-drop{position:absolute;right:0;top:calc(100% + 10px);min-width:220px;display:grid;gap:2px;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);z-index:20}
.nav-drop a{padding:12px 14px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600}
.nav-drop a:hover,.nav-drop a:focus-visible{background:var(--paper-2)}
.phone-cta{display:none}

@media (max-width:900px){
  .nav-link{display:none}
  .nav-menu{display:block}
  nav{gap:8px}
  .top-inner{min-height:62px;gap:10px}
  .brand{font-size:1.08rem;gap:8px}
  .mark{width:28px;height:28px}
  .hero-shot{transform:none;margin-top:8px}
}

/* ---- Phones: shorter page, carousels instead of long stacks, a bar with the two next steps ---- */
@media (max-width:700px){
  body{font-size:15.5px}
  .wrap{width:calc(100% - 32px)}
  h1{font-size:2.35rem;line-height:1.08}
  h2{font-size:1.75rem;line-height:1.12}
  .hero{padding:28px 0 36px}
  .lede{font-size:1.02rem;margin:16px 0 22px}
  .actions{flex-direction:column;align-items:stretch;gap:10px}
  .actions .btn{justify-content:center}
  .band{padding:44px 0}
  .head{margin-bottom:22px}
  .head p:last-child,.split>div p:last-child,.price>div>p:last-child{font-size:1rem;margin-top:10px}
  .eyebrow{font-size:.82rem;margin-bottom:10px}
  .card{padding:20px;border-radius:18px}
  .portal-shot{width:calc(100% + 40px);margin:-20px -20px 16px;border-radius:18px 18px 0 0}
  .stats{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}
  .stat{padding:16px;border-radius:16px}
  .stat strong{font-size:1.7rem;margin-bottom:4px}
  .stat span{font-size:.86rem;line-height:1.4;display:block}
  .ticks.plain{gap:10px}
  .ticks.plain li{font-size:.92rem}
  /* Side-scrolling rows: one card and a peek of the next, snapping into place. */
  .grid4.ages,#projects .grid3,#learn .grid3,.strands{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-16px;padding:4px 16px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .grid4.ages::-webkit-scrollbar,#projects .grid3::-webkit-scrollbar,#learn .grid3::-webkit-scrollbar,.strands::-webkit-scrollbar{display:none}
  .grid4.ages>*,#projects .grid3>*,#learn .grid3>*{flex:0 0 84%;scroll-snap-align:start}
  .strands>li{flex:0 0 72%;scroll-snap-align:start;display:block}
  .strands li strong{display:block;margin-bottom:4px}
  .swipe-hint{display:block}
  .points{padding:22px;gap:16px;border-radius:18px}
  .points h3{font-size:1.3rem}
  .pricecard .amount span{font-size:2.8rem}
  .faq summary{font-size:1rem}
  .foot{padding:28px 0 96px}
  .foot-inner{gap:12px 18px}
  /* The bar with the two next steps appears on the home page only. */
  .phone-cta{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .phone-cta .btn{flex:1;justify-content:center;padding:13px 10px}
  .legal h1{font-size:2rem}
  .legal h2{font-size:1.3rem;margin-top:28px}
}
.swipe-hint{display:none;font-size:.82rem;color:var(--ink-3);margin:-8px 0 10px}
@media (max-width:360px){.brand{font-size:1.02rem}.btn-small{padding:8px 12px}.nav-menu summary{padding:7px 11px}}
/* With scripts on, the phone bar waits until the hero buttons have scrolled away. */
.js-cta .phone-cta{transform:translateY(110%);transition:transform .2s ease}
.js-cta .phone-cta.is-shown{transform:none}
@media (prefers-reduced-motion:reduce){.js-cta .phone-cta{transition:none}}