/* ═══════════════════════════════════════════════════════════════════════════════════════════
   eds.css · the EagLearn design system (DESIGN-SYSTEM.md is the written spec)

   One file of tokens and shared components for the redesigned site. A page that uses it loads
   ONLY this file (not style.css or classroom.css), so nothing overrides anything. Sections:
     1 tokens   2 base and type   3 layout   4 header and mega menu   5 buttons   6 badges
     7 cards    8 feature sections and screenshots   9 workflow and signature visuals
     10 forms   11 accordion and tabs   12 modal, toast, loading, empty   13 footer
     14 testimonial and pricing   15 motion and utilities   16 page sections (annotated screen,
     proof strip, learning-loop stage, journey path, case, points, routes, projects, facts, closing band)
     17 journey pages (rail, answer strip, workflow, progression, access card, plans, sorter)
     18 site pages (page hero, section index, lesson bells, index list, portrait, legal, sign-in)
     19 admin (tables, toolbars, column chart, ranked list, cards)
   Colour pairs are checked by tools/ds-contrast.mjs (WCAG 2.2 AA).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* brand and neutrals (from the brief; two text tones darkened for AA, see DESIGN-SYSTEM.md §2) */
  --navy: #11183D;
  --indigo: #4945F5;
  --indigo-strong: #3631D9;       /* hover and pressed */
  --indigo-soft: #EEEDFF;
  --blue: #3578F6;                /* graphics and large text only (3.8:1 on the page) */
  --blue-soft: #EAF1FF;
  --page: #F7F8FC;
  --surface: #FFFFFF;
  --surface-2: #F1F3F9;           /* a quiet inset */
  --text: #11183D;
  --text-2: #47516D;
  --text-muted: #667089;          /* brief #78829B is 3.6:1; kept below for non-text use */
  --line-muted: #78829B;
  --border: #E5E9F3;
  --border-strong: #CDD3E2;
  --field-border: #878FA6;       /* a field edge must reach 3:1 (WCAG 1.4.11) on both surfaces */

  --success: #168A62;  --success-text: #10734F;  --success-soft: #E6F5EE;
  --warning: #C47B18;  --warning-text: #9C5D0C;  --warning-soft: #FCF1E1;
  --error:   #C64255;  --error-text:   #B23347;  --error-soft:   #FBE9EC;

  /* journeys: strong accent, second accent, soft tint, text-safe shade */
  --ey: #F5B70A;  --ey-2: #F2852C;  --ey-soft: #FFF6DC;  --ey-text: #8A5300;
  --jr: #2F7FF0;  --jr-2: #16B4D0;  --jr-soft: #E7F2FF;  --jr-text: #1559C7;
  --ex: #3DD6A3;  --ex-2: #14946A;  --ex-soft: #E3F8F0;  --ex-text: #0D7552;
  --cr: #8B5CF6;  --cr-2: #C9BBFF;  --cr-soft: #F1ECFF;  --cr-text: #6A3BD8;
  --mk: #F97316;  --mk-2: #FF6B5B;  --mk-soft: #FFEEE3;  --mk-text: #B4440A;
  --rs: #4F46E5;  --rs-2: #5B9BF8;  --rs-soft: #ECEDFF;  --rs-text: #3730C4;

  /* type */
  --font-head: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-num: "Manrope", "Inter", system-ui, sans-serif;   /* tabular figures via font-variant */

  --fs-display: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem);   /* 40 → 68 */
  --fs-h1: clamp(2.125rem, 1.5rem + 2.4vw, 3.25rem);      /* 34 → 52 */
  --fs-h2: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);       /* 28 → 40 */
  --fs-h3: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);       /* 20 → 24 */
  --fs-h4: 1.125rem;                                       /* 18 */
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);/* 18 → 21 */
  --fs-body: 1rem;                                         /* 16 */
  --fs-small: 0.875rem;                                    /* 14 */
  --fs-caption: 0.8125rem;                                 /* 13 */
  --fs-eyebrow: 0.8125rem;
  --fs-stat: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem);

  --measure: 66ch;            /* reading width */
  --measure-tight: 40ch;      /* headings */

  /* space (4 px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: clamp(64px, 5rem + 4vw, 128px);
  --gutter: clamp(20px, 4vw, 48px);
  --content-max: 1200px;
  --header-h: 72px;
  --form-max: 520px;

  /* shape and depth (restrained: two radii for surfaces, a pill for chips) */
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(17, 24, 61, .06), 0 1px 1px rgba(17, 24, 61, .04);
  --shadow-2: 0 10px 30px -12px rgba(17, 24, 61, .22), 0 2px 6px rgba(17, 24, 61, .06);
  --shadow-3: 0 24px 60px -20px rgba(17, 24, 61, .35);
  --focus: 0 0 0 3px var(--surface), 0 0 0 5px var(--indigo);

  /* motion */
  --t-fast: 140ms; --t-med: 240ms; --t-slow: 420ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── 2. BASE AND TYPE ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--page); color: var(--text);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--indigo); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--indigo-strong); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
::selection { background: var(--indigo-soft); }

