/* CoachKite public pages. Same materials as the app: white paper, pencil grey, exercise book covers, one typeface. */
:root{
  /* named colours, the same names as the app (public/index.html). Never a raw colour outside the book, the preview banner and the draft note. */
  --paper:#FFFFFF;--raised:#FFFFFF;--glass:rgba(255,255,255,.94);--wash:#F4F7FA;--tint:#EEF3FB;--neutral-bg:#F1F1F1;
  --hair:#E6E6E6;--line:#C9C9C9;--line-strong:#B5B5B5;--rule:#A9C8E8;--margin:#E0474C;
  --pencil:#3A3A3A;--soft:#666;--faint:#707070;--hint:#767676;--solid:#3A3A3A;--on-solid:#FFFFFF;
  --link:#1F5FAD;--go:#1F5FAD;--go-hover:#184B8A;--on-go:#FFFFFF;
  --ok:#2E7D4F;--ok-ink:#1F5C38;--ok-bg:#E9F5EC;--now:#B71C2B;--now-bg:#FBE3E4;--now-wash:#FFF8F7;--warm-ink:#B4521A;--amber-bg:#FFF4D6;
  --rail:720px;color-scheme:light}
/* dark: follows the device, or this device's choice from the app (ck.theme). The book labels and marbled frames keep their own colours */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#1C1E22;--raised:#262A30;--glass:rgba(28,30,34,.94);--wash:#23262B;--tint:#1F2A38;--neutral-bg:#2C2F35;
  --hair:#30343A;--line:#454A52;--line-strong:#666C75;--rule:#33475F;--margin:#8C3F44;
  --pencil:#ECE9E3;--soft:#AEB2B8;--faint:#9EA3AA;--hint:#878C93;--solid:#ECE9E3;--on-solid:#1C1E22;
  --link:#93BCF2;--go:#2F6CC0;--go-hover:#285FA8;--on-go:#FFFFFF;
  --ok:#4CAF7A;--ok-ink:#93D9AE;--ok-bg:#1D3326;--now:#F4AAB1;--now-bg:#3B2024;--now-wash:#2C2326;--warm-ink:#F1B88A;--amber-bg:#382D17;
  color-scheme:dark}}
:root[data-theme=dark]{--paper:#1C1E22;--raised:#262A30;--glass:rgba(28,30,34,.94);--wash:#23262B;--tint:#1F2A38;--neutral-bg:#2C2F35;
  --hair:#30343A;--line:#454A52;--line-strong:#666C75;--rule:#33475F;--margin:#8C3F44;
  --pencil:#ECE9E3;--soft:#AEB2B8;--faint:#9EA3AA;--hint:#878C93;--solid:#ECE9E3;--on-solid:#1C1E22;
  --link:#93BCF2;--go:#2F6CC0;--go-hover:#285FA8;--on-go:#FFFFFF;
  --ok:#4CAF7A;--ok-ink:#93D9AE;--ok-bg:#1D3326;--now:#F4AAB1;--now-bg:#3B2024;--now-wash:#2C2326;--warm-ink:#F1B88A;--amber-bg:#382D17;
  color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--pencil);font:400 18px/1.6 "Google Sans Flex",system-ui,sans-serif;font-variation-settings:"ROND" 30;-webkit-font-smoothing:antialiased}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:3px}
