/* ClassNet marketing site — assets/site.css
   Light mode only. Colour tokens are a deliberate copy of
   School-ERP/web/src/theme/tokens.ts; changing them is a two-repo decision.
   See CLAUDE.md §2. */

/* ── Inter ──────────────────────────────────────────────────────────── */
/* Self-hosted, because routing it through Google cost a render-blocking
   cross-origin stylesheet before anything could paint: HTML → googleapis CSS →
   gstatic woff2, three levels deep. Same-origin drops that to one hop.

   This is Google's own latin subset of the Inter v20 variable font, byte for
   byte — the exact file the CDN used to serve, so nothing about the typography
   changed. latin is the only subset Chrome ever fetched for this site; every
   rendered codepoint on all eight pages falls inside its unicode-range.

   To refresh it: request the css2 URL below with a modern browser UA, take the
   `latin` @font-face src, and bump the filename (see _headers — assets are
   immutable, so the name is the cache key).
     https://fonts.googleapis.com/css2?family=Inter:wght@400..800&display=swap

   400..800 is the full range the site uses: 400 body, 500, 600, 700 headings,
   800 h1. There is no italic anywhere, so there is no italic face to ship. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/inter-latin-v20.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;
}

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  --brand-50:  #EFF4FF;
  --brand-100: #DCE7FF;
  --brand-200: #BDD0FE;
  --brand-600: #2563EB;
  --brand-700: #1D4ED8;
  --deep:      #23439D;
  /* No violet. The app's login gradient uses it, but on a calm teal-accented
     marketing page it is the one saturated colour with nothing to answer to. */

  /* The mark's teal. Emphasis is teal, action is blue — one rule, no exceptions. */
  --teal:      #7ACBC2;
  --teal-ink:  #0E6B60;
  --hl:        #CFEAE6;
  --hl-soft:   #E4F4F1;
  --hl-stroke: #4FB8AC;

  --page:      #F6F8FB;
  --card:      #FFFFFF;
  --ink:       #0B1220;
  /* Deliberate divergence from the product's text.secondary (#64748B): that value
     is 4.48:1 on this page background, just under WCAG AA. Darkened until it clears
     4.5 on both the page and card surfaces. See CLAUDE.md §2 — flagged for the app. */
  --ink-2:     #5A687E;
  --ink-3:     #97A3B6;  /* decorative only — fails AA on body copy */
  --line:      rgba(11, 18, 32, 0.08);
  --line-2:    rgba(11, 18, 32, 0.14);
  --hover:     rgba(11, 18, 32, 0.04);
  --on-brand:  #FFFFFF;
  --success:   #146C32;
  --danger:    #A81B1B;

  --r-sm: 9px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(11, 18, 32, 0.05);
  --sh-2: 0 1px 3px rgba(11, 18, 32, 0.09), 0 1px 2px -1px rgba(11, 18, 32, 0.06);
  --sh-3: 0 6px 14px -4px rgba(11, 18, 32, 0.10), 0 2px 5px -2px rgba(11, 18, 32, 0.05);
  --sh-5: 0 18px 34px -8px rgba(11, 18, 32, 0.13), 0 6px 12px -5px rgba(11, 18, 32, 0.05);
  --sh-6: 0 40px 70px -22px rgba(11, 18, 32, 0.26), 0 14px 26px -10px rgba(11, 18, 32, 0.08);

  /* Inter comes from Google Fonts with display=swap. If that request fails the
     stack below renders immediately and simply stays — no blank text. Nothing
     about the layout depends on Inter being present. */
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  --container: 1440px;
  --gutter: 32px;
  --ease: 150ms ease;

  color-scheme: light;
}

/* ── Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0; font-weight: 700; letter-spacing: -0.028em; line-height: 1.14;
  /* Stops a headline stranding one short word on its own line. An atomic .hl
     makes that likely, since the whole swipe jumps to the next line at once.
     Ignored by browsers that do not support it, which simply wrap as before. */
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 6.2vw, 5rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 3.8vw, 3rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.3; }
h4 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
p  { margin: 0; }

a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 20px; background: var(--card); color: var(--ink);
  border-radius: 0 0 var(--r-sm) 0; box-shadow: var(--sh-3); font-weight: 600;
}
.skip-link:focus { left: 0; }

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

/* ── Emphasis vocabulary ────────────────────────────────────────────── */
/* Three treatments, used sparingly. Emphasis is always teal so it never competes
   with a blue call to action. */

