/* Whetta's pencil-and-notebook design. Illustration geometry: wireframe-art.css. */
:root { --paper:#fffdf5; --ink:#0e3b3a; --teal:#10504f; --muted:#3e5a57; --mint:#ddebe3; --sage:#9cc8b0; --coral:#e4785e; --line:#ece9dd; --heading:"Baloo 2",sans-serif; --body:"Nunito",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:92px; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font:600 16px/1.55 var(--body); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { opacity:.65; cursor:wait; }
[hidden] { display:none !important; }
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid #a4442c; outline-offset:4px; }
img { max-width:100%; }
h1,h2,h3 { font-family:var(--heading); font-weight:600; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:-100px; left:20px; z-index:100; padding:12px 20px; background:var(--teal); color:white; border-radius:12px; }
.skip-link:focus { top:12px; }
.shell { max-width:1280px; padding-inline:40px; margin-inline:auto; }
.masthead { position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1px solid var(--line); }
.masthead .shell { min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; font:700 34px/1 var(--heading); letter-spacing:-1px; }
.brand img { width:27px; height:43px; transform:rotate(-8deg); }
.masthead nav { display:flex; gap:28px; font-size:14px; font-weight:800; }
.masthead nav a,.header-actions a { text-decoration:none; }
.masthead nav a:hover,.header-actions>a:first-child:hover { text-decoration:underline; text-underline-offset:6px; }
.header-actions { display:flex; align-items:center; gap:24px; font-size:14px; font-weight:800; }
.pill { display:inline-flex; align-items:center; gap:18px; padding:13px 21px; border-radius:999px; background:var(--teal); color:var(--paper); }
.pill:hover { background:#0b3a39; }
.story-section { position:relative; min-height:calc(100svh - 160px); display:flex; align-items:center; scroll-margin-top:0; padding:64px 0; overflow:clip; }
.story-inner { position:relative; width:100%; max-width:1200px; margin:0 auto; padding:0 48px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:52px; }
.story-inner>.story-copy,.story-inner>.story-visual { min-width:0; max-width:none; width:100%; margin-inline:0; }
.story-section h2 { font-size:clamp(32px,3vw,42px); }
.story-0 { background:repeating-linear-gradient(to bottom,transparent 0,transparent 35px,rgba(16,80,79,.065) 35px,rgba(16,80,79,.065) 36px); }
.story-0::before { content:""; position:absolute; inset:0 auto 0 max(24px,calc((100% - 1200px)/2)); width:2px; background:#e4785e55; }
.story-0 .story-inner { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; }
.story-0 h1 { font-size:clamp(40px,4.3vw,58px); max-width:520px; }
.hero-art-frame { width:100%; min-width:0; container-type:inline-size; height:480px; align-content:center; }
.hero-art-frame>.story-visual { transform-origin:left center; scale:calc(100cqw / 520px); }
.story-1 .story-inner { display:block; }
.story-1 .how-heading { gap:24px 48px; }
.story-1 .feature-cards { gap:22px; }
.story-2 { background:var(--mint); }
.story-2 .story-inner { grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr); gap:42px; }
.sample-card-heading { flex-wrap:wrap; gap:8px 14px; }
.sample-card-heading>span:last-child { margin-left:0; }
.sample-card-body { display:grid; grid-template-columns:1fr; }
.sample-card-body>div:last-child { display:block; }
.sample-card-body>div:last-child>div:last-child { margin-top:12px; }
.sample-answer { margin-top:20px; }
.sample-answer>label { display:block; font-size:13px; font-weight:800; margin-bottom:6px; }
.sample-answer>div { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.sample-answer input { width:90px; min-height:52px; border:2px dashed var(--sage); border-radius:14px; background:var(--paper); color:var(--ink); text-align:center; font:600 24px var(--heading); }
.sample-answer button { margin-left:auto; border:0; border-radius:999px; background:var(--teal); color:white; padding:12px 24px; }
.sample-feedback { min-height:24px; margin:12px 0 0; font-weight:800; color:var(--teal); }
.sample-feedback[data-state="retry"] { color:#88452b; }
.sample-hint-button { border:0; min-height:44px; }
.story-3 { background:#fbe3dc; }
.story-3 .story-inner { gap:72px; }
.story-4 { background:#f8f7f0; }
.story-4 .story-inner { gap:48px; }
.demo-caption { margin:0 0 16px; font-size:12px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; }
.story-5 { background:var(--teal); color:var(--paper); }
.story-5 .story-inner { gap:72px; }
.story-5 .join-card { max-width:440px; justify-self:end; }
.join-card { scroll-margin-top:116px; }
.waitlist { display:grid; gap:10px; width:100%; }
.waitlist input { outline:revert; }
.waitlist input:focus-visible { outline:3px solid #a4442c; outline-offset:3px; }
.waitlist-status { margin:12px 0 0; }
.waitlist-status:empty { display:none; }
.waitlist-status[data-state="ok"] { padding:14px; border-radius:16px; background:var(--mint); }
.waitlist-status[data-state="error"] { color:#a4442c; }
.invitation-privacy { color:var(--muted); font-size:12px; margin-bottom:0; }
.site-footer,.doc+footer { padding:24px 0 110px; font-size:13px; border-top:1px solid var(--line); }
.site-footer .shell,.doc+footer .shell { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.site-footer nav,.doc+footer .links { display:flex; gap:24px; flex-wrap:wrap; }
.chapter-nav { position:fixed; bottom:0; left:0; right:0; z-index:20; height:76px; padding:12px max(32px,calc((100vw - 1200px)/2)); display:flex; align-items:center; gap:24px; background:var(--paper); border-top:1px solid var(--line); }
.chapter-track { display:flex; align-items:center; justify-content:space-between; flex:1; position:relative; }
.chapter-track::before { content:""; position:absolute; top:9px; left:16px; right:16px; height:3px; background:var(--line); }
.chapter-track>a { position:relative; min-height:46px; min-width:44px; display:grid; justify-items:center; gap:5px; text-decoration:none; color:var(--muted); font-size:11px; font-weight:800; }
.chapter-dot { width:17px; height:17px; border-radius:50%; background:var(--paper); border:2px solid #bbc8be; }
.chapter-track>a[aria-current] { color:var(--teal); }
.chapter-track>a[aria-current] .chapter-dot { border-color:var(--teal); background:var(--sage); box-shadow:0 0 0 4px var(--paper); }
.chapter-arrow { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; text-decoration:none; font-size:22px; }
.chapter-count { font-size:12px; font-weight:800; color:var(--muted); white-space:nowrap; }
.doc { max-width:850px; padding-block:56px 72px; display:grid; gap:20px; }
.doc h1 { font-size:42px; line-height:1.15; margin:0 0 12px; }
.doc h2 { font-size:26px; margin:20px 0 0; }
.doc p,.doc li { max-width:66ch; margin:0; color:var(--muted); }
.doc .updated { font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.doc ul { margin:0; padding-left:20px; display:grid; gap:8px; }
@media(min-width:1440px) { .story-inner { max-width:1280px; } .story-2 .story-inner { grid-template-columns:minmax(0,.75fr) minmax(0,1.35fr); } }
@media(max-width:1000px) {
 .shell { padding-inline:24px; } .masthead .shell { gap:18px; } .masthead nav { gap:18px; font-size:13px; } .header-actions { gap:16px; } .header-actions .pill { padding:12px 16px; }
 .story-inner { padding:0 40px; gap:32px; } .story-0 .story-inner { gap:24px; } .story-0 h1 { font-size:46px; } .hero-art-frame { height:400px; }
 .story-2 .story-inner { grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:28px; }
 .story-3 .story-inner,.story-4 .story-inner,.story-5 .story-inner { gap:32px; }
 .chapter-nav { gap:16px; padding-inline:24px; } .chapter-count { display:none; }
 .story-0 .story-copy>div:first-child { font-size:10px; letter-spacing:.06em; }
}
@media(max-width:760px) {
 html { scroll-padding-top:86px; } .masthead .shell { min-height:76px; gap:16px; padding-inline:20px; } .brand { font-size:29px; gap:7px; } .brand img { width:23px; height:36px; } .masthead nav { display:none; } .header-actions { gap:16px; font-size:13px; } .header-actions .pill { padding:10px 14px; } .header-actions .pill span { display:none; }
 .story-section { min-height:0; padding:48px 0; } .story-inner,.story-0 .story-inner,.story-2 .story-inner { grid-template-columns:minmax(0,1fr); padding:0 24px; gap:36px; }
 .story-0 .story-inner { padding-inline:32px 24px; } .story-0::before { left:16px; } .story-0 h1 { font-size:44px; max-width:500px; } .hero-art-frame { height:auto; aspect-ratio:520/480; max-width:520px; justify-self:center; align-content:normal; } .hero-art-frame>.story-visual { transform-origin:top left; }
 .story-0 .story-copy>div:first-child { font-size:10px; white-space:normal; }
 .story-0 .story-copy>div:last-child { gap:16px; flex-wrap:wrap; } .story-0 .story-copy>div:last-child>a { font-size:14px; } .hero-promises { gap:8px; } .hero-promises>div { padding-inline:3px; } .hero-promises>div>span:last-child { font-size:15px; }
 .story-section h2 { font-size:34px; } .story-1 .how-heading>div { flex-basis:100%; } .story-1 .feature-cards { grid-template-columns:1fr; } .story-1 .feature-cards>div { gap:16px; } .story-1 .feature-cards h3 { font-size:24px; }
 .story-2 .story-copy>div:last-child { max-width:420px; } .sample-card-body { padding:20px; } .sample-card-heading { padding:16px 20px; } .sample-card-body>div>p:first-child { font-size:22px; }
 .story-3 .story-copy { max-width:420px; margin:0 auto; } .story-3 .story-visual { grid-row:1; } .story-3 .story-copy>div { max-width:100%; }
 .story-4 .parent-preview { padding:20px 16px; } .parent-preview>div { gap:12px; } .parent-preview>div>div { min-width:0; } .parent-preview>div>span { white-space:normal; font-size:11px; }
 .story-5 .join-card { max-width:480px; justify-self:center; padding:24px; } .story-5 .story-copy>div:nth-of-type(2)>span { font-size:28px; }
 .chapter-nav { height:58px; padding:8px 16px; gap:12px; } .chapter-track>a { min-height:40px; justify-content:center; align-content:center; } .chapter-track>a>span:last-child { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); } .chapter-track::before { top:19px; } .chapter-arrow { flex:0 0 34px; width:34px; height:34px; }
 .site-footer,.doc+footer { padding-bottom:90px; } .doc { padding-block:40px; } .doc h1 { font-size:36px; }
}
@media(max-width:360px) { .header-actions { gap:10px; } .header-actions .pill { font-size:11px; padding-inline:10px; } .story-0 h1 { font-size:39px; } .chapter-nav { gap:6px; padding-inline:8px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } }
@media(max-width:760px) {
 .hero-art-frame { position: relative; }
 .hero-art-frame>.story-visual { position: absolute; left: 0; top: 0; }
}
@media(max-width:360px) { .chapter-arrow { display:none; } }