h1, h2, h3, h4, .t-display { font-family: var(--font-head); color: var(--text); margin: 0; text-wrap: balance; }
.t-display { font-size: var(--fs-display); line-height: 1.04; font-weight: 800; letter-spacing: -0.035em; max-width: 18ch; }
h1, .t-h1 { font-size: var(--fs-h1); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; max-width: 22ch; }
h2, .t-h2 { font-size: var(--fs-h2); line-height: 1.14; font-weight: 800; letter-spacing: -0.025em; max-width: 26ch; }
h3, .t-h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; }
h4, .t-h4 { font-size: var(--fs-h4); line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
.t-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); }
.t-body { font-size: var(--fs-body); line-height: 1.6; }
.t-small { font-size: var(--fs-small); line-height: 1.55; }
.t-muted { color: var(--text-muted); }
.t-2 { color: var(--text-2); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--indigo);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.caption { font-size: var(--fs-caption); line-height: 1.45; color: var(--text-muted); }
.t-stat { font-family: var(--font-num); font-size: var(--fs-stat); line-height: 1; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.t-num { font-variant-numeric: tabular-nums; }
.prose > * + * { margin-top: 1em; }
.stack > * + * { margin-top: var(--stack, var(--s-4)); }

/* ── 3. LAYOUT ─────────────────────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section--surface { background: var(--surface); border-block: 1px solid var(--border); }
.section--navy { background: var(--navy); color: #fff; }
.section--navy :where(h1, h2, h3, h4) { color: #fff; }
.section--navy .t-lead, .section--navy p { color: #C9CEE3; }
.section-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-8); max-width: 760px; }
.grid { display: grid; gap: var(--grid-gap, var(--s-6)); grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr)); }
/* min(…, 100%) so a column never asks for more room than a narrow phone has */
.grid-auto { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 260px), 100%), 1fr)); }
/* asymmetric two-column stories: text and media, 5 / 7 or 7 / 5 */
.split { display: grid; gap: var(--s-8); align-items: center; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--top { align-items: start; }
.split--flip > :first-child { order: 2; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster, var(--s-3)); align-items: center; }
.ratio-16x10 { aspect-ratio: 16 / 10; } .ratio-4x3 { aspect-ratio: 4 / 3; } .ratio-1x1 { aspect-ratio: 1; }
@media (max-width: 1023px) {
  .split, .split--flip { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .split--flip > :first-child { order: 0; }
}

/* ── 4. HEADER AND MEGA MENU ───────────────────────────────────────────────────────────── */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--r-sm); background: var(--navy); color: #fff; font-weight: 600; transition: top var(--t-fast); }
.skip-link:focus { top: 12px; color: #fff; }
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: color-mix(in srgb, var(--page) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color var(--t-med), background var(--t-med);
}
.site-header.is-scrolled { border-bottom-color: var(--border); background: color-mix(in srgb, var(--surface) 92%, transparent); }
.site-header .container { height: 100%; display: flex; align-items: center; gap: var(--s-6); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; }
.brand img { width: 36px; height: 36px; }
.brand span b { color: var(--indigo); font-weight: 800; }
.brand-text { display: grid; line-height: 1.1; }
.brand-tag { font: 600 0.6875rem/1.3 var(--font-body); letter-spacing: .02em; color: var(--text-muted); }
/* between 1024 and 1279 the full nav needs the room; below 1024 the nav is a drawer and the line comes back */
@media (min-width: 1024px) and (max-width: 1279px) { .brand-tag { display: none; } }
@media (max-width: 380px) { .brand-tag { display: none; } }
.nav { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.nav-link, .nav-trigger {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--text-2); font: 600 0.9375rem/1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-link:hover, .nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--text); background: var(--surface-2); }
.nav-link[aria-current="page"], .nav-trigger.is-current { color: var(--text); box-shadow: inset 0 -2px 0 var(--indigo); border-radius: 0; }
.nav-trigger svg { width: 14px; height: 14px; transition: transform var(--t-fast); }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-actions { display: flex; align-items: center; gap: var(--s-2); }
.nav-item { position: relative; }
.mega {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-38%); width: min(760px, 92vw);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  padding: var(--s-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4);
  opacity: 0; visibility: hidden; translate: 0 -6px; transition: opacity var(--t-med) var(--ease), translate var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.mega--list { width: 300px; grid-template-columns: minmax(0, 1fr); transform: translateX(-30%); padding: var(--s-3); }
.mega--list .mega-item { grid-template-columns: minmax(0, 1fr); padding: 10px var(--s-3); }
.nav-item.is-open .mega { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.mega-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--s-3) var(--s-2); border-bottom: 1px solid var(--border); margin-bottom: var(--s-2); }
.mega-item { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: var(--s-3); border-radius: var(--r-md); text-decoration: none; color: var(--text); transition: background var(--t-fast); }
.mega-item:hover, .mega-item:focus-visible { background: var(--surface-2); color: var(--text); }
.mega-item .j-dot { width: 40px; height: 40px; }
.mega-item strong { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 1rem; }
.mega-item span.desc { display: block; font-size: var(--fs-small); color: var(--text-2); line-height: 1.45; margin-top: 2px; }
.mega-foot { grid-column: 1 / -1; padding: var(--s-3) var(--s-3) 0; border-top: 1px solid var(--border); margin-top: var(--s-2); font-size: var(--fs-small); }
.btn.menu-toggle { display: none; }   /* .btn would otherwise show it */
.drawer { display: none; }
@media (max-width: 1023px) {
  :root { --header-h: 64px; }
  .nav, .nav-actions .hide-sm { display: none; }
  .nav-actions { margin-left: auto; }   /* the nav that pushed it right is hidden */
  .btn.menu-toggle { display: inline-flex; }
  .drawer {
    display: block; position: fixed; inset: var(--drawer-top, var(--header-h)) 0 0 0; z-index: 49; background: var(--surface); overflow-y: auto;
    padding: var(--s-5) var(--gutter) var(--s-8); transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
  }
  .drawer.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .drawer .mega-item { padding: var(--s-3) 0; }
  .drawer-section + .drawer-section { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--border); }
  .drawer-links a { display: block; padding: 12px 0; font-weight: 600; color: var(--text); text-decoration: none; font-size: 1.0625rem; }
}

/* ── 5. BUTTONS ────────────────────────────────────────────────────────────────────────── */
.btn {
  --b-bg: var(--surface); --b-fg: var(--text); --b-bd: var(--border-strong);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: var(--r-md); border: 1.5px solid var(--b-bd);
  background: var(--b-bg); color: var(--b-fg); font: 700 1rem/1 var(--font-head); letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap; user-select: none;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn { max-width: 100%; }
/* on a narrow phone a long label wraps inside its button instead of pushing the page sideways */
@media (max-width: 479px) { .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 10px; } }
.btn:hover, .btn.is-hover { border-color: var(--text-2); color: var(--b-fg); }
.btn:active, .btn.is-active { transform: translateY(1px); }
.btn:focus-visible, .btn.is-focus { box-shadow: var(--focus); }
.btn--primary { --b-bg: var(--indigo); --b-fg: #fff; --b-bd: var(--indigo); box-shadow: 0 6px 16px -8px rgba(73, 69, 245, .7); }
.btn--primary:hover, .btn--primary.is-hover { --b-bg: var(--indigo-strong); --b-bd: var(--indigo-strong); color: #fff; }
.btn--dark { --b-bg: var(--navy); --b-fg: #fff; --b-bd: var(--navy); }
.btn--dark:hover, .btn--dark.is-hover { --b-bg: #1D2657; --b-bd: #1D2657; color: #fff; }
.btn--ghost { --b-bg: transparent; --b-bd: transparent; --b-fg: var(--indigo); padding: 0 12px; }
.btn--ghost:hover, .btn--ghost.is-hover { --b-bg: var(--indigo-soft); --b-bd: transparent; color: var(--indigo-strong); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 0.9375rem; border-radius: var(--r-sm); }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 1.0625rem; }
.btn-icon { width: 44px; min-height: 44px; padding: 0; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid currentColor; border-color: var(--b-fg) var(--b-fg) var(--b-fg) transparent; opacity: .9; animation: spin .8s linear infinite;
}
.btn--section-navy { --b-bg: #fff; --b-fg: var(--navy); --b-bd: #fff; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-family: var(--font-head); text-decoration: none; }
.link-arrow::after { content: "→"; transition: transform var(--t-fast); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ── 6. BADGES ─────────────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill);
  font: 700 0.75rem/1 var(--font-head); letter-spacing: .02em; white-space: nowrap;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border);
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge--open { background: var(--success-soft); color: var(--success-text); border-color: transparent; }
.badge--inside { background: var(--indigo-soft); color: var(--indigo); border-color: transparent; }
.badge--planned { background: var(--surface-2); color: var(--text-muted); }
.badge--untested { background: var(--warning-soft); color: var(--warning-text); border-color: transparent; }
.badge--illustration { background: transparent; color: var(--text-muted); border-style: dashed; }
.badge--illustration::before { content: "✎"; width: auto; height: auto; background: none; font-size: .8rem; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-small); font-weight: 600; color: var(--text-2); }

/* journey colour set, applied by data attribute so one component serves all six */
[data-j="ey"] { --j: var(--ey); --j2: var(--ey-2); --j-soft: var(--ey-soft); --j-text: var(--ey-text); }
[data-j="jr"] { --j: var(--jr); --j2: var(--jr-2); --j-soft: var(--jr-soft); --j-text: var(--jr-text); }
[data-j="ex"] { --j: var(--ex); --j2: var(--ex-2); --j-soft: var(--ex-soft); --j-text: var(--ex-text); }
[data-j="cr"] { --j: var(--cr); --j2: var(--cr-2); --j-soft: var(--cr-soft); --j-text: var(--cr-text); }
[data-j="mk"] { --j: var(--mk); --j2: var(--mk-2); --j-soft: var(--mk-soft); --j-text: var(--mk-text); }
[data-j="rs"] { --j: var(--rs); --j2: var(--rs-2); --j-soft: var(--rs-soft); --j-text: var(--rs-text); }
.j-dot { display: grid; place-items: center; border-radius: var(--r-md); background: var(--j-soft); color: var(--j-text); }
.j-dot svg { width: 22px; height: 22px; }
.j-label { color: var(--j-text); }

/* ── 7. CARDS ──────────────────────────────────────────────────────────────────────────── */
.card {
  position: relative; display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--card-pad, var(--s-6)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: border-color var(--t-med), box-shadow var(--t-med), transform var(--t-med) var(--ease);
}
a.card { text-decoration: none; color: inherit; }
a.card:hover, .card.is-hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); transform: translateY(-2px); }
a.card:focus-visible { box-shadow: var(--focus), var(--shadow-2); }