.hl {
  /* inline-block, so the phrase is atomic: if it does not fit on the current line
     it moves to the next line whole, instead of stranding a word above its own
     swipe. It still wraps internally when wider than the container. */
  display: inline-block;
  background: var(--hl);
  border-radius: 14px;
  /* An inline-block is as tall as its own line-height plus padding. Leave that at
     the headline's 1.14 and the swipe grows taller than the line advance, so it
     collides with the descenders of the line above. Pin it under the advance. */
  line-height: 0.95;
  padding: 0.07em 0.26em;
  margin: 0 -0.06em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.mark {
  background: var(--hl-soft);
  border-radius: 6px;
  padding: 0.08em 0.3em;
  font-weight: 500;
  color: var(--ink);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Hand-drawn underline beneath a coloured phrase. Inline SVG, so no request. */
.u-stroke { position: relative; color: var(--teal-ink); white-space: nowrap; }
.u-stroke::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -0.16em; height: 0.17em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 11' preserveAspectRatio='none'%3E%3Cpath d='M4 7.8C36 3.6 70 2.4 104 3.4c31 .9 61 2.8 92 4.6' fill='none' stroke='%234FB8AC' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

/* ── Layout ─────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* Escape the container and run to both viewport edges. Tinted bands use this so
   colour reaches the edge and the page stops reading as a column adrift in white. */
.bleed { width: 100vw; margin-inline: calc(50% - 50vw); }

.section { padding: 104px 0; }
.section--alt { background: var(--card); border-block: 1px solid var(--line); }
.section--tint { background: linear-gradient(180deg, #F1F7F6 0%, #F6F8FB 100%); }

.section-head { max-width: 780px; margin-bottom: 56px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 18px; color: var(--ink-2); font-size: 1.0625rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--teal-ink);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--deep), var(--teal));
}

.lede { font-size: 1.1875rem; line-height: 1.62; color: var(--ink-2); }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px 7px 12px;
  background: var(--card); color: var(--teal-ink);
  border: 1px solid rgba(79, 184, 172, 0.34);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
  font-size: 0.8125rem; font-weight: 600;
}
.badge svg { color: var(--hl-stroke); }

/* ── Header ─────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 248, 251, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.site-header > .container { display: flex; align-items: center; gap: 24px; height: 72px; }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em;
}
.brand:hover { text-decoration: none; }
.brand img {
  width: 36px; height: 36px; padding: 4px;
  background: #FFFFFF; border-radius: 9px; box-shadow: var(--sh-2);
}

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 2px; }
.nav a {
  display: block; padding: 9px 15px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: 0.9375rem; font-weight: 500;
  transition: background var(--ease), color var(--ease);
}
.nav a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
/* ...but not the CTA button: dark ink on the blue fill measures 3.45:1. */
.nav .btn, .nav .btn[aria-current="page"] { color: var(--on-brand); margin-left: 10px; }
.nav .btn:hover { background: var(--brand-700); color: var(--on-brand); }

.nav-toggle {
  display: none; margin-left: auto;
  width: 42px; height: 42px; padding: 0;
  align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--ink); cursor: pointer;
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.4;
  cursor: pointer; white-space: nowrap;
  transition: background var(--ease), border-color var(--ease), color var(--ease),
              box-shadow var(--ease), transform var(--ease);
}
.btn:hover { text-decoration: none; }
.btn svg { flex-shrink: 0; transition: transform var(--ease); }
.btn--primary {
  background: var(--brand-600); color: var(--on-brand);
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.12), 0 6px 16px -6px rgba(37, 99, 235, 0.55);
}
.btn--primary:hover { background: var(--brand-700); transform: translateY(-1px); }
.btn--primary:hover svg { transform: translateX(3px); }
.btn--ghost { background: var(--card); border-color: var(--line-2); color: var(--ink); box-shadow: var(--sh-1); }
.btn--ghost:hover { background: var(--card); border-color: var(--ink-3); transform: translateY(-1px); }
.btn--lg { padding: 15px 28px; font-size: 1rem; border-radius: 11px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Cards & grids ──────────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-2); }
.card--pad { padding: 30px; }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { position: relative; padding: 64px 0 96px; overflow: hidden; text-align: center; }

/* Dot grid + a teal glow. Both are gradients, so they cost nothing. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(11, 18, 32, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 90% 58% at 50% 24%, #000 34%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 58% at 50% 24%, #000 34%, transparent 78%);
}
.hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -320px; left: 50%; width: 1100px; height: 700px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(122, 203, 194, 0.30), transparent 64%);
}
.hero > .container { position: relative; z-index: 1; }

.hero h1 { margin: 26px auto 0; max-width: 17ch; }
.hero .lede { max-width: 58ch; margin: 26px auto 0; font-size: 1.25rem; }
.hero .btn-row { justify-content: center; margin-top: 36px; }
.hero .trust { margin-top: 18px; color: var(--ink-2); font-size: 0.875rem; }

/* The three surfaces the product ships on. Stated as badges rather than buried in
   a sentence, because "does it have an app" is a question every school asks. */
