/* ============================================================
   Impromptu — Notebook design system (shared by every page)
   See design.md. Offline, no CDN — Kalam is self-hosted below.
   ============================================================ */
@font-face{
  font-family:"Kalam";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/kalam-400.woff2") format("woff2");
}
@font-face{
  font-family:"Kalam";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/kalam-700.woff2") format("woff2");
}
:root{
  --paper:#FCFBF7; --rule:#E7EEFB; --margin:#F0CFC1; --card:#FFFFFF;
  --ink:#20232B; --ink2:#2C5FE0; --blue:#2C5FE0; --blue2:#2E6BE6;
  --green:#1FA463; --green-d:#17824E; --purple:#7C5CD6; --pink:#E56A9B;
  --hl:#F6D64E; --red:#EA4335; --black:#20232B; --mut:#4A5260; --line:#E7E7EC;
  --hand:"Kalam","Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  --read:"Segoe UI",system-ui,Roboto,Arial,sans-serif;
  --pop:0 8px 20px rgba(28,45,90,.10);
  --cut:3px 3px 0 rgba(44,95,224,.20);
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--black); font-family:var(--read); font-size:16px; line-height:1.6;
  background-color:var(--paper);
  background-image:
    linear-gradient(90deg,transparent 60px,var(--margin) 60px,var(--margin) 62px,transparent 62px),
    repeating-linear-gradient(var(--paper) 0 31px,var(--rule) 31px 32px);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-family:var(--hand);font-weight:700;color:var(--ink);line-height:1.08}
p{margin:0}
a{color:var(--blue);text-decoration:none;cursor:pointer}
img{max-width:100%}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px 0 74px;position:relative;z-index:1}
@media(max-width:640px){.wrap{padding:0 18px 0 26px}}

/* helpers */
.hand{font-family:var(--hand)}
.read{font-family:var(--read)}
.mut{color:var(--mut)}
.hl{background-image:linear-gradient(transparent 55%,var(--hl) 55% 92%,transparent 92%);background-repeat:no-repeat;background-size:100% 100%;padding:0 3px;transition:background-size .7s ease .05s}
.reveal:not(.in) .hl{background-size:0% 100%}
.uline{border-bottom:2px solid var(--ink2);padding-bottom:1px}
.center{text-align:center}
.kick{font-family:var(--hand);font-size:16px;color:var(--red)}
.eyebrow{font-family:var(--hand);font-size:16px;color:var(--green)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--hand);font-weight:700;font-size:17px;
  padding:10px 22px;cursor:pointer;border:2px solid var(--blue);border-radius:12px;background:var(--blue);color:#fff;
  box-shadow:var(--cut);transition:transform .08s,box-shadow .12s}