/* journey card: a stage on the path, accent only on its rail and its label */
.journey-card { --card-pad: var(--s-5); padding-top: calc(var(--s-5) + 4px); overflow: hidden; }
.journey-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--j), var(--j2)); }
.journey-card .jc-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.journey-card .jc-step { font: 700 var(--fs-caption)/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--j-text); }
.journey-card h3 { font-size: 1.25rem; }
.journey-card .jc-who { font-size: var(--fs-small); color: var(--text-muted); }
.journey-card .jc-build { font-size: var(--fs-small); color: var(--text-2); border-top: 1px dashed var(--border); padding-top: var(--s-3); margin-top: auto; }
.journey-card[aria-disabled="true"] { background: var(--surface-2); }

/* product card: an open product, with a real screen */
.product-card { --card-pad: 0; overflow: hidden; }
.product-card .pc-media { aspect-ratio: 16 / 10; background: var(--j-soft); border-bottom: 1px solid var(--border); overflow: hidden; }
.product-card .pc-media img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.product-card .pc-body { padding: var(--s-6); display: grid; gap: var(--s-3); }
.product-card .pc-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2); }

/* feature row: no box at all, a line of text with an icon, for lists of capabilities */
.feature { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); align-items: start; }
.feature .f-icon { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--indigo-soft); color: var(--indigo); }
.feature .f-icon svg { width: 20px; height: 20px; }
.feature :is(h3, h4) { font-size: var(--fs-h4); line-height: 1.35; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.feature p { font-size: var(--fs-small); color: var(--text-2); margin-top: 2px; }
.feature-list { display: grid; gap: var(--s-5); }

/* ── 8. FEATURE SECTIONS AND SCREENSHOTS ──────────────────────────────────────────────── */
/* a real product screen in a quiet window frame; the caption always says what is shown */
.screen { margin: 0; }
.screen-frame {
  position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-3);
}
.screen-frame::before { content: ""; display: block; height: 30px; background: var(--surface-2); border-bottom: 1px solid var(--border);
  background-image: radial-gradient(circle at 16px 15px, #F26D6D 4px, transparent 4.5px), radial-gradient(circle at 32px 15px, #F2B84B 4px, transparent 4.5px), radial-gradient(circle at 48px 15px, #3CC98A 4px, transparent 4.5px); }
.screen-frame img { width: 100%; height: auto; }
.screen-frame--crop img { aspect-ratio: var(--crop, 16 / 10); object-fit: cover; object-position: var(--focus-pos, top left); }
.screen figcaption { margin-top: var(--s-3); font-size: var(--fs-caption); color: var(--text-muted); }
.screen figcaption b { color: var(--text-2); font-weight: 600; }
.feature-section .fs-text { display: grid; gap: var(--s-5); align-content: start; }

/* ── 9. WORKFLOW AND SIGNATURE VISUALS ─────────────────────────────────────────────────── */
/* The signature: blocks joined by a wire, as on the EagLearn canvas. Stage colours below. */
:root { --st-collect: #3578F6; --st-build: #0891B2; --st-train: #4945F5; --st-test: #C47B18; --st-explain: #168A62; --st-improve: #E0567A; --st-apply: #E2620A; }
.flow { position: relative; display: grid; grid-template-columns: repeat(var(--steps, 6), minmax(0, 1fr)); gap: var(--s-4); counter-reset: step; }
.flow::before { /* the wire */
  content: ""; position: absolute; left: 6%; right: 6%; top: 30px; height: 2px; z-index: 0;
  background: linear-gradient(90deg, var(--st-collect), var(--st-train), var(--st-test), var(--st-explain), var(--st-improve), var(--st-apply));
  transform-origin: left; transform: scaleX(var(--wire, 1)); transition: transform var(--t-slow) var(--ease);
}
.flow-step { position: relative; z-index: 1; display: grid; align-content: start; justify-items: center; text-align: center; gap: var(--s-3); padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.flow-node {
  width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; background: var(--surface);
  border: 2px solid var(--st); color: var(--st); box-shadow: 0 0 0 6px var(--page);
  transition: background var(--t-med), color var(--t-med), transform var(--t-med) var(--ease);
}
.flow-node svg { width: 26px; height: 26px; }
.flow-step .fl-name { font: 800 0.9375rem/1.2 var(--font-head); color: var(--text); }
.flow-step .fl-sub { font-size: var(--fs-caption); color: var(--text-muted); max-width: 18ch; }
.flow-step:hover .flow-node, .flow-step[aria-selected="true"] .flow-node { background: var(--st); color: #fff; transform: translateY(-2px); }
/* the name stays dark (stage colours are too light for text); the underline carries the colour */
.flow-step[aria-selected="true"] .fl-name { text-decoration: underline 3px var(--st); text-underline-offset: 6px; }
.flow-step[data-st="collect"] { --st: var(--st-collect); } .flow-step[data-st="build"] { --st: var(--st-build); } .flow-step[data-st="train"] { --st: var(--st-train); }
.flow-step[data-st="test"] { --st: var(--st-test); } .flow-step[data-st="explain"] { --st: var(--st-explain); }
.flow-step[data-st="improve"] { --st: var(--st-improve); } .flow-step[data-st="apply"] { --st: var(--st-apply); }
.flow-panel { margin-top: var(--s-7); }
.flow--7 { --steps: 7; }
.flow--7::before { left: 5%; right: 5%; background: linear-gradient(90deg, var(--st-collect), var(--st-build), var(--st-train), var(--st-test), var(--st-explain), var(--st-improve), var(--st-apply)); }
@media (max-width: 1199px) { .flow--7 .fl-sub { display: none; } }
@media (max-width: 767px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .flow::before { left: 29px; right: auto; top: 30px; bottom: 30px; width: 2px; height: auto; background: linear-gradient(180deg, var(--st-collect), var(--st-train), var(--st-test), var(--st-explain), var(--st-improve), var(--st-apply)); transform: scaleY(var(--wire, 1)); transform-origin: top; }
  .flow--7::before { left: 29px; right: auto; background: linear-gradient(180deg, var(--st-collect), var(--st-build), var(--st-train), var(--st-test), var(--st-explain), var(--st-improve), var(--st-apply)); }
  .flow--7 .fl-sub { display: block; }
  .flow-step { grid-template-columns: 60px 1fr; justify-items: start; text-align: left; column-gap: var(--s-4); row-gap: 2px; padding: var(--s-2) 0; }
  .flow-step .flow-node { grid-row: 1 / span 2; }
  .flow-step .fl-name { align-self: end; }
  .flow-step .fl-sub { max-width: none; }
}

/* small diagrams that show what each stage really is; each is an ILLUSTRATION and is labelled so */
.viz { position: relative; padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.viz .viz-tag { position: absolute; top: 12px; right: 12px; }
.viz :is(h3, h4) { font-size: 1rem; margin-bottom: var(--s-3); }
.viz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 1023px) { .viz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .viz-grid { grid-template-columns: minmax(0, 1fr); } }
.bars { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: 74px 1fr 42px; align-items: center; gap: 10px; font-size: var(--fs-small); }
.bar .bar-track { display: block; height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.bar .bar-fill { display: block; height: 100%; border-radius: 5px; background: var(--fill, var(--indigo)); transform-origin: left; transition: transform var(--t-slow) var(--ease); }
.bar .bar-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.bar--unsure .bar-fill { background: repeating-linear-gradient(45deg, var(--line-muted) 0 4px, transparent 4px 8px); }

/* ── 10. FORMS ─────────────────────────────────────────────────────────────────────────── */
.form { display: grid; gap: var(--s-5); max-width: var(--form-max); }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 0.9375rem; color: var(--text); }
.field .hint { font-size: var(--fs-small); color: var(--text-muted); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--r-md); border: 1.5px solid var(--field-border);
  background: var(--surface); color: var(--text); font: 400 1rem/1.4 var(--font-body);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.textarea { min-height: 120px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--line-muted); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-muted); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 4px var(--indigo-soft); }
.input:disabled { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; }
.field.is-error .input, .field.is-error .select, .field.is-error .textarea { border-color: var(--error); }
.field.is-error .input:focus-visible { box-shadow: 0 0 0 4px var(--error-soft); }
.field .msg { display: none; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 600; }
.field.is-error .msg { display: flex; color: var(--error-text); }
.field.is-ok .msg { display: flex; color: var(--success-text); }
.form-status { display: none; padding: var(--s-4); border-radius: var(--r-md); font-weight: 600; }
.form-status.is-ok { display: block; background: var(--success-soft); color: var(--success-text); }
.form-status.is-error { display: block; background: var(--error-soft); color: var(--error-text); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--indigo); }

/* ── 11. ACCORDION AND TABS ────────────────────────────────────────────────────────────── */
.accordion { border-top: 1px solid var(--border); }
.accordion details { border-bottom: 1px solid var(--border); }
.accordion summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding: var(--s-5) 0; cursor: pointer; font: 700 1.0625rem/1.4 var(--font-head); color: var(--text);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: ""; width: 12px; height: 12px; flex: none; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(45deg) translateY(-3px); transition: transform var(--t-med) var(--ease); }
.accordion details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.accordion summary:hover { color: var(--indigo); }
.accordion .acc-body { padding: 0 0 var(--s-5); color: var(--text-2); }
.tabs [role="tablist"]:not(.flow) { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); max-width: 100%; overflow-x: auto; }
.tabs [role="tab"]:not(.flow-step) {
  min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2);
  font: 700 0.9375rem/1 var(--font-head); cursor: pointer; white-space: nowrap; transition: background var(--t-fast), color var(--t-fast);
}
.tabs [role="tab"]:not(.flow-step):hover { color: var(--text); }
.tabs [role="tab"]:not(.flow-step)[aria-selected="true"] { background: var(--surface); color: var(--indigo); box-shadow: var(--shadow-1); }
.tabs [role="tabpanel"] { margin-top: var(--s-5); }
.tabs [role="tabpanel"][hidden] { display: none; }

