/* MathKidoo - the Parents page's own look (MG-544, V4 page 2; Raj 16 Oct 2026: premium and glossy, to the standard of pages 3 and 4).
   Only src/for-parents.html loads this file. It is a copy of the Schools page's language (mk-sch.css), kept separate on
   purpose so each selling page stands alone; nothing here is imported from or shared with another page.
   Plain CSS, self-hosted fonts (fonts/mks-fonts.css), no external host. Ground: deep navy to indigo with soft radial glows.
   Glass cards. Mango gold for the action and the found-and-filled moments, soft purple for the levels, amber only for a
   missing step. Nunito 900 for headlines, Source Sans 3 for reading.
   Motion is opt-in: mk-par.js adds html.par-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. */


/* ---------- tokens ---------- */
body.par {
  --p-bg0: #060918; --p-bg1: #0A0F30; --p-bg2: #120E44; --p-bg3: #0B0C2B;
  --p-text: #EEF0FF; --p-soft: #B8BEE3; --p-mute: #8C92BE; --p-dim: #5F6596;
  --p-gold: #FFC61A; --p-gold2: #FFB020; --p-gold-hi: #FFE08A;
  --p-violet: #8B5CF6; --p-lav: #B9A0FF; --p-indigo: #6366F1; --p-teal: #76E1CF; --p-sky: #72B8FF; --p-coral: #F3A796;
  --p-line: rgba(255, 255, 255, .12); --p-line-hi: rgba(255, 255, 255, .22);
  --p-glass: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .025));
  --p-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 60px -28px rgba(2, 3, 20, .9);
  --p-ease: cubic-bezier(.16, 1, .3, 1);
  --p-spring: cubic-bezier(.3, 1.45, .55, 1);
  --p-wrap: min(92vw, 1240px);
}
html { background: #060918; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (min-width: 1800px) { html { font-size: 112.5%; } body.par { --p-wrap: min(90vw, 1440px); } }
@media (min-width: 2400px) { html { font-size: 131.25%; } body.par { --p-wrap: min(88vw, 1720px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

*, *::before, *::after { box-sizing: border-box; }
body.par {
  margin: 0; min-width: 320px; overflow-x: hidden;
  font: 400 1.0625rem/1.6 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--p-text);
  background:
    radial-gradient(1200px 700px at 85% 22%, rgba(139, 92, 246, .13), transparent 70%),
    radial-gradient(1000px 800px at 8% 48%, rgba(99, 102, 241, .12), transparent 70%),
    radial-gradient(900px 700px at 90% 78%, rgba(255, 176, 32, .05), transparent 70%),
    linear-gradient(180deg, var(--p-bg0) 0%, var(--p-bg1) 22%, var(--p-bg2) 55%, var(--p-bg1) 80%, var(--p-bg3) 100%);
  -webkit-font-smoothing: antialiased;
}
body.par img, body.par svg { max-width: 100%; }
body.par .wrap { width: var(--p-wrap); margin: 0 auto; }
body.par a { color: inherit; }
body.par ::selection { background: rgba(255, 198, 26, .35); color: #fff; }
body.par main:focus { outline: none; }

/* ---------- skip link and the bar (the M mark only; the name is in its aria-label) ---------- */
body.par .mks-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--p-gold); color: #1B1306; font: 800 1rem 'Nunito', system-ui, sans-serif; text-decoration: none; }
body.par .mks-skip:focus { top: 12px; }
body.par .bar { position: sticky; top: 0; z-index: 50; background: rgba(7, 10, 32, .62); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid rgba(255, 255, 255, .07); }
body.par .bar-in { width: var(--p-wrap); margin: 0 auto; display: flex; align-items: center; gap: 12px; min-height: 64px; }
body.par .brand { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 12px; transition: transform .4s var(--p-spring), filter .3s; }
body.par .brand img { width: 40px; height: 40px; display: block; filter: drop-shadow(0 6px 14px rgba(139, 92, 246, .45)); }
@media (hover: hover) { body.par .brand:hover { transform: translateY(-1px) rotate(-4deg); } }
body.par .menu { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
body.par .menu::-webkit-scrollbar { display: none; }
body.par .menu a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--p-soft); text-decoration: none; font: 700 .95rem 'Nunito', system-ui, sans-serif; transition: color .2s, background .2s; }
@media (hover: hover) { body.par .menu a:hover { color: #fff; background: rgba(255, 255, 255, .06); } }
body.par .menu a[aria-current="page"] { color: #fff; background: rgba(255, 198, 26, .1); box-shadow: inset 0 0 0 1px rgba(255, 198, 26, .35); }
body.par .signin { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; color: #fff; text-decoration: none; font: 800 .95rem 'Nunito', system-ui, sans-serif; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--p-line-hi); transition: background .25s, box-shadow .25s, transform .4s var(--p-spring); }
@media (hover: hover) { body.par .signin:hover { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(185, 160, 255, .6), 0 0 24px -6px rgba(139, 92, 246, .7); transform: translateY(-1px); } }
@media (max-width: 560px) {
  body.par .bar-in { gap: 6px; min-height: 58px; }
  body.par .brand img { width: 34px; height: 34px; }
  body.par .menu { justify-content: flex-start; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
  body.par .menu a { padding: 0 8px; font-size: .88rem; }
  body.par .menu a[href="/"] { display: none; }
  body.par .signin { min-height: 44px; padding: 0 12px; font-size: .88rem; }
}
@media (max-width: 360px) { body.par .menu { mask-image: linear-gradient(90deg, transparent, #000 10%, #000 86%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 86%, transparent); } }
body.par :focus-visible { outline: 3px solid var(--p-gold-hi); outline-offset: 3px; border-radius: 10px; }

/* ---------- type ---------- */
body.par .par-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 800 .78rem/1.35 'Nunito', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--p-gold-hi); }
body.par .par-eyebrow::before { content: ""; flex: none; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--p-gold), rgba(255, 198, 26, 0)); }
body.par .is-centre .par-eyebrow { justify-content: center; }
body.par .p-nw { white-space: nowrap; }
body.par .par-h1 { margin: 0; font: 900 clamp(2.1rem, 1.2rem + 4.4vw, 4.6rem)/1.02 'Nunito', system-ui, sans-serif; letter-spacing: -.025em; color: #fff; text-wrap: balance; }
body.par .par-shine { background: linear-gradient(100deg, #FFF1BF 0%, #FFD24D 35%, #FFB020 70%, #FF9A3C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 26px rgba(255, 176, 32, .28)); }
body.par .par-h2 { margin: 0 0 .5em; font: 900 clamp(1.85rem, 1.15rem + 2.6vw, 3.2rem)/1.08 'Nunito', system-ui, sans-serif; letter-spacing: -.018em; color: #fff; text-wrap: balance; }
body.par .par-h3 { margin: 0 0 12px; font: 900 1.2rem/1.25 'Nunito', system-ui, sans-serif; color: #fff; }
body.par .par-body { margin: 0 0 .55em; font-size: 1.08rem; color: var(--p-soft); max-width: 40em; }
body.par .is-centre .par-body { margin-left: auto; margin-right: auto; }
body.par .par-gold-line { color: var(--p-gold-hi); font: 800 1.12rem/1.45 'Nunito', system-ui, sans-serif; }
body.par .par-small { margin: 14px 0 0; font-size: .88rem; color: var(--p-mute); }
body.par .par-tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font: 900 .68rem/1.2 'Nunito', system-ui, sans-serif; letter-spacing: .12em; color: var(--p-gold-hi); background: rgba(255, 198, 26, .1); box-shadow: inset 0 0 0 1px rgba(255, 198, 26, .38); }

/* ---------- buttons: spring lift, glow on hover and focus, press ---------- */
body.par .par-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border: 0; border-radius: 999px; font: 800 1.04rem/1.2 'Nunito', system-ui, sans-serif; text-align: center; text-decoration: none; cursor: pointer; overflow: hidden; transition: transform .45s var(--p-spring), box-shadow .3s ease, background-color .3s ease, color .2s; -webkit-tap-highlight-color: transparent; }
body.par .par-btn-gold { color: #1A1204; background: linear-gradient(180deg, #FFDF62 0%, #FFC61A 45%, #FFA916 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(150, 80, 0, .28), 0 0 0 1px rgba(255, 214, 102, .55), 0 14px 34px -12px rgba(255, 170, 30, .75); }
body.par .par-btn-gold::before { content: ""; position: absolute; inset: 1px 1px 52% 1px; z-index: -1; border-radius: 999px 999px 40% 40% / 999px 999px 18px 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); }
body.par .par-btn-gold::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); transition: left .7s var(--p-ease); }
body.par .par-btn-gold:focus-visible { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -3px 0 rgba(150, 80, 0, .28), 0 0 0 1px rgba(255, 224, 138, .9), 0 22px 44px -12px rgba(255, 170, 30, .85), 0 0 46px -6px rgba(255, 198, 26, .55); }
@media (hover: hover) { body.par .par-btn-gold:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -3px 0 rgba(150, 80, 0, .28), 0 0 0 1px rgba(255, 224, 138, .9), 0 22px 44px -12px rgba(255, 170, 30, .85), 0 0 46px -6px rgba(255, 198, 26, .55); } }
@media (hover: hover) { body.par .par-btn-gold:hover::after { left: 120%; } }
body.par .par-btn-line { color: #fff; background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px rgba(185, 160, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body.par .par-btn-line:focus-visible { transform: translateY(-3px); background: rgba(139, 92, 246, .16); box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .9), 0 16px 36px -14px rgba(139, 92, 246, .8), 0 0 34px -8px rgba(139, 92, 246, .6); }
@media (hover: hover) { body.par .par-btn-line:hover { transform: translateY(-3px); background: rgba(139, 92, 246, .16); box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .9), 0 16px 36px -14px rgba(139, 92, 246, .8), 0 0 34px -8px rgba(139, 92, 246, .6); } }
body.par .par-btn:active { transform: translateY(0) scale(.97); transition-duration: .12s; }
body.par .par-btn:disabled { cursor: not-allowed; opacity: .5; transform: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); background: transparent; }
body.par .par-btn-sm { min-height: 46px; padding: 0 20px; font-size: .96rem; }
body.par .par-quiet { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--p-soft); font: 700 1rem 'Nunito', system-ui, sans-serif; text-decoration: underline; text-decoration-color: rgba(184, 190, 227, .4); text-underline-offset: 5px; transition: color .2s, text-decoration-color .2s; }
@media (hover: hover) { body.par .par-quiet:hover { color: #fff; text-decoration-color: var(--p-gold); } }
@media (prefers-reduced-motion: reduce) {
  body.par .par-btn, body.par .par-card, body.par .signin, body.par .brand { transition: box-shadow .2s, background-color .2s, color .2s !important; }
  body.par .par-btn:hover, body.par .par-btn:focus-visible, body.par .par-btn:active, body.par .par-card:hover { transform: none !important; }
}

/* ---------- glass card ---------- */
body.par .par-card { position: relative; border-radius: 24px; background: var(--p-glass); box-shadow: var(--p-shadow), inset 0 0 0 1px var(--p-line); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); transition: transform .5s var(--p-spring), box-shadow .35s ease, background .35s ease; }
body.par .par-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .09), transparent 38%); }
@media (hover: hover) { html body.par .par-card:hover { transform: translateY(-5px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(185, 160, 255, .38), 0 34px 70px -30px rgba(2, 3, 20, .95), 0 0 50px -18px rgba(139, 92, 246, .55); } }
@media (hover: hover) { html body.par .par-card.par-still:hover { transform: none; } }

/* ---------- hero ---------- */
body.par .par-hero { position: relative; isolation: isolate; overflow: clip; padding: clamp(18px, 3.4vw, 64px) 0 clamp(24px, 3vw, 48px); }
body.par .par-hero-bg { position: absolute; inset: -12% 0 -40%; z-index: -1; pointer-events: none; }
body.par .p-glow { position: absolute; border-radius: 50%; filter: blur(60px); }
body.par .p-g1 { width: 62vw; height: 62vw; max-width: 980px; max-height: 980px; left: -20vw; top: -14vw; background: radial-gradient(circle, rgba(99, 102, 241, .5), rgba(99, 102, 241, 0) 65%); }
body.par .p-g2 { width: 54vw; height: 54vw; max-width: 900px; max-height: 900px; right: -16vw; top: 2vw; background: radial-gradient(circle, rgba(139, 92, 246, .45), rgba(139, 92, 246, 0) 65%); }
body.par .p-g3 { width: 34vw; height: 34vw; max-width: 560px; max-height: 560px; right: 12vw; top: 34%; background: radial-gradient(circle, rgba(255, 176, 32, .2), rgba(255, 176, 32, 0) 65%); }
body.par .p-stars { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 32% 62%, #C4B5FD, transparent), radial-gradient(1.4px 1.4px at 58% 12%, #fff, transparent), radial-gradient(1px 1px at 72% 44%, #FFE08A, transparent), radial-gradient(1.2px 1.2px at 88% 70%, #fff, transparent), radial-gradient(1px 1px at 22% 84%, #C4B5FD, transparent), radial-gradient(1px 1px at 46% 36%, #fff, transparent), radial-gradient(1.3px 1.3px at 94% 16%, #C4B5FD, transparent); background-size: 520px 420px; }
body.par .par-hero-grid { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 980px) { body.par .par-hero-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); } }
body.par .par-hero-copy { position: relative; z-index: 2; }
body.par .par-problem { margin: 20px 0 0; max-width: 34em; font-size: clamp(1.04rem, .98rem + .3vw, 1.2rem); line-height: 1.55; color: var(--p-soft); }
body.par .par-problem b { color: #fff; font-weight: 700; }
body.par .par-purpose { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 0; font: 800 clamp(1.14rem, 1.02rem + .5vw, 1.42rem)/1.35 'Nunito', system-ui, sans-serif; color: var(--p-gold-hi); text-shadow: 0 0 30px rgba(255, 198, 26, .25); text-wrap: balance; }
body.par .par-purpose::before { content: ""; flex: none; width: 4px; align-self: stretch; border-radius: 4px; background: linear-gradient(180deg, var(--p-gold), var(--p-gold2)); box-shadow: 0 0 14px rgba(255, 198, 26, .6); }
body.par .par-actions { display: grid; gap: 8px; margin-top: 26px; }
body.par .par-act-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
body.par .par-act-row.is-centre { justify-content: center; }
body.par .par-actions .par-act-row { margin-bottom: 4px; }
body.par .par-note { margin: 0; max-width: 36em; font-size: .92rem; line-height: 1.45; color: var(--p-mute); }
/* the quiet link and its own helper line share a small envelope, so the eye pairs them */
body.par .par-quiet::before, body.par .par-note-mail::before { content: ""; flex: none; width: 16px; height: 12px; margin-right: 9px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'><rect x='.9' y='.9' width='14.2' height='10.2' rx='1.6' fill='none' stroke='black' stroke-width='1.6'/><path d='M1.5 1.8 8 7l6.5-5.2' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'><rect x='.9' y='.9' width='14.2' height='10.2' rx='1.6' fill='none' stroke='black' stroke-width='1.6'/><path d='M1.5 1.8 8 7l6.5-5.2' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/></svg>") center / contain no-repeat; }
body.par .par-note-mail { display: flex; align-items: center; }
body.par .par-note-mail::before { width: 14px; height: 10px; opacity: .75; }
@media (max-width: 520px) {
  body.par .par-actions .par-btn { width: 100%; }
  body.par .par-problem { margin-top: 14px; }
}

/* hero picture B: one classroom, one evening */
body.par .par-reel { position: relative; z-index: 1; margin: 0; }
body.par .par-reel-card { position: relative; padding: clamp(10px, 1.6vw, 18px); border-radius: 30px; background: linear-gradient(160deg, rgba(99, 102, 241, .2), rgba(139, 92, 246, .08) 45%, rgba(255, 255, 255, .03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 100px -40px rgba(2, 3, 20, .95), 0 30px 120px -50px rgba(139, 92, 246, .75); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); }
body.par .par-reel-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 32%); }
body.par .par-reel-art { position: relative; }
body.par .par-reel-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; padding: 0 6px; font-size: .86rem; color: var(--p-mute); }
body.par .par-reel-cap { flex: 1 1 10em; min-width: 0; }
body.par .par-again { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; color: #fff; font: 800 .9rem 'Nunito', system-ui, sans-serif; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--p-line-hi); transition: transform .4s var(--p-spring), box-shadow .25s, background .25s; }
body.par .par-again::before { content: "\21BB"; font-size: 1.05rem; color: var(--p-gold); }
@media (hover: hover) { body.par .par-again:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 224, 138, .7), 0 0 26px -8px rgba(255, 198, 26, .7); } }
body.par .par-again[hidden] { display: none; }

/* hero base: the solution, the four gains, the how line */
body.par .par-hero-base { position: relative; z-index: 3; margin-top: clamp(30px, 4.5vw, 64px); }
body.par .par-solution { margin: 0; max-width: 46em; font-size: clamp(1.08rem, 1rem + .4vw, 1.28rem); line-height: 1.55; color: var(--p-text); }
body.par .par-gains { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 680px) { body.par .par-gains { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1180px) { body.par .par-gains { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
body.par .par-gain { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 20px; background: var(--p-glass); box-shadow: var(--p-shadow), inset 0 0 0 1px var(--p-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .5s var(--p-spring), box-shadow .3s; }
@media (hover: hover) { body.par .par-gain:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(185, 160, 255, .38), 0 30px 60px -30px rgba(2, 3, 20, .95), 0 0 40px -16px rgba(139, 92, 246, .55); } }
body.par .par-gain p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--p-soft); }
body.par .par-gain b { color: #fff; font-family: 'Nunito', system-ui, sans-serif; font-weight: 900; }
body.par .par-gain-pic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px var(--p-line); }
body.par .par-gain-pic svg { width: 40px; height: 40px; }
body.par .par-how { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--p-line); max-width: 52em; font-size: 1rem; color: var(--p-mute); }

/* ---------- sections ---------- */
body.par .par-sec { position: relative; padding: clamp(56px, 7.5vw, 116px) 0; }
body.par .par-deep { background: linear-gradient(180deg, rgba(99, 102, 241, 0) 0%, rgba(99, 102, 241, .07) 22%, rgba(139, 92, 246, .06) 78%, rgba(139, 92, 246, 0) 100%); }
body.par .par-deep::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(185, 160, 255, .35), rgba(255, 198, 26, .28), transparent); }
body.par .par-head.is-centre { text-align: center; max-width: 860px; margin: 0 auto; }
body.par .par-two { display: grid; gap: clamp(36px, 5vw, 84px); align-items: center; }
@media (min-width: 960px) { body.par .par-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* numbered lists */
body.par .par-num { list-style: none; counter-reset: on; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
body.par .par-num li { counter-increment: on; position: relative; padding-left: 46px; min-height: 32px; font-size: 1.06rem; line-height: 1.5; color: var(--p-soft); }
body.par .par-num li::before { content: counter(on); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font: 900 .9rem 'Nunito', system-ui, sans-serif; color: #1A1204; background: radial-gradient(circle at 32% 28%, #FFF3C4, #FFC61A 55%, #E69500); box-shadow: 0 6px 16px -6px rgba(255, 176, 32, .8); }

/* 1 - what is arithmetic: four glossy balls */
body.par .par-ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 20px); }
body.par .par-op { display: grid; justify-items: center; gap: 14px; padding: clamp(18px, 2.4vw, 28px) 12px; border-radius: 24px; background: var(--p-glass); box-shadow: var(--p-shadow), inset 0 0 0 1px var(--p-line); text-align: center; }
body.par .par-ball { display: grid; place-items: center; width: clamp(58px, 5vw, 76px); height: clamp(58px, 5vw, 76px); border-radius: 50%; font: 900 clamp(1.9rem, 1.6rem + 1vw, 2.5rem)/1 'Nunito', system-ui, sans-serif; color: #10123A; box-shadow: inset -6px -10px 18px rgba(0, 0, 0, .22), inset 6px 8px 14px rgba(255, 255, 255, .55), 0 14px 30px -12px var(--bc, rgba(0, 0, 0, .5)); transition: transform .5s var(--p-spring); }
@media (hover: hover) { body.par .par-op:hover .par-ball { transform: translateY(-6px) rotate(-8deg); } }
body.par .p-b1 { background: radial-gradient(circle at 32% 26%, #FFFFFF 0, #A8F0E2 26%, #76E1CF 55%, #33A893 100%); --bc: rgba(118, 225, 207, .7); }
body.par .p-b2 { background: radial-gradient(circle at 32% 26%, #FFFFFF 0, #B5D9FF 26%, #72B8FF 55%, #2F7FD6 100%); --bc: rgba(114, 184, 255, .7); }
body.par .p-b3 { background: radial-gradient(circle at 32% 26%, #FFFFFF 0, #DCCFFF 26%, #B9A0FF 55%, #7650E0 100%); --bc: rgba(185, 160, 255, .7); }
body.par .p-b4 { background: radial-gradient(circle at 32% 26%, #FFFFFF 0, #FFD3C8 26%, #F3A796 55%, #D2664E 100%); --bc: rgba(243, 167, 150, .7); }
body.par .par-op-sum { margin: 0; font: 900 clamp(1.15rem, 1rem + .7vw, 1.6rem)/1.2 'Nunito', system-ui, sans-serif; color: #fff; white-space: nowrap; }
body.par .par-ans { display: inline-block; color: var(--p-gold); }
html.par-motion body.par .par-ops.pre .par-ans { opacity: 0; transform: translateY(-18px) scale(.8); }
html.par-motion body.par .par-ops.pre .par-ans.hop { animation: p-hop .7s var(--p-spring) forwards; }
@keyframes p-hop { 0% { opacity: 0; transform: translateY(-18px) scale(.8); } 60% { opacity: 1; transform: translateY(3px) scale(1.06); } 100% { opacity: 1; transform: none; } }

/* 2 - the exam strip, its lines to one ball, and the sweep */
body.par .par-strip { position: relative; max-width: 1040px; margin: clamp(30px, 4vw, 48px) auto 0; }
body.par .par-strip-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
body.par .par-strip-lines path { fill: none; stroke: url(#parLine); stroke-width: 1.6; stroke-linecap: round; opacity: .8; transition: stroke-dashoffset .9s var(--p-ease); }
body.par .par-chips { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
body.par .par-chips li { padding: 11px 18px; border-radius: 999px; font: 800 clamp(.92rem, .86rem + .25vw, 1.06rem)/1.2 'Nunito', system-ui, sans-serif; color: #fff; background: linear-gradient(180deg, rgba(30, 34, 90, .92), rgba(18, 20, 60, .92)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 224, 138, .32), 0 12px 26px -14px rgba(0, 0, 0, .9); transition: color .5s, box-shadow .5s; }
html.par-motion body.par .par-strip.pre .par-chips li:not(.lit) { color: var(--p-dim); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 12px 26px -14px rgba(0, 0, 0, .9); }
body.par .par-root { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: clamp(70px, 9vw, 120px); }
body.par .par-root-ball { display: grid; place-items: center; width: clamp(128px, 11vw, 160px); height: clamp(128px, 11vw, 160px); border-radius: 50%; font: 900 clamp(1rem, .9rem + .4vw, 1.2rem) 'Nunito', system-ui, sans-serif; color: #1A1204; background: radial-gradient(circle at 34% 26%, #FFFBEA 0, #FFE08A 22%, #FFC61A 52%, #E08A00 100%); box-shadow: inset -10px -14px 26px rgba(150, 70, 0, .32), inset 8px 10px 18px rgba(255, 255, 255, .6), 0 0 0 10px rgba(255, 198, 26, .08), 0 0 80px -6px rgba(255, 176, 32, .6); }
body.par .par-strip-line { margin: clamp(36px, 4vw, 52px) auto 0; max-width: 30em; text-align: center; font: 800 clamp(1.25rem, 1.02rem + 1vw, 1.8rem)/1.35 'Nunito', system-ui, sans-serif; color: #fff; text-wrap: balance; }
body.par .par-sweep { background: linear-gradient(90deg, var(--p-gold), var(--p-gold2)) no-repeat 0 100% / 100% 4px; padding-bottom: 4px; transition: background-size 1s var(--p-ease); }
html.par-motion body.par .par-strip-line.pre .par-sweep { background-size: 0% 4px; }

body.par .par-p { margin: 0; font-size: 1.04rem; line-height: 1.55; color: var(--p-soft); }
body.par .par-lines3 { display: grid; gap: 12px 28px; max-width: 1080px; margin: clamp(28px, 4vw, 44px) auto 0; }
@media (min-width: 860px) { body.par .par-lines3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body.par .par-lines3 .par-body { margin: 0; padding: 14px 18px; border-left: 2px solid rgba(185, 160, 255, .4); max-width: none; }
body.par .par-lines3 .par-gold-line { border-left-color: var(--p-gold); }
body.par .par-col .par-h3 { margin-bottom: 8px; }
/* 10 - the honesty block */
body.par .par-honest { max-width: 860px; margin: 0 auto; padding: clamp(26px, 4vw, 48px); text-align: center; }
body.par .par-honest h2 { margin: 0 0 14px; font: 900 clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem)/1.15 'Nunito', system-ui, sans-serif; color: #fff; }
body.par .par-honest p { margin: 0 auto 18px; max-width: 40em; font-size: 1.08rem; color: var(--p-soft); }
body.par .par-honest p:last-child { margin-bottom: 0; }

/* 11 - the end band */
body.par .par-end { position: relative; isolation: isolate; overflow: clip; padding: clamp(80px, 11vw, 170px) 0; text-align: center; }
body.par .par-end-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 100%, rgba(255, 176, 32, .26), transparent 70%), radial-gradient(70% 80% at 50% 0%, rgba(139, 92, 246, .35), transparent 70%), linear-gradient(180deg, #120E44, #1A0F55); }
body.par .par-end-bg::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 224, 138, .5), transparent); }
body.par .par-end .par-h2 { max-width: 16em; margin-left: auto; margin-right: auto; font-size: clamp(2rem, 1.2rem + 3vw, 3.7rem); }
body.par .par-end-body { margin: 0 auto 28px; max-width: 34em; font-size: 1.16rem; color: var(--p-soft); }
body.par .par-end-under { margin: 24px 0 0; color: var(--p-mute); }

/* ---------- footer (the name lives here, beside the mark) ---------- */
body.par .foot { padding: 44px 0 110px; border-top: 1px solid rgba(255, 255, 255, .07); background: #05071A; color: var(--p-mute); }
body.par .foot .m { display: grid; justify-items: center; gap: 14px; text-align: center; }
body.par .foot img { width: 44px; height: 44px; }
body.par .mks-foot-contact { margin: 0; }
body.par .mks-foot-contact a { display: inline-flex; align-items: center; min-height: 44px; }
body.par .mks-foot-contact b { color: #fff; }
body.par .foot a { color: var(--p-soft); }
/* MG-BUG-030: 44px link boxes that sat 6px apart across and 4px down. 8px both ways, as the campaign asked. */
body.par .foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
body.par .foot-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; text-decoration: none; }
@media (hover: hover) { body.par .foot-links a:hover { color: #fff; } }
@media (min-width: 900px) { body.par .foot { padding-bottom: 48px; } }

/* ---------- the phone bar (mk-sticky.js shows it; phones only) ---------- */
body.par .mks-sticky-cta { display: none; position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 60; }
@media (max-width: 899px) { body.par .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 54px button plus 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 /for-parents computed a 0px bottom padding. */
@media (max-width: 899px) { body.par:has(.mks-sticky-cta) { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); } }
/* A phone on its side: the header plus a floating bar ate 41% of a 320px-tall screen, so the
   bar goes and the lane with it. KEEP THIS AFTER the .is-on rule above - it carries the same
   specificity, so the later rule wins and the same guard written before it does nothing. */
@media (max-height: 480px) and (orientation: landscape) {
  body.par .mks-sticky-cta, body.par .mks-sticky-cta.is-on { display: none; }
  body.par:has(.mks-sticky-cta) { padding-bottom: 0; }
}
body.par .mks-sticky-cta .btn { display: flex; align-items: center; justify-content: center; min-height: 54px; border-radius: 999px; color: #1A1204; text-decoration: none; font: 800 1.04rem 'Nunito', system-ui, sans-serif; background: linear-gradient(180deg, #FFDF62 0%, #FFC61A 45%, #FFA916 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 18px 40px -10px rgba(0, 0, 0, .8), 0 0 40px -10px rgba(255, 198, 26, .7); }

/* ---------- scroll reveals (once; only with html.par-motion) ---------- */
html.par-motion body.par [data-rv] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--p-ease), transform 1s var(--p-ease); transition-delay: calc(var(--i, 0) * 90ms); }
html.par-motion body.par [data-rv].in { opacity: 1; transform: none; }
html.par-motion body.par [data-rv].in.rv-done { transition: transform .5s var(--p-spring), box-shadow .35s ease, background .35s ease, opacity .3s; transition-delay: 0s; }
@media (hover: hover) { html.par-motion body.par .par-card[data-rv].in.rv-done:hover { transform: translateY(-5px); } }
@media (hover: hover) { html.par-motion body.par .par-still[data-rv].in.rv-done:hover { transform: none; } }


/* ---------- phones and small tablets (below 900 px; Raj 14 Oct, page 4: picture first, then the words, room to breathe) ----------
   The picture card comes first, full width, its poster scaled (never cropped) to at most 40 percent of the screen height.
   Then eyebrow, headline, problem, purpose; then the two actions together, then the two helper lines, each short and quiet.
   Desktop (900 px and wider) is untouched. */
@media (max-width: 899px) {
  body.par { --p-wrap: calc(100% - 32px); }
  body.par .par-hero { padding-block: 20px 24px; }
  body.par .par-hero-grid { gap: 16px; }
  body.par .par-reels { order: -1; }
  body.par .par-reel-card { padding: 8px; border-radius: 24px; }
  body.par .pr-svg { max-height: calc(40svh - 16px); }
  body.par .par-reel-foot { min-height: 40px; margin-top: 6px; padding: 0 4px; font-size: .8rem; }
  body.par .par-reel-cap { flex-basis: 7em; }
  body.par .par-again { min-height: 44px; padding: 0 14px; font-size: .86rem; }
  body.par .par-eyebrow { margin-bottom: 10px; }
  body.par .par-h1 { font-size: clamp(2rem, 1.25rem + 3.6vw, 2.9rem); line-height: 1.04; }
  body.par .par-problem { margin-top: 12px; font-size: 1.02rem; line-height: 1.5; }
  body.par .par-purpose { margin-top: 12px; font-size: 1.12rem; }
  body.par .par-actions { gap: 8px; margin-top: 18px; }
  body.par .par-actions .par-act-row { gap: 12px 16px; margin-bottom: 6px; }
  body.par .par-note { font-size: .82rem; line-height: 1.4; }
  body.par .par-hero-base { margin-top: 28px; }
}
@media (max-width: 520px) { body.par .par-actions .par-act-row { justify-content: center; } }

/* ========== the Parents page's own pieces ========== */
body.par .par-tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font: 900 .7rem/1.3 'Nunito', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--p-gold-hi); background: rgba(255, 198, 26, .1); box-shadow: inset 0 0 0 1px rgba(255, 198, 26, .38); }
body.par .is-centre { text-align: center; }
body.par .par-note.is-centre { margin: 12px auto 0; }
body.par .par-h3.is-centre { margin-bottom: 18px; }
body.par .par-num li b { color: #fff; font-weight: 700; }

/* the hero's helper line spells the real order, with small gold arrows */
body.par .par-flow .p-ar { display: inline-block; margin: 0 .2em; color: var(--p-gold); font-weight: 700; }

/* ---------- hero picture: your child on the road ---------- */
body.par .pr-svg { display: block; width: 100%; height: auto; max-height: min(74vh, 640px); max-height: min(74svh, 640px); margin: 0 auto; overflow: visible; }
body.par .pr-svg text { font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; fill: var(--p-text); transition: fill .45s ease; font-variant-numeric: tabular-nums; }
body.par .pr-bed { fill: none; stroke: rgba(185, 160, 255, .13); stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; }
body.par .pr-mid { fill: none; stroke: rgba(185, 160, 255, .3); stroke-width: 1.4; stroke-dasharray: 2 6; stroke-linecap: round; }
body.par .pr-lead { fill: none; stroke: rgba(255, 224, 138, .5); stroke-width: 1.4; stroke-dasharray: 3 4; }
body.par .pr-card { transition: opacity .4s ease; }
body.par .pr-svg .pr-ct { font-weight: 800; fill: var(--p-gold-hi); letter-spacing: .08em; text-transform: uppercase; }
body.par .pr-svg .pr-sum { font-weight: 900; fill: #fff; }
body.par .pr-svg .pr-ans { fill: var(--p-gold); }
body.par .pr-b circle:not([fill]) { fill: #232866; }
body.par .pr-b circle { stroke: rgba(185, 160, 255, .5); stroke-width: 1; transition: fill .3s ease, stroke .3s ease; }
body.par .pr-b.g circle { stroke: rgba(255, 244, 199, .75); }
body.par .pr-svg .pr-b text { font-weight: 900; fill: #9EA4D6; }
body.par .pr-svg .pr-b.g text { fill: #1A1204; }
body.par .pr-b.amber circle { fill: url(#prAmber); stroke: #FFE3C2; filter: drop-shadow(0 0 6px rgba(255, 159, 67, .9)); }
body.par .pr-b.nine circle { filter: drop-shadow(0 0 6px rgba(255, 198, 26, .85)); }
body.par .pr-ring { filter: drop-shadow(0 0 4px rgba(255, 224, 138, .8)); }
body.par .pr-tick { stroke: rgba(255, 224, 138, .6); stroke-width: 1.3; }
body.par .pr-svg .pr-lab { font-weight: 900; fill: #fff; }
body.par .pr-svg .pr-nine { fill: var(--p-gold-hi); }
body.par .par-reel.is-amber .pr-svg .pr-nine { fill: #FFB877; }
body.par .pr-svg .pr-gold { fill: var(--p-gold); }
body.par .pr-svg .pr-dim, body.par .pr-svg .pr-dim tspan { fill: var(--p-dim); }
body.par .pr-chk rect { fill: rgba(118, 225, 207, .12); stroke: rgba(118, 225, 207, .6); stroke-width: 1.2; }
body.par .pr-svg .pr-chk text { fill: #A8F0E2; font-weight: 900; }
body.par .par-reel-cap { color: var(--p-soft); }

/* ---------- 1 · the fingers-to-grid reel ---------- */
body.par .par-f2g { margin: clamp(36px, 5vw, 64px) 0 0; padding: clamp(16px, 2.4vw, 28px); }
body.par .f2-lanes { display: grid; gap: 14px; }
@media (min-width: 760px) { body.par .f2-lanes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px; } }
body.par .f2-lane { position: relative; display: grid; align-content: center; justify-items: center; gap: 14px; padding: clamp(16px, 2vw, 24px); border-radius: 20px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--p-line); }
body.par .f2-lh { margin: 0; font: 800 .78rem/1.3 'Nunito', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--p-soft); }
body.par .f2-hands { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
body.par .f2-hand { display: flex; gap: 5px; align-items: flex-end; }
body.par .f2-hand i { display: grid; place-items: end center; width: clamp(24px, 3vw, 32px); height: clamp(46px, 5.4vw, 58px); padding-bottom: 6px; border-radius: 999px 999px 10px 10px; font: 900 .86rem 'Nunito', system-ui, sans-serif; font-style: normal; color: #1E1450; background: linear-gradient(180deg, #E4DAFF, #B9A0FF); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 8px 18px -10px rgba(139, 92, 246, .9); transition: background .35s ease, color .35s ease, box-shadow .35s ease; }
body.par .f2-hand i:nth-child(1) { height: clamp(34px, 4vw, 42px); }
body.par .f2-hand i:nth-child(5) { height: clamp(38px, 4.4vw, 48px); }
body.par .f2-hand i.f2-on { color: #2A1500; background: linear-gradient(180deg, #FFE3C2, #FF9F43); }
body.par .f2-out { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px; border-radius: 999px; font: 800 .98rem 'Nunito', system-ui, sans-serif; color: #FFC58F; background: rgba(255, 159, 67, .1); box-shadow: inset 0 0 0 1px rgba(255, 159, 67, .5); transition: opacity .4s ease; }
body.par .f2-pause { display: inline-block; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
body.par .f2-grid { grid-template-columns: auto auto; align-items: center; justify-content: center; column-gap: clamp(64px, 7vw, 96px); }
body.par .f2-grid .f2-lh { grid-column: 1 / -1; }
body.par .f2-board { --bs: clamp(24px, 2.6vw, 28px); position: relative; display: block; margin: 0 58px; }
body.par .f2-balls { display: grid; grid-auto-flow: column; grid-template-rows: repeat(10, auto); gap: 4px 8px; }
body.par .f2-balls span { display: grid; place-items: center; width: var(--bs); height: var(--bs); border-radius: 50%; font: 900 .72rem 'Nunito', system-ui, sans-serif; color: var(--p-mute); background: #171B4C; box-shadow: inset 0 0 0 1px rgba(185, 160, 255, .22); transition: background .3s ease, color .3s ease, box-shadow .3s ease; }
body.par .f2-balls .st { color: #0C1238; background: radial-gradient(circle at 34% 28%, #E4FFF9, #76E1CF 55%, #2E9C88); box-shadow: none; }
body.par .f2-balls .tr, body.par .f2-balls .tn { color: #1E1450; background: radial-gradient(circle at 34% 28%, #F1EAFF, #B9A0FF 55%, #6D4FD0); box-shadow: none; }
body.par .f2-balls .tn { box-shadow: 0 0 0 2px rgba(255, 224, 138, .8); }
body.par .f2-balls .fin { color: #1A1204; background: radial-gradient(circle at 34% 28%, #FFF4C7, #FFC61A 50%, #D98A00); box-shadow: 0 0 16px -2px rgba(255, 198, 26, .8); }
body.par .f2-tok { display: none; }
body.par .f2-hop { display: inline-grid; place-items: center; min-width: 40px; padding: 3px 10px; border-radius: 999px; font: 900 .9rem 'Nunito', system-ui, sans-serif; color: var(--p-gold-hi); background: rgba(255, 198, 26, .1); box-shadow: inset 0 0 0 1px rgba(255, 198, 26, .45); transition: opacity .35s ease; }
body.par .f2-board .f2-hop { position: absolute; }
body.par .f2-board .f2-h1 { left: -56px; top: calc(8 * (var(--bs) + 4px) + var(--bs) / 2 - 13px); }
body.par .f2-board .f2-h2 { right: -56px; top: calc(2 * (var(--bs) + 4px) + var(--bs) / 2 - 13px); }
body.par .f2-sum { margin: 0; font: 900 clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem)/1.1 'Nunito', system-ui, sans-serif; color: #fff; white-space: nowrap; transition: opacity .4s ease, transform .5s var(--p-spring); }
body.par .f2-sum b { color: var(--p-gold); }
body.par .f2-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 14px; padding: 0 4px; }
body.par .f2-cap { font: 800 1.08rem/1.4 'Nunito', system-ui, sans-serif; color: var(--p-gold-hi); transition: opacity .5s ease; }
html.par-motion body.par .par-f2g .f2-hand i.p-off { color: var(--p-dim); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
html.par-motion body.par .par-f2g .f2-balls span.p-off { color: var(--p-mute); background: #171B4C; box-shadow: inset 0 0 0 1px rgba(185, 160, 255, .22); }
html.par-motion body.par .par-f2g .p-off.f2-out, html.par-motion body.par .par-f2g .p-off.f2-hop, html.par-motion body.par .par-f2g .p-off.f2-cap { opacity: 0; }
html.par-motion body.par .par-f2g .p-off.f2-sum { opacity: 0; transform: scale(.85); }
html.par-motion body.par .par-f2g.shake .f2-hands { animation: p-shake .4s ease-in-out; }
@keyframes p-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px) rotate(-2deg); } 75% { transform: translateX(5px) rotate(2deg); } }
html.par-motion body.par .par-f2g.playing .f2-tok { display: block; position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 3px #FFE08A, 0 0 22px 2px rgba(255, 198, 26, .8); }

/* ---------- 2 · where children get stuck ---------- */
body.par .par-stuck { margin: 0; padding: clamp(22px, 3vw, 36px); }
body.par .st-sum { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 .35em; margin: 0; font: 900 clamp(2rem, 1.4rem + 2.6vw, 3.4rem)/1.1 'Nunito', system-ui, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
body.par .st-q { display: none; color: var(--p-dim); }
body.par .st-a { color: var(--p-gold); text-shadow: 0 0 30px rgba(255, 198, 26, .35); transition: opacity .4s ease, transform .6s var(--p-spring); }
body.par .st-hint { width: fit-content; margin: 14px auto 0; padding: 6px 16px; border-radius: 999px; font: 800 1rem 'Nunito', system-ui, sans-serif; color: var(--p-gold-hi); background: rgba(255, 198, 26, .08); box-shadow: inset 0 0 0 1px rgba(255, 224, 138, .4); transition: color .4s, background .4s, box-shadow .4s; }
body.par .st-road { margin-top: clamp(22px, 3vw, 34px); }
body.par .st-svg { display: block; width: 100%; height: auto; overflow: visible; }
body.par .st-svg text { font-family: 'Nunito', system-ui, sans-serif; }
body.par .st-track { stroke: rgba(255, 255, 255, .12); stroke-width: 2; }
body.par .st-b {  stroke: rgba(185, 160, 255, .45); stroke-width: 1; }
body.par .st-b.st-sure { stroke: rgba(255, 255, 255, .4); }
body.par .st-miss { stroke: #FFF4C7; stroke-width: 1.2; filter: drop-shadow(0 0 6px rgba(255, 198, 26, .8)); }
body.par .st-lead { stroke: rgba(255, 224, 138, .6); stroke-width: 1.3; stroke-dasharray: 3 3; }
body.par .st-pill { fill: rgba(255, 198, 26, .12); stroke: rgba(255, 224, 138, .6); stroke-width: 1.2; transition: fill .4s, stroke .4s; }
body.par .st-svg .st-lab { font-weight: 900; fill: var(--p-gold-hi); }
body.par .st-svg .st-small { font-weight: 700; fill: var(--p-mute); }
body.par .par-stuck.is-amber .st-pill { fill: rgba(255, 159, 67, .14); stroke: rgba(255, 159, 67, .75); }
body.par .par-stuck.is-amber .st-svg .st-lab { fill: #FFB877; }
body.par .par-stuck.is-amber .st-miss { fill: url(#stAmber); filter: drop-shadow(0 0 7px rgba(255, 159, 67, .9)); }
body.par .par-stuck.hint-amber .st-hint { color: #FFC58F; background: rgba(255, 159, 67, .14); box-shadow: inset 0 0 0 1px rgba(255, 159, 67, .7), 0 0 26px -6px rgba(255, 159, 67, .8); }
html.par-motion body.par .par-stuck.pre .st-a { opacity: 0; transform: translateY(-12px) scale(.85); }
html.par-motion body.par .par-stuck.pre .st-q { display: inline; }
html.par-motion body.par .par-stuck.pre .st-ring, html.par-motion body.par .par-stuck.pre:not(.is-amber):not(.found) .st-lead, html.par-motion body.par .par-stuck.pre:not(.is-amber):not(.found) .st-pill, html.par-motion body.par .par-stuck.pre:not(.is-amber):not(.found) .st-lab { opacity: 0; }
html.par-motion body.par .par-stuck.pre:not(.is-amber):not(.found) .st-miss { fill: #262B6A; filter: none; stroke: rgba(185, 160, 255, .45); }
html.par-motion body.par .par-stuck.found .st-ring { opacity: 1; }
body.par .st-ring, body.par .st-lead, body.par .st-pill, body.par .st-svg .st-lab { transition: opacity .4s ease, fill .4s, stroke .4s; }

/* ---------- 3 · the exam strip's two lines ---------- */
body.par .par-lines2 { display: grid; gap: 12px 28px; max-width: 900px; margin: clamp(28px, 4vw, 44px) auto 0; }
@media (min-width: 760px) { body.par .par-lines2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.par .par-lines2 .par-body { margin: 0; padding: 14px 18px; border-left: 2px solid rgba(185, 160, 255, .4); max-width: none; }
body.par .par-lines2 .par-gold-line { border-left-color: var(--p-gold); }

/* ---------- 4 · two packages ---------- */
body.par .par-pk2 { display: grid; gap: clamp(16px, 2.4vw, 28px); margin-top: clamp(30px, 4vw, 52px); }
@media (min-width: 980px) { body.par .par-pk2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.par .par-pkc { display: flex; flex-direction: column; gap: 20px; padding: clamp(20px, 2.6vw, 32px); }
body.par .par-pkc > .par-h3 { margin: 0; font-size: clamp(1.4rem, 1.2rem + .6vw, 1.8rem); }
body.par .par-pkc-gold { box-shadow: var(--p-shadow), inset 0 0 0 1px rgba(255, 198, 26, .32), 0 0 60px -26px rgba(255, 198, 26, .55); }
body.par .par-pk-act { display: grid; justify-items: start; gap: 10px; margin-top: auto; }
body.par .tg { display: grid; gap: 12px; }
body.par .tg-line { margin: 0; font: 900 clamp(1.3rem, 1.1rem + .8vw, 1.7rem)/1.2 'Nunito', system-ui, sans-serif; color: var(--p-gold); font-variant-numeric: tabular-nums; }
body.par .tg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.par .tg-chips button { min-width: 44px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer; font: 900 .9rem 'Nunito', system-ui, sans-serif; color: var(--p-soft); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--p-line-hi); transition: background .25s, color .25s, box-shadow .25s, transform .35s var(--p-spring); }
@media (hover: hover) { body.par .tg-chips button:hover { color: #fff; transform: translateY(-2px); } }
body.par .tg-chips button[aria-pressed="true"] { color: #1A1204; background: linear-gradient(180deg, #FFDF62, #FFB020); box-shadow: 0 6px 18px -8px rgba(255, 176, 32, .9); }
body.par .tg-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(10, auto); grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; padding: 10px; border-radius: 16px; background: rgba(5, 8, 30, .45); box-shadow: inset 0 0 0 1px var(--p-line); }
body.par .tg-grid i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font: 800 clamp(.42rem, .3rem + .32vw, .62rem)/1 'Nunito', system-ui, sans-serif; font-style: normal; color: #6F75A8; background: #151948; transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .4s var(--p-spring); }
body.par .tg-grid i.on { color: #1A1204; background: radial-gradient(circle at 34% 28%, #FFF4C7, #FFC61A 55%, #D98A00); box-shadow: 0 0 10px -2px rgba(255, 198, 26, .8); }
body.par .tg-grid i.hit { transform: scale(1.3); }
body.par .tg-note { margin: 0; }
body.par .t7 { padding: 6px 4px 0; }
body.par .t7-svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; overflow: visible; }
body.par .t7-svg text { font-family: 'Nunito', system-ui, sans-serif; font-weight: 900; }
body.par .t7-chip rect { fill: rgba(30, 34, 90, .95); stroke: rgba(255, 224, 138, .45); stroke-width: 1.2; transition: stroke .3s, fill .3s; }
body.par .t7-svg .t7-chip text { fill: #fff; }
body.par .t7-chip.hot rect { fill: rgba(255, 198, 26, .18); stroke: #FFE08A; }
body.par .t7-line { fill: none; stroke: rgba(255, 224, 138, .7); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--p-ease); }
body.par .t7-track { stroke: rgba(255, 255, 255, .12); stroke-width: 2; }
body.par .t7-svg .t7-ball text { fill: #1E1450; }
body.par .t7-ball.g circle { filter: drop-shadow(0 0 8px rgba(255, 198, 26, .9)); }
body.par .t7-svg .t7-ball.g text { fill: #1A1204; }
body.par .t7-svg .t7-lab { fill: var(--p-gold-hi); transition: opacity .4s; }
html.par-motion body.par .t7.pre .t7-line:not(.on) { stroke-dashoffset: 1; }
html.par-motion body.par .t7.pre .t7-lab { opacity: 0; }

/* the full worked sum: Play on its first frame, about 30 seconds, never on its own */
body.par .par-ws { margin-top: clamp(20px, 3vw, 32px); padding: clamp(20px, 2.8vw, 36px); }
body.par .ws-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; }
body.par .ws-head .par-h3 { margin: 0; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.75rem); }
body.par .ws-tag { margin: 0; font: 800 1rem 'Nunito', system-ui, sans-serif; color: var(--p-gold-hi); }
body.par .ws-screen { display: none; }
body.par .ws-list { list-style: none; counter-reset: ws; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
body.par .ws-list li { counter-increment: ws; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 14px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--p-line); transition: opacity .45s ease, background .45s ease, box-shadow .45s ease; }
body.par .ws-list li::before { content: counter(ws); grid-row: 1 / span 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 900 .9rem 'Nunito', system-ui, sans-serif; color: #fff; background: linear-gradient(145deg, #A78BFA, #6D28D9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
body.par .ws-lv { font: 800 .78rem/1.3 'Nunito', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--p-lav); }
body.par .ws-ln { font: 900 clamp(1.1rem, 1rem + .6vw, 1.45rem)/1.3 'Nunito', system-ui, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
body.par .ws-ln.ws-fin { color: var(--p-gold); }
body.par .ws-r { font-size: 1rem; line-height: 1.5; color: var(--p-soft); }
body.par .ws-end { margin: 16px 0 0; font: 800 1.1rem/1.45 'Nunito', system-ui, sans-serif; color: var(--p-gold-hi); text-align: center; }
body.par .ws-ctl { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
body.par .ws-ctl:has(> [hidden] + [hidden]) { display: none; }
html.par-motion body.par .ws-screen { position: relative; display: grid; justify-items: center; align-content: center; gap: 12px; min-height: clamp(250px, 26vw, 320px); margin-top: 20px; padding: 22px 16px; border-radius: 22px; background: radial-gradient(120% 90% at 50% 0%, rgba(139, 92, 246, .22), rgba(10, 13, 46, .6) 70%); box-shadow: inset 0 0 0 1px var(--p-line-hi); overflow: hidden; }
body.par .ws-big { margin: 0; text-align: center; font: 900 clamp(1.5rem, 1rem + 2.6vw, 2.9rem)/1.15 'Nunito', system-ui, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
body.par .ws-big .hot { padding: 0 .12em; border-radius: 12px; color: #1A1204; background: linear-gradient(180deg, #FFE08A, #FFB020); box-shadow: 0 0 22px -2px rgba(255, 198, 26, .7); }
body.par .ws-big.fin { color: var(--p-gold); text-shadow: 0 0 34px rgba(255, 198, 26, .45); font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.2rem); }
body.par .ws-big.sw, body.par .ws-rule.sw { animation: p-fade .5s var(--p-ease); }
@keyframes p-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body.par .ws-rule { margin: 0; max-width: 34em; min-height: 2.9em; text-align: center; font: 800 clamp(1rem, .94rem + .3vw, 1.2rem)/1.45 'Nunito', system-ui, sans-serif; color: var(--p-gold-hi); }
body.par .ws-scene { position: relative; width: 100%; min-height: 86px; }
body.par .sc { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; }
body.par .ws-screen[data-sc="hop"] .sc-hop, body.par .ws-screen[data-sc="house"] .sc-house, body.par .ws-screen[data-sc="tens"] .sc-tens, body.par .ws-screen[data-sc="lift"] .sc-lift { opacity: 1; visibility: visible; transition: opacity .4s ease; }
body.par .sc-hop { flex-wrap: wrap; }
body.par .sc-hop i { display: grid; place-items: center; width: clamp(26px, 3.4vw, 38px); height: clamp(26px, 3.4vw, 38px); border-radius: 50%; font: 900 clamp(.62rem, .5rem + .4vw, .82rem) 'Nunito', system-ui, sans-serif; font-style: normal; color: var(--p-mute); background: #171B4C; box-shadow: inset 0 0 0 1px rgba(185, 160, 255, .25); transition: background .25s, color .25s, transform .35s var(--p-spring); }
body.par .sc-hop i.on { color: #1E1450; background: radial-gradient(circle at 34% 28%, #F1EAFF, #B9A0FF 55%, #6D4FD0); transform: translateY(-4px); }
body.par .sc-hop i.on:last-child { color: #1A1204; background: radial-gradient(circle at 34% 28%, #FFF4C7, #FFC61A 55%, #D98A00); box-shadow: 0 0 16px rgba(255, 198, 26, .8); }
body.par .sc-house { gap: 8px; }
body.par .hs { position: relative; display: grid; justify-items: center; gap: 4px; }
body.par .hs em { font: 800 .62rem 'Nunito', system-ui, sans-serif; font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--p-mute); }
body.par .hs b { display: grid; place-items: center; width: clamp(44px, 5vw, 58px); height: clamp(48px, 5.4vw, 62px); border-radius: 12px 12px 8px 8px; font: 900 clamp(1.4rem, 1.1rem + 1vw, 2rem) 'Nunito', system-ui, sans-serif; color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--p-line-hi); }
body.par .hs b.slide { animation: p-slide .6s var(--p-ease); }
body.par .hs b.drop { color: var(--p-gold); box-shadow: inset 0 0 0 1.5px rgba(255, 224, 138, .7), 0 0 22px -4px rgba(255, 198, 26, .7); animation: p-drop .6s var(--p-spring) .35s backwards; }
@keyframes p-slide { from { transform: translateX(calc(clamp(44px, 5vw, 58px) + 8px)); } to { transform: none; } }
@keyframes p-drop { from { opacity: 0; transform: translateY(-36px); } to { opacity: 1; transform: none; } }
body.par .sc-tens { gap: 14px; }
body.par .tn-h { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 12px; font: 900 1.05rem 'Nunito', system-ui, sans-serif; color: #1E1450; background: linear-gradient(145deg, #E4DAFF, #8B5CF6); transition: opacity .4s, transform .5s var(--p-ease); }
body.par .tn-t { display: flex; gap: 4px; }
body.par .tn-t i { display: grid; place-items: end center; width: 14px; height: 64px; padding-bottom: 3px; border-radius: 6px; font: 900 .5rem 'Nunito', system-ui, sans-serif; font-style: normal; color: #1E1450; background: linear-gradient(180deg, #DCCFFF, #8B5CF6); opacity: 0; transform: translateX(-30px) scaleY(.6); transition: opacity .3s, transform .45s var(--p-spring); }
body.par .sc-tens.go .tn-h { opacity: .25; transform: scale(.85); }
body.par .sc-tens.go .tn-t i { opacity: 1; transform: none; }
body.par .sc-tens .tn-t i:nth-child(n) { transition-delay: calc(var(--k, 0) * 60ms); }
body.par .sc-lift { justify-content: center; }
body.par .lf-shaft { position: relative; display: flex; flex-direction: row-reverse; gap: 3px; }
body.par .lf-shaft i { display: grid; place-items: center; min-width: clamp(34px, 5.6vw, 64px); height: 40px; padding: 0 4px; border-radius: 10px; font: 900 clamp(.66rem, .54rem + .4vw, .9rem) 'Nunito', system-ui, sans-serif; font-style: normal; color: var(--p-soft); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--p-line); }
body.par .lf-shaft i:nth-child(7) { color: var(--p-gold-hi); box-shadow: inset 0 0 0 1px rgba(255, 224, 138, .5); }
body.par .lf-car { position: absolute; left: 0; top: 50%; width: clamp(34px, 5.6vw, 64px); height: 48px; margin: -24px 0 0; border-radius: 12px; box-shadow: 0 0 0 3px #FFE08A, 0 0 22px rgba(255, 198, 26, .7); pointer-events: none; transition: transform .45s var(--p-ease); }
body.par .ws-play { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 14px; border: 0; cursor: pointer; font: 900 1.4rem 'Nunito', system-ui, sans-serif; color: #fff; background: radial-gradient(circle at 50% 55%, rgba(10, 13, 46, .25), rgba(10, 13, 46, .7)); }
body.par .ws-tri { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(180deg, #FFDF62, #FFC61A 45%, #FFA916); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 10px rgba(255, 198, 26, .14), 0 18px 40px -12px rgba(255, 170, 30, .9); transition: transform .45s var(--p-spring), box-shadow .3s; }
body.par .ws-tri::after { content: ""; margin-left: 6px; border-style: solid; border-width: 15px 0 15px 24px; border-color: transparent transparent transparent #1A1204; }
body.par .ws-play:focus-visible .ws-tri { transform: scale(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 14px rgba(255, 198, 26, .18), 0 22px 48px -12px rgba(255, 170, 30, 1); }
@media (hover: hover) { body.par .ws-play:hover .ws-tri { transform: scale(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 14px rgba(255, 198, 26, .18), 0 22px 48px -12px rgba(255, 170, 30, 1); } }
body.par .ws-play[hidden] { display: none; }
html.par-motion body.par .par-ws.pre .ws-list li:not(.lit) { opacity: .38; }
html.par-motion body.par .par-ws.pre .ws-end:not(.lit) { opacity: .38; }
body.par .ws-list li.now { background: rgba(255, 198, 26, .07); box-shadow: inset 0 0 0 1px rgba(255, 224, 138, .5); }

/* ---------- 5 · the starting check: two screens ---------- */
body.par .par-phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); max-width: 520px; margin: 0 auto; width: 100%; }
body.par .par-phone { padding: 9px; border-radius: 34px; background: linear-gradient(160deg, rgba(185, 160, 255, .3), rgba(255, 255, 255, .05)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 40px 80px -36px rgba(2, 3, 20, 1), 0 0 60px -30px rgba(139, 92, 246, .8); }
body.par .par-phone:nth-child(2) { transform: translateY(28px); }
body.par .ph-in { display: grid; align-content: start; gap: 12px; min-height: clamp(280px, 30vw, 360px); padding: 28px 16px 18px; border-radius: 26px; background: linear-gradient(180deg, #FFFDF7, #F6F1E6); color: #12153A; }
body.par .ph-eb { margin: 0; font: 800 .7rem/1.3 'Nunito', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6D5BD0; }
body.par .ph-h { margin: 0; font: 900 clamp(1.05rem, .9rem + .6vw, 1.35rem)/1.2 'Nunito', system-ui, sans-serif; color: #12153A; }
body.par .ph-p { margin: 0; font-size: .86rem; line-height: 1.4; color: #4A4F7A; }
body.par .ph-dk { justify-self: start; margin-top: auto; padding: 8px 12px; border-radius: 999px; font: 800 .8rem 'Nunito', system-ui, sans-serif; color: #12153A; background: #fff; box-shadow: inset 0 0 0 1.5px #C9C2EA; }
body.par .ph-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0; padding: 10px; border-radius: 14px; font: 800 .86rem/1.3 'Nunito', system-ui, sans-serif; color: #12153A; background: #fff; box-shadow: 0 1px 0 #E6E0F5; transition: opacity .4s ease, transform .5s var(--p-spring); }
body.par .ph-row i { flex: none; width: 14px; height: 14px; border-radius: 50%; }
body.par .ph-row i:last-of-type { margin-right: 4px; }
body.par .ph-sure i { background: radial-gradient(circle at 34% 28%, #E4FFF9, #76E1CF 55%, #2E9C88); }
body.par .ph-again i { background: radial-gradient(circle at 34% 28%, #FFE3C2, #FF9F43 55%, #C9620F); }
body.par .ph-start { background: linear-gradient(180deg, #FFE68F, #FFC61A); }
body.par .ph-start i { background: radial-gradient(circle at 34% 28%, #FFFFFF, #FFF4C7 40%, #D98A00); }
html.par-motion body.par .par-phones.pre .ph-row:not(.on) { opacity: 0; transform: translateY(10px); }

/* ---------- 6 · the week strip ---------- */
body.par .par-two-top { align-items: start; }
body.par .par-week { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { body.par .par-week { grid-template-columns: 1.5fr .7fr .7fr 1.2fr 1.2fr; gap: 14px; } }
body.par .wk-day { display: grid; grid-template-rows: auto 1fr; gap: 10px; transition: opacity .5s ease, transform .6s var(--p-spring); }
body.par .wk-chip { justify-self: start; padding: 6px 14px; border-radius: 999px; font: 900 .82rem 'Nunito', system-ui, sans-serif; letter-spacing: .04em; color: #fff; background: linear-gradient(145deg, #A78BFA, #6D28D9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 10px 22px -10px rgba(139, 92, 246, .9); }
body.par .wk-gold .wk-chip { color: #1A1204; background: linear-gradient(145deg, #FFE08A, #FFB020); }
body.par .wk-quiet .wk-chip { color: var(--p-soft); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--p-line-hi); }
body.par .wk-frame { display: grid; align-content: start; gap: 10px; padding: 18px; border-radius: 20px; }
body.par .wk-step { margin: 0; font: 900 1.1rem 'Nunito', system-ui, sans-serif; color: #fff; }
body.par .wk-hops { display: block; width: 100%; max-width: 240px; height: auto; overflow: visible; }
body.par .wk-arc { fill: none; stroke: rgba(255, 224, 138, .55); stroke-width: 1.4; stroke-dasharray: 3 3; }
body.par .wk-dots circle { fill: #B9A0FF; }
body.par .wk-dots circle.g { fill: #FFC61A; filter: drop-shadow(0 0 6px rgba(255, 198, 26, .8)); }
body.par .wk-hops text { font: 900 12px 'Nunito', system-ui, sans-serif; fill: var(--p-gold); }
body.par .wk-say { margin: 0; padding: 10px 14px; border-radius: 16px 16px 16px 4px; font: 800 1rem/1.35 'Nunito', system-ui, sans-serif; color: #12153A; background: linear-gradient(180deg, #FFFFFF, #ECE6FF); }
body.par .wk-q { margin: 0; font: 800 .95rem/1.4 'Nunito', system-ui, sans-serif; color: var(--p-mute); }
body.par .wk-card { justify-self: start; margin: 0; padding: 12px 18px; border-radius: 14px; font: 900 1.5rem 'Nunito', system-ui, sans-serif; color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(185, 160, 255, .45); }
body.par .wk-later { margin: 0; font: 800 .95rem/1.4 'Nunito', system-ui, sans-serif; color: var(--p-gold-hi); transition: opacity .4s ease; }
body.par .wk-reflex { display: flex; align-items: center; gap: 12px; margin: 0; font: 900 1.5rem 'Nunito', system-ui, sans-serif; color: #fff; }
body.par .wk-reflex b { color: var(--p-gold); }
html.par-motion body.par .par-week.pre .wk-day:not(.on) { opacity: 0; transform: translateY(-26px); }
html.par-motion body.par .par-week.pre .wk-later:not(.on) { opacity: 0; }

/* ---------- 7 · what you see: the tree and the minutes a day ---------- */
body.par .par-see { display: grid; gap: 16px; }
body.par .par-tree { margin: 0; padding: clamp(18px, 2.4vw, 28px); background: radial-gradient(110% 80% at 50% 0%, rgba(99, 102, 241, .25), rgba(10, 13, 46, .3) 70%), var(--p-glass); }
body.par .gt-top { margin: 0 0 4px; font: 900 1.1rem 'Nunito', system-ui, sans-serif; color: #fff; text-align: center; }
body.par .gt-svg { display: block; width: 100%; max-width: 280px; max-height: 360px; height: auto; margin: 0 auto; overflow: visible; }
body.par .gt-svg text { font-family: 'Nunito', system-ui, sans-serif; font-weight: 900; fill: #0C1238; }
body.par .gt-climb text { fill: var(--p-dim); }
body.par .gt-ball circle { stroke: rgba(255, 255, 255, .35); stroke-width: 1.1; transition: fill .35s ease; }
body.par .gt-climb circle { stroke: rgba(185, 160, 255, .35); }
body.par .gt-miss circle { filter: drop-shadow(0 0 6px rgba(255, 159, 67, .85)); }
body.par .gt-trunk path { fill: none; stroke: #B9A0FF; stroke-opacity: .55; stroke-width: 6; stroke-linecap: round; }
body.par .gt-key { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font: 800 .95rem 'Nunito', system-ui, sans-serif; color: #fff; }
body.par .gt-key li { display: inline-flex; align-items: center; gap: 8px; transition: opacity .4s ease, color .4s ease; }
body.par .gt-key li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; }
body.par .k-sure::before { background: #76E1CF; }
body.par .k-miss::before { background: #FF9F43; }
body.par .k-climb::before { background: #1A1E50; box-shadow: inset 0 0 0 1px rgba(185, 160, 255, .6); }
html.par-motion body.par .par-see.pre .gt-ball.gt-sure:not(.on) circle, html.par-motion body.par .par-see.pre .gt-ball.gt-miss:not(.on) circle { fill: #1A1E50; filter: none; }
html.par-motion body.par .par-see.pre .gt-key li:not(.on) { color: var(--p-dim); }
body.par .par-mins { padding: 18px 20px; }
body.par .mn-h { margin: 0 0 12px; font: 800 .82rem 'Nunito', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--p-soft); }
body.par .mn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.par .mn-chips span { padding: 8px 14px; border-radius: 999px; font: 800 .9rem 'Nunito', system-ui, sans-serif; color: var(--p-soft); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--p-line-hi); }
body.par .mn-chips .on { color: #1A1204; background: linear-gradient(180deg, #FFDF62, #FFB020); box-shadow: 0 6px 18px -8px rgba(255, 176, 32, .9); }
html.par-motion body.par .par-see.glow .mn-chips .on { animation: p-glow 1s ease-out; }
@keyframes p-glow { 0% { box-shadow: 0 0 0 0 rgba(255, 198, 26, .8); } 100% { box-shadow: 0 0 0 16px rgba(255, 198, 26, 0); } }
@media (min-width: 640px) and (max-width: 959px) { body.par .par-see { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

/* ---------- 8 · own time ---------- */
body.par .par-own { margin: 0; padding: clamp(18px, 2.4vw, 28px); }
body.par .ot-top { margin: 0 0 6px; }
body.par .ot-svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; overflow: visible; }
body.par .ot-svg text { font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; fill: var(--p-soft); }
body.par .ot-svg .ot-me { fill: #fff; font-weight: 900; }
body.par .ot-svg .ot-small { fill: var(--p-mute); }
body.par .ot-rail { stroke: rgba(255, 255, 255, .1); stroke-width: 2; }
body.par .ot-dot { fill: #2B3072; }
body.par .ot-train rect { fill: url(#otTrain); }
body.par .ot-train .ot-win { fill: #1A1204; fill-opacity: .55; }
body.par .ot-train .ot-wh { fill: #1A1204; stroke: #FFE08A; stroke-width: 1.4; }
body.par .ot-trainw { filter: drop-shadow(0 6px 12px rgba(255, 176, 32, .45)); }
body.par .ot-ghost rect { fill: rgba(185, 160, 255, .16); stroke: rgba(196, 181, 253, .7); stroke-width: 1.2; stroke-dasharray: 3 2; }
body.par .ot-ghost .ot-win { fill: rgba(196, 181, 253, .4); stroke: none; }
body.par .ot-ghost .ot-wh { fill: rgba(196, 181, 253, .25); stroke: rgba(196, 181, 253, .7); stroke-width: 1; }
body.par .ot-bt { fill: rgba(255, 255, 255, .06); }
body.par .ot-bar { fill: url(#otBar); transform-box: fill-box; transform-origin: left center; transition: transform .6s var(--p-ease); }
html.par-motion body.par .par-own.pre .ot-bar:not(.on) { transform: scaleX(0); }

/* ---------- 9 · five steps from here to the first level ---------- */
body.par .par-five { position: relative; margin-top: clamp(30px, 4vw, 52px); }
body.par .fv-steps { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 1000px) { body.par .fv-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
body.par .fv-step { display: grid; align-content: start; gap: 14px; padding: clamp(18px, 2vw, 24px); transition: transform .5s var(--p-spring), box-shadow .35s, background .35s, filter .5s; }
body.par .fv-n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font: 900 1.2rem 'Nunito', system-ui, sans-serif; color: #fff; background: radial-gradient(circle at 34% 28%, #DCCFFF, #8B5CF6 55%, #5B32C9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 12px 24px -10px rgba(139, 92, 246, .9); }
body.par .fv-gold .fv-n { color: #1A1204; background: radial-gradient(circle at 34% 28%, #FFF4C7, #FFC61A 55%, #D98A00); }
body.par .fv-gold { box-shadow: var(--p-shadow), inset 0 0 0 1px rgba(255, 198, 26, .4), 0 0 50px -20px rgba(255, 198, 26, .6); }
body.par .fv-step p { margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--p-soft); }
body.par .fv-step b { color: #fff; font-family: 'Nunito', system-ui, sans-serif; font-weight: 900; }
body.par .fv-g { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 9px 14px; border-radius: 999px; font: 700 .86rem 'Source Sans 3', system-ui, sans-serif; color: #1F1F1F; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 8px 20px -10px rgba(0, 0, 0, .7); }
body.par .fv-g i { width: 16px; height: 16px; border-radius: 50%; border: 3px solid #8C92BE; border-right-color: transparent; }
body.par .fv-line { display: none; }
body.par .fv-tok { display: none; }
@media (min-width: 1000px) {
  body.par .fv-line { display: block; position: absolute; z-index: 0; left: 6%; right: 6%; top: 47px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
  body.par .fv-line i { display: block; height: 100%; background: linear-gradient(90deg, #B9A0FF, #FFC61A); transform-origin: left center; transition: transform .6s var(--p-ease); }
}
html.par-motion body.par .par-five.pre .fv-step:not(.lit) { filter: saturate(.25) brightness(.7); }
html.par-motion body.par .par-five.pre .fv-tok { display: block; position: absolute; z-index: 3; left: 0; top: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 3px #FFE08A, 0 0 26px 4px rgba(255, 198, 26, .75); transition: transform .5s var(--p-spring); }
body.par .par-into { max-width: 860px; margin: clamp(22px, 3vw, 36px) auto 0; padding: clamp(20px, 2.6vw, 32px); }
body.par .par-dots { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 28px; }
@media (min-width: 760px) { body.par .par-dots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.par .par-dots li { position: relative; padding-left: 26px; font-size: 1.04rem; line-height: 1.5; color: var(--p-soft); }
body.par .par-dots li::before { content: ""; position: absolute; left: 0; top: .42em; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #FFF4C7, #FFC61A 55%, #D98A00); box-shadow: 0 0 10px -2px rgba(255, 198, 26, .7); }
body.par .par-start-act { margin-top: clamp(24px, 3vw, 36px); }

/* the package chooser, as before (#pkc, #pkBtn), in this page's look */
body.par .par-pk { max-width: 980px; margin: clamp(40px, 5vw, 64px) auto 0; padding-top: clamp(28px, 3.6vw, 44px); border-top: 1px solid var(--p-line); }
body.par .pkc { display: grid; gap: 14px; margin-bottom: 20px; }
@media (min-width: 760px) { body.par .pkc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.par .pkc button { display: grid; align-content: start; gap: 8px; padding: 20px 22px; border: 0; border-radius: 22px; cursor: pointer; text-align: left; color: var(--p-soft); font: inherit; background: var(--p-glass); box-shadow: var(--p-shadow), inset 0 0 0 1px var(--p-line); transition: transform .45s var(--p-spring), box-shadow .3s, background .3s; }
@media (hover: hover) { body.par .pkc button:hover { transform: translateY(-3px); box-shadow: var(--p-shadow), inset 0 0 0 1px rgba(185, 160, 255, .5); } }
body.par .pkc button[aria-pressed="true"] { background: linear-gradient(180deg, rgba(255, 198, 26, .12), rgba(255, 255, 255, .03)); box-shadow: var(--p-shadow), inset 0 0 0 2px rgba(255, 224, 138, .75), 0 0 44px -16px rgba(255, 198, 26, .7); }
body.par .pkc .h3 { font: 900 1.25rem 'Nunito', system-ui, sans-serif; color: #fff; }
body.par .pkc p { margin: 0; line-height: 1.5; }
body.par .pkc .points { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
body.par .pkc .points li { position: relative; padding-left: 22px; font-size: .96rem; }
body.par .pkc .points li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; border-radius: 50%; background: #B9A0FF; }
body.par .pkc button[aria-pressed="true"] .points li::before { background: #FFC61A; }

/* ---------- 10 · for whom, and not for whom ---------- */
body.par .par-fit { display: grid; gap: clamp(14px, 2vw, 24px); max-width: 980px; margin: clamp(30px, 4vw, 48px) auto 0; }
@media (min-width: 760px) { body.par .par-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.par .par-fit > div { padding: clamp(22px, 2.6vw, 32px); }
body.par .par-fit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
body.par .par-fit li { position: relative; padding-left: 32px; font-size: 1.06rem; line-height: 1.5; }
body.par .fit-gold li { color: #fff; }
body.par .fit-gold li::before { content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #FFF4C7, #FFC61A 55%, #D98A00); box-shadow: 0 0 12px -2px rgba(255, 198, 26, .7); }
body.par .fit-dash li { color: var(--p-mute); }
body.par .fit-dash li::before { content: ""; position: absolute; left: 4px; top: .75em; width: 14px; height: 2px; border-radius: 2px; background: var(--p-mute); }
body.par .par-fit-no { background: rgba(255, 255, 255, .025); }

/* ---------- phones (below 900 px): the section pieces ---------- */
@media (max-width: 899px) {
  body.par .par-flow .p-ar { margin: 0 .12em; }
  body.par .par-phone:nth-child(2) { transform: none; }
  body.par .wk-day { grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto; align-items: start; }
  body.par .wk-chip { justify-self: stretch; text-align: center; padding: 6px 8px; font-size: .76rem; }
  body.par .wk-frame { padding: 14px; }
}
@media (max-width: 520px) {
  body.par .par-pk-act { justify-items: stretch; }
  body.par .par-pk-act .par-btn { width: 100%; }
  body.par .tg-grid { gap: 2px; padding: 6px; }
  body.par .tg-chips button { min-width: 44px; min-height: 44px; padding: 0 10px; font-size: .88rem; }
  body.par .ph-in { min-height: 250px; padding: 22px 12px 14px; }
  body.par .ws-list li { grid-template-columns: 34px minmax(0, 1fr); padding: 12px; gap: 2px 10px; }
  body.par .ws-list li::before { width: 30px; height: 30px; }
  body.par .f2-hands { gap: 10px; }
  body.par .f2-hand { gap: 4px; }
}
@media (max-width: 360px) {
  body.par .f2-hand i { width: 22px; }
  body.par .sc-hop i { width: 22px; height: 22px; }
  body.par .wk-day { grid-template-columns: 80px minmax(0, 1fr); }
  body.par .par-phones { gap: 10px; }
  body.par .ph-h { font-size: .96rem; }
}
@media (max-width: 559px) { body.par .f2-grid { grid-template-columns: auto; row-gap: 16px; } body.par .f2-grid .f2-sum { justify-self: center; } }
body.par .ws-screen:not([data-sc]) .ws-scene { display: none; }
@media (max-width: 899px) { body.par .pr-svg { max-height: calc(40svh - 16px); } }

/* ========== one hero, two packages: the switch, the two states, the Tables picture ========== */
/* the two states share one grid cell, so the taller one holds the height and switching never moves the page.
   The inactive state keeps [hidden] and aria-hidden; here it stays in the layout, invisible and out of the tab order. */
body.par .par-stack { display: grid; }
body.par .par-stack > * { grid-area: 1 / 1; min-width: 0; }
body.par .par-stack > [hidden] { display: block; visibility: hidden; pointer-events: none; }
body.par .par-reels { position: relative; z-index: 1; }
body.par .par-reels > .par-reel, body.par .par-reels > .par-reel[hidden] { display: flex; flex-direction: column; }
body.par .par-reels > .par-reel > .par-reel-card { flex: 1; display: grid; align-items: center; }
html.par-motion body.par .par-state, html.par-motion body.par .par-reels > .par-reel { transition: opacity .28s ease, transform .28s ease; }
html.par-motion body.par .p-enter, html.par-motion body.par .p-leave { opacity: 0; transform: translateY(6px); }
html.par-motion body.par .p-leave { transform: none; }

/* the switch: a glass track, a gold pill that slides behind the chosen segment (transform only, 240 ms) */
body.par .par-switch { position: relative; display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100%; margin: 4px 0 0; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--p-line-hi), inset 0 1px 0 rgba(255, 255, 255, .1), 0 14px 34px -18px rgba(2, 3, 20, .9); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
body.par .par-switch-pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: linear-gradient(180deg, #FFDF62 0%, #FFC61A 45%, #FFA916 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 8px 22px -8px rgba(255, 170, 30, .8); transition: transform .24s var(--p-ease); }
body.par .par-hero[data-pkg="tables"] .par-switch-pill { transform: translateX(100%); }
body.par .par-switch button { position: relative; z-index: 1; min-height: 44px; min-width: min(9.5em, 100%); padding: 0 18px; overflow-wrap: anywhere; border: 0; border-radius: 999px; cursor: pointer; background: none; font: 800 1rem/1.2 'Nunito', system-ui, sans-serif; color: var(--p-soft); transition: color .24s ease; -webkit-tap-highlight-color: transparent; }
body.par .par-switch button[aria-checked="true"] { color: #1A1204; }
@media (hover: hover) { body.par .par-switch button[aria-checked="false"]:hover { color: #fff; } }
body.par .par-switch button:focus-visible { outline: 3px solid var(--p-gold-hi); outline-offset: 2px; }
body.par .par-switch-line { display: grid; margin: 10px 0 18px; font-size: .95rem; line-height: 1.45; color: var(--p-soft); }
body.par .par-switch-line > span { grid-area: 1 / 1; }
body.par .par-switch-line > [hidden] { display: block; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { body.par .par-switch-pill, body.par .par-switch button { transition: none; } }
@media (max-width: 899px) {
  body.par .par-switch { display: grid; width: 100%; }
  body.par .par-switch button { min-width: 0; padding: 0 8px; }
  body.par .par-switch-line { margin: 8px 0 14px; font-size: .9rem; }
}

/* the Tables picture: your child on the grid */
body.par .pt-svg { display: block; width: 100%; height: auto; max-height: min(74vh, 640px); max-height: min(74svh, 640px); margin: 0 auto; overflow: visible; }
body.par .pt-svg text { font-family: 'Nunito', system-ui, sans-serif; font-weight: 900; font-variant-numeric: tabular-nums; }
body.par .pt-linebox { fill: rgba(255, 198, 26, .1); stroke: rgba(255, 224, 138, .5); stroke-width: 1.2; }
body.par .pt-svg .pt-line { fill: var(--p-gold); }
body.par .pt-path { fill: none; stroke: rgba(255, 224, 138, .7); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 198, 26, .6)); }
body.par .pt-b circle:not([fill]) { fill: url(#ptLav); }
body.par .pt-b circle { stroke: rgba(185, 160, 255, .38); stroke-width: 1; }
body.par .pt-b.g circle { stroke: #FFF4C7; stroke-width: 1.2; filter: drop-shadow(0 0 6px rgba(255, 198, 26, .85)); }
body.par .pt-svg .pt-b text { fill: #8F95C9; }
body.par .pt-svg .pt-b.g text { fill: #1A1204; }
body.par .pt-chip rect { fill: rgba(255, 198, 26, .16); stroke: #FFE08A; stroke-width: 1.2; }
body.par .pt-svg .pt-chip text { fill: var(--p-gold-hi); }
body.par .pt-svg .pt-said { fill: #fff; font-weight: 800; }
body.par .pt-chip, body.par .pt-svg .pt-said { transition: opacity .4s ease; }
@media (max-width: 899px) { body.par .pt-svg { max-height: none; } }
/* both reels' feet hold the same height whether or not Watch again is showing, so the picture column never grows after a switch */
body.par .par-reels .par-reel-foot { min-height: 48px; }

/* the flow line: the arrows are hidden from screen readers; ", then" is read in their place */
body.par .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.par .par-h1, body.par .par-btn, body.par .par-quiet { overflow-wrap: anywhere; }
/* the main button keeps one top edge in both states: the two states' words share row 1 and their actions share row 2,
   so the actions start under the taller block of words, whichever state shows */
body.par .par-stack-copy { grid-template-rows: auto auto; }
body.par .par-stack-copy > .par-state, body.par .par-stack-copy > .par-state[hidden] { display: contents; }
body.par .par-stack-copy .par-words { grid-area: 1 / 1; min-width: 0; }
body.par .par-stack-copy .par-actions { grid-area: 2 / 1; min-width: 0; align-self: start; }
html.par-motion body.par .par-stack-copy > .par-state > * { transition: opacity .28s ease, transform .28s ease; }
html.par-motion body.par .p-enter > *, html.par-motion body.par .p-leave > * { opacity: 0; }
html.par-motion body.par .p-enter > * { transform: translateY(6px); }
/* 200 percent text on a 320 px screen: the hero's columns may shrink, and the eyebrow's two halves may wrap inside */
body.par .par-hero-grid > * { min-width: 0; }
@media (max-width: 359px) { body.par .p-nw { white-space: normal; } }
body.par a, body.par button { touch-action: manipulation; }
body.par .par-switch button:active, body.par .par-quiet:active, body.par .par-again:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { body.par .par-switch button:active, body.par .par-quiet:active, body.par .par-again:active { transform: none; } }
/* 200 percent text: a word longer than the column may break, and no grid column may be forced wider than the screen */
body.par main, body.par .foot { overflow-wrap: anywhere; }
body.par .par-two > *, body.par .par-pk2 > *, body.par .par-fit > *, body.par .par-see > *, body.par .f2-lanes > * { min-width: 0; }
body.par .par-op-sum { white-space: normal; }