.platforms {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: 22px;
}
.platform {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px;
  /* Tinted, matching the hero badge. Plain white pills read as diagram nodes,
     which sit a few hundred pixels below and would be confused with these. */
  background: var(--hl-soft); border: 1px solid rgba(79, 184, 172, 0.34);
  border-radius: var(--r-pill);
  color: var(--teal-ink);
  font-size: 0.875rem; font-weight: 600; white-space: nowrap;
}
.platform svg { color: var(--teal-ink); flex-shrink: 0; }

.hero-proof {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px;
  margin-top: 28px; color: var(--ink-2); font-size: 0.875rem; font-weight: 500;
}
.hero-proof li { display: flex; align-items: center; gap: 8px; }
.hero-proof svg { flex-shrink: 0; color: var(--hl-stroke); }

/* ── Hero diagram ──────────────────────────────────────────── */
/* Deliberately NOT a picture of the product. A mocked-up dashboard misrepresents
   a UI we would then have to keep in sync with every release; this describes the
   architecture instead, which is the actual differentiator and cannot go stale.
   Wider than the text container on purpose — the diagram is what sets the page
   sense of width and stops the content reading as a stranded column. */
.hero-stage {
  position: relative; z-index: 1;
  width: min(1440px, 94vw);
  margin: 40px auto 0;
  aspect-ratio: 2.7 / 1;
}

/* Concentric rings, echoing the network graph in the ClassNet mark. */
.hero-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 20.6%, rgba(79,184,172,0.26) 21%, transparent 21.5%),
    radial-gradient(circle at 50% 50%, transparent 32.6%, rgba(79,184,172,0.18) 33%, transparent 33.5%),
    radial-gradient(circle at 50% 50%, transparent 44.6%, rgba(79,184,172,0.11) 45%, transparent 45.5%);
}

/* The spokes share the node coordinate space, so they align exactly at any
   width; non-scaling-stroke keeps them hairline when the box is stretched. */
.hero-stage__links { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-stage__links line {
  stroke: #9AD5CD; stroke-width: 1.5; vector-effect: non-scaling-stroke;
}

.hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; display: flex; align-items: center; gap: 13px;
  padding: 17px 26px 17px 19px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 24px 48px -16px rgba(11,18,32,0.24), 0 0 0 10px rgba(246,248,251,0.85);
  white-space: nowrap;
}
.hub img { width: 40px; height: 40px; }
.hub strong { display: block; font-size: 1.0625rem; letter-spacing: -0.022em; }
.hub span { display: block; font-size: 0.8125rem; color: var(--ink-2); }

.node {
  position: absolute; transform: translate(-50%, -50%); z-index: 1;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 17px 10px 13px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-pill); box-shadow: var(--sh-2);
  font-size: 0.875rem; font-weight: 600; white-space: nowrap;
}
.node svg { color: var(--teal-ink); flex-shrink: 0; }

/* Seven nodes on an ellipse around the hub. */
.node:nth-of-type(1) { left: 16%; top: 23%; }
.node:nth-of-type(2) { left: 40%; top: 8%; }
.node:nth-of-type(3) { left: 67%; top: 11%; }
.node:nth-of-type(4) { left: 86%; top: 34%; }
.node:nth-of-type(5) { left: 81%; top: 78%; }
.node:nth-of-type(6) { left: 50%; top: 92%; }
.node:nth-of-type(7) { left: 18%; top: 71%; }

/* ── Marquee — a full-bleed band of capabilities ────────────────────── */
.marquee {
  overflow: hidden; padding: 22px 0;
  background: var(--card); border-block: 1px solid var(--line);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.marquee ul { display: flex; align-items: center; gap: 14px; padding-right: 14px; }
.marquee li {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 18px; border: 1px solid var(--line);
  border-radius: var(--r-pill); background: var(--page);
  font-size: 0.875rem; font-weight: 500; white-space: nowrap; color: var(--ink-2);
}
.marquee li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--hl-stroke); flex-shrink: 0;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Bento grid ─────────────────────────────────────────────────────── */
/* Seven equal cards read as a spec sheet. Varying the spans gives the eye a
   path through them and lets the two anchor modules carry a visual. */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.bento > * { grid-column: span 2; }
