/* Void Deck Playground: the approved October 2026 look (direction D, design/mockups/design-directions-2.html).
   Loaded last on every page so it restyles the platform layers without rewriting them: solid
   stage-colour bands for the header and heroes, a calm solid concrete ground for reading, pill buttons with a
   pressed bottom edge, 3px outlines on cards and inputs, round stepping-pad stages on a dotted hop
   route and the result number on the yellow bolted spinner panel. Tokens: assets/tokens.css. */

/* ---------- Texture: rubber speckle, decoration only (CSS radial gradients) ----------
   Texture never sits behind text (Calvin, 17 Oct 2026: optimise for readability). Text sits on a solid
   fill: the concrete ground, a card or a solid stage band. --rubber tiles only shapes that carry no text
   (icon pads, meter fills, stripes). A hero band keeps the speckle in its bottom --texture-edge only, as
   a rubber kerb: a solid layer of the band colour covers the rest, and its text ends above that edge.
   tests/text-ground.browser-suite.js fails on any other texture behind text. --concrete is kept for
   older references and is no longer painted. */
:root{
 --texture-edge:14px;
 --rubber:radial-gradient(circle at 30% 40%,var(--speck-light) 0 1px,transparent 1.6px) 0 0/6px 6px,radial-gradient(circle at 70% 70%,var(--speck-dark) 0 1px,transparent 1.6px) 0 0/5px 5px;
 --concrete:radial-gradient(circle at 20% 30%,var(--ground-speck-dark) 0 1px,transparent 1.5px) 0 0/9px 9px,radial-gradient(circle at 70% 60%,var(--ground-speck-light) 0 1px,transparent 1.5px) 0 0/7px 7px;
 --bolts:radial-gradient(circle at 35% 35%,var(--bolt-lit) 0 2px,var(--bolt-mid) 3px,var(--bolt-dark) 5.5px,transparent 6px);
}
.rubber,.rubber-red{--band:var(--red);--band-ink:var(--on-red)}
.rubber-blue{--band:var(--blue);--band-ink:var(--on-blue)}
.rubber-green{--band:var(--green);--band-ink:var(--on-green)}
.rubber-yellow{--band:var(--yellow);--band-ink:var(--on-yellow)}
.rubber-orange{--band:var(--orange);--band-ink:var(--on-orange)}
.rubber-purple{--band:var(--purple);--band-ink:var(--on-purple)}
.rubber,.rubber-red,.rubber-blue,.rubber-green,.rubber-yellow,.rubber-orange,.rubber-purple{background:var(--band);color:var(--band-ink)}

/* Stage colours: one playground colour per stage (blue, green, yellow, orange, purple, red), on pads,
   header bands, chips and strips.
   data-stage on body or any element, a .stage-<slug> class, or the platform's older tile classes. */
body,[data-stage]{--stage:var(--red);--stage-on:var(--on-red);--stage-band:var(--band-red);--stage-band-on:var(--band-red-on)}
[data-stage=expecting],.stage-expecting,.tile-sky{--stage:var(--stage-expecting);--stage-on:var(--stage-expecting-on);--stage-band:var(--stage-expecting-band);--stage-band-on:var(--stage-expecting-band-on)}
[data-stage=baby],.stage-baby,.tile-mint{--stage:var(--stage-baby);--stage-on:var(--stage-baby-on);--stage-band:var(--stage-baby-band);--stage-band-on:var(--stage-baby-band-on)}
[data-stage=toddler],.stage-toddler,.tile-butter{--stage:var(--stage-toddler);--stage-on:var(--stage-toddler-on);--stage-band:var(--stage-toddler-band);--stage-band-on:var(--stage-toddler-band-on)}
[data-stage=preschool],.stage-preschool,.tile-lilac{--stage:var(--stage-preschool);--stage-on:var(--stage-preschool-on);--stage-band:var(--stage-preschool-band);--stage-band-on:var(--stage-preschool-band-on)}
[data-stage=primary],.stage-primary,.tile-aqua{--stage:var(--stage-primary);--stage-on:var(--stage-primary-on);--stage-band:var(--stage-primary-band);--stage-band-on:var(--stage-primary-band-on)}
[data-stage=family],.stage-family,.tile-peach,.tile-rose{--stage:var(--stage-family);--stage-on:var(--stage-family-on);--stage-band:var(--stage-family-band);--stage-band-on:var(--stage-family-band-on)}
/* Older tile surfaces keep a pale tint with ink text where the platform uses --tile. */
.tile-mint{--tile:var(--tile-mint);--tile-ink:var(--line-ns)}
.tile-butter{--tile:var(--tile-butter);--tile-ink:var(--line-ew)}
.tile-sky{--tile:var(--tile-sky);--tile-ink:var(--line-ne)}
.tile-peach{--tile:var(--tile-peach);--tile-ink:var(--line-cc)}
.tile-lilac{--tile:var(--tile-lilac);--tile-ink:var(--orange-ink)}
.tile-aqua{--tile:var(--tile-aqua);--tile-ink:var(--purple-ink)}
.tile-rose{--tile:var(--tile-rose);--tile-ink:var(--line-jr)}
body{--tile:var(--card);--tile-ink:var(--brand)}

