/* MathKidoo - the Home page's own look (MG-544, Home V5; Raj 17 Oct 2026: hero picture A, "Arithmetic at the fingertips.").
   Only src/landing-sections.html loads this file (it builds to public/index.html). It stands alone on purpose: nothing here
   is imported from or shared with another page. Plain CSS, self-hosted fonts (fonts/baloo2.css, fonts/mks-fonts.css).

   MG-779 (Raj, 25 Oct 2026, on his phone: "the dark bgm is not good ... go with a fresh design ... the arena looks good"; his
   pick: "Light page, Arena components"). The deep-navy ground, the glass cards and the star field are gone. The page now
   stands on the Arena's own kit, the Candy Arcade (src/arena/theme/mk-arena-theme.css, body.ca, the sheet arena/index.html
   really paints with): cream ground with three soft colour pools and a 22 px dot grid, white sticker cards (30 px, 3 px white
   rim, soft navy shadow), the chunky 3-D gold button with its 5 px ledge, the candy-gloss ball, the brand ribbon as the one
   decorative stripe, Baloo 2 for display and Nunito for reading. The tokens are COPIED here, not linked: the landing cannot
   load an arena/ file, and this sheet must keep standing alone. Where the kit meets a light ground and loses contrast, the
   ink is darkened rather than the rule bent: mint and teal carry dark ink only (the Arena's own law); the ribbon as TEXT
   (.hm-shine) uses the deep stops so every colour in the headline reads at 4.5:1 or better on cream; the nine part colours
   on the road keep their hue but drop to their deep shade for the 13 px labels (each measured at 4.9:1 or better on cream).
   What did not change: the road diagram and its motion (mk-home.js), the phone reading order (MG-BUG-028), the full-column
   diagram on a phone (MG-778), the 44 px targets, the one main action and the phone bar.

   Motion is opt-in: mk-home.js adds html.hm-motion only when the visitor has not asked for reduced motion, so with no
   script, or with reduced motion, every word and every picture is simply there (the poster frames).
   Parallax uses the `translate` property and reveals use `transform`, so the two never fight over one property.
   iOS / HIG: every tap target is at least 44 px with at least 8 px between neighbours; hover rules live only inside
   @media (hover: hover); :active gives a press; no 100vh (svh with a vh fallback).
   Comment rule (from the Arena sheet): never write a star next to a slash inside a comment - it closes the comment and the
   browser drops the next rule (that is how the sign-in button went white-on-white for eight days). */


/* ---------- font fallback: Arial sized and spaced like Nunito (measured 17 Oct 2026), so the reading lines do not jump
   when the real font arrives. Baloo 2 (display) has no metric-matched fallback yet; it is preloaded in the page head, so
   the gap before it paints is one round trip to our own host, not a third-party one. ---------- */
@font-face { font-family: 'Nunito Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'); font-weight: 700; size-adjust: 97.39%; ascent-override: 103.71%; descent-override: 35.94%; line-gap-override: 0%; }
@font-face { font-family: 'Nunito Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'); font-weight: 800; size-adjust: 99.73%; ascent-override: 101.28%; descent-override: 35.1%; line-gap-override: 0%; }
@font-face { font-family: 'Nunito Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'); font-weight: 900; size-adjust: 102.12%; ascent-override: 98.9%; descent-override: 34.27%; line-gap-override: 0%; }