.preview{background:#F2C230;color:#222;padding:10px 24px;font-size:15px;font-weight:500}
.top{max-width:1040px;margin:0 auto;padding:18px 24px;display:flex;justify-content:space-between;align-items:center}
.word{font-weight:700;font-size:19px;color:var(--pencil);text-decoration:none}
.top nav{display:flex;gap:22px;font-size:16px;font-weight:500}
.top nav a{color:var(--pencil)}
main{max-width:1040px;margin:0 auto;padding:8px 24px 64px}
.crumbs{font-size:14px;color:var(--soft);margin:8px 0 20px;display:flex;flex-wrap:wrap;gap:8px}
.crumbs a{color:var(--soft)}
.crumbs .sep{color:var(--line)}
.hero{display:grid;grid-template-columns:1fr 150px;gap:48px;align-items:start;margin-bottom:8px}
/* any page with a shorter heading (40 letters or fewer), and every town page: heading and lead take half the width, so they sit balanced against the book. Longer names keep the full width so they stay on three lines. Wide screens only: on tablets and phones half is too narrow */
.h1-place{display:block}
@media(min-width:900px){.hero.half{grid-template-columns:minmax(0,50%) 150px;justify-content:space-between}}
h1{font-weight:700;font-size:clamp(32px,4.6vw,52px);line-height:1.06;letter-spacing:-.03em;margin:6px 0 0;text-wrap:balance;max-width:var(--rail)}
h2{font-weight:700;font-size:23px;letter-spacing:-.01em;margin:0 0 10px;text-wrap:balance}
/* one reading rail for every page: headings, the lead, paragraphs, lists and tables share the same left edge and width */
p,li,dd{text-wrap:pretty;max-width:var(--rail)}
.hero .lead{text-wrap:balance}
/* plain pages (no book beside the heading) keep the heading and lead narrow, so they wrap like the pages with a book */
@media(min-width:900px){.hero.plain h1{max-width:12em}.hero.plain .lead{max-width:30em}}
.lead{font-size:21px;line-height:1.55;margin:18px 0 8px;max-width:var(--rail)}
section{padding:26px 0;border-top:1px solid var(--hair)}
main>section:first-of-type{margin-top:22px}
.small{font-size:15px;color:var(--soft)}
.src{font-size:13px;color:var(--faint);margin-top:12px}
.src a{color:var(--faint)}
/* the exercise book that labels each page */
.book{--c:#1F5FAD;container-type:inline-size;position:relative;width:150px;margin-top:6px;aspect-ratio:7/10;background:var(--c);border-radius:2px 7px 7px 2px;box-shadow:inset 9px 0 0 rgba(0,0,0,.13),0 10px 18px -12px rgba(0,0,0,.45);transform:rotate(2deg)}
.book .label{position:absolute;left:16%;right:9%;top:15%;background:#fff;color:#3A3A3A;border-radius:3px;padding:8% 9% 6%;font-size:7cqw;line-height:1.2}
.book i{display:block;font-style:normal;color:#5F5F5F}
.book b{display:block;font-size:9.5cqw;font-weight:700;line-height:1.2;border-bottom:1px solid #9A9A9A;padding:1px 0 3px;margin-bottom:7%}
.book b.l{font-size:8.2cqw}.book b.xl{font-size:7cqw;line-height:1.15}
.book b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;overflow-wrap:break-word;hyphens:manual}
/* the home page's example books: a child's name and class, written smaller than a cover title, as on the app's books */
.book.eg .label{font-size:5.4cqw}.book.eg b{font-size:7.8cqw;line-height:1.25}.book.eg b:last-child{font-size:6.6cqw;font-weight:500;margin-bottom:0}
@media(max-width:640px){.hero{grid-template-columns:1fr 84px;gap:14px}.book{width:84px}.lead{font-size:19px}}
table.dates{border-collapse:collapse;width:100%;max-width:var(--rail);font-size:17px}
table.dates th{text-align:left;font-size:14px;font-weight:500;color:var(--soft);border-bottom:2px solid var(--pencil);padding:8px 12px 8px 0}
table.dates td{padding:11px 12px 11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.dates td:first-child{width:46%}
table.dates tr.past td{color:var(--faint)}
table.dates tr.cur td{font-weight:700}
table.dates tr.cur td{background:var(--now-wash)}table.dates tr.cur td:first-child{padding-left:10px;border-radius:6px 0 0 6px}table.dates tr.cur td:last-child{border-radius:0 6px 6px 0}
/* key dates timeline: a rail with a dot per step and a red "today" marker */
ol.tl{list-style:none;margin:6px 0 0;padding:0;max-width:820px;position:relative}
ol.tl li{position:relative;padding:0 0 22px 30px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 24px;font-size:17px}
ol.tl li::before{content:"";position:absolute;left:5px;top:12px;bottom:-12px;width:2px;background:var(--rule)}
ol.tl li:last-child{padding-bottom:4px}ol.tl li:last-child::before{display:none}
ol.tl li::after{content:"";position:absolute;left:0;top:5px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--pencil);box-sizing:border-box}
ol.tl .d{color:var(--pencil)}
ol.tl li.done{color:var(--faint)}ol.tl li.done .d{color:var(--faint)}
ol.tl li.done::after{background:var(--line-strong);border-color:var(--line-strong)}ol.tl li.done::before{background:var(--line)}
ol.tl li.cur{font-weight:700}ol.tl li.cur::after{background:var(--margin);border-color:var(--margin)}
ol.tl li.today{color:var(--now);font-weight:600}
ol.tl li.today .d{color:var(--now);font-weight:500}
ol.tl li.today::after{left:-2px;top:4px;width:16px;height:16px;background:var(--margin);border:4px solid var(--now-bg);border-style:solid}
ol.tl.ahead li::before{background:none;border-left:2px dashed var(--rule);width:0}
ol.tl.ahead li::after{border-color:var(--rule)}
ol.tl.ahead li.today::after{border-color:var(--now-bg)}
details.last{margin-top:18px;border-top:1px solid var(--hair);padding-top:12px}
details.last summary{cursor:pointer;color:var(--link);font-size:16px;padding:6px 0 6px 30px;position:relative;list-style:none}
details.last summary::-webkit-details-marker{display:none}
details.last summary::before{content:"";position:absolute;left:2px;top:50%;margin-top:-5px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor;transition:transform .15s}
details.last[open] summary::before{transform:rotate(90deg)}
details.last summary,details.last summary:focus,details.last summary:focus-visible{outline:none;box-shadow:none}
details.last summary:focus-visible{text-decoration:underline;text-decoration-thickness:2px}
@media(prefers-reduced-motion:reduce){details.last summary::before{transition:none}}
details.last ol.tl{margin-top:14px}
@media(max-width:640px){ol.tl li{grid-template-columns:1fr;font-size:16px}ol.tl .d{color:var(--soft)}ol.tl li.done .d{color:var(--faint)}}
.tag{font-size:13px;color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:0 6px;margin-left:6px;font-weight:500}
dl.papers{display:grid;grid-template-columns:150px 1fr;gap:10px 20px;margin:0}
dl.papers dt{font-weight:700}
dl.papers dd{margin:0}
@media(max-width:640px){dl.papers{grid-template-columns:1fr}dl.papers dd{margin-bottom:10px}}
ul.links{list-style:none;padding:0;margin:0;max-width:var(--rail)}
ul.links li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--rule)}
ul.links li span{color:var(--soft);font-size:15px;text-align:right}
/* --hint: the lightest grey that still passes 4.5:1 for small text, for secondary lines only */
ul.links li span.via{display:block;margin-top:2px;color:var(--hint);font-size:14px}
ul.links li span.via a{color:inherit;position:relative;z-index:1}ul.links li span.via a:hover{color:var(--link)}
@media(max-width:860px){ul.links li span.via a{padding:12px 0}}
ul.facts{padding-left:20px;max-width:var(--rail)}
ul.facts li{margin:6px 0}
ol.blocks{padding-left:24px}
ol.blocks li{margin:6px 0}
dl.faq{margin:0;max-width:var(--rail)}
dl.faq dt{font-weight:700;margin-top:16px}
dl.faq dd{margin:4px 0 0}
.now{background:var(--wash);border-radius:8px;padding:20px 22px;border-top:0;margin-top:22px}
.evidence{padding:4px 0;margin:16px 0}
.evidence p{margin:0}
.quote{margin:18px 0}
.quote blockquote{margin:0;font-size:20px}
.quote figcaption{font-size:15px;color:var(--soft);margin-top:4px}
.note p{max-width:40em}
.foot{max-width:1040px;margin:0 auto;padding:28px 24px 48px;border-top:1px solid var(--hair);font-size:15px;color:var(--soft)}

/* home page */
.home-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;border-top:0;padding:40px 0 56px}
.home-hero h1{font-size:clamp(38px,5.4vw,64px)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 14px}
.go{display:inline-flex;align-items:center;min-height:52px;padding:0 24px;background:var(--go);color:var(--on-go);border-radius:6px;font-weight:700;text-decoration:none}
.go:hover{background:var(--go-hover)}
.ghost{display:inline-flex;align-items:center;min-height:52px;padding:0 20px;border:1.5px solid var(--line);border-radius:6px;color:var(--pencil);font-weight:500;text-decoration:none}
.ghost:hover{border-color:var(--pencil)}
.pile{position:relative;height:340px}
.pile .book{position:absolute;width:180px}
.pile .book:nth-child(1){left:4%;top:34px;transform:rotate(-7deg)}
.pile .book:nth-child(2){left:30%;top:0;transform:rotate(3deg)}
.pile .book:nth-child(3){left:18%;top:72px;transform:rotate(-1deg)}
.feature p{max-width:40em}
@media(max-width:760px){.home-hero{grid-template-columns:1fr;gap:0;padding-top:16px}.pile{order:-1;height:170px}.pile .book{width:96px}.pile .book:nth-child(3){top:36px}}

/* ---------- home page (body.h) ---------- */
.h{font-size:18px}
.h-wrap{max-width:1160px;margin:0 auto;padding:0 28px}
.h-narrow{max-width:760px}
.h-top{position:sticky;top:0;z-index:5;background:var(--glass);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
/* the hairline only shows once the page has scrolled under the header */
.h-top.over{border-bottom-color:var(--hair)}
.h-bar{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:20px}
.h-bar nav{display:flex;align-items:center;gap:26px;font-size:16px;font-weight:500}
.h-bar nav a{color:var(--pencil);text-decoration:none}
.h-bar nav a:hover{text-decoration:underline}
.h-bar nav a.go{color:var(--on-go);text-decoration:none}
.small-go{min-height:42px!important;padding:0 18px!important;font-size:15px}
@media(max-width:860px){.h-bar nav a:not(.go):not([href="/app"]){display:none}}
.h section{border-top:0;padding:0}
.h h2{font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-.025em;margin:0 0 16px}
.h p{max-width:34em}
.h-split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.h-rev .h-copy{order:2}
@media(max-width:860px){.h-split{grid-template-columns:1fr;gap:36px}.h-rev .h-copy{order:0}}
/* hero */
.h-hero{padding:72px 0 64px!important}
.h-hero h1{font-size:clamp(42px,6vw,76px);line-height:1;letter-spacing:-.04em;margin:0}
.h-lead{font-size:clamp(19px,1.8vw,22px);line-height:1.5;margin:24px 0 0;color:var(--pencil)}
.h-cta{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 0!important}
.h-note{font-size:15px;color:var(--soft);margin-top:16px}
/* the product views: a page from the child's exercise book */
.h-shot{display:flex;justify-content:center}
.h-page{position:relative;width:min(440px,100%);background:var(--raised);border-radius:6px 10px 10px 6px;box-shadow:0 1px 0 rgba(0,0,0,.06),0 30px 60px -30px rgba(20,30,60,.45);overflow:hidden}
.h-page-top{display:flex;justify-content:space-between;background:var(--c);color:var(--on-go);font-weight:700;font-size:15px;padding:12px 20px}
.h-ruled{padding:20px 26px 24px;line-height:36px}
.h-k{font-size:14px;font-weight:500;margin:0;color:var(--pencil)}
.h-k.soft{color:var(--soft)}
.h-q{font-size:40px;font-weight:700;letter-spacing:-.02em;margin:0;line-height:72px}
.h-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 10px}
.h-opts span{display:grid;place-items:center;height:52px;border:1.5px solid var(--line);border-radius:8px;font-weight:700;font-size:20px;background:var(--paper);line-height:1}
.h-opts span.on{border-color:var(--ok);background:var(--ok-bg);color:var(--ok-ink)}
.h-ok{font-size:15px;color:var(--ok-ink);margin:0;line-height:24px;padding:6px 0}
.h-bar2{height:8px;border-radius:4px;background:var(--hair);margin:12px 0 4px;overflow:hidden}
.h-bar2 i{display:block;height:100%;background:var(--c)}
.h-card{width:min(460px,100%);background:var(--raised);border:1px solid var(--hair);border-radius:12px;padding:24px 26px;box-shadow:0 24px 50px -32px rgba(20,30,60,.4)}
.h-card-t{font-weight:700;font-size:17px;margin:0 0 14px}
.h-card-f{font-size:15px;color:var(--soft);margin:14px 0 0}
.h-tl{list-style:none;margin:0;padding:0}
.h-tl li{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:10px 0 10px 12px;border-bottom:1px solid var(--rule);font-size:16px}
.h-tl li span{color:var(--soft)}
.h-tl li.done{color:var(--faint)}.h-tl li.done b{font-weight:500}
.h-tl li.now{background:var(--now-wash);border-radius:6px}
.h-sk{list-style:none;margin:0;padding:0}
.h-sk li{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:10px 0;font-size:16px}
.h-sk li i{grid-column:1/-1;height:6px;border-radius:3px;background:linear-gradient(to right,var(--ok) var(--w),var(--hair) var(--w))}
.h-sk b{font-size:14px;font-weight:500;color:var(--soft)}
.h-sk b.sec{color:var(--ok-ink)}.h-sk b.tri{color:var(--warm-ink)}
.h-days{display:flex;gap:6px;margin-bottom:16px}
.h-days span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700;background:var(--neutral-bg);color:var(--soft)}
.h-days span.on{background:var(--go);color:var(--on-go)}
.h-mail dl{margin:0;display:grid;grid-template-columns:110px 1fr;gap:10px 14px;font-size:16px}
.h-mail dt{color:var(--soft)}.h-mail dd{margin:0}
.h-res{list-style:none;margin:0 0 16px;padding:0}
.h-res li{display:grid;grid-template-columns:1fr auto 60px;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:16px}
.h-res em{font-style:normal;color:var(--soft);text-align:right}
.h-focus{margin:6px 0 0;font-weight:700}.h-focus span{display:block;font-weight:400;font-size:15px;color:var(--soft)}
/* facts strip */
.h-facts{border-top:1px solid var(--hair)!important;border-bottom:1px solid var(--hair)!important;background:var(--wash)}
.h-facts ul{list-style:none;margin:0;padding:26px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.h-facts li{font-size:15px;color:var(--soft);line-height:1.45}
.h-facts b{display:block;color:var(--pencil);font-size:16px;margin-bottom:2px}
@media(max-width:860px){.h-facts ul{grid-template-columns:1fr 1fr}}
/* how it works */
.h-how{padding:96px 0 40px!important}
.h-steps{list-style:none;counter-reset:s;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.h-steps li{counter-increment:s;border-top:3px solid var(--pencil);padding-top:18px}
.h-steps li::before{content:counter(s);display:block;font-weight:700;font-size:15px;color:var(--soft);margin-bottom:10px}
.h-steps b{display:block;font-size:21px;line-height:1.25;letter-spacing:-.01em;margin-bottom:8px}
.h-steps span{color:var(--pencil)}
@media(max-width:860px){.h-steps{grid-template-columns:1fr}}
/* feature rows */
.h-row{padding:88px 0!important}
.h-alt{background:var(--wash)}
.h-more{display:inline-block;margin-top:8px;font-weight:500}
.h-links{display:grid;gap:10px;margin-top:20px}
.h-links a{font-weight:500}
.h-family{padding:88px 0!important}
.h-books{position:relative;height:300px}
.h-books .book{position:absolute;width:170px}
.h-books .book:nth-child(1){left:6%;top:30px;transform:rotate(-6deg)}
.h-books .book:nth-child(2){left:36%;top:0;transform:rotate(2deg)}
.h-books .book:nth-child(3){left:62%;top:46px;transform:rotate(-2deg)}
@media(max-width:860px){.h-books{height:220px}.h-books .book{width:118px}}
/* research */
.h-research{padding:88px 0!important;background:var(--wash)}
.h-sub{color:var(--soft);margin:0 0 30px}
.h-evs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.h-ev{margin:0;background:var(--raised);border:1px solid var(--hair);border-radius:12px;padding:22px 24px}
.h-ev figcaption{font-weight:700;font-size:18px;margin-bottom:10px}
.h-ev p{font-size:16px;margin:0 0 10px}
.h-ev .h-strength{font-size:14px;color:var(--soft)}
.h-ev a{font-size:14px;color:var(--soft)}
@media(max-width:860px){.h-evs{grid-template-columns:1fr}}
/* questions */
.h-faq{padding:96px 0!important}
.h-faq details{border-bottom:1px solid var(--hair);padding:18px 0}
.h-faq summary{cursor:pointer;font-weight:700;font-size:19px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.h-faq summary::-webkit-details-marker{display:none}
.h-faq summary::after{content:"+";font-weight:400;font-size:24px;line-height:1;color:var(--soft)}
.h-faq details[open] summary::after{content:"\2212"}
.h-faq details p{margin:12px 0 0}
/* close */
.h-close{background:var(--go);color:var(--on-go);padding:88px 0!important}
.h-close h2{color:var(--on-go)}
.h-close p{color:var(--tint)}
.go.light{background:var(--paper);color:var(--link)}.go.light:hover{background:var(--tint)}
.ghost.light{color:var(--on-go);border-color:rgba(255,255,255,.5)}.ghost.light:hover{border-color:var(--paper)}
/* footer */
.h-foot{padding:56px 0 64px;border-top:1px solid var(--hair);font-size:15px}
.h-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.h-cols div{display:flex;flex-direction:column;gap:8px}
.h-cols b{font-size:14px;color:var(--pencil);margin-bottom:4px}
.h-cols a{color:var(--soft);text-decoration:none}.h-cols a:hover{text-decoration:underline}
.h-cols p{color:var(--soft);margin:6px 0 0}
@media(max-width:860px){.h-cols{grid-template-columns:1fr 1fr}}
.h main{max-width:none;margin:0;padding:0}
.h-hero h1{max-width:9.5em}

@media(max-width:860px){.h-hero{padding:36px 0 48px!important}.h-row,.h-family,.h-research,.h-close{padding:64px 0!important}.h-how,.h-faq{padding:64px 0 24px!important}}

/* ---------- shared footer, explore more, closing band ---------- */
.top nav a{text-decoration:none}.top nav a:hover{text-decoration:underline}
.more{margin-top:12px}
.more-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px 40px;margin-top:6px}
.more h3{font-size:15px;font-weight:700;margin:0 0 6px;color:var(--pencil)}
.more ul{list-style:none;margin:0;padding:0}
.more li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--hair);font-size:16px}
.more li span{color:var(--soft);font-size:14px;white-space:nowrap}
.band{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;background:var(--wash);border-radius:12px;padding:28px 32px!important;margin:40px 0 0;border-top:0!important}
.band h2{font-size:23px;margin:0 0 4px}
.band p{margin:0;color:var(--soft)}
.band-cta{display:flex;gap:10px;flex-wrap:wrap}
.dir-h{font-size:15px;font-weight:700;color:var(--soft);margin:18px 0 4px}
.draft{background:#FFF4D6;border:1px solid #F2C230;border-radius:8px;padding:12px 16px;font-weight:500;margin:6px 0 18px}
.sf{border-top:1px solid var(--hair);margin-top:72px;font-size:15px}
.sf-wrap{max-width:1160px;margin:0 auto;padding:48px 28px 28px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:32px}
.sf-wrap div{display:flex;flex-direction:column;gap:9px}
.sf-wrap b{font-size:14px;color:var(--pencil);margin-bottom:2px}
.sf-wrap a{color:var(--soft);text-decoration:none}
.sf-wrap a:hover{color:var(--pencil);text-decoration:underline}
.sf-brand p{margin:8px 0 0;color:var(--pencil);font-size:15px;line-height:1.5;max-width:22em}
.sf-brand .word{color:var(--pencil);font-weight:700;font-size:19px}
/* Kite's signature (public/kite-signature.svg), drawn in the text colour so it follows light and dark */
.sf-brand .sf-sig{display:block;width:104px;aspect-ratio:863/543;margin-top:14px;background:var(--pencil);-webkit-mask:url(/kite-signature.svg) left center/contain no-repeat;mask:url(/kite-signature.svg) left center/contain no-repeat}
.sf-small{font-size:14px}
.sf-small a{color:var(--soft);text-decoration:underline!important}
.sf-legal{max-width:1160px;margin:0 auto;padding:18px 28px 40px;display:flex;gap:22px;flex-wrap:wrap;font-size:14px;color:var(--soft);border-top:1px solid var(--hair)}
.sf-legal a{color:var(--soft)}
@media(max-width:860px){.sf-wrap{grid-template-columns:1fr 1fr}.sf-brand{grid-column:1/-1}}
.h .sf{margin-top:0}
body:not(.h) .sf-wrap,body:not(.h) .sf-legal{max-width:1040px;padding-left:24px;padding-right:24px}
.sf-wrap .sf-act{display:flex;flex-direction:row;align-items:center;gap:18px;margin:6px 0 4px}
.sf-wrap .sf-act a.go{color:var(--on-go);text-decoration:none;min-height:44px;padding:0 18px;font-size:15px}
.sf-wrap .sf-act a.go:hover{color:var(--on-go);text-decoration:none}
.sf-wrap .sf-act a.sf-signin{color:var(--pencil);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.sf a,.sf a:hover,.sf-legal a,.sf-legal a:hover{text-decoration:none!important}
.sf a:hover{color:var(--pencil)}
/* directories: one rule between items, none around groups */
section.dir{border-top:0;padding:18px 0 8px}
section.dir+section.dir{padding-top:22px}
ul.links li:last-child{border-bottom:0}

/* home header: the pilot button waits until the hero's button has scrolled past */
.js .h-topcta{max-width:0;padding:0!important;margin-left:-26px;opacity:0;transform:translateY(-6px);overflow:hidden;white-space:nowrap;border-width:0;pointer-events:none}
.js .cta-on .h-topcta{max-width:340px;padding:0 18px!important;margin-left:0;opacity:1;transform:none;pointer-events:auto}
/* on a phone the header button keeps to its first words, so it fits beside the name */
.h-topcta .cta-more{display:inline}
@media(max-width:480px){.h-topcta .cta-more{display:none}}
.top nav a{white-space:nowrap;min-width:24px;text-align:center}
@media(max-width:480px){.top{padding:6px 16px}.top nav{gap:14px;font-size:15px;align-items:center}}
@media(prefers-reduced-motion:no-preference){.js .h-topcta{transition:max-width .35s ease,padding .35s ease,margin-left .35s ease,opacity .25s ease .1s,transform .35s ease}}
.h-close p.small{font-size:15px;margin-top:22px;max-width:52ch}
.h-close p a:not(.go){color:var(--on-go);text-decoration-color:rgba(255,255,255,.5)}

/* phones and tablets: every link at least 44px tall to tap, without changing how it looks */
@media(max-width:860px){
  .top nav a,.h-bar nav a:not(.go){padding:12px 0}.top nav a{display:inline-block}
  .crumbs{margin:0 0 12px;row-gap:0}
  .crumbs a,.crumbs span{padding:12px 0}
  ul.links li{position:relative}
  ul.links li a::after{content:"";position:absolute;inset:0}
  .sf-wrap div{gap:0}
  .sf-wrap div a{padding:11px 0}
  .sf-wrap b{margin-bottom:4px}
  .sf-legal{gap:0 22px;padding-top:6px}
  .sf-legal a{padding:12px 0}
  .h-faq summary{padding:12px 0}
  .more li{position:relative;padding:11px 0}
  .more li a::after{content:"";position:absolute;inset:0}
  .top .word,.h-bar .word{padding:10px 0}
}
/* phones: the title sits beside a small book, the intro runs full width beneath */
@media(max-width:640px){
  .hero{grid-template-columns:1fr 64px;gap:0 16px}
  .hero>div:not(.book){display:contents}
  .hero h1{grid-column:1;grid-row:1;align-self:center}
  .hero .book{grid-column:2;grid-row:1;width:64px;align-self:start}
  .hero .lead{grid-column:1/-1;grid-row:2}
}

/* one line of evidence beside the claim it supports; the detail and its caveats live on /about/research */
.h-proof{margin-top:18px;font-size:15px;color:var(--soft)}
.h-proof a{color:var(--soft);white-space:nowrap}
/* the hero headline names the child, so it is longer: a wider copy column and a slightly smaller size keep it to three lines */
@media(min-width:861px){.h-hero .h-split{grid-template-columns:1.3fr 1fr}}
.h-hero h1{font-size:clamp(40px,5.2vw,66px);max-width:12em;text-wrap:balance}

/* a clear first action near the top of long pages */
.top-cta{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin:18px 0 8px;padding:16px 20px;border-radius:10px;background:var(--wash)}
.top-cta p{margin:0;max-width:52ch}
ul.links li.rich{display:block}ul.links li.rich .rich-h{display:flex;justify-content:space-between;gap:6px 16px;flex-wrap:wrap}ul.links li.rich .small{margin:4px 0 0;font-size:15px;color:var(--ink,var(--pencil));max-width:62ch}ul.links li.rich .soft{color:var(--pencil);font-size:13px;white-space:nowrap}
/* pricing: two plans side by side, each headed by the exercise book's blue rule */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px 56px;max-width:960px;margin-top:8px}
.plan{border-top:2px solid var(--rule);padding-top:14px}.plan h3{margin:0}.plan .small{margin:18px 0 0;color:var(--soft)}.plan ul.facts{margin-top:14px}
.plan .price{display:flex;align-items:stretch;gap:12px;margin:18px 0 0}
.plan .price b{font-size:58px;line-height:.74;letter-spacing:-.035em;padding-top:2px}
.plan .price .per{display:flex;flex-direction:column;justify-content:space-between;font-size:17px;line-height:1.12;color:var(--pencil)}.plan .price .per span+span{color:var(--soft)}
/* the two plans share rows, so prices, savings and lists start at the same height side by side */
@supports (grid-template-rows:subgrid){.plans{grid-template-rows:auto auto auto 1fr}.plan{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}}
/* no movement for people who ask their device for less of it */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* questions that open one at a time: the question is the row, a plus turns to a minus, the answer slides open */
.qa{max-width:var(--rail);border-top:1px solid var(--hair)}
.qa details{border-bottom:1px solid var(--hair)}
.qa summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;font-weight:700;font-size:18px;line-height:1.4}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 14px no-repeat;color:var(--soft);transition:transform .2s ease}
.qa details[open] summary::after{background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat;transform:rotate(180deg)}
.qa summary:hover{color:var(--link)}
.qa summary:focus-visible{outline:3px solid var(--link);outline-offset:2px;border-radius:4px}
.qa .qa-a{padding:0 34px 20px 0}.qa .qa-a p{margin:0 0 10px}.qa .qa-a p:last-child{margin:0}

