/* self-hosted — generated by tools/fonts.js from Google Fonts */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/baloo-2-devanagari-700.woff2) format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/baloo-2-latin-ext-700.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/baloo-2-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/baloo-2-devanagari-800.woff2) format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/baloo-2-latin-ext-800.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/baloo-2-latin-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-ext-400.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-ext-500.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin-ext-600.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/inter-latin-ext-800.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/inter-latin-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/quicksand-latin-ext-600.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/quicksand-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/quicksand-latin-ext-700.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/quicksand-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/spline-sans-mono-latin-ext-500.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/spline-sans-mono-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/spline-sans-mono-latin-ext-600.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/spline-sans-mono-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


/* ==== 00-tokens.css ==== */
/* ------------------------------------------------------------------
   Rao Academy — purple direction — design tokens
   Values are lifted verbatim from design_handoff_rao_academy_site/README.md
   and the inline styles of the signed-off Class 5 page.
   ------------------------------------------------------------------ */
:root {
  /* colour */
  --brand: #6D4AFF;
  --deep: #5B21B6;
  --deepest: #4C1D95;
  --ink: #221A3A;
  --ink-2: #3B3455;          /* menu items, bullet text */
  --ink-soft: #2C2150;
  --secondary: #5E5775;
  --tertiary: rgba(34, 26, 58, .75);
  --tertiary-70: rgba(34, 26, 58, .7);
  --muted: #9C93B4;
  --icon-idle: #7E74A0;
  --page: #FCFBFF;
  --tint: #F4F1FE;
  --tint-2: #EFEAFF;
  --tint-3: #E4DBFC;
  --faint: #F7F4FE;
  --faint-2: #F1ECFD;
  --faint-3: #FBFAFF;
  --border: #DED7EC;
  --border-faint: #EBE6F4;
  --border-faint-2: #F2EEFA;
  --border-soft: #E3DCF3;
  --border-brand: #DBCEF8;
  --border-brand-2: #C9B8F5;
  --amber: #F5A524;
  --amber-text: #8A5A08;
  --amber-tint: #FEF3E2;
  --amber-border: #F7DDB0;
  --green: #1DB954;
  --green-2: #16A34A;
  --green-text: #14804A;
  --green-text-2: #15803D;
  --green-tint: #E8F8EE;
  --green-tint-2: #E3F6E9;
  --red-tint: #FDECEC;
  --red-text: #B4231F;
  --red-border: #F0AFAF;
  --footer: #1B1338;
  --footer-text: rgba(255, 255, 255, .78);
  --footer-muted: rgba(255, 255, 255, .66);
  --footer-dim: rgba(255, 255, 255, .55);
  --footer-label: rgba(255, 255, 255, .5);
  --footer-rule: rgba(255, 255, 255, .14);

  /* type */
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Baloo 2", var(--font-body);
  --font-round: Quicksand, var(--font-body);
  --font-mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* spacing */
  --gutter: clamp(18px, 4vw, 28px);
  --section-top: clamp(34px, 4.6vw, 62px);
  --section-bottom: clamp(38px, 5vw, 70px);
  --card-pad: clamp(24px, 3.2vw, 40px);
  --head-gap: clamp(30px, 3.6vw, 48px);
  --block-gap: clamp(18px, 2.2vw, 26px);

  /* radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* shadow */
  --shadow-soft: 0 22px 48px -38px rgba(34, 26, 58, .45);
  --shadow-glow: 0 0 0 1px rgba(109, 74, 255, .07), 0 0 28px -4px rgba(109, 74, 255, .20), var(--shadow-soft);
  --shadow-featured: 0 0 0 3px rgba(109, 74, 255, .09), 0 0 32px -2px rgba(109, 74, 255, .28), var(--shadow-soft);
  --shadow-panel: 0 24px 50px -36px rgba(34, 26, 58, .45);
  --shadow-menu: 0 26px 56px -24px rgba(34, 26, 58, .45);
  --shadow-row: 0 10px 22px -16px rgba(34, 26, 58, .55);

  /* motion */
  --ease-panel: cubic-bezier(.22, .7, .2, 1);
  --ease-row: cubic-bezier(.22, 1, .36, 1);
  --ease-draw: cubic-bezier(.4, 0, .2, 1);

  /* layout */
  --max: 1240px;
  --max-footer: 1180px;
  --max-hero: 1160px;
  --max-curr: 940px;
}

/* the mobile step (defect 5): tighter section/card padding and headings below 640px */
@media (max-width: 639.98px) {
  :root {
    --section-top: 28px;
    --section-bottom: 32px;
    --card-pad: 18px;
    --head-gap: 22px;
    --block-gap: 14px;
  }
}