/* ---------- Base type and ground ---------- */
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:1rem;line-height:1.6;letter-spacing:0;overflow-x:clip}
button,input,select,textarea{font-family:var(--font-body)}
h1,h2,h3,.logo,.headline-value,.val{font-family:var(--font-head);letter-spacing:-.015em}
h1{font-weight:900;font-size:clamp(2rem,6vw,3rem);line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
h2{font-weight:800;line-height:1.12;text-wrap:balance}
h3{font-weight:800;line-height:1.2}
/* Vertical rhythm (tokens.css spacing scale): headings sit closer to what they introduce than to
   what came before. Component rules with a class keep their own values. */
h2{margin:0 0 var(--space-heading-after)}
h3{margin:0 0 var(--space-3)}
p{margin:0 0 var(--space-paragraph)}
:where(main p:not([class]),main ul:not([class]),main ol:not([class]),main dl:not([class]),main .table-wrap,main table,main figure,main blockquote)+h2{margin-top:var(--space-group)}
:where(main p:not([class]),main ul:not([class]),main ol:not([class]),main dl:not([class]),main .table-wrap,main table,main figure,main blockquote)+h3{margin-top:var(--space-8)}
.eyebrow,.mono{font-family:var(--font-body)}
.eyebrow{font-size:.8125rem;font-weight:800;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:.875rem}
a{text-underline-offset:3px;text-decoration-thickness:2px}
.text-link{color:var(--brand);font-weight:800}
.coach-icon,.stage-icon,.nav-goal>a>svg,.path-strip-icon,.goal-group-icon,.goal-chip-icon,.tab-icon{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
svg text,.line-map text{font-family:var(--font-body)}
.rank-badge{font-family:var(--font-body)}
/* Tabular numerals wherever numbers line up or change. */
.headline-value,.val,.stat,input[type=number],table,.guide-numbers dd,.bto-amount,.big,.spinner-value,.path-strip-step,time{font-variant-numeric:tabular-nums}
/* Focus and selection */
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.site-header :focus-visible,.rubber :focus-visible,.coach-hero :focus-visible,body[data-tool] .intro :focus-visible,body[data-tool] .breadcrumb :focus-visible,.goal-hero :focus-visible,.tab-bar :focus-visible,.footer :focus-visible,.next-card:focus-visible,.next-guide:focus-visible{outline-color:var(--focus-band)}
.btn.primary:focus-visible,.primary:focus-visible{outline-color:var(--focus)}
/* Focus rings on the stage bands (visual QA focus check): a primary button there keeps the band's white
   ring, and the yellow toddler band by day takes an ink ring (white on yellow is 1.8:1). */
:is(.coach-hero,.goal-hero,body[data-tool] .intro,body[data-tool] .breadcrumb) :is(.btn.primary,.primary):focus-visible{outline-color:var(--focus-band)}
:root:not([data-theme=dark]) :is(body[data-stage=toddler] :is(.coach-hero,.goal-hero,.intro,.breadcrumb),.goal-hero[data-stage=toddler]) :focus-visible{outline-color:var(--ink-base)}
::selection{background:var(--selection);color:var(--selection-ink)}

/* Transit-map motifs from the platform are retired. */
.dot,.route,.line-map,.category-nav,.nav-line-title::before,.nav-panel li[class]>a::before,.nav-mega li::before{display:none!important}
.nav-mega ul{border-left:0!important;margin-left:0!important;padding-left:0!important}

/* ---------- Buttons: pills with a pressed bottom edge ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border:3px solid var(--outline);border-radius:var(--radius-btn);background:var(--card);color:var(--ink);font:800 .9375rem/1.2 var(--font-body);box-shadow:var(--press);text-decoration:none;transition:transform .08s ease,box-shadow .08s ease}
.btn:active{transform:translateY(2px);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2)}
.btn.primary,.primary{background:var(--primary);border-color:var(--primary-edge);color:var(--primary-on)}
.btn.primary:hover,.primary:hover{background:var(--primary-hover);border-color:var(--primary-edge-hover);color:var(--primary-on)}
.btn.secondary,.secondary{background:var(--card);color:var(--ink);border-color:var(--outline)}
.btn.secondary:hover{background:var(--soft);color:var(--ink);border-color:var(--outline)}
.btn.sunny,.btn.yellow{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow)}
.share-actions .btn{min-height:44px;padding:9px 16px;font-size:.875rem}
.segmented button{border-radius:999px;font-weight:800;border:3px solid var(--outline);background:var(--card);color:var(--ink)}
.segmented button[aria-pressed=true]{background:var(--ink-base);border-color:var(--ink-base);color:var(--tabbar-on)}

/* ---------- Inputs: 3px outline, rounded, tabular ---------- */
input[type=number],input[type=text],input[type=email],input[type=search],input[type=date],input[type=tel],select,textarea{border:3px solid var(--field-border);border-radius:var(--radius-field);background:var(--card);color:var(--ink);font-family:var(--font-body);font-size:1rem;min-height:48px}
input[type=number]{font-weight:700}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
input[type=checkbox],input[type=radio]{accent-color:var(--blue)}
.grid label,label{color:var(--ink);font-weight:800;font-size:.875rem}
.grid label{font-size:.875rem}
fieldset{border-color:var(--outline)}
/* Base fieldset, legend, summary and checkbox chip (visual QA A12). Zero-specificity :where() rules, so a
   component's own styles win: a group is an outlined card with its legend as a bold title, every summary
   gets one chevron after its text (the browser triangle is hidden; a summary set to display:flex had lost
   it), and a checkbox or radio chip keeps its box beside the first line, inner padding and a hanging indent. */
:where(main fieldset){min-width:0;margin:var(--space-4) 0;padding:0;border:0}
:where(main legend){padding:0;margin:0 0 var(--space-2);overflow-wrap:break-word;font:800 1rem/1.3 var(--font-head);color:var(--ink)}
/* Fieldset and legend (design system spec; ledger P1-052). A group is unboxed, its legend a bold title.
   Only a repeated group (Centre A and B, Choice 1 to 6, Adult 1 and 2, each care arrangement, each
   routine step) is boxed, with its legend inside the box, never on the border. In a form grid a group
   takes the full width and the grid becomes one column, so a short field beside a tall group never
   leaves a hole; fields keep a readable width. */
:where(main fieldset:is(.group,.sc-centre,.s1-choice,.cc-arrangement),main li>fieldset){padding:16px;border:3px solid var(--outline);border-radius:18px}
:where(main fieldset:is(.group,.sc-centre,.s1-choice,.cc-arrangement,.sr-adult),main li>fieldset)>legend{float:left;width:100%}
:where(main fieldset:is(.group,.sc-centre,.s1-choice,.cc-arrangement,.sr-adult),main li>fieldset)>legend+*{clear:both}
body[data-tool] main .grid:has(>fieldset),main .grid:has(>fieldset){grid-template-columns:minmax(0,1fr)}
main .grid>fieldset{grid-column:1/-1;margin:0}
main .grid:has(>fieldset)>div{max-width:36rem}
/* A legend's "?" stays beside its words, like a field label's, never alone on the next line. */
main legend:has(>.info-tip){width:100%;display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:.35rem}
main legend:has(>.info-tip)>:not(.info-tip){min-width:0;max-width:calc(100% - 2.75rem);overflow-wrap:break-word}
/* A tick card's "?" sits in the card's top right corner, so every card in a group is the same width. */
main .label-row:has(>label.choice){position:relative;flex-wrap:wrap}
main .label-row>label.choice{flex:1 1 100%;max-width:none;padding-right:3.25rem}
@media(min-width:768px){main .label-row:has(>label.choice)>.info-tip{position:absolute;top:6px;right:8px;margin:0}}
@media(max-width:767px){main .label-row:has(>label.choice)>.info-tip>.info-tip-button{position:absolute;top:6px;right:8px}}
/* A row of day ticks: each box and its day are one 44px target, 16px from the next day ("Fri☐ Sat"). */
main p:has(>label+label>input[type=checkbox]){display:flex;flex-wrap:wrap;gap:0 16px}
main p:has(>label+label>input[type=checkbox])>label{display:inline-flex;align-items:center;gap:8px;min-height:44px}
/* On a phone a week inside a boxed group still fits four days a line (Mon to Thu, Fri to Sun), never "Sun" alone. */
@media(max-width:30em){main p:has(>label+label>input[type=checkbox]){column-gap:8px}main p:has(>label+label>input[type=checkbox])>label{gap:6px}}
:where(main summary){list-style:none;cursor:pointer;font-weight:800}
:where(main summary)::-webkit-details-marker{display:none}
:where(main summary:not(:is(.faq summary,.guide-toc-fold>summary,:has(.compare-chev,.compare-plus))))::after{content:"";display:inline-block;flex:0 0 auto;width:.5em;height:.5em;margin-left:.6em;border:solid currentColor;border-width:0 3px 3px 0;transform:translateY(-.15em) rotate(45deg)}
:where(main details[open]>summary:not(:is(.faq summary,.guide-toc-fold>summary,:has(.compare-chev,.compare-plus))))::after{transform:translateY(.15em) rotate(-135deg)}
main label.choice:has(>input[type=checkbox],>input[type=radio]){display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:10px 14px;line-height:1.35}
:where(main label.choice)>:where(input[type=checkbox],input[type=radio]){flex:0 0 auto;margin:1px 0 0}
/* A grid of chips keeps each chip wide enough for its longest word ("themselves" spilled out at 118px). */
main .grid:has(>label.choice){grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr))}
main fieldset .grid:has(>label.choice){grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
/* Segmented choices built from radios (the mock's Childcare / Infant care pills). */
.choice,.seg label,.quiz-options label{border:3px solid var(--outline);border-radius:14px;background:var(--card)}
.seg label:has(input:checked),.choice:has(input:checked){border-color:var(--blue);background:var(--tile-sky);font-weight:800}

/* ---------- Help bubbles ---------- */
.help-bubble,.tooltip-trigger,.term-help{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;min-width:22px;border-radius:50%;border:0;background:var(--yellow);color:var(--on-yellow);font:800 .8125rem/1 var(--font-body);vertical-align:middle;cursor:help;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
button.help-bubble,button.tooltip-trigger,button.term-help{position:relative}
button.help-bubble::after,button.tooltip-trigger::after,button.term-help::after{content:"";position:absolute;inset:-11px}
.info-tip-button{border:0!important;background:var(--yellow)!important;color:var(--on-yellow)!important;font-style:normal!important;font-weight:800!important}
.info-tip-button:hover,.info-tip-button[aria-expanded=true]{background:var(--yellow)!important;color:var(--on-yellow)!important;box-shadow:0 0 0 3px var(--outline)}
/* The "?" tip is a 44px target (visual QA A20); the yellow circle stays 32px (24px in a result), drawn by
   ::after, and a negative margin keeps the line where it was. */
.info-tip-button{width:44px!important;height:44px!important;min-width:44px!important;margin:-6px;padding:6px!important;background:var(--yellow) content-box!important;box-shadow:none!important}
.info-tip-button::before{inset:0!important}
.info-tip-button::after{content:"";position:absolute;inset:6px;border-radius:50%;pointer-events:none}
.info-tip-button:hover::after,.info-tip-button[aria-expanded=true]::after{box-shadow:0 0 0 3px var(--outline)}
.result-panel .info-tip .info-tip-button{margin:-10px;padding:10px!important;border:0!important;background:none!important}
.result-panel .info-tip .info-tip-button::after{inset:10px;border:2px solid var(--muted)}
.result-panel .result-tile .info-tip .info-tip-button::after{border-color:var(--spinner-ink)}
.info-tip-bubble{border:3px solid var(--outline)!important;border-radius:14px!important;font-family:var(--font-body)!important;background:var(--card)!important;color:var(--ink)!important}
/* Close inside a bubble sits on the card, never on the band around it: the site ring (--focus, 3px,
   offset 3px), not a band's white or ink ring or the brand ring from experience.css (AUTO-002, P1-010). */
:root .info-tip-bubble>.info-tip-close:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* ---------- Header: a solid band in the page's stage colour ---------- */
/* D043 (Calvin, 13 Oct 2026, "Follow stage colour"): scripts/render-chrome.js puts data-stage on the header
   of every stage page (its hub, tools, guides and printables), so the [data-stage] tokens above give the
   band that stage's colour and text colour, the same floor as the hero under it. Every other page,
   comparisons included, keeps the brand red. Header controls take --stage-band-on, never a fixed white.
   A solid fill behind the header's text (17 Oct 2026). No ink rule under the band (Calvin, 10 Oct 2026):
   where the header runs into a band of its own colour (the homepage, hubs, tools) there is no line; over
   the concrete ground it lifts off with a soft shadow. */
.site-header{background:var(--stage-band);color:var(--stage-band-on);border-bottom:0;box-shadow:0 10px 14px -12px rgba(0,0,0,.55)}
.site-header:not([data-stage]){--stage-band:var(--band-red);--stage-band-on:var(--band-red-on)}
body:has(main>:is(.coach-hero,.goal-hero):first-child) .site-header,body[data-tool] .site-header[data-stage]{box-shadow:none}
/* Yellow (toddler) and orange (preschool) bands carry ink text by day, so the focus ring goes ink too;
   on green, yellow and orange Join free is the ink pill (the yellow pill was 2.76:1 on green, 1:1 on
   yellow). At night every band is a deep tint with white text and the yellow pill. */
:root:not([data-theme=dark]) .site-header:is([data-stage=toddler],[data-stage=preschool]) :focus-visible{outline-color:var(--ink-base)}
:root:not([data-theme=dark]) .site-header:is([data-stage=baby],[data-stage=toddler],[data-stage=preschool]) :is(.member-join-link,.member-nav-link){background:var(--ink-base);color:var(--on-ink)!important}
.site-header[data-stage] .member-login-link,.site-header[data-stage] .member-menu-toggle{border-color:currentColor}
.header-inner{min-height:68px}
.logo{display:inline-flex;align-items:center;gap:0;font:900 1.375rem/1 var(--font-head);letter-spacing:-.01em;color:inherit;text-decoration:none}
.logo span:not(.logo-mark),.logo b{color:var(--yellow)}
/* Logo v3 (17 Oct 2026): ".sg" in Rubik 800 at the wordmark size, set tight to "Angels". */
.logo small{font:800 1em/1 var(--font-head);color:inherit;letter-spacing:inherit;margin-left:0;opacity:1}
.logo span:not(.logo-mark){margin-left:.01em}
/* Logo v3 colours on a toddler (yellow) or preschool (orange) band, the header included: ink with a red-ink
   or white (--on-red, white in both themes) "Angels" by day; white with the dark yellow-ink "Angels" on the
   night tints. The footer keeps its own colours. */
[data-stage=toddler] .logo:not(.footer .logo){color:var(--ink-base)}
[data-stage=toddler] .logo:not(.footer .logo) span:not(.logo-mark){color:var(--red-ink)}
[data-stage=preschool] .logo:not(.footer .logo){color:var(--ink-base)}
[data-stage=preschool] .logo:not(.footer .logo) span:not(.logo-mark){color:var(--on-red)}
:root[data-theme=dark] :is([data-stage=toddler],[data-stage=preschool]) .logo:not(.footer .logo){color:var(--on-red)}
:root[data-theme=dark] :is([data-stage=toddler],[data-stage=preschool]) .logo:not(.footer .logo) span:not(.logo-mark){color:var(--yellow-ink)}
/* Baby (green) by day: yellow "Angels" is 2.8:1 on the solid green band, so the header logo is all white. */
:root:not([data-theme=dark]) .site-header[data-stage=baby] .logo span:not(.logo-mark){color:var(--stage-band-on)}
.footer .logo{color:var(--footer-text)}
.footer .logo[aria-current=page],.site-header .logo[aria-current=page],.site-header .main-nav .nav-top[aria-current=page],.site-header .member-login-link[aria-current=page]>span{text-decoration-color:var(--yellow)}
svg.logo-mark{width:34px;height:34px;margin-right:6px;flex:none;vertical-align:middle;overflow:visible}
span.logo-mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-right:8px;border-radius:50%;background:var(--yellow);color:var(--on-yellow)!important;font:900 1.125rem/1 var(--font-head);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.site-header .main-nav .nav-top{font:800 1rem/1.2 var(--font-body);color:var(--stage-band-on);padding:9px 12px;border-radius:999px}
/* Hover, open and current: one thick underline under the word, never a darker blob on the band (visual QA
   A13: the blob was 1.1 to 1.3:1 and split into two shapes for the word and its chevron, and on the orange
   preschool band it pulled the ink text to 3.4:1). Hovering the chevron underlines its word too. */
.site-header .main-nav .nav-top:hover,.nav-item.is-open>.nav-top,.site-header .main-nav .nav-top[aria-current=page],.site-header .main-nav .nav-item:has(>.nav-toggle:hover)>.nav-top{background:transparent;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.nav-menu-toggle,.site-header .nav-toggle{color:var(--stage-band-on)}
/* The open Menu (Close) button stays light on the red header; the base layer's brand colour vanished on it. */
.site-header .nav-menu-toggle[aria-expanded=true]{color:var(--stage-band-on);border-color:var(--stage-band-on)}
/* Desktop header row: six menus, the search icon, Join free and Sign in fit one row from 1200px up (round 6:
   the search icon and "Puzzles" had pushed Join free onto a second row at every width). The pills carry
   their own padding, so the list needs no extra gap; the chevrons stay 24px wide (WCAG 2.5.8). Narrower,
   or at large text, the row wraps instead of running past the edge. */
@media(min-width:961px){.site-header .header-inner{gap:12px}.site-header .nav-list{column-gap:0;flex-wrap:wrap}.site-header .main-nav{min-width:0}.site-header .main-nav .nav-top{padding:9px 4px}.site-header .main-nav .nav-toggle{width:20px}}
@media(min-width:961px) and (max-width:1060px){.site-header .main-nav .nav-top{padding:9px 6px;font-size:.9375rem}.site-header .logo{font-size:1.25rem}}
/* Join Free: the yellow pill with a pressed edge. Sign In: an outlined pill on the band. */
.member-nav-link,.member-join-link{display:inline-flex!important;align-items:center;min-height:44px;padding:9px 16px!important;border-radius:999px!important;background:var(--yellow);color:var(--on-yellow)!important;font:800 .875rem/1 var(--font-body)!important;text-decoration:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.member-nav-link:hover,.member-join-link:hover{background:var(--yellow);filter:brightness(1.04)}
.member-login-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;border-radius:999px;font:800 .875rem/1 var(--font-body);padding:8px 14px;color:var(--stage-band-on);border:2px solid rgba(255,255,255,.7);text-decoration:none}
.member-login-link svg{stroke:currentColor;fill:none;stroke-width:1.8}
/* Sign in keeps the band's own text colour on hover and keyboard focus, with the menu links' darker fill (r8-sick-link,
   12 Oct 2026): membership.css turned it brand red, which vanished on the red band. Stage hubs use the hub
   band's colour; inside the open phone menu (a light card) it keeps a visible brand hover. The Menu button's
   outline follows its text, so it shows on every band in both themes. */
.site-header .member-login-link:is(:hover,:focus-visible){color:var(--stage-band-on);border-color:var(--stage-band-on);background:transparent;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.site-header .nav-menu-toggle{border-color:currentColor}
/* Dropdown panels and the phone menu sit on the card with an ink outline. */
.nav-panel{border:3px solid var(--outline);border-radius:var(--radius);background:var(--card);color:var(--ink);box-shadow:var(--shadow-md)}
.site-header .main-nav .nav-panel a{font-weight:600;color:var(--ink)}
.nav-group-title{font:800 .75rem/1.4 var(--font-body);color:var(--muted)}
.nav-item-tools .nav-panel,.nav-item-guides .nav-panel,.nav-item-downloads .nav-panel{padding:22px!important;overscroll-behavior:contain}
/* Compare names each comparison by its question: one line each on desktop; on phones a question that wraps
   splits evenly instead of leaving one word on its own line. */
@media(min-width:961px){.nav-item-compare .nav-panel{width:23.5rem}}
.site-header .main-nav .nav-item-compare .nav-panel a{text-wrap:balance}
.nav-goals-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.nav-goal{padding:12px 12px 10px;border-radius:18px;background:var(--soft);border:2px solid var(--hair)}
.site-header .main-nav .nav-panel .nav-goal>a{display:flex;align-items:center;gap:10px;font:800 1.0625rem/1.2 var(--font-head);color:var(--ink);padding:4px 6px 8px}
.nav-goal>a>svg{width:34px;height:34px;padding:6px;border-radius:50%;background:var(--stage);color:var(--stage-on);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.nav-goal ol{list-style:none;margin:0;padding:0;counter-reset:step}
.nav-goal ol li{counter-increment:step}
.site-header .main-nav .nav-goal ol a::before{content:counter(step);display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;height:22px;margin-top:1px;border-radius:50%;background:var(--ink-base);color:var(--tabbar-on);font:800 .6875rem/1 var(--font-body)}
.site-header .main-nav .nav-goal a{display:flex;gap:8px;min-height:36px;padding:5px 6px;font-size:.875rem;border-radius:10px}
.site-header .main-nav .nav-goal a:hover{background:var(--card);color:var(--ink)}
.nav-goal>ul{margin:4px 0 0!important;padding:6px 0 0!important;border-top:2px dashed var(--hair);list-style:none}
.site-header .main-nav .nav-goal>ul a{font-size:.8125rem;color:var(--muted)}
.nav-goal>p{margin:8px 0 0;padding:8px 8px 0;border-top:2px dashed var(--hair);font:800 .75rem/1.3 var(--font-body);color:var(--muted)}
.nav-goal>p+ul{margin-top:0!important;padding-top:0!important;border-top:0}
@media(min-width:961px){.nav-panel>.nav-browse{position:sticky;bottom:-22px;z-index:1;margin:14px -22px -22px!important;padding:12px 22px;background:var(--card);border-top:2px solid var(--hair);border-radius:0 0 calc(var(--radius) - 3px) calc(var(--radius) - 3px)}}
.nav-browse{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.site-header .main-nav .nav-panel .nav-quiz{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px;background:var(--yellow);color:var(--on-yellow);font-weight:800;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.site-header .main-nav .nav-panel .nav-quiz:hover{background:var(--yellow);color:var(--on-yellow)}
.site-header .main-nav .nav-panel .nav-all{font-weight:800;color:var(--brand)}
/* Guides and Downloads columns: the stage's own list (no step numbers), a Start Here first item and a Members tag. */
.nav-goal>ul.nav-stage-list{margin:0!important;padding:0!important;border-top:0}
.site-header .main-nav .nav-goal>ul.nav-stage-list a{font-size:.875rem;color:var(--ink);overflow-wrap:anywhere}
.site-header .main-nav .nav-goal .nav-start a{font-weight:800}
.site-header .main-nav .nav-goal .nav-start a::after{content:"→";margin-left:auto}
.nav-tag{flex:0 0 auto;align-self:center;margin-left:auto;padding:1px var(--space-inline);border:2px solid var(--outline);border-radius:999px;background:var(--yellow);color:var(--on-yellow);font:800 .6875rem/1.3 var(--font-body);white-space:nowrap}
@media(max-width:1000px){.nav-goals-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Mega menus (visible-nav, Calvin 13 Oct 2026; ledger P1-003, replacing the visual QA A13 newspaper
   columns): six stage cards in a fixed 3-by-2 grid in stage order (Expecting, Baby, Toddler across the
   top), every card the same height. Each card lists its first steps, guides or printables and ends with
   "See all N steps" (chrome.js); how many it lists follows the window height (3 below 720px, 4, then 5
   from 880px), so at 1280x800 and 1440x900 the whole panel fits with nothing to scroll. "Also useful"
   stays on the stage hubs. The phone Menu (960px and under) still lists everything. */
.site-header .main-nav .nav-panel .nav-goal>a.nav-goal-all{display:none}
@media(min-width:961px){
 .site-header .nav-goals-grid{grid-auto-rows:1fr;gap:10px}
 .site-header .main-nav .nav-panel .nav-goal li>a{padding-top:4px;padding-bottom:4px}
 .site-header .nav-goals-grid>.nav-goal{display:flex;flex-direction:column;min-width:0;padding:10px 10px 8px}
 .site-header .main-nav .nav-panel .nav-goal>a:first-child{padding:2px 6px 6px}
 .site-header .nav-goal>a>svg{width:30px;height:30px;padding:5px}
 .site-header .nav-goal>p,.site-header .nav-goal>p+ul{display:none}
 .site-header .main-nav .nav-panel .nav-goal>a.nav-goal-all{display:flex;align-items:center;gap:0;margin-top:auto;padding:5px 6px;font:800 .875rem/1.35 var(--font-body);color:var(--brand)}
 .site-header .main-nav .nav-panel .nav-goal>.nav-goal-all::after{content:"→";margin-left:6px}
 .site-header .main-nav .nav-panel .nav-goal>.nav-goal-all:hover{text-decoration:underline;text-underline-offset:3px}
 /* The sticky panel footer never covers the link that has keyboard focus. */
 .site-header .nav-item-tools .nav-panel,.site-header .nav-item-guides .nav-panel,.site-header .nav-item-downloads .nav-panel{scroll-padding-bottom:96px}
}
@media(min-width:961px) and (min-height:880px){
 .site-header .nav-goal>:is(ol,ul.nav-stage-list)>li:nth-child(n+6){display:none}
 .site-header .main-nav .nav-panel .nav-goal:not(:has(>:is(ol,ul.nav-stage-list)>li:nth-child(6)))>.nav-goal-all{display:none}
}
@media(min-width:961px) and (min-height:720px) and (max-height:879.98px){
 .site-header .nav-goal>:is(ol,ul.nav-stage-list)>li:nth-child(n+5){display:none}
 .site-header .main-nav .nav-panel .nav-goal:not(:has(>:is(ol,ul.nav-stage-list)>li:nth-child(5)))>.nav-goal-all{display:none}
}
@media(min-width:961px) and (max-height:719.98px){
 .site-header .nav-goal>:is(ol,ul.nav-stage-list)>li:nth-child(n+4){display:none}
}
/* "More below" shows only while the panel can scroll (larger text, a short window): a panel with nothing
   to scroll has an inactive scroll timeline, so the cue keeps its hidden base style. */
@supports (animation-timeline:scroll()){
 @media(min-width:961px){
  .site-header .nav-panel>.nav-browse::before{content:"More below ↓" / "";order:-1;flex:1 0 100%;height:0;margin-bottom:0;overflow:hidden;opacity:0;font:800 .8125rem/1.2 var(--font-body);color:var(--muted);animation:nav-more linear both;animation-timeline:scroll(nearest block)}
  .site-header .nav-panel>.nav-browse{row-gap:0;animation:nav-more-edge linear both;animation-timeline:scroll(nearest block)}
 }
 @keyframes nav-more{0%,90%{opacity:1;height:auto;margin-bottom:10px}100%{opacity:0;height:0;margin-bottom:0}}
 @keyframes nav-more-edge{0%,90%{box-shadow:0 -14px 18px -12px rgba(0,0,0,.45)}100%{box-shadow:none}}
}
@media(max-width:960px){
  .site-header .main-nav{background:var(--card);color:var(--ink);border:3px solid var(--outline);border-radius:var(--radius)}
  .site-header .main-nav .nav-top{color:var(--ink)}
  .site-header .main-nav .nav-top:hover,.site-header .main-nav .nav-top[aria-current=page]{background:var(--soft);color:var(--ink)}
  .site-header .main-nav :focus-visible{outline-color:var(--focus)}
  .site-header .main-nav .member-login-link{color:var(--ink);border-color:var(--outline)}
  .site-header .main-nav .member-login-link:is(:hover,:focus-visible){color:var(--brand);border-color:var(--brand);background:var(--soft)}
  .nav-goals-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .site-header .main-nav .nav-goal a{font-size:.9375rem;min-height:44px}
  .site-header .main-nav .nav-panel .nav-goal>a{font-size:1.125rem}
  .nav-toggle-label{display:none}
  .main-nav .nav-item.has-toggle>.nav-top{display:none}
  .site-header .main-nav .nav-item.has-toggle>.nav-toggle{flex:1 1 auto;width:auto;justify-content:space-between;gap:12px;min-height:52px;padding:0 14px 0 4px;border-left:0;color:var(--ink);font:800 1.125rem/1.2 var(--font-head);text-align:left}
  .main-nav .nav-item.has-toggle>.nav-toggle::before{order:2}
  .main-nav .nav-item.has-toggle .nav-toggle-label{display:inline}
  .main-nav .nav-item.has-toggle>.nav-toggle:hover,.main-nav .nav-item.has-toggle>.nav-toggle[aria-expanded=true]{background:none;color:var(--brand)}
  .nav-goals-grid .nav-goal ol,.nav-goals-grid .nav-goal>p,.nav-goals-grid .nav-goal>ul{display:none}
  .nav-goals-grid .nav-goal{padding:4px 8px}
  .site-header .main-nav .nav-goals-grid .nav-goal>a{min-height:48px;padding:6px 4px;align-items:center}
}
.nav-toggle-label{display:none}
/* Phone Menu: "Search The Site" at the top of the sheet, and a "N Tools" / "N Guides" / "N Printables" toggle on each stage that opens its list in place (common.js). */
.nav-search,.nav-goal-more{display:none}
@media(max-width:960px){
  .site-header .main-nav .nav-search{display:block;padding:8px 4px 12px;border-bottom:2px dashed var(--hair)}
  .site-header .main-nav .nav-search~.nav-item-search{display:none}
  .nav-search label{display:block;margin:0 0 6px;font:800 1.125rem/1.2 var(--font-head);color:var(--ink)}
  .nav-search input{box-sizing:border-box;width:100%;min-height:48px;padding:8px 14px;border:3px solid var(--outline);border-radius:14px;background:var(--card);color:var(--ink);font:600 1rem/1.3 var(--font-body)}
  .nav-search-status{margin:6px 0 0;font-size:.875rem;color:var(--muted)}
  .nav-search-status:empty{display:none}
  .nav-search-results ul{list-style:none;margin:0!important;padding:0!important}
  .nav-search-group{margin:var(--space-stack) 0 var(--space-tight);padding:0 var(--space-inline);font:800 .75rem/1.4 var(--font-body);color:var(--muted)}
  .site-header .main-nav .nav-search-results a{display:flex;flex-direction:column;align-items:stretch;justify-content:center;white-space:normal;gap:2px;min-height:44px;padding:6px 8px;border-radius:10px;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
  .nav-search-type{font:800 .75rem/1.2 var(--font-body);color:var(--muted)}
  .site-header .main-nav .nav-search-results a:hover{background:var(--soft)}
  .nav-goals-grid .nav-goal.has-more{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px}
  .nav-goals-grid .nav-goal.has-more>ol,.nav-goals-grid .nav-goal.has-more>p,.nav-goals-grid .nav-goal.has-more>ul{grid-column:1/-1}
  .site-header .main-nav .nav-goal-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px;border:2px solid var(--outline);border-radius:999px;background:var(--card);color:var(--ink);font:800 .875rem/1.1 var(--font-body);white-space:nowrap;cursor:pointer}
  .nav-goal-more::after{content:"";width:.5em;height:.5em;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px)}
  .nav-goal-more[aria-expanded=true]::after{transform:rotate(-135deg) translateY(-2px)}
  .nav-goals-grid .nav-goal.is-expanded>ol,.nav-goals-grid .nav-goal.is-expanded>ul{display:block}
  .nav-goals-grid .nav-goal.is-expanded>p{display:block}
}
/* Phone header: signed-out visitors get the yellow Join Free pill; members see "Hi, <name>". */
.member-join-link{display:none!important}
@media(max-width:767px){
  .site-header:not(.is-signed-in) .header-inner>.member-login-link{display:none}
  .site-header:not(.is-signed-in) .member-join-link{order:2;display:inline-flex!important;white-space:nowrap}
  .site-header .nav-item-join{display:none}
}
.member-join-link[aria-current=page]{outline:3px solid var(--stage-band-on);outline-offset:2px}
@media(min-width:360px) and (max-width:767px){
  .site-header .member-login-link.is-signed-in>span{position:static;width:auto;height:auto;margin:0;clip:auto;display:inline-block;max-width:8.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
  .site-header .member-login-link.is-signed-in .member-login-icon{display:none!important}
}
@media(max-width:430px){
  .site-header .header-inner{column-gap:6px}
  .logo{font-size:1.1875rem}
  span.logo-mark{width:28px;height:28px;margin-right:6px;font-size:.9375rem}
  svg.logo-mark{width:30px;height:30px;margin-right:4px}
  .member-login-link{padding:7px 10px;font-size:.8125rem;gap:4px}
  .nav-menu-toggle{padding:8px!important}
}
@media(max-width:350px){.member-login-link>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* ---------- Bottom tab bar on phones: ink bar, yellow current tab ---------- */
.tab-bar{display:none}
@media(max-width:767px){
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .tab-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(4,1fr);padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:var(--tabbar-bg);border-top:0;box-shadow:0 -6px 18px -10px rgba(0,0,0,.5)}
  .tab-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;border-radius:14px;color:var(--tabbar-text);font:700 .75rem/1.1 var(--font-body);text-decoration:none}
  .tab-bar a[aria-current=page]{color:var(--tabbar-on);font-weight:800}
  .tab-bar a[aria-current=page] .tab-icon{stroke-width:2.2}
  .tab-icon{width:24px;height:24px}
  .mobile-action{bottom:calc(66px + env(safe-area-inset-bottom))!important}
  .shortlist-tray{bottom:calc(78px + env(safe-area-inset-bottom))!important}
  .session-expiry-banner{bottom:calc(82px + env(safe-area-inset-bottom))!important}
  .footer{padding-bottom:24px}
  html{scroll-padding-bottom:calc(150px + env(safe-area-inset-bottom))}
  html.has-save-bar{scroll-padding-bottom:calc(150px + var(--save-bar-space,0px) + env(safe-area-inset-bottom))}
}
@media(max-width:767px) and (max-height:28em){
  .mobile-action{display:none!important}
  html{scroll-padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .tab-bar{padding-top:3px;padding-bottom:calc(3px + env(safe-area-inset-bottom))}
  .tab-bar a{min-height:44px;gap:0;font-size:.6875rem}
  .tab-bar .tab-icon{width:18px;height:18px}
}
.mobile-action{background:var(--glass);border-top:3px solid var(--outline)}
@media print{.tab-bar,.site-header,.footer,.mobile-action,.share-actions,.card-options{display:none!important}body{background:#fff;color:#000}.headline,.sticker,.spinner-panel{box-shadow:none;border:3px solid #000}}

/* ---------- Full-bleed bands inside the centred main column ---------- */
main:has(>.coach-hero:first-child),main:has(>.goal-hero:first-child),body[data-tool] main:has(>.breadcrumb:first-child){padding-top:0}
/* Inside main at a larger text size (zoom), 1vw is drawn zoomed too, so the bleed divides by --text-zoom. */
.coach-hero,.goal-hero,body[data-tool] .intro,body[data-tool] .breadcrumb,.band{margin-inline:calc(50% - 50vw / var(--text-zoom,1));padding-inline:max(16px,calc(50vw / var(--text-zoom,1) - 50%))}

/* ---------- Cards and surfaces: white, 3px outline, generous radius ---------- */
.input-panel,.result-panel,.tool-link,.journey-card,.related,.directory-controls,.tool-next,.start-panel,.newsletter,.empty,.coach-quiz,.card,.goal-also a,.goal-step,.trust-points>div,.path-carry,.home-welcome,.home-puzzle,.home-game-card,.goal-learn{border:3px solid var(--outline);border-radius:var(--radius);background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm)}
.tool-link:hover,.journey-card:hover,.goal-step:hover,.goal-also a:hover,.home-game-card:hover,.goal-learn:hover{border-color:var(--outline);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.tool-link .go{color:var(--brand);font-weight:800}
.tool-link-icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;margin-bottom:14px;border-radius:50%;background:var(--rubber),var(--stage);color:var(--stage-on);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.tool-link-icon svg{width:26px;height:26px}
.discovery-official,.tool-official-name{margin:-6px 0 10px;font-size:.875rem;font-weight:700;color:var(--muted)}
.notice{border:3px solid var(--outline);border-radius:var(--radius);background:var(--tile-butter);color:var(--ink)}
.breadcrumb{color:var(--muted);font-size:.875rem}
.intro p{color:var(--muted)}
.updated{font-size:.8125rem;color:var(--muted)}

/* ---------- Homepage: red hero with a rubber kerb, and the stepping-pad route ---------- */
.coach-hero{padding-top:22px;padding-bottom:32px;background:linear-gradient(var(--band-red) calc(100% - var(--texture-edge)),transparent),var(--rubber),var(--band-red);color:var(--band-red-on);text-align:left}
.coach-hero h1{font-size:min(clamp(2.1rem,7vw,3.6rem),14vw);overflow-wrap:break-word;margin:4px 0 12px;max-width:17ch;color:var(--on-red)}
.coach-hero .hero-description,.coach-hero>p{max-width:36rem;margin:0 0 8px;font-size:1.0625rem;color:var(--band-soft)}
.coach-hero .eyebrow{color:var(--band-soft)}
.coach-hero .btn.secondary{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow)}
.coach-hero-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin:var(--space-block) 0 0}
.coach-hero-links a:not(.btn){color:var(--on-red);font-weight:800}
.stage-route-title{margin:var(--space-8) 0 var(--space-2);font:800 clamp(1.3rem,4vw,1.8rem)/1.1 var(--font-head)}
.stage-route-lead{margin:0 0 var(--space-4);color:var(--muted);font-size:.9375rem}
/* Pads: the platform's .goal-grid of .goal-card links, or the .stage-route / .stage-pad aliases.
   Phones: the mock's zig-zag hop with a dotted trail. Wider: one wavy row of six. */
.goal-grid,.stage-route{position:relative;display:block;height:430px;max-width:420px;margin:8px 0 0;padding:0;list-style:none;text-align:center}
.goal-grid::before,.stage-route::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 343 430' preserveAspectRatio='none'%3E%3Cpath d='M64 56 C 200 30, 300 60, 285 96 S 90 150, 96 196 S 290 220, 275 246 S 40 330, 60 356 S 280 360, 285 374' fill='none' stroke='%231d2328' stroke-width='4' stroke-dasharray='2 12' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat}
:root[data-theme=dark] .goal-grid::before,:root[data-theme=dark] .stage-route::before{filter:invert(1);opacity:.4}
.goal-card,.stage-pad{position:absolute;width:112px;height:112px;border:0;border-radius:50%;display:grid;place-content:center;justify-items:center;gap:2px;padding:8px;text-align:center;text-decoration:none;color:var(--stage-on);background:var(--stage);box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),0 6px 14px -8px rgba(0,0,0,.5);transition:transform .15s ease}
.goal-card:hover,.stage-pad:hover{transform:translateY(-3px) rotate(-2deg)}
.goal-card:active,.stage-pad:active{transform:translateY(1px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),0 3px 8px -6px rgba(0,0,0,.5)}
.goal-card:focus-visible,.stage-pad:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:50%}
.goal-card-icon,.stage-pad svg{display:block;width:26px;height:26px;margin:0 auto;background:none;color:inherit}
.goal-card-icon svg,.stage-pad svg{width:26px;height:26px}
.goal-card h3,.stage-pad b{margin:0;font:800 .9375rem/1.1 var(--font-head);color:inherit;letter-spacing:0;overflow-wrap:anywhere}
.goal-card p,.stage-pad span{margin:0;font:700 .7188rem/1.2 var(--font-body);color:inherit}
.goal-card>div{display:grid;gap:2px}
.goal-card-steps,.goal-card-blurb,.goal-card-arrow{display:none}
.goal-card-tagline{display:block}
.goal-grid>:nth-child(1),.stage-route>:nth-child(1){left:2%;top:0}
.goal-grid>:nth-child(2),.stage-route>:nth-child(2){right:3%;top:40px}
.goal-grid>:nth-child(3),.stage-route>:nth-child(3){left:12%;top:140px}
.goal-grid>:nth-child(4),.stage-route>:nth-child(4){right:10%;top:190px}
.goal-grid>:nth-child(5),.stage-route>:nth-child(5){left:1%;top:300px}
.goal-grid>:nth-child(6),.stage-route>:nth-child(6){right:1%;top:318px}
.stage-route>li{position:absolute}
.stage-route>li>.stage-pad{position:relative;left:auto;right:auto;top:auto}
@media(min-width:768px){
  .goal-grid,.stage-route{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;height:auto;max-width:none;padding:12px 0 46px}
  .goal-grid::before,.stage-route::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 100' preserveAspectRatio='none'%3E%3Cpath d='M30 40 C 80 100, 120 100, 150 60 S 230 0, 250 40 S 330 110, 350 60 S 430 0, 450 40 S 540 110, 570 60' fill='none' stroke='%231d2328' stroke-width='4' stroke-dasharray='2 12' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
  .goal-grid>*,.stage-route>*{position:relative!important;left:auto!important;right:auto!important;top:auto!important;justify-self:center;width:min(100%,140px);height:auto;aspect-ratio:1}
  .goal-grid>:nth-child(even),.stage-route>:nth-child(even){transform:translateY(34px)}
  .goal-grid>:nth-child(even):hover{transform:translateY(31px) rotate(-2deg)}
  .goal-card h3,.stage-pad b{font-size:1.0625rem}
  .goal-card p,.stage-pad span{font-size:.7812rem}
  .goal-card-icon,.goal-card-icon svg,.stage-pad svg{width:30px;height:30px}
}
/* Very narrow or zoomed: a plain column of pads, no hop trail. */
@media(max-width:340px){
  .goal-grid,.stage-route{display:grid;height:auto;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .goal-grid::before,.stage-route::before{display:none}
  .goal-grid>*,.stage-route>*{position:relative!important;left:auto!important;right:auto!important;top:auto!important;justify-self:center;width:100%;max-width:120px;height:auto;aspect-ratio:1}
}
/* Large text on phones (UI and UX ledger P0-12, 13 October 2026): main is zoomed, but the pads keep
   their hop-trail offsets, so at 130% and 150% they overlapped ("Preschool" over "Toddler") and at
   288-320px widened the page. From A+ 130% below 768px the pads drop the trail and sit in a grid:
   two columns with a 12px gap when the zoomed column has room for two (about 230px), one otherwise. */
@media(max-width:47.99em){
  html:is([data-text-size="2"],[data-text-size="3"]) :is(.goal-grid,.stage-route){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,6.5rem),1fr));gap:12px;height:auto;max-width:28rem;padding:0}
  html:is([data-text-size="2"],[data-text-size="3"]) :is(.goal-grid,.stage-route)::before{display:none}
  html:is([data-text-size="2"],[data-text-size="3"]) :is(.goal-grid,.stage-route)>*{position:relative;left:auto;right:auto;top:auto;transform:none;justify-self:center;width:100%;max-width:7rem;height:auto;aspect-ratio:1}
  html:is([data-text-size="2"],[data-text-size="3"]) .stage-route>li>.stage-pad{width:100%;height:100%}
}
/* Answer cards ("Real Answers, Worked Out In Minutes") and the popular-tools list. */
.answer-card,.popular-tool-list a{display:grid;gap:2px;padding:14px 16px!important;border:3px solid var(--outline)!important;border-radius:var(--radius);background:var(--card);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-sm)}
.answer-card small{display:block;color:var(--muted);font-size:.8125rem;font-weight:700}
.answer-card strong{font:900 1.5rem/1.1 var(--font-head);color:var(--display-red)}
.popular-tool-list{border:0!important;display:grid;gap:var(--space-stack)}
.popular-tool-list a{grid-template-columns:40px 1fr 28px!important}
.popular-tool-list span{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--yellow);color:var(--on-yellow)!important;font:800 .9375rem/1 var(--font-body)!important;grid-row:1/3}
.popular-tool-list strong{font:800 1.1875rem/1.25 var(--font-head)!important}
.popular-tool-list small{grid-column:2/3;margin-top:-4px;color:var(--muted)}
.popular-tool-list b{grid-row:1/3;grid-column:3}
.coach-quiz{max-width:760px;margin-inline:auto!important;padding:24px;scroll-margin-top:96px}
.coach-quiz-intro{text-align:center;margin-bottom:var(--space-block)}
.coach-quiz-intro h2{font-size:1.75rem;margin:var(--space-3) 0 var(--space-2)}
.coach-quiz-intro p{color:var(--muted);margin:0}
.coach-quiz-intro .help-bubble{width:44px;height:44px;font-size:1.5rem}
.goal-quiz fieldset{margin:0 0 var(--space-block);padding:0;border:0}
.goal-quiz legend{margin-bottom:var(--space-3);font:800 1.1875rem/1.3 var(--font-head)}
.quiz-num{display:inline-block;margin-right:6px;padding:2px 10px;border-radius:999px;background:var(--ink-base);color:var(--tabbar-on);font:800 .75rem/1.6 var(--font-body);vertical-align:2px}
.quiz-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.quiz-options label{display:flex;align-items:center;gap:10px;min-height:60px;padding:12px 16px;font-size:1rem;font-weight:700;line-height:1.35;cursor:pointer;box-shadow:var(--press)}
.quiz-options label:has(input:checked){border-color:var(--blue);background:var(--tile-sky);box-shadow:none}
.quiz-options label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.quiz-options input{width:22px;height:22px;margin:0;flex:0 0 auto}
.goal-quiz>.btn{width:100%;min-height:52px;font-size:1.0625rem}
.goal-quiz .quiz-back{display:block;margin:12px auto 0;padding:8px 12px;border:0;background:none;color:var(--muted);font-weight:700;min-height:44px}
.quiz-result:not(:empty){margin-top:var(--space-block)}
/* Quiz result (round 6): the stage band, which dims at night like the hub and tool headers; the icon
   sits on the label line, so at 130% text the steps keep the card's full width. */
.quiz-pick{display:block;padding:20px;border-radius:var(--radius);background:var(--stage-band);color:var(--stage-band-on)}
.quiz-pick h3{font-size:1.625rem;margin:0 0 var(--space-3)}
.quiz-pick p{margin:0 0 10px}
.quiz-pick-label{display:flex;align-items:center;gap:8px;font-weight:800}
.quiz-pick-label .goal-card-icon{margin:0;flex:none}
.quiz-steps.quiz-by-stage a{border-left-width:8px;border-left-color:var(--stage)}
.quiz-ages{margin:var(--space-3) 0 0;padding:0;border:0}
.quiz-ages legend{margin-bottom:var(--space-2);font:800 1rem/1.3 var(--font-head)}
.trust-band{border:0!important;padding:0!important;grid-template-columns:.8fr 1.2fr!important;gap:32px!important}
.trust-points{grid-template-columns:repeat(3,minmax(0,1fr))}
.trust-points>div{padding:18px}
.trust-points h3{font-size:1.125rem!important}
.trust-points p{font-size:.9375rem}
.home-welcome{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;margin:var(--space-block) 0 0;padding:18px 20px}
.home-welcome h2{margin:.15rem 0 .25rem;font-size:1.375rem;line-height:1.2}
.home-welcome p{margin:0}
.home-welcome-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;flex-shrink:0}
.home-puzzle{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px}
.home-puzzle h2{margin:.2rem 0 .4rem}
.home-puzzle .btn{width:auto;flex-shrink:0}
@media(max-width:700px){.home-welcome,.home-puzzle{display:block;padding:16px}.home-welcome-actions{margin-top:12px}.home-welcome-actions .btn,.home-puzzle .btn{width:100%;margin-top:12px}}

/* ---------- /tools/ directory and stage hubs ---------- */
.goal-directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-grid);margin:var(--space-2) 0 var(--space-section)}
.goal-group{padding:var(--space-card);border:3px solid var(--outline);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-sm)}
.goal-group-title{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-3);font:800 1.25rem/1.2 var(--font-head);color:var(--ink);text-decoration:none}
.goal-group-icon{width:40px;height:40px;padding:8px;border-radius:50%;background:var(--rubber),var(--stage);color:var(--stage-on);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.goal-group ol{margin:0;padding-left:1.4em}
.goal-group li{margin:2px 0}
.goal-group li a{display:inline;padding:2px 0;line-height:1.9;font-weight:700;color:var(--ink)}
.goal-group-also{margin:var(--space-3) 0 0;font-size:.875rem;color:var(--muted)}
.goal-group-also a{color:var(--ink)}
.directory-search-title{font-size:1.625rem;margin:0 0 var(--space-heading-after)}
.directory-shortcuts{border:0!important;padding:16px 0!important}
.goal-hero{display:flex;gap:22px;align-items:flex-start;padding-top:28px;padding-bottom:28px;margin-bottom:var(--space-8);background:linear-gradient(var(--stage-band) calc(100% - var(--texture-edge)),transparent),var(--rubber),var(--stage-band);color:var(--stage-band-on)}
.goal-hero h1{margin:4px 0 8px;color:inherit}
.goal-hero p,.goal-hero .eyebrow{color:inherit;max-width:38rem}
.goal-hero-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 76px;height:76px;border-radius:50%;background:var(--card);color:var(--ink);box-shadow:inset 0 -5px 0 rgba(0,0,0,.14)}
.goal-hero-icon svg{width:40px;height:40px}
.goal-tip{max-width:760px;margin:calc(-1 * var(--space-2)) 0 var(--space-8)}.goal-tip p{margin:0}.goal-tip a{font-weight:800;color:var(--brand)}
.goal-steps{list-style:none;margin:0 0 var(--space-group);padding:0;display:grid;gap:var(--space-stack);max-width:760px}
.goal-step{display:flex;align-items:center;gap:16px;padding:14px 18px;text-decoration:none}
.goal-step-num{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;height:44px;border-radius:50%;background:var(--stage);color:var(--stage-on);font:900 1.125rem/1 var(--font-head);box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.goal-step-text{display:grid;gap:2px;min-width:0}
.goal-step-text strong{font:800 1.1875rem/1.25 var(--font-head)}
.goal-step-text small{font-size:.875rem;color:var(--muted)}
.goal-step-arrow{margin-left:auto;font-size:1.375rem;font-weight:800;color:var(--brand)}
.goal-also h2,.goal-also-tools h2,.goal-others h2{font-size:1.375rem}
.goal-also-list{list-style:none;margin:0 0 var(--space-group);padding:0;display:grid;gap:var(--space-stack);max-width:760px}.goal-step-icon svg{width:22px;height:22px}
.goal-also ul{list-style:none;margin:0 0 var(--space-group);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-stack)}
.goal-also a{display:grid;gap:2px;height:100%;padding:14px 16px;text-decoration:none}
.goal-also small{color:var(--muted)}
.goal-guide{margin:0 0 var(--space-block)}.goal-guide a{font-weight:800;color:var(--brand)}
.goal-learn,.home-game-card{display:flex;align-items:center;gap:16px;max-width:760px;margin:0 0 var(--space-group);padding:16px 18px;text-decoration:none}
.goal-learn strong,.home-game-card strong{display:block;font:800 1.1875rem/1.25 var(--font-head)}
.goal-learn small,.home-game-card small{display:block;margin-top:4px;font-size:.875rem;color:var(--muted)}
.goal-chips{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.goal-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px 8px 8px;border-radius:999px;background:var(--card);border:3px solid var(--outline);color:var(--ink);font-weight:800;text-decoration:none;box-shadow:var(--press)}
.goal-chip-icon{width:28px;height:28px;padding:5px;border-radius:50%;background:var(--stage);color:var(--stage-on)}
.goal-others{margin:var(--space-section) 0 0}