.plan-cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 8px}
/* pricing: choose yearly or monthly, and the prices change to match */
/* one dark pill slides between the two choices; the buttons themselves stay plain */
.paytoggle{position:relative;display:inline-flex;gap:4px;padding:4px;border:1.5px solid var(--line);border-radius:10px;margin:4px 0 22px}
.pt-pill{position:absolute;top:4px;bottom:4px;left:4px;width:0;border-radius:7px;background:var(--solid);pointer-events:none}
.paytoggle.ready .pt-pill{transition:transform .38s cubic-bezier(.65,0,.25,1),width .38s cubic-bezier(.65,0,.25,1)}
.paytoggle button{position:relative;z-index:1;min-height:44px;padding:0 16px;white-space:nowrap;border:0;border-radius:7px;background:none;font:inherit;font-weight:500;color:var(--pencil);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:color .3s ease;-webkit-tap-highlight-color:transparent}
.paytoggle button[aria-checked=true]{color:var(--on-solid)}
.paytoggle button:focus{outline:none}.paytoggle:has(button:focus-visible){box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--link)}
@media(prefers-reduced-motion:reduce){.paytoggle.ready .pt-pill,.paytoggle button{transition:none}}
.paytoggle .save{font-size:13px;font-weight:700;padding:2px 7px;border-radius:4px;background:var(--ok-bg);color:var(--ok-ink)}
.paytoggle .save{transition:background .3s ease}.paytoggle button[aria-checked=true] .save{background:var(--paper);color:var(--ok-ink)}
@media(max-width:420px){.paytoggle button{padding:0 11px;font-size:15px}.paytoggle .save{font-size:12px;padding:2px 5px}}
.hero.plain{grid-template-columns:1fr;margin-top:24px}