/* ── 12. MODAL, TOAST, LOADING, EMPTY ──────────────────────────────────────────────────── */
dialog.modal { width: min(560px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-3); }
dialog.modal::backdrop { background: rgba(17, 24, 61, .5); backdrop-filter: blur(2px); }
dialog.modal[open] { animation: modal-in var(--t-med) var(--ease); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--border); }
.modal-body { padding: var(--s-6); display: grid; gap: var(--s-4); }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--s-3); padding: var(--s-4) var(--s-6) var(--s-6); }
.toast-region { position: fixed; z-index: 90; right: 16px; bottom: 16px; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); }
.toast {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--navy); color: #fff; box-shadow: var(--shadow-3); font-size: 0.9375rem; animation: toast-in var(--t-med) var(--ease);
}
.toast .t-icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: rgba(255,255,255,.14); }
.toast--ok .t-icon { background: var(--success); } .toast--error .t-icon { background: var(--error); }
.toast button { background: none; border: 0; color: #C9CEE3; cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 4px; border-radius: 6px; }
.toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity var(--t-med), transform var(--t-med); }
.skeleton { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-2) 0%, #E8EBF4 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--indigo-soft); border-top-color: var(--indigo); animation: spin .8s linear infinite; }
.empty { display: grid; justify-items: center; gap: var(--s-3); text-align: center; padding: var(--s-7) var(--s-5); border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface); }
.empty .e-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-muted); }

