:root {
  --page: #FDFDFD;
  --purple-splash: #6145C2;
  --blue-splash: #0182E5;
  --ribbon-yellow: #FDCD01;
  --cream: #FEF5DE;
  --headline-purple: #6430AE;
  --headline-blue: #0B77D5;
  --ink: #020202;
  --kids-purple: #5C26A6;
  --parents-blue: #0770D0;
  --nav-ink: #0E0E0E;
  --nav-active: #7139B5;
  --navy: #040E35;
  --tag-navy: #2B1E76;
  --quote-ink: #2F2F2E;
  --sig-pink: #EF4A83;
  --cta-purple: #5825B2;
  --cta-blue: #0B64C3;
  --trust-green: #3B940B;
  --trust-pink: #D50C40;
  --trust-blue: #0865B7;
  --trust-orange: #F26009;
  --body-ink: #34322D;
  --ring: #C2A1EB;
  --doodle-yellow: #F5C518;
  --doodle-pink: #F0538A;
  --doodle-sky: #67B6F0;
  --doodle-green: #5DB52C;
  --star-gold: #F9C10C;

  --font-display: "Grandstander", "Baloo 2", system-ui, sans-serif;
  --font-round: "Baloo 2", system-ui, sans-serif;
  --font-sans: "Nunito Sans", system-ui, sans-serif;
  --font-script: "Dancing Script", cursive;

  --u: calc(100cqw / 2048);
}

*, *::before, *::after { box-sizing: border-box; }
/* overflow-y:auto on the ROOT stops the body's overflow from propagating to the viewport. Without it the
   desktop stage's body{overflow:hidden} became viewport overflow:hidden, which blocks wheel/touch scrolling
   (script scrollTo still works, so DOM checks missed it) - a short window could never reach the trust band. */
html { -webkit-text-size-adjust: 100%; overflow-y: auto; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  container-type: inline-size;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: #fff; color: var(--cta-purple);
  padding: 8px 14px; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 8px; }
/* Two-tone ring: dark outline + white halo, so it reads on white, purple, blue and yellow alike.
   A single purple ring vanished on the purple splash behind the left CTA. */