/* year guides */
.topics{list-style:none;margin:12px 0 0;padding:0;max-width:var(--rail,720px)}
.topics li{padding:12px 0;border-bottom:1px solid var(--hair,var(--hair))}
.topics li:last-child{border-bottom:0}
.topics b{display:block;font-weight:600;margin-bottom:2px}
.topics span{color:var(--soft,var(--soft))}
.words{list-style:none;margin:12px 0 0;padding:0;columns:4 140px;column-gap:24px;max-width:var(--rail,720px)}
.words li{padding:3px 0;break-inside:avoid}
.help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:12px}
.help-grid>div{background:var(--wash);border-radius:10px;padding:18px 20px}
.help-grid h3{font-size:17px;margin:0 0 6px}.help-grid ul{margin:0;padding-left:18px}.help-grid li{margin-top:6px;line-height:1.45}
nav.years{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 8px}
nav.years a,nav.years span{padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);text-decoration:none;font-weight:600;min-height:44px;display:inline-flex;align-items:center}
nav.years span{background:var(--solid);border-color:var(--solid);color:var(--on-solid)}

/* one hairline between items, none after the last: the section rule below already closes the list */
ul.links li:last-child,.more li:last-child,.qa details:last-child,.h-faq details:last-child,.h-tl li:last-child,.h-res li:last-child,table.dates tr:last-child td{border-bottom:0}
@media(max-width:620px){ul.links li{flex-direction:column;gap:2px}ul.links li span{text-align:left;font-size:14px}}