/* ---------- Tool pages: stage-coloured band, three steps, the spinner panel ---------- */
body[data-tool] main{max-width:800px}
body[data-tool] .breadcrumb{margin-bottom:0;padding-top:14px;padding-bottom:0;background:var(--stage-band);color:var(--stage-band-on);font-weight:800}
body[data-tool] .breadcrumb a{color:inherit}
body[data-tool] .intro{margin-bottom:var(--space-block);padding-top:8px;padding-bottom:26px;background:linear-gradient(var(--stage-band) calc(100% - var(--texture-edge)),transparent),var(--rubber),var(--stage-band);color:var(--stage-band-on)}
body[data-tool] .intro h1{margin:10px 0 6px;color:inherit;font-size:clamp(1.9rem,6.5vw,2.6rem)}
body[data-tool] .intro p,body[data-tool] .intro .updated,body[data-tool] .intro .tool-official-name{color:inherit}
body[data-tool] .intro>p:not(.tool-official-name):not(.tool-guide-top):not(.path-strip){font-size:1rem;max-width:40rem}
body[data-tool] .intro a{color:inherit;font-weight:800}
.back-link{display:inline-flex;gap:4px;align-items:center;min-height:32px;font-weight:800;font-size:.875rem;color:inherit;text-decoration:none}
.back-link svg{width:18px;height:18px}
.tool-guide-top{margin:calc(-1 * var(--space-1)) 0 var(--space-3)}
.tool-guide-top a{font-weight:800;color:var(--brand)}
/* "Step X of N" strip: an outlined card pill, the step count in an ink pill with yellow numerals. */
.path-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;padding:8px 14px 8px 8px;border:3px solid var(--outline);border-radius:22px;background:var(--card);font-size:.875rem;color:var(--ink)}
body[data-tool] .intro .path-strip{color:var(--ink)}
body[data-tool] .intro .path-strip a{color:var(--ink)}
.path-strip a{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--ink)}
.path-strip-icon{width:28px;height:28px;padding:5px;border-radius:50%;background:var(--stage);color:var(--stage-on)}
.path-strip-step{padding:3px 11px;border-radius:999px;background:var(--ink-base);color:var(--tabbar-on);font:800 .8125rem/1.3 var(--font-head)}
.path-strip-next{color:var(--ink)}
.path-strip-next a{font-weight:700}
/* Slim strip (review round 3): one line on a phone, so the page's own answer stays on the first
   screen. The next question ellipsises; its full wording is in the link's title and in What Next. */