/* ==== 01-base.css ==== */
/* ---------------------------------------------------------------
   base — reset, type, links, buttons, layout primitives
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* defect 7: no 100vw tricks anywhere — sections are full-width blocks, so the
     page never gains a horizontal scrollbar. overflow-x:clip is a belt-and-braces
     guard for the doodles, which are allowed to poke past their card. */
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--deep); text-decoration: none; }
a:hover { color: var(--deepest); }
strong { font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 14px; border-radius: 10px;
  background: var(--brand); color: #fff; font-weight: 600; font-size: .9rem;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

/* the content column (defect 7 — full-width section + an inner .wrap) */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--footer { max-width: var(--max-footer); }
.wrap--hero { max-width: var(--max-hero); }
.wrap--narrow { max-width: var(--max-curr); }

.mono {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.eyebrow {
  display: block;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--deep);
  margin-bottom: 12px;
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px;
  border-radius: 12px;
  font-weight: 600; font-size: .95rem; line-height: 1.2;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--filled { background: var(--brand); color: #fff; }
.btn--filled:hover { background: var(--deep); color: #fff; }
.btn--outline { color: var(--deep); border: 1.5px solid var(--border-brand); background: transparent; }
.btn--outline:hover { background: var(--tint-2); color: var(--deepest); }
.btn--text { padding: 14px 10px; color: var(--ink); font-size: .9rem; border-radius: 8px; }
.btn--text:hover { color: var(--deep); }
.btn--sm { padding: 8px 16px; border-radius: 10px; font-size: .84rem; }
.btn--block { display: flex; width: 100%; }
.btn--lg { padding: 13px 24px; border-radius: 13px; font-size: .92rem; font-weight: 700; }

/* pills */
.pill {
  display: inline-block;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-size: .66rem; font-weight: 600; line-height: 1.2;
  white-space: nowrap;
}
.pill--amber { background: var(--amber-tint); color: var(--amber-text); }
.pill--purple { background: var(--tint-2); color: var(--deep); }
.pill--green { background: var(--green-tint-2); color: var(--green-text-2); }

/* scroll-in reveal — opacity 0 / 14px until it is 92% up the viewport, then .65s ease */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .65s ease, transform .65s ease;
}
[data-reveal].is-shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}


/* ==== 02-chrome.css ==== */
/* ---------------------------------------------------------------
   chrome — header, nav, CBSE menu, mobile drawer, footer
   --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--page);
  border-bottom: 1px solid var(--border-faint);
  transition: box-shadow .25s ease;
}
.site-header.is-scrolled { box-shadow: 0 1px 14px rgba(34, 26, 58, .10); }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 16px;
  padding: 12px var(--gutter) 11px;
  max-width: var(--max);
  margin: 0 auto;
}

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink);
  font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand__mark {
  width: 25px; height: 25px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  font-size: .78rem; font-weight: 800; letter-spacing: 0;
}

/* desktop link row */
.nav__links {
  display: flex; align-items: center;
  gap: 10px clamp(20px, 3.4vw, 40px);
  font-size: .84rem; font-weight: 500;
}
.nav__links > li { position: relative; }
.nav__links a, .nav__links .menu__button {
  color: var(--secondary);
  padding: 4px 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.nav__links a:hover { color: var(--deep); }
.nav__links a[aria-current="page"] { color: var(--deep); font-weight: 600; }

.menu__button {
  color: var(--deep) !important;
  font-weight: 600;
  cursor: pointer;
}
.menu__button::after {
  content: "▼";
  font-size: .55rem; opacity: .7;
  transition: transform .2s ease;
}
.menu__button[aria-expanded="true"]::after { transform: rotate(180deg); }

.menu__panel {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto);
  grid-auto-flow: column; gap: 2px 8px;
  width: min(300px, calc(100vw - 30px));
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border-faint);
  border-radius: 16px;
  box-shadow: var(--shadow-menu);
}
.menu__panel[hidden] { display: none; }
.menu__panel a {
  display: block;
  padding: 11px 16px; border-radius: 10px;
  color: var(--ink-2);
  font-size: .98rem; font-weight: 600;
  white-space: nowrap;
}
.menu__panel a:hover, .menu__panel a:focus-visible { background: var(--tint); color: var(--deep); }

.nav__cta { flex: 0 0 auto; }

/* hamburger — hidden on desktop */
.nav__toggle {
  display: none;
  width: 42px; height: 42px; border-radius: 10px;
  align-items: center; justify-content: center;
  color: var(--ink);
  margin-right: -8px;
}
.nav__toggle:hover { background: var(--tint); }
.nav__toggle svg { width: 24px; height: 24px; }
.nav__toggle .ico-close { display: none; }
.nav__toggle[aria-expanded="true"] .ico-close { display: block; }
.nav__toggle[aria-expanded="true"] .ico-open { display: none; }

/* mobile drawer (defect 1) */
.drawer {
  position: fixed; inset: 0; z-index: 60;
  display: none;
}
.drawer.is-open { display: block; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(27, 19, 56, .45);
  opacity: 0; transition: opacity .3s ease;
}
.drawer__sheet {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(340px, 88vw);
  background: #fff;
  box-shadow: -18px 0 48px -24px rgba(34, 26, 58, .5);
  transform: translateX(100%);
  transition: transform .34s var(--ease-row);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex; flex-direction: column;
  padding: 0 0 24px;
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__sheet { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .drawer__scrim, .drawer__sheet { transition: none; }
}
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 12px 20px;
  border-bottom: 1px solid var(--border-faint);
}
.drawer__close {
  width: 42px; height: 42px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.drawer__close:hover { background: var(--tint); }
.drawer__close svg { width: 22px; height: 22px; }
.drawer__list { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.drawer__list > li > a, .drawer__label {
  display: block;
  padding: 13px 12px; border-radius: 12px;
  font-size: 1.05rem; font-weight: 600; color: var(--ink-2);
}
.drawer__list > li > a:hover, .drawer__list > li > a:focus-visible { background: var(--tint); color: var(--deep); }
.drawer__list > li > a[aria-current="page"] { color: var(--deep); }
.drawer__label {
  padding-bottom: 6px;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--secondary);
}
.drawer__classes {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto);
  grid-auto-flow: column; gap: 2px 8px;
  padding: 0 12px 8px;
}
.drawer__classes a {
  display: block;
  padding: 11px 12px; border-radius: 10px;
  background: var(--faint-3);
  border: 1px solid var(--border-faint);
  color: var(--ink-2);
  font-size: .95rem; font-weight: 600;
}
.drawer__classes a:hover, .drawer__classes a:focus-visible,
.drawer__classes a[aria-current="page"] { background: var(--tint); border-color: var(--border-brand); color: var(--deep); }
.drawer__foot { margin-top: auto; padding: 18px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.drawer__foot .btn { width: 100%; }
.drawer__contact { font-size: .86rem; color: var(--secondary); line-height: 1.7; text-align: center; }

body.drawer-open { overflow: hidden; }

@media (max-width: 899.98px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__cta { display: none; }
}

/* footer */
.site-footer {
  position: relative;
  margin-top: 64px;
  background: var(--footer);
  color: var(--footer-text);
  overflow: hidden;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 34px 34px;
}
.site-footer .wrap {
  position: relative;
  padding: clamp(34px, 4vw, 52px) clamp(16px, 3vw, 24px) clamp(22px, 2.6vw, 28px);
}
.site-footer a { color: var(--footer-text); }
.site-footer a:hover { color: #fff; }

.footer__top { display: flex; flex-wrap: wrap; gap: clamp(36px, 5vw, 64px); }
.footer__brand { flex: 1 1 250px; max-width: 320px; }
.footer__brand .brand { color: #fff; font-size: 1rem; }
.footer__brand .brand__mark { width: 24px; height: 24px; border-radius: 7px; font-size: .75rem; }
.footer__blurb { margin-top: 14px; font-size: .82rem; line-height: 1.7; color: var(--footer-muted); }

.footer__cols {
  flex: 3 1 auto;
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 34px clamp(28px, 3.4vw, 52px);
}
.footer__col h3 {
  font-family: var(--font-mono);
  font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--footer-label);
  margin-bottom: 14px;
}
.footer__col--classes h3 { text-align: center; }
.footer__col ul { display: flex; flex-direction: column; gap: 11px; font-size: .82rem; }
.footer__classes {
  display: grid !important; grid-template-columns: auto auto; grid-template-rows: repeat(5, auto);
  grid-auto-flow: column; gap: 11px 28px !important;
}
.footer__soon { color: var(--footer-dim); }
.footer__soon span { opacity: .55; }

.footer__bottom {
  margin-top: clamp(40px, 4.5vw, 60px);
  padding-top: 20px;
  border-top: 1px solid var(--footer-rule);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 20px;
  font-size: .84rem; color: rgba(255, 255, 255, .62);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.footer__legal a { color: rgba(255, 255, 255, .62); }

@media (max-width: 639.98px) {
  .footer__cols { gap: 28px 24px; }
  .footer__col { flex: 1 1 40%; }
  .footer__col--classes { flex-basis: 100%; }
  .footer__col--classes h3 { text-align: left; }
  .footer__classes { justify-content: start; }
}


/* ==== 03-blocks.css ==== */
/* ---------------------------------------------------------------
   blocks — hero, section heads, glow card + hover blocks, report
   cards, curriculum, plans, FAQ, start band
   --------------------------------------------------------------- */

/* ---- hero ---------------------------------------------------- */
.hero {
  background: linear-gradient(295deg, #FDFCFF 0%, #F3EFFE 42%, #E6DDFA 72%, #D5C8F4 100%);
  border-bottom: 1px solid var(--border);
}
.hero .wrap {
  padding-top: clamp(6px, 1vw, 10px);
  padding-bottom: clamp(10px, 1.4vw, 16px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 36px 56px;
  align-items: center;
}
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--secondary);
  margin: 14px 0 18px;
}
.crumbs a { color: var(--deep); }
.crumbs [aria-current] { color: var(--ink); }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--secondary); }
.crumbs li { display: inline-flex; align-items: center; }
.hero h1 {
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.12; letter-spacing: -.035em;
  margin: 0 0 12px;
  text-wrap: pretty;
}
.hero__lead {
  font-size: 1rem; line-height: 1.6; color: var(--tertiary);
  margin: 0 0 20px; max-width: 36em; text-wrap: pretty;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 4px; }
.hero__visual {
  position: relative; width: 100%;
  max-width: 250px; margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.hero__visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* a hero Lottie's own box; its aspect-ratio is set inline per animation
   (heroAnim() in blocks.js), since a Lottie here need not match the
   times-table circle's 1:1 shape, and different animations differ too.
   --anim-mw / --anim-mw-mobile let a specific animation (e.g. a square
   one, which would otherwise render far taller than a wide banner at the
   same max-width) opt into a smaller box, so its rendered HEIGHT can
   still match another class's hero animation — set inline per instance
   when given; the values below are just the default when it isn't. */
.hero__visual--anim { max-width: var(--anim-mw, 420px); }
/* opt-in (HERO_ANIMS[n].keepRowHeight in class.js): an animation whose box
   is taller than the text column would otherwise stretch the whole hero
   row to match it. Wrapping it in a 0-height slot and floating the real
   box inside, centered, means the box renders at full size but never
   contributes to the row's height — the row stays exactly as tall as the
   text column alone, same as before this animation existed. */
.hero__visual-slot { position: relative; width: 100%; }
.hero__visual--float { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; }
.hero-anim { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-anim svg { display: block; width: 100%; height: 100%; }
/* defect 3: below the desktop breakpoint the drawing may grow to the column */
@media (max-width: 899.98px) {
  .hero .wrap { gap: 18px 40px; padding-top: 4px; }
  .hero__visual { max-width: min(360px, 78vw); }
  .hero__visual--anim { max-width: min(var(--anim-mw, 420px), 82vw); }
  .hero__ctas .btn--text { padding-left: 4px; }
}
@media (max-width: 639.98px) {
  .hero__visual { max-width: min(320px, 72vw); margin-top: 6px; }
  .hero__visual--anim { max-width: min(var(--anim-mw-mobile, 340px), 86vw); }
}

/* ---- section framing ------------------------------------------ */
.section { padding: var(--section-top) 0 var(--section-bottom); }
.section--paper {
  background-color: var(--page);
  background-image: linear-gradient(var(--tint-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--tint-2) 1px, transparent 1px);
  background-size: 32px 32px;
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
  padding-bottom: clamp(20px, 3vw, 34px);
}
.section--white { background: #fff; border-bottom: 1px solid var(--border-faint); }
.section--page { background: var(--page); border-bottom: 1px solid var(--border-faint); }

.section-head {
  text-align: center;
  margin: 0 auto var(--head-gap);
}
.section-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.035em;
  max-width: 24em; margin: 0 auto;
  text-wrap: balance;
}
.section-head--left { text-align: left; margin-left: 0; }
.section-head--left h2 { margin-left: 0; }
.section-head__sub {
  margin: 14px auto 0;
  font-size: 1.02rem; line-height: 1.6; color: var(--secondary);
  max-width: 46ch;
}
.section-head--left .section-head__sub { margin-left: 0; }

/* the drawn amber underline */
.u {
  position: relative; display: inline-block; white-space: nowrap;
}
.u svg {
  position: absolute; left: -4%; bottom: -12px;
  width: 108%; height: 14px; overflow: visible;
  pointer-events: none;
}
.u path {
  fill: none; stroke: var(--amber); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 210; stroke-dashoffset: 210;
}
.u.is-shown path { animation: draw-underline .9s var(--ease-draw) .35s forwards; }
@keyframes draw-underline { from { stroke-dashoffset: 210; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .u path { stroke-dashoffset: 0; animation: none !important; }
}
@media (max-width: 639.98px) {
  .section-head h2 { font-size: clamp(1.55rem, 7vw, 1.9rem); }
  .u svg { bottom: -9px; height: 11px; }
}

/* ---- glow card + hover block ----------------------------------- */
.glow {
  max-width: var(--max);
  margin: 0 auto var(--block-gap);
  padding: var(--card-pad);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-glow);
}
.hb {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 40px clamp(48px, 6vw, 96px);
  align-items: center;
}
/* the alternating block puts its visual first on desktop */
.hb--flip .hb__visual { order: -1; }
.hb__text { position: relative; }
.hb__text h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -.03em;
  margin: 0 0 10px;
  text-wrap: pretty;
}
.hb__lead { font-size: .98rem; line-height: 1.6; color: var(--tertiary); max-width: 34em; margin: 0 0 26px; }
.hb__rows { display: flex; flex-direction: column; gap: 10px; }
.hb__row {
  display: flex; align-items: flex-start; gap: 16px;
  width: 100%; text-align: left;
  padding: 16px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1.5px solid var(--border-faint);
  cursor: pointer;
  transition: background .35s ease, border-color .35s ease, transform .3s var(--ease-row), box-shadow .3s ease;
}
.hb__row:hover { transform: translateX(6px); box-shadow: var(--shadow-row); }
.hb__row[aria-selected="true"] { background: var(--tint); border-color: var(--border); }
.hb__icon {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--tint); color: var(--icon-idle);
  font-size: .85rem; font-weight: 700;
  transition: background .35s ease, color .35s ease;
}
.hb__row[aria-selected="true"] .hb__icon { background: var(--tint-3); color: var(--deep); }
.hb__title {
  display: block;
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
  transition: color .35s ease;
}
.hb__row[aria-selected="true"] .hb__title { color: var(--deep); }
.hb__body { display: block; margin-top: 4px; font-size: .9rem; line-height: 1.5; color: var(--tertiary-70); }

/* the frame that holds the stacked panels */
.hb__visual { min-width: 0; }
.hb__frame {
  position: relative;
  aspect-ratio: 5 / 4;
  min-height: clamp(340px, 80vw, 460px);
  border-radius: 26px;
  background: var(--tint);
  padding: clamp(14px, 2vw, 26px);
}
.hb__frame--tall { min-height: 420px; }
.hb__panel {
  position: absolute; inset: clamp(14px, 2vw, 26px);
  border-radius: 18px;
  background: #fff;
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-panel);
  padding: clamp(14px, 2vw, 22px);
  overflow: hidden;
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0;
  transform: translateY(18px) scale(.965);
  transition: opacity .45s var(--ease-panel), transform .45s var(--ease-panel);
  pointer-events: none;
  z-index: 1;
}
.hb__frame--tall .hb__panel { padding: clamp(16px, 2vw, 24px); gap: 14px; }
.hb__panel.is-active { opacity: 1; transform: none; pointer-events: auto; z-index: 3; }
.hb__panel--image { display: grid; place-items: center; padding: clamp(14px, 2vw, 22px); }
.hb__panel--image img { width: 100%; height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  .hb__row, .hb__panel, .hb__icon, .hb__title { transition: none; }
  .hb__row:hover { transform: none; }
}

/* doodles (defect 6): the bulb is inline so it scales with the heading, the
   crown sits above the heading in em units and is dropped on phones */
.doodle-bulb { display: inline-block; vertical-align: -.42em; height: 76px; width: auto; margin-left: .6em; }
.crown-word { position: relative; display: inline-block; white-space: nowrap; }
.doodle-crown {
  position: absolute; left: 50%; top: -62px;
  height: 56px; width: auto;
  transform: translateX(-50%) rotate(-8deg);
  pointer-events: none;
}

/* phone layout for the blocks (defect 2) — text first, then the visual, with
   the frame sized to the phone and the mock panels redrawn (see 04-mocks) */
@media (max-width: 899.98px) {
  .hb { gap: 22px; }
  .hb--flip .hb__visual { order: 0; }
  .hb__text h2 { font-size: clamp(1.4rem, 5.6vw, 1.7rem); }
  .hb__lead { margin-bottom: 18px; }
  .hb__row { padding: 13px 14px; gap: 12px; }
  .hb__row:hover { transform: none; box-shadow: none; }
  .hb__title { font-size: .98rem; }
  .hb__body { font-size: .86rem; }
  /* stacked under the text the frame spans the full width, so 5/4 would make
     it taller than any panel needs — cap it */
  .hb__frame, .hb__frame--tall { aspect-ratio: auto; min-height: 0; height: min(460px, 64vw); }
  .doodle-bulb { height: 1.6em; margin-left: .35em; vertical-align: -.35em; }
  .doodle-crown { top: -1.7em; height: 1.55em; }
}
@media (max-width: 639.98px) {
  .glow { border-radius: 22px; }
  .hb__frame, .hb__frame--tall {
    aspect-ratio: auto;
    min-height: 0;
    height: min(340px, 92vw);   /* the tallest redrawn panel needs ~280px at 320–400 wide */
    padding: 12px;
    border-radius: 20px;
  }
  .hb__panel { inset: 12px; padding: 14px; gap: 10px; border-radius: 16px; }
  .hb__frame--tall .hb__panel { padding: 14px; gap: 10px; }
  .doodle-crown { display: none; }
}
@media (hover: none) {
  .hb__row:hover { transform: none; box-shadow: none; }
}

/* ---- report cards ---------------------------------------------- */
.rcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 196px), 1fr));
  gap: 18px;
}
.rcard {
  display: flex; flex-direction: column; gap: 9px;
  padding: clamp(14px, 1.5vw, 18px);
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-glow);
}
.rcard__icon {
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  font-size: .88rem; font-weight: 700;
}
.rcard__icon--purple { background: var(--tint-2); color: var(--deep); }
.rcard__icon--green { background: var(--green-tint-2); color: var(--green-text-2); }
.rcard__icon--amber { background: var(--amber-tint); color: var(--amber-text); }
.rcard h3 { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
.rcard p { font-size: .85rem; line-height: 1.5; color: var(--secondary); }
.glow--after-cards { margin: var(--block-gap) auto 0; }
@media (max-width: 639.98px) {
  .rcards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .rcard { padding: 14px; border-radius: 16px; }
}
@media (max-width: 379.98px) {
  .rcards { grid-template-columns: 1fr; }
}

/* ---- curriculum (defect 4: collapsed per chapter) --------------- */
.curr {
  max-width: var(--max-curr);
  margin: 0 auto;
  padding: var(--card-pad);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-glow);
}
.chapters { border: 1px solid var(--border-faint); border-radius: 16px; overflow: hidden; }
.chap + .chap { border-top: 1px solid var(--border); }
.chap__btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 13px clamp(11px, 2vw, 16px);
  background: #fff;
  transition: background .25s ease;
}
.chap__btn:hover { background: var(--faint-3); }
.chap__btn[aria-expanded="true"] { background: var(--faint-3); }
.chap__num {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 600; letter-spacing: .08em;
  color: var(--deep);
  background: var(--tint-2);
  padding: 5px 8px; border-radius: 8px;
}
.chap__name { flex: 1 1 auto; font-size: .92rem; font-weight: 600; line-height: 1.35; letter-spacing: -.005em; }
.chap__count { font-size: .78rem; color: var(--secondary); white-space: nowrap; }
.chap__caret {
  flex: 0 0 16px; width: 16px; height: 16px;
  color: var(--muted);
  transition: transform .25s ease;
}
.chap__btn[aria-expanded="true"] .chap__caret { transform: rotate(90deg); color: var(--deep); }
.chap__body[hidden] { display: none; }
/* a flat table: the map's section, the lesson, the estimated minutes — plus a
   Preview control on classes the preview pin covers (.lrows--peek).
   No chapter column — the accordion header above already names it. Section
   prints only on the row where it changes (see lessonRows() in blocks.js).

   ONE GRID, NOT ONE PER ROW. The column tracks live here and every row opts
   in with subgrid. Per-row grids look identical while every track is elastic,
   then go ragged the moment one is sized to its content — which is what
   happened when the Preview column was added and the Lesson column started
   sizing to the longest title. Rows stay their own box, so hover and the
   dividing rule are unaffected. */
.lrows {
  border-top: 1px solid var(--border-faint-2);
  display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto;
}
/* Every track takes a SHARE of the width. Sizing Lesson to its content and
   giving Duration all the slack piled the whole remainder into one gap
   between Preview and Duration; proportional tracks spread the columns
   across the table instead. Lesson gets the largest share because it holds
   the longest text. */
.lrows--peek {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, .7fr);
}
.lrow--head,
.lrow {
  display: grid; grid-template-columns: subgrid; grid-column: 1 / -1;
  align-items: center;
  gap: 2px clamp(12px, 2.2vw, 22px);
  padding: 11px clamp(11px, 2vw, 16px);
}
.lrows--peek .lrow__dur { text-align: right; }
/* The header's Duration cell carries .lrow__dur only to be right-aligned; it
   must not also pick up the DATA cell's size and weight, which is what made
   that one heading look bigger than the other three. */
.lrow--head .lrow__dur {
  font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit;
}
.lrow--head {
  background: var(--faint);
  font-family: var(--font-mono); font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--secondary);
}
.lrow { border-top: 1px solid var(--border-faint-2); }
/* Section and lesson are set IDENTICALLY — .84rem (13.4px) at weight 400 —
   ruled 2026-09-22. Colour alone separates them; nothing in the row competes
   on size. */
.lrow__section { min-width: 0; font-size: .84rem; font-weight: 400; color: var(--ink-2); }
.lrow__title { min-width: 0; font-size: .84rem; font-weight: 400; line-height: 1.4; }
.lrow__dur {
  font-family: var(--font-mono); font-size: .78rem; font-weight: 500;
  color: var(--secondary); white-space: nowrap;
}
@media (max-width: 639.98px) {
  .curr { border-radius: 22px; }
  .chap__count { display: none; }
}

/* The curriculum table stacks below 768, NOT below 640 like the rest of the
   site. Measured 2026-09-22 across all 103 Class 4 rows: titles wrap to two
   lines at every width up to 740 and stop wrapping at 760, so between 640 and
   760 the four-column table was technically working and visibly scrappy —
   ragged row heights, wrapped section names. 768 is the first width where it
   is clean, and it is the usual tablet edge, so that is the boundary. Below
   it, stacked rows read better than a cramped table. */
@media (max-width: 767.98px) {
  /* the tracks on .lrows stop applying; rows become stacked blocks */
  .lrows, .lrows--peek { display: block; }
  .lrow {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    padding: 10px 12px;
  }
  /* AFTER the .lrow rule, deliberately: the header carries BOTH classes, so
     at equal specificity an earlier `display:none` loses to `.lrow{display:flex}`
     and the header row reappeared. Order is the fix, not !important. */
  .lrow--head { display: none; }
  /* no font-size overrides: section and lesson stay identical here too */
  .lrow__section { flex: 0 0 auto; }
  .lrow__title { flex: 1 1 100%; order: 1; }
  .lrow__peek { order: 2; flex: 0 0 auto; }
  .lrow__dur { flex: 0 0 auto; order: 3; }
}