:focus-visible { outline: 3px solid #1B1340; outline-offset: 3px; box-shadow: 0 0 0 7px #fff; }

/* ====================== DESKTOP STAGE (>= 1100px) ====================== */
@media (min-width: 1100px) {
  /* the mockup composition is one clipped stage; the footer follows it in normal flow */
  .stage { position: relative; height: calc(1152 * var(--u)); overflow: hidden; }
  .site-header, main, .hero, .cats, .trust { position: static; }
  .site-header > *, .hero > *, .cats > *, .trust { position: absolute; }
  .menu-toggle { display: none; }

  /* ---- S1 header ---- */
  /* anchored on the asset's INK (it carries transparent padding): ink 52-527 x, 23-152 y */
  .logo { left: calc(28 * var(--u)); top: calc(-1 * var(--u)); width: calc(524 * var(--u)); z-index: 3; }
  .logo img { width: 100%; }
  .tagline {
    left: calc(31 * var(--u)); top: calc(169 * var(--u)); width: calc(481 * var(--u)); height: calc(66 * var(--u));
    background: url(../assets_homepage/opt/ribbon-purple-902.png) center / 100% 100% no-repeat;
    display: grid; place-items: center; z-index: 3;
  }
  .tagline span { color: #fff; font: 600 calc(24.5 * var(--u)) / 1 var(--font-round); transform: translate(calc(-4 * var(--u)), calc(-2 * var(--u))) rotate(-1.5deg); white-space: nowrap; }

  .nav { left: calc(760 * var(--u)); top: calc(34 * var(--u)); z-index: 3; }
  .nav ul { display: flex; gap: calc(40 * var(--u)); }
  .nav a { display: flex; align-items: center; gap: calc(18 * var(--u)); position: relative;
    font: 500 calc(17.8 * var(--u)) / 1 var(--font-sans); color: var(--nav-ink); padding-block: calc(4 * var(--u)); }
  .nav__icon { width: calc(32 * var(--u)); height: calc(32 * var(--u)); color: var(--nav-active); flex: none; }
  .nav__icon--yellow { color: var(--doodle-yellow); }
  .nav__icon--indigo { color: #3D3DB8; }
  .nav__icon--red { color: #E8452C; }
  .nav a[aria-current="page"]::after, .nav a:hover::after {
    content: ""; position: absolute; left: 0; right: calc(-2 * var(--u)); bottom: calc(-5 * var(--u));
    height: calc(3 * var(--u)); border-radius: 2px; background: var(--nav-active);
  }
  .nav a:hover:not([aria-current])::after { opacity: .45; }

  .tag {
    left: calc(1787 * var(--u)); top: 0; width: calc(220 * var(--u)); height: calc(225 * var(--u));
    /* the asset is the WHOLE tag; its top stitch row (26/525 px) is cut off by the page top, as in the mockup */
    background: url(../assets_homepage/opt/tag-yellow-412.png) center bottom / 100% calc(236 * var(--u)) no-repeat; z-index: 3;
  }
  .tag__heart { position: absolute; left: calc(41 * var(--u)); top: calc(38 * var(--u));
    width: calc(36 * var(--u)); height: calc(36 * var(--u)); color: var(--ink); }
  .tag p { position: absolute; left: calc(40 * var(--u)); width: calc(166 * var(--u)); top: calc(56 * var(--u));
    text-align: center; color: var(--ink); }
  .tag__s { display: block; font: 500 calc(21 * var(--u)) / calc(28 * var(--u)) var(--font-sans); }
  .tag strong { display: block; font: 700 calc(28.6 * var(--u)) / calc(32 * var(--u)) var(--font-round); color: var(--tag-navy); }

  /* ---- S2 hero ---- */
  /* Lines left-anchored at the mockup's ink x (729 / 713). Size matched on line 2's ink width;
     Grandstander is ~18% shorter than the mockup face at equal width (FONTS.md, known deviation). */
  .hero__title { left: calc(711 * var(--u)); top: calc(120 * var(--u)); z-index: 2;
    font: 800 calc(75.4 * var(--u)) / calc(92 * var(--u)) var(--font-display); white-space: nowrap; }
  .hero__l1, .hero__l2 { display: block; }
  .hero__l1 { color: var(--headline-purple); margin-left: calc(17 * var(--u)); }
  .hero__l2 { color: var(--headline-blue); }
  .hero__sub { left: 0; right: 0; top: calc(300 * var(--u)); z-index: 2; text-align: center;
    font: 600 calc(28 * var(--u)) / calc(32 * var(--u)) var(--font-round); color: var(--ink); margin-left: calc(38 * var(--u)); }
  .hero__sub b { font-weight: 700; }
  .c-kids { color: var(--kids-purple); }
  .c-parents { color: var(--parents-blue); }

  /* mascots fitted on colour-mask ink boxes vs the mockup (dino green, rocket red, cup blue) */
  .hero__dino { left: calc(-103 * var(--u)); top: calc(249 * var(--u)); width: calc(291 * var(--u)); z-index: 4; }
  /* The rocket bleeds off the right edge as in the mockup. A background on a box that ends at the
     page edge gives the same bleed without an element extending offscreen. */
  .hero__rocket { left: calc(1853 * var(--u)); top: calc(240 * var(--u)); width: calc(195 * var(--u)); height: calc(370 * var(--u)); z-index: 4;
    background: url(../assets_homepage/opt/rocket-518.png) left top / calc(276 * var(--u)) auto no-repeat; } /* porthole-anchored; asset is slightly stubbier than the mockup rocket */
  /* Photo scale/offset fitted on two landmarks (pencil-cup left edge, mother's hair right edge):
     scale 0.477 -> 859 wide; bottom cut at mockup y 805 with a torn edge, as in the mockup. */
  .hero__photo { left: calc(562 * var(--u)); top: calc(351 * var(--u)); width: calc(859 * var(--u)); height: calc(454 * var(--u));
    overflow: hidden; z-index: 2; clip-path: polygon(0% 0%, 100% 0%, 100.00% 96.38%, 98.89% 96.96%, 97.78% 97.16%, 96.67% 96.77%, 95.56% 96.89%, 94.44% 97.48%, 93.33% 95.74%, 92.22% 97.82%, 91.11% 95.69%, 90.00% 97.64%, 88.89% 95.77%, 87.78% 96.82%, 86.67% 96.62%, 85.56% 98.58%, 84.44% 95.90%, 83.33% 97.14%, 82.22% 97.11%, 81.11% 98.87%, 80.00% 96.99%, 78.89% 97.55%, 77.78% 97.94%, 76.67% 96.71%, 75.56% 97.66%, 74.44% 97.30%, 73.33% 95.95%, 72.22% 96.88%, 71.11% 96.34%, 70.00% 98.56%, 68.89% 96.03%, 67.78% 98.00%, 66.67% 97.13%, 65.56% 97.49%, 64.44% 96.91%, 63.33% 96.75%, 62.22% 95.74%, 61.11% 97.09%, 60.00% 97.23%, 58.89% 97.63%, 57.78% 96.35%, 56.67% 98.01%, 55.56% 96.69%, 54.44% 97.32%, 53.33% 97.51%, 52.22% 98.28%, 51.11% 96.19%, 50.00% 97.98%, 48.89% 96.86%, 47.78% 98.70%, 46.67% 97.35%, 45.56% 97.29%, 44.44% 97.95%, 43.33% 96.88%, 42.22% 96.60%, 41.11% 98.42%, 40.00% 95.96%, 38.89% 97.77%, 37.78% 95.69%, 36.67% 98.20%, 35.56% 97.43%, 34.44% 97.98%, 33.33% 97.70%, 32.22% 97.35%, 31.11% 97.27%, 30.00% 98.03%, 28.89% 96.99%, 27.78% 97.69%, 26.67% 97.62%, 25.56% 98.87%, 24.44% 96.74%, 23.33% 98.19%, 22.22% 95.75%, 21.11% 98.28%, 20.00% 97.15%, 18.89% 98.98%, 17.78% 97.57%, 16.67% 97.28%, 15.56% 96.53%, 14.44% 98.20%, 13.33% 95.65%, 12.22% 97.71%, 11.11% 96.00%, 10.00% 96.88%, 8.89% 95.74%, 7.78% 98.44%, 6.67% 95.91%, 5.56% 97.19%, 4.44% 96.54%, 3.33% 98.69%, 2.22% 95.79%, 1.11% 97.68%, 0.00% 96.92%); }
  .hero__photo img { width: 100%; }

  .panel { top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
  .panel__splash { position: absolute; }
  .panel--color .panel__splash { left: calc(41 * var(--u)); top: calc(297 * var(--u)); width: calc(696 * var(--u)); height: calc(491 * var(--u)); }
  .panel--review .panel__splash { left: calc(1275 * var(--u)); top: calc(292 * var(--u)); width: calc(712 * var(--u)); height: calc(486 * var(--u)); }
  .panel__body { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
  .panel__body > * { position: absolute; pointer-events: auto; }
  .panel--color .panel__body { --cx: 410; --rib-l: 193; --rib-w: 442; --chk-l: 197; --cta-l: 186; --cta-w: 346; --title-t: 398; --rib-fs: 21.3; }
  .panel--review .panel__body { --cx: 1608; --rib-l: 1372; --rib-w: 481; --chk-l: 1408; --cta-l: 1398; --cta-w: 379; --title-t: 402; --rib-fs: 23; }

  .panel__badge { left: calc((var(--cx) - 41) * var(--u)); top: calc(312 * var(--u)); width: calc(82 * var(--u)); height: calc(82 * var(--u));
    border-radius: 50%; background: #fff; display: grid; place-items: center; }
  .panel__badge img { width: 70%; }
  .panel__badge svg { width: 62%; height: 62%; color: var(--star-gold); }
  .panel__title { left: calc((var(--cx) - 300) * var(--u)); width: calc(600 * var(--u)); top: calc(var(--title-t) * var(--u));
    text-align: center; color: #fff; font: 700 calc(52.8 * var(--u)) / calc(54 * var(--u)) var(--font-round); }
  .ribbon { left: calc(var(--rib-l) * var(--u)); width: calc(var(--rib-w) * var(--u)); top: calc(520 * var(--u)); height: calc(45 * var(--u));
    background: url(../assets_homepage/opt/ribbon-yellow-940.png) center / 100% 100% no-repeat; display: grid; place-items: center; }
  .ribbon span { font: 600 calc(var(--rib-fs) * var(--u)) / 1 var(--font-round); color: var(--ink); white-space: nowrap; }
  .checks { left: calc(var(--chk-l) * var(--u)); top: calc(580 * var(--u)); display: grid; gap: calc(7 * var(--u)); }
  .checks li { display: flex; align-items: center; gap: calc(14 * var(--u)); color: #fff;
    font: 500 calc(18.2 * var(--u)) / calc(24 * var(--u)) var(--font-round); }
  .checks svg { width: calc(25 * var(--u)); height: calc(25 * var(--u)); flex: none; }
  .panel--color .checks svg { color: var(--purple-splash); }
  .panel--review .checks svg { color: var(--blue-splash); }
  .cta { left: calc(var(--cta-l) * var(--u)); width: calc(var(--cta-w) * var(--u)); top: calc(688 * var(--u)); height: calc(60 * var(--u));
    border-radius: 999px; background: #fff; display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--u));
    font: 600 calc(22.6 * var(--u)) / 1 var(--font-round); box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(20, 10, 60, .14);
    transition: transform .15s ease, box-shadow .15s ease; }
  .panel--color .cta { color: var(--cta-purple); }
  .panel--review .cta { color: var(--cta-blue); }
  .cta:hover { transform: translateY(calc(-2 * var(--u))); box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(20, 10, 60, .22); }
  .cta__icon { width: calc(32 * var(--u)); height: calc(32 * var(--u)); flex: none; }
  .cta__icon--star { color: var(--star-gold); width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
  .cta__arrow { width: calc(24 * var(--u)); height: calc(24 * var(--u)); flex: none; }

  .dd { z-index: 2; }
  .dd--star1 { left: calc(612 * var(--u)); top: calc(130 * var(--u)); width: calc(36 * var(--u)); height: calc(36 * var(--u)); color: var(--doodle-yellow); }
  .dd--star2 { left: calc(1690 * var(--u)); top: calc(133 * var(--u)); width: calc(36 * var(--u)); height: calc(36 * var(--u)); color: var(--doodle-yellow); }
  .dd--star3 { left: calc(41 * var(--u)); top: calc(973 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u)); color: var(--doodle-yellow); }
  .dd--heart { left: calc(579 * var(--u)); top: calc(236 * var(--u)); width: calc(66 * var(--u)); height: calc(62 * var(--u)); color: var(--doodle-pink); }
  .dd--cloud { left: calc(1473 * var(--u)); top: calc(152 * var(--u)); width: calc(115 * var(--u)); height: calc(78 * var(--u)); color: var(--doodle-sky); }
  .dd--squiggle { left: calc(1403 * var(--u)); top: calc(268 * var(--u)); width: calc(108 * var(--u)); height: calc(42 * var(--u)); color: var(--doodle-green); }
  .dd--spark { left: calc(1382 * var(--u)); top: calc(131 * var(--u)); width: calc(28 * var(--u)); height: calc(32 * var(--u)); color: var(--headline-purple); }

  /* ---- S3 categories ---- */
  .cats__title { left: calc(712 * var(--u)); top: calc(810 * var(--u)); display: flex; align-items: center; gap: calc(18 * var(--u));
    font: 700 calc(30.5 * var(--u)) / 1 var(--font-round); color: var(--navy); z-index: 2; }
  .burst { width: calc(22 * var(--u)); height: calc(28 * var(--u)); color: var(--doodle-green); flex: none; }
  .cards { left: 0; top: 0; }
  .cards li { position: absolute; top: calc(847 * var(--u)); height: calc(182 * var(--u)); }
  .cards li:nth-child(1) { left: calc(302 * var(--u)); width: calc(158 * var(--u)); }
  .cards li:nth-child(2) { left: calc(480 * var(--u)); width: calc(159 * var(--u)); }
  .cards li:nth-child(3) { left: calc(658 * var(--u)); width: calc(158 * var(--u)); }
  .cards li:nth-child(4) { left: calc(838 * var(--u)); width: calc(156 * var(--u)); }
  .cards li:nth-child(5) { left: calc(1015 * var(--u)); width: calc(173 * var(--u)); }
  .cards li:nth-child(6) { left: calc(1209 * var(--u)); width: calc(160 * var(--u)); }
  .card { display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden;
    border: calc(2 * var(--u)) solid var(--bd); border-radius: calc(20 * var(--u));
    transition: transform .15s ease, box-shadow .15s ease; }
  .card img { flex: 1; min-height: 0; width: 100%; object-fit: contain; padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u)); }
  .card span { flex: none; height: calc(36 * var(--u)); display: grid; place-items: center; background: var(--bar); color: #fff;
    font: 600 calc(20.2 * var(--u)) / 1 var(--font-round); }
  .card:hover { transform: translateY(calc(-4 * var(--u))); box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .12); }
  .card--animals  { --bar: #5AB615; --bd: #8BA6D7; }
  .card--vehicles { --bar: #0175D1; --bd: #6E9FDB; }
  .card--dinos    { --bar: #9BCB1F; --bd: #ABD351; }
  .card--princess { --bar: #FA4E82; --bd: #F48FB0; }
  .card--space    { --bar: #6748BF; --bd: #B9ABE2; }
  .card--holidays { --bar: #FC7405; --bd: #EB7D45; }

  /* sized on the cloud BODY (188 px wide in the mockup); the asset also carries the dashed trail */
  .cloud { left: calc(66 * var(--u)); top: calc(844 * var(--u)); width: calc(231 * var(--u)); z-index: 2; }
  .cloud img { width: 100%; }
  .cloud p { position: absolute; left: 0; top: 0; width: 90%; height: 78%; display: flex; flex-direction: column; justify-content: center; align-items: center;
    transform: rotate(-8deg); font: 600 calc(27 * var(--u)) / calc(33 * var(--u)) var(--font-round); }
  .cloud span { display: block; }
  .c1 { color: var(--sig-pink); } .c2 { color: var(--headline-blue); } .c3 { color: var(--headline-purple); }

  .promise { left: 0; top: 0; }
  /* max-width:none - the absolutely positioned figure shrinks to 0 wide, and the global img
     max-width:100% then collapsed this photo to width 0 (caught in the desktop pass) */
  .promise__photo { max-width: none; position: absolute; left: calc(1419 * var(--u)); top: calc(797 * var(--u)); width: calc(236 * var(--u)); height: calc(236 * var(--u));
    border-radius: 50%; object-fit: cover; border: calc(3 * var(--u)) solid var(--ring); }
  .promise__card { position: absolute; left: calc(1647 * var(--u)); top: calc(804 * var(--u)); width: calc(284 * var(--u)); height: calc(218 * var(--u));
    background: #fff; border-radius: calc(22 * var(--u)); border: 1px solid #EFEFEF; box-shadow: 0 calc(3 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .07);
    padding: calc(27 * var(--u)) calc(20 * var(--u)) 0 calc(41 * var(--u)); }
  .promise__stars { display: flex; gap: calc(3 * var(--u)); color: var(--star-gold); }
  .promise__stars svg { width: calc(21 * var(--u)); height: calc(21 * var(--u)); }
  .promise__quote { margin-top: calc(12 * var(--u)); font: 500 calc(16.1 * var(--u)) / calc(23.2 * var(--u)) var(--font-sans); color: var(--quote-ink); }
  .promise__quote::before { content: "\201C"; position: absolute; margin-left: calc(-14 * var(--u)); }
  .promise__quote::after { content: " \201D"; }
  .promise__sig { margin-top: calc(10 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u));
    font: 500 calc(23.5 * var(--u)) / 1 var(--font-script); color: var(--sig-pink); }
  .promise__sig svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
  .cats__cup { left: calc(1916 * var(--u)); top: calc(933 * var(--u)); width: calc(113 * var(--u)); z-index: 5; }

  /* ---- S4 trust band ---- */
  .trust { left: calc(15 * var(--u)); top: calc(1055 * var(--u)); width: calc(2013 * var(--u)); height: calc(140 * var(--u));
    background: var(--cream); border-radius: calc(110 * var(--u)) calc(70 * var(--u)) 0 0 / calc(40 * var(--u)) calc(30 * var(--u)) 0 0; z-index: 1; }
  .trust li { position: absolute; top: calc(20 * var(--u)); padding-left: calc(89 * var(--u)); }
  .trust li:nth-child(1) { left: calc((245 - 15) * var(--u)); }
  .trust li:nth-child(2) { left: calc((663 - 15) * var(--u)); padding-left: calc(89 * var(--u)); }
  .trust li:nth-child(3) { left: calc((1040 - 15) * var(--u)); padding-left: calc(94 * var(--u)); }
  .trust li:nth-child(4) { left: calc((1416 - 15) * var(--u)); padding-left: calc(94 * var(--u)); }
  /* icons fitted to the mockup's INK box (size = geometric mean of w/h ratios, centred on ink centre) */
  .trust img { position: absolute; left: calc(var(--ix) * var(--u)); top: calc(var(--iy) * var(--u)); width: calc(var(--iw) * var(--u)); }
  .trust li:nth-child(1) { --ix: 0;     --iy: -0.1; --iw: 60.9; }
  .trust li:nth-child(2) { --ix: -12.8; --iy: -1.2; --iw: 72.5; }
  .trust li:nth-child(3) { --ix: -4.4;  --iy: -2.5; --iw: 79.9; }
  .trust li:nth-child(4) { --ix: 0.4;   --iy: -6.2; --iw: 73.2; }
  .trust h3 { font: 600 calc(19.3 * var(--u)) / calc(26 * var(--u)) var(--font-round); }
  .trust p { font: 500 calc(14.2 * var(--u)) / calc(18.4 * var(--u)) var(--font-sans); color: var(--body-ink); }
  .trust--green h3 { color: var(--trust-green); } .trust--pink h3 { color: var(--trust-pink); }
  .trust--blue h3 { color: var(--trust-blue); } .trust--orange h3 { color: var(--trust-orange); }
}

/* ====================== RESPONSIVE FLOW (< 1100px) ======================
   Below the desktop stage the composition cannot hold (text would fall under ~8px), so the page reflows:
   header row + dropdown nav, headline, panel / photo / panel stacked, card grid, trust grid.
   Splash/ribbon/tag art is stretched behind real text. Purely decorative doodles, and the two mascots
   that bleed off the page edges, are dropped below 768px where they would crowd the content. */
@media (max-width: 1099.98px) {
  body { --gut: clamp(16px, 4vw, 40px); }

  /* ---- header ---- */
  .site-header { position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: start;
    gap: 0 12px; padding: 14px var(--gut) 0; }
  /* header row budget at 390: logo 46vw + toggle 48 + tag 96 + 2 gaps + gutters fits; 56vw overflowed by ~28px */
  .logo { grid-column: 1; width: min(300px, 46vw); }
  .logo img { width: 100%; }
  .tagline { grid-column: 1 / 3; width: min(310px, 100%); aspect-ratio: 481 / 66; margin-top: 2px;
    background: url(../assets_homepage/opt/ribbon-purple-902.png) center / 100% 100% no-repeat; display: grid; place-items: center; }
  .tagline span { color: #fff; font: 600 clamp(10px, 2.7vw, 16px) / 1 var(--font-round); white-space: nowrap; transform: translateY(-1px) rotate(-1.5deg); }
  .menu-toggle { grid-column: 2; grid-row: 1; align-self: center; width: 48px; height: 48px; border: 0; border-radius: 14px;
    background: #F2ECFB; color: var(--cta-purple); display: grid; place-items: center; cursor: pointer; }
  .menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after {
    display: block; width: 22px; height: 3px; border-radius: 2px; background: currentColor; content: ""; position: relative; transition: transform .2s ease, opacity .2s ease; }
  .menu-toggle__bars::before { position: absolute; top: -7px; }
  .menu-toggle__bars::after { position: absolute; top: 7px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }
  .tag { grid-column: 3; grid-row: 1 / span 2; margin-top: -14px; width: clamp(96px, 20vw, 150px); aspect-ratio: 220 / 225;
    background: url(../assets_homepage/opt/tag-yellow-412.png) center bottom / 100% 105% no-repeat; position: relative; }
  .tag__heart { position: absolute; left: 14%; top: 14%; width: 16%; height: 16%; color: var(--ink); }
  .tag p { position: absolute; inset: 22% 6% 14% 22%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
  .tag__s { display: block; font: 500 clamp(9px, 2.1vw, 14px) / 1.25 var(--font-sans); }
  .tag strong { display: block; font: 700 clamp(15px, 3.6vw, 24px) / 1.05 var(--font-round); color: var(--tag-navy); }

  .nav { display: none; grid-column: 1 / -1; grid-row: 3; margin: 12px calc(-1 * var(--gut)) 0; padding: 6px var(--gut) 14px;
    background: #fff; border-bottom: 1px solid #EEE8F7; box-shadow: 0 10px 24px rgba(40, 20, 90, .08); }
  .nav.is-open { display: block; }
  .nav ul { display: grid; gap: 2px; }
  .nav a { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 8px; border-radius: 12px;
    font: 600 17px / 1.2 var(--font-sans); color: var(--nav-ink); }
  .nav a:hover, .nav a[aria-current="page"] { background: #F5F0FC; }
  .nav a[aria-current="page"] { color: var(--nav-active); }
  .nav__icon { width: 26px; height: 26px; flex: none; color: var(--nav-active); }
  .nav__icon--yellow { color: var(--doodle-yellow); }
  .nav__icon--indigo { color: #3D3DB8; }
  .nav__icon--red { color: #E8452C; }

  /* ---- hero ---- */
  .hero { position: relative; display: grid; padding: 22px var(--gut) 8px; overflow: hidden; }
  .hero__title { text-align: center; font: 800 clamp(30px, 7.6vw, 64px) / 1.08 var(--font-display); }
  .hero__l1, .hero__l2 { display: block; }
  .hero__l1 { color: var(--headline-purple); }
  .hero__l2 { color: var(--headline-blue); }
  .hero__sub { text-align: center; margin-top: 10px; font: 600 clamp(17px, 3.2vw, 24px) / 1.3 var(--font-round); }
  .c-kids { color: var(--kids-purple); } .c-parents { color: var(--parents-blue); }
  .hero__dino, .hero__rocket, .dd { display: none; }

  .panel { position: relative; isolation: isolate; margin: 18px calc(-0.5 * var(--gut)) 0; padding: clamp(40px, 9vw, 64px) clamp(28px, 8vw, 70px); }
  .panel__splash { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; z-index: -1; }
  .panel__body { display: grid; justify-items: center; text-align: center; gap: 14px; }
  .panel__badge { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
  .panel__badge img { width: 70%; }
  .panel__badge svg { width: 62%; height: 62%; color: var(--star-gold); }
  .panel__title { color: #fff; font: 700 clamp(28px, 6.4vw, 46px) / 1.04 var(--font-round); }
  .ribbon { width: 100%; max-width: 470px; padding: 9px 30px; background: url(../assets_homepage/opt/ribbon-yellow-940.png) center / 100% 100% no-repeat; }
  .ribbon span { display: block; font: 600 clamp(14px, 3.4vw, 20px) / 1.2 var(--font-round); color: var(--ink); }
  .checks { display: grid; gap: 8px; justify-items: start; text-align: left; }
  .checks li { display: flex; align-items: center; gap: 12px; color: #fff; font: 500 clamp(16px, 3.6vw, 19px) / 1.3 var(--font-round); }
  .checks svg { width: 24px; height: 24px; flex: none; }
  .panel--color .checks svg { color: var(--purple-splash); }
  .panel--review .checks svg { color: var(--blue-splash); }
  .cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 26px;
    border-radius: 999px; background: #fff; font: 600 clamp(16px, 3.8vw, 21px) / 1.1 var(--font-round);
    box-shadow: 0 4px 14px rgba(20, 10, 60, .16); transition: transform .15s ease, box-shadow .15s ease; }
  .cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20, 10, 60, .22); }
  .panel--color .cta { color: var(--cta-purple); }
  .panel--review .cta { color: var(--cta-blue); }
  .cta__icon { width: 26px; height: 26px; flex: none; }
  .cta__icon--star { color: var(--star-gold); width: 28px; height: 28px; }
  .cta__arrow { width: 20px; height: 20px; flex: none; }

  .hero__photo { margin: 18px auto 0; width: min(100%, 720px); aspect-ratio: 859 / 454; overflow: hidden; }
  .hero__photo img { width: 100%; }
  /* order: headline, sub, coloring panel, photo, reviews panel */
  .hero__title { order: -3; } .hero__sub { order: -2; } .panel--color { order: -1; } .hero__photo { order: 0; } .panel--review { order: 1; }

  /* ---- categories ---- */
  .cats { position: relative; display: grid; grid-template-columns: 1fr; padding: 26px var(--gut) 30px; gap: 18px; }
  .cats__title { order: -2; display: flex; justify-content: center; align-items: center; gap: 12px; text-align: center;
    font: 700 clamp(22px, 4.6vw, 32px) / 1.15 var(--font-round); color: var(--navy); }
  .burst { width: 18px; height: 24px; color: var(--doodle-green); flex: none; }
  .cloud { position: relative; justify-self: center; width: min(200px, 48vw); order: -1; }
  .cloud img { width: 100%; }
  .cloud p { position: absolute; left: 0; top: 0; width: 82%; height: 70%; display: flex; flex-direction: column; justify-content: center; align-items: center;
    transform: rotate(-8deg); font: 600 clamp(18px, 4.6vw, 24px) / 1.2 var(--font-round); }
  .c1 { color: var(--sig-pink); } .c2 { color: var(--headline-blue); } .c3 { color: var(--headline-purple); }
  .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2.4vw, 22px); }
  .card { display: flex; flex-direction: column; height: 100%; background: #fff; overflow: hidden; border: 2px solid var(--bd); border-radius: 18px;
    transition: transform .15s ease, box-shadow .15s ease; }
  .card img { width: 100%; aspect-ratio: 150 / 128; object-fit: contain; padding: 10px 10px 6px; }
  .card span { display: grid; place-items: center; min-height: 40px; background: var(--bar); color: #fff; font: 600 clamp(16px, 3.4vw, 20px) / 1.1 var(--font-round); }
  .card:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 0, 0, .12); }
  .card--animals  { --bar: #5AB615; --bd: #8BA6D7; }
  .card--vehicles { --bar: #0175D1; --bd: #6E9FDB; }
  .card--dinos    { --bar: #9BCB1F; --bd: #ABD351; }
  .card--princess { --bar: #FA4E82; --bd: #F48FB0; }
  .card--space    { --bar: #6748BF; --bd: #B9ABE2; }
  .card--holidays { --bar: #FC7405; --bd: #EB7D45; }

  .promise { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(14px, 3vw, 26px); margin-top: 8px; }
  .promise__photo { width: clamp(120px, 24vw, 200px); max-width: none; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 3px solid var(--ring); }
  .promise__card { background: #fff; border-radius: 20px; border: 1px solid #EFEFEF; box-shadow: 0 3px 12px rgba(0, 0, 0, .07); padding: 18px 20px 18px 30px; }
  .promise__stars { display: flex; gap: 3px; color: var(--star-gold); }
  .promise__stars svg { width: 20px; height: 20px; }
  .promise__quote { position: relative; margin-top: 8px; font: 500 clamp(15px, 3.2vw, 17px) / 1.4 var(--font-sans); color: var(--quote-ink); }
  .promise__quote br { display: none; }
  .promise__quote::before { content: "\201C"; position: absolute; left: -13px; }
  .promise__quote::after { content: " \201D"; }
  .promise__sig { margin-top: 8px; display: flex; align-items: center; gap: 8px; font: 500 clamp(20px, 4.4vw, 24px) / 1 var(--font-script); color: var(--sig-pink); }
  .promise__sig svg { width: 28px; height: 28px; }
  .cats__cup { position: absolute; right: var(--gut); bottom: -14px; width: clamp(56px, 9vw, 90px); z-index: 2; }

  /* ---- trust band (icons have opaque cream interiors: keep the band cream) ---- */
  .trust { position: relative; background: var(--cream); margin: 10px 0 0; padding: clamp(28px, 5vw, 44px) var(--gut);
    border-radius: 44px 32px 0 0 / 22px 18px 0 0; }
  .trust ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(16px, 4vw, 40px); }
  .trust li { display: grid; grid-template-columns: clamp(48px, 9vw, 64px) 1fr; column-gap: 14px; align-items: start; }
  .trust img { grid-row: 1 / span 2; width: 100%; }
  .trust h3 { font: 600 clamp(17px, 3.4vw, 20px) / 1.2 var(--font-round); }
  .trust p { margin-top: 2px; font: 500 clamp(14px, 3vw, 16px) / 1.4 var(--font-sans); color: var(--body-ink); }
  .trust p br { display: none; }
  .trust--green h3 { color: var(--trust-green); } .trust--pink h3 { color: var(--trust-pink); }
  .trust--blue h3 { color: var(--trust-blue); } .trust--orange h3 { color: var(--trust-orange); }
}

/* tablet: keep the mascots, tucked beside the headline */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .hero__dino { display: block; position: absolute; left: -38px; top: 10px; width: 120px; z-index: 0; }
  .hero__rocket { display: block; position: absolute; right: 0; top: 4px; width: 104px; height: 150px;
    background: url(../assets_homepage/opt/rocket-518.png) left top / 136px auto no-repeat; }
  .hero__title, .hero__sub { padding-inline: 90px; }
}

/* phones */
@media (max-width: 599.98px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust ul { grid-template-columns: 1fr; }
  .promise { grid-template-columns: 1fr; justify-items: center; }
  .promise__card { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cta, .card, .menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after { transition: none; }
  .cta:hover, .card:hover { transform: none; }
}

/* ====================== FOOTER (all widths) ======================
   Content is verbatim from the live kivios.com footer. Not in the mockup. Light and playful (user request,
   2026-10-03): a cream wave flowing out of the trust band into a pale lilac sky, doodle stars in the page's
   own outline style, crayon-coloured link dots, and a little spaceship (A24, generated in the A03 rocket's
   style) flying a loop-the-loop along a dotted trail. New design, so it is held to WCAG AA.
   The ship and its trail live in ONE svg: <animateMotion><mpath> follows the very path that is drawn as
   the trail, so they cannot drift apart at any size. Reduced motion: the moving ship is swapped for a still
   one parked on the trail (pure CSS, no script). */
.site-footer {
  background: #F4EFFF;
  color: #2B1E76;
  font-family: var(--font-sans);
  position: relative;
}
.footer__wave svg { display: block; width: 100%; height: max(28px, calc(56 * var(--u))); }
.footer__wave path { fill: var(--cream); }
.footer__sky { position: relative; margin-top: max(-6px, calc(-10 * var(--u))); }
.sky { display: block; width: 100%; height: auto; overflow: hidden; }
.sky--compact { display: none; }
/* The route is invisible: it is what the ship follows (mpath) and what the guards measure. What you SEE is a
   breadcrumb trail - each dot lights up as the ship passes and fades out in place over ~6 dots of travel
   (docs/kivios/ref/gen-trail-dots.py), so it reads as a trail, not a track. */
.sky__trail { fill: none; stroke: none; }
.sky__star { color: #F5C518; }
.sky__star--p { color: #F0538A; }
.sky__star--b { color: #67B6F0; }
.sky__ship--still, .sky__dots--still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .sky__ship--moving, .sky__dots--moving { display: none; }
  .sky__ship--still, .sky__dots--still { display: inline; }
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: max(28px, calc(48 * var(--u)));
  padding: max(8px, calc(12 * var(--u))) var(--gut-f, max(24px, calc(120 * var(--u)))) max(32px, calc(44 * var(--u)));
}
.footer__logo { display: inline-block; transform: rotate(-2deg); transition: transform .2s ease; }
.footer__logo:hover { transform: rotate(0deg) scale(1.03); }
.footer__logo img { width: max(170px, calc(250 * var(--u))); max-width: 100%; }
.footer__brand p {
  margin-top: max(12px, calc(16 * var(--u))); max-width: 34ch;
  font: 500 max(15px, calc(18 * var(--u))) / 1.55 var(--font-sans); color: #463F6E;
}
.footer__col h2 {
  font: 700 max(18px, calc(24 * var(--u))) / 1.2 var(--font-round); color: #5825B2;
  margin-bottom: max(10px, calc(14 * var(--u)));
}
.footer__col ul { display: grid; gap: max(2px, calc(4 * var(--u))); }
.footer__col a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px;
  font: 600 max(15px, calc(18 * var(--u))) / 1.3 var(--font-sans); color: #2B1E76;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 2px;
  transition: text-decoration-color .15s ease, color .15s ease;
}
.footer__col a::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--dot, #5AB615);
  transition: transform .15s ease;
}
.footer__col li:nth-child(4n+1) a { --dot: #5AB615; }
.footer__col li:nth-child(4n+2) a { --dot: #0175D1; }
.footer__col li:nth-child(4n+3) a { --dot: #FA4E82; }
.footer__col li:nth-child(4n+4) a { --dot: #FC7405; }
.footer__col a:hover { color: #5825B2; text-decoration-color: #F0538A; }
.footer__col a:hover::before { transform: scale(1.4); }
.footer__copy {
  border-top: 2px dashed rgba(88, 37, 178, .22);
  margin: 0 var(--gut-f, max(24px, calc(120 * var(--u))));
  padding: max(18px, calc(24 * var(--u))) 0 max(24px, calc(32 * var(--u)));
  font: 500 max(14px, calc(16 * var(--u))) / 1.4 var(--font-sans); color: #57507C;
}
@media (max-width: 699.98px) {
  .sky--wide { display: none; }
  .sky--compact { display: block; }
}

@media (max-width: 1099.98px) {
  .site-footer { --gut-f: var(--gut); }
  .footer__inner { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
}
@media (max-width: 860px) {
  .footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 479.98px) {
  .footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
}
@media (prefers-reduced-motion: reduce) { .footer__col a, .footer__col a::before, .footer__logo { transition: none; } .footer__logo:hover { transform: rotate(-2deg); } }

/* ====================== RESPONSIVE IMAGES (pipeline/apply-responsive-images.py) ======================
   <picture> must not create a box: display:contents keeps every flex/grid/absolute layout keyed to the
   <img> exactly as before. Child-combinator rules match ELEMENTS, not boxes, so the two images that got
   position:absolute from `.hero > *` / `.cats > *` are given it explicitly. */
picture { display: contents; }
/* With <picture> display:contents, its <source> children become flex/grid items themselves (Chrome's UA sheet
   does not give <source> display:none). Each empty one took a grid cell - pushing the trust text into the icon
   column - and, in the gapped hero grid, an extra row + gap: +553px of page height at 390px. */
picture > source { display: none; }
@media (min-width: 1100px) { .hero__dino, .cats__cup { position: absolute; } }
.tagline { background-image: image-set(url(../assets_homepage/opt/ribbon-purple-902.webp) type("image/webp"), url(../assets_homepage/opt/ribbon-purple-902.png) type("image/png")); }
.ribbon { background-image: image-set(url(../assets_homepage/opt/ribbon-yellow-940.webp) type("image/webp"), url(../assets_homepage/opt/ribbon-yellow-940.png) type("image/png")); }
.tag { background-image: image-set(url(../assets_homepage/opt/tag-yellow-412.webp) type("image/webp"), url(../assets_homepage/opt/tag-yellow-412.png) type("image/png")); }
.hero__rocket { background-image: image-set(url(../assets_homepage/opt/rocket-518.webp) type("image/webp"), url(../assets_homepage/opt/rocket-518.png) type("image/png")); }