.bento > .is-wide { grid-column: span 3; }

.tile {
  display: flex; flex-direction: column; gap: 11px;
  padding: 28px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); color: inherit;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color var(--ease);
}
a.tile:hover {
  transform: translateY(-3px); box-shadow: var(--sh-5);
  border-color: var(--line-2); text-decoration: none;
}
.tile__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--hl-soft); color: var(--teal-ink);
}
.tile h3 { font-size: 1.125rem; }
.tile p { color: var(--ink-2); font-size: 0.9375rem; }
.tile__more {
  margin-top: auto; padding-top: 6px;
  font-size: 0.875rem; font-weight: 600; color: var(--brand-600);
  display: inline-flex; align-items: center; gap: 6px;
}
a.tile:hover .tile__more svg { transform: translateX(3px); }
.tile__more svg { transition: transform var(--ease); }

/* A miniature visual inside the two wide tiles. */
.tile__viz {
  margin-top: 6px; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--page);
}
.viz-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  padding: 7px 0; font-size: 0.8125rem;
}
.viz-row + .viz-row { border-top: 1px solid var(--line); }
.viz-grid { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.viz-grid i { aspect-ratio: 1; border-radius: 3px; background: #CDEBD8; }
.viz-grid i.is-absent { background: #F6D2D2; }
.viz-grid i.is-empty { background: var(--hover); }

.pill { display: inline-block; padding: 3px 11px; border-radius: var(--r-pill); font-size: 0.6875rem; font-weight: 600; }
.pill--ok { background: #E3F3E9; color: var(--success); }
.pill--brand { background: var(--brand-50); color: var(--brand-600); }
.pill--teal { background: var(--hl-soft); color: var(--teal-ink); }
.pill--muted { background: var(--hover); color: var(--ink-2); }

/* ── Numbered steps ─────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: step; }
.step { position: relative; padding-top: 26px; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: block; margin-bottom: 14px;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; color: var(--hl-stroke);
}
.step::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--line-2);
}
.step:first-child::after { background: linear-gradient(90deg, var(--deep), var(--teal)); }
.step h3 { margin-bottom: 9px; }
.step p { color: var(--ink-2); font-size: 0.9375rem; }

/* ── Module detail sections ─────────────────────────────────────────── */
.module { padding: 84px 0; border-top: 1px solid var(--line); scroll-margin-top: 84px; }
.module > .container { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.module:nth-of-type(even) .module__media { order: -1; }
.module h2 { font-size: clamp(1.75rem, 2.8vw, 2.25rem); margin-bottom: 18px; }
.module > .container > div > p { color: var(--ink-2); margin-bottom: 24px; font-size: 1.0625rem; }

.feature-list { display: grid; gap: 14px; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; }
.feature-list svg { flex-shrink: 0; margin-top: 4px; color: var(--hl-stroke); }

/* Module-page mockups. */
.mock {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-5); overflow: hidden; text-align: left;
}
.mock__bar {
  display: flex; align-items: center; gap: 6px; padding: 12px 16px;
  background: #FBFCFE; border-bottom: 1px solid var(--line);
}
.mock__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.mock__title { margin-left: 8px; font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }
.mock__body { padding: 20px; display: grid; gap: 14px; }

.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mock-kpi { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--page); }
.mock-kpi span {
  display: block; font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2);
}
.mock-kpi strong { display: block; margin-top: 4px; font-size: 1.25rem; letter-spacing: -0.03em; }

.mock-rows { display: grid; gap: 9px; }
.mock-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 0.8125rem;
}
.mock-row b { font-weight: 600; }
.mock-row small { display: block; font-size: 0.6875rem; color: var(--ink-2); }
.mock-line { height: 8px; border-radius: 4px; background: var(--line-2); opacity: 0.6; }

.mock-attendance { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.mock-attendance i { aspect-ratio: 1; border-radius: 3px; background: #CDEBD8; }
.mock-attendance i.is-absent { background: #F6D2D2; }
.mock-attendance i.is-empty { background: var(--hover); }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: 12px; max-width: 840px; margin-inline: auto; }
.faq details {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
  transition: box-shadow var(--ease), border-color var(--ease);
}
.faq details[open] { box-shadow: var(--sh-3); border-color: var(--line-2); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 24px; font-weight: 600; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 180ms ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.faq .faq__a { padding: 0 24px 22px; color: var(--ink-2); }

/* ── Closing CTA ────────────────────────────────────────────────────── */
/* A contained panel, not a full-bleed saturated band. The band version was the
   only heavily saturated surface on the site and read as a different product. */
.cta-section { padding: 48px 0 104px; }
.cta-panel {
  position: relative; overflow: hidden;
  padding: 88px 40px; text-align: center;
  background: linear-gradient(165deg, #EDF7F5 0%, #EAF1FF 100%);
  border: 1px solid var(--line);
  border-radius: 32px;
}
.cta-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(11, 18, 32, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 66% 78% at 50% 50%, transparent 28%, #000 100%);
  -webkit-mask-image: radial-gradient(ellipse 66% 78% at 50% 50%, transparent 28%, #000 100%);
}
.cta-panel > * { position: relative; z-index: 1; }
.cta-panel h2 { margin: 0 auto 18px; max-width: 24ch; }
.cta-panel p { max-width: 54ch; margin: 0 auto 34px; color: var(--ink-2); font-size: 1.0625rem; }
.cta-panel .btn-row { justify-content: center; }

/* ── Forms ──────────────────────────────────────────────────────────── */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 0.875rem; font-weight: 600; }
.field .hint { font-size: 0.8125rem; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px;
  font-family: inherit; font-size: 0.9375rem; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.field [aria-invalid="true"] { border-color: var(--danger); }
.field .error { font-size: 0.8125rem; color: var(--danger); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { padding: 14px 16px; border-radius: var(--r-sm); font-size: 0.9375rem; }
.form-status--ok { background: #E3F3E9; color: var(--success); }
.form-status--err { background: #FBE9E9; color: var(--danger); }

.contact-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: start; }
.contact-detail { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-detail:last-child { border-bottom: 0; }
.contact-detail dt {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-2);
}
.contact-detail dd { margin: 0; font-size: 1rem; }

/* ── Prose (privacy / terms) ────────────────────────────────────────── */
.prose { max-width: 760px; }
.prose h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.prose h2 { font-size: 1.375rem; margin: 44px 0 12px; }
.prose h3 { font-size: 1.0625rem; margin: 28px 0 8px; }
.prose p, .prose li { color: var(--ink-2); margin-bottom: 12px; }
.prose ul { list-style: disc; padding-left: 22px; margin-bottom: 16px; }
.prose > p:first-of-type { font-size: 1.0625rem; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer { padding: 64px 0 30px; background: var(--card); border-top: 1px solid var(--line); }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 44px; }
.footer-top p { margin-top: 14px; max-width: 34em; color: var(--ink-2); font-size: 0.9375rem; }
.footer-by { margin-top: 14px; font-size: 0.9375rem; color: var(--ink-2); }
.footer-by a { color: var(--ink); font-weight: 600; }

.site-footer h2 {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 16px;
}
.site-footer nav ul { display: grid; gap: 11px; }
.site-footer nav a { color: var(--ink-2); font-size: 0.9375rem; }
.site-footer nav a:hover { color: var(--ink); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  padding-top: 26px; border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: 0.8125rem;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento > *, .bento > .is-wide { grid-column: span 2; }
  .hero-stage { width: min(100%, 96vw); }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .section { padding: 72px 0; }
  .hero { padding: 52px 0 0; }
  .hero-stage {
    aspect-ratio: auto; width: 100%; margin: 36px auto 0;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
  }
  .hero-stage::before, .hero-stage__links { display: none; }
  .hub, .node { position: static; transform: none; }
  .hub { order: -1; box-shadow: var(--sh-5); }
  .hero-stage .node-cluster { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
  .steps { grid-template-columns: 1fr; gap: 20px; }
  .module > .container,
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .module:nth-of-type(even) .module__media { order: 0; }
  .grid--3, .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .cta-panel { padding: 64px 26px; border-radius: 24px; }
  .cta-section { padding: 28px 0 72px; }

  .nav-toggle { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 72px;
    padding: 12px var(--gutter) 22px;
    background: var(--page); border-bottom: 1px solid var(--line); box-shadow: var(--sh-3);
  }
  .nav[data-open="true"] { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav a { padding: 13px 15px; font-size: 1rem; }
  .nav .btn { margin: 10px 0 0; }
}

@media (max-width: 620px) {
  .bento, .grid--3, .grid--2, .field-row { grid-template-columns: 1fr; }
  .bento > *, .bento > .is-wide { grid-column: auto; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; }
  .mock-kpis { grid-template-columns: 1fr 1fr; }
  .btn-row .btn { width: 100%; }
  .hero h1 { max-width: none; }
  /* A nowrap underlined phrase can force a scrollbar on a narrow screen. */
  .u-stroke { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}