/* Nitwit Network: own design system (SPEC 3). Unbounded + Rubik + Shantell Sans. Cream paper, ink, tomato, lemon, sky, mint. */
@font-face{font-family:"Unbounded";src:url(/assets/fonts/unbounded-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Unbounded";src:url(/assets/fonts/unbounded-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Rubik";src:url(/assets/fonts/rubik-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Rubik";src:url(/assets/fonts/rubik-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Rubik";src:url(/assets/fonts/rubik-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Shantell Sans";src:url(/assets/fonts/shantell-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --paper:#FFF8E7; --paper-2:#FFF1CC; --card:#FFFFFF; --ink:#1B1B3A; --ink-2:#3C3C66; --muted:#6B6A86;
  --tomato:#FF4F3A; --tomato-d:#D63A27; --lemon:#FFD43B; --lemon-d:#E0B000; --sky:#4DA3FF; --sky-l:#DCEBFF; --mint:#1FB57F; --mint-l:#D5F5E8; --plum:#7A4FD6;
  --line:#1B1B3A; --r:18px; --r-sm:12px; --shadow:0 4px 0 var(--ink);
  --display:"Unbounded",system-ui,sans-serif; --body:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif; --hand:"Shantell Sans","Comic Sans MS",cursive;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--ink);text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--tomato)}
a:hover{color:var(--tomato-d)}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:10px;z-index:99}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.wrap.narrow{max-width:820px}
.small{font-size:.9rem;color:var(--muted)}
.muted{color:var(--muted)}
.hand{font-family:var(--hand);font-weight:500;color:var(--tomato-d)}
.kbd{font:500 .85em var(--body);background:var(--card);border:1.5px solid var(--ink);border-bottom-width:3px;border-radius:7px;padding:0 .4em;white-space:nowrap}