/* ---------- tokens (MG-779: copied from the Candy Arcade, section 1; the --h- prefix is this sheet's own) ---------- */
body.hm {
  /* ground + ink */
  --h-ground: #FFFDF6; --h-ground-2: #FFF4CF; --h-surface: #FFFFFF;
  --h-ink: #0B1440;          /* main text, 17.4:1 on cream */
  --h-soft: #3E4A7A;         /* supporting text, 8.1:1 on cream */
  --h-navy: #12266F;
  /* the five candy families: body, lit (top), deep (bottom + press) */
  --h-purple: #7139D3; --h-purple-lit: #A077F5; --h-purple-deep: #4A1F9C;
  --h-blue: #3B7CFF;   --h-blue-lit: #86AEFF;   --h-blue-deep: #1E4FC2;
  --h-teal: #23C7A0;   --h-teal-lit: #7DF2D4;   --h-teal-deep: #118C70;
  --h-green: #10C05D;  --h-green-lit: #66E79A;  --h-green-deep: #0A8A42;
  --h-gold: #FFC61A;   --h-gold-lit: #FFF0B3;   --h-gold-deep: #D99F00;
  /* text inks for the light families (the deep shade is not dark enough for 13 px words on cream): */
  --h-teal-ink: #0B6E57;     /* 6.1:1 */
  --h-gold-ink: #6B4400;     /* 8.4:1, the Arena's own gold-chip ink */
  --h-gold-ink-2: #8F5C00;   /* 5.3:1, the "gold" word on the road */
  /* soft tints for chips, pills and rims */
  --h-tint-purple: #EFE8FB; --h-tint-purple-2: #E4DAF6; --h-tint-gold: #FFF1BF; --h-tint-teal: #D4F7EE; --h-tint-blue: #DCE7FF; --h-tint-green: #D6F7E3;
  /* the brand ribbon: the ONE decorative stripe (purple > blue > teal > green); -ink is the same run in its deep stops, for words */
  --h-ribbon: linear-gradient(90deg, #7139D3 0%, #3B7CFF 34%, #23C7A0 68%, #10C05D 100%);
  --h-ribbon-soft: linear-gradient(90deg, #E9DDFB, #DCE7FF 34%, #D4F7EE 68%, #D6F7E3);
  --h-ribbon-ink: linear-gradient(90deg, #5A24C4 0%, #1E4FC2 48%, #0B6E57 100%);
  /* shape, depth, treatment */
  --h-rim: 0 0 0 3px var(--h-halo);
  --h-shadow-card: 0 2px 0 rgba(11, 20, 64, .04), 0 14px 30px -14px rgba(18, 38, 111, .22);
  --h-shadow-float: 0 28px 50px -24px rgba(18, 38, 111, .35);
  --h-press: 5px;
  --h-ball-gloss: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 30%), radial-gradient(circle at 50% 118%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 42%);
  --h-ball-shade: inset 0 -7px 12px rgba(0, 0, 0, .20), inset 0 2px 2px rgba(255, 255, 255, .55);
  /* MG-783: the pieces that have to change between the day page and the night page. They were colour literals
     spread down the sheet; they are tokens now so ONE night block below can flip the whole page.
     --h-on-color is text sitting on a candy fill (white in both pages); --h-on-navy is text on the navy pill;
     --h-btn-ink is the dark ink the gold button and the gold/teal balls keep in both pages. */
  --h-halo: #FFFFFF;         /* the 3 px card rim and the stroke that lifts a label off the picture */
  --h-on-color: #fff;
  --h-on-navy: #fff;
  --h-btn-ink: #0B1440;
  --h-accent-ink: #4A1F9C;   /* the small purple words: Sign in, Watch again, the footer headings */
  --h-ledge: #D3C9EA;        /* the ledge under a ghost button */
  --h-edge: #C9D2EE;         /* the thin dependency lines in the tree */
  --h-you-ink: #1A1204;      /* the number inside the gold "your child" ball */
  --h-ans: #FFF3A8;          /* the answer in the sum card */
  --h-bar-bg: rgba(255, 255, 255, .92);
  --h-dot: rgba(18, 38, 111, .06);
  --h-pool-1: rgba(113, 57, 211, .08); --h-pool-2: rgba(35, 199, 160, .10); --h-pool-3: rgba(59, 124, 255, .07);
  /* type */
  --h-font-display: 'Baloo 2', 'Segoe UI', system-ui, sans-serif;
  --h-font-body: 'Nunito', 'Nunito Fallback', 'Segoe UI', system-ui, sans-serif;
  /* motion */
  --h-ease: cubic-bezier(.2, .8, .2, 1);
  --h-spring: cubic-bezier(.34, 1.56, .64, 1);
  --h-wrap: min(92vw, 1240px);
}
/* the ground colour sits on html too: the focus-ring check reads it there, and an overscroll shows it.
   MG-783: color-scheme tells the browser which page it is painting, so the scrollbar, the native focus ring and the
   overscroll canvas - none of which this sheet can colour - follow the page instead of staying light at night. */
html { background: #FFFDF6; color-scheme: light; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (min-width: 1800px) { html { font-size: 112.5%; } body.hm { --h-wrap: min(90vw, 1440px); } }
@media (min-width: 2400px) { html { font-size: 131.25%; } body.hm { --h-wrap: min(88vw, 1720px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

*, *::before, *::after { box-sizing: border-box; }
/* the cream Field: three soft colour pools and the 22 px dot grid (Candy Arcade, section 2) */
body.hm {
  margin: 0; min-width: 320px; overflow-x: hidden;
  font: 700 1.0625rem/1.55 var(--h-font-body);
  color: var(--h-ink);
  background-color: var(--h-ground);
  background-image:
    radial-gradient(circle at 12% 8%, var(--h-pool-1), transparent 32%),
    radial-gradient(circle at 88% 30%, var(--h-pool-2), transparent 30%),
    radial-gradient(circle at 20% 80%, var(--h-pool-3), transparent 32%),
    radial-gradient(var(--h-dot) 1.2px, transparent 1.3px);
  background-size: auto, auto, auto, 22px 22px;
  -webkit-font-smoothing: antialiased;
}
body.hm img, body.hm svg { max-width: 100%; }
body.hm .wrap { width: var(--h-wrap); margin: 0 auto; }
body.hm a { color: inherit; }
body.hm ::selection { background: rgba(255, 198, 26, .45); color: var(--h-btn-ink); }
body.hm main:focus { outline: none; }
body.hm a, body.hm button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body.hm .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.hm main, body.hm .foot { overflow-wrap: anywhere; }
body.hm :focus-visible { outline: 3px solid var(--h-navy); outline-offset: 3px; border-radius: 10px; }

/* ---------- skip link and the bar (the M mark only; the name is in its aria-label) ----------
   The Arena's header (section 6): sticky, frosted white, the 6 px brand ribbon along its top edge. */
body.hm .mks-skip { position: absolute; left: 12px; top: -60px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 12px; background: var(--h-navy); color: var(--h-on-navy); font: 700 1rem var(--h-font-display); text-decoration: none; }
body.hm .mks-skip:focus { top: 12px; }
body.hm .bar { position: sticky; top: 0; z-index: 50; background: var(--h-bar-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(18, 38, 111, .08), 0 10px 24px -18px rgba(18, 38, 111, .3); }
body.hm .bar::before { content: ""; display: block; height: 6px; background: var(--h-ribbon); }
body.hm .bar-in { width: var(--h-wrap); margin: 0 auto; display: flex; align-items: center; gap: 12px; min-height: 64px; }
body.hm .brand { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 14px; transition: transform .4s var(--h-spring); }
body.hm .brand img { width: 40px; height: 40px; display: block; filter: drop-shadow(0 3px 4px rgba(18, 38, 111, .25)); }
@media (hover: hover) { body.hm .brand:hover { transform: translateY(-1px) rotate(-4deg); } }
body.hm .menu { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; overflow-x: auto; scrollbar-width: none; }
body.hm .menu::-webkit-scrollbar { display: none; }
/* MG-783: the row of tabs has always been able to run wider than the bar on a phone, and the day/night switch takes
   another 44 px from it. A hard cut at the edge reads as a broken word; this fades the last few pixels instead, so the
   row says "there is more, slide me". The fade is only drawn where the row really is wider than its box. */
@supports (mask-image: linear-gradient(90deg, #000, transparent)) {
  body.hm .menu { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%); }
  @media (min-width: 900px) { body.hm .menu { -webkit-mask-image: none; mask-image: none; } }
}
body.hm .menu a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--h-soft); text-decoration: none; font: 700 .95rem var(--h-font-display); transition: color .14s, background .14s; }
@media (hover: hover) { body.hm .menu a:hover { color: var(--h-ink); background: var(--h-tint-purple); } }
/* the page you are on: the Arena's pressed mode pill, navy */
body.hm .menu a[aria-current="page"] { color: var(--h-on-navy); background: var(--h-navy); }
/* Sign in: the Arena's ghost button (white, purple outline, a 4 px ledge) */
body.hm .signin { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; margin-bottom: 4px; border-radius: 999px; color: var(--h-accent-ink); text-decoration: none; font: 700 .95rem var(--h-font-display); background: var(--h-surface); box-shadow: inset 0 0 0 2.5px var(--h-purple), 0 4px 0 var(--h-ledge); transition: transform .14s var(--h-ease), box-shadow .14s var(--h-ease), background .14s; }
@media (hover: hover) { body.hm .signin:hover { background: var(--h-tint-purple); } }
body.hm .signin:active { transform: translateY(4px); box-shadow: inset 0 0 0 2.5px var(--h-purple), 0 0 0 var(--h-ledge); }
@media (max-width: 560px) {
  body.hm .bar-in { gap: 8px; min-height: 58px; }
  body.hm .brand img { width: 34px; height: 34px; }
  body.hm .menu { justify-content: flex-start; }
  body.hm .menu a { padding: 0 8px; font-size: .88rem; }
  body.hm .menu .menu-home { display: none; }
  body.hm .signin { padding: 0 12px; font-size: .88rem; }
}
/* MG-BUG-028 (the nav half): at 390 px the three tabs needed 237 px and the bar had 228 px between the M mark
   and Sign in, so Organisers was cut off at the fade and a parent had to swipe a bar to find it. Trimming each
   tab's side padding from 8 px to 4 px brings the three to 212.7 px, which fits from 375 px up (every iPhone in
   use) with 15 px to spare. The 8 px gap between tabs is untouched, so no two words are closer than 16 px and no
   tap target loses height - they stay 44 px tall. Below 375 px (320 and 360 phones) the row still cannot hold
   the tabs at any readable size, so the existing swipe and its right-edge fade stay, and every door also has
   its own card in the hero. Reported alternative: a second header row. Not taken - it adds 44 px to a
   640 px screen, and the first screen has to carry the headline, the button and the diagram. */
@media (max-width: 439px) { body.hm .menu a { padding: 0 4px; } }
body.hm .menu.has-more { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
body.hm .menu a:focus-visible { outline-offset: -3px; border-radius: 999px; }
/* 12 · a press on the bar and footer links */
body.hm .menu a:active, body.hm .brand:active, body.hm .foot-links a:active { opacity: .7; }

/* ---------- type (Candy Arcade, section 3: Baloo 2 display, Nunito body, nothing under 14 px) ---------- */
body.hm .hm-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 700 .875rem/1.35 var(--h-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--h-accent-ink); }
body.hm .hm-eyebrow::before { content: ""; flex: none; width: 26px; height: 4px; border-radius: 4px; background: var(--h-ribbon); }
body.hm .hm-h1 { margin: 0; font: 800 clamp(2.25rem, 1.3rem + 3.1vw, 3.6rem)/1.05 var(--h-font-display); letter-spacing: -.005em; color: var(--h-ink); text-wrap: balance; overflow-wrap: anywhere; }
/* the ribbon as words - the deep stops, so each colour in the headline is 4.5:1 or better on cream (the bright ribbon's
   teal and green stops read at about 2:1 and would fail) */
body.hm .hm-shine { background: var(--h-ribbon-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.hm .hm-ar { margin-left: .3em; }   /* inline, never inline-block: the arrow cannot wrap away from its last word */

/* ---------- the chunky 3-D button (Candy Arcade, section 5): pill, lit-to-body gradient, a 5 px "deep" ledge
   underneath; a press sinks it onto the ledge. Primary = gold with dark ink. .hm-glint is the slow passing shine. ---------- */
body.hm .hm-btn { --c: var(--h-gold); --lit: var(--h-gold-lit); --deep: var(--h-gold-deep); position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 56px; padding: 10px 26px; margin-bottom: var(--h-press); border: 0; border-radius: 999px; color: var(--h-btn-ink); font: 800 1.125rem/1.1 var(--h-font-display); text-align: center; text-decoration: none; cursor: pointer; overflow: hidden; overflow-wrap: anywhere; background: linear-gradient(180deg, var(--lit) 0%, var(--c) 55%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .08), 0 var(--h-press) 0 var(--deep), 0 14px 24px -10px rgba(255, 198, 26, .7); transition: transform .14s var(--h-ease), box-shadow .14s var(--h-ease), filter .26s; }
body.hm .hm-glint { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 45%, transparent 60%); transform: translateX(-120%); }
html.hm-motion body.hm .hm-glint { animation: hm-glint 3.6s var(--h-ease) infinite 1.2s; }
@keyframes hm-glint { 0% { transform: translateX(-120%); } 35%, 100% { transform: translateX(120%); } }
@media (hover: hover) { body.hm .hm-btn:hover { filter: brightness(1.05); } }
body.hm .hm-btn:active { transform: translateY(var(--h-press)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 0 0 var(--deep); }
@media (prefers-reduced-motion: reduce) {
  body.hm .hm-btn, body.hm .signin, body.hm .brand, body.hm .hm-door { transition: box-shadow .2s, background-color .2s, color .2s !important; }
  body.hm .hm-btn:hover, body.hm .hm-btn:focus-visible, body.hm .hm-door:hover, body.hm .brand:hover { transform: none !important; }
  body.hm .hm-glint { animation: none !important; }
}

/* ---------- hero ---------- */
body.hm .hm-hero { position: relative; isolation: isolate; overflow: clip; padding: clamp(18px, 2.6vw, 44px) 0 clamp(36px, 4vw, 64px); }
/* three colour pools that drift a little behind the hero (data-px); the dot grid is on the body and stays still */
body.hm .hm-hero-bg { position: absolute; inset: -12% 0 -40%; z-index: -1; pointer-events: none; }
body.hm .h-glow { position: absolute; border-radius: 50%; }
body.hm .h-g1 { width: 62vw; height: 62vw; max-width: 980px; max-height: 980px; left: -20vw; top: -14vw; background: radial-gradient(circle, rgba(113, 57, 211, .14), rgba(113, 57, 211, 0) 65%); }
body.hm .h-g2 { width: 54vw; height: 54vw; max-width: 900px; max-height: 900px; right: -16vw; top: 2vw; background: radial-gradient(circle, rgba(35, 199, 160, .16), rgba(35, 199, 160, 0) 65%); }
body.hm .h-g3 { width: 34vw; height: 34vw; max-width: 560px; max-height: 560px; right: 12vw; top: 34%; background: radial-gradient(circle, rgba(255, 198, 26, .16), rgba(255, 198, 26, 0) 65%); }
body.hm .hm-hero-grid { display: grid; gap: clamp(20px, 3.4vw, 56px); align-items: center; }
body.hm .hm-hero-grid > * { min-width: 0; }
@media (min-width: 980px) { body.hm .hm-hero-grid { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); } }
body.hm .hm-hero-copy { position: relative; z-index: 2; }
body.hm .hm-problem { margin: 0; max-width: 34em; font: 700 clamp(1.0625rem, 1rem + .3vw, 1.2rem)/1.4 var(--h-font-body); color: var(--h-soft); text-wrap: pretty; }
body.hm .hm-h1 { margin-top: clamp(10px, 1.4vw, 18px); }
/* "Class 1 to Class 7" stays on one line: nowrap, and no-break spaces inside it, so on the narrowest phones it moves to its own line whole (only very large text may break it) */
body.hm .hm-nw { white-space: nowrap; }
@media (max-width: 359px) { body.hm .hm-nw { white-space: normal; } }
body.hm .hm-purpose { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 0; max-width: 30em; font: 800 clamp(1.1rem, 1rem + .45vw, 1.3rem)/1.35 var(--h-font-body); color: var(--h-ink); text-wrap: balance; }
body.hm .hm-purpose::before { content: ""; flex: none; width: 5px; align-self: stretch; border-radius: 5px; background: linear-gradient(180deg, var(--h-purple), var(--h-blue) 50%, var(--h-teal)); }

/* ---------- the four doors (MG-768, restyled MG-779): Parents first, gold, the page's one main action (data-main-action,
   which mk-sticky.js watches); Schools, Organisers and Arena as three quiet doors. Each quiet door is the Arena's game tile
   (section 9): a white sticker card, a candy-gloss ball in the door's family colour, the audience word, the link. The link's
   ::after covers the whole card, so the tap target is the card (far above 44 px), and the ball and the word stay plain text.
   Phone (under 560 px): one column, and the Parents door is lifted up under the headline - see MG-BUG-028 at the foot of
   this sheet. From 560 px: two by two, Parents the top-left cell as a gold-tint card, the four cells one height. ---------- */
body.hm .hm-doors { display: grid; gap: 12px; margin-top: clamp(18px, 2vw, 24px); }
body.hm .hm-door { --c: var(--h-purple); --lit: var(--h-purple-lit); --deep: var(--h-purple-deep); --txt: var(--h-purple-deep); --ink: #fff; position: relative; min-width: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px 12px 12px; border-radius: 22px; background: var(--h-surface); box-shadow: var(--h-rim), var(--h-shadow-card); transition: transform .26s var(--h-spring), box-shadow .26s; }
body.hm .hm-door.blue { --c: var(--h-blue); --lit: var(--h-blue-lit); --deep: var(--h-blue-deep); --txt: var(--h-blue-deep); }
body.hm .hm-door.teal { --c: var(--h-teal); --lit: var(--h-teal-lit); --deep: var(--h-teal-deep); --txt: var(--h-teal-ink); --ink: var(--h-btn-ink); }
body.hm .hm-door.gold { --c: var(--h-gold); --lit: var(--h-gold-lit); --deep: var(--h-gold-deep); --txt: var(--h-gold-ink); --ink: var(--h-btn-ink); }
@media (hover: hover) { body.hm .hm-door:hover { transform: translateY(-3px); box-shadow: var(--h-rim), 0 22px 40px -18px color-mix(in srgb, var(--c) 60%, transparent); } }
body.hm .hm-door:active { transform: translateY(0) scale(.99); }
/* the candy-gloss ball (Candy Arcade, section 4): gloss highlight and under-glow over a lit > body > deep radial body, inner
   shade, 3 px white rim, soft coloured drop shadow. Teal and gold carry dark ink. */
body.hm .hm-door-ball { --sz: 52px; grid-row: 1 / 3; display: inline-grid; place-items: center; width: var(--sz); height: var(--sz); border-radius: 50%; color: var(--ink); font: 800 max(14px, calc(var(--sz) * .4))/1 var(--h-font-display); font-style: normal; font-variant-numeric: tabular-nums; background-image: var(--h-ball-gloss), radial-gradient(circle at 50% 58%, var(--lit) 0%, var(--c) 52%, var(--deep) 100%); box-shadow: var(--h-ball-shade), var(--h-rim), 0 8px 16px -6px color-mix(in srgb, var(--deep) 70%, transparent); text-shadow: 0 1px 0 rgba(0, 0, 0, .18); user-select: none; -webkit-user-select: none; }
body.hm .hm-door.teal .hm-door-ball, body.hm .hm-door.gold .hm-door-ball { text-shadow: none; }
body.hm .hm-door-who { grid-column: 2; margin: 0; font: 700 .8rem/1.3 var(--h-font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--txt); }
body.hm .hm-door-link { grid-column: 2; display: block; min-height: 44px; padding: 4px 0 0; color: var(--h-ink); font: 800 1.0625rem/1.3 var(--h-font-body); text-decoration: none; }
body.hm .hm-door-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* the whole card is the link */
body.hm .hm-door-link .hm-ar { color: var(--txt); }
/* the keyboard ring stays on the link's own words (navy, 3 px, read by landing-doors-check against the ground) */
body.hm .hm-door-link:focus-visible { outline-offset: 2px; }
@media (hover: hover) { body.hm .hm-door-link:hover { color: var(--txt); } }
/* the Parents door: on a phone it is the word and the gold button alone (the ball waits for a wider screen) */
body.hm .hm-door-main { grid-template-columns: minmax(0, 1fr); padding: 0; background: none; box-shadow: none; row-gap: 6px; }
body.hm .hm-door-main .hm-door-ball { display: none; }
body.hm .hm-door-main .hm-door-who { grid-column: 1; }
body.hm .hm-door-main .hm-btn { grid-column: 1; justify-self: start; }
@media (min-width: 560px) {
  body.hm .hm-doors { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  body.hm .hm-door-main { grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; padding: 12px 14px 12px 12px; background: var(--h-tint-gold); box-shadow: var(--h-rim), var(--h-shadow-card), 0 0 0 6px rgba(255, 198, 26, .18); }
  body.hm .hm-door-main .hm-door-ball { display: inline-grid; grid-row: 1; }
  body.hm .hm-door-main .hm-door-who { grid-column: 2; align-self: center; }
  body.hm .hm-door-main .hm-btn { grid-column: 1 / -1; width: 100%; justify-self: stretch; min-height: 52px; padding: 8px 16px; font-size: 1.0625rem; margin-top: 6px; }
}

/* ---------- the hero picture: one white sticker card (Candy Arcade, section 5), a soft purple halo around it ---------- */
body.hm .hm-hero-pic { position: relative; z-index: 1; }
body.hm .hm-reel { position: relative; margin: 0; }
body.hm .hm-reel-card { --cp: clamp(10px, 1.4vw, 16px); position: relative; padding: var(--cp); border-radius: 30px; background: var(--h-surface); box-shadow: var(--h-rim), var(--h-shadow-float), 0 0 0 6px rgba(113, 57, 211, .08); }
body.hm .hm-reel-art { position: relative; transition: opacity .16s ease; }
body.hm .hm-reel-art.swap { opacity: 0; }
body.hm .hm-reel-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; min-height: 48px; margin-top: 10px; padding: 0 6px; font-size: .875rem; color: var(--h-soft); }
body.hm .hm-reel-cap { flex: 1 1 10em; min-width: 0; transition: opacity .3s ease; }
body.hm .hm-reel-card { padding-bottom: calc(var(--cp) + 46px); }   /* MG-781: the tree fills its frame to the Find Your Level chip; the caption needs its own strip below */
body.hm .hm-reel-card > .hm-reel-foot { position: absolute; left: calc(var(--cp) + 6px); right: calc(var(--cp) + 2px); bottom: max(2px, calc(var(--cp) - 4px)); flex-wrap: nowrap; gap: 10px; min-height: 44px; margin: 0; padding: 0; }
body.hm .hm-reel-card > .hm-reel-foot .hm-reel-cap { flex: 1 1 auto; font-size: .875rem; line-height: 1.25; }   /* 14 px, the kit's floor */
body.hm .hm-reel-card > .hm-reel-foot .hm-again { flex: none; }
/* MG-781: on the phone the caption wraps to two or three lines beside Watch again, so the foot sits in the flow and the card grows with it */
@media (max-width: 559px) {
  body.hm .hm-reel-card { padding-bottom: var(--cp); }
  body.hm .hm-reel-card > .hm-reel-foot { position: static; flex-wrap: wrap; margin-top: 6px; padding: 0 4px 2px; }
}
/* Watch again: the ghost button */
body.hm .hm-again { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; margin-bottom: 4px; border: 0; border-radius: 999px; cursor: pointer; color: var(--h-accent-ink); font: 700 .875rem var(--h-font-display); background: var(--h-surface); box-shadow: inset 0 0 0 2.5px var(--h-purple), 0 4px 0 var(--h-ledge); transition: transform .14s var(--h-ease), box-shadow .14s var(--h-ease), background .14s; }
body.hm .hm-again::before { content: "\21BB"; font-size: 1.05rem; color: var(--h-purple); }
@media (hover: hover) { body.hm .hm-again:hover { background: var(--h-tint-purple); } }
body.hm .hm-again:active { transform: translateY(4px); box-shadow: inset 0 0 0 2.5px var(--h-purple), 0 0 0 var(--h-ledge); }
body.hm .hm-again[hidden] { display: none; }

/* ---------- hero picture: the 33 levels as a growth tree (MG-781, under MG-779) ----------
   The SVG in the page is the finished poster (reduced motion and no-JS show it as is). Level 1 is the seed at the root, the
   trunk climbs through eleven tiers to Level 33, the Champion Gate, the star on top. Every thin line is a real dependency from
   src/full/graph.js (68 of them). Filled balls are done, white balls are ahead, the gold ball is the child's level, Level 10 is
   the step Find Your Level found missing and filled. Tier colours run the brand ramp, purple at the root to lime at the crown.
   mk-home.js grows the tree element by element from each element's --d (its moment, in seconds); it only ever animates the
   inner .hr-in group, never the positioned outer group, because a CSS transform would override the SVG transform attribute. */
body.hm .hr-svg { display: block; width: 100%; height: auto; max-height: 600px; max-height: min(calc(100vh - 150px), 600px); max-height: min(calc(100svh - 150px), 600px); margin: 0 auto; overflow: visible; }
body.hm .hr-svg text { font-family: var(--h-font-body); font-weight: 800; fill: var(--h-ink); font-variant-numeric: tabular-nums; }
body.hm .hr-svg .hr-ct { font-size: 11px; font-weight: 800; fill: var(--h-on-color); fill-opacity: .9; letter-spacing: .08em; text-transform: uppercase; }
body.hm .hr-svg .hr-sum { font-size: 15.5px; font-weight: 900; fill: var(--h-on-color); }
body.hm .hr-svg .hr-ans { fill: var(--h-ans); }
body.hm .hr-svg .hr-band, body.hm .hr-svg .hr-lab { paint-order: stroke; stroke: var(--h-halo); stroke-width: 3.5px; stroke-linejoin: round; }
body.hm .hr-svg .hr-band { font-size: 11px; font-weight: 900; }
body.hm .hr-svg .hr-lab { font-size: 12.5px; font-weight: 900; }
body.hm .hr-svg .hr-lab.hr-nine { font-size: 11px; fill: var(--h-gold-ink-2); }
body.hm .hr-svg .hr-gold { fill: var(--h-gold-ink-2); }
body.hm .hr-spine { fill: none; stroke-width: 9; stroke-linecap: round; opacity: .16; }
body.hm .hr-bough { fill-opacity: .13; stroke-opacity: .45; stroke-width: 1.1; }
body.hm .hr-edge { fill: none; stroke: var(--h-edge); stroke-width: 1.3; stroke-opacity: .8; stroke-linecap: round; }
body.hm .hr-edge.lit { stroke: var(--c); stroke-width: 2.2; stroke-opacity: .95; filter: drop-shadow(0 0 2px var(--c)); }
body.hm .hr-leader { fill: none; stroke: var(--h-gold-deep); stroke-width: 1.6; stroke-dasharray: 3 3; }
body.hm .hr-b circle { stroke: var(--c); stroke-width: 1.4; }
body.hm .hr-svg .hr-b text { font-size: 11px; font-weight: 900; fill: var(--ink); }
body.hm .hr-b.done circle, body.hm .hr-b.nine circle { stroke: var(--h-halo); stroke-width: 1.5; filter: drop-shadow(0 2px 3px rgba(18, 38, 111, .28)); }
body.hm .hr-svg .hr-b.done text, body.hm .hr-svg .hr-b.nine text { fill: var(--h-on-color); }
body.hm .hr-b.you circle { stroke: var(--h-halo); stroke-width: 1.6; filter: drop-shadow(0 0 7px rgba(255, 198, 26, .9)); }
body.hm .hr-svg .hr-b.you text { font-size: 12.5px; fill: var(--h-you-ink); }
body.hm .hr-chip rect { fill: var(--h-tint-teal); stroke: var(--h-teal); stroke-width: 1.2; }
body.hm .hr-svg .hr-chip text { font-size: 12px; font-weight: 900; fill: var(--h-teal-ink); }
body.hm .hr-chip.gold rect { fill: var(--h-tint-gold); stroke: var(--h-gold-deep); }
body.hm .hr-svg .hr-chip.gold text { fill: var(--h-gold-ink); }
body.hm .hr-ring { fill: none; stroke: var(--h-gold-deep); stroke-width: 2.2; opacity: 0; }   /* the burst around Level 10 only shows while the reel plays */
body.hm .hr-ring.you { stroke: var(--h-gold); stroke-width: 2.6; opacity: 1; }
/* while the reel plays, Level 10 waits as a white dashed ball until Find Your Level finds it (mk-home.js adds and removes .wait) */
body.hm .hr-b.nine.wait circle { fill: var(--h-halo); stroke: var(--c); stroke-width: 1.4; stroke-dasharray: 3 3; filter: none; }
body.hm .hr-svg .hr-b.nine.wait text { fill: var(--ink); }
body.hm .hr-edge.lit.nine.wait { stroke: var(--h-edge); stroke-width: 1.5; stroke-opacity: .8; filter: none; }
body.hm .hr-in, body.hm .hr-head { transform-box: fill-box; transform-origin: 50% 60%; }
/* ---------- footer (MG-780: every link, grouped under three small headings, plus Arena; the name beside the mark) ----------
   mk-footer.js paints <nav class="foot-links"> with three <div class="mk-fcol"> columns (Doors, What you get, About), each a
   <p class="mk-fcol-h"> heading over its links. White band, the soft ribbon along its top edge. Phone: the mark and the contact
   line centred, the columns two across (About wraps under Doors). From 760 px: brand and contact at the left, the three
   columns at the right. */
body.hm .foot { position: relative; padding: 36px 0 110px; background: var(--h-surface); color: var(--h-soft); box-shadow: 0 -1px 0 rgba(18, 38, 111, .08); }
body.hm .foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--h-ribbon-soft); }
body.hm .foot .m { display: grid; justify-items: center; gap: 14px; text-align: center; }
body.hm .foot img { width: 44px; height: 44px; filter: drop-shadow(0 3px 4px rgba(18, 38, 111, .2)); }
body.hm .mks-foot-contact { margin: 0; font-size: .875rem; }
body.hm .mks-foot-contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--h-ink); }
body.hm .mks-foot-contact b { color: var(--h-ink); font-family: var(--h-font-display); font-size: 1.05rem; }
body.hm .foot a { color: var(--h-ink); }
body.hm .foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; width: 100%; max-width: 600px; text-align: left; }
@media (min-width: 560px) { body.hm .foot-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* align-content: start matters - without it a grid stretches its rows to the tallest column, so the two-link
   "What you get" column spreads its links down the height of the four-link "Doors" column and nothing lines up. */
body.hm .mk-fcol { min-width: 0; display: grid; justify-items: start; align-content: start; }
body.hm .mk-fcol-h { margin: 0 0 2px; font: 700 .8rem/1.3 var(--h-font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--h-accent-ink); }
/* 44 px link boxes, 8 px apart (MG-BUG-030); the side padding is pulled back so the words line up under the heading */
body.hm .foot-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin-left: -8px; border-radius: 10px; font: 800 .95rem var(--h-font-body); text-decoration: none; }
@media (hover: hover) { body.hm .foot-links a:hover { background: var(--h-tint-purple); color: var(--h-accent-ink); } }
body.hm .foot-links a[aria-current="page"] { color: var(--h-accent-ink); }
@media (min-width: 760px) {
  body.hm .foot .m { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: auto auto; column-gap: 40px; justify-items: start; align-content: start; text-align: left; }
  body.hm .foot img { grid-column: 1; grid-row: 1; }
  body.hm .foot .mks-foot-contact { grid-column: 1; grid-row: 2; }
  body.hm .foot .foot-links { grid-column: 2; grid-row: 1 / 3; max-width: none; }
}
@media (min-width: 900px) { body.hm .foot { padding-bottom: 48px; } }

/* ---------- the phone bar (mk-sticky.js shows it; phones only): the same gold button ---------- */
body.hm .mks-sticky-cta { display: none; position: fixed; left: 0; right: 0; max-width: 440px; margin-inline: auto; padding-inline: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 60; }
@media (max-width: 899px) { body.hm .mks-sticky-cta.is-on { display: block; } }
/* The page keeps a lane clear beneath the pill, so the bar never sits over the last words
   on the page: the 56px button, its 5px ledge and the 12px it is lifted off the bottom edge (MG-BUG-029).
   mk-site.css pairs the same padding with its own bar; this sheet is standalone and the
   clause was missing here, which is why / computed a 0px bottom padding. */
@media (max-width: 899px) { body.hm:has(.mks-sticky-cta) { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); } }
/* 15 · a phone on its side: no room for a floating bar. Measured 24 Oct: the header plus the
   bar ate 33.6% of 844x390 and 40.9% of 640x320.
   KEEP THIS AFTER the .is-on rule above. It used to sit before it, and because the two
   selectors carry the same specificity the later one won: the guard never fired once, and the
   bar showed on a phone held sideways for as long as the rule had been in the sheet. */
@media (max-height: 480px) and (orientation: landscape) {
  body.hm .mks-sticky-cta, body.hm .mks-sticky-cta.is-on { display: none; }
  body.hm:has(.mks-sticky-cta) { padding-bottom: 0; }
}
body.hm .mks-sticky-cta .btn { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 56px; padding: 10px 18px; margin-bottom: var(--h-press); border-radius: 999px; color: var(--h-btn-ink); text-decoration: none; font: 800 1.125rem/1.1 var(--h-font-display); text-align: center; background: linear-gradient(180deg, var(--h-gold-lit) 0%, var(--h-gold) 55%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .08), 0 var(--h-press) 0 var(--h-gold-deep), 0 18px 34px -12px rgba(18, 38, 111, .45); transition: transform .14s var(--h-ease), box-shadow .14s var(--h-ease); }
body.hm .mks-sticky-cta .btn:active { transform: translateY(var(--h-press)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 0 0 var(--h-gold-deep); }

/* ---------- phones and small tablets (below 980 px): the picture first, full width, then the words and the doors ---------- */
@media (max-width: 979px) {
  body.hm .hm-hero-pic { order: -1; }
  body.hm .hr-svg { max-height: none; }
}
@media (max-width: 899px) {
  body.hm { --h-wrap: calc(100% - 32px); }
  body.hm .hm-hero { padding-block: 10px 36px; }
  body.hm .hm-hero-grid { gap: 10px; }
  body.hm .hm-reel-card { --cp: 6px; border-radius: 24px; }
  body.hm .hm-reel-foot { margin-top: 6px; padding: 0 4px; }
  body.hm .hm-h1 { font-size: clamp(1.9rem, 1.2rem + 3.2vw, 2.9rem); line-height: 1.06; }
  body.hm .hm-hero-copy { display: flex; flex-direction: column; }
  body.hm .hm-hero-copy > .hm-eyebrow { order: 1; margin-bottom: 6px; line-height: 1.25; }
  body.hm .hm-hero-copy > .hm-problem { order: 2; font-size: 1rem; line-height: 1.35; }
  body.hm .hm-hero-copy > .hm-h1 { order: 3; margin-top: 8px; }
  body.hm .hm-hero-copy > .hm-purpose { order: 7; }
  body.hm .hm-hero-copy > .hm-doors { order: 8; }
  /* a short phone keeps the H1 on screen 1: the picture card may narrow (and so shorten) to fit */
  body.hm .hm-reel { max-width: max(284px, calc((100vh - 300px) * .643 + 12px)); max-width: max(284px, calc((100svh - 300px) * .643 + 12px)); margin-inline: auto; }
  /* 4 · nothing focused or jumped to hides under the top bar or the phone bar */
  html { scroll-padding: 78px 0 100px; }
}
/* ---------- MG-BUG-028: a phone's first screen (below 560 px) ----------
   What was wrong, measured: at 390 x 844 the whole first screen was the road diagram and nothing else - the
   headline started at y 621.9 and the gold button was far below the fold; at 320 x 640 the headline was cut off
   altogether. The cause is the rule above: below 980 px the picture takes order -1, so it sits above every
   word, and the copy's own order (eyebrow, problem, h1, purpose, doors) puts the button last - a screen of
   prose between the picture and the one thing a parent came to press.
   What this does: on a phone only, the hero reads headline -> button -> diagram -> the rest. The diagram is NOT
   shrunk and NOT moved out of the first screen: at 390 it begins around y 325 with roughly 520 of its 524 px
   on screen, so it is still the hero of the page (standing rule: the grid is the hero). The eyebrow stays first,
   so the hero still names who it is for (Class 1 to Class 7) before it says anything else.
   How: .hm-hero-copy and .hm-doors become display:contents, which lifts their children into the hero's own single
   column so the picture can be ordered between the Parents door and the rest. Only the Parents door moves up; the
   Schools, Organisers and Arena doors keep their place under the words. Nothing is deleted or hidden.
   Note on display:contents - it removes the .hm-doors box, so the question was whether the role="group"
   aria-label="Which door is yours?" on it still reaches the accessibility tree. Measured, not assumed: read
   from Chromium's own full AX tree (CDP Accessibility.getFullAXTree) at 390 and at 1280, the group is present
   and not ignored at BOTH widths, and the door links were still exposed by their own names ("Find my
   child's level", "See where every class stands", "Find your city's arithmetic champions"). The Arena door (MG-768)
   is the same markup as the Schools door and rides the same rule; it was not part of that measurement. Nothing is lost.
   MG-779 keeps the block as it was; the door cards changed their skin, not their order. */
@media (max-width: 559px) {
  body.hm .hm-hero-grid { gap: 0; }
  body.hm .hm-hero-copy { display: contents; }
  body.hm .hm-doors { display: contents; }
  body.hm .hm-hero-copy > .hm-eyebrow { order: 1; }
  body.hm .hm-hero-copy > .hm-problem { order: 2; }
  body.hm .hm-hero-copy > .hm-h1 { order: 3; }
  body.hm .hm-hero-copy > .hm-purpose { order: 9; }
  /* the three quiet doors keep their old place in the reading order; the Parents door is the one that moves.
     This pair must stay in this sequence: .hm-door-main also matches .hm-door, same weight, so the later wins. */
  body.hm .hm-doors > .hm-door { order: 10; margin-top: 12px; }
  body.hm .hm-doors > .hm-door-main { order: 4; margin-top: 12px; }
  /* beats "order: -1" from the max-width: 979px rule above */
  body.hm .hm-hero-pic { order: 5; margin-top: 16px; }
  /* .hm-doors carried gap:12px and a top margin for its children; display:contents drops both, so the items
     that used to sit inside it carry their own spacing (above), and the words after the picture carry theirs. */
  body.hm .hm-hero-copy > .hm-purpose { margin-top: 18px; }
}
/* a tall phone (390 x 844): the picture card gives up a few pixels so the words under it clear the phone bar */
@media (max-width: 899px) and (min-height: 800px) {
  body.hm .hm-reel { max-width: min(100%, max(284px, calc((100vh - 387px) * .643 + 12px))); max-width: min(100%, max(284px, calc((100svh - 387px) * .643 + 12px))); }
  body.hm .hm-door-main .hm-btn { width: 100%; justify-self: stretch; }
}
/* ---------- MG-778: the diagram is responsive on a phone ----------
   Raj, 25 Oct 2026, on his phone: "have the diagram responsive to mobile". It was not. The two rules above cap the
   picture card by the HEIGHT of the screen - max(284px, (screen height - 387) * .643 + 12) - so the shorter the phone,
   the narrower the diagram: 352 px on a 390 x 844 phone, but 284 px on a 390 x 664 one, against a hero column 358 px
   wide. At 284 px the 360-unit drawing is scaled to .79, which renders its 13 px labels at about 10 px and the digit in
   each ball at under 10 px - the cramped, shrunken picture he was looking at. That cap was there to keep the headline
   on screen 1 while the picture sat above every word (order: -1). On a phone it no longer does: MG-BUG-028 above puts
   the eyebrow, the problem line, the headline and the Parents button ABOVE the picture, so the cap buys nothing and
   only takes width away. Below 560 px the diagram now takes the whole column at every screen height, so it scales with
   the phone's width and its own text renders at its own size. This rule must stay AFTER both capping rules: same
   specificity, so the later one wins. From 560 px up the picture is still above the words and the caps still earn their
   keep, so they are left alone. */
@media (max-width: 559px) {
  body.hm .hm-reel { max-width: 100%; }
}
@media (min-width: 640px) and (max-width: 979px) { body.hm .hm-hero-pic { max-width: 560px; width: 100%; margin: 0 auto; } }
@media (max-width: 360px) { body.hm .hm-reel-card { margin-inline: -8px; --cp: 6px; } }

/* ---------- MG-779 · Direction B on the phone: chip, headline, picture, problem line, button, purpose, doors ----------
   Below 560 px this supersedes the MG-BUG-028 order above (same selectors, later in the file, so it wins). The eyebrow becomes a
   small teal chip, the headline sits right under it in plain ink, the tree comes next as the hero, then the one-line problem,
   then the gold Parents button full width, then the purpose line, then the other three doors. The words are unchanged. */
@media (max-width: 559px) {
  body.hm .hm-hero { padding-block: 14px 36px; }
  body.hm .hm-hero-copy > .hm-eyebrow { order: 1; justify-self: start; width: fit-content; margin: 0 0 10px; padding: 6px 12px; border-radius: 14px; background: var(--h-tint-teal); color: var(--h-teal-ink); font: 800 .8rem/1.3 var(--h-font-body); letter-spacing: .02em; text-transform: none; }
  body.hm .hm-eyebrow::before { display: none; }
  body.hm .hm-hero-copy > .hm-h1 { order: 2; margin-top: 0; font-size: 2.3rem; line-height: 1.06; color: var(--h-ink); }
  body.hm .hm-shine { background: none; color: var(--h-purple-deep); -webkit-text-fill-color: currentColor; }
  body.hm .hm-hero-pic { order: 3; margin-top: 14px; }
  body.hm .hm-hero-copy > .hm-problem { order: 4; margin-top: 18px; font: 700 1.02rem/1.45 var(--h-font-body); color: var(--h-soft); }
  body.hm .hm-doors > .hm-door { order: 10; margin-top: 12px; }
  body.hm .hm-doors > .hm-door-main { order: 5; margin-top: 14px; }
  body.hm .hm-door-main .hm-door-who { display: none; }
  body.hm .hm-door-main .hm-btn { width: 100%; justify-self: stretch; }
  body.hm .hm-hero-copy > .hm-purpose { order: 9; margin-top: 22px; gap: 0; font: 800 1.1rem/1.4 var(--h-font-body); color: var(--h-ink); }
  body.hm .hm-purpose::before { display: none; }
}


/* ================= MG-783: the night page, the day/night switch, the drifting maths signs =================
   Raj, 25 Oct 2026: "Generate dark and light theme too with glossy professional moving maths symbols... Fluid design."

   HOW THE TWO PAGES WORK. The head script in landing-sections.html writes data-theme="light" or "dark" on <html>
   before the first paint, from the visitor's saved choice, or, with none saved, from the device's own setting. So there
   is no flash of the wrong ground and no media query is needed here: the one block below redefines the tokens, and
   every rule in this sheet already reads them. With JavaScript off, the page stays the day page.
   Nothing but tokens is redefined (plus the four door word-colours, which are family shades, not tokens). */
html[data-theme="dark"] { background: #0B1030; color-scheme: dark; }
html[data-theme="dark"] body.hm {
  /* ground + ink */
  --h-ground: #0B1030; --h-ground-2: #151B48; --h-surface: #171D4A;
  --h-ink: #F3F6FF;          /* 14.5:1 on the card */
  --h-soft: #AFBCEC;         /* 8.5:1 */
  --h-navy: #A8BEFF;         /* the pressed nav pill and the focus ring, now light on a dark ground */
  --h-on-navy: #0B1440;      /* so the pill's own word still reads, 8.7:1 */
  --h-accent-ink: #CBAEFF;   /* 8:1 */
  --h-halo: #0F1438;         /* the rim is the night ground, not white */
  --h-ledge: #070B22;
  --h-edge: #4E5A95;
  --h-bar-bg: rgba(11, 16, 48, .92);
  --h-dot: rgba(168, 190, 255, .10);
  --h-pool-1: rgba(160, 119, 245, .18); --h-pool-2: rgba(125, 242, 212, .14); --h-pool-3: rgba(134, 174, 255, .15);
  /* the soft tints become deep tints, and the inks that sat on them become their light shades */
  --h-tint-purple: #2A1F5C; --h-tint-purple-2: #342873; --h-tint-gold: #4A3508; --h-tint-teal: #0D3A33; --h-tint-blue: #16255E; --h-tint-green: #0D3A24;
  --h-teal-ink: #7DF2D4; --h-gold-ink: #FFE08A; --h-gold-ink-2: #FFD35C;
  /* the ribbon as words needs its LIT stops at night, not its deep ones */
  --h-ribbon-ink: linear-gradient(90deg, #C9A4FF 0%, #8FB6FF 48%, #7DF2D4 100%);
  --h-ribbon-soft: linear-gradient(90deg, #4A1F9C, #1E4FC2 34%, #118C70 68%, #0A8A42);
  /* a shadow on a dark ground has to be black, not navy, or it disappears */
  --h-shadow-card: 0 2px 0 rgba(0, 0, 0, .30), 0 14px 30px -14px rgba(0, 0, 0, .65);
  --h-shadow-float: 0 28px 50px -24px rgba(0, 0, 0, .80);
}
/* the four door words: their deep shades are made for cream, so at night each door takes its lit shade */
html[data-theme="dark"] body.hm .hm-door { --txt: var(--h-purple-lit); }
html[data-theme="dark"] body.hm .hm-door.blue { --txt: var(--h-blue-lit); }
html[data-theme="dark"] body.hm .hm-door.teal { --txt: var(--h-teal-lit); }
html[data-theme="dark"] body.hm .hm-door.gold { --txt: var(--h-gold-ink); }
/* the halo rings around the hero card and the Parents card were white-ish wash; at night they are the family colour */
html[data-theme="dark"] body.hm .hm-reel-card { box-shadow: var(--h-rim), var(--h-shadow-float), 0 0 0 6px rgba(160, 119, 245, .16); }
@media (min-width: 560px) { html[data-theme="dark"] body.hm .hm-door-main { box-shadow: var(--h-rim), var(--h-shadow-card), 0 0 0 6px rgba(255, 198, 26, .14); } }

/* ---------- MG-783: the pieces that are NOT tokens, and so stayed day-coloured at night ----------
   Each one below was measured on the night ground and was under the floor it has to clear: 4.5:1 for words,
   3:1 for the outline of a control or a shape that carries meaning. The day page is untouched by all of them.

   The phone headline. Below 560 px the second half of the headline drops the ribbon gradient for one flat colour
   (see the 559 px block above), and that colour was the deep purple made for cream: 1.74:1 on the night ground,
   which is no headline at all. At night it takes the same light purple the rest of the small purple words take. */
@media (max-width: 559px) {
  html[data-theme="dark"] body.hm .hm-shine { color: var(--h-accent-ink); -webkit-text-fill-color: currentColor; }
}
/* The waiting Level 10 ball, the "found and filled" beat of the reel. Its fill was the card rim token, which at night
   is the night ground, and the number inside kept the ball's own dark ink: 2.15:1. The ball now fills with the second
   night ground and the number is the page ink, so the beat reads while the dashed outline still says "not yet". */
html[data-theme="dark"] body.hm .hr-b.nine.wait circle { fill: var(--h-ground-2); }
html[data-theme="dark"] body.hm .hr-svg .hr-b.nine.wait text { fill: var(--h-ink); }
/* The lit dependency line, which shows WHICH path the reel is lighting up, took the family's body colour: 2.82:1 at
   night. It takes the family's lit shade instead, mixed the same way the candy balls mix theirs. */
html[data-theme="dark"] body.hm .hr-edge.lit { stroke: color-mix(in srgb, var(--c) 55%, #fff); }
/* The two ghost buttons (Sign in, Watch again) ring themselves in 2.5 px of the family's body purple: 2.47:1 on the
   night card, 2.86:1 on the night ground, under the 3:1 a control outline has to clear. Their words were always fine
   (8.4:1); only the ring changes, to the lit purple. */
html[data-theme="dark"] body.hm .signin,
html[data-theme="dark"] body.hm .hm-again { box-shadow: inset 0 0 0 2.5px var(--h-purple-lit), 0 4px 0 var(--h-ledge); }

/* ---------- the day / night switch in the header bar: a 44 px target around a 42 px track, the knob a candy ball
   (gold sun by day, blue moon by night). mk-home.js flips data-theme, saves the choice and swaps the words. ---------- */
body.hm .hm-theme { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer; }
@media (hover: hover) { body.hm .hm-theme:hover { background: var(--h-tint-purple); } }
body.hm .hm-theme-track { display: block; width: 42px; height: 24px; border-radius: 999px; background: var(--h-tint-purple-2); box-shadow: inset 0 0 0 2px var(--h-purple), inset 0 2px 4px rgba(11, 20, 64, .14); }
body.hm .hm-theme-knob { display: grid; place-items: center; width: 20px; height: 20px; margin: 2px; border-radius: 50%; color: var(--h-btn-ink); background-image: var(--h-ball-gloss), radial-gradient(circle at 50% 58%, var(--h-gold-lit) 0%, var(--h-gold) 55%, var(--h-gold-deep) 100%); box-shadow: var(--h-ball-shade), 0 2px 4px rgba(11, 20, 64, .35); transition: transform .24s var(--h-spring), background-image .24s linear, color .24s; }
body.hm .hm-theme-knob svg { display: block; }
body.hm .hm-theme-moon { display: none; }
html[data-theme="dark"] body.hm .hm-theme-track { background: var(--h-tint-blue); box-shadow: inset 0 0 0 2px var(--h-blue), inset 0 2px 4px rgba(0, 0, 0, .4); }
html[data-theme="dark"] body.hm .hm-theme-knob { transform: translateX(18px); color: var(--h-on-color); background-image: var(--h-ball-gloss), radial-gradient(circle at 50% 58%, var(--h-blue-lit) 0%, var(--h-blue) 55%, var(--h-blue-deep) 100%); }
html[data-theme="dark"] body.hm .hm-theme-sun { display: none; }
html[data-theme="dark"] body.hm .hm-theme-moon { display: block; }
@media (prefers-reduced-motion: reduce) { body.hm .hm-theme-knob { transition: none; } }
@media (max-width: 560px) { body.hm .hm-theme { width: 44px; } }
/* MG-783: in Windows high-contrast (forced colors) the browser throws away author backgrounds and box-shadows - and the
   track and the knob were drawn with nothing but those, so the switch collapsed into a lone moon glyph with no sign of
   which page was on. The cue is rebuilt from the two things forced colors cannot discard: a real border, and where the
   knob sits (it already slides 18px at night). Every colour named here is a system keyword, so the switch follows
   whatever palette the visitor chose; nothing is forced back on and forced-color-adjust is left alone, because someone
   who turns this mode on has a reason. Both boxes are border-box, so the borders cost no layout. */
@media (forced-colors: active) {
  body.hm .hm-theme-track { border: 1px solid ButtonText; background: ButtonFace; box-shadow: none; }
  body.hm .hm-theme-knob { border: 2px solid ButtonText; background: ButtonFace; background-image: none; box-shadow: none; color: ButtonText; }
  html[data-theme="dark"] body.hm .hm-theme-track { border-color: Highlight; background: ButtonFace; }
  html[data-theme="dark"] body.hm .hm-theme-knob { border-color: Highlight; background: Highlight; color: HighlightText; }
}

/* ---------- the drifting maths signs: twelve candy balls behind the hero, each sized in vw so the field scales with
   the screen and never adds a pixel of width (the hero already clips, and the field clips again). They are decoration:
   aria-hidden, no pointer events, and they only move when html.hm-motion is on, so a visitor who asked for less motion
   gets them standing still. --x/--y place a ball by its centre, --s is its size in vw, --c its family, --t its drift
   time, --dl its head start (negative, so the twelve are already spread apart on the first frame). ---------- */
body.hm .hm-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
body.hm .hm-sy {
  --sz: clamp(26px, calc(var(--s) * 1vw + 16px), 76px);
  position: absolute; left: var(--x); top: var(--y); width: var(--sz); height: var(--sz);
  margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);
  display: grid; place-items: center; border-radius: 50%;
  font: 800 calc(var(--sz) * .5)/1 var(--h-font-display); font-style: normal;
  color: var(--h-on-color); text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  background-image: var(--h-ball-gloss), radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--c) 55%, #fff) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000) 100%);
  box-shadow: var(--h-ball-shade), 0 10px 20px -8px color-mix(in srgb, var(--c) 55%, transparent);
  opacity: .42;
  user-select: none; -webkit-user-select: none;
}
html[data-theme="dark"] body.hm .hm-sy { opacity: .5; }
/* a phone hero is already full of picture and words, so the signs stay fainter there */
@media (max-width: 899px) { body.hm .hm-sy { opacity: .24; } html[data-theme="dark"] body.hm .hm-sy { opacity: .3; } }
html.hm-motion body.hm .hm-sy { animation: hm-sy-drift var(--t) var(--dl) ease-in-out infinite alternate; }
/* translate and rotate, never transform: the hero background's parallax writes translate on the PARENT, and keeping to
   the single properties means nothing here can overwrite a whole transform list. */
@keyframes hm-sy-drift {
  0%   { translate: 0 0; rotate: -9deg; }
  50%  { translate: 1.6vw -2.4vw; rotate: 7deg; }
  100% { translate: -1.3vw 1.9vw; rotate: -4deg; }
}