/* the action on a school page, about that school */
.school-cta{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;margin:22px 0 10px;padding:22px 24px;border-radius:10px;background:var(--wash);max-width:var(--rail)}
.school-cta h2{font-size:21px;margin:0 0 4px}.school-cta p{margin:0;max-width:46ch;color:var(--soft)}.school-cta .go{white-space:nowrap}
@media(max-width:620px){.school-cta{padding:18px}.school-cta .go{width:100%;text-align:center}}

/* the schools directory: search, type and area */
.find{max-width:var(--rail);margin:18px 0 6px}.find-q{width:100%;font:inherit;font-size:18px;padding:12px 14px;border:1.5px solid var(--line-strong);border-radius:10px;margin-top:4px}
.find-q:focus-visible,.find select:focus-visible{outline:3px solid var(--link);outline-offset:1px}
.find-row{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin-top:12px}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chips button{font:inherit;font-size:15px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper);cursor:pointer}
.chips button[aria-pressed=true]{background:var(--solid);border-color:var(--solid);color:var(--on-solid)}
.find select{font:inherit;font-size:15px;padding:7px 34px 7px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none}
[hidden]{display:none!important}
.find-count{margin:14px 0 4px;color:var(--soft)}.find-list li[hidden]{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.find-more{margin:20px 0 8px}.find-more .ghost{font:inherit;font-weight:500;background:var(--paper);cursor:pointer;min-height:46px}
.find-more .ghost:hover{border-color:var(--pencil)}.find-more .ghost:focus-visible{outline:3px solid var(--link);outline-offset:2px}
.find-list li.end{border-bottom:0}

/* the same header on every page: sticky, same links, the free class button always there */
.top-wrap{position:sticky;top:0;z-index:5;background:var(--glass);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.top-wrap .top{min-height:68px;padding-top:0;padding-bottom:0}
.top nav{align-items:center;gap:26px}
.top nav a[aria-current=page]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.top nav a.go{color:var(--on-go);text-decoration:none;min-height:42px;padding:0 16px;font-size:15px}
@media(max-width:860px){.top nav a:not(.go):not([href="/app"]){display:none}.top nav{gap:16px}}
.top nav a.go{display:inline-flex;align-items:center;white-space:nowrap;line-height:1}@media(max-width:420px){.top nav a.go{min-height:40px;padding:0 12px;font-size:14px}}

/* what each year group is learning, from the school's curriculum maps */
.topics-by-year .tby{padding:16px 0;border-bottom:1px solid var(--hair);max-width:var(--rail)}.topics-by-year .tby:last-of-type{border-bottom:0}
.tby h3{font-size:18px;margin:0 0 8px;display:flex;gap:10px;align-items:baseline}.tby h3 span{font-size:14px;font-weight:500;color:var(--soft)}
.tby dl{display:grid;grid-template-columns:140px 1fr;gap:6px 16px;margin:0}.tby dt{font-weight:600;font-size:15px}.tby dd{margin:0}
@media(max-width:620px){.tby dl{grid-template-columns:1fr;gap:0}.tby dd{margin-bottom:8px}}

/* the register's details on a school page */
.glance dl{display:grid;grid-template-columns:150px 1fr;gap:8px 20px;margin:0 0 14px;max-width:var(--rail)}.glance dt{color:var(--soft)}.glance dd{margin:0}
.links-inline{display:flex;flex-wrap:wrap;gap:8px 22px;margin:4px 0 0}
@media(max-width:620px){.glance dl{grid-template-columns:1fr;gap:0}.glance dd{margin-bottom:10px}}

/* what to do next: the steps in order, the ones already past marked done */
.next-steps ol{list-style:none;counter-reset:st;padding:0;margin:10px 0 0;max-width:var(--rail)}
.next-steps li{counter-increment:st;position:relative;padding:0 0 18px 48px}
.next-steps li::before{content:counter(st);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--go);color:var(--on-go);font-weight:700;display:grid;place-items:center;font-size:15px}
.next-steps li:not(:last-child)::after{content:"";position:absolute;left:15px;top:36px;bottom:4px;width:2px;background:var(--rule)}
.next-steps li b{display:block;font-size:18px}.next-steps li p{margin:2px 0 0}
.next-steps li.done::before{background:var(--line)}.next-steps li.done b,.next-steps li.done p{color:var(--soft)}.next-steps li.done b span{font-size:13px;font-weight:600;margin-left:8px;color:var(--ok)}

/* marbled frames: the sheet (canvas from marble.js) sits behind a white label, like a label on a marbled book */
.marb{position:relative;overflow:hidden;isolation:isolate}
.marb>.mcv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;display:block}
.band.marb{display:block;padding:22px!important;background:#E6E3DB}
.band-in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;background:var(--paper);border-radius:8px;padding:26px 30px}
.h-close.marb{background:#E6E3DB;color:var(--pencil)}
.h-close.marb h2{color:var(--pencil)}
.h-close.marb p{color:var(--soft)}
.h-close.marb p a:not(.go){color:var(--link);text-decoration-color:currentColor}
.h-close-in{background:var(--paper);border-radius:10px;padding:44px 48px;box-shadow:0 18px 40px -28px rgba(0,0,0,.45)}
@media(max-width:620px){.band.marb{padding:14px!important}.band-in{padding:20px}.h-close-in{padding:28px 22px}}

/* marbled books: the sheet under the label, the spine shade over it */
.book>.mcv{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:inherit}
.book[data-m]::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 9px 0 0 rgba(0,0,0,.16);pointer-events:none}
/* the closing section: a marbled panel inset 16px from the edges with rounded corners; full width from tablets down */
.h-close.marb{margin:0 16px;border-radius:16px}
@media(max-width:860px){.h-close.marb{margin:0;border-radius:0}}
/* the closing label is centred in its frame */
.h-close-in{text-align:center}
.h-close-in h2{text-wrap:balance}
.h-close-in p{margin-left:auto;margin-right:auto;max-width:52ch;text-wrap:pretty}
.h-close-in .h-cta{justify-content:center}
/* the action near the top of a content page is an outline button, so the filled one in the header stays the only solid one on screen */
.school-cta .go,.top-cta .go{background:var(--paper);color:var(--link);box-shadow:inset 0 0 0 2px var(--link)}
.school-cta .go:hover,.top-cta .go:hover{background:var(--go);color:var(--on-go)}
/* no hairline over the footer when the home page's marbled section sits above it; on desktop the panel keeps a 16px gap below too */
body:has(.h-close.marb) .sf{border-top:0;margin-top:16px}
@media(max-width:860px){body:has(.h-close.marb) .sf{margin-top:0}}
.find-sel{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:620px){.find-sel{width:100%}.find-sel .find-area{flex:1 1 140px;min-width:0}.find-sel select{width:100%}}

/* the jump to "How it works" glides rather than jumps */
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
#how{scroll-margin-top:16px}
/* timeline cards: the first column lines up with the card's heading; a highlighted row bleeds into the padding instead of pushing text in */
.h-tl li{padding:10px 12px;margin:0 -12px;grid-template-columns:minmax(0,42%) 1fr}
/* labels on the left and right of a row are the same size */
.h-sk b{font-size:16px}
.h-res li{align-items:baseline}.h-res b,.h-res em{font-variant-numeric:tabular-nums}
/* footer: the copyright and the links sit on one line, and the links wrap together */
.sf-legal{align-items:center;justify-content:space-between;gap:4px 22px}
.sf-legal-links{display:flex;gap:0 22px;flex-wrap:wrap}

/* footer: the CoachKite column is narrower, with more room before the link columns */
@media(min-width:861px){.sf-wrap{grid-template-columns:minmax(0,280px) repeat(4,minmax(0,1fr));gap:32px 40px}}

/* How it works: each step shows the real thing (a child's book, a question, their week) instead of a rule and a number */
.h-steps li{border-top:0;padding-top:0}
.h-steps li::before{content:none}
.h-step-art{height:200px;display:grid;place-items:center;margin-bottom:20px;background:var(--wash);border-radius:14px;overflow:hidden}
.h-step-art .book{width:118px;transform:rotate(-4deg);box-shadow:0 16px 28px -16px rgba(0,0,0,.45)}
.h-mini-q{width:min(250px,86%);background:var(--raised);border-radius:10px;padding:14px 16px 6px;box-shadow:0 14px 30px -18px rgba(20,30,60,.4)}
.h-mini-q p{margin:0 0 4px;font-weight:700;font-size:24px;letter-spacing:-.01em}
.h-mini-q .h-opts{grid-template-columns:repeat(3,1fr)}.h-mini-q .h-opts span{height:42px;font-size:17px}
.h-mini-w{background:var(--raised);border-radius:10px;padding:16px 18px 6px;box-shadow:0 14px 30px -18px rgba(20,30,60,.4)}
.h-mini-w .h-days{margin-bottom:10px}.h-mini-w .h-days span{width:28px;height:28px;font-size:12px}
.h-mini-w p{margin:0 0 10px;font-size:15px}.h-mini-w i{font-style:normal;color:var(--soft);margin-right:8px}
@media(max-width:860px){.h-step-art{height:170px}}
.top nav a{white-space:nowrap}