/* ── 13. FOOTER ────────────────────────────────────────────────────────────────────────── */
.site-footer { background: var(--navy); color: #C9CEE3; padding-block: var(--s-9) var(--s-6); }
.site-footer a { color: #E6E9F5; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(var(--footer-cols, 3), minmax(0, 1fr)); gap: var(--s-7); }
.footer-grid :is(h2, h4) { color: #fff; font-family: var(--font-head); font-weight: 800; max-width: none; font-size: var(--fs-caption); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--s-4); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-grid li a { display: inline-block; padding: 6px 0; font-size: 0.9375rem; }
.footer-brand .brand { color: #fff; }
.footer-brand p { margin-top: var(--s-4); font-size: 0.9375rem; color: #C9CEE3; max-width: 34ch; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.12); font-size: var(--fs-small); }
.footer-bottom a { display: inline-block; padding-block: 6px; }
.footer-journeys li a { display: inline-flex; align-items: center; gap: 8px; }
.footer-journeys li a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--j); }
@media (max-width: 1023px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }

/* ── 14. TESTIMONIAL AND PRICING ───────────────────────────────────────────────────────── */
.quote { --card-pad: var(--s-6); gap: var(--s-5); margin: 0; }
.quote blockquote { margin: 0; font: 600 1.1875rem/1.5 var(--font-head); color: var(--text); letter-spacing: -0.01em; }
.quote blockquote::before { content: "“"; display: block; font-size: 3rem; line-height: .6; color: var(--indigo); margin-bottom: var(--s-2); }
.quote .q-who { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-small); }
.quote .q-who b { display: block; color: var(--text); }
.quote .q-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-weight: 800; color: var(--text-2); }
.plan { --card-pad: var(--s-6); gap: var(--s-4); }
.plan.is-featured { border: 2px solid var(--indigo); box-shadow: var(--shadow-2); }
.plan .p-price { display: flex; align-items: baseline; gap: 8px; }
.plan .p-price .t-stat { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 0.9375rem; color: var(--text-2); }
.plan li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; }
.plan li::before { content: "✓"; font-weight: 800; color: var(--success); }

/* ── 14b. HERO ─────────────────────────────────────────────────────────────────────────── */
/* Text left (5 of 12 columns), the real product right (7 of 12), stacked with text first below 1024. */
.hero { position: relative; padding-block: clamp(28px, 1rem + 2.5vw, 72px) clamp(48px, 2rem + 3vw, 96px); overflow: clip; }
.hero::before { /* one quiet field of dots: data, not decoration; fades out towards the text */
  content: ""; position: absolute; inset: 0 0 auto 40%; height: 100%; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, #CDD3E2 1.2px, transparent 1.5px); background-size: 22px 22px;
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent), linear-gradient(180deg, #000 60%, transparent);
  mask-composite: intersect; -webkit-mask-composite: source-in; opacity: .7;
}
.hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-8); align-items: center; }
/* the hero headline is a little smaller than a standalone display line, so it stays at four lines on a 1366 laptop */
.hero .t-display { font-size: clamp(2.25rem, 1.25rem + 2.1vw, 3.5rem); max-width: 17ch; }
.hero-text { display: grid; gap: var(--s-4); align-content: center; }
.hero .t-lead { font-size: var(--fs-h4); max-width: 54ch; }
.hero-text .t-display .accent { color: var(--indigo); }
.hero-sub { font: 700 1rem/1.4 var(--font-head); color: var(--text); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.hero-sub span { display: inline-flex; align-items: center; gap: 8px; }
.hero-sub span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.hero-trust { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-small); color: var(--text-muted); }
.hero-trust span { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust svg { width: 16px; height: 16px; color: var(--success); }
.hero-media { position: relative; }
.hero-media .screen-frame { transform: perspective(1600px) rotateY(-4deg) rotateX(1deg); transform-origin: left center; }
.hero-media .hm-second { position: absolute; width: 46%; left: -8%; bottom: -12%; box-shadow: var(--shadow-3); transform: none; }
.hero-media .hm-second::before { height: 18px; background-image: radial-gradient(circle at 10px 9px, #F26D6D 3px, transparent 3.5px), radial-gradient(circle at 21px 9px, #F2B84B 3px, transparent 3.5px), radial-gradient(circle at 32px 9px, #3CC98A 3px, transparent 3.5px); }
.hero-media figcaption { margin-top: var(--s-5); }
@media (max-width: 1023px) {
  .hero .container { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .hero::before { inset: 45% 0 0 0; }
  .hero-media .screen-frame { transform: none; }
  .hero-media .hm-second { position: relative; display: block; width: 52%; margin: -16% -2% 0 auto; left: auto; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) { .hero-media .screen-frame { transform: none; } }

/* ── 16. PAGE SECTIONS (first used by the home page, reusable on any page) ─────────────────── */
/* annotated screen: numbered pins placed on a real screenshot by percentage, and a key below it */
.annot { position: relative; }
.annot-pin {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--st, var(--indigo)); color: #fff; font: 800 0.8125rem/1 var(--font-head);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .92), var(--shadow-2);
}
.annot-key { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: var(--fs-small); color: var(--text-2); }
.annot-key li { display: inline-flex; align-items: center; gap: 8px; }
.annot-key b, .screen figcaption .annot-key b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--st); color: #fff; font: 800 0.75rem/1 var(--font-head); }
.annot-key span { color: var(--text); font-weight: 600; }
/* the main screen and the robot card share one box, so the robot hangs off the screen's corner and the key sits beside it */
.hm-stage { position: relative; }
.hero-media .hm-robot { position: absolute; width: 32%; right: -3%; bottom: -16%; box-shadow: var(--shadow-3); transform: none; }
.hero-media figcaption { padding-right: 31%; }
.hero-media .hm-robot::before { display: none; }
@media (max-width: 1023px) {
  .hero-media .hm-robot { position: relative; display: block; width: 44%; margin: -10% -2% 0 auto; right: auto; bottom: auto; }
  .hero-media figcaption { padding-right: 0; }
}

/* proof strip: a few verified facts in a row, divided by hairlines */
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--border); }
.proof > div { padding: var(--s-6) var(--s-5); display: grid; gap: 6px; align-content: start; }
.proof > div + div { border-left: 1px solid var(--border); }
.proof .t-stat { color: var(--text); }
.proof .p-label { font: 700 0.9375rem/1.35 var(--font-head); color: var(--text); }
.proof .p-note { font-size: var(--fs-small); color: var(--text-muted); }
.proof-foot { max-width: none; margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center; font-size: var(--fs-small); color: var(--text-2); }
.proof-foot span { display: inline-flex; align-items: center; gap: 6px; }
.proof-foot svg { width: 16px; height: 16px; color: var(--success); }
@media (max-width: 767px) {
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof > div:nth-child(3) { border-left: 0; }
  .proof > div:nth-child(n + 3) { border-top: 1px solid var(--border); }
  .proof > div { padding: var(--s-5) var(--s-4); }
}

/* one stage of the learning loop: what it is, what the learner does, what they understand */
.stage-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: center; }
.stage-panel .sp-text { display: grid; gap: var(--s-4); align-content: start; }
.stage-panel .sp-num { font: 800 var(--fs-caption)/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.do-know { display: grid; gap: var(--s-3); margin: var(--s-2) 0 0; }
.do-know div { padding: var(--s-4); border-radius: var(--r-md); background: var(--surface-2); border-left: 3px solid var(--st, var(--indigo)); }
.do-know dt { font: 800 var(--fs-caption)/1.2 var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin-bottom: 4px; }
.do-know dd { margin: 0; color: var(--text); font-size: 0.9375rem; }
.stage-nav { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
@media (max-width: 1023px) { .stage-panel { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }

/* journey path: six stops on one line, each a row that reads across */
.path { list-style: none; margin: 0; padding: 0; position: relative; }
.path::before { content: ""; position: absolute; left: 27px; top: 40px; bottom: 40px; width: 2px; background: var(--border-strong); }
.path-row {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 2.2fr) repeat(3, minmax(0, 2.6fr)); gap: var(--s-5);
  padding: var(--s-5) 0; border-bottom: 1px solid var(--border); align-items: start;
}
.path-row:last-child { border-bottom: 0; }
.path-node {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; position: relative; z-index: 1;
  background: var(--j-soft); color: var(--j-text); border: 2px solid var(--j); box-shadow: 0 0 0 6px var(--page);
  font: 800 1.125rem/1 var(--font-head);
}
.path-row.is-open .path-node { background: var(--j-text); border-color: var(--j-text); color: #fff; }
.path-head { display: grid; gap: 8px; align-content: start; }
.path-head h3 { font-size: 1.25rem; }
.path-head .badge { justify-self: start; }
.path-head .link-arrow { justify-self: start; padding-block: 6px; }   /* a 24 px target at least (WCAG 2.5.8) */
.path-cell { display: grid; gap: 4px; align-content: start; }
.path-cell .pc-k { font: 800 var(--fs-caption)/1.2 var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--j-text); }
.path-cell p { font-size: 0.9375rem; color: var(--text-2); }
@media (max-width: 1023px) {
  .path-row { grid-template-columns: 56px minmax(0, 1fr); row-gap: var(--s-3); }
  .path-row > :not(.path-node) { grid-column: 2; }
  .path-node { grid-row: 1 / span 4; }
}

/* case study: four facts about one example, side by side with its screen */
.case { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-8); align-items: center; }
.case-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); margin: var(--s-5) 0 0; }
.case-facts dt { display: flex; align-items: center; gap: 8px; font: 800 var(--fs-caption)/1.2 var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin-bottom: 6px; }
.case-facts dt::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--indigo)); }
.case-facts dd { margin: 0; font-size: 0.9375rem; color: var(--text); }
@media (max-width: 1023px) {
  .case { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .tabs [role="tablist"]:not(.flow) { display: flex; flex-wrap: wrap; overflow: visible; }
}
@media (max-width: 599px) { .case-facts { grid-template-columns: minmax(0, 1fr); } }

/* numbered points down the left, a visual on the right */
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); counter-reset: pt; }
.points li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s-4); counter-increment: pt; }
.points li::before { content: counter(pt); width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--indigo-soft); color: var(--indigo); font: 800 0.9375rem/1 var(--font-head); }
.points h3 { font-size: 1.0625rem; margin-bottom: 4px; }
.points p { font-size: 0.9375rem; color: var(--text-2); }