.path-strip{gap:4px 8px;padding:4px 12px 4px 4px;border-radius:24px;min-width:0}
.path-strip>a{flex:0 0 auto}
.path-strip-step{flex:0 0 auto;white-space:nowrap}
.path-strip :is(.path-strip-next,.path-strip-all){display:block;line-height:44px;flex:0 1 auto;min-width:44px;margin-left:auto;min-height:44px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:800}
.path-strip-q{display:none}
@media(min-width:48em){.path-strip-q{display:inline}}
.compare-results>.path-strip{margin:var(--space-6) 0 var(--space-3)}
.compare-layout>*{min-width:0}
body[data-tool] .intro :focus-visible{outline-color:var(--focus-band)}
body[data-tool] .intro .path-strip :focus-visible{outline-color:var(--focus)}
/* Three-step labels: Numbers, Result, Next. */
.tool-step{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 var(--space-3);font:800 1.0625rem/1.3 var(--font-head);letter-spacing:0;color:var(--ink);text-transform:none}
h2.tool-step{font-size:1.1875rem}
.tool-step-number{display:inline-flex;flex:none;align-items:center;padding:4px 12px;border-radius:999px;background:var(--ink-base);color:var(--tabbar-on);font:800 .8125rem/1.2 var(--font-head);white-space:nowrap}
.step-bars{display:flex;gap:6px;margin:0 0 var(--space-4);padding:0;list-style:none}
.step-bars>*{flex:1;text-align:center;font:800 .8125rem/1 var(--font-head);padding:10px 0;border-radius:999px;border:3px solid var(--outline);background:var(--card);color:var(--ink)}
.step-bars>[aria-current],.step-bars>.on{background:var(--ink-base);border-color:var(--ink-base);color:var(--tabbar-on)}
body[data-tool] .tool-workspace{display:block}
body[data-tool] .input-panel{margin-bottom:var(--space-block);padding:var(--space-card)}
body[data-tool] .input-panel h2{font-size:1.375rem}
body[data-tool] .result-column>*+*{margin-top:var(--space-block)}
body[data-tool] .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5) var(--space-4);margin:var(--space-4) 0 var(--space-block)}
.input-panel>button,.input-panel>.btn{width:100%}
/* A field's help line belongs to its field; the grid's row gap separates one field from the next. */
.grid>div>p:last-child,.grid>div>.field-error:last-child{margin-bottom:0}
.result-panel{padding:var(--space-card)}
.example-tag,.eg{display:inline-block;font:800 .6875rem/1.4 var(--font-body);padding:2px 8px;border-radius:999px;background:var(--yellow);color:var(--on-yellow);margin-left:6px;vertical-align:middle}