/* Today's challenge on the home page (public/daily.js): the app's question screen inside a landscape tablet.
   --device is the tablet's edge. The top band is the Year book's own colour (--c), kept in both themes. */
:root{--device:#1D1F24;--device-shadow:rgba(20,30,60,.45);--sun:#F2B23A;--sun-hover:#E5A325;--on-sun:#2B2410;--sun-shadow:#B9821A;--cover-tint:rgba(255,255,255,.62)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--device:#3A3E46;--device-shadow:rgba(0,0,0,.5);--cover-tint:rgba(28,30,34,.62)}}
:root[data-theme=dark]{--device:#3A3E46;--device-shadow:rgba(0,0,0,.5);--cover-tint:rgba(28,30,34,.62)}
.h .d-sec{padding:64px 0;background:var(--wash);border-top:1px solid var(--hair)}
.d-head{max-width:640px;margin:0 auto 36px;text-align:center}
.d-head h2{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.03em;margin:0 0 10px;line-height:1.05}
.d-head p{margin:0;color:var(--soft);font-size:18px;text-wrap:balance}
.d-tab{max-width:min(980px,calc((100svh - 330px) * 1.43 + 44px));min-width:min(100%,640px);margin:0 auto;background:var(--device);border-radius:38px;padding:22px;box-shadow:0 50px 90px -40px var(--device-shadow)}
.d-scr{background:var(--paper);border-radius:18px;aspect-ratio:1194/834;overflow:hidden;display:flex;flex-direction:column}
.d-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--c);color:var(--on-go);font-weight:700;font-size:16px;padding:12px 28px;min-height:52px}
.d-bar>span:last-child{font-weight:500}
.d-brand{display:flex;align-items:center;gap:10px}
.d-right{display:flex;align-items:center;gap:14px}
.d-snd{font:inherit;font-size:14px;font-weight:600;color:var(--on-go);background:none;border:1.5px solid currentColor;border-radius:999px;padding:0 12px;min-height:32px;cursor:pointer;position:relative}
.d-snd::after{content:'';position:absolute;inset:-6px}
.d-snd{display:inline-flex;align-items:center;gap:6px;padding:0 12px 0 9px}.d-spk{width:18px;height:18px;flex:none}
.d-snd[data-on=false]{opacity:.85;border-style:dashed}
.d-mark{width:30px;height:30px;flex:none;border-radius:7px;overflow:hidden}.d-mark-b{fill:currentColor}.d-mark-s{fill:var(--c);opacity:.18}.d-mark-l{fill:var(--c)}.d-mark-r{fill:currentColor;opacity:.75}
.d-trail{display:flex;gap:6px;padding:14px 28px 0}
.d-trail b{display:block;flex:1;height:6px;border-radius:3px;background:var(--hair)}
.d-trail b.r{background:var(--ok)}.d-trail b.w{background:var(--warm-ink)}.d-trail b.now{background:var(--pencil)}
.d-body{flex:1;display:grid;grid-template-columns:1.1fr 1fr;grid-template-areas:"q ch" "f ch";align-content:center;column-gap:44px;padding:20px 48px 36px}
.d-qq{grid-area:q;align-self:end}.d-ch{grid-area:ch;align-self:center}.d-f{grid-area:f;align-self:start}
.d-k{font-size:15px;color:var(--soft);margin:0 0 10px;font-weight:600}
.d-q{font-size:clamp(24px,2.8vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:0;outline:none}
.d-ch{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.d-ch button,.d-years button{font:inherit;color:var(--pencil);cursor:pointer;border:1.5px solid var(--line);border-radius:12px;background:var(--raised)}
.d-ch button{display:grid;place-items:center;min-height:88px;padding:8px 10px;font-weight:700;font-size:clamp(17px,2vw,24px);line-height:1.2;font-variant-numeric:tabular-nums}
.d-ch button:hover:not(:disabled),.d-years button:hover{border-color:var(--line-strong)}
.d-ch button:disabled{cursor:default}
.d-ch button.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok-ink)}
.d-ch button.no{border-color:var(--warm-ink);color:var(--warm-ink)}
.d-ch button:disabled:not(.ok):not(.no){color:var(--soft)}
.d-fb{margin:18px 0 0;font-size:17px;line-height:1.45}.d-fb .y{color:var(--ok-ink)}.d-fb .n{color:var(--warm-ink)}
.d-next,.d-btns .p,.d-btns .g{display:inline-flex;align-items:center;min-height:48px;border-radius:10px;padding:0 22px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.d-next,.d-btns .p{margin-top:16px;background:var(--go);color:var(--on-go);border:0}
.d-next:hover,.d-btns .p:hover{background:var(--go-hover)}
.d-btns .g{margin-top:16px;border:1.5px solid var(--line);background:var(--raised);color:var(--pencil)}
.d-start{flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px 64px}
.d-start h3{font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;margin:0 0 8px;line-height:1.05;outline:none}
.d-start p{color:var(--soft);font-size:18px;margin:0 0 26px;max-width:30em;text-wrap:balance}
.d-c{align-items:center;text-align:center}.d-c p{margin-left:auto;margin-right:auto}
.d-years{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.d-years button{display:grid;place-items:center;align-content:center;min-width:120px;min-height:64px;padding:6px 14px;font-weight:700;font-size:20px}
/* the years are the way in, so they look like buttons: filled, lifting under the pointer */
.d-years button{background:var(--go);color:var(--on-go);border-color:var(--go);box-shadow:0 2px 0 var(--go-hover);transition:transform .12s,box-shadow .12s,background .12s}
.d-years button:hover{background:var(--go-hover);border-color:var(--go-hover);transform:translateY(-2px);box-shadow:0 4px 0 var(--go-hover)}
.d-years button:active{transform:translateY(1px);box-shadow:0 1px 0 var(--go-hover)}
.d-years small{color:var(--on-go);opacity:.85}
/* switching on, once, when the tablet first scrolls into view */
.d-waking .d-start{animation:d-on .5s ease-out both}
.d-waking .d-start h3,.d-waking .d-start>p{animation:d-up .45s .25s ease-out both}
/* the cover over the year picker: one bright button asking them to start; the years show through, softened */
.d-start{position:relative}
.d-cover{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;background:var(--cover-tint);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:opacity .3s}
.d-cover.gone{opacity:0;pointer-events:none}
.d-go{font:inherit;font-weight:800;font-size:clamp(20px,3cqi,28px);letter-spacing:-.01em;color:var(--on-sun);background:var(--sun);border:0;border-radius:999px;padding:clamp(14px,2.2cqi,20px) clamp(28px,4.6cqi,44px);cursor:pointer;box-shadow:0 5px 0 var(--sun-shadow),0 14px 30px var(--device-shadow);transition:transform .15s,box-shadow .15s,background .15s}
.d-go:hover{background:var(--sun-hover);transform:translateY(-3px);box-shadow:0 8px 0 var(--sun-shadow),0 18px 34px var(--device-shadow)}
.d-go:active{transform:translateY(3px);box-shadow:0 2px 0 var(--sun-shadow),0 8px 18px var(--device-shadow)}
.d-cover p{margin:0;color:var(--pencil);font-weight:600;font-size:clamp(14px,1.9cqi,17px)}
.d-waking .d-go{animation:d-pop .5s .35s cubic-bezier(.2,1.5,.45,1) both,d-nudge .6s 1.3s ease-in-out}
.d-revealing .d-years button{animation:d-pop .42s cubic-bezier(.2,1.5,.45,1) both}
.d-revealing .d-years button:nth-child(2){animation-delay:.07s}.d-revealing .d-years button:nth-child(3){animation-delay:.14s}.d-revealing .d-years button:nth-child(4){animation-delay:.21s}
@media(prefers-reduced-motion:reduce){.d-go,.d-cover{transition:none}.d-waking .d-go,.d-revealing .d-years button{animation:none}}
@keyframes d-on{from{filter:brightness(.15)}to{filter:none}}
@keyframes d-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes d-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes d-nudge{0%,100%{transform:none}40%{transform:translateY(-5px)}70%{transform:translateY(1px)}}
@media(prefers-reduced-motion:reduce){.d-waking .d-start,.d-waking .d-start *{animation:none!important}}
.d-years small{display:block;font-size:13px;font-weight:500;color:var(--soft)}
.d-small{margin-top:22px!important;margin-bottom:0!important;font-size:15px!important}.d-small a,.d-link{color:var(--link)}
.d-link{font:inherit;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;min-height:44px}
.d-btns{display:flex;flex-wrap:wrap;gap:0 12px}
.d-two{grid-template-areas:none}
.d-big{font-size:clamp(34px,4vw,52px);letter-spacing:-.03em;margin:0 0 10px;line-height:1;outline:none}
.d-lead{color:var(--soft);font-size:18px;margin:0}
.d-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair);align-self:center}
.d-list li{display:flex;justify-content:space-between;gap:12px;padding:13px 2px;border-bottom:1px solid var(--hair);font-weight:600;font-size:16px}
.d-list em{font-style:normal;color:var(--ok-ink);font-weight:700;white-space:nowrap}.d-list li.w em{color:var(--soft)}
.d-scr :focus-visible{outline:3px solid var(--link);outline-offset:2px}
@media(max-width:860px){.d-tab{border-radius:28px;padding:14px}.d-scr{aspect-ratio:auto;min-height:520px}.d-body{padding:20px 28px 28px;column-gap:24px}.d-start{padding:32px 28px}}
@media(max-width:640px){.d-tab{background:none;padding:0;box-shadow:none;border-radius:0}.d-scr{min-height:0;border:1px solid var(--line);border-radius:16px}
  .d-body{grid-template-columns:1fr;grid-template-areas:"q" "ch" "f";row-gap:20px;padding:18px 20px 24px}.d-two{grid-template-areas:none}
  .d-two{display:flex;flex-direction:column;gap:0}.d-sum{display:contents}.d-big{order:1}.d-lead{order:2;margin-bottom:14px}.d-list{order:3}.d-btns{order:4}.d-sum .d-small{order:5}.d-start{padding:26px 20px}.d-years button{min-width:calc(50% - 6px)}.d-bar{padding:10px 18px;font-size:15px}.d-bar>span:last-child{font-size:14px}
  .d-trail{padding:12px 20px 0}.h .d-sec{padding:48px 0}.d-head{margin-bottom:24px}}