/* audience routes: a directory, not a grid of cards */
.routes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.routes li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: var(--s-6); align-items: center; padding: var(--s-5) var(--s-3); border-bottom: 1px solid var(--border); transition: background var(--t-fast); }
.routes li:hover { background: var(--surface); }
.routes h3 { font-size: 1.1875rem; }
.routes p { color: var(--text-2); }
.routes .btn { justify-self: end; }
/* a stacked list of routes, for a narrow column */
.routes--stack li { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding-inline: 0; }
.routes--stack .btn { justify-self: start; margin-top: var(--s-2); }
@media (max-width: 767px) { .routes li { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding-inline: 0; } .routes .btn { justify-self: start; margin-top: var(--s-2); } }

/* project sheet: screen on top, four short answers below, no box around it */
.projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); }
.project { display: grid; gap: var(--s-4); align-content: start; }
.project h3 { font-size: 1.25rem; }
.project dl { margin: 0; display: grid; gap: var(--s-3); }
.project dt { font: 800 var(--fs-caption)/1.2 var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.project dd { margin: 2px 0 0; font-size: 0.9375rem; color: var(--text-2); }
@media (max-width: 1023px) { .projects { grid-template-columns: minmax(0, 1fr); max-width: 640px; } }

/* facts: term and answer in two columns, for practical information */
.facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-7); }
.facts div { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px var(--s-3); }
.facts dt { grid-column: 2; grid-row: 1; font: 700 1rem/1.35 var(--font-head); color: var(--text); }
.facts dd { grid-column: 2; margin: 0; font-size: 0.9375rem; color: var(--text-2); }
.facts div::before { content: "✓"; grid-column: 1; grid-row: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--success-soft); color: var(--success-text); font-weight: 800; font-size: 13px; }
@media (max-width: 767px) { .facts { grid-template-columns: minmax(0, 1fr); } }

/* closing band on navy */
.cta-band { text-align: center; display: grid; justify-items: center; gap: var(--s-5); }
.cta-band h2 { max-width: 22ch; }
.btn--on-navy { --b-bg: transparent; --b-fg: #fff; --b-bd: rgba(255, 255, 255, .55); }
.btn--on-navy:hover, .btn--on-navy.is-hover { --b-bd: #fff; color: #fff; }

/* a notice that arrives with the page (for example "email confirmed") */
.notice-bar { position: fixed; z-index: 95; left: 50%; top: calc(var(--header-h) + 12px); transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); }
.notice-bar .toast a { color: #fff; font-weight: 700; }

/* ── 17. JOURNEY PAGES (the one template behind all six journey pages) ─────────────────── */
/* The page's journey is set once, on <main data-j="…">. Its accent appears only on the rail,
   the eyebrows, the step markers and small labels: the page stays navy, indigo and white. */
main[data-j] .eyebrow { color: var(--j-text); }
main[data-j] .points li::before { background: var(--j-soft); color: var(--j-text); }
/* a list of facts in the narrower first column of a split reads better as one column */
.split > .facts:first-child, .split > .stack:first-child .facts { grid-template-columns: minmax(0, 1fr); }

/* where this journey sits among the six: the same rail on every page */
.jrail { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: flex; align-items: center; gap: 0; max-width: 640px; }
.jrail li { flex: 1 1 0; display: flex; align-items: center; min-width: 0; }
.jrail li:first-child { flex: none; }   /* no wire before the first stop */
.jrail li + li::before { content: ""; flex: 1 1 auto; height: 2px; margin: 0 6px; background: var(--border-strong); }
.jrail a { display: inline-flex; align-items: center; gap: 8px; flex: none; text-decoration: none; color: var(--text-muted); font: 700 var(--fs-caption)/1 var(--font-head); padding: 6px 0; }
.jrail .jr-dot { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--j); color: var(--j-text); font-size: .75rem; }
.jrail .jr-name { white-space: nowrap; }
.jrail a[aria-current="page"] { color: var(--text); }
.jrail a[aria-current="page"] .jr-dot { background: var(--j-text); border-color: var(--j-text); color: #fff; }
.jrail a:not([aria-current]) .jr-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jrail a:hover .jr-dot { background: var(--j-soft); }

/* four short answers under the hero: who, builds, needs, availability */
.qa-strip { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--border); }
.qa-strip > div { padding: var(--s-5); display: grid; gap: 6px; align-content: start; }
.qa-strip > div + div { border-left: 1px solid var(--border); }
.qa-strip dt { font: 800 var(--fs-caption)/1.2 var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--j-text, var(--text-2)); }
.qa-strip dd { margin: 0; font-size: 0.9375rem; color: var(--text); }
@media (max-width: 1023px) {
  .qa-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qa-strip > div:nth-child(3) { border-left: 0; }
  .qa-strip > div:nth-child(n + 3) { border-top: 1px solid var(--border); }
}
@media (max-width: 479px) { .qa-strip { grid-template-columns: minmax(0, 1fr); } .qa-strip > div + div { border-left: 0; border-top: 1px solid var(--border); } }