/* ---------- ticker + pill nav ---------- */
.ticker{background:var(--ink);color:#fff;font-size:.82rem}
.ticker-in{max-width:1180px;margin:0 auto;padding:7px 28px;display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap}
.ticker b{color:var(--lemon);font-weight:700}
.tk-free{background:var(--mint);color:#fff;border-radius:99px;padding:1px 9px;font-weight:500;margin-left:6px;white-space:nowrap}
.top{position:sticky;top:0;z-index:20;padding:12px 16px 0;background:linear-gradient(var(--paper) 70%,rgba(255,248,231,0))}
.pill{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:10px;background:var(--card);border:2px solid var(--ink);border-radius:99px;padding:6px 8px 6px 14px;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand-owl{width:34px;height:37px}
.word{font:800 1.02rem/1 var(--display);letter-spacing:-.02em;display:flex;gap:.28em}
.w1{color:var(--tomato)}
.links{list-style:none;display:flex;gap:2px;margin:0;padding:0}
.links a{display:block;text-decoration:none;font-weight:500;font-size:.95rem;padding:8px 12px;border-radius:99px;color:var(--ink-2)}
.links a:hover{background:var(--paper-2);color:var(--ink)}
.links a[aria-current]{background:var(--ink);color:#fff}
.bookchip{font-size:.85rem;font-weight:500;text-decoration:none;border:1.5px dashed var(--ink-2);border-radius:99px;padding:6px 12px;white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.bookchip[aria-current]{border-style:solid;background:var(--sky-l)}

/* ---------- buttons ---------- */
.btn{--bg:var(--card);--fg:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 1rem/1 var(--body);text-decoration:none;color:var(--fg);background:var(--bg);border:2px solid var(--ink);border-radius:14px;padding:13px 20px;box-shadow:0 4px 0 var(--ink);cursor:pointer;transition:transform .08s,box-shadow .08s;white-space:nowrap}
.btn:hover{color:var(--fg);transform:translateY(-1px);box-shadow:0 5px 0 var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn-lemon{--bg:var(--lemon)}
.btn-ink{--bg:var(--ink);--fg:#fff}
.btn-tomato{--bg:var(--tomato);--fg:#fff}
.btn-ghost{--bg:transparent;box-shadow:none;border-width:2px}
.btn-ghost:hover{background:var(--paper-2);box-shadow:none}
.btn-ghost.danger{border-color:var(--tomato-d);color:var(--tomato-d)}
.btn-lg{font-size:1.08rem;padding:17px 26px;border-radius:16px}
.btn-sm{font-size:.9rem;padding:9px 14px;border-radius:11px;box-shadow:0 3px 0 var(--ink)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:22px 0 0}
.cta-row form{margin:0}

/* ---------- type ---------- */
.display{font:800 clamp(2.4rem,5.6vw,4.6rem)/1.02 var(--display);letter-spacing:-.035em;margin:.2em 0 .35em}
.hl{background:linear-gradient(transparent 58%,var(--lemon) 58%,var(--lemon) 92%,transparent 92%);padding:0 .08em}
.h1{font:800 clamp(1.9rem,3.6vw,2.9rem)/1.1 var(--display);letter-spacing:-.03em;margin:.2em 0 .4em}
.h1 em{font-style:normal;color:var(--tomato)}
.h2{font:800 clamp(1.5rem,2.8vw,2.2rem)/1.15 var(--display);letter-spacing:-.025em;margin:0 0 .6em}
.h3{font:600 1.15rem/1.3 var(--display);letter-spacing:-.01em;margin:2em 0 .7em}
.eyebrow{font:700 .78rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:0;display:flex;align-items:center;gap:8px}
.eyebrow .dot{width:10px;height:10px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px var(--mint-l)}
.lede{font-size:1.18rem;line-height:1.6;max-width:36em;color:var(--ink-2)}
.lede-s{font-size:1.07rem;max-width:40em;color:var(--ink-2)}

/* ---------- hero ---------- */
.hero{padding:44px 0 64px}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.trust{list-style:none;padding:0;margin:26px 0 0;display:flex;gap:20px;flex-wrap:wrap;font-weight:500;font-size:.95rem}
.trust li::before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;background:var(--tomato);margin-right:8px;transform:rotate(45deg)}
.hero-card{position:relative;padding-top:88px}
.peek-owl{position:absolute;top:0;right:40px;width:84px;height:92px;z-index:2;transform:rotate(6deg)}
.qcard{background:var(--card);border:2px solid var(--ink);border-radius:var(--r);padding:22px 24px;box-shadow:6px 6px 0 var(--ink);margin:0 0 22px;min-width:0}
.qcard.demo{transform:rotate(-1.4deg);background:linear-gradient(var(--card),var(--card)) padding-box}
.qmeta{display:flex;gap:10px;align-items:center;justify-content:space-between;width:100%;padding:0;margin:0 0 10px;float:left}
.qmeta + *{clear:both}
.qn{font-size:.8rem;color:var(--muted);font-weight:500}
.qtext{font-size:1.12rem;font-weight:500;line-height:1.45;margin:4px 0 14px}
.demo-line svg{width:100%;height:auto;display:block}
.demo-range{fill:var(--lemon);opacity:.6}
.demo-q{font:800 22px var(--display);fill:var(--tomato)}
.demo-hint{margin:2px 0 14px;font-size:.9rem;color:var(--muted)}

/* chips per family */
.chip{display:inline-block;font:700 .72rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:6px 10px;border:1.5px solid var(--ink);background:var(--paper-2)}
.chip-calendar,.fam-calendar{--fc:#FFB4A8}.chip-clock,.fam-clock{--fc:#BFE0FF}.chip-doubling,.fam-doubling{--fc:#FFE38A}.chip-interest,.fam-interest{--fc:#B8F0D8}
.chip-birthday,.fam-birthday{--fc:#FFC9E8}.chip-dice,.fam-dice{--fc:#D9CCFF}.chip-sums,.fam-sums{--fc:#FFD6A8}.chip-folding,.fam-folding{--fc:#C9F2FF}
.chip-orders,.fam-orders{--fc:#E4F5B5}.chip-packing,.fam-packing{--fc:#F5D9C4}
.chip{background:var(--fc,var(--paper-2))}

/* ---------- bands ---------- */
.band{padding:72px 0;border-top:2px solid var(--ink)}
.steps{background:var(--sky-l)}
.steps-row{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.step{background:var(--card);border:2px solid var(--ink);border-radius:var(--r);padding:26px 24px 22px;position:relative}
.step h3{font:600 1.1rem/1.25 var(--display);margin:.6em 0 .4em}
.step p{margin:0;color:var(--ink-2)}
.step-n{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--lemon);border:2px solid var(--ink);font:800 1.2rem var(--display);box-shadow:0 3px 0 var(--ink)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.lede-s + .famgrid{margin-top:0}
.famgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.fam{border:2px solid var(--ink);border-radius:14px;padding:12px 14px;background:var(--card);display:flex;flex-direction:column;opacity:.45}
.fam.on{opacity:1;background:var(--fc);box-shadow:0 3px 0 var(--ink)}
.fam b{font:600 .95rem var(--display)}
.fam span{font-size:.85rem;color:var(--ink-2)}
.meterband{background:var(--paper-2)}
.meter-demo{background:var(--card);border:2px solid var(--ink);border-radius:var(--r);padding:28px;text-align:center;box-shadow:6px 6px 0 var(--ink)}
.meter-cap{font-size:1.15rem;margin:8px 0 0}
.meter-keys{list-style:none;padding:0;margin:0 0 16px}
.meter-keys li{display:flex;gap:10px;align-items:baseline;padding:6px 0;flex-wrap:wrap}
.mk{width:14px;height:14px;border-radius:4px;border:2px solid var(--ink);display:inline-block;flex:none;transform:translateY(2px)}
.mk-over{background:var(--tomato)}.mk-cal{background:var(--mint)}.mk-wide{background:var(--sky)}
.gauge{width:100%;max-width:300px;height:auto;display:block;margin:0 auto}
.g-track{fill:none;stroke:#E9E2CF;stroke-width:16;stroke-linecap:round}
.g-zone{fill:none;stroke:var(--mint);stroke-width:16;stroke-linecap:round}
.g-target{fill:var(--ink)}
.g-needle{stroke:var(--tomato);stroke-width:5;stroke-linecap:round}
.g-cal .g-needle{stroke:var(--mint)}.g-wide .g-needle{stroke:var(--sky)}
.g-hub{fill:var(--ink)}
.leaguesband{background:var(--card)}
.board-demo{list-style:none;margin:0;padding:0;border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:6px 6px 0 var(--ink);transform:rotate(1deg)}
.board-demo li{display:grid;grid-template-columns:44px 1fr auto;gap:10px;padding:14px 18px;border-bottom:2px solid var(--ink);align-items:center;background:var(--card)}
.board-demo li:last-child{border-bottom:0}
.board-demo .rk{font:800 1rem var(--display)}
.board-demo .sc{font:800 1.05rem var(--display)}
.board-demo .you{background:var(--lemon)}
.pricing-band{background:var(--paper)}

/* ---------- plans ---------- */
.plans{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:22px;align-items:stretch;margin:10px 0 0}
.plan{background:var(--card);border:2px solid var(--ink);border-radius:var(--r);padding:26px 24px;position:relative}
.plan h3{font:600 1.15rem var(--display);margin:0 0 6px}
.plan ul{padding-left:1.1em;margin:14px 0 0}
.plan li{margin:6px 0}
.plan-pass{background:var(--ink);color:#fff;box-shadow:8px 8px 0 var(--tomato);transform:translateY(-8px)}
.plan-pass .price-alt b{color:var(--lemon)}
.flag{position:absolute;top:-14px;left:22px;margin:0;background:var(--lemon);color:var(--ink);border:2px solid var(--ink);border-radius:99px;font:700 .75rem var(--body);padding:4px 12px;letter-spacing:.06em;text-transform:uppercase}
.price{margin:6px 0 0;display:flex;align-items:baseline;gap:8px}
.amt{font:800 2.6rem/1 var(--display);letter-spacing:-.04em}
.per{font-weight:500;opacity:.8}
.price-alt{margin:6px 0 0;font-size:.95rem;opacity:.9}
.preview-note{margin:26px 0 0;background:var(--mint-l);border:2px solid var(--mint);border-radius:var(--r-sm);padding:14px 18px;font-size:.95rem}
.note-pass{background:var(--card);border:2px dashed var(--ink-2);border-radius:var(--r-sm);padding:10px 14px;font-size:.92rem;margin:16px 0 0}

/* ---------- page heads ---------- */
.pagehead,.playhead,.scorehead{padding:36px 0 26px}
.msg{text-align:left}
.msg-owl{width:96px;height:104px;display:block;margin:0 0 6px}
.prose{padding-bottom:48px}
.prose p,.prose li{max-width:42em}
.rules li{margin:8px 0}
.howfig{margin:22px 0;background:var(--card);border:2px solid var(--ink);border-radius:var(--r);padding:12px 16px}
.howfig figcaption{font-size:.95rem;color:var(--ink-2)}
.famlist{list-style:none;padding:0}.famlist li{margin:8px 0}
.faq{margin:10px 0 60px;max-width:820px}
.faq details{background:var(--card);border:2px solid var(--ink);border-radius:var(--r-sm);padding:14px 18px;margin:10px 0}
.faq summary{font-weight:700;cursor:pointer}
.faq p{margin:10px 0 0;color:var(--ink-2)}

/* ---------- play form ---------- */
.qform{padding-bottom:40px}
.qform .qcard{border-radius:var(--r)}
.qform .qcard.has-err{border-color:var(--tomato);box-shadow:6px 6px 0 var(--tomato)}
.range{display:grid;grid-template-columns:1fr auto 1fr auto;gap:10px;align-items:end}
.rf{display:flex;flex-direction:column;gap:4px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);min-width:0}
.rf input,.field input{font:500 1.15rem var(--body);color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:12px;padding:12px 14px;width:100%;min-width:0}
.rf input:focus,.field input:focus{background:#fff;outline:3px solid var(--sky);outline-offset:1px}
.dash{font-family:var(--hand);font-size:1.05rem;padding-bottom:12px;color:var(--ink-2)}
.unit{font-weight:500;color:var(--ink-2);padding-bottom:13px;font-size:.95rem}
.width-read{min-height:1.4em;margin:8px 0 0;font-family:var(--hand);color:var(--plum);font-size:.95rem}
.err{color:var(--tomato-d);font-weight:700;margin:8px 0 0}
.alert{background:#FFE6E1;border:2px solid var(--tomato);border-radius:var(--r-sm);padding:12px 16px;margin:16px 0 0}
.submit-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:10px}
.submit-row p{margin:0;flex:1;min-width:220px}
fieldset{min-inline-size:0}

/* ---------- results ---------- */
.score-grid{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
.bigscore{background:var(--lemon);border:2px solid var(--ink);border-radius:24px;padding:18px 26px 16px;text-align:center;box-shadow:6px 6px 0 var(--ink);position:relative;min-width:210px}
.bigscore p{margin:0}
.bigscore .n{font:800 3.4rem/1 var(--display);letter-spacing:-.05em}
.bigscore .of{font:600 1.1rem var(--display);margin-left:4px}
.bigscore .hits{font-weight:500;font-size:.92rem;margin-top:4px}
.score-owl{width:62px;height:68px;position:absolute;top:-40px;right:-14px;transform:rotate(10deg)}
.keep{display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:var(--sky-l);border:2px solid var(--ink);border-radius:var(--r);padding:18px 20px;margin:0 0 22px}
.keep div{flex:1;min-width:240px}
.meter-strip{display:grid;grid-template-columns:150px 1fr auto;gap:20px;align-items:center;background:var(--card);border:2px solid var(--ink);border-radius:var(--r);padding:14px 20px;margin:0 0 22px}
.m-label{font:800 1.4rem var(--display);margin:2px 0}
.m-over .m-label{color:var(--tomato-d)}.m-cal .m-label{color:var(--mint)}.m-wide .m-label{color:var(--sky)}
.answers{list-style:none;padding:0;margin:0}
.ans{background:var(--card);border:2px solid var(--ink);border-radius:var(--r);padding:18px 22px;margin:0 0 18px;position:relative}
.ans.hit{box-shadow:6px 6px 0 var(--mint)}
.ans.miss{box-shadow:6px 6px 0 var(--tomato)}
.ans-top{display:flex;justify-content:space-between;align-items:center}
.stamp{font:800 1.05rem var(--display);padding:6px 12px;border-radius:10px;border:2px solid var(--ink);transform:rotate(3deg)}
.hit .stamp{background:var(--mint);color:#fff}
.miss .stamp{background:var(--tomato);color:#fff}
.nline{width:100%;height:auto;display:block;margin:4px 0}
.nl-axis{stroke:var(--ink);stroke-width:2.5}
.nl-tick{stroke:var(--ink);stroke-width:2}
.nl-tl{font:500 13px var(--body);fill:var(--ink-2)}
.nl-range{fill:var(--lemon);stroke:var(--ink);stroke-width:2;opacity:.85}
.is-miss .nl-range{fill:#FFD9D2}
.nl-brk{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.nl-pin{stroke:var(--tomato);stroke-width:3}
.is-hit .nl-pin{stroke:var(--mint)}
.nl-head{fill:var(--tomato);stroke:var(--ink);stroke-width:2}
.is-hit .nl-head{fill:var(--mint)}
.ans-nums{display:flex;gap:28px;flex-wrap:wrap;margin:6px 0}
.ans-nums div{display:flex;flex-direction:column}
.ans-nums dt{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ans-nums dd{margin:0;font-weight:700;font-size:1.05rem;overflow-wrap:anywhere}
.truth{color:var(--ink)}
.working{margin:8px 0 0;font-size:.95rem;color:var(--ink-2);overflow-wrap:anywhere}
.after{padding:10px 0 50px}

/* ---------- practice / archive ---------- */
.famcards{list-style:none;padding:0;margin:0 0 60px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.famcard{background:var(--fc);border:2px solid var(--ink);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:6px;box-shadow:0 4px 0 var(--ink)}
.famcard h2{font:600 1.1rem var(--display);margin:0}
.famcard p{margin:0;color:var(--ink-2);font-size:.95rem}
.famcard .fc-stat{font-family:var(--hand);color:var(--ink);margin-bottom:8px}
.famcard .btn{margin-top:auto;align-self:flex-start}
.daygrid{list-style:none;padding:0;margin:0 0 60px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.daytile{display:flex;flex-direction:column;text-decoration:none;background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:12px 14px;box-shadow:0 3px 0 var(--ink)}
.daytile.done{background:var(--mint-l)}
.dn{font:800 1.2rem var(--display)}
.dd{font-size:.88rem;color:var(--ink-2)}
.ds{font-weight:700;font-size:.9rem;margin-top:4px}

/* ---------- book ---------- */
.book-grid{display:grid;grid-template-columns:1fr 360px;gap:36px;align-items:center}
.statrow{list-style:none;padding:0;margin:0 0 22px;display:flex;gap:14px;flex-wrap:wrap}
.statrow li{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:10px 16px;display:flex;flex-direction:column;min-width:96px;flex:1 1 0}
.statrow b{font:800 1.6rem var(--display)}
.statrow span{font-size:.85rem;color:var(--ink-2)}
.meter-card{background:var(--card);border:2px solid var(--ink);border-radius:var(--r);padding:20px;box-shadow:6px 6px 0 var(--ink);text-align:center}
.meter-card .eyebrow{justify-content:center}
.famstats{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 28px}
.famstats li{display:grid;grid-template-columns:110px 1fr 90px;gap:10px;align-items:center;font-size:.92rem}
.famstats b{font:600 .85rem var(--display)}
.bar{height:12px;border:2px solid var(--ink);border-radius:99px;background:var(--card);overflow:hidden}
.fill{display:block;height:100%;background:var(--fc,var(--lemon));border-right:2px solid var(--ink)}
.fill.w0{width:0;border:0}.fill.w10{width:10%}.fill.w20{width:20%}.fill.w30{width:30%}.fill.w40{width:40%}.fill.w50{width:50%}.fill.w60{width:60%}.fill.w70{width:70%}.fill.w80{width:80%}.fill.w90{width:90%}.fill.w100{width:100%;border-right:0}
table.rounds,table.board{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;margin:0 0 18px}
.rounds th,.rounds td,.board th,.board td{text-align:left;padding:11px 14px;border-bottom:1.5px solid #E6DFCB}
.rounds th,.board th{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);background:var(--paper-2);border-bottom:2px solid var(--ink)}
.rounds tr:last-child td,.board tr:last-child td{border-bottom:0}
.board tr.you td{background:var(--lemon)}
.tag{font-size:.72rem;background:var(--sky-l);border:1.5px solid var(--ink);border-radius:99px;padding:1px 7px;margin-left:4px;white-space:nowrap}
.book-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.book-actions form{margin:0}
.keybox{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--card);border:2px dashed var(--ink);border-radius:var(--r-sm);padding:14px;margin:18px 0}
.keybox code{font-size:.9rem;overflow-wrap:anywhere;flex:1;min-width:0}
.stack{display:flex;flex-direction:column;gap:14px;max-width:560px;margin-top:10px}
.stack .btn{align-self:flex-start}
.field{display:flex;flex-direction:column;gap:6px;font-weight:700}
.check{display:flex;gap:10px;align-items:center;font-weight:500}
.check input{width:20px;height:20px}

/* ---------- leagues ---------- */
.joincard{background:var(--card);border:2px solid var(--ink);border-radius:var(--r);padding:20px;box-shadow:6px 6px 0 var(--ink);display:flex;flex-direction:column;gap:12px}
.joincard .btn{align-self:flex-start}
.codein{text-transform:uppercase;letter-spacing:.12em;font-family:var(--display) !important}
.leaguelist{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.leaguelist a{display:flex;flex-direction:column;text-decoration:none;background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:14px 16px;box-shadow:0 3px 0 var(--ink)}
.code{font-family:var(--display);letter-spacing:.08em;font-size:.85rem;color:var(--ink-2)}
.code.big{font-size:1.05rem;color:var(--ink)}
.startleague{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:10px 0 50px}
.startleague .small{flex:1;min-width:240px}
.callout{background:var(--sky-l);border:2px solid var(--ink);border-radius:var(--r-sm);padding:14px 18px;margin:12px 0 40px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.callout p{margin:0}
.leaguecta{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.leaguecta form{margin:0}

/* ---------- footer + tab bar ---------- */
.foot{background:var(--ink);color:#E9E7F5;margin-top:40px}
.foot a{color:#fff;text-decoration-color:var(--lemon)}
.foot-in{max-width:1180px;margin:0 auto;padding:52px 28px 24px;display:grid;grid-template-columns:1fr 1.4fr;gap:40px}
.foot-owl{width:64px;height:70px}
.foot-line{font:600 1.15rem/1.4 var(--display);max-width:22em;margin:10px 0 0;color:#fff}
.foot-line em{font-style:normal;color:var(--lemon)}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.foot-cols h2{font:700 .75rem var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--lemon);margin:0 0 10px}
.foot-cols a{display:block;padding:4px 0;text-decoration:none}
.foot-base{max-width:1180px;margin:0 auto;padding:18px 28px 28px;border-top:1px solid #3A3A62;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.88rem}
.foot-base p{margin:0}
.powered{font-weight:700}
.tabbar{display:none}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .links a{padding:8px 9px;font-size:.9rem}
  .bookchip{display:none}
}
@media (max-width:900px){
  .links{display:none}
  .bookchip{display:block}
  .hero-grid,.split,.book-grid{grid-template-columns:1fr;gap:32px}
  .steps-row{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .plan-pass{transform:none}
  .foot-in{grid-template-columns:1fr}
  .famstats{grid-template-columns:1fr}
  body{padding-bottom:74px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:10px;right:10px;bottom:10px;z-index:30;background:var(--card);border:2px solid var(--ink);border-radius:20px;box-shadow:0 4px 0 var(--ink);padding:6px}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.7rem;font-weight:700;text-decoration:none;color:var(--ink-2);padding:6px 0;border-radius:14px}
  .tabbar a[aria-current]{background:var(--lemon);color:var(--ink)}
  .tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .ticker-in{padding:6px 18px;font-size:.75rem;gap:4px}
  .top{padding:10px 10px 0}
  .bookchip{display:none}
  .word{font-size:.9rem}
  .hero{padding:26px 0 44px}
  .hero-card{padding-top:72px}
  .peek-owl{width:66px;height:72px;right:20px;top:4px}
  .band{padding:52px 0}
  .famgrid{grid-template-columns:1fr 1fr}
  .range{grid-template-columns:1fr 1fr;gap:8px 10px}
  .dash{display:none}
  .unit{grid-column:1/-1;padding:0}
  .score-grid{grid-template-columns:1fr}
  .bigscore{justify-self:start}
  .meter-strip{grid-template-columns:1fr;text-align:left}
  .meter-strip .gauge{max-width:200px;margin:0}
  .famstats li{grid-template-columns:96px 1fr 70px}
  .statrow{flex-wrap:nowrap;gap:8px}.statrow li{padding:8px 10px;min-width:0}
  .meter-card .gauge{max-width:220px}
  .rounds th:nth-child(3),.rounds td:nth-child(3){display:none}
  .board th:nth-child(4),.board td:nth-child(4){display:none}
  .rounds th,.rounds td,.board th,.board td{padding:9px 8px;font-size:.9rem}
  .foot-cols{grid-template-columns:1fr 1fr}
  .qcard{padding:18px 16px;box-shadow:4px 4px 0 var(--ink)}
}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover,.btn:active{transition:none;transform:none}}

/* ---------- v1.1.0: AdEngine banner (adengine.us) ----------
   One labelled slot between the main content and the footer, on public pages only (the controllers opt in). The label and
   the reserved height are on the <ins>, so when tag.js (or ae-size.js) hides a slot it cannot fill, the label and the space
   go with it. 110px = 16px label + 4px gap + 90px banner; 270px on phones (300x250). Every page already ends with 40px or
   more of space and the footer keeps its own 40px margin, so the slot adds no vertical margin of its own. display stays in
   this file and is never !important: tag.js hides a slot with style.display='none'. */
.ae-slot{padding:0 28px}
.ae-slot ins.adengine{display:block;max-width:728px;min-height:110px;margin:0 auto;text-align:center;text-decoration:none}
.ae-slot ins.adengine::before{content:"Advertisement";display:block;margin-bottom:4px;font:700 11px/16px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.ae-slot ins.adengine a{display:inline-block;vertical-align:top}
@media (max-width:767px){.ae-slot ins.adengine{max-width:300px;min-height:270px}}
/* phones: .wrap drops the bottom padding of prose and form pages, so the banner keeps 24px of its own above it */
@media (max-width:560px){.ae-slot{padding:0 18px}.ae-slot ins.adengine{margin-top:24px}}
@media print{.ae-slot{display:none}}