/* The spinner panel: the platform's .headline (and the prototype's .sticker), re-skinned as the
   playground's yellow bolted panel. Bolts are background gradients, so no extra markup is needed. */
.headline,.sticker,.spinner-panel{position:relative;display:block;margin:var(--space-1) 0 var(--space-4);padding:26px 22px 22px;border:0;border-radius:26px;text-align:center;color:var(--spinner-ink);
  background:var(--bolts) left 10px top 10px/12px 12px no-repeat,var(--bolts) right 10px top 10px/12px 12px no-repeat,var(--bolts) left 10px bottom 14px/12px 12px no-repeat,var(--bolts) right 10px bottom 14px/12px 12px no-repeat,var(--spinner);
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.15),0 10px 20px -12px rgba(0,0,0,.5);transform:none}
.sticker::after,.sticker::before{display:none}
.sticker .star{display:none}
.headline .headline-lead,.headline .eyebrow,.sticker .kicker,.spinner-panel .spinner-lead{margin:0 0 4px;font:800 .9375rem/1.25 var(--font-head);letter-spacing:0;text-transform:none;color:var(--spinner-ink)}
.headline-value,.result-panel .headline-value,.sticker .big,.spinner-panel .spinner-value{display:block;margin:6px 0;font:900 clamp(3rem,15vw,4.4rem)/1 var(--font-head);letter-spacing:-.03em;color:var(--spinner-ink);text-transform:none;overflow-wrap:anywhere}
.headline #headline-context,.headline .headline-context,.sticker .sub,.spinner-panel .spinner-sub{margin:0;font:700 .9375rem/1.4 var(--font-body);color:var(--spinner-ink)}
.headline .headline-split{margin:-2px 0 8px;font:800 1.125rem/1.35 var(--font-body);color:var(--spinner-ink)}
.headline-value .headline-by{display:block;font-size:.4em;letter-spacing:0;color:var(--spinner-ink)}
.headline .muted{color:var(--spinner-ink)}
/* No single word left alone on the tile's last line ("/ is", "/ kg."): balanced lines (visual QA A25). */
.headline :is(.headline-lead,#headline-context,.headline-context),.sticker .sub,.spinner-panel :is(.spinner-lead,.spinner-sub){text-wrap:balance}
.headline :focus-visible{outline-color:var(--ink-base)}
/* Breakdown under the panel: an outlined card with dashed row rules (the mock's split table). */
.stat-row{gap:var(--space-3)}
.stat{padding:12px 14px;border:3px solid var(--outline);border-radius:18px;background:var(--card)}
.lbl,.result-panel .lbl{font-size:.9375rem;line-height:1.4;color:var(--ink)}
.val{font-weight:900;font-size:1.375rem}
/* A zero tile (tool-page.js markZeroTiles) is quiet, at reading size: "S$0" is an answer, not a headline (A9, A17). */
.stat .val.is-zero{font:800 1rem/1.35 var(--font-body);letter-spacing:0;color:var(--muted)}
/* Tile grid (A17): words are not set as a big number, an odd last tile spans the row instead of sitting
   alone, and a value breaks at balanced points ("S$0 of / S$5,000", never "S$0 of S$5, / 000"). */
.stat .val.is-text{font:800 1.0625rem/1.3 var(--font-body);letter-spacing:0}
.stat-row>.stat:last-of-type:nth-of-type(odd){grid-column:1/-1}
/* A bracketed part of a tile value ("21 weeks (16 + 5 shared)") is one smaller unit that moves to the
   next line whole and never breaks inside its brackets (tool-page.js holdBrackets; ledger P1-091). */
.stat .val .val-aside{display:inline-block;font:700 .875rem/1.3 var(--font-body);letter-spacing:0;color:var(--ink)}
.stat .val,.stat .lbl{text-wrap:balance}
.split-table,.result-panel table{width:100%;border-collapse:collapse;font-size:.9375rem}
/* Cells get side padding so number columns never run together at 375px or 200% text; the outer
   edges stay flush with the card. Two-column tables put the value on the right in bold; wider
   comparison tables right-align every column after the first, header included, and keep the
   tool's own emphasis. A table too wide for the phone scrolls inside its .table-wrap, or inside
   the result region when a tool places the table there directly, never the whole page. */
.split-table td,.split-table th,.result-panel td,.result-panel th{padding:var(--space-2) var(--space-2);border-bottom:2px dashed var(--hair);vertical-align:baseline}
.split-table :is(td,th):first-child,.result-panel :is(td,th):first-child{padding-left:0}
.split-table :is(td,th):last-child,.result-panel :is(td,th):last-child{padding-right:0}
.split-table tr:last-child td,.result-panel tr:last-child td{border-bottom:0}
.split-table td:last-child,.result-panel td:last-child{text-align:right;font-weight:800}
.split-table tr:has(>:nth-child(3)) :is(td,th):not(:first-child),.result-panel table tr:has(>:nth-child(3)) :is(td,th):not(:first-child){text-align:right}
.split-table tr:has(>:nth-child(3)) td:last-child,.result-panel table tr:has(>:nth-child(3)) td:last-child{font-weight:inherit}
.result-panel .results:has(>table){max-width:100%;overflow-x:auto}
.coach-meter{margin:var(--space-3) 0 var(--space-4)}
.coach-meter-track{height:16px;border-radius:999px;background:var(--card);overflow:hidden;box-shadow:inset 0 0 0 3px var(--outline)}
.coach-meter-fill{display:block;height:100%;width:0;border-radius:inherit;background:var(--rubber),var(--green);transition:width .4s ease}
.coach-meter-label{margin:6px 0 0;font-size:.875rem;font-weight:800;color:var(--ink)}
.result-breakdown-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:48px;margin:-6px 0 18px;padding:10px 18px;border:3px solid var(--outline);border-radius:999px;background:var(--card);color:var(--ink);font:800 .9375rem/1.3 var(--font-body);text-align:left;cursor:pointer;box-shadow:var(--press)}
.result-breakdown-toggle::after{content:"";flex:0 0 auto;width:9px;height:9px;margin-right:4px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.result-breakdown-toggle[aria-expanded=true]::after{transform:translateY(2px) rotate(-135deg)}
.results.is-collapsed .stat.is-extra{display:none}
.results.is-collapsed .stat-row:not(:has(.stat:not(.is-extra):not([hidden]))){display:none}
.result-panel .info-tip{vertical-align:baseline}
.info-tip-keep{white-space:nowrap}
.result-panel .info-tip-button{width:24px;height:24px;min-width:24px;border:2px solid var(--muted)!important;background:transparent!important;color:var(--muted)!important;font:800 .8125rem/1 var(--font-body)!important;vertical-align:-4px;box-shadow:none}
.result-panel .info-tip-button::before{inset:-10px}
.result-panel .info-tip-bubble{white-space:normal;font-size:.9375rem}
/* A stat tile's tip opens under the tile's row, on phones as wide as the row, with a notch under its "?"
   (tool-glossary.js rowPlace; ledger P1-009). A span, so the odd-last-tile rule above still counts tiles. */
.stat-row>.info-tip-row{position:relative;top:auto;left:auto;grid-column:1/-1;display:block;width:auto;max-width:none;margin:2px 0 0;padding:12px 14px;transform:none;box-shadow:none;font-size:.9375rem;line-height:1.45;text-align:left;white-space:normal}
.stat-row>.info-tip-row::before{content:"";position:absolute;top:-10px;left:clamp(10px,calc(var(--tip-x,50%) - 10px),calc(100% - 30px));width:14px;height:14px;border:solid var(--outline);border-width:3px 0 0 3px;background:var(--card);transform:rotate(45deg)}
.stat-row>.info-tip-row .info-tip-close{margin-top:.5rem}
/* From 768px the same: under the row, never over a tile (the floating bubble had covered the next tile's
   value). It keeps a reading width and starts near its "?" (tool-glossary.js sets the margin and notch). */
@media(min-width:768px){.stat-row>.info-tip-row{justify-self:start;width:max-content;max-width:min(100%,26rem)}}
.result-panel.is-stale{border:3px dashed var(--outline)}
.result-panel.is-stale::before{background:var(--yellow);color:var(--on-yellow);font-family:var(--font-body);font-weight:800}
/* Held result (visual QA A9, tool-page.js holdResult): a missing or invalid field leaves a dash in the tile
   with what to enter under it, and hides the tiles, breakdown and actions, so no faded or stale figure is
   left on screen. The "Fix the highlighted value" pill sits inside the panel, not on its border. */
.result-panel.is-held :is(.results,.result-breakdown-toggle,.result-actions,[data-result-actions],.share-actions,.result-quick,.result-share,.planning-milestone-note,.answer-near-more){display:none!important}
.result-panel.is-held .headline-value{opacity:1}
.result-panel.is-live.is-stale.has-error::before{position:static;display:table;margin:0 0 var(--space-3);max-width:100%}
/* The .note disclaimer: white card, dashed blue edge, never below 14px. */
.note{margin:var(--space-4) 0 0;padding:10px 14px;border:2px dashed var(--note-edge);border-radius:14px;background:var(--card);font-size:.875rem;line-height:1.55;color:var(--ink)}
.note a{color:var(--blue-ink);font-weight:800}
.assumptions{border-top:2px dashed var(--hair)}
.assumptions summary{font-weight:800;min-height:44px;display:flex;align-items:center}
/* D038 provenance line (assets/data-provenance.js): zero specificity, so page-specific rules keep their spacing. */
:where(.data-meta){margin:var(--space-2) 0 0;font-size:.8125rem;line-height:1.5;color:var(--muted)}:where(.data-meta) a{font-weight:700;color:var(--blue-ink,var(--ink))}:where(.data-meta) .sep{color:var(--muted)}:where(.assumptions) .data-meta+.data-meta{margin-top:var(--space-1)}
/* What Next: solid blue and green pills (the mock's next links). */
.tool-next{margin:var(--space-group) 0 var(--space-2);padding:var(--space-card)}
.next-card{display:grid;gap:2px;padding:14px 18px;border-radius:22px;background:var(--blue);color:var(--on-blue);text-decoration:none;box-shadow:inset 0 -4px 0 rgba(0,0,0,.2)}
.next-card+.next-card{margin-top:var(--space-3)}
.next-card:nth-of-type(even){background:var(--green);color:var(--on-green)}
.next-card:hover,.next-guide:hover{filter:brightness(1.06)}
.next-card:active,.next-guide:active{transform:translateY(2px);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2)}
.next-card-kicker{font-size:.8125rem;font-weight:800;color:inherit;opacity:.95}
.next-card strong{font:800 1.1875rem/1.25 var(--font-head)}
.next-card-name{font-weight:800;color:inherit}
/* The guide bar follows the next card (P2-003): eyebrow on its own line, the title under it, both on the left. */
.next-guide{display:grid;gap:2px;justify-items:start;margin-top:var(--space-3);padding:14px 18px;border-radius:22px;background:var(--green);color:var(--on-green);font-weight:800;text-decoration:none;box-shadow:inset 0 -4px 0 rgba(0,0,0,.2);text-wrap:pretty}
.next-guide span{font-size:.8125rem;font-weight:800;color:inherit;opacity:.95}
.next-guide svg,.next-card svg,.tool-next a>svg{width:22px;height:22px;flex:0 0 auto}
body[data-tool] .result-column>.related[aria-label="Calculator guide"]{display:none}
.related{padding:var(--space-card)}
.related a{font-weight:700}
/* FAQ cards: tap to open, a yellow "?" bolt. */
.faq{max-width:none}
.faq h2{font-size:1.375rem}
.faq details{padding:0;margin:0 0 var(--space-3);border:3px solid var(--outline);border-radius:18px;background:var(--card)}
.faq summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:12px 16px;font-weight:800;cursor:pointer}
.faq summary::before{content:"?";display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;height:24px;border-radius:50%;background:var(--yellow);color:var(--on-yellow);font:800 .8125rem/1 var(--font-body)}
.faq details p{margin:0;padding:0 16px 14px 50px;font-size:.9375rem;color:var(--ink)}
.journey-intro{background:var(--stage-band)!important;color:var(--stage-band-on)!important;border-radius:var(--radius)!important}
.journey-steps a{border:3px solid var(--outline);border-radius:18px}
.journey-steps .eyebrow{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--yellow);color:var(--on-yellow)}
.path-carry{margin:0 0 var(--space-block);padding:var(--space-4);display:grid;gap:var(--space-2)}
.path-carry h2{margin:0;font-size:1.1875rem;line-height:1.25}
.path-carry-list{margin:0;padding-left:1.1em}
.path-carry-list li{font-weight:700}
.path-carry-no{min-height:44px;border:0;background:none;color:var(--muted);font-weight:800;font-size:.9375rem;justify-self:start;padding:0 4px}
.path-carry-note{margin:0;font-size:.875rem;color:var(--muted)}