/* Classes 9 and 10 — the MASTER-MAP stops at Grade 8 (see curriculum() in
   blocks.js). One note in the same card, not a borrowed chapter list. */
.curr--soon { padding: clamp(22px, 4vw, 40px) clamp(16px, 3vw, 32px); }
.curr__soon {
  max-width: 46ch; margin: 0 auto; text-align: center;
  font-size: .95rem; line-height: 1.65; color: var(--secondary);
}
.curr__soon a { color: var(--deep); font-weight: 600; }

/* ---- plans ------------------------------------------------------ */
/* the .ptier cards themselves (shared with /pricing) are styled in
   07-pages.css, loaded on every page anyway — nothing pricing-specific
   is needed here beyond the section head's own width. */
.plans__head { max-width: 44em; margin: 0 auto clamp(22px, 2.8vw, 32px); }
.plans__head h2 { margin-bottom: 14px; }

/* ---- FAQ accordion ---------------------------------------------- */
.faq {
  margin-top: clamp(20px, 2.6vw, 30px);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 26px;
  box-shadow: var(--shadow-soft);
  padding: clamp(10px, 1.6vw, 18px) clamp(14px, 2.2vw, 26px) clamp(14px, 2vw, 22px);
}
.faq__item { border-top: 1px solid var(--border-faint); }
.faq__item:first-child { border-top: 0; }
.faq__item.is-open { background: var(--faint-3); margin: 0 calc(-1 * clamp(14px, 2.2vw, 26px)); padding: 0 clamp(14px, 2.2vw, 26px); }
.faq__q {
  display: flex; align-items: center; gap: 16px;
  width: 100%; text-align: left;
  padding: 18px 4px;
}
.faq__marker {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--border-faint); background: #fff;
  transition: background .25s ease, border-color .25s ease;
}
.faq__marker svg { width: 10px; height: 10px; color: var(--muted); transition: color .25s ease; }
.faq__q[aria-expanded="true"] .faq__marker { border-color: var(--border-brand); background: var(--faint-2); }
.faq__q[aria-expanded="true"] .faq__marker svg { color: var(--brand); }
.faq__q[aria-expanded="true"] .faq__marker .v { display: none; }
.faq__q span { font-size: 1.02rem; font-weight: 500; line-height: 1.4; color: var(--ink-2); }
.faq__q[aria-expanded="true"] span { color: var(--ink); }
.faq__a { margin: -4px 0 20px; padding-left: 42px; font-size: .92rem; line-height: 1.65; color: var(--secondary); }
.faq__a[hidden] { display: none; }
.faq__a p + p { margin-top: 10px; }
.faq__more {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 18px;
  padding: 18px 4px 4px;
  border-top: 1px solid var(--border-faint);
  font-size: .92rem; color: var(--secondary);
}
.faq__more a { font-weight: 600; }
.faq__more-ctas { display: flex; gap: 18px; }
@media (max-width: 639.98px) {
  .faq { border-radius: 22px; }
  .faq__q { padding: 15px 2px; gap: 12px; }
  .faq__q span { font-size: .96rem; }
  .faq__a { padding-left: 34px; }
}

/* ---- start band -------------------------------------------------- */
.start { background: var(--page); padding: clamp(30px, 3.8vw, 52px) 0; }
.start .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 28px;
}
.start h2 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; }
.start__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 639.98px) {
  .start__ctas { width: 100%; flex-direction: column; }
  .start__ctas .btn { width: 100%; }
}


/* ==== 04-mocks.css ==== */
/* ---------------------------------------------------------------
   mocks — the twelve product-mock panels inside the hover blocks.
   Desktop values are the design's; the phone block at the bottom
   redraws every panel for the ~268×340 content box a phone gets.
   --------------------------------------------------------------- */
.mk__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mk__label {
  font-family: var(--font-mono); font-size: .6rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--secondary);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* sample question */
.mk__q { font-size: .98rem; font-weight: 600; line-height: 1.5; }
.mk__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mk__opt {
  padding: 12px; border-radius: 12px;
  background: #fff; border: 1.5px solid var(--border-soft); color: var(--ink-soft);
  font-size: .92rem; font-weight: 600; text-align: center;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.mk__opt:hover { border-color: var(--border-brand-2); }
.mk__opt.is-right { background: var(--green-tint); border-color: var(--green); color: var(--green-text); }
.mk__opt.is-wrong { background: var(--red-tint); border-color: var(--red-border); color: var(--red-text); }
.mk__fb { font-size: .86rem; font-weight: 600; color: var(--secondary); min-height: 1.3em; }
.mk__fb.is-right { color: var(--green-text); }
.mk__fb.is-wrong { color: var(--red-text); }

/* bars */
.mk__bars { display: flex; flex-direction: column; gap: 12px; }
.mk__bar-row { display: flex; justify-content: space-between; align-items: baseline; font-size: .88rem; font-weight: 600; margin-bottom: 7px; }
.mk__bar-row span { color: var(--secondary); font-weight: 500; font-size: .82rem; }
.mk__track { height: 8px; border-radius: 999px; background: var(--tint-2); overflow: hidden; }
.mk__track--thin { height: 7px; }
.mk__fill { height: 100%; border-radius: inherit; width: 0; transition: width .8s cubic-bezier(.22, .85, .25, 1); }
.hb__panel.is-active .mk__fill { width: var(--w); }
@media (prefers-reduced-motion: reduce) {
  .mk__fill { transition: none; width: var(--w); }
}

.mk__note {
  padding: 12px 14px; border-radius: 12px;
  background: var(--faint-3); border: 1px solid var(--border-faint);
  font-size: .86rem; line-height: 1.5;
}

/* checklist */
.mk__list { display: flex; flex-direction: column; gap: 8px; }
.mk__ck {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 12px;
  font-size: .9rem; font-weight: 600;
}
.mk__ck--done { background: var(--tint); }
.mk__ck--now { background: var(--amber-tint); }
.mk__ck--todo { background: var(--faint-3); color: rgba(34, 26, 58, .6); }
.mk__dot {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .66rem; font-weight: 700;
}
.mk__ck--done .mk__dot { background: var(--green); color: #fff; }
.mk__ck--now .mk__dot { border: 2.5px solid var(--amber); }
.mk__ck--todo .mk__dot { border: 2px solid var(--border); }

/* worked solution */
.mk__steps { display: flex; flex-direction: column; gap: 10px; }
.mk__step { display: flex; align-items: flex-start; gap: 12px; font-size: .9rem; line-height: 1.5; }
.mk__stepno {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--tint-2); color: var(--deep);
  font-size: .72rem; font-weight: 700;
}
.mk__ans { padding: 12px 14px; border-radius: 12px; background: var(--tint); font-size: .95rem; font-weight: 700; color: var(--deep); }

/* revision queue */
.mk__qrow {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 12px;
  font-size: .9rem; font-weight: 600;
}
.mk__qrow--amber { background: var(--amber-tint); }
.mk__qrow--grey { background: var(--faint-3); border: 1px solid var(--border-faint); color: rgba(34, 26, 58, .7); }
.mk__qrow .mk__dot { border: 2.5px solid var(--amber); }
.mk__qrow--grey .mk__dot { border: 2px solid var(--border); }
.mk__foot { font-size: .86rem; line-height: 1.5; color: var(--tertiary); margin-top: auto; }

/* watch box */
.mk__watch { padding: 14px 16px; border-radius: 14px; background: var(--amber-tint); }
.mk__watch .mk__label { color: var(--amber-text); font-size: .58rem; margin-bottom: 6px; }
.mk__watch p { font-size: .92rem; line-height: 1.5; }

/* message + attachment */
.mk__bubble {
  max-width: 86%; padding: 14px 16px;
  border-radius: 16px 16px 16px 4px;
  background: var(--tint);
  font-size: .92rem; line-height: 1.55;
}
.mk__attach {
  max-width: 70%; padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  border-radius: 16px; border: 1.5px solid var(--border-faint);
}
.mk__attach-ico {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--tint-2); color: var(--deep); font-size: 1rem;
}
.mk__attach b { display: block; font-size: .88rem; font-weight: 600; }
.mk__attach span { font-size: .8rem; color: var(--secondary); }

/* plain words */
.mk__card { padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--border-faint); font-size: .94rem; line-height: 1.6; }
.mk__strike {
  padding: 14px 16px; border-radius: 14px; border: 1.5px dashed var(--border);
  font-size: .9rem; line-height: 1.55; color: var(--muted); text-decoration: line-through;
}

/* ---- phone redraw (defect 2) ------------------------------------ */
@media (max-width: 639.98px) {
  .mk__label { font-size: .56rem; letter-spacing: .1em; }
  .hb__panel .pill { font-size: .6rem; padding: 4px 8px; }
  .mk__q { font-size: .88rem; line-height: 1.4; }
  .mk__opts { gap: 8px; }
  .mk__opt { padding: 9px 8px; font-size: .84rem; border-radius: 10px; }
  .mk__fb { font-size: .8rem; }
  .mk__bars { gap: 10px; }
  .mk__bar-row { font-size: .82rem; margin-bottom: 5px; }
  .mk__bar-row span { font-size: .76rem; }
  .mk__note { padding: 10px 12px; font-size: .8rem; }
  .mk__list { gap: 6px; }
  .mk__ck, .mk__qrow { padding: 9px 11px; font-size: .82rem; gap: 10px; border-radius: 10px; }
  .mk__dot { flex-basis: 18px; width: 18px; height: 18px; font-size: .6rem; }
  .mk__steps { gap: 8px; }
  .mk__step { font-size: .82rem; line-height: 1.45; gap: 10px; }
  .mk__stepno { flex-basis: 22px; width: 22px; height: 22px; font-size: .66rem; }
  .mk__ans { padding: 10px 12px; font-size: .88rem; }
  .mk__foot { font-size: .78rem; }
  .mk__watch { padding: 12px 13px; }
  .mk__watch p { font-size: .84rem; }
  .mk__bubble { max-width: 92%; padding: 11px 13px; font-size: .84rem; }
  .mk__attach { max-width: 84%; padding: 10px 12px; gap: 10px; }
  .mk__attach-ico { flex-basis: 30px; width: 30px; height: 30px; }
  .mk__attach b { font-size: .82rem; }
  .mk__card { padding: 12px 13px; font-size: .86rem; line-height: 1.5; }
  .mk__strike { padding: 11px 13px; font-size: .8rem; }
  /* rows that only fit the desktop panel */
  .mk-m-hide { display: none !important; }
}


/* ==== 05-home.css ==== */
/* ==========================================================================
   05 — HOMEPAGE (`hm-`)
   Ported from "Rao Academy Homepage v2.dc.html". Desktop values are the
   design's; phone (<640) and tablet (<900) rules are ours.
   ========================================================================== */

.hm-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 24px); }
.hm-anchor { position: relative; display: block; top: -72px; height: 0; visibility: hidden; }