@media(prefers-reduced-motion:no-preference){.d-ch button{transition:border-color .15s,background-color .15s}}
.d-ch button:last-child:nth-child(odd){grid-column:span 2}

/* the result screen growing out of the tablet into the free class */
.d-grow{position:fixed;z-index:60;background:var(--paper);overflow:hidden;display:flex;flex-direction:column}
.d-grow p{margin:auto;color:var(--soft);font-size:18px}

/* Today's challenge scales with the tablet, not the window: type and controls follow the screen's width (container
   units), and the screen grows taller rather than cutting content off on short or narrow windows. */
.d-scr{container-type:inline-size;overflow:visible}
.d-bar{border-radius:18px 18px 0 0;font-size:clamp(13px,1.7cqi,16px);padding:clamp(8px,1.2cqi,12px) clamp(16px,3cqi,28px);min-height:clamp(44px,5.5cqi,52px)}
.d-mark{width:clamp(24px,3cqi,30px);height:clamp(24px,3cqi,30px)}
.d-start{padding:clamp(20px,4cqi,40px) clamp(18px,6cqi,64px)}
.d-start h3{font-size:clamp(22px,4.4cqi,40px)}
.d-start p{font-size:clamp(14px,1.9cqi,18px);margin-bottom:clamp(14px,2.6cqi,26px)}
.d-years{flex-wrap:nowrap;gap:clamp(8px,1.3cqi,12px);width:100%;max-width:560px}
.d-years button{flex:1 1 0;min-width:0;min-height:clamp(48px,6.6cqi,64px);font-size:clamp(15px,2.1cqi,20px);padding:6px 8px}
.d-small{font-size:clamp(13px,1.6cqi,15px)!important;margin-top:clamp(12px,2.2cqi,22px)!important}
.d-trail{padding:clamp(10px,1.4cqi,14px) clamp(16px,3cqi,28px) 0}
.d-body{padding:clamp(14px,2.2cqi,20px) clamp(18px,5cqi,48px) clamp(18px,3.6cqi,36px);column-gap:clamp(18px,4.5cqi,44px)}
.d-k{font-size:clamp(13px,1.6cqi,15px)}
.d-q{font-size:clamp(19px,3.8cqi,38px)}
.d-ch{gap:clamp(8px,1.3cqi,12px)}
.d-ch button{min-height:clamp(52px,8.8cqi,88px);font-size:clamp(15px,2.4cqi,24px)}
.d-fb{font-size:clamp(14px,1.75cqi,17px);margin-top:clamp(10px,1.8cqi,18px)}
.d-next,.d-btns .p,.d-btns .g{min-height:44px;padding:0 clamp(14px,2.2cqi,22px);margin-top:clamp(10px,1.6cqi,16px)}
.d-big{font-size:clamp(28px,5.2cqi,52px)}
.d-lead{font-size:clamp(14px,1.85cqi,18px)}
.d-list li{font-size:clamp(13px,1.6cqi,16px);padding:clamp(8px,1.3cqi,13px) 2px}
@container (max-width:620px){.d-date{display:none}}
@media(max-width:640px){.d-bar{border-radius:16px 16px 0 0}.d-years{flex-wrap:wrap}.d-years button{flex:1 1 calc(50% - 6px)}}
.d-hear{font:inherit;font-size:clamp(13px,1.6cqi,15px);font-weight:600;color:var(--link);background:none;border:0;padding:0;margin-top:clamp(8px,1.4cqi,14px);min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* for parents: words beside an example card, stacked on narrow screens */
section.pp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:48px;align-items:center}
section.pp .h-card{width:100%;box-sizing:border-box}
@media(max-width:860px){section.pp{grid-template-columns:1fr;gap:20px}}
/* the report's year ruler, as in the app (yearsBlock): a bar through the years, a dark mark for where the year has got to, a faint one for four weeks ago */
.yrr{margin:0 0 18px}.yrr-h{margin:0 0 10px;font-size:16px}.yrr-h span{color:var(--soft)}
.yrr-track{position:relative;height:12px;border-radius:6px;background:var(--hair)}.yrr-track i{display:block;height:100%;border-radius:6px;background:var(--go)}
.yrr-track b{position:absolute;top:-5px;width:3px;height:22px;margin-left:-1.5px;border-radius:2px;background:var(--pencil)}.yrr-track b.was{background:var(--line-strong)}
.yrr-lbl{display:flex;margin-top:5px}.yrr-lbl span{flex:1;font-size:13px;color:var(--soft);border-left:1px solid var(--line);padding-left:6px}
.yrr-line{font-size:15px;margin:10px 0 0}.yrr-key{font-size:14px;color:var(--soft);margin:-6px 0 14px}
section.pp-top{align-items:start}
.pp-dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:0 0 14px}.pp-dl dt{font-weight:600}.pp-dl dd{margin:0;color:var(--soft)}
.pp-note{font-size:15px;color:var(--soft)}
@media(max-width:560px){.pp-dl{grid-template-columns:1fr;gap:2px}.pp-dl dd{margin-bottom:8px}}
.kite-eg .kq{font-size:28px;font-weight:700;margin:4px 0 2px}.kite-eg .kpick{color:var(--soft);font-size:15px;margin:0 0 14px}
.kite-eg .ksay{font-size:18px;line-height:1.5;margin:0 0 16px}.kite-eg .kmsg{font-size:14px;color:var(--soft);margin:8px 0 0;min-height:1em}
.kite-play{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:6px 16px 6px 6px;border:1px solid var(--line);border-radius:999px;background:var(--wash);color:var(--pencil);font:inherit;font-size:15px;cursor:pointer;text-align:left}
.kite-play:hover{border-color:var(--line-strong)}.kite-play:disabled{cursor:default}
.kp-ic{position:relative;flex:none;width:36px;height:36px;border-radius:50%;background:var(--go)}
.kp-ic::after{content:"";position:absolute;left:14px;top:11px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--on-go)}
.kite-play.on .kp-ic::after{left:12px;top:12px;width:4px;height:12px;border:0;border-left:4px solid var(--on-go);border-right:4px solid var(--on-go);box-sizing:content-box;width:4px}
.kp-t{flex:none;font-weight:600}.kp-bar{flex:1;height:4px;border-radius:2px;background:var(--line)}.kp-bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--go)}
/* a highlighted block in a light wash: no hairlines above or below it */
section.pp-wash{background:var(--tint);border:0;border-radius:10px;padding:30px 34px;margin:26px 0}section.pp-wash h2{margin-top:0}section.pp-wash p:last-child{margin-bottom:0}section.pp-wash+section{border-top:0}
@media(max-width:560px){section.pp-wash{padding:22px 20px}}
/* a drawn settings panel on the parents page: switches and two-way choices, display only */
.set-eg ul{list-style:none;margin:0;padding:0}.set-eg li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--hair);font-size:16px}.set-eg li:first-child{border-top:0;padding-top:4px}
.set-eg .tg{position:relative;width:44px;height:26px;border-radius:13px;background:var(--line);flex:none}.set-eg .tg::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--raised)}
.set-eg .tg.on{background:var(--go)}.set-eg .tg.on::after{left:21px}
.set-eg .sg{display:inline-flex;padding:3px;border-radius:999px;background:var(--hair);font-weight:400}.set-eg .sg em{font-style:normal;font-size:14px;padding:5px 12px;border-radius:999px;color:var(--soft)}.set-eg .sg em.on{background:var(--raised);color:var(--pencil);font-weight:600;box-shadow:inset 0 0 0 1px var(--line)}
section.pp,section.pp-wash+section{padding:56px 0}@media(max-width:860px){section.pp{padding:40px 0}}
/* wash blocks hang outside the content column by their own side padding, so their text lines up with the text above and
   below. Only where the window has room for it; on narrower screens they sit inside the column as before */