/* ---------- Guides: calm solid concrete reading ground, quiet cards ---------- */
.guide-article{font-size:1.0625rem;line-height:1.75;color:var(--ink)}
.guide-article h2{font-size:1.6rem;font-weight:800}
.guide-article a{color:var(--blue-ink);font-weight:700}
.guide-takeaway{padding:1.25rem 1.5rem;border:0;border-left:6px solid var(--yellow);border-radius:0 18px 18px 0;background:var(--card)}
.guide-takeaway .guide-stat{font-family:var(--font-head);font-weight:900;color:var(--ink)}
.guide-toc{padding:1.2rem 1.4rem;border:2px solid var(--hair);border-radius:18px;background:var(--card)}
.guide-toc a{color:var(--ink);font-weight:600}
.guide-numbers{border-radius:18px;background:var(--card)}
.guide-numbers div{border-bottom:2px dashed var(--hair)}
.guide-numbers dd{font-weight:800}
.guide-cta{border:3px solid var(--outline);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-sm)}
.guide-hero,.guide-list img{border-radius:18px}
.guide-list li{border:3px solid var(--outline);border-radius:var(--radius);background:var(--card)}
.guide-meta{color:var(--muted)}
.guide-faq h3{font-weight:800}

/* ---------- Footer: ink band ---------- */
.footer{background:var(--footer-bg);color:var(--footer-text);border-top:0}
.footer a{color:var(--footer-text)}
.footer .muted,.footer .small{color:var(--footer-text)}
footer .theme-control,footer .theme-control span{color:var(--footer-text)}
footer .theme-control select{border:2px solid var(--footer-text);background:var(--footer-bg);color:var(--footer-text);min-height:44px}