/* a static workflow: numbered stops on one wire, in the journey's accent */
.wf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); gap: var(--s-5); position: relative; counter-reset: wf; }
/* the wire runs from the first node's centre to the last one's */
.wf::before { content: ""; position: absolute; left: 28px; right: calc((100% - (var(--steps, 4) - 1) * var(--s-5)) / var(--steps, 4) - 28px); top: 27px; height: 2px; background: var(--j); opacity: .55; }
.wf li { position: relative; display: grid; gap: var(--s-3); align-content: start; counter-increment: wf; }
.wf .wf-node { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--j); color: var(--j-text); box-shadow: 0 0 0 6px var(--wf-bg, var(--page)); position: relative; z-index: 1; }
.wf .wf-node svg { width: 24px; height: 24px; }
.wf h3 { font-size: 1.0625rem; }
.wf h3::before { content: counter(wf) ". "; color: var(--j-text); }
.wf p { font-size: 0.9375rem; color: var(--text-2); }
.section--surface .wf { --wf-bg: var(--surface); }
@media (max-width: 767px) {
  .wf { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .wf::before { left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; }
  .wf li { grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--s-4); row-gap: 2px; }
  .wf .wf-node { grid-row: 1 / span 2; }
}

/* before, this journey, after: progression on one row */
.prog { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.prog li { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); }
.prog li.is-here { background: var(--j-soft); border-color: transparent; }
.prog .pg-k { font: 800 var(--fs-caption)/1.2 var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.prog li.is-here .pg-k { color: var(--j-text); }
.prog h3 { font-size: 1.125rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.prog h3 a { display: inline-block; padding-block: 3px; }   /* a 24 px target at least */
.prog p { font-size: 0.9375rem; color: var(--text-2); }
@media (max-width: 767px) { .prog { grid-template-columns: minmax(0, 1fr); } }

/* availability: the status and the one thing to do next, beside the requirements */
.access-card { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1); }
.access-card .badge { justify-self: start; }
.notify { display: grid; gap: var(--s-3); }
.notify-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.notify-row .input { flex: 1 1 220px; }
.notify-ok { display: none; align-items: center; gap: 8px; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--success-soft); color: var(--success-text); font-weight: 600; }
.notify-err { display: none; color: var(--error-text); font-size: var(--fs-small); font-weight: 600; }

/* Junior's paid plans, when they are switched on (js/pricing.js builds them) */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--s-5); }
.pay-qr { display: grid; justify-items: center; gap: 8px; padding: var(--s-4); border-radius: var(--r-md); background: #fff; border: 1px solid var(--border); }
.pay-id { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface-2); font-variant-numeric: tabular-nums; }

/* Early Years: the sorting example (js/ey-sort.js) */
.sorter { display: grid; gap: var(--s-5); padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); position: relative; }
.sorter .viz-tag { position: absolute; top: 12px; right: 12px; }
.sort-tray { display: flex; flex-wrap: wrap; gap: 10px; min-height: 64px; }
.sort-bins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.sort-bin { display: grid; gap: var(--s-3); align-content: start; min-height: 132px; padding: var(--s-4); border-radius: var(--r-md); border: 2px dashed var(--border-strong); background: var(--surface-2); cursor: pointer; font: inherit; color: inherit; text-align: left; }
.sort-bin:hover { border-color: var(--j); }
.sort-bin .sb-name { font: 700 0.9375rem/1.2 var(--font-head); }
.sort-bin .sb-items { display: flex; flex-wrap: wrap; gap: 8px; }
.tok { width: 52px; height: 52px; border-radius: 12px; border: 2px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform var(--t-fast), border-color var(--t-fast); }
.tok svg { width: 30px; height: 30px; }
.tok[aria-pressed="true"] { border-color: var(--j-text); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.tok.is-guess { border-style: dashed; }
.sort-msg { min-height: 3em; font-weight: 600; color: var(--text); }
.sort-msg b { color: var(--j-text); }

/* small screens: the hero visual sits under the text and the rail shows only numbers */
/* on a phone the eyebrow under the rail names the journey, so the rail shows numbers only */
@media (max-width: 599px) { .jrail { max-width: none; } .jrail a[aria-current="page"] .jr-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* ── 18. SITE PAGES (Schools, About, Contact, Resources, legal, sign-in, 404) ──────────────── */
/* a hero with text only, or text and one picture, for pages that are not products */
.hero--page { padding-bottom: clamp(32px, 1.5rem + 2vw, 64px); }
.hero--page .t-display { font-size: clamp(2.125rem, 1.4rem + 2vw, 3.25rem); max-width: 20ch; }
.hero--page.hero--text .container { grid-template-columns: minmax(0, 1fr); }
.hero--page.hero--text .hero-text { max-width: 760px; }

/* a row of links to the parts of a long page */
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.toc a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: 600 0.9375rem/1 var(--font-head); text-decoration: none; }
.toc a:hover { border-color: var(--border-strong); color: var(--text); }

/* a lesson, period by period */
.bells { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border-strong); }
.bells li { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-5); padding: 0 0 var(--s-6) var(--s-6); }
.bells li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--indigo); }
.bells li:last-child { padding-bottom: 0; }
.bells .bl-time { font: 800 0.9375rem/1.4 var(--font-num); color: var(--indigo); font-variant-numeric: tabular-nums; }
.bells h3 { font-size: 1.0625rem; margin-bottom: 4px; }
.bells p { font-size: 0.9375rem; color: var(--text-2); }
@media (max-width: 599px) { .bells li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* a compact index: name and one line, in columns */
.index-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--s-4) var(--s-7); }
.index-list li { display: grid; gap: 2px; padding-bottom: var(--s-4); border-bottom: 1px solid var(--border); }
.index-list b { font-family: var(--font-head); color: var(--text); }
.index-list span { font-size: 0.9375rem; color: var(--text-2); }