@media(min-width:1120px){
  .now{margin-left:-22px;margin-right:-22px}
  .top-cta{margin-left:-20px;margin-right:-20px}
  .school-cta{margin-left:-24px;margin-right:-24px;max-width:calc(var(--rail) + 48px)}
  section.pp-wash{margin-left:-34px;margin-right:-34px}
}
section.pp-wash{margin-bottom:0}section.pp-wash+section.pp{padding-top:48px}
/* narrower windows: the same blocks run the full width of the window with square corners, their padding set so the text
   still starts on the page's content line */
@media(max-width:1119px){
  html{overflow-x:clip}
  .now,.top-cta,.school-cta,section.pp-wash{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);border-radius:0;max-width:none}
}
/* why the report helps: short points, bold lead-in */
.pp-why{list-style:none;margin:0;padding:0}.pp-why li{margin:0 0 12px}.pp-why b{font-weight:700}
/* tooltips on the example cards: the label is a button, the explanation shows on hover or keyboard focus */
.tip{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:help;text-decoration:underline dotted;text-underline-offset:3px}
/* the ruler's key: what the fill and the two marks stand for */
.yrr-legend{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--soft)}
.yrr-legend li{display:flex;align-items:center;gap:7px}.yrr-legend i{display:inline-block;flex:none}
.lg-now{width:18px;height:8px;border-radius:4px;background:var(--go)}.lg-yr{width:3px;height:16px;border-radius:2px;background:var(--pencil)}.lg-was{width:3px;height:16px;border-radius:2px;background:var(--line-strong)}
/* the year bar taken apart (anatomy() in site.js) */
.anat-sec{padding:56px 0}.anat-lead{max-width:var(--rail);font-size:19px}
.anat{margin:28px 0 0}.anat-art{position:relative;aspect-ratio:1000/430}.anat-art svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.a-track{fill:var(--hair)}.a-fill{fill:var(--go)}.a-yr{fill:var(--pencil)}.a-was{fill:var(--line-strong)}
.a-tick{stroke:var(--line);stroke-width:1.5}.a-yt{fill:var(--soft);font-size:15px;font-family:inherit}
.a-lead line{stroke:var(--soft);stroke-width:1.2}.a-dot{fill:var(--soft)}
.anat-n{position:absolute;font-size:15px;line-height:1.45;color:var(--soft)}.anat-n b{display:block;color:var(--pencil);font-size:16px;margin-bottom:2px}
.anat-right{text-align:right}.anat-centre{text-align:center}
.anat-n.anat-top{transform:translateY(0)}
.anat-list{display:none;list-style:none;margin:0;padding:0}.anat-list li{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;font-size:16px}
.anat-list i{flex:none;margin-top:7px}.anat-list .lg-now{width:18px;height:8px;border-radius:4px;background:var(--go)}.anat-list .lg-yr{width:3px;height:16px;border-radius:2px;background:var(--pencil);margin:4px 7px 0}
.anat-list .lg-was{width:3px;height:16px;border-radius:2px;background:var(--line-strong);margin:4px 7px 0}.anat-list .lg-gap,.anat-list .lg-ahead{width:18px;height:8px;border-radius:4px;background:var(--hair)}
.anat-foot{margin:18px 0 0;font-size:15px;color:var(--soft);max-width:var(--rail)}
.anat-mini{display:none;width:100%;height:auto}
@media(max-width:860px){.anat-art{display:none}.anat-mini{display:block;margin-bottom:18px}.anat-mini .a-yt{font-size:22px}.anat-list{display:block}}
/* moving between the years of one scheme: a strip of years at the top, previous and next at the foot */
.yr-strip ul{list-style:none;margin:18px 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.yr-strip a,.yr-strip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:var(--link);font-weight:600}
.yr-strip a:hover{border-color:var(--link)}.yr-strip span{background:var(--solid);border-color:var(--solid);color:var(--on-solid)}
.soft-note{color:var(--soft);font-size:16px;max-width:var(--rail)}
.yr-pn{display:flex;justify-content:space-between;gap:16px;margin:28px 0 8px}.yr-pn a{font-weight:600}.yr-pn a::before{content:"\2190\00a0"}.yr-pn a.nx::before{content:none}.yr-pn a.nx::after{content:"\00a0\2192"}
/* the site's tooltip box (TIP_JS in site.js) */
#sitetip{position:absolute;z-index:50;padding:10px 12px;border-radius:8px;background:var(--solid);color:var(--on-solid);font-size:14px;line-height:1.45;pointer-events:none}
#sitetip[hidden]{display:none}#sitetip i{position:absolute;top:-6px;width:12px;height:12px;margin-left:-6px;background:var(--solid);transform:rotate(45deg)}#sitetip.up i{top:auto;bottom:-6px}
.blocks .tip{color:var(--soft)}
/* schemes on the curriculum page: one row each, years as chips */
.schemes{list-style:none;margin:0;padding:0}.schemes>li{padding:16px 0;border-top:1px solid var(--hair)}.schemes>li:first-child{border-top:0}
.schemes .sch-h{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}.schemes .sch-h span{color:var(--soft);font-size:15px}
.schemes .yr-strip ul{margin:10px 0 0}
.schemes details{margin-top:6px}.schemes summary{cursor:pointer;color:var(--link);font-size:15px}.schemes details ul{columns:2 260px;margin:10px 0 0;padding-left:18px;font-size:15px}
/* the primary maths chart on /curriculum (journeyChart): years down, half terms across, this half term marked */
.journey{overflow-x:auto;margin:18px 0 6px;border:1px solid var(--hair);border-radius:10px}
.jc{border-collapse:collapse;width:100%;min-width:760px;font-size:14px}
.jc caption{text-align:left;padding:12px 14px;color:var(--soft);font-size:14px;caption-side:bottom}
.jc th,.jc td{border-top:1px solid var(--hair);padding:10px;vertical-align:top;text-align:left}
.jc thead th{border-top:0;font-size:13px;color:var(--soft);font-weight:600;white-space:nowrap}
.jc thead th b{display:block;font-size:12px;color:var(--link)}
.jc tbody th{white-space:nowrap;font-weight:600;width:72px}
.jc td span{display:block;margin:0 0 4px;line-height:1.35}
.jc .now{background:var(--tint)}
.jc-check{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;background:var(--solid);color:var(--on-solid);font-size:12px;font-weight:600;text-decoration:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.find-school .go{margin-top:4px}
/* a topic from Year 1 to Year 6 (topicPage) */
.tj{list-style:none;margin:24px 0 8px;padding:0}.tj>li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--hair)}
.tj-y a{font-weight:700}.tj ul{list-style:none;margin:0;padding:0}.tj ul li{display:flex;justify-content:space-between;gap:16px;padding:3px 0}
.tj small{color:var(--soft);font-size:14px;white-space:nowrap}
@media(max-width:640px){.tj>li{grid-template-columns:1fr;gap:6px}.tj ul li{flex-direction:column;gap:0}.tj small{white-space:normal}}