/* ---------- First-visit prompts, save sheet, cookie card, text size ---------- */
.tour-layer{position:fixed;inset:0;z-index:90}
.tour-spot{position:fixed;border-radius:24px;box-shadow:0 0 0 4px var(--yellow),0 0 0 200vmax rgba(15,18,20,.62);pointer-events:none;transition:all .25s ease}
.tour-bubble{position:fixed;left:50%;transform:translateX(-50%);width:min(420px,calc(100vw - 32px));padding:18px 18px 14px;border:3px solid var(--outline);border-radius:22px;background:var(--card);color:var(--ink);box-shadow:var(--shadow-md);transition:top .25s ease}
.tour-count{margin:0 0 2px;font-size:.8125rem;font-weight:800;color:var(--muted)}
.tour-title{margin:0 0 6px;font-size:1.375rem}
.tour-title:focus{outline:none}
.tour-text{margin:0 0 14px;font-size:1rem}
.tour-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tour-dots{display:flex;gap:6px}
.tour-dots i{width:9px;height:9px;border-radius:50%;background:var(--hair)}
.tour-dots i.on{background:var(--red)}
.tour-actions{display:flex;align-items:center;gap:6px}
.tour-skip{min-height:44px;padding:8px 12px;border:0;background:none;color:var(--muted);font-weight:800;font-size:.9375rem}
.tour-glow>.goal-card{box-shadow:0 0 0 4px var(--yellow),var(--shadow-md)}
.tour-link-row{margin:var(--space-2) 0 0}
.tour-open-link{display:inline-flex;align-items:center;min-height:44px;margin-left:-4px;padding:8px 4px;border:0;background:none;color:var(--ink);font:800 .9375rem/1.3 var(--font-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tour-open-link:hover{text-decoration-thickness:2px}
@media(prefers-reduced-motion:reduce){.tour-spot,.tour-bubble,.goal-card,.stage-pad,.btn,.coach-meter-fill{transition:none}}
.coach-hint{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;padding:10px 12px;border:3px solid var(--outline);border-radius:18px;background:var(--card);color:var(--ink)}
.coach-hint p{margin:0;flex:1;font-weight:700;font-size:.9375rem;line-height:1.45;min-width:0;overflow-wrap:anywhere}
.coach-hint-close{flex:0 0 44px;height:44px;margin:-10px -8px -10px 0;border:0;background:none;color:var(--ink);font-size:1.125rem;font-weight:800}
.save-sheet{position:fixed;left:50%;bottom:0;z-index:60;transform:translateX(-50%);width:min(520px,100vw);padding:20px 20px calc(20px + env(safe-area-inset-bottom));border:3px solid var(--outline);border-bottom:0;border-radius:24px 24px 0 0;background:var(--card);color:var(--ink);box-shadow:0 -10px 30px rgba(0,0,0,.2);display:grid;gap:10px}
.save-sheet h2{margin:0;font-size:1.375rem}
.save-sheet-ticks{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:4px}
.save-sheet-ticks li::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:8px;border-radius:50%;background:var(--green);color:var(--on-green);font-weight:800}
.save-sheet .btn{width:100%;min-height:50px;font-size:1rem}
.save-sheet-later{min-height:44px;border:0;background:none;color:var(--muted);font-weight:800;font-size:.9375rem}
.save-sheet--slim{grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px 12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0}
.save-sheet--slim h2{font-size:1.0625rem;line-height:1.25}
.save-sheet--slim p{margin:2px 0 0;font-size:.875rem;color:var(--muted)}
.save-sheet--slim .btn{width:auto;min-height:44px;font-size:.9375rem;padding:10px 16px}
.save-sheet--slim.is-tucked{visibility:hidden;opacity:0;pointer-events:none}
@media(max-width:767px){main .save-sheet--slim:not(.save-sheet--docked){zoom:calc(1 / var(--text-zoom,1))}}
@media(max-width:767px){.save-sheet{bottom:calc(66px + env(safe-area-inset-bottom));border-bottom:3px solid var(--outline);border-radius:22px;width:calc(100vw - 16px);padding-bottom:18px}.save-sheet--slim{padding:10px 12px;grid-template-columns:minmax(0,1fr) auto}.save-sheet--slim .save-sheet-text{grid-column:1/-1}.save-sheet--slim p{display:none}.save-sheet--slim .btn{width:100%}}
/* Cookie bar (consent-bar, 18 Oct 2026; notice view, consent-notice, 19 Oct 2026): fixed to the bottom of the
   screen until the visitor answers, on a solid card fill. Notice view: one line, OK and Cookie settings; the
   choices row replaces the buttons. analytics.js lifts it above the phone's bottom bars (--cookie-bar-lift) and sets the room
   the page keeps for it (--cookie-bar-space); the safe-area padding applies only when nothing sits below it. */
.cookie-notice{position:fixed;left:0;right:0;bottom:var(--cookie-bar-lift,0px);z-index:58;display:flex;align-items:center;justify-content:center;gap:8px 20px;margin:0;padding:10px 20px calc(10px + env(safe-area-inset-bottom));border-top:3px solid var(--outline);background:var(--card);color:var(--ink);font-size:.9375rem;box-shadow:0 -6px 18px -10px rgba(0,0,0,.5)}
.cookie-notice.is-lifted{padding-bottom:10px}
.cookie-notice-text{margin:0;line-height:1.4}
.cookie-notice-text a{color:inherit;font-weight:800}
.cookie-notice-actions{display:flex;gap:8px;flex:0 0 auto}
.cookie-notice-actions[hidden]{display:none}
.cookie-notice button{margin:0;min-height:44px;padding:8px 18px;border:3px solid var(--outline);border-radius:var(--radius-btn);background:var(--card);color:var(--ink);font:800 .875rem/1.2 var(--font-body);box-shadow:var(--press)}
.cookie-notice button:hover{background:var(--soft)}
.cookie-notice button.is-primary{background:var(--primary);border-color:var(--primary-edge);color:var(--primary-on)}
.cookie-notice button.is-primary:hover{background:var(--primary-hover);border-color:var(--primary-edge-hover)}
.cookie-notice button[aria-pressed=true]::before{content:"\2713\00a0"}
html.has-cookie-bar{scroll-padding-bottom:var(--cookie-bar-space,0px)}
html.has-cookie-bar body{padding-bottom:var(--cookie-bar-space,0px)}
.cookie-settings{display:block;margin:20px auto;min-height:44px;padding:8px 16px;border:2px solid var(--hair);border-radius:999px;background:var(--card);color:var(--muted);font-weight:700;font-size:.875rem}
/* In the footer it sits with Appearance and Text size, in the footer's own text colour. */
.footer .cookie-settings{display:inline-block;margin:0;border-color:currentColor;background:transparent;color:inherit}
@media(max-width:767px){
  .cookie-notice{flex-direction:column;align-items:stretch;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .cookie-notice.is-lifted{padding-bottom:10px}
  .cookie-notice-text{font-size:.875rem}
  .cookie-notice-actions{display:grid;grid-template-columns:1.3fr 1fr .8fr;gap:6px}
  .cookie-notice-actions.cookie-notice-pair{grid-template-columns:1fr 1fr}
  .cookie-notice-actions[hidden]{display:none}
  .cookie-notice button{padding:4px 8px;font-size:.8125rem;line-height:1.15}
  html.has-cookie-bar{scroll-padding-bottom:calc(150px + var(--cookie-bar-space,0px) + env(safe-area-inset-bottom))}
  html.has-cookie-bar.has-save-bar{scroll-padding-bottom:calc(150px + var(--save-bar-space,0px) + var(--cookie-bar-space,0px) + env(safe-area-inset-bottom))}
  html.has-cookie-bar body{padding-bottom:calc(66px + var(--cookie-bar-space,0px) + env(safe-area-inset-bottom))}
  /* First screen (first-screen, 21 Oct 2026): a slimmer bar, so a tool's first field shows above it.
     Notice view: one row, the copy beside OK and Cookie settings. Choices view: the copy, then the choices. */
  .cookie-notice{gap:6px;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
  .cookie-notice.is-lifted{padding-bottom:8px}
  .cookie-notice-text{line-height:1.3}
  .cookie-notice:has(>.cookie-notice-pair:not([hidden])){flex-direction:row;align-items:center;gap:8px}
  .cookie-notice:has(>.cookie-notice-pair:not([hidden])) .cookie-notice-text{flex:1 1 0;min-width:0;font-size:.8125rem}
  .cookie-notice-actions.cookie-notice-pair:not([hidden]){display:flex;flex:0 0 auto;gap:6px}
  .cookie-notice-pair button{padding:4px 12px;white-space:nowrap}
}
.text-size-control{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0;font-size:.875rem;color:inherit}
.text-size-control[hidden]{display:none}
.text-size-control button{min-width:48px;min-height:44px;padding:0 10px;border:3px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:800 1rem/1 var(--font-body)}
.text-size-control button[aria-disabled=true]{opacity:.5;cursor:default}
.text-size-value{min-width:3.2em;text-align:center;font-weight:700}
html[data-text-size="1"] main,html[data-text-size="1"] footer.footer>.container{zoom:1.15;--text-zoom:1.15}
html[data-text-size="2"] main,html[data-text-size="2"] footer.footer>.container{zoom:1.3;--text-zoom:1.3}
html[data-text-size="3"] main,html[data-text-size="3"] footer.footer>.container{zoom:1.5;--text-zoom:1.5}
@media(max-width:240px){html[data-text-size] main,html[data-text-size] footer.footer>.container{zoom:1;--text-zoom:1}}
html[data-text-size="2"] .mobile-action,html[data-text-size="3"] .mobile-action{display:none!important}
/* Large text: main is zoomed, but media queries still read the window width, so a tablet at 130%
   or 150% gets the wide layouts in a column 1.3 to 1.5 times narrower. Long words wrap instead of
   pushing the page sideways, and the widest rows fall back a step until the zoomed column is wide enough. */
html[data-text-size] main :is(h1,h2,h3,h4,.brand-name,.compare-item-title),html[data-text-size] footer :is(h2,h3,.brand-name){overflow-wrap:anywhere;hyphens:manual}
html[data-text-size] main{overflow-wrap:break-word}
@media(min-width:768px) and (max-width:997px){html[data-text-size="2"] :is(.goal-grid,.stage-route){grid-template-columns:repeat(3,minmax(0,1fr));row-gap:20px}html[data-text-size="2"] :is(.goal-grid,.stage-route)>:nth-child(even){transform:none}}
@media(min-width:768px) and (max-width:1151px){html[data-text-size="3"] :is(.goal-grid,.stage-route){grid-template-columns:repeat(3,minmax(0,1fr));row-gap:20px}html[data-text-size="3"] :is(.goal-grid,.stage-route)>:nth-child(even){transform:none}}
@media(min-width:48em) and (max-width:62.39em){html[data-text-size="2"] .compare-cards{grid-template-columns:minmax(0,1fr)}}
@media(min-width:48em) and (max-width:71.99em){html[data-text-size="3"] .compare-cards{grid-template-columns:minmax(0,1fr)}}
/* A+ at 130% and 150% on a phone (visual QA A5, A14, A17): main is zoomed, so a 375px phone lays out
   a 250px column, yet the 22.5em narrow-screen rules never fire (media queries read the window). Use the
   same single-column tiles and fields and the tighter padding, so tiles, chips and selects keep whole words. */
@media(max-width:767px){
 html:is([data-text-size="2"],[data-text-size="3"]) main{padding-left:10px;padding-right:10px}
 html:is([data-text-size="2"],[data-text-size="3"]) :is(.stat-row,.scenario-pair,.quiz-options,body[data-tool] .grid,.cc-day-times){grid-template-columns:minmax(0,1fr)!important}
 html:is([data-text-size="2"],[data-text-size="3"]) :is(.result-panel,.input-panel,.coach-quiz,.tool-next,.headline,.sticker,.spinner-panel){padding-left:10px;padding-right:10px}
 html:is([data-text-size="2"],[data-text-size="3"]) main select{padding-left:8px;padding-right:4px}
 html:is([data-text-size="2"],[data-text-size="3"]) main fieldset{padding-left:8px;padding-right:8px}
 html:is([data-text-size="2"],[data-text-size="3"]) .directory-controls{grid-template-columns:minmax(0,1fr)!important}
 html:is([data-text-size="2"],[data-text-size="3"]) :is(.sr-shift,.sr-day-own,.sr-adult-top){grid-template-columns:minmax(0,1fr)!important}
 html:is([data-text-size="2"],[data-text-size="3"]) .sr-shift>div:first-child{grid-column:auto}
 html:is([data-text-size="2"],[data-text-size="3"]) .member-preview-files li{flex-wrap:wrap}
 /* Hub and stage-list step cards: a smaller number pad and no arrow, so a question keeps several words a line. */
 html:is([data-text-size="2"],[data-text-size="3"]) .goal-step{gap:10px;padding:12px}
 html:is([data-text-size="2"],[data-text-size="3"]) .goal-step-num{flex-basis:32px;height:32px;font-size:.9375rem}
 html:is([data-text-size="2"],[data-text-size="3"]) .goal-step-arrow{display:none}
 html:is([data-text-size="2"],[data-text-size="3"]) .goal-step-text strong{font-size:1.0625rem}
}
/* Keep this scenario waits for a change (aria-disabled keeps it in the Tab order with its hint). */
.scenario-compare .btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;box-shadow:none}
.scenario-keep-hint{margin:var(--space-2) 0 0}
.site-header .main-nav .nav-text-size{display:none}
@media(max-width:960px){.site-header .main-nav .nav-text-size{display:block;border-bottom:2px solid var(--hair)}.nav-text-size .text-size-control{margin:8px 4px;color:var(--ink);font:700 1rem/1.2 var(--font-body)}.nav-text-size #text-size-label-menu{margin-right:auto}}
/* 44px tap targets for links and buttons that stand alone, not links inside a sentence (visual QA A20). */
.member-signin-prompt a,.footer-grid a[href^="mailto:"],#member-return,.member-preview-link,#join-preview{display:inline-flex;align-items:center;min-height:44px}
.breadcrumb a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.footer-site .footer-links a,.footer-links a{min-width:44px}
.footer .footer-brand .logo,.site-header .logo{min-height:44px}
.guide-toc-fold>a{display:flex;align-items:center;min-height:44px}
.guide-toc-fold>summary.eyebrow{min-height:44px}
:is(.tool-guide-top,.hub-more,.home-more,.hub-back,.compare-after,.download-use li) a,.fy-scheme a.small,.path-strip a{display:inline-flex;align-items:center;min-height:44px}
.sick-note p a,.tool-guide-note p>a:only-child{display:inline-block;min-height:44px;padding-block:10px}
.hub-back a,.member-signin-prompt a{min-width:44px;justify-content:center}
.result-save-link,.compare-pick{min-width:44px;min-height:44px}

/* ---------- Phones ---------- */
@media(max-width:1000px){.goal-directory{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){
  .container,main{padding-left:16px;padding-right:16px}
  .coach-hero h1{font-size:min(2.1rem,14vw)}
  .coach-hero .hero-description{font-size:.9688rem}
  .goal-directory,.goal-also ul,.trust-points{grid-template-columns:minmax(0,1fr)}
  .quiz-options{grid-template-columns:minmax(0,1fr)}
  .trust-band{grid-template-columns:minmax(0,1fr)!important}
  .coach-quiz{padding:18px 16px}
  .goal-hero{flex-direction:column;gap:12px;padding-top:20px;padding-bottom:22px}
  .goal-hero-icon{flex-basis:60px;width:60px;height:60px}
  .goal-step{padding:12px 14px;gap:12px}
  .goal-step-num{flex-basis:38px;height:38px;font-size:1rem}
  .goal-step-text strong{font-size:1.0625rem}
  .headline,.sticker,.spinner-panel{padding:24px 18px 20px}
  .tool-next{padding:16px}
  .next-card strong{font-size:1.125rem}
  .faq details p{padding-left:16px}
}
@media(max-width:560px){
  body[data-tool] .grid{grid-template-columns:minmax(0,1fr)}
  .logo small{display:none}
}
/* Large text and very narrow screens (a 375px phone at 200% zoom is about 188 CSS px wide). */
@media(max-width:22.5em){
  .container,main{padding-left:10px;padding-right:10px}
  h1,h2,h3,.goal-card h3,.tour-title{overflow-wrap:break-word;hyphens:manual}
  h1,.coach-hero h1,.goal-hero h1,.tool-question{font-size:min(clamp(1.55rem,12vw,2.1rem),14vw);max-width:none}
  .stat-row,.scenario-pair,.quiz-options{grid-template-columns:minmax(0,1fr)!important}
  .result-panel,.input-panel,.coach-quiz,.tool-next{padding-left:10px;padding-right:10px}
  .headline,.sticker,.spinner-panel{padding-left:10px;padding-right:10px}
  .headline-value,.sticker .big,.spinner-panel .spinner-value{font-size:clamp(2.2rem,14vw,3rem)}
  .goal-step{flex-wrap:wrap}.goal-step>*{min-width:0}
  .quiz-pick{padding:12px}
  .coach-hint-close{margin-right:0}
  footer .theme-control{flex-wrap:wrap}footer .theme-control select{max-width:100%}
  input,select,textarea{max-width:100%}
  .tour-bubble{width:calc(100vw - 16px);padding:14px 12px 10px}
  .tour-row,.tour-actions{flex-wrap:wrap}
  .btn{white-space:normal;max-width:100%}
  .tool-step-number{white-space:nowrap}
  .tab-bar{padding:4px 2px calc(4px + env(safe-area-inset-bottom))}
  .tab-bar a{min-width:0;min-height:44px;font-size:.6875rem;padding:0 1px}
  .tab-bar .tab-icon{width:20px;height:20px}
}
/* Large text (the A+ control or a browser text setting): a tool's spinner number never grows
   wider than its panel. At default sizes 24cqi is above the clamp, so nothing changes. */
.result-panel .headline{container-type:inline-size}
.result-panel .headline .headline-value{font-size:min(clamp(3rem,15vw,4.4rem),24cqi)}
@media(max-width:22.5em){.result-panel .headline .headline-value{font-size:min(clamp(2.2rem,14vw,3rem),24cqi)}}
/* Tap targets (WCAG 2.5.8): tick-box and option labels are at least 44px tall. :where() keeps any
   layout a tool already gives its labels (grid, block, chip rows); only bare inline labels change. */
:where(main label:has(input[type=checkbox]),main label:has(input[type=radio])){display:inline-flex;align-items:center;gap:8px}
main label:has(input[type=checkbox]),main label:has(input[type=radio]){min-height:44px}
.path-strip-next a{display:inline-flex;align-items:center;min-height:32px}
.compare-source a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin-left:-6px}
/* Large text (200%): a long word in a card title wraps inside its card instead of being cut off. */
.download-card h3,.download-card-link{overflow-wrap:break-word;hyphens:auto}
/* One onward step at the foot of a page with no other next step (/join/, /contact/). */
.page-next{margin:var(--space-8) 0 var(--space-6);padding:var(--space-5);border:3px solid var(--outline);border-radius:var(--radius);background:var(--card)}
.page-next h2{margin:0 0 var(--space-2);font-size:1.25rem}.page-next p{margin:0 0 var(--space-4)}
/* Tick-box labels in a tool's field grid keep the 44px tap height (the grid's small-screen reset is more specific). */
.tool-workspace .grid>div>label:has(input[type=checkbox]),.tool-workspace .grid>div>label:has(input[type=radio]){min-height:44px;align-items:center}
/* Boys' or girls' schools that would not take the parent's child (School Finder, Secondary Schools
   Side By Side, S1 Six-Choice Planner): greyed, and the label says why ("Girls only, not suitable"). */
.school-intake{font-weight:700}
.not-suitable,.not-suitable :is(td,th,h3,b,strong,small,.school-intake,.compare-pick){color:var(--muted)}
.compare-card.not-suitable{border-style:dashed}
.compare-child{margin-bottom:var(--space-5)}.compare-child .compare-field{margin-bottom:var(--space-2)}
/* Site footer (footer-contact lane): a brand block with the
   one next step, five link columns and a bottom bar (settings, trust line, disclaimer, copyright).
   Ink ground in both themes; every link and control is a 44px target. Two balanced columns on phones. */
.footer-site{padding-top:8px}
.footer-top{display:grid;grid-template-columns:minmax(15rem,1fr) minmax(0,4fr);gap:28px 40px}
.footer-bottom p,.footer-tagline,.footer-site .footer-next{font-size:.8125rem}
.footer-site .logo{margin-bottom:10px}
.footer-tagline{margin:0;font-weight:700;color:var(--footer-text)}
.footer-site .footer-next{margin-top:12px}
.footer-site .footer-next a{display:inline-flex;align-items:center;min-height:44px}
.footer-site .footer-social{margin:4px 0 0;font-size:.8125rem;font-weight:700}
.footer-site .footer-social a{display:inline-flex;align-items:center;min-height:44px;margin-right:16px;color:inherit;text-decoration:underline;text-underline-offset:3px}
.footer-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.footer-heading{margin:0 0 2px;font:800 1rem/1.2 var(--font-head);letter-spacing:0;color:var(--yellow)}
.footer-site .footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:0}
.footer-site .footer-links a{min-height:44px;padding:0;line-height:1.3;font-size:.9375rem}
.footer-site .footer-links a:not([aria-current=page]){text-decoration:none}
.footer-site .footer-links a:not([aria-current=page]):hover,.footer-site .footer-links a:not([aria-current=page]):focus-visible{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:5px}
.footer-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"settings copy" "disclaimer disclaimer";align-items:center;gap:8px 24px;margin-top:28px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--footer-text) 30%,transparent)}
.footer-settings{grid-area:settings;display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.footer-site .text-size-control{margin:0;gap:6px}
.footer-site .text-size-control button{min-width:44px;min-height:44px}
.footer-disclaimer{grid-area:disclaimer;margin:0;color:var(--footer-text)}
.footer-copy{grid-area:copy;margin:0;color:var(--footer-text)}
@media(min-width:768px) and (max-width:1023px){
  .footer-top{grid-template-columns:minmax(0,1fr)}
  .footer-nav{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
}
@media(max-width:767px){
  .footer-site{padding-top:0}
  .footer-top{grid-template-columns:minmax(0,1fr);gap:16px}
  .footer-site .logo{margin-bottom:4px}
  .footer-nav{display:block;columns:2;column-gap:16px}
  .footer-col{break-inside:avoid;margin:0 0 12px}
  .footer-bottom{grid-template-columns:minmax(0,1fr);grid-template-areas:"settings" "disclaimer" "copy";margin-top:8px;padding-top:12px}
}
/* Round 8 (r8-polish): Subject levels at P4, one S1 rule a line. */
.sl-s1-line{display:block}
/* Round 8 (r8-sick-link): the sick-child note on the health tools, the two safety guides and the Baby and
   Toddler hubs (scripts/sick-child-note.js). A calm bordered note, not an alarm: card ground, ink text. */
.sick-note{margin:0 0 var(--space-block);padding:10px 14px;border:2px solid var(--outline);border-radius:14px;background:var(--card);color:var(--ink);overflow-wrap:break-word}
.sick-note p{margin:0;max-width:none;font:600 1rem/1.5 var(--font-body);color:var(--ink)}
.sick-note a{display:inline-block;min-height:24px;font-weight:800;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

/* bc-labour-names (18 Oct 2026): a long word in a tool question ("contractions?") breaks at 200% text instead of widening the page. */
.goal-step-text strong,.tool-question{overflow-wrap:break-word}
.goal-steps,.goal-also-list{grid-template-columns:minmax(0,1fr)}