/* ---- shared bits ------------------------------------------------------ */
.hm-pill {
  display: inline-block;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1;
  padding: 7px 13px; border-radius: var(--r-pill);
  color: var(--deep); background: var(--faint-2);
}
.hm-pill--purple { color: #5B21B6; background: #F1ECFD; }
.hm-pill--blue { color: #1D4ED8; background: #E4EEFF; }
.hm-pill--green { color: #07734F; background: #DFF5EA; }
.hm-pill--amber { color: #9A5A06; background: #FFF1DC; }

.hm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 26px; border-radius: 14px; border: 1.5px solid transparent;
  font: 600 1rem/1 var(--font-body); text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.hm-btn--filled { background: var(--brand); color: #fff; }
.hm-btn--filled:hover { background: var(--deep); box-shadow: 0 10px 24px -12px rgba(109, 74, 255, .6); transform: translateY(-1px); }
.hm-btn--outline { background: #fff; color: var(--ink); border-color: var(--border-faint); }
.hm-btn--outline:hover { border-color: var(--border-brand-2); background: var(--faint-3); transform: translateY(-1px); }
.hm-btn:focus-visible { outline: 3px solid var(--border-brand-2); outline-offset: 2px; }

/* the demo well every card uses */
.hm-well {
  border: 1px solid var(--border-faint); border-radius: 20px;
  background: #FAF8FF; padding: 18px; min-width: 0;
}
.hm-well > * { display: block; width: 100%; }

/* ---- section heads ---------------------------------------------------- */
.hm-head { text-align: center; }
.hm-head h2 {
  margin: 0; font-weight: 800; font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  line-height: 1.1; letter-spacing: -.032em; color: var(--ink); text-wrap: balance;
}
.hm-head p { margin: 12px 0 0; font-size: 1.05rem; line-height: 1.55; color: var(--secondary); }

/* ---- hero ------------------------------------------------------------- */
.hm-hero {
  background:
    radial-gradient(120% 90% at 18% 0%, #F3EEFF 0%, rgba(243, 238, 255, 0) 62%),
    radial-gradient(90% 80% at 92% 12%, #EAF3FF 0%, rgba(234, 243, 255, 0) 58%),
    linear-gradient(180deg, #FBF9FF 0%, #FCFBFF 100%);
}
.hm-hero__in {
  max-width: 1180px; margin: 0 auto; padding: clamp(34px, 5vw, 56px) clamp(14px, 3vw, 24px) clamp(40px, 6vw, 64px);
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px, 4vw, 44px);
}
.hm-hero__copy { flex: 1 1 360px; min-width: 0; }
.hm-hero__game { flex: 1 1 420px; min-width: 0; }
.hm-hero h1 {
  margin: 22px 0 0; font-weight: 800; font-size: clamp(1.95rem, 3.6vw, 2.9rem);
  line-height: 1.07; letter-spacing: -.025em; color: var(--ink); text-wrap: balance;
}
.hm-hero__word { position: relative; display: inline-block; }
.hm-hero__word svg {
  position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .3em; overflow: visible;
}
.hm-hero__word path { stroke-dasharray: 200; stroke-dashoffset: 200; animation: hm-draw .9s .35s cubic-bezier(.3, .9, .3, 1) forwards; }
@keyframes hm-draw { to { stroke-dashoffset: 0; } }
.hm-hero__copy > p { margin: 18px 0 0; max-width: 46ch; font-size: 1.08rem; line-height: 1.66; color: var(--secondary); }
.hm-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hm-live {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 4px 10px;
  font-family: var(--font-mono); font-size: .56rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--secondary);
}
.hm-live__dot { width: 7px; height: 7px; border-radius: 50%; background: #12B76A; box-shadow: 0 0 0 3px rgba(18, 183, 106, .18); }
frog-game { display: block; width: 100%; min-height: 300px; }
frog-game:not(:defined) { aspect-ratio: 520 / 380; min-height: 0; border-radius: 20px; background: var(--tint); }

/* ---- subjects --------------------------------------------------------- */
.hm-subjects {
  background:
    linear-gradient(rgba(109, 74, 255, .05) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(109, 74, 255, .05) 1px, transparent 1px) 0 0 / 34px 34px,
    #fff;
  border-bottom: 1px solid var(--border-faint);
  padding: 44px 0 64px;
}
.hm-subject {
  position: relative; overflow: hidden; margin-top: 26px;
  border: 1.5px solid var(--border); border-radius: 26px;
  background: radial-gradient(85% 120% at 0% 0%, rgba(109, 74, 255, .18) 0%, rgba(109, 74, 255, .06) 34%, rgba(109, 74, 255, 0) 62%), #fff;
  box-shadow: 0 18px 44px -28px rgba(34, 26, 58, .35);
  padding: clamp(24px, 4.4vw, 56px) clamp(18px, 3.6vw, 44px);
  min-height: clamp(340px, 64vw, 420px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 36px; align-items: center;
}
.hm-subject--right {
  background: radial-gradient(85% 120% at 100% 0%, rgba(109, 74, 255, .18) 0%, rgba(109, 74, 255, .06) 34%, rgba(109, 74, 255, 0) 62%), #fff;
}
.hm-subject__text { min-width: 0; }
.hm-subject__text h3 {
  margin: 14px 0 0; font-weight: 800; font-size: 2.4rem; line-height: 1.08;
  letter-spacing: -.03em; color: var(--ink);
}
.hm-subject__text > p { margin: 12px 0 0; max-width: 40ch; font-size: 1.04rem; line-height: 1.62; color: var(--secondary); }
.hm-chips { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.hm-chips li {
  font-size: .84rem; font-weight: 500; color: var(--secondary);
  border: 1px solid var(--border-faint); border-radius: var(--r-pill);
  padding: 6px 12px; background: #fff;
}
.hm-subject__more {
  position: absolute; left: clamp(16px, 3vw, 44px); bottom: 26px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .9rem; font-weight: 600; color: #5B21B6; text-decoration: none;
}
.hm-subject--right .hm-subject__more { left: auto; right: clamp(16px, 3vw, 44px); }
.hm-subject__more svg { transition: transform .15s ease; }
.hm-subject__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.hm-subject__more:hover svg { transform: translateX(3px); }
.hm-subject__more:focus-visible { outline: 3px solid var(--border-brand-2); outline-offset: 3px; border-radius: 6px; }

/* the space well for Social Science */
.hm-well--space { position: relative; padding: 0; overflow: hidden; background: #0d1017; }
.hm-orbits { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm-solar {
  position: relative; display: block; width: 100%; aspect-ratio: 1320 / 900;
  border: 0; border-radius: 18px; pointer-events: none; background: transparent;
}

/* ---- parents' report -------------------------------------------------- */
.hm-parents { padding: 44px 0 64px; }
.hm-report {
  position: relative; overflow: hidden; margin-top: 26px;
  border: 1.5px solid var(--border); border-radius: 26px;
  background: radial-gradient(85% 120% at 0% 0%, rgba(109, 74, 255, .18) 0%, rgba(109, 74, 255, .06) 34%, rgba(109, 74, 255, 0) 62%), #fff;
  box-shadow: 0 18px 44px -28px rgba(34, 26, 58, .35);
  padding: clamp(24px, 4.4vw, 56px) clamp(18px, 3.6vw, 44px);
  min-height: clamp(340px, 64vw, 420px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 36px; align-items: center;
}
.hm-report__text { min-width: 0; }
.hm-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-tab {
  font-family: var(--font-mono); font-size: .66rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; line-height: 1; padding: 7px 13px; border-radius: var(--r-pill);
  border: 1.5px solid var(--border-faint); background: #fff; color: var(--secondary);
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hm-tab:hover { border-color: var(--border-brand); color: var(--deep); }
.hm-tab.is-active, .hm-tab[aria-selected="true"] { background: #F1ECFD; color: #5B21B6; border-color: #C9B8F5; }
.hm-tab:focus-visible { outline: 3px solid var(--border-brand-2); outline-offset: 2px; }
.hm-report__text h3 {
  margin: 18px 0 0; font-weight: 800; font-size: 2.4rem; line-height: 1.08;
  letter-spacing: -.03em; color: var(--ink);
}
.hm-report__text > p { margin: 12px 0 0; max-width: 40ch; font-size: 1.04rem; line-height: 1.62; color: var(--secondary); }

/* ---- parents' words --------------------------------------------------- */
.hm-quotes { padding: 52px 0 24px; border-top: 1px solid var(--border-faint); }
.hm-label { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.hm-label span {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--secondary); white-space: nowrap;
}
.hm-label::after { content: ""; flex: 1; height: 1px; background: var(--border-faint); }
.hm-quotes h2 {
  margin: 0; font-weight: 800; font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  line-height: 1.1; letter-spacing: -.032em; color: var(--ink);
}
.hm-quotes__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 18px; margin-top: 26px;
}
.hm-quote {
  margin: 0; display: flex; flex-direction: column; gap: 14px;
  border: 1px dashed #C9BFE4; border-radius: 20px; background: #FAF8FF; padding: 26px 24px;
}
.hm-quote blockquote { margin: 0; }
.hm-quote blockquote p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--ink); }
.hm-quote figcaption { margin-top: auto; font-size: .88rem; color: var(--secondary); }

/* ---- contact ---------------------------------------------------------- */
.hm-contact { padding: 52px 0 24px; border-top: 1px solid var(--border-faint); }
.hm-contact__card {
  position: relative; overflow: hidden;
  border: 1.5px solid var(--border); border-radius: 26px;
  background: radial-gradient(85% 120% at 0% 0%, rgba(109, 74, 255, .18) 0%, rgba(109, 74, 255, .06) 34%, rgba(109, 74, 255, 0) 62%), #fff;
  box-shadow: 0 18px 44px -28px rgba(34, 26, 58, .35);
  padding: clamp(22px, 4vw, 40px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 32px; align-items: center;
}
.hm-contact__card > div { min-width: 0; }
.hm-contact__card h2 {
  margin: 0; font-weight: 800; font-size: clamp(1.7rem, 2.9vw, 2.2rem);
  line-height: 1.12; letter-spacing: -.03em; color: var(--ink);
}
.hm-contact__card > div > p { margin: 12px 0 0; max-width: 44ch; font-size: 1.04rem; line-height: 1.6; color: var(--secondary); }
.hm-contact__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hm-contact__actions .hm-btn { padding: 14px 24px; }
.hm-contact__card > div > p.hm-contact__note {
  margin: 14px 0 0; max-width: none;
  font-family: var(--font-mono); font-size: .6rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--secondary); line-height: 1.5;
}
.hm-promises { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hm-promises li { display: flex; align-items: flex-start; gap: 10px; font-size: .96rem; line-height: 1.5; color: var(--secondary); }
.hm-check {
  flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%;
  background: #DCF7E8; display: inline-flex; align-items: center; justify-content: center;
}

/* ---- tablet (<900) ---------------------------------------------------- */
@media (max-width: 899.98px) {
  .hm-subject, .hm-report { min-height: 0; gap: 26px; }
  .hm-subject { padding-bottom: calc(clamp(24px, 4.4vw, 56px) + 34px); } /* room for the syllabus link */
  .hm-subject__text h3, .hm-report__text h3 { font-size: clamp(1.7rem, 4.6vw, 2.4rem); }
}
/* once a card can no longer hold two 300px columns it stacks: the text reads
   first regardless of the design's left/right alternation, and the link
   follows it on the left */
@media (max-width: 759.98px) {
  .hm-subject, .hm-report { grid-template-columns: minmax(0, 1fr); }
  .hm-subject--right .hm-subject__text { order: -1; }
  .hm-subject--right .hm-subject__more { left: clamp(16px, 3vw, 44px); right: auto; }
}

/* ---- phone (<640) ----------------------------------------------------- */
@media (max-width: 639.98px) {
  .hm-hero__in { padding-top: 26px; padding-bottom: 34px; gap: 26px; }
  .hm-hero__copy, .hm-hero__game { flex-basis: 100%; }
  .hm-hero h1 { font-size: clamp(1.85rem, 8.4vw, 2.3rem); margin-top: 18px; }
  .hm-hero__copy > p { font-size: 1rem; }
  .hm-hero__actions .hm-btn { flex: 1 1 140px; padding: 14px 18px; }
  frog-game { min-height: 0; }
  .hm-subjects, .hm-parents { padding: 36px 0 44px; }
  .hm-head h2, .hm-quotes h2 { font-size: clamp(1.7rem, 8vw, 2.1rem); }
  .hm-head p { font-size: 1rem; }
  .hm-subject, .hm-report { margin-top: 20px; padding: 22px 16px; gap: 22px; border-radius: 22px; }
  .hm-subject { padding-bottom: calc(22px + 40px); }
  .hm-well { padding: 12px; border-radius: 16px; }
  .hm-subject__text > p, .hm-report__text > p { font-size: .98rem; }
  .hm-subject__more { left: 16px; bottom: 20px; }
  .hm-quotes, .hm-contact { padding: 40px 0 18px; }
  .hm-quote { padding: 22px 18px; }
  .hm-contact__card { padding: 22px 18px; gap: 22px; border-radius: 22px; }
  .hm-contact__actions .hm-btn { flex: 1 1 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-hero__word path { animation: none; stroke-dashoffset: 0; }
  .hm-btn, .hm-subject__more svg, .hm-tab { transition: none; }
}


/* ==== 06-worksheets.css ==== */
/* ==========================================================================
   06 — worksheets (ws-*)
   Class index (tables) · class + subject hub (chapter cards) · chapter play.
   Values lifted from the three Worksheets design references.
   ========================================================================== */

/* ---- page ground: the designs' 34px purple grid ---------------------- */
.ws-page {
  background-color: var(--page);
  background-image: linear-gradient(rgba(109, 74, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109, 74, 255, .05) 1px, transparent 1px);
  background-size: 34px 34px;
  padding-bottom: 8px;
}
.ws-wrap { max-width: 860px; margin: 0 auto; padding: 0 clamp(12px, 3vw, 24px); }
.ws-wrap--wide { max-width: 1040px; }

/* ---- page header (index) --------------------------------------------- */
.ws-head { padding: 48px 0 22px; text-align: center; }
.ws-head__h1 { font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -.03em; }
.ws-head__p { margin-top: 14px; font-size: 1.06rem; line-height: 1.6; color: var(--secondary); }

/* ---- breadcrumb ------------------------------------------------------ */
.ws-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 22px 0 0;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--secondary);
}
.ws-crumbs a { color: inherit; text-decoration: none; }
.ws-crumbs a:hover { color: var(--deep); }
.ws-crumbs__here { color: var(--deep); }

/* ---- the card -------------------------------------------------------- */
.ws-card {
  border: 1.5px solid var(--border); border-radius: 28px; background: #fff;
  box-shadow: 0 22px 54px -34px rgba(34, 26, 58, .32);
  padding: clamp(20px, 3vw, 28px) clamp(14px, 2.6vw, 26px) 30px;
}
.ws-crumbs + .ws-card { margin-top: 18px; }
.ws-card__head--index { padding: 0 0 18px; }
.ws-card__head--hub { padding: 0 0 20px; }

/* ---- pill tab rows --------------------------------------------------- */
.ws-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.ws-card__head--index .ws-tabs--subjects { margin-top: 9px; padding-top: 11px; border-top: 1px solid #F1EDF8; }
.ws-card__head--hub .ws-tabs--classes { padding-bottom: 10px; }
.ws-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px;
  border: 1.5px solid var(--border-faint); background: #fff; color: var(--secondary);
  font-weight: 600; font-size: .76rem; line-height: 1.3; text-decoration: none;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.ws-pill:hover { border-color: var(--border-brand); color: var(--deep); }
.ws-pill.is-on, .ws-pill[aria-selected="true"] { background: var(--faint-2); color: var(--deep); border-color: var(--border-brand); }
.ws-pill__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.ws-card__head--hub .ws-tabs--subjects .ws-pill { padding: 6px 12px; font-size: .74rem; }
.ws-hub__h1 { margin-top: 14px; font-weight: 800; font-size: clamp(1.5rem, 2.3vw, 1.84rem); line-height: 1.15; letter-spacing: -.03em; }

/* ---- chapter tables (index) ------------------------------------------ */
.ws-panel[hidden] { display: none; }
.ws-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px 40px; }
.ws-table { width: 100%; border-collapse: collapse; font-size: .88rem; border: 1px solid var(--border-faint); align-self: start; }
.ws-table thead tr { border-bottom: 1.5px solid var(--border); background: var(--faint-3); }
.ws-table th {
  padding: 8px 12px; text-align: left;
  font-family: var(--font-mono); font-size: .58rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.ws-table th.ws-table__n { width: 34px; padding: 8px 10px; text-align: right; }
.ws-table th.ws-table__m { text-align: right; }
.ws-table th.ws-table__n, .ws-table th.ws-table__t, .ws-table td.ws-table__n, .ws-table td.ws-table__t { border-right: 1px solid var(--border-faint); }
.ws-table tbody tr { border-bottom: 1px solid #F1EDF8; }
.ws-table tbody tr:hover { background: var(--faint-3); }
.ws-table td.ws-table__n { padding: 9px 10px; text-align: right; font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }
.ws-table td.ws-table__t { padding: 9px 12px; font-weight: 400; line-height: 1.35; }
.ws-table td.ws-table__t a { color: var(--ink); text-decoration: none; }
.ws-table td.ws-table__t a:hover { color: var(--deep); text-decoration: underline; }
.ws-table td.ws-table__m { padding: 9px 12px; text-align: right; font-size: .8rem; color: var(--secondary); white-space: nowrap; }
.ws-panel__more { margin-top: 14px; font-size: .86rem; }
.ws-panel__more a { color: var(--deep); text-decoration: none; }
.ws-panel__more a:hover { text-decoration: underline; }
.ws-empty {
  margin-top: 16px; padding: 26px; text-align: center;
  border: 1.5px dashed var(--border); border-radius: 16px; background: #fff;
  font-size: .9rem; color: var(--secondary);
}

/* ---- chapter cards (hub) --------------------------------------------- */
.ws-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.ws-chip {
  display: flex; flex-direction: column;
  border: 1.5px solid var(--border-faint); border-radius: 20px; background: #fff;
  box-shadow: 0 12px 28px -24px rgba(34, 26, 58, .4);
  overflow: hidden; color: inherit; text-decoration: none;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
a.ws-chip:hover { transform: translateY(-2px); border-color: var(--border-brand); box-shadow: 0 18px 32px -22px rgba(34, 26, 58, .45); }
.ws-chip__art {
  display: block; height: 92px; border-bottom: 1px solid #F1EDF8;
  background: var(--art) center / var(--art-size) no-repeat,
    radial-gradient(var(--art-dot) 1.3px, transparent 1.4px) 0 0 / 13px 13px,
    #FCFBFF;
}
.ws-chip--soon .ws-chip__art { filter: saturate(.55); opacity: .8; }
.ws-chip__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 15px; flex: 1; }
.ws-chip__n { font-family: var(--font-mono); font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--secondary); }
.ws-chip__t { font-weight: 600; font-size: .99rem; line-height: 1.35; letter-spacing: -.012em; text-wrap: pretty; }
.ws-chip__m { margin-top: auto; padding-top: 8px; font-size: .82rem; color: var(--secondary); }

/* ---- unboxed FAQ ----------------------------------------------------- */
.ws-faq { padding: 34px 0 0; }
.ws-faq--chapter { padding-top: 36px; }
.ws-faq__title { font-weight: 800; font-size: 1.2rem; letter-spacing: -.025em; }
.ws-faq__list { margin-top: 8px; border-bottom: 1px solid var(--border-faint); }
.ws-faq__item { border-top: 1px solid var(--border-faint); }
.ws-faq__item.is-open { background: var(--faint-3); }
.ws-faq__h { font: inherit; }
.ws-faq__q { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 18px 4px; cursor: pointer; }
.ws-faq__marker {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border-faint); background: #fff; color: var(--muted);
  display: grid; place-items: center;
}
.ws-faq__item.is-open .ws-faq__marker { border-color: var(--border-brand); background: var(--faint-2); color: var(--brand); }
.ws-faq__q[aria-expanded="true"] .ws-faq__marker .v { display: none; }
.ws-faq__text { flex: 1; font-weight: 400; font-size: 1.02rem; line-height: 1.4; color: var(--ink-2); }
.ws-faq__item.is-open .ws-faq__text { color: var(--ink); }
.ws-faq__a[hidden] { display: none; }
.ws-faq__a p { margin: -4px 0 20px; padding-left: 42px; max-width: 68ch; font-size: .92rem; line-height: 1.65; color: var(--secondary); }

/* ---- the lilac band (trial / stuck) ---------------------------------- */
.ws-band {
  margin-top: 28px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  border: 1.5px solid var(--border-brand-2); border-radius: 22px; background: #F5F1FE;
  padding: 20px 24px;
}
.ws-band__text { flex: 1 1 260px; }
.ws-band__h { font-weight: 800; font-size: 1.12rem; letter-spacing: -.02em; }
.ws-band__p { margin-top: 6px; font-size: .96rem; line-height: 1.55; color: var(--ink-2); max-width: 52ch; }
.ws-band__cta {
  flex: 1 1 auto; max-width: 220px; text-align: center;
  padding: 12px 20px; border-radius: 13px; background: var(--brand); color: #fff;
  font-weight: 600; font-size: .94rem; white-space: nowrap; text-decoration: none;
  transition: background .15s, transform .15s;
}
.ws-band__cta:hover { background: var(--deep); transform: translateY(-1px); }
.ws-band__cta--sm { padding: 11px 20px; font-size: .92rem; }
.ws-teaches + .ws-band { margin-top: 30px; }

/* ---- chapter page ---------------------------------------------------- */
.ws-ch__head { padding: 0 0 22px; }
.ws-ch__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-tag {
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  background: var(--faint-2); border: 1.5px solid var(--border-brand-2); color: var(--deep);
  font-family: var(--font-mono); font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.ws-tag--green { background: #F2FBF7; border-color: #B7E4D2; color: #0A7D57; }
.ws-ch__h1 { margin-top: 14px; font-weight: 600; font-size: clamp(1.2rem, 1.7vw, 1.36rem); line-height: 1.3; letter-spacing: -.02em; text-wrap: pretty; }

.ws-sheets { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; padding-bottom: 14px; max-width: 780px; margin: 0 auto; }
.ws-pill--sheet { gap: 7px; padding: 6px 12px; font-size: .74rem; white-space: nowrap; text-align: left; }
.ws-pill__sub { font-weight: 500; font-size: .66rem; color: var(--muted); letter-spacing: .02em; }
.ws-pill--sheet.is-on .ws-pill__sub, .ws-pill--sheet[aria-selected="true"] .ws-pill__sub { color: var(--brand); }
.ws-pill--sheet.is-done::before { content: "✓"; font-size: .7rem; color: #0B9468; }

.ws-sheet[hidden] { display: none; }
.ws-qs { display: flex; flex-direction: column; gap: 22px; max-width: 780px; margin: 0 auto; }

.ws-q {
  border: 2px solid #8B6BFF; border-radius: 20px; background: #fff;
  box-shadow: 0 0 0 4px rgba(109, 74, 255, .07), 0 10px 26px -16px rgba(109, 74, 255, .45);
  padding: clamp(16px, 2.4vw, 22px) clamp(14px, 2.6vw, 26px) 20px;
  transition: border-color .2s;
}
.ws-q.is-right { border-color: #8FDCBE; }
.ws-q.is-wrong { border-color: #EBC7D3; }
.ws-q__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ws-q__label { font-family: var(--font-round); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #A99CCF; }
.ws-q__ring {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: conic-gradient(var(--brand) var(--pct), #F0E9FB 0);
  display: grid; place-items: center;
}
.ws-q__ring-in {
  width: 36px; height: 36px; border-radius: 50%; background: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .76rem; color: var(--brand);
}
.ws-q__text {
  margin-top: 8px;
  font-family: var(--font-round); font-weight: 700; font-size: clamp(1rem, 1.1rem + .2vw, 1.125rem);
  line-height: 1.5; letter-spacing: .01em; color: var(--ink-soft); text-wrap: pretty;
}

/* options — MCQ */
.ws-q__opts { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr)); gap: 10px; }
.ws-opt {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 52px; padding: 12px 10px;
  border-radius: 12px; border: 2px solid #E7DDF8; background: #fff; color: var(--brand);
  font-family: var(--font-round); font-weight: 700; font-size: clamp(.9rem, .85rem + .3vw, .98rem); line-height: 1.25; text-align: center;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.ws-opt:hover { border-color: #C9B8F5; }
.ws-opt:active { transform: scale(.98); }
.ws-opt[aria-pressed="true"], .ws-opt.is-sel { background: var(--faint-2); border-color: var(--brand); }
.ws-opt.is-right { background: #EAFFF2; border-color: #0B9468; color: #0B9468; }
.ws-opt.is-wrong { background: #FFF0F3; border-color: #E4A3B6; color: #B04A6A; }
.ws-opt:disabled { cursor: default; }
.ws-opt:disabled:hover { border-color: #E7DDF8; }
.ws-opt.is-right:disabled:hover { border-color: #0B9468; }
.ws-opt.is-wrong:disabled:hover { border-color: #E4A3B6; }

/* options — order chips */
.ws-q__chips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; }
.ws-opt--chip {
  width: auto; height: auto; justify-content: flex-start; gap: 10px;
  padding: 12px 18px; font-size: 1.06rem; white-space: nowrap;
}
.ws-opt__n {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: #F0E9FB; color: #8A7BBD;
  font-family: var(--font-display); font-size: .8rem; font-weight: 700;
}
.ws-opt--chip.is-sel .ws-opt__n, .ws-opt--chip.is-right .ws-opt__n { background: var(--brand); color: #fff; }
.ws-opt--chip.is-right .ws-opt__n { background: #0B9468; }

/* foot: feedback + Check */
.ws-q__foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.ws-q__foot:empty { display: none; }
.ws-q__fb {
  margin-right: auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 12px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; line-height: 1.3;
}
.ws-q__fb[hidden] { display: none; }
.ws-q__fb::before { content: attr(data-icon); font-size: 1.4rem; line-height: 1; }
.ws-q__fb.is-right { color: #0B9468; background: linear-gradient(135deg, #DCFFE9, #EAFFF2); }
.ws-q__fb.is-wrong { color: #B04A6A; background: linear-gradient(135deg, #FFF0F3, #FFF6F7); }
.ws-q__check {
  margin-left: auto;
  font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; color: #fff;
  background: linear-gradient(90deg, #FF9D4D, #FF6B9D); border-radius: 18px; padding: 13px 28px;
  box-shadow: 0 5px 0 #D4477A; cursor: pointer;
  transition: transform .12s, box-shadow .12s, opacity .15s;
}
.ws-q__check:hover { transform: translateY(-1px); box-shadow: 0 6px 0 #D4477A; }
.ws-q__check:active { transform: translateY(3px); box-shadow: 0 2px 0 #D4477A; }
.ws-q__check[hidden] { display: none; }

/* finished band */
.ws-done {
  margin: 18px auto 0; max-width: 780px;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  border: 1.5px solid #B7E4D2; border-radius: 20px; background: #F2FBF7; padding: 18px 22px;
}
.ws-done[hidden] { display: none; }
.ws-done__text { flex: 1 1 240px; }
.ws-done__h { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: #0A7D57; }
.ws-done__p { margin-top: 4px; font-size: .95rem; color: var(--ink-2); }
.ws-done__again { padding: 11px 18px; border-radius: 13px; border: 1.5px solid #B7E4D2; background: #fff; font-weight: 600; font-size: .92rem; color: #0A7D57; cursor: pointer; }
.ws-done__again:hover { background: #EAFFF2; }
.ws-done__next { padding: 11px 20px; border-radius: 13px; background: var(--brand); color: #fff; font-weight: 600; font-size: .92rem; white-space: nowrap; cursor: pointer; }
.ws-done__next:hover { background: var(--deep); }

/* siblings */
.ws-sibs { padding: 30px 0 0; }
.ws-sibs__h { font-weight: 800; font-size: 1.2rem; letter-spacing: -.025em; }
.ws-sibs__list { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.ws-sib {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-radius: 999px;
  border: 1.5px solid var(--border-faint); background: #fff; color: var(--ink-2);
  font-size: .92rem; font-weight: 400; text-decoration: none;
  transition: border-color .15s, background .15s;
}
a.ws-sib:hover { border-color: var(--border-brand); background: var(--faint-3); }
.ws-sib.is-on { background: #F5F1FE; border-color: var(--border-brand-2); color: var(--ink); font-weight: 600; }
.ws-sib--soon { color: var(--muted); }
.ws-sib__n { font-family: var(--font-mono); font-size: .6rem; font-weight: 600; color: var(--secondary); }

/* in this chapter */
.ws-teaches { padding: 30px 0 0; }
.ws-teaches__h { font-size: .62rem; letter-spacing: .14em; color: var(--secondary); }
.ws-teaches__list { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.ws-teaches__list li { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border-faint); background: #fff; font-size: .8rem; color: var(--secondary); }

/* ---- responsive ------------------------------------------------------ */
@media (max-width: 899.98px) {
  .ws-head { padding-top: 36px; }
}
@media (max-width: 639.98px) {
  .ws-head { padding: 30px 0 18px; }
  .ws-card { border-radius: 22px; padding-bottom: 22px; }
  .ws-tables { gap: 14px; }
  .ws-table { font-size: .86rem; }
  .ws-table td.ws-table__t { padding: 9px 10px; }
  .ws-chips { gap: 12px; }
  .ws-chips { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
  .ws-chip__art { height: 78px; }
  .ws-faq__q { gap: 12px; padding: 16px 2px; }
  .ws-faq__text { font-size: .98rem; }
  .ws-faq__a p { padding-left: 34px; }
  .ws-band { padding: 18px; border-radius: 18px; }
  .ws-band__cta { max-width: none; flex-basis: 100%; }
  .ws-sheets { justify-content: flex-start; }
  .ws-pill--sheet { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ws-q { border-radius: 16px; }
  .ws-q__opts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); }
  .ws-q__ring { width: 40px; height: 40px; }
  .ws-q__ring-in { width: 32px; height: 32px; font-size: .7rem; }
  .ws-opt--chip { white-space: normal; font-size: 1rem; padding: 11px 14px; }
  .ws-q__fb { flex: 1 1 100%; margin-right: 0; }
  .ws-q__check { margin-left: auto; width: 100%; text-align: center; }
  .ws-done { padding: 16px 18px; }
  .ws-done__again, .ws-done__next { flex: 1 1 auto; text-align: center; }
  .ws-sib { font-size: .88rem; padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ws-chip, .ws-opt, .ws-q__check, .ws-band__cta, .ws-q { transition: none; }
  a.ws-chip:hover, .ws-band__cta:hover, .ws-q__check:hover { transform: none; }
}


/* ==== 07-pages.css ==== */
/* ---------------------------------------------------------------
   pages — articles (index + detail), pricing, FAQ, legal
   Values are the design references' own; the media queries are what
   the design tool could not emit.
   --------------------------------------------------------------- */

/* ---- page backgrounds ------------------------------------------ */
body.page-articles {
  background: #fff;
}
.legal-bg {
  background-color: #fff;
  background-image: radial-gradient(120% 90% at 18% 0%, rgba(248, 245, 255, .3) 0%, rgba(243, 238, 255, 0) 62%), linear-gradient(rgba(109, 74, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(109, 74, 255, .05) 1px, transparent 1px);
  background-size: auto, 34px 34px, 34px 34px;
}
.pricing-bg, .faq-bg, .faq-bg--head {
  background: #fff;
}
.wrap--pricing { max-width: 1180px; padding: 0 clamp(12px, 3vw, 24px); }
.wrap--faq, .wrap--legal { max-width: 860px; padding: 0 clamp(12px, 3vw, 24px); }
.wrap--article { max-width: 1180px; padding: 0 clamp(14px, 3vw, 24px); }

/* shared page header (pricing / faq / legal) */
.page-head { padding: 56px 0 36px; text-align: center; }
.page-head h1 { font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -.03em; }
.page-head p { margin-top: 14px; font-size: 1.06rem; line-height: 1.6; color: var(--secondary); }
.page-head--faq { padding: 48px 0 22px; }
.page-head--faq h1 { font-size: clamp(1.7rem, 3.4vw, 2.8rem); margin-top: 20px; text-wrap: balance; }
.page-head--faq p { margin-top: 16px; font-size: 1.04rem; }
.page-head--legal h1 { margin-top: 20px; }
.page-head--legal p { font-size: 1.04rem; }
.page-head--legal b { color: var(--ink); font-weight: 600; }

/* the small mono label used all over the article */
.lbl { display: flex; align-items: center; gap: 8px; font-size: .62rem; letter-spacing: .14em; color: var(--secondary); }
.lbl svg { width: 14px; height: 14px; flex: none; }
.lbl--deep { color: var(--deep); }
.lbl--green { color: #0A7D57; }
.lbl--amber { color: #B45309; }

/* =================================================================
   ARTICLES — index
   ================================================================= */
.art-head { padding: 48px 0 22px; text-align: center; }
.art-head h1 { font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -.03em; }
.art-head p { margin-top: 14px; font-size: 1.06rem; line-height: 1.6; color: var(--secondary); }

.cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; padding-bottom: 26px; }
.cat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  font-weight: 600; font-size: .78rem; line-height: 1.2;
  background: #fff; color: var(--secondary); border: 1.5px solid var(--border-faint);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cat:hover { color: var(--ink); border-color: var(--border-brand-2); }
.cat.is-on { background: var(--faint-2); color: var(--ink); border-color: var(--border-brand-2); }
.cat__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cat__n { font-size: .6rem; letter-spacing: .04em; color: var(--secondary); }

.posts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 20px;
  padding: 6px 0 56px; max-width: 1040px; margin: 0 auto;
}
.posts__empty { grid-column: 1 / -1; text-align: center; color: var(--secondary); padding: 30px 0; }
.posts__empty[hidden], .post[hidden] { display: none; }

.post {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 22px; background: #fff;
  /* --shadow-glow's 28px blur bridges the 20px grid gap between cards and
     reads as a solid purple band; a tighter reach keeps the glow on the
     card itself. */
  box-shadow: 0 0 0 1px rgba(109, 74, 255, .07), 0 0 14px -6px rgba(109, 74, 255, .22), var(--shadow-soft);
  overflow: hidden; color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.post:hover { color: inherit; border-color: var(--border-brand-2); box-shadow: 0 0 0 1px rgba(109, 74, 255, .1), 0 0 20px -6px rgba(109, 74, 255, .28), var(--shadow-soft); transform: translateY(-2px); }
.post__art { height: 160px; }
.post__body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post__cat { display: flex; align-items: center; gap: 8px; font-size: .62rem; color: var(--secondary); }
.post__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.post h3 { font-weight: 600; font-size: 1.06rem; letter-spacing: -.012em; line-height: 1.35; text-wrap: pretty; }
.post p { font-size: .78rem; line-height: 1.55; color: var(--secondary); }
.post--small .post__art { height: 140px; }
.post--small .post__body { padding: 18px 20px 20px; gap: 9px; }
.post--small .post__cat { font-size: .6rem; }
.post--small h3 { font-size: 1.02rem; }
.post__foot { margin-top: auto; padding-top: 8px; font-size: .6rem; letter-spacing: .1em; color: var(--secondary); }

.pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; padding-bottom: 46px; }
.pager[hidden] { display: none; }
.pager__step {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 12px;
  border: 1.5px solid var(--border-faint); background: #fff;
  font-weight: 600; font-size: .86rem; color: var(--ink);
}
.pager__step svg { width: 14px; height: 14px; }
.pager__step:disabled { color: var(--secondary); cursor: default; }
.pager__step:not(:disabled):hover { border-color: var(--border-brand-2); }
.pager__pages { display: inline-flex; gap: 8px; }
.pager__n {
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: 12px;
  font-weight: 600; font-size: .86rem;
  color: var(--secondary); border: 1.5px solid var(--border-faint); background: #fff;
}
.pager__n.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }

.newsletter {
  max-width: 840px; margin: 0 auto 56px;
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
  border: 1.5px solid var(--border); border-radius: 24px; background: #fff;
  box-shadow: 0 18px 44px -28px rgba(34, 26, 58, .28);
  padding: 30px 32px;
}
.newsletter h2 { font-weight: 800; font-size: 1.32rem; letter-spacing: -.02em; }
.newsletter p { margin-top: 8px; font-size: .98rem; line-height: 1.55; color: var(--secondary); max-width: 44ch; }
.newsletter__form { display: flex; flex-wrap: wrap; gap: 10px; }
.newsletter__form input {
  font: inherit; font-size: .95rem; padding: 13px 16px; border-radius: 13px;
  border: 1.5px solid var(--border-faint); background: var(--page); color: var(--ink);
  min-width: 220px; flex: 1 1 220px;
}
.newsletter__form input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.newsletter__form button {
  padding: 13px 22px; border-radius: 13px; background: var(--brand); color: #fff; font-weight: 600; font-size: .95rem;
  transition: background-color .2s ease;
}
.newsletter__form button:hover { background: var(--deep); }

/* =================================================================
   ARTICLES — detail
   ================================================================= */
.progress { position: sticky; top: 0; z-index: 30; height: 2px; background: var(--border-faint); }
.progress__bar { height: 2px; width: 0; background: var(--brand); }

.article {
  max-width: 860px; margin: 28px auto 0;
  background: #fff; border: 1.5px solid var(--border); border-radius: 28px;
  box-shadow: 0 22px 54px -34px rgba(34, 26, 58, .32);
  padding: 0 0 48px;
}
.article__head { max-width: 720px; margin: 0 auto; padding: 48px 24px 26px; }
.article__row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.article__back { display: inline-flex; align-items: center; gap: 7px; font-size: .66rem; color: var(--secondary); }
.article__back svg { width: 13px; height: 13px; }
.article__back:hover { color: var(--deep); }
.article__spacer { flex: 1; }
.article__meta { display: flex; align-items: center; gap: 8px; font-size: .64rem; color: var(--secondary); }
.article h1 { margin-top: 22px; font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.06; letter-spacing: -.035em; text-wrap: pretty; }
.article__dek { margin-top: 14px; font-size: 1.02rem; line-height: 1.55; color: var(--secondary); }
.article__hero { margin: 0 40px 40px; border: 1.5px solid var(--border-faint); border-radius: 20px; background: #FAF8FF; overflow: hidden; }
.article__hero > div { height: 340px; }
.article__body { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.article__body ul, .article__body ol { list-style: none; padding: 0; }

.article__p { font-size: 1.12rem; line-height: 1.72; color: var(--ink-2); text-wrap: pretty; }
.article__p + .article__p, .article__p--after-list { margin-top: 20px; }
.article__p--after-list { margin-top: 26px; }
.article__h2 { margin-top: 38px; font-weight: 800; font-size: 1.5rem; letter-spacing: -.025em; }
.article__h2 + .article__p { margin-top: 14px; }

.inshort { margin-bottom: 30px; border: 1.5px solid var(--border-brand-2); border-radius: 20px; background: #F5F1FE; padding: 22px 24px 24px; }
.inshort ul { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.inshort li { display: flex; gap: 11px; font-size: 1.02rem; line-height: 1.55; color: var(--ink-2); }
.inshort li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-top: 8px; }

.compare {
  margin: 30px 0; border: 1.5px solid var(--border); border-radius: 22px; background: #fff;
  box-shadow: 0 14px 34px -26px rgba(34, 26, 58, .3); overflow: hidden;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.compare__side { padding: 24px 24px 26px; border-right: 1px solid var(--border-faint); }
.compare__side:last-child { border-right: 0; }
.compare__side--tint { background: #FAF8FF; }
.compare__big { margin-top: 14px; height: 118px; display: grid; place-items: center; font-weight: 800; font-size: 2.6rem; letter-spacing: -.04em; color: var(--ink); }
.compare__array { margin-top: 14px; height: 118px; display: grid; grid-template-columns: repeat(8, 12px); grid-template-rows: repeat(7, 12px); gap: 3px; align-content: center; justify-content: center; }
.compare__array i { display: block; width: 12px; height: 12px; border-radius: 3px; }
.compare p { margin-top: 6px; font-size: .95rem; line-height: 1.55; color: var(--secondary); }
@media (max-width: 639.98px) {
  .compare__side { border-right: 0; border-bottom: 1px solid var(--border-faint); }
  .compare__side:last-child { border-bottom: 0; }
}

.pull { margin: 34px 0; padding: 26px 30px; border-left: 4px solid var(--brand); background: #F5F1FE; border-radius: 0 18px 18px 0; }
.pull p { font-weight: 600; font-size: 1.28rem; line-height: 1.45; letter-spacing: -.02em; }

.proscons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; margin: 34px 0; }
.proscons__card { border: 1.5px solid; border-radius: 20px; padding: 20px 22px 22px; }
.proscons__card--pro { border-color: #B7E4D2; background: #F2FBF7; }
.proscons__card--con { border-color: #F3D9A8; background: #FEF8EE; }
.proscons ul { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.proscons li { display: flex; gap: 10px; font-size: .99rem; line-height: 1.5; color: var(--ink-2); }
.proscons li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; }
.proscons__card--pro li::before { background: #0D9F6E; }
.proscons__card--con li::before { background: #D97706; }

.checks { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.checks li { display: flex; gap: 14px; padding: 18px 20px; border: 1.5px solid var(--border-faint); border-radius: 16px; background: #fff; }
.checks__n { flex: none; width: 26px; height: 26px; border-radius: 9px; background: var(--faint-2); color: var(--deep); font-size: .7rem; letter-spacing: 0; display: grid; place-items: center; }
.checks__q { font-weight: 600; font-size: 1.02rem; line-height: 1.4; }
.checks p { margin-top: 5px; font-size: .96rem; line-height: 1.55; color: var(--secondary); }

.quiz { margin: 34px 0; border: 1.5px solid var(--brand); border-radius: 22px; background: #fff; box-shadow: 0 16px 38px -28px rgba(109, 74, 255, .6); overflow: hidden; }
.quiz__bar { display: flex; align-items: center; gap: 8px; padding: 12px 22px; background: var(--brand); color: #fff; font-size: .62rem; letter-spacing: .14em; }
.quiz__bar svg { width: 15px; height: 15px; }
.quiz__body { padding: 22px 24px 24px; }
.quiz h3 { font-weight: 600; font-size: 1.1rem; line-height: 1.4; }
.quiz__opts { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.quiz__opt {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  padding: 13px 15px; border-radius: 14px; border: 1.5px solid var(--border-faint); background: #fff;
  font-size: .99rem; line-height: 1.45; color: var(--ink);
  transition: border-color .2s ease, background-color .2s ease;
}
.quiz__opt:hover { border-color: var(--border-brand-2); }
.quiz__tag { flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--faint-2); color: var(--deep); font-size: .68rem; letter-spacing: 0; display: grid; place-items: center; transition: background-color .2s ease, color .2s ease; }
.quiz__opt.is-right { background: #F2FBF7; border-color: #0D9F6E; }
.quiz__opt.is-right .quiz__tag { background: #0D9F6E; color: #fff; }
.quiz__opt.is-wrong { background: #FEF8EE; border-color: #D97706; }
.quiz__opt.is-wrong .quiz__tag { background: #D97706; color: #fff; }
.quiz__explain { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: #F5F1FE; font-size: .97rem; line-height: 1.55; color: var(--ink-2); }
.quiz__explain[hidden] { display: none; }

.checklist { margin: 34px 0; border: 1.5px solid var(--border); border-radius: 22px; background: #fff; padding: 22px 24px 24px; }
.checklist ul { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.checklist__item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 8px; border-radius: 12px; font-size: 1.01rem; line-height: 1.5; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease;
}
.checklist__item:hover { background: var(--faint-3); }
.checklist__box { flex: none; width: 21px; height: 21px; border-radius: 7px; border: 1.5px solid var(--border); background: #fff; display: grid; place-items: center; transition: background-color .2s ease, border-color .2s ease; }
.checklist__box svg { width: 12px; height: 12px; opacity: 0; transition: opacity .2s ease; }
.checklist__item.is-done { color: var(--secondary); text-decoration: line-through; }
.checklist__item.is-done .checklist__box { background: var(--brand); border-color: var(--brand); }
.checklist__item.is-done .checklist__box svg { opacity: 1; }

.tryhome {
  margin: 36px 0 8px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
  border: 1.5px solid var(--border); border-radius: 22px; background: #fff;
  box-shadow: 0 18px 44px -28px rgba(34, 26, 58, .28); padding: 26px 28px;
}
.tryhome h3 { margin-top: 9px; font-weight: 800; font-size: 1.22rem; letter-spacing: -.02em; }
.tryhome p { margin-top: 7px; font-size: .98rem; line-height: 1.55; color: var(--secondary); max-width: 46ch; }
.tryhome__cta { display: inline-block; padding: 13px 22px; border-radius: 13px; background: var(--brand); color: #fff; font-weight: 600; font-size: .95rem; white-space: nowrap; transition: background-color .2s ease; }
.tryhome__cta:hover { background: var(--deep); color: #fff; }

.kit-divider { display: flex; align-items: center; gap: 14px; margin: 44px 0 22px; }
.kit-divider .mono { font-size: .62rem; letter-spacing: .14em; color: var(--secondary); }
.kit-divider__line { flex: 1; height: 1px; background: var(--border-faint); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.tag { padding: 6px 12px; border-radius: var(--r-pill); font-size: .62rem; letter-spacing: .1em; background: #fff; border: 1.5px solid var(--border-faint); color: var(--secondary); }
.tag.is-on { background: var(--faint-2); border-color: var(--border-brand-2); color: var(--deep); }

.mistake { display: flex; gap: 14px; margin-bottom: 28px; padding: 18px 20px; border-radius: 16px; background: #FEF8EE; border: 1.5px solid #F3D9A8; }
.mistake__icon { flex: none; width: 19px; height: 19px; color: #B45309; margin-top: 1px; }
.mistake p { margin-top: 6px; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }

.terms { margin-bottom: 28px; border: 1.5px solid var(--border); border-radius: 20px; background: #fff; padding: 20px 22px 22px; }
.terms dl { margin: 12px 0 0; display: flex; flex-direction: column; gap: 12px; }
.terms__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: baseline; }
.terms dt { font-weight: 600; font-size: .98rem; color: var(--deep); border-bottom: 2px dotted var(--border-brand-2); padding-bottom: 2px; justify-self: start; }
.terms dd { margin: 0; font-size: .98rem; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 639.98px) {
  .terms__row { grid-template-columns: 1fr; gap: 6px; }
}

.steps { margin-bottom: 28px; }
.steps .lbl { margin-bottom: 12px; }
.steps ol { display: flex; flex-direction: column; gap: 12px; }
.steps__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; border: 1.5px solid var(--border-faint); border-radius: 18px; background: #fff; padding: 14px 18px 14px 14px; }
.steps__art { height: 72px; border-radius: 12px; }
.steps__head { display: flex; align-items: center; gap: 10px; }
.steps__n { flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--brand); color: #fff; font-size: .66rem; letter-spacing: 0; display: grid; place-items: center; }
.steps__h { font-weight: 600; font-size: 1.02rem; }
.steps p { margin-top: 5px; font-size: .96rem; line-height: 1.5; color: var(--secondary); }
@media (max-width: 479.98px) {
  .steps__row { grid-template-columns: 1fr; gap: 12px; }
  .steps__art { height: 64px; }
}

.worked { margin-bottom: 28px; border: 1.5px solid var(--border); border-radius: 20px; overflow: hidden; background: #fff; }
.worked__head { padding: 12px 20px; background: #FAF8FF; border-bottom: 1.5px solid var(--border-faint); font-size: .62rem; color: var(--secondary); }
.worked__body { padding: 20px 22px; font-family: var(--font-mono); font-size: .95rem; line-height: 1.9; color: var(--ink); overflow-x: auto; }
.worked__body .is-dim { color: var(--secondary); }
.worked__body .is-final { font-weight: 600; color: var(--deep); }

.board-table { margin-bottom: 28px; border: 1.5px solid var(--border); border-radius: 20px; overflow: hidden; }
.board-table__head, .board-table__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.board-table__head { background: #FAF8FF; border-bottom: 1.5px solid var(--border-faint); font-size: .6rem; letter-spacing: .12em; color: var(--secondary); }
.board-table__head > div { padding: 12px 16px; }
.board-table__row { border-top: 1px solid #F1EDF8; font-size: .95rem; color: var(--ink-2); }
.board-table__row:first-of-type { border-top: 0; }
.board-table__row > div { padding: 13px 16px; }
.board-table__row .is-first { font-weight: 600; }
@media (max-width: 639.98px) {
  /* the four columns stack: the row header becomes a heading and each cell
     carries its column name (data-h) so nothing needs a sideways scroll */
  .board-table__head { display: none; }
  .board-table__row { display: block; padding: 8px 0 10px; }
  .board-table__row > div { padding: 5px 16px; }
  .board-table__row .is-first { padding-bottom: 6px; color: var(--ink); }
  .board-table__row > div[data-h]::before { content: attr(data-h); display: block; font-family: var(--font-mono); font-weight: 600; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--secondary); margin-bottom: 2px; }
}

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 14px; margin-bottom: 28px; }
.stats__card { border: 1.5px solid var(--border-faint); border-radius: 18px; background: #FAF8FF; padding: 20px 18px 18px; }
.stats__n { font-weight: 800; font-size: 2.1rem; letter-spacing: -.04em; color: var(--deep); line-height: 1.1; }
.stats__c { margin-top: 6px; font-size: .92rem; line-height: 1.45; color: var(--secondary); }

.ba { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; margin-bottom: 28px; }
.ba__card { border: 1.5px solid var(--border-faint); border-radius: 18px; background: #fff; padding: 18px 20px 20px; }
.ba__card--after { border-color: var(--border-brand-2); background: #F5F1FE; }
.ba p { margin-top: 10px; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }

.video { margin-bottom: 28px; border: 1.5px solid var(--border); border-radius: 20px; overflow: hidden; background: var(--ink); }
.video__stage { aspect-ratio: 16 / 9; display: grid; place-items: center; }
.video__play { width: 62px; height: 62px; border-radius: 50%; background: var(--brand); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); display: grid; place-items: center; transition: transform .2s ease, background-color .2s ease; }
.video__play:hover { background: var(--deep); transform: scale(1.04); }
.video__play svg { width: 24px; height: 24px; margin-left: 3px; }
.video__cap { padding: 12px 18px; background: #fff; border-top: 1.5px solid var(--border-faint); font-size: .9rem; color: var(--secondary); }

.pdf { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; border: 1.5px solid var(--border); border-radius: 18px; background: #fff; padding: 16px 18px; color: inherit; transition: border-color .2s ease; }
.pdf:hover { color: inherit; border-color: var(--border-brand-2); }
.pdf__badge { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--faint-2); color: var(--deep); font-size: .6rem; letter-spacing: .08em; display: grid; place-items: center; }
.pdf__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pdf__title { font-weight: 600; font-size: 1rem; }
.pdf__sub { margin-top: 3px; font-size: .9rem; color: var(--secondary); }
.pdf > svg { flex: none; width: 18px; height: 18px; color: var(--deep); }

.expert { display: flex; gap: 16px; margin-bottom: 28px; padding: 20px 22px; border-radius: 20px; background: #FAF8FF; border: 1.5px solid var(--border-faint); }
.expert__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--faint-2); border: 1.5px solid var(--border); display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: var(--deep); }
.expert__q { font-weight: 600; font-size: 1.08rem; line-height: 1.5; letter-spacing: -.01em; }
.expert__by { margin-top: 8px; font-size: .88rem; color: var(--secondary); }

.afaq { margin-bottom: 28px; border: 1.5px solid var(--border); border-radius: 20px; background: #fff; overflow: hidden; }
.afaq__head { padding: 14px 20px; border-bottom: 1.5px solid var(--border-faint); font-size: .62rem; color: var(--secondary); }
.afaq__item { border-top: 1px solid #F1EDF8; }
.afaq__item:first-of-type { border-top: 0; }
.afaq h3 { font: inherit; }
.afaq__q { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; text-align: left; padding: 15px 20px; font-weight: 600; font-size: 1rem; line-height: 1.4; }
.afaq__q svg { flex: none; width: 16px; height: 16px; color: var(--deep); transition: transform .25s ease; }
.afaq__q[aria-expanded="true"] svg { transform: rotate(180deg); }
.afaq__a { padding: 0 20px 18px; font-size: .98rem; line-height: 1.6; color: var(--secondary); }
.afaq__a[hidden] { display: none; }

.further { margin-bottom: 8px; border: 1.5px solid var(--border); border-radius: 20px; background: #fff; padding: 20px 22px 12px; }
.further .lbl { margin-bottom: 4px; }
.further__row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #F1EDF8; font-size: .99rem; color: var(--ink-2); }
.further__row:last-child { border-bottom: 0; }
.further__row:hover { color: var(--deep); }
.further__row > span:first-child { flex: 1; min-width: 0; }
.further__src { flex: none; font-size: .6rem; letter-spacing: .1em; color: var(--secondary); }
.further__row svg { flex: none; width: 15px; height: 15px; color: var(--deep); }

/* over a term — horizontal */
.tl { margin-top: 28px; }
.tl .lbl { margin-bottom: 14px; }
.tl__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 18px 0; }
.tl__item { padding-right: 14px; }
.tl__rail { display: flex; align-items: center; }
.tl__dot { flex: none; width: 13px; height: 13px; border-radius: 50%; background: var(--border-brand-2); }
.tl__dot.is-on { background: var(--brand); }
.tl__line { flex: 1; height: 2px; background: var(--border-faint); }
.tl__line.is-last { background: transparent; }
.tl__when { margin-top: 10px; font-size: .6rem; letter-spacing: .1em; color: var(--secondary); }
.tl__what { margin-top: 5px; font-size: .95rem; line-height: 1.45; color: var(--ink-2); }

/* over a term — vertical */
.vtl { margin-top: 34px; }
.vtl .lbl { margin-bottom: 6px; }
.vtl__row { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 18px; }
.vtl__rail { display: flex; flex-direction: column; align-items: center; }
.vtl__line { width: 2px; height: 14px; background: var(--border-faint); flex: none; }
.vtl__line--grow { flex: 1; height: auto; }
.vtl__line.is-hidden { background: transparent; }
.vtl__dot { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid var(--border-brand-2); background: #fff; }
.vtl__dot.is-on { border-color: var(--brand); background: var(--brand); }
.vtl__content { padding: 10px 0 20px; }
.vtl__when { font-size: .6rem; letter-spacing: .12em; color: var(--secondary); }
.vtl__when.is-on { color: var(--deep); }
.vtl__what { margin-top: 6px; font-weight: 600; font-size: 1.04rem; line-height: 1.35; }
.vtl__content p { margin-top: 5px; font-size: .96rem; line-height: 1.55; color: var(--secondary); }

/* over a term — alternating */
.atl { margin-top: 34px; }
.atl .lbl { margin-bottom: 10px; }
.atl__row { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); column-gap: clamp(10px, 2.4vw, 20px); }
.atl__cell { grid-column: 1; text-align: right; padding: 8px 0 22px; }
.atl__row--right .atl__cell { grid-column: 3; text-align: left; }
.atl__row .vtl__rail { grid-column: 2; grid-row: 1; }
.atl__row .vtl__line:first-child { height: 18px; }
.atl__card { display: inline-block; max-width: 290px; text-align: left; border: 1.5px solid var(--border-faint); border-radius: 16px; background: #fff; padding: 14px 16px 15px; }
.atl__what { margin-top: 6px; font-weight: 600; font-size: 1rem; line-height: 1.35; }
.atl__card p { margin-top: 5px; font-size: .94rem; line-height: 1.5; color: var(--secondary); }
@media (max-width: 639.98px) {
  /* alternating cards fall back to the vertical rail: one column, rail on the left */
  .atl__row { grid-template-columns: 20px minmax(0, 1fr); column-gap: 18px; }
  .atl__row .vtl__rail { grid-column: 1; }
  .atl__cell, .atl__row--right .atl__cell { grid-column: 2; text-align: left; padding: 8px 0 18px; }
  .atl__card { display: block; max-width: none; }
}

.author { display: flex; gap: 16px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--border-faint); }
.author__avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--faint-2); border: 1.5px solid var(--border); display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; color: var(--deep); }
.author__name { font-weight: 600; font-size: 1.02rem; }
.author p { margin-top: 6px; font-size: .98rem; line-height: 1.6; color: var(--secondary); }

.read-next { max-width: 1180px; margin: 56px auto 0; }
.read-next__head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 18px; }
.read-next h2 { font-weight: 800; font-size: 1.32rem; letter-spacing: -.025em; }
.read-next__line { flex: 1; height: 1px; background: var(--border-faint); align-self: center; }
.read-next__head a { font-size: .64rem; color: var(--secondary); white-space: nowrap; }
.read-next__head a:hover { color: var(--deep); }
.read-next__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 20px; padding-bottom: 56px; }

/* article — below desktop */
@media (max-width: 899.98px) {
  .article__hero { margin: 0 24px 32px; }
  .article__hero > div { height: 260px; }
}
@media (max-width: 639.98px) {
  .article { margin-top: 16px; border-radius: 22px; padding-bottom: 32px; }
  .article__head { padding: 30px 18px 20px; }
  .article__hero { margin: 0 18px 26px; border-radius: 16px; }
  .article__hero > div { height: 190px; }
  .article__body { padding: 0 18px; }
  .article__p { font-size: 1.04rem; line-height: 1.68; }
  .inshort { padding: 18px 18px 20px; }
  .pull { padding: 20px 20px; margin: 26px 0; }
  .pull p { font-size: 1.12rem; }
  .compare__side { padding: 20px 18px 22px; }
  .quiz__body, .checklist, .terms { padding: 18px 18px 20px; }
  .tryhome { padding: 20px 18px; }
  .tryhome__cta { width: 100%; text-align: center; white-space: normal; }
  .read-next { margin-top: 36px; }
  .read-next__grid { padding-bottom: 36px; }
}

/* =================================================================
   PRICING
   ================================================================= */
/* the bird: flies the full width of the window, not just the .wrap
   column, overlapping the "Pricing" title rather than pushing it down.
   The strip is a real height (tall enough to hold the bird without
   clipping it) but its negative margin-bottom pulls the header right
   back up underneath it, so it adds zero net height to the page — the
   title sits exactly where it did before the bird existed. Positioned
   content (the bird) paints above the header's plain text regardless of
   DOM order, so she flies in front of the letters, not behind them.
   scripts/pricing-bird.js drives left/top every frame with a randomized
   duration and vertical wave per pass — no CSS @keyframes here, since
   the whole point is that no two passes look the same. The position
   below is only the static fallback: no JS, or prefers-reduced-motion. */
.pricing-bird-strip { position: relative; height: 150px; overflow: hidden; margin-bottom: -150px; pointer-events: none; }
.pricing-bird {
  position: absolute; top: 6px; left: calc(50% - 70px);
  width: 140px; height: 140px;
}
.pricing-bird svg { display: block; width: 100%; height: 100%; }
@media (max-width: 639.98px) {
  .pricing-bird-strip { height: 110px; margin-bottom: -110px; }
  .pricing-bird { width: 100px; height: 100px; top: 4px; left: calc(50% - 50px); }
}

.ptiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; align-items: stretch; padding: 0 0 56px; }
.ptier {
  background: #fff; border: 1.5px solid var(--border); border-radius: 26px;
  box-shadow: var(--shadow-soft);
  padding: clamp(22px, 2.4vw, 30px);
  display: flex; flex-direction: column;
}
.ptier--featured { border-color: var(--border-brand-2); box-shadow: var(--shadow-featured); }
.ptier__top { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.ptier__label { font-size: .6rem; letter-spacing: .14em; color: var(--secondary); }
.ptier--featured .ptier__label { color: var(--deep); }
.ptier__pill { font-size: .58rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-pill); background: var(--amber-tint); color: var(--amber-text); }
.ptier__price { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.ptier__amount { font-weight: 800; letter-spacing: -.03em; font-size: 1.85rem; line-height: 1; color: var(--ink); }
.ptier__per { font-size: .95rem; color: var(--secondary); }
.ptier__line { margin: 0 0 20px; font-size: .92rem; line-height: 1.55; color: var(--secondary); }
.ptier__features { list-style: none; padding: 20px 0 0; margin: 0; flex: 1; display: flex; flex-direction: column; gap: 11px; border-top: 1px solid var(--border-faint); }
.ptier__features li { display: flex; gap: 9px; align-items: flex-start; font-size: .8rem; line-height: 1.45; color: var(--ink-2); }
.ptier__features svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.ptier__features .is-off { color: #6E6884; }
.ptier__cta {
  display: block; margin-top: 24px; font-size: .9rem; padding: 13px 22px; border-radius: 13px; text-align: center; font-weight: 600;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ptier__cta--outline { color: var(--deep); background: #fff; border: 1.5px solid var(--border-brand); }
.ptier__cta--outline:hover { background: var(--tint-2); color: var(--deepest); }
.ptier__cta--filled { background: var(--brand); color: #fff; font-weight: 700; }
.ptier__cta--filled:hover { background: var(--deep); color: #fff; }
@media (max-width: 639.98px) {
  .page-head { padding: 40px 0 26px; }
  .ptiers { padding-bottom: 40px; }
}

/* the pricing-page FAQ: split into two side-by-side accordions so the row
   of questions doesn't stretch full-width on a wide screen. */
.faq-split { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.faq-split .faq { margin-top: 0; }
@media (min-width: 900px) {
  .faq-split { grid-template-columns: 1fr 1fr; }
}

/* =================================================================
   FAQ
   ================================================================= */
.fq__wrap { padding-top: 8px; padding-bottom: 44px; }
.fq {
  border: 1.5px solid var(--border); border-radius: 28px; background: #fff;
  box-shadow: var(--shadow-glow);
  padding: clamp(20px, 3vw, 30px) clamp(16px, 2.6vw, 30px) 30px;
  display: flex; flex-direction: column; gap: 34px;
}
.fq__group { scroll-margin-top: 72px; }
.fq__group h2 { font-weight: 800; font-size: 1.2rem; letter-spacing: -.025em; }
.fq__list { margin-top: 8px; }
.fq__item { border-top: 1px solid var(--border-faint); transition: background-color .2s ease; }
.fq__item.is-open { background: var(--faint-3); }
.fq__item h3 { font: inherit; }
.fq__q { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 18px 4px; }
.fq__marker { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-faint); background: #fff; display: grid; place-items: center; transition: border-color .25s ease, background-color .25s ease; }
.fq__marker svg { width: 10px; height: 10px; color: var(--muted); transition: color .25s ease; }
.fq__q[aria-expanded="true"] .fq__marker { border-color: var(--border-brand); background: var(--faint-2); }
.fq__q[aria-expanded="true"] .fq__marker svg { color: var(--brand); }
.fq__q[aria-expanded="true"] .fq__marker .v { display: none; }
.fq__text { flex: 1; font-weight: 400; font-size: 1.02rem; line-height: 1.4; color: var(--ink-2); transition: color .2s ease; }
.fq__q[aria-expanded="true"] .fq__text { color: var(--ink); }
.fq__a p { margin: -4px 0 20px; padding-left: 42px; max-width: 68ch; font-size: .92rem; line-height: 1.65; color: var(--secondary); }
.fq__a[hidden] { display: none; }
.fq__end { border-top: 1px solid var(--border-faint); }
.fq__band {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  border: 1.5px solid var(--border-brand-2); border-radius: 22px; background: #F5F1FE; padding: 20px 24px;
}
.fq__band h2 { font-weight: 800; font-size: 1.12rem; letter-spacing: -.02em; }
.fq__band p { margin-top: 6px; font-size: .96rem; line-height: 1.55; color: var(--ink-2); max-width: 48ch; }
.fq__cta { flex: 1 1 auto; max-width: 220px; text-align: center; padding: 12px 20px; border-radius: 13px; background: var(--brand); color: #fff; font-weight: 600; font-size: .94rem; white-space: nowrap; transition: background-color .2s ease; }
.fq__cta:hover { background: var(--deep); color: #fff; }
@media (max-width: 639.98px) {
  .fq { gap: 26px; border-radius: 22px; }
  .fq__q { padding: 15px 2px; gap: 12px; }
  .fq__a p { padding-left: 34px; }
  .fq__band { padding: 18px 18px; }
  .fq__cta { max-width: none; flex-basis: 100%; }
}

/* =================================================================
   LEGAL
   ================================================================= */
.legal-pill { display: inline-block; font-size: .72rem; letter-spacing: .16em; color: var(--deep); background: var(--faint-2); padding: 7px 13px; border-radius: var(--r-pill); }
.draft-note { max-width: 840px; margin: 0 auto; padding-bottom: 16px; }
.draft-note { display: flex; gap: 12px; align-items: flex-start; border: 1.5px dashed #C9BFE4; border-radius: 18px; background: #FAF8FF; padding: 18px 20px; }
.draft-note__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #F59E0B; margin-top: 7px; }
.draft-note p { font-size: .95rem; line-height: 1.6; color: var(--secondary); }
.draft-note b { color: var(--ink); font-weight: 600; }
.clauses {
  max-width: 840px; margin: 26px auto 0; margin-bottom: 56px;
  position: relative; overflow: hidden;
  border: 1.5px solid var(--border); border-radius: 26px; background: #fff;
  box-shadow: 0 18px 44px -28px rgba(34, 26, 58, .28);
  padding: 44px 44px 36px;
}
.clause { padding: 22px 0; border-bottom: 1px solid var(--border-faint); }
.clause:first-child { padding-top: 0; }
.clause:last-child { border-bottom: 0; padding-bottom: 0; }
.clause__head { display: flex; gap: 14px; align-items: baseline; }
.clause__n { flex: none; width: 26px; font-size: .72rem; letter-spacing: .1em; color: var(--brand); }
.clause h2 { font-weight: 800; font-size: 1.22rem; letter-spacing: -.02em; }
.clause__paras { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding-left: 40px; }
.clause__paras p { font-size: 1rem; line-height: 1.65; color: var(--secondary); max-width: 62ch; text-wrap: pretty; }
@media (max-width: 899.98px) {
  .clauses { padding: 32px 28px 26px; }
}
@media (max-width: 639.98px) {
  .page-head--legal { padding: 40px 0 26px; }
  .clauses { padding: 24px 18px 20px; border-radius: 20px; margin-bottom: 40px; }
  .clause__paras { padding-left: 0; }
  .draft-note { padding: 16px 16px; }
}


/* ==== 08-auth.css ==== */
/* ---------------------------------------------------------------
   AUTH — two tabs (Sign in / Create account) over email + password,
   with Continue with Google under both, then a one-time setup step
   the Google path alone needs (see src/pages/login.js)
   --------------------------------------------------------------- */
.auth {
  padding: clamp(28px, 5vw, 64px) 0 clamp(48px, 6vw, 84px);
  background: #fff;
}
.auth-card {
  max-width: 960px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-featured);
  overflow: hidden;
}
.auth-card__form { padding: clamp(28px, 4vw, 44px); }
.auth-card__visual {
  background: #fff; padding: clamp(24px, 3vw, 32px);
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  border-left: 1px solid var(--border-faint);
}
.auth-visual { position: relative; width: 100%; aspect-ratio: 512 / 512; }
.auth-visual svg { display: block; width: 100%; height: 100%; }

.auth-form h1, .auth-step h1 { font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; margin: 0 0 8px; }
.auth-form__lead { font-size: .9rem; line-height: 1.55; color: var(--secondary); margin: 0 0 24px; }

.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 16px; border-radius: 12px;
  border: 1.5px solid var(--border-faint); background: #fff;
  font-weight: 600; font-size: .9rem; color: var(--ink-2);
  transition: background-color .2s ease, border-color .2s ease;
}
.btn-google:hover { background: var(--faint-3); border-color: var(--border-brand); }
.btn-google svg { flex: none; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field span { font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.field input, .field select {
  font: inherit; font-size: .92rem; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--border-faint); background: #fff; color: var(--ink);
  width: 100%;
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235E5775' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; padding-right: 36px; }
.field input:focus, .field select:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }

/* The two tabs. A sunken track with the selected tab raised out of it in
   white, so which one is live reads WITHOUT relying on colour alone.

   The track is --tint, not --faint-3. Measured 2026-09-22: --faint-3 is
   #FBFAFF against a #FFFFFF selected tab — a difference of four points in
   one channel, invisible on screen, which left the whole selected state
   resting on the text colour. A tab pair nobody can read is worse than no
   tabs. --tint (#F4F1FE) is the lightest token that actually separates. */
.auth-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; margin: 0 0 22px;
  background: var(--tint); border: 1px solid var(--border-faint); border-radius: 14px;
}
.auth-tab {
  padding: 10px 12px; border-radius: 10px;
  font: inherit; font-weight: 700; font-size: .88rem;
  color: var(--secondary); background: transparent; border: 0; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.auth-tab:hover { color: var(--ink-2); }
.auth-tab[aria-selected="true"] {
  background: #fff; color: var(--deep);
  box-shadow: 0 1px 2px rgba(23, 16, 48, .06), 0 2px 8px rgba(23, 16, 48, .08);
}
.auth-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Why a wrong sign-in is a panel and not a tooltip: it has to survive a
   screen reader, so it is a live region that is simply revealed. */
.auth-error {
  margin: 0 0 16px; padding: 10px 12px; border-radius: 10px;
  background: #FFF1F0; border: 1px solid #FFD5D1; color: #A32A1E;
  font-size: .82rem; line-height: 1.5;
}

.auth-or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0; color: var(--secondary); font-size: .78rem;
}
.auth-or::before, .auth-or::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--border-faint);
}

.auth-submit { margin-top: 2px; }
.auth-legal { margin-top: 14px; font-size: .76rem; line-height: 1.55; color: var(--secondary); text-align: center; }
.auth-legal a, .auth-link { font-weight: 600; color: var(--deep); }
.auth-link { font-size: inherit; }
.auth-link:hover { color: var(--deepest); }

@media (max-width: 767.98px) {
  .auth-card { grid-template-columns: 1fr; }
  .auth-card__visual { display: none; }
}
@media (max-width: 479.98px) {
  .field-grid { grid-template-columns: 1fr; }
}


/* ==== 09-preview.css ==== */
/* ---------------------------------------------------------------
   preview — the Preview Lesson column and the panel that shows real
   questions from inside a lesson. Behaviour: scripts/preview.js.
   Data: src/assets/previews/<chapter>.json, pinned by tools/preview-pin.js.
   --------------------------------------------------------------- */

/* ---- the control in the row ---------------------------------- */
.lrow__peek { display: flex; justify-content: flex-start; }

/* The pill is the RESTING look, not a hover reveal: a control nobody can see
   is a control nobody uses. Type is the lesson title's face and weight, one
   step smaller, so the row reads as one level with colour doing the
   hierarchy. */
.peek {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px 0 8px;
  border: 0; border-radius: 999px;
  background: var(--tint); color: var(--brand-ink, #7b5cff);
  font: inherit; font-size: .74rem; font-weight: 500;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.peek__eyes { width: 17px; height: 17px; flex: 0 0 auto; display: block; }
.peek__eyes svg { width: 100% !important; height: 100% !important; display: block; }
.lrow:hover .peek, .peek:hover, .peek:focus-visible { background: var(--tint-3); outline: none; }
.peek:focus-visible { outline: 2px solid var(--brand-ink, #7b5cff); outline-offset: 2px; }
.peek.is-on { background: var(--tint-4, #D8CCF8); }
/* a lesson with nothing authored yet: present, plainly inert, never lights up */
.peek--off { background: var(--faint); color: var(--disabled, #BDB6D2); cursor: default; }
.lrow:hover .peek--off { background: var(--faint); }

/* ---- the panel ------------------------------------------------ */
/* No panel chrome at all: the question card IS the preview. This container is
   pure positioning — transparent, no border, no shadow — so the card's own
   gradient frame is the only edge and nothing is drawn twice. */
.peek-pop {
  position: absolute; z-index: 60; width: 470px;
  background: none; border: 0; box-shadow: none; overflow: visible;
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.985);
  transition: opacity .22s cubic-bezier(.2,.8,.3,1),
              transform .22s cubic-bezier(.2,.8,.3,1), visibility .22s;
}
.peek-pop.is-open { opacity: 1; visibility: visible; transform: none; }

/* A FIXED stage: questions differ in height and the card must not resize four
   times a loop while they cycle. Each question is scaled to fit it by JS.
   Invisible, so a generous height costs nothing and stops tall questions
   (a four-pair match) being clipped. */
.peek-pop__stage { height: 370px; display: grid; place-items: center; overflow: visible; }
.peek-pop__q { width: 100%; animation: peekIn .3s cubic-bezier(.2,.8,.3,1); }
@keyframes peekIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* the real product card, sized down to sit in the panel. `background:none`
   on .rao-lesson, not white: rao.css scopes its graph-paper body background
   onto that class, and white would show as a box behind the card. */
.peek-pop .rao-lesson { background: none; }
.peek-pop .pv-frame {
  margin: 0; border-radius: 26px; padding: 3px;
  box-shadow: 0 4px 12px rgba(52,30,110,.10), 0 22px 54px rgba(52,30,110,.24);
}
.peek-pop .pv-card { border-radius: 21px; padding: 16px 16px 14px; }
.peek-pop .rao-lesson .qbody { min-height: 0 !important; }

/* ---- the doodle hint ------------------------------------------ */
.chap__body { position: relative; }
/* The block is laid out from its LEFT edge so the arrow tip has a fixed,
   computable offset — scripts/preview.js places the tip on the pill rather
   than guessing at the block. The block is NOT rotated: the words read
   horizontally and only the drawn arrow carries the hand-made feel. */
.peek-hint {
  position: absolute; z-index: 6; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-start;
  --hint-ink: #E0559B;
  transition: opacity .45s ease, transform .45s ease;
}
.peek-hint[hidden] { display: none; }
.peek-hint.is-done { opacity: 0; transform: translateY(-6px); }
.peek-hint__text {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 700;
  color: var(--hint-ink); letter-spacing: .01em; white-space: nowrap; margin-left: 26px;
  opacity: 0;
}
/* The animation runs when the curriculum SCROLLS INTO VIEW, not on page load.
   It used to fire immediately, so by the time anyone reached the table it had
   already played and the note simply appeared. */
.peek-hint.is-in .peek-hint__text { animation: peekHintIn .4s ease .15s forwards; }
@keyframes peekHintIn { to { opacity: 1; } }
/* NOT mirrored. The path runs from its top-right down to a head at the
   bottom-LEFT, which is the direction the note needs when it sits to the
   right of the column. Mirroring it (as it was) pointed it away from the
   control it is meant to indicate. */
.peek-hint__arrow {
  width: 104px; height: 62px; margin-top: -2px; overflow: visible;
  stroke: var(--hint-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.peek-hint__line { stroke-dasharray: 190; stroke-dashoffset: 190; }
.peek-hint__head { stroke-dasharray: 22; stroke-dashoffset: 22; }
.peek-hint.is-in .peek-hint__line { animation: peekDraw .75s cubic-bezier(.4,.1,.3,1) .2s forwards; }
.peek-hint.is-in .peek-hint__head { animation: peekDraw .22s ease .85s forwards; }
.peek-hint.is-in .peek-hint__head--2 { animation-delay: .97s; }
@keyframes peekDraw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .peek-hint__text, .peek-hint.is-in .peek-hint__text { animation: none; opacity: 1; }
  .peek-hint__line, .peek-hint__head,
  .peek-hint.is-in .peek-hint__line, .peek-hint.is-in .peek-hint__head { animation: none; stroke-dashoffset: 0; }
  .peek-pop, .peek-pop__q { transition: none; animation: none; }
}

/* ---- phone ----------------------------------------------------- */
/* No hover on a phone, and no room beside the table: the panel becomes a
   centred sheet over a scrim, opened by tap. */
@media (max-width: 899.98px) {
  .peek-hint { display: none; }
  .peek-pop {
    position: fixed; left: 50% !important; top: 50% !important;
    transform: translate(-50%, -50%) scale(.985);
    width: min(440px, 92vw);
  }
  .peek-pop.is-open { transform: translate(-50%, -50%); }
  .peek-pop__stage { height: min(370px, 62vh); }
  .peek-scrim {
    position: fixed; inset: 0; z-index: 59; background: rgba(28,19,56,.42);
    opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s;
  }
  .peek-scrim.is-open { opacity: 1; visibility: visible; }
}
@media (min-width: 900px) { .peek-scrim { display: none; } }