/* the founder's photo */
.portrait { margin: 0; display: grid; gap: var(--s-3); }
.portrait img { width: 100%; max-width: 320px; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface-2); }
.portrait figcaption { font-size: var(--fs-small); color: var(--text-2); }
.portrait figcaption b { display: block; color: var(--text); font-family: var(--font-head); font-size: 1.0625rem; }

/* legal pages: the words are the point, so a plain reading column */
.legal { max-width: 72ch; }
.legal h2 { font-size: var(--fs-h3); margin: var(--s-7) 0 var(--s-3); max-width: none; }
.legal p, .legal li { color: var(--text-2); }
.legal p + p { margin-top: var(--s-3); }
.legal ul { margin: var(--s-3) 0; padding-left: 1.25em; display: grid; gap: 6px; }
.legal strong { color: var(--text); }
.legal-note { padding: var(--s-5); border-radius: var(--r-md); background: var(--indigo-soft); color: var(--text); }
.legal-warn { margin-top: var(--s-4); padding: var(--s-5); border-radius: var(--r-md); background: var(--warning-soft); color: var(--text); border-left: 3px solid var(--warning); }

/* log in and create an account: a short reason beside one card */
.auth { padding-block: clamp(32px, 1.5rem + 3vw, 80px); }
.auth .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); align-items: start; }
.auth-card { padding: clamp(24px, 1rem + 2vw, 40px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-2); }
.auth-card h1 { font-size: var(--fs-h2); }
.auth-card .t-small a { font-weight: 600; }
.auth-msg { display: none; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-weight: 600; font-size: 0.9375rem; }
.auth-msg.is-error { background: var(--error-soft); color: var(--error-text); }
.auth-msg.is-ok { background: var(--success-soft); color: var(--success-text); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.link-btn { background: none; border: 0; padding: 6px 0; color: var(--indigo); font: 600 0.9375rem/1.2 var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: .18em; justify-self: start; }
@media (max-width: 1023px) { .auth .container { grid-template-columns: minmax(0, 1fr); } .auth aside { order: 2; } }
@media (max-width: 479px) { .field-row { grid-template-columns: minmax(0, 1fr); } }

/* ── 19. ADMIN (private pages: tables, toolbars, simple charts) ───────────────────────────────── */
.adm-bar { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--border); }
.adm-bar .container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); min-height: 64px; padding-block: 10px; }
.adm-bar .cluster { margin-left: auto; }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--s-3); }
.adm-stat { padding: var(--s-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); display: grid; gap: 2px; }
.adm-stat b { font: 800 1.75rem/1.1 var(--font-num); font-variant-numeric: tabular-nums; color: var(--text); }
.adm-stat span { font-size: var(--fs-small); color: var(--text-2); }
.adm-tools { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: end; margin-block: var(--s-5) var(--s-4); }
.adm-tools .field { min-width: 160px; }
.adm-tools .input, .adm-tools .select { min-height: 40px; padding-block: 8px; }
.adm-note { padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--warning-soft); color: var(--text); border-left: 3px solid var(--warning); font-size: 0.9375rem; }
.adm-note.is-info { background: var(--indigo-soft); border-left-color: var(--indigo); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th { position: sticky; top: 0; background: var(--surface-2); text-align: left; font: 700 var(--fs-caption)/1.2 var(--font-head); letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text); }
.table tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .muted { color: var(--text-muted); font-size: var(--fs-small); }
.table .acts { display: flex; flex-wrap: wrap; gap: 6px; }
.table .btn--sm { min-height: 32px; padding: 0 10px; font-size: 0.8125rem; }
.btn--danger { --b-fg: var(--error-text); --b-bd: color-mix(in srgb, var(--error) 45%, transparent); }
.btn--danger:hover { --b-bg: var(--error-soft); --b-bd: var(--error); color: var(--error-text); }
.pager { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-top: var(--s-3); font-size: var(--fs-small); color: var(--text-2); }
/* one-series column chart: thin bars, 2px gaps, rounded data end on the baseline */
.cols { display: flex; align-items: flex-end; gap: 2px; height: 160px; padding: var(--s-3) 0 0; border-bottom: 1px solid var(--border-strong); }
.cols span { flex: 1 1 0; min-width: 3px; background: var(--indigo); border-radius: 4px 4px 0 0; position: relative; }
.cols span:hover, .cols span:focus-visible { background: var(--indigo-strong); outline: none; }
.cols-axis { display: flex; justify-content: space-between; font-size: var(--fs-caption); color: var(--text-muted); margin-top: 6px; }
.tip { position: fixed; z-index: 99; pointer-events: none; padding: 6px 10px; border-radius: var(--r-sm); background: var(--navy); color: #fff; font-size: 0.8125rem; box-shadow: var(--shadow-2); }
/* ranked list: label, bar, value */
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rank li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(48px, 2fr) auto; gap: 10px; align-items: center; font-size: 0.875rem; }
.rank .rk-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.rank .rk-t { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.rank .rk-f { display: block; height: 100%; border-radius: 5px; background: var(--indigo); }
.rank .rk-v { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--s-5); }
.adm-card { padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); display: grid; gap: var(--s-4); align-content: start; }
.adm-card h3 { font-size: 1.0625rem; }
.check-list { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.check-list label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9375rem; }
.switch { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.switch input { width: 20px; height: 20px; accent-color: var(--indigo); }

/* ── 15. MOTION AND UTILITIES ──────────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
/* reveal: content is visible by default; js adds .will-reveal only when it can animate */
.will-reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.will-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .will-reveal { opacity: 1; transform: none; }
}

/* the optional advertising consent bar (js/site.js) */
.consent-bar { position: fixed; z-index: 96; left: 16px; right: 16px; bottom: 16px; max-width: 720px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-3); }
.consent-bar p { font-size: var(--fs-small); color: var(--text-2); max-width: 52ch; }
/* Signed in or not (js/site.js swaps these). The hidden attribute alone loses to .btn and .hide-sm. */
[data-auth][hidden] { display: none !important; }

/* print: one copy of the header at the top, no menus, nothing waiting to be revealed, figures kept whole */
@media print {
  .site-header { position: static; box-shadow: none; }
  .drawer, .mega, .menu-toggle, .toast-region, .skip-link, .notice-bar, .consent-bar { display: none !important; }
  .will-reveal { opacity: 1 !important; transform: none !important; }
  .hero-media .screen-frame { transform: none; }
  figure, .screen, .access-card, .card, .feature, .path-row, .bells li, .accordion details { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  body { background: #fff; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mt-0 { margin-top: 0; } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); }
.center { text-align: center; margin-inline: auto; }