.btn.yellow{background:var(--hl);border-color:var(--hl);color:var(--ink);box-shadow:3px 3px 0 rgba(200,160,20,.3)}
.btn.green{background:var(--green);border-color:var(--green)}
.btn.red{background:var(--red);border-color:var(--red)}
.btn:hover{box-shadow:4px 5px 0 rgba(28,61,116,.22)}
.btn:active{transform:translateY(1px)}
.btn.navy{background:var(--ink);border-color:var(--ink)}
.btn.out{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.out:hover{background:#fff}
.btn.sm{font-size:15px;padding:8px 16px;box-shadow:2px 2px 0 rgba(28,61,116,.2)}
.btn.lg{font-size:20px;padding:13px 30px}
.btn.block{width:100%;justify-content:center}

/* NAV (injected) — budget: 4 top-level items + 1 button. See design.md.
   NOTE: no flex-wrap anywhere. The old nav wrapped silently and grew onto the hero;
   if this ever overflows it must break visibly so it gets fixed. */
.nav{position:sticky;top:0;z-index:50;background:rgba(252,251,247,.93);backdrop-filter:blur(8px);border-bottom:2px dashed var(--line)}
.nav .r{display:flex;align-items:center;gap:6px;max-width:var(--maxw);margin:0 auto;padding:12px 30px 12px 74px}
.brand{font-family:var(--hand);font-weight:700;font-size:24px;color:var(--ink);line-height:.95}
.brand u{text-decoration:none;border-bottom:3px solid var(--ink);padding-bottom:1px}
.nav .links{display:flex;align-items:center;gap:4px;margin-left:22px}
.nav .links>a,.nav .ddb{font-family:var(--hand);font-size:17px;line-height:1.2;color:var(--black);padding:7px 12px;border-radius:8px;white-space:nowrap}
.nav .links>a:hover,.nav .ddb:hover{background:var(--hl)}
.nav .links>a.on,.nav .ddb.on{color:var(--ink);border-bottom:2px solid var(--hl)}
.nav .sp{flex:1}
.nav .end{display:flex;align-items:center;gap:16px}
.nav .login{font-family:var(--hand);font-size:17px;color:var(--mut);white-space:nowrap}
.nav .login:hover{color:var(--ink)}
.nav .join{white-space:nowrap}
/* Product menu */
.nav .dd{position:relative}
.nav .ddb{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;font-weight:400}
.nav .dd[data-open="true"] .ddb{background:var(--hl)}
.nav .ddb svg{transition:transform .16s}
.nav .dd[data-open="true"] .ddb svg{transform:rotate(180deg)}
.nav .menu{display:none;position:absolute;top:calc(100% + 9px);left:0;min-width:256px;
  background:var(--card);border:2px solid var(--ink);border-radius:12px;box-shadow:var(--cut);
  padding:7px;flex-direction:column;gap:1px}
.nav .dd[data-open="true"] .menu{display:flex}
.nav .menu a{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:8px}
.nav .menu a:hover,.nav .menu a.on{background:#F4F6FD}
.nav .menu .t{font-family:var(--hand);font-size:16.5px;color:var(--ink)}
.nav .menu .s{font-family:var(--read);font-size:12.5px;color:var(--mut);line-height:1.4}
/* burger + phone sheet */
.nav .burger{display:none;background:none;border:2px solid var(--ink);border-radius:9px;padding:6px 9px;cursor:pointer;color:var(--ink);gap:4.5px}
.nav .burger i{display:block;width:19px;height:2.2px;background:currentColor;border-radius:2px}
.nav .sheet{display:none;border-top:2px dashed var(--line);padding:4px 18px 18px 26px;flex-direction:column}
.nav.open .sheet{display:flex}
.nav .sheet .sgl{font-family:var(--hand);font-size:13px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;padding:15px 2px 3px}
.nav .sheet a.ml{font-family:var(--hand);font-size:19px;padding:12px 2px;color:var(--black);border-bottom:1px solid var(--line)}
.nav .sheet a.ml.sub{font-size:17px;padding-left:12px}
.nav .sheet a.ml.on{color:var(--blue)}
.nav .sheet .acts{display:flex;gap:10px;padding-top:18px}
.nav .sheet .acts>*{flex:1;justify-content:center}
@media(max-width:900px){
  .nav .r{padding:10px 18px 10px 26px}
  .brand .scr{display:none}
  .nav .links,.nav .end{display:none}
  .nav .burger{display:grid}
}

/* FOOTER (injected) */
.foot{border-top:3px solid var(--ink);margin-top:30px;background:var(--blue);color:#E7EEFF}
.foot .r{max-width:var(--maxw);margin:0 auto;padding:34px 30px 20px 74px}
.foot .g{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:22px}
.foot h4{font-family:var(--hand);font-size:18px;color:#fff;margin-bottom:8px}
.foot a{display:block;color:#EAF1FF;font-size:14px;padding:4px 0;font-family:var(--read)}
.foot a:hover{color:#fff}
.foot .fb{color:#fff;font-family:var(--hand);font-size:26px}
.foot .btm{border-top:1px solid rgba(255,255,255,.25);margin-top:22px;padding-top:14px;font-size:13px;color:#E7EEFB;text-align:center}
.foot .hl{color:#20242C}
@media(max-width:760px){.foot .g{grid-template-columns:1fr 1fr}.foot .r{padding:28px 18px 18px 26px}}

/* sections */
.sec{padding:44px 0}
.sec-h{max-width:64ch;margin:0 auto;text-align:center}
.sec-h h2{font-size:clamp(28px,4vw,46px)}
.sec-h .deck{font-family:var(--read);color:var(--black);margin-top:12px;font-size:17px}
.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}

/* note cards / torn paper */
.note{position:relative;background:var(--card);border:1px solid var(--line);padding:18px 18px 22px;box-shadow:var(--pop)}
.note .holes{display:flex;gap:12px;justify-content:center;margin:-4px 0 12px}
.note .holes i{width:9px;height:9px;border-radius:50%;background:var(--paper);border:1px solid #cbc0a2;box-shadow:inset 0 1px 2px rgba(0,0,0,.28)}
.note h3{font-size:22px;margin:4px 0 8px}
.note p{font-family:var(--read);font-size:15px;color:var(--mut)}
.tape{position:absolute;width:58px;height:20px;background:rgba(230,210,150,.6);border:1px solid rgba(0,0,0,.05)}
.dashed{border:2px dashed var(--ink);border-radius:12px;padding:16px 22px;background:rgba(255,255,255,.35)}
.sticky{background:#DCE8F6;border:1px solid #B9CCE6;padding:14px;font-family:var(--hand);color:var(--ink);box-shadow:2px 4px 8px rgba(0,0,0,.08)}

/* doodles */
.doodle{position:absolute;z-index:0;pointer-events:none}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes wig{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes bob{50%{transform:translateY(6px)}}
.wig{animation:wig 3s ease-in-out infinite}
.bob{animation:bob 1.6s ease-in-out infinite}
.draw path,.draw line,.draw polyline{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.4s ease forwards}
.reveal.in .draw path,.reveal.in .draw line,.reveal.in .draw polyline{animation:draw 1.4s ease forwards}

/* creative doodle bits */
.usq{background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='6'%20viewBox='0%200%2060%206'%3E%3Cpath%20d='M0%203%20Q%207.5%200%2015%203%20T%2030%203%20T%2045%203%20T%2060%203'%20stroke='%231C3D74'%20fill='none'%20stroke-width='1.6'/%3E%3C/svg%3E") repeat-x left bottom;background-size:auto 6px;padding-bottom:6px}
.dood-tag{position:absolute;z-index:3;font-family:var(--hand);font-size:12px;color:var(--ink);display:inline-flex;align-items:center;gap:3px}
.dood-tag .u{border-bottom:2px solid var(--hl);line-height:1}
.bubble{position:relative;background:#fff;border:2.5px solid var(--ink);border-radius:16px;padding:8px 12px;font-family:var(--hand);color:var(--ink);font-size:15px;box-shadow:2px 2px 0 rgba(28,61,116,.15)}
.bubble::after{content:"";position:absolute;left:22px;bottom:-13px;border:8px solid transparent;border-top-color:var(--ink)}
/* doodle scene (hero) */
.scene{position:relative;min-height:220px;margin:8px 0;padding:20px 0;border-top:2px dashed var(--line);border-bottom:2px dashed var(--line)}
.scene .lbl{position:absolute;font-family:var(--hand);font-size:17px;color:var(--ink);display:inline-flex;gap:5px;align-items:center}
.scene .lbl .u{border-bottom:2px solid var(--hl);padding-bottom:1px}
.scene .fig{position:absolute;left:32%;top:44px;width:150px}
.scene .sticky2{position:absolute;right:5%;top:32px;width:152px;background:#DCE8F6;border:1px solid #B9CCE6;padding:14px;transform:rotate(4deg);font-family:var(--hand);color:var(--ink);font-size:17px;line-height:1.7;box-shadow:2px 4px 8px rgba(0,0,0,.08)}
@media(max-width:820px){.scene{display:none}}

/* ===== CONSOLE (the interactive practice widget) ===== */
.console{position:relative;background:var(--card);border:1px solid var(--line);box-shadow:var(--pop);padding:18px}
.console .tabs{display:flex;gap:6px;margin-bottom:14px}
.console .tab{flex:1;font-family:var(--hand);font-size:16px;padding:9px 12px;text-align:center;border:2px solid var(--ink);border-radius:8px;background:transparent;color:var(--ink);cursor:pointer}
.console .tab.on{background:var(--ink);color:#fff}
.console .topic{position:relative;overflow:visible;border:2px dashed var(--line);border-radius:10px;padding:30px 14px 16px;text-align:center;background:rgba(255,255,255,.4)}
.console .topic .cat{font-family:var(--hand);font-size:14px;color:var(--red)}
.console .topic h3{font-size:23px;margin:6px 0}
.console .topic .q{font-family:var(--read);font-style:italic;color:var(--mut);font-size:14px}
.console .row{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--hand);font-size:14px;border:2px solid var(--ink);border-radius:999px;padding:5px 13px;background:transparent;color:var(--ink);cursor:pointer}
.chip.on{background:var(--hl);border-color:var(--ink)}
.chip.spin{border-style:dashed;color:var(--green);border-color:var(--green)}
.console .go-row{display:flex;align-items:center;gap:12px;margin-top:14px}
.console .fine{font-family:var(--read);font-size:12px;color:var(--mut);margin-top:8px}
.console .lever{position:absolute;right:2px;bottom:-2px;font-family:var(--hand);color:var(--ink);font-size:15px;text-align:center;display:inline-flex;align-items:center;gap:4px}
.console .lever svg{vertical-align:middle}

/* ---- creative console doodles ---- */
.console{overflow:visible}
.paperclip{position:absolute;top:-16px;left:26px;z-index:5;transform:rotate(5deg)}
.console .tab{position:relative}
.console .tab.on::after{content:"";position:absolute;left:16px;right:16px;bottom:5px;height:4px;background:var(--hl);border-radius:2px;z-index:-1}
.cat-stamp{display:inline-block;border:1.5px dashed var(--red);color:var(--red);font-family:var(--hand);font-size:12px;padding:1px 9px;border-radius:5px;transform:rotate(-2.5deg)}
.topic .sparkle{position:absolute;color:#E9BE2A;font-size:15px;pointer-events:none;animation:tw 2.2s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.mini-arr{margin-left:3px;vertical-align:middle}
.rec-btn{flex:1;justify-content:center;font-size:19px;padding:14px 22px}
.rec-btn .rd{width:13px;height:13px;border-radius:50%;background:#fff;color:var(--green);font-size:9px;display:inline-grid;place-items:center;animation:pulseW 1.3s infinite}
@keyframes pulseW{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.sw{display:inline-flex;gap:3px;align-items:flex-end;height:24px;flex:none}
.sw i{width:3px;background:var(--green);border-radius:2px;height:30%;animation:wv 1s ease-in-out infinite}
.sw i:nth-child(2){animation-delay:.15s}.sw i:nth-child(3){animation-delay:.3s}.sw i:nth-child(4){animation-delay:.1s}.sw i:nth-child(5){animation-delay:.22s}
/* spin roll + working lever */
.console .lever{cursor:pointer;user-select:none}
.console .lever:hover{color:var(--green)}
.console .lever.pulled svg{animation:pull .42s ease}
@keyframes pull{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(6px) rotate(-10deg)}}
.dice{display:inline-block}
.chip.spin:active .dice,.topic.rolling .dice{animation:diceRoll .45s linear infinite}
@keyframes diceRoll{to{transform:rotate(360deg)}}
.topic.rolling .topic-body{filter:blur(.5px)}
.topic.rolling h3{animation:jit .1s steps(2) infinite}
@keyframes jit{0%{transform:translateY(-2px)}100%{transform:translateY(2px)}}
.topic-body.landed h3{animation:pop .4s ease}
@keyframes pop{0%{transform:scale(.9)}55%{transform:scale(1.07)}100%{transform:scale(1)}}

/* ---- polish kit (applies to every page) ---- */
.circ{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50'%3E%3Cpath d='M110 25 C110 8 14 6 10 25 C7 42 104 46 114 24' fill='none' stroke='%23C4462E' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:100% 100%;padding:2px 12px}
.hr-doodle{height:12px;border:0;margin:24px 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='12' viewBox='0 0 80 12'%3E%3Cpath d='M1 6 Q10 1 20 6 T40 6 T60 6 T79 6' fill='none' stroke='%231C3D74' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center;background-size:auto 10px;opacity:.55}
.mscribble{position:absolute;left:20px;z-index:0;font-family:var(--hand);font-size:17px;color:var(--ink);opacity:.45;pointer-events:none}
.mscribble.r{color:var(--red)}
@media(max-width:760px){.mscribble{display:none}}
.note,.desk,.pass,.rate,.letter{transition:transform .16s ease,box-shadow .16s ease}
.note:hover,.pass:hover,.desk:hover{transform:translateY(-3px) rotate(-.4deg)}
.rate:hover,.letter:hover{transform:translateY(-3px)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reveal.in .note,.reveal.in .desk{animation:rise .5s ease both}
.reveal.in .note:nth-child(2),.reveal.in .desk:nth-child(2){animation-delay:.06s}
.reveal.in .note:nth-child(3),.reveal.in .desk:nth-child(3){animation-delay:.12s}
.reveal.in .note:nth-child(4),.reveal.in .desk:nth-child(4){animation-delay:.18s}

/* ===== HERO ===== */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;padding:26px 0 30px;min-height:calc(100vh - 150px)}
.hero .promise{font-size:clamp(38px,5.2vw,62px)}
.hero .sub{font-family:var(--read);font-size:19px;color:var(--black);margin-top:16px;max-width:34ch}
.hero .steps{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:8px}
.hero .steps li{font-family:var(--hand);font-size:20px;color:var(--ink)}
.hero .steps li b{color:var(--green)}
.hero .trust{font-family:var(--hand);font-size:15px;color:var(--mut);margin-top:16px}
@media(max-width:860px){.hero{grid-template-columns:1fr;min-height:0;padding-top:14px}}

/* marquee */
.marquee{overflow:hidden;border-top:2px dashed var(--line);border-bottom:2px dashed var(--line);background:rgba(255,255,255,.35);white-space:nowrap;padding:10px 0}
.marquee .track{display:inline-block;animation:marq 26s linear infinite}
.marquee .track span{font-family:var(--hand);font-size:18px;color:var(--ink);padding:0 22px}
.marquee .track b{color:var(--green)}
@keyframes marq{to{transform:translateX(-50%)}}

/* how it works */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
.step-n{font-family:var(--hand);font-size:20px;color:var(--red)}

/* corrections block */
.corr{position:relative;background:var(--card);border:1px solid var(--line);padding:22px 24px;box-shadow:var(--pop);margin-top:22px}
.corr h3{font-size:24px;color:var(--red)}
.corr .redpen{color:var(--red);font-family:var(--hand);font-size:15px}
.corr .ln{font-family:var(--read);font-size:16px;margin:10px 0;color:var(--black)}
.corr s{color:var(--red);text-decoration-thickness:2px}
.corr em{font-style:normal;background:linear-gradient(transparent 55%,#BFE3C9 55% 92%,transparent 92%)}
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.fig{text-align:center;border-left:1px dashed var(--line);padding:4px 6px}
.fig:first-child{border-left:0}
.fig .v{font-family:var(--hand);font-size:26px;color:var(--green);font-weight:700}
.fig .l{font-family:var(--read);font-size:13px;color:var(--mut)}
.fig .v.bad{color:var(--red)} .fig .v.warn{color:#B07A1E}

/* shadow demo (mini karaoke) */
.tele{background:#20263A;color:#EAECF5;border-radius:10px;padding:18px;font-family:var(--read)}
.tele .sln{margin:9px 0;color:#8891B4;font-size:15px}
.tele .past{color:#6A7196;text-decoration:line-through;text-decoration-color:#454c6e}
.tele .cur{color:#fff;font-size:20px;font-weight:600;background:linear-gradient(90deg,rgba(252,226,112,.34) 50%,transparent 50%);background-size:200% 100%;background-position:100% 0;animation:wipe 3s linear infinite;padding:1px 3px;border-radius:5px}
.tele .cur::before{content:"› ";color:var(--hl)}
@keyframes wipe{to{background-position:0 0}}
.wpm-pill{font-family:var(--hand);font-size:13px;background:var(--hl);border-radius:999px;padding:2px 10px;color:var(--ink)}

/* sections grid (curriculum desks) */
.desks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
.desk{border:1px solid var(--line);background:var(--card);padding:16px;box-shadow:var(--pop)}
.desk .t{font-family:var(--hand);font-size:20px;color:var(--ink)}
.desk .d{font-family:var(--read);font-size:13px;color:var(--mut);margin-top:4px}

/* comparison table */
.cmp{width:100%;border-collapse:collapse;margin-top:20px;font-family:var(--read);font-size:14px}
.cmp th,.cmp td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.cmp th{background:var(--ink);color:#fff;font-family:var(--hand);font-size:15px}
.cmp td.y{color:var(--green);font-weight:700} .cmp td.n{color:var(--red)}
.cmp tr:nth-child(even) td{background:var(--card)}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-wrap .cmp{min-width:520px}

/* testimonials / letters */
.letters{columns:3;column-gap:20px;margin-top:24px}
.letter{break-inside:avoid;background:var(--card);border:1px solid var(--line);padding:16px;margin-bottom:16px;box-shadow:var(--pop)}
.letter p{font-family:var(--read);font-style:italic;font-size:14.5px}
.letter .sig{font-family:var(--hand);color:var(--ink);margin-top:8px}
@media(max-width:820px){.letters{columns:1}}

/* faq accordion */
.faq{max-width:820px;margin:18px auto 0}
.faq .q{border-bottom:1px solid var(--line)}
.faq .q>button{width:100%;text-align:left;background:none;border:0;padding:14px 4px;font-family:var(--hand);font-size:19px;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;gap:12px}
.faq .q .a{font-family:var(--read);font-size:15px;color:var(--mut);padding:0 4px 14px;display:none}
.faq .q.open .a{display:block}
.faq .q>button .pm{color:var(--green)}

/* stats band */
.band{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:24px}
.stats{border:2px dashed var(--ink);border-radius:12px;padding:16px 22px;display:flex;gap:26px}
.stat{text-align:center}
.stat .v{font-family:var(--hand);font-size:28px;color:var(--ink);font-weight:700}
.stat .l{font-family:var(--read);font-size:14px;color:var(--mut)}

/* pricing */
.rates{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.rate{border:1px solid var(--line);background:var(--card);padding:20px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--pop)}
.rate.feat{border:2px solid var(--green);position:relative}
.rate.feat .tag{position:absolute;top:-13px;left:18px;background:var(--green);color:#fff;font-family:var(--hand);font-size:14px;padding:2px 12px;border-radius:6px}
.rate .nm{font-family:var(--hand);font-size:17px;color:var(--red)}
.rate .amt{font-family:var(--hand);font-size:40px;color:var(--ink)}
.rate .amt small{font-family:var(--read);font-size:14px;color:var(--mut)}
.rate ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-family:var(--read);font-size:14px}
.rate li{display:flex;gap:8px}.rate li::before{content:"✓";color:var(--green);font-weight:800}
.rate .btn{justify-content:center;margin-top:auto}

/* slider (case study) */
.slider{position:relative;margin-top:24px}
.slide{display:none;border:1px solid var(--line);background:var(--card);padding:22px;box-shadow:var(--pop)}
.slide.on{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center}
.slide .q{font-family:var(--read);font-size:17px}
.slide .who{font-family:var(--hand);color:var(--ink);margin-top:10px}
.slider .dots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.slider .dots b{width:11px;height:11px;border-radius:50%;background:var(--line);border:1px solid var(--ink);cursor:pointer}
.slider .dots b.on{background:var(--green)}
@media(max-width:700px){.slide.on{grid-template-columns:1fr}}

/* page header (interior pages) */
.phead{padding:20px 0 8px}
.phead .crumb{font-family:var(--hand);font-size:15px;color:var(--mut)}
.phead h1{font-size:clamp(34px,5vw,58px);margin-top:4px}
.phead .deck{font-family:var(--read);font-size:18px;color:var(--black);max-width:60ch;margin-top:12px}
.prose{max-width:70ch;font-family:var(--read);font-size:16px;color:var(--black)}
.prose h2{font-size:30px;margin:26px 0 10px}
.prose h3{font-size:22px;margin:20px 0 8px}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 14px;padding-left:22px}
.prose li{margin:5px 0}

/* two-col interior */
.split{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* responsive shared */
@media(max-width:860px){.cards3,.cards4,.desks,.figs,.rates{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cards3,.cards4,.desks,.figs,.rates{grid-template-columns:1fr}.stats{flex-direction:column;gap:12px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}

/* ================= APP-ONLY (app.html) ================= */
.app{max-width:900px;margin:0 auto;padding:24px 30px 70px 74px;position:relative;z-index:1}
.appscreen{display:none} .appscreen.on{display:block}
.folio{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--hand);font-size:15px;color:var(--mut);padding:8px 0;border-bottom:2px dashed var(--line);margin-bottom:20px}
.rec-topic{border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:10px;padding:20px;text-align:center}
.rec-topic .k{font-family:var(--hand);font-size:15px;color:#B9C7E4}
.rec-topic h2{color:#fff;font-size:26px;margin:6px 0 4px}
.rec-topic .q{color:#C7D2EA;font-style:italic;font-family:var(--read)}
.stage{border:1px solid var(--line);background:var(--card);padding:34px;text-align:center;margin-top:18px;box-shadow:var(--pop)}
.count{width:126px;height:126px;border:4px solid var(--green);border-radius:50%;display:grid;place-items:center;margin:8px auto 18px;font-family:var(--hand);font-size:52px;color:var(--green)}
.wave{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:84px;margin:6px 0 14px}
.wave i{width:5px;border-radius:99px;background:var(--red);height:20%;animation:wv 1s ease-in-out infinite}
@keyframes wv{0%,100%{height:16%}50%{height:92%}}
.rtime{font-family:var(--hand);font-size:44px;color:var(--ink)}.rtime.warn{color:#B07A1E}.rtime.over{color:var(--red)}
.recdot{width:11px;height:11px;border-radius:50%;background:var(--red);display:inline-block;animation:pulse 1.1s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(196,70,46,.5)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.controls{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.proc{max-width:520px;margin:26px auto;text-align:center}
.proc ol{list-style:none;padding:0;margin:20px 0 0;text-align:left;display:flex;flex-direction:column;gap:11px}
.proc li{display:flex;gap:12px;align-items:center;font-family:var(--read);font-size:14px;color:var(--mut);opacity:.5;transition:opacity .3s}
.proc li.done{opacity:1;color:var(--black)}
.proc li .t{width:22px;height:22px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:12px;flex:none;font-family:var(--hand)}
.proc li.done .t{background:var(--green);border-color:var(--green);color:#fff}
/* results */
.editnote{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
.en{border:1px solid var(--line);background:var(--card);padding:16px;box-shadow:var(--pop)}
.en .k{font-family:var(--hand);font-size:17px;margin-bottom:5px}
.en.good{border-left:5px solid var(--green)} .en.good .k{color:var(--green)}
.en.bad{border-left:5px solid var(--red)} .en.bad .k{color:var(--red)}
.en p{font-family:var(--read);font-size:14.5px}
.trs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
.tcol{border:1px solid var(--line);background:var(--card);box-shadow:var(--pop)}
.tcol .h{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line);font-family:var(--hand);font-size:16px}
.tbody{padding:14px;font-family:var(--read);font-size:15px;line-height:1.9}
.mf{color:var(--red);text-decoration:line-through;text-decoration-thickness:2px}
body.hidef .mf{text-decoration:none;color:var(--black)}
.mx{background:linear-gradient(transparent 55%,#BFE3C9 55% 92%,transparent 92%);font-weight:600}
.tgs{display:flex;gap:7px;padding:0 14px 12px;flex-wrap:wrap}
.tg{font-family:var(--hand);font-size:14px;border:2px solid var(--ink);border-radius:7px;padding:3px 10px;cursor:pointer;background:transparent;color:var(--ink)}
.tg.on{background:var(--hl)}
.rubric{border:1px solid var(--line);background:var(--card);padding:18px;margin:22px 0;box-shadow:var(--pop)}
.rr{display:grid;grid-template-columns:180px 1fr auto;gap:14px;align-items:center;padding:11px 0;border-top:1px dashed var(--line)}.rr:first-of-type{border-top:0}
.rn{font-family:var(--read);font-size:14px}
.scale{display:flex;gap:5px}.scale i{flex:1;height:10px;border-radius:3px;background:#E6DEC7;border:1px solid var(--line)}
.scale i.on{background:var(--ink)} .scale i.on.hi{background:var(--green)}
.rl{font-family:var(--hand);font-size:15px;color:var(--mut);min-width:92px;text-align:right}
.drill{border:1px solid var(--line);background:linear-gradient(120deg,#FBEFB6,var(--card));padding:20px;display:flex;gap:20px;justify-content:space-between;align-items:center;flex-wrap:wrap;box-shadow:var(--pop)}
.drill .k{font-family:var(--hand);font-size:16px;color:var(--red)}
.drill h3{font-size:23px;margin:2px 0}.drill p{font-family:var(--read);font-size:14px;color:var(--mut);max-width:52ch}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}
/* dashboard */
.arch{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}
.bars{display:flex;align-items:flex-end;gap:12px;height:150px;margin-top:18px;border-bottom:2px solid var(--ink);padding-bottom:2px}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;justify-content:flex-end;height:100%}
.bars .b .col{width:100%;background:var(--green);border:1px solid var(--ink);border-bottom:0;border-radius:5px 5px 0 0;position:relative}
.bars .b:last-child .col{background:var(--red)}
.bars .b .col::after{content:attr(data-v);position:absolute;top:-18px;left:0;right:0;text-align:center;font-family:var(--hand);font-size:12px;color:var(--mut)}
.bars .b small{font-family:var(--hand);font-size:13px;color:var(--mut)}
.issues{border:1px solid var(--line)}
.iss{display:flex;align-items:center;gap:14px;padding:13px 16px;border-top:1px dashed var(--line);flex-wrap:wrap;background:var(--card)}.iss:first-child{border-top:0}
.iss .t{flex:1;min-width:170px;font-family:var(--read);font-size:14.5px}
.iss .d{font-family:var(--hand);font-size:15px}.iss .d b{color:var(--green)}
/* shadow player */
.lib{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.pass{border:1px solid var(--line);background:var(--card);padding:18px;cursor:pointer;box-shadow:var(--pop)}
.pass:hover{background:#fff}
.pass .lv{font-family:var(--hand);font-size:14px;color:var(--red)}
.pass h3{font-size:22px;margin:5px 0 6px}
.pass .m{font-family:var(--read);font-size:13px;color:var(--mut)}
.player{border:1px solid var(--line);background:var(--card);box-shadow:var(--pop);position:relative;overflow:hidden}
.player .ph{display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:#fff;padding:10px 14px;font-family:var(--hand);font-size:15px}
.player .lines{padding:30px 24px;min-height:320px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.player .lines .sln{font-family:var(--read);font-size:15px;color:#A69C82;transition:color .3s}
.player .lines .past{color:var(--mut);text-decoration:line-through;text-decoration-color:var(--line)}
.player .lines .cur{color:var(--ink);font-family:var(--hand);font-size:26px;background:linear-gradient(90deg,rgba(31,107,74,.22) 50%,transparent 50%);background-size:200% 100%;background-position:100% 0;padding:2px 4px;border-radius:5px}
.player .lines .cur.run{animation:wipe linear forwards}
.player .lines .cur::before{content:"› ";color:var(--green)}
.pcontrols{display:flex;align-items:center;gap:16px;padding:12px 16px;border-top:2px dashed var(--line);flex-wrap:wrap}
.pcontrols .slide2{display:flex;align-items:center;gap:8px;font-family:var(--hand);font-size:14px;color:var(--mut)}
input[type=range]{accent-color:var(--green)}
.cdown{position:absolute;inset:0;background:rgba(251,245,228,.95);display:grid;place-items:center;font-family:var(--hand);font-size:96px;color:var(--green);z-index:3}
.pace-live{display:flex;align-items:center;gap:7px;font-family:var(--hand);font-size:14px;color:#C7D2EA}
.pace-live b{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3);border:1px solid #fff}.pace-live b.on{background:var(--hl)}

/* ===================== HYBRID BLUE-NOTEBOOK COMPONENTS ===================== */
.brand .blue{color:var(--blue)}
.brand .scr{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='8' viewBox='0 0 70 8'%3E%3Cpath d='M1 5 Q 9 1 18 5 T 36 5 T 54 5 T 69 4' stroke='%23F6C71E' fill='none' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left bottom;background-size:auto 8px;padding-bottom:7px}
/* badge pill */
.badge-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--hand);font-size:15px;color:var(--ink);background:#FFF6D6;border:1.5px solid #F0DE9A;border-radius:999px;padding:5px 15px}
.badge-pill .st{color:#F2B807}
/* pill controls */
.pillrow{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--read);font-size:14px;font-weight:600;color:var(--ink);background:#fff;border:1.6px solid var(--line);border-radius:12px;padding:8px 14px;cursor:pointer;transition:border-color .12s,background .12s,color .12s}
.pill:hover{border-color:var(--blue)}
.pill.on{border-color:var(--blue);background:#EEF3FE;color:var(--blue)}
.pill .pi{flex:none;display:inline-flex;color:var(--blue)}
.ctrl-lbl{display:flex;align-items:center;gap:7px;font-family:var(--hand);font-size:16px;color:var(--ink);margin:12px 0 7px}
.ctrl-lbl .n{color:var(--blue);font-weight:700}
/* spiral-bound panel */
.spiral{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:22px;padding:20px 24px 22px 46px;box-shadow:0 16px 42px -18px rgba(28,45,90,.28)}
.spiral::before{content:"";position:absolute;left:16px;top:22px;bottom:22px;width:14px;background-image:radial-gradient(circle at 7px 7px,#DADEEA 0 5px,transparent 6px);background-size:14px 26px;background-repeat:repeat-y}
@media(max-width:560px){.spiral{padding:22px 18px}.spiral::before{display:none}}
/* stats row */
.stats2{display:flex;gap:24px;flex-wrap:wrap;margin-top:24px}
.stat2{display:flex;align-items:center;gap:10px}
.stat2 .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none}
.stat2 .v{font-family:var(--hand);font-weight:700;font-size:22px;color:var(--ink);line-height:1}
.stat2 .l{font-family:var(--read);font-size:12px;color:var(--mut)}
/* doodle stars / cloud text */
.dstar{color:#F2B807}.dstar.g{color:var(--green)}.dstar.p{color:var(--purple)}
.cloud2{position:relative}
.cloud2 .ctext{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:15% 18%;font-family:var(--read);font-size:15px;color:var(--ink);line-height:1.55;transition:opacity .15s}
/* recolour a few warmth accents to fit blue system */
.kick{color:var(--blue)}
.corr h3,.corr .redpen{color:var(--red)}
/* pill console (shared) */
.console{overflow:visible}
.topic2{margin-top:14px;border:1.6px dashed var(--line);border-radius:12px;padding:16px;text-align:center;background:#FBFCFF}
.topic2 .cat{font-family:var(--hand);font-size:14px;color:var(--blue)}
.topic2 h3{font-size:22px;margin:5px 0}
.topic2 .q{font-family:var(--read);font-style:italic;color:var(--mut);font-size:13px}
.topic2.rolling .topic-body{filter:blur(.5px)}
.topic2.rolling h3{animation:jit .1s steps(2) infinite}
.go-row2{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.go-row2 .btn{flex:1;justify-content:center;white-space:nowrap}
.con-alt{font-family:var(--read);font-size:13px;color:var(--mut);margin-top:10px;text-align:center}
.brand{white-space:nowrap}
/* inline round modal */
.imp-ov{position:fixed;inset:0;z-index:200;background:rgba(24,32,58,.5);display:grid;place-items:center;padding:18px;overflow:auto}
.imp-ov[hidden]{display:none}
.imp-card{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:18px;max-width:620px;width:100%;padding:28px 26px 24px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);max-height:92vh;overflow:auto}
.imp-x{position:absolute;right:14px;top:12px;background:none;border:0;font-size:20px;color:var(--mut);cursor:pointer;line-height:1}
.imp-x:hover{color:var(--ink)}
.imp-state{display:none}.imp-state.on{display:block}
.imp-kick{font-family:var(--hand);font-size:18px;color:var(--blue);text-align:center}
.im-topic{font-family:var(--hand);font-size:22px;color:var(--ink);text-align:center;margin:8px 0 4px}
.imp-count{font-family:var(--hand);font-weight:700;font-size:66px;color:var(--blue);text-align:center;margin:10px 0;font-variant-numeric:tabular-nums}
.imp-count.red{color:var(--red)}
.imp-cap{font-family:var(--read);font-size:13px;color:var(--mut);text-align:center;margin-bottom:18px}
.imp-state .btn{margin:0 auto;justify-content:center}
.imp-recline{text-align:center;font-family:var(--hand);color:var(--red);font-size:15px;display:flex;align-items:center;justify-content:center;gap:7px}
.imp-wave{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:78px;margin:14px 0}
.imp-wave i{width:5px;border-radius:99px;background:var(--red);height:20%;animation:wv 1s ease-in-out infinite}
.imp-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed var(--line);padding-bottom:8px}
.imp-date{font-family:var(--read);font-size:12px;color:var(--mut)}
.imp-tip{background:#FFFDF2;border:1px solid #ECE3B8;border-radius:10px;padding:12px 14px;margin-top:14px;font-family:var(--read);font-size:14px;color:var(--ink)}
.imp-tip b{color:var(--red);font-family:var(--hand)}
.imp-cta{display:flex;gap:12px;justify-content:center;margin-top:16px;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){.imp-wave i{animation:none;height:40%}}
.imp-cta .btn{margin:0}
.imp-spinbtn .dice{display:inline-block}
.imp-state.on .imp-spinbtn:active .dice{animation:diceRoll .45s linear infinite}
.im-topic.imp-roll{animation:pop .42s ease}
/* console category + difficulty dropdowns */
.con-mode{width:100%;margin-top:6px;font-family:var(--read);font-size:14px;padding:10px 12px;border:1.6px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);cursor:pointer}
.con-mode:focus{border-color:var(--blue);outline:none}
.con-diff{margin-top:8px}
@media(min-width:520px){
  .console .con-mode{width:calc(58% - 5px);display:inline-block;vertical-align:top}
  .console .con-diff{width:calc(42% - 5px);margin-left:10px;margin-top:6px}
}
/* difficulty chip on the spun topic */
.topic2 .cat .lvl{color:var(--mut);font-family:var(--read);font-style:italic;font-size:12.5px}
/* home hero cloud slot-roll */
.cloud-svg.rolling{border-color:var(--blue2)}
.cloud-svg.rolling .ct{filter:blur(.4px);animation:jit .1s steps(2) infinite}
.cloud-svg.landed .ct{animation:pop .4s ease}
/* ===== daily booster ===== */
.boost-day{font-family:var(--hand);color:var(--blue);font-size:15px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:14px}
.vcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 15px;box-shadow:var(--pop)}
.vcard .vw{display:flex;align-items:center;justify-content:space-between;gap:8px}
.vcard .vw b{font-size:18px;color:var(--ink)}
.vcard .say{background:#EEF3FF;border:1px solid #D5E0FB;color:var(--blue);border-radius:8px;width:32px;height:32px;cursor:pointer;font-size:15px;flex:0 0 auto;line-height:1}
.vcard .say:hover{background:#E0EAFF}
.vcard .ph{font-family:var(--read);font-size:12px;color:var(--mut);margin-top:2px}
.vcard .mn{font-family:var(--read);font-size:13.5px;color:var(--black);margin-top:7px}
.vcard .co{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.vcard .co span{background:#F4F6FB;border:1px solid var(--line);border-radius:99px;padding:2px 9px;font-family:var(--read);font-size:11.5px;color:var(--mut)}
.vcard .ex{font-family:var(--read);font-style:italic;font-size:13px;color:var(--mut);margin-top:8px;border-left:2px solid var(--hl);padding-left:9px}
.chiplist{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.chip2{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-family:var(--read);font-size:13.5px;color:var(--ink);box-shadow:var(--pop)}
.chip2 b{color:var(--blue);font-family:var(--hand);font-size:15px;display:block;margin-bottom:2px}
.qlist{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--pop)}
.qcard .qq{font-size:19px;color:var(--ink);margin:0 0 8px}
.irec{display:grid;grid-template-columns:96px 1fr;gap:5px 12px;font-family:var(--read);font-size:13.5px;color:var(--black)}
.irec b{color:var(--blue);font-family:var(--hand)}
.qcard .qact{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.shadowbox{background:#0E1220;border-radius:14px;padding:18px 20px;margin-top:14px}
.shadowbox .sl{font-family:var(--read);font-size:16px;padding:6px 0;color:#B9C7E4}
.shadowbox .sl.hi{color:#fff}
.linkrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media(max-width:620px){.linkrow{grid-template-columns:1fr}}
.mistake{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--read);font-size:14px;padding:9px 0;border-bottom:1px dashed var(--line)}
.mistake .bad{color:var(--red)}.mistake .good{color:var(--green-d)}
.mission{background:#FFFDF2;border:1px solid #ECE3B8;border-radius:12px;padding:16px 18px;margin-top:10px}
.mission ul{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
@media(max-width:620px){.mission ul{grid-template-columns:1fr}}
.mission li{display:flex;gap:8px;font-family:var(--read);font-size:14px;color:var(--ink)}
.mission li .ck{color:var(--green)}
.boost-sub{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.boost-sub input{flex:1;min-width:180px;font-family:var(--read);font-size:14px;padding:11px 14px;border:1.6px solid var(--line);border-radius:10px}
.boost-sub input:focus{border-color:var(--blue);outline:none}
/* ===== audit fixes: modal chips + note, mobile stacking, seams ===== */
.imp-htitle{display:flex;align-items:center;gap:8px}
.imp-badge{font-family:var(--read);font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--blue);background:#EAF1FF;border:1px solid #D5E0FB;border-radius:99px;padding:2px 9px;white-space:nowrap}
.imp-note{font-family:var(--read);font-size:13px;color:var(--mut);margin-top:8px}
.miss-list li{align-items:center}
.missck{width:22px;height:22px;flex:0 0 auto;border:1.8px solid var(--green);border-radius:6px;background:#fff;color:var(--green-d);font-weight:700;cursor:pointer;line-height:1;display:inline-grid;place-items:center;font-size:13px;padding:0}
.missck.on{background:var(--green);color:#fff;border-color:var(--green)}
.missck:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.soon-card{position:relative;opacity:.72}
.soon-card:hover{transform:none;box-shadow:var(--pop)}
.soon{position:absolute;right:12px;top:10px;background:var(--hl);color:#20242C;font-family:var(--hand);font-size:12px;padding:1px 9px;border-radius:99px;transform:rotate(4deg);z-index:2}
.btn.dis{opacity:.55;pointer-events:none;cursor:default}
/* reserve injected-nav height so the page doesn't jump on load */
#site-nav{min-height:58px}
/* darker, more confident card/body copy (was faint --mut grey) */
.note p,.desk .d{color:#39404C}
/* stack the app review grids on phones (were locked 2/3-col) */
@media(max-width:640px){
  .trs,.editnote,.lib{grid-template-columns:1fr}
  .arch{grid-template-columns:1fr 1fr}
  .rr{grid-template-columns:1fr;gap:4px}
  .cards2{grid-template-columns:1fr}
}
/* lift the hero console above the decorative character doodle on mobile */
@media(max-width:920px){.char-row{display:none}}

/* ---- print / PDF ----
   .reveal starts at opacity:0 and is switched on by an IntersectionObserver in
   site.js as each section scrolls into view. Printing never scrolls, so every
   section below the first screen stayed invisible and printed as a blank sheet —
   a "Save as PDF" of the homepage came out 9 pages with 5 of them empty, and the
   product's whole middle (how it works, features, pricing, proof) was missing.
   The same applies to anything that renders without scrolling: PDF exports, some
   link-preview crawlers, reader modes.

   prefers-reduced-motion already forces .reveal visible for the same underlying
   reason; print needs the identical escape hatch. */
@media print{
  .reveal{opacity:1!important;transform:none!important}
  .reveal:not(.in) .hl{background-size:100% 100%!important}
  /* Keep a card from being split across a page break mid-sentence. */
  .note,.desk,.card,.q{break-inside:avoid;page-break-inside:avoid}
  /* The ticker is an infinite animation; frozen on paper it is just a clipped row. */
  .marquee{display:none}
}

/* ---- phone: calm it down ----
   Side by side with a competitor on a real iPhone the difference was density, not
   breakage: ruled paper behind every word, a red margin rule, five hand-drawn
   doodles, and dashed + solid borders + shadows stacked on adjacent surfaces. All
   of it is charming at desktop size and noise at 390px, where the topic and the
   record button are the only things that matter.

   The notebook identity in docs/design.md is unchanged above 700px — this is a
   phone-only quieting, not a rebrand. */
@media (max-width:700px){
  /* The ruled lines and the red margin rule are texture. At phone scale they sit
     directly behind body copy and cost contrast for nothing. */
  body{background-image:none}

  /* One border treatment per surface. Dashed outlines were competing with solid
     ones and with shadows; on a phone the card alone is enough separation. */
  .note,.card,.spiral{box-shadow:none}
  .spiral{border-radius:14px}

  /* Decorative SVG only — the icons that carry meaning (stat glyphs, the mic on
     the record button, nav chevrons) are untouched. */
  .plane,.hangbulb,.thinker,.char-row,.dstar{display:none}

  /* Air. The topic is the hero, so give it room and let everything else recede. */
  .wrap{padding-left:16px;padding-right:16px}
  .sec{padding-top:26px;padding-bottom:26px}
  .deck{font-size:15px}
}