/* Prepwll marketing site — portal-aligned (blue / orange, light) */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Light theme — Linear rhythm, brighter palette */
  --ink: #111827;
  --ink-copy: #4b5563;
  --ink-muted: #6b7280;
  --border: #e5e7eb;
  --surface: #ffffff;
  --surface-muted: #f4f6f8;
  --surface-elevated: #fafafa;
  --blue: #2563eb;
  --blue-soft: #eef4ff;
  --orange: #f59e0b;
  --orange-soft: #fff7ed;
  --success: #059669;
  --success-soft: #ecfdf5;
  --warning: #d97706;
  --warning-soft: #fffbeb;
  --critical: #dc2626;
  --critical-soft: #fef2f2;
  --font: 'Golos Text', system-ui, sans-serif;
  --font-display: 'Gulzar', Georgia, serif;
  /* Linear ~64–68rem; slightly wider per request */
  --page-max: 80rem;
  --hero-text-max: var(--page-max);
  --section-x: clamp(1.25rem, 4vw, 3.5rem);
  --text-display-xl: clamp(2.25rem, 4.5vw, 4.5rem);
  --text-display: clamp(2rem, 3.5vw, 3rem);
  --text-h2: 1.5rem;
  --text-h3: 1.25rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.9375rem;
  --text-caption: 0.8125rem;
  --text-label: 0.75rem;
  --nav-h: 64px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-card:
    0 1px 2px rgba(17, 24, 39, 0.04),
    0 8px 24px rgba(17, 24, 39, 0.06);
}

html { scroll-behavior: smooth; overflow-x: clip; }

body.site-new {
  font-family: var(--font);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--section-x);
}

/* ── Buttons ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font);
  font-size: var(--text-small);
  font-weight: 600;
  padding: 0.7rem 1.35rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}

.btn--sm { padding: 0.55rem 1.1rem; font-size: var(--text-caption); }

.btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}

.btn--primary:hover {
  background: #1d4ed8;
}

.btn--dark {
  background: var(--ink);
  color: #fff;
}

.btn--dark:hover {
  background: #333;
}

.btn--orange {
  background: var(--orange);
  color: #fff;
}

.btn--orange:hover {
  background: #d97706;
}

.btn--outline {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}

.btn--outline:hover {
  border-color: var(--ink-muted);
  background: var(--surface-muted);
}

.btn--ghost {
  background: transparent;
  color: var(--blue);
  padding-inline: 0.5rem;
}

.btn--ghost:hover { opacity: 0.75; }

/* ── Nav ── */

.site-new .nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  padding-inline: var(--section-x);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.site-new .nav.scrolled { border-bottom-color: var(--border); }

.site-new .nav__inner {
  height: 100%;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-new .nav__logo svg { display: block; height: 30px; width: auto; }

.site-new .nav__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  flex: 1;
}

.site-new .nav__links a {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--ink-copy);
  transition: color 0.2s;
}

.site-new .nav__links a:hover { color: var(--blue); }

.site-new .nav__inner > .btn { flex-shrink: 0; margin-left: auto; }

.site-new .nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  margin-left: auto;
}

.site-new .nav__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}

.site-new .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-new .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; }

.site-new .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
  .site-new .nav { height: auto; min-height: var(--nav-h); }
  .site-new .nav__inner { flex-wrap: wrap; }
  .site-new .nav__toggle { display: inline-flex; order: 2; }
  .site-new .nav__inner > .btn { order: 3; margin-left: 0.5rem; }
  .site-new .nav__links {
    display: none;
    order: 4;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.35rem 0 0.85rem;
    border-top: 1px solid var(--border);
    margin-top: 0.65rem;
  }
  .site-new .nav__links.is-open { display: flex; }
  .site-new .nav__links a {
    padding: 0.7rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  }
  .site-new .nav__links a:last-child { border-bottom: none; }
}

/* ── Typography helpers ── */

.label {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.75rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-bottom: 0.75rem;
}

.section-lead {
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--ink-copy);
  max-width: 38rem;
}

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

.label--orange { color: var(--orange); }

/* ── Hero (reference / Linear-style, light theme) ── */

.site-new .hero--ref {
  position: relative;
  padding: calc(var(--nav-h) + clamp(2.5rem, 5vw, 4rem)) var(--section-x) 0;
  text-align: left;
  background:
    radial-gradient(ellipse 55% 40% at 50% -8%, rgba(238, 244, 255, 0.75) 0%, transparent 70%),
    var(--surface);
  overflow: hidden;
}

.site-new .hero--ref .hero__inner {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.site-new .hero--ref .hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  max-width: var(--page-max);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Subtitle below title */
.site-new .hero--ref .hero__subtitle {
  margin-top: 0.625rem;
  font-family: var(--font);
  font-size: clamp(1.0625rem, 0.6vw + 0.95rem, 1.1875rem);
  line-height: 1.55;
  font-weight: 400;
  color: var(--ink-copy);
  max-width: 42rem;
  letter-spacing: -0.014em;
}

.site-new .hero--ref .hero__subtitle-accent {
  background: linear-gradient(90deg, #6366f1 0%, #7c3aed 45%, #9333ea 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}

.site-new .hero--ref .hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 2.8vw + 1.5rem, 4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.038em;
  color: var(--ink);
  max-width: var(--hero-text-max);
  width: 100%;
  text-wrap: balance;
}

.site-new .hero--ref .hero__line {
  display: block;
}

@media (min-width: 900px) {
  .site-new .hero--ref .hero__line {
    white-space: nowrap;
  }
}

.site-new .hero--ref .hero__exams {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: var(--hero-text-max);
  margin-top: 0.875rem;
}

.site-new .hero--ref .hero__exams li {
  font-family: var(--font);
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-copy);
}

.site-new .hero--ref .hero__exams li + li::before {
  content: "·";
  margin-inline: 0.65rem;
  color: color-mix(in srgb, var(--ink-muted) 50%, transparent);
  font-weight: 400;
}

/* Product stage */
.site-new .hero--ref .hero__stage {
  position: relative;
  width: 100%;
  isolation: isolate;
}

.site-new .hero--ref .hero__stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: clamp(1.75rem, 4vw, 2.75rem);
  background: linear-gradient(to bottom, transparent 0%, transparent 35%, var(--surface) 100%);
  pointer-events: none;
  z-index: 4;
}

.site-new .hero--ref .product-demo__shell--hero {
  --demo-border: color-mix(in srgb, #f59e0b 22%, #e2cdb5);
  --demo-surface: #fffaf5;
  --demo-surface-muted: #fff3e8;
  --demo-ink: #1c1917;
  --demo-ink-body: #44403c;
  --demo-ink-muted: #78716c;
  --demo-ink-label: #57534e;
  color: var(--demo-ink-body);
  position: relative;
  z-index: 1;
  border-radius: 12px;
  border: 1px solid var(--demo-border);
  background: linear-gradient(
    168deg,
    var(--demo-surface) 0%,
    color-mix(in srgb, var(--demo-surface-muted) 88%, #ffedd5) 52%,
    #ffeede 100%
  );
  box-shadow:
    0 1px 2px rgba(146, 92, 32, 0.06),
    0 10px 28px rgba(146, 92, 32, 0.05);
  overflow: hidden;
  text-align: left;
}

.site-new .hero--ref .product-demo__chrome {
  padding: 0.7rem 1rem 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--demo-border) 88%, #f5e6d6);
  background: color-mix(in srgb, var(--demo-surface-muted) 42%, transparent);
}

.site-new .hero--ref .product-demo__bar--hero {
  position: static;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  padding: 0;
  border: none;
  background: transparent;
}

.site-new .hero--ref .product-demo__bar-start {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex: 1;
}

.site-new .hero--ref .product-demo__bar--hero .audience-toggle__btn {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--demo-ink-muted);
}

.site-new .hero--ref .product-demo__bar--hero .audience-toggle__btn.is-active {
  color: var(--demo-ink);
}

.site-new .hero--ref .product-demo__bar--hero .audience-toggle__btn[data-audience="institute"].is-active {
  color: #b45309;
}

.site-new .hero--ref .product-demo__bar--hero .audience-toggle__btn[data-audience="student"].is-active {
  color: var(--blue);
}

.site-new .hero--ref .product-demo__shell--hero[data-active-audience="institute"] .product-demo__deck {
  min-height: 0;
}

.site-new .hero--ref .product-demo__shell--hero[data-active-audience="institute"] .product-demo__viewport--hero {
  min-height: auto;
  padding-bottom: 0.25rem;
}

.site-new .hero--ref .product-demo__bar--hero .audience-toggle {
  background: color-mix(in srgb, var(--demo-surface-muted) 75%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--demo-border) 75%, var(--border));
  box-shadow: none;
}

.site-new .hero--ref .product-demo__viewport--hero {
  position: relative;
  min-height: clamp(18rem, 45vh, 32rem);
  padding: 0.75rem 1rem 0.65rem;
  background: color-mix(in srgb, var(--demo-surface) 55%, transparent);
}

.site-new .hero--ref .product-demo__shell--hero .product-demo__deck {
  min-height: clamp(16rem, 38vh, 28rem);
}

.site-new .hero--ref .product-demo__shell--hero .mock-app--demo,
.site-new .hero--ref .product-demo__shell--hero .mock-edu--demo {
  max-width: none;
  width: 100%;
  margin-inline: 0;
}

.site-new .hero--ref .product-demo__shell--hero .mock-app {
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.site-new .hero--ref .product-demo__shell--hero .mock-card--insights,
.site-new .hero--ref .product-demo__shell--hero .mock-card--ability {
  max-width: none;
}

.site-new .hero--ref .product-demo__shell--hero .product-demo__slide {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

.site-new .hero--ref .product-demo__shell--hero .product-demo__slide.is-active {
  display: flex;
}

/* Focus demo — no app chrome, content only */
.site-new .hero--ref .demo-focus {
  width: 100%;
  padding: 0 0 0.5rem;
  background: transparent;
}

.site-new .hero--ref .demo-focus__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.site-new .hero--ref .demo-focus__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--demo-ink);
}

.site-new .hero--ref .demo-focus__sub {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--demo-ink-muted);
}

.site-new .hero--ref .demo-focus__body {
  width: 100%;
}

.site-new .hero--ref .demo-focus__unlock {
  margin-top: 0.65rem;
}

/* Student — ability journey (split: summary + chart left, plan right) */
.site-new .hero--ref .student-journey-demo {
  width: 100%;
  padding: 0 0 0.5rem;
}

.site-new .hero--ref .student-journey-demo__main {
  gap: 0.55rem;
}

.site-new .hero--ref .student-journey-demo__chart {
  min-width: 0;
}

.site-new .hero--ref .student-journey-demo__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.35rem;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--demo-ink-muted);
}

.site-new .hero--ref .student-journey-demo__title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--demo-ink);
}

.site-new .hero--ref .student-journey-demo__sep {
  color: color-mix(in srgb, var(--demo-ink-muted) 70%, transparent);
  font-weight: 400;
}

.site-new .hero--ref .student-journey-demo__context {
  color: var(--demo-ink-muted);
}

.site-new .hero--ref .student-journey-demo__phase {
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue-soft) 80%, transparent);
}

.site-new .hero--ref .student-journey-demo__stat {
  font-weight: 600;
  color: var(--demo-ink);
}

.site-new .hero--ref .student-journey-demo__stat--up {
  color: var(--success);
}

.site-new .hero--ref .student-summary {
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--demo-border) 85%, var(--border));
  background: color-mix(in srgb, var(--demo-surface-muted) 55%, var(--surface));
}

.site-new .hero--ref .student-summary > p:not(.edu-action-panel__label) {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--demo-ink-body);
}

.site-new .hero--ref .student-summary > p:not(.edu-action-panel__label):last-child {
  margin-top: 0.4rem;
  font-size: 0.6875rem;
  color: var(--demo-ink-muted);
}

.site-new .hero--ref .proficiency-map {
  position: relative;
  width: 100%;
}

.site-new .hero--ref .proficiency-map__canvas {
  position: relative;
  min-height: clamp(9.5rem, 24vh, 12.5rem);
  padding: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--demo-surface-muted) 35%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--demo-border) 75%, var(--border));
  overflow: hidden;
}

.site-new .hero--ref .proficiency-map__plot {
  position: relative;
  min-height: clamp(8.25rem, 20vh, 10.5rem);
  background: var(--demo-surface);
  overflow: hidden;
}

/* Same 3 ability bands as institute spread chart — not a rainbow */
.site-new .hero--ref .proficiency-map__plot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--critical) 18%, var(--orange-soft)) 0%,
    color-mix(in srgb, var(--critical) 18%, var(--orange-soft)) 50%,
    color-mix(in srgb, var(--warning) 14%, var(--warning-soft)) 50%,
    color-mix(in srgb, var(--warning) 14%, var(--warning-soft)) 70%,
    color-mix(in srgb, var(--success) 14%, var(--success-soft)) 70%,
    color-mix(in srgb, var(--success) 14%, var(--success-soft)) 100%
  );
}

.site-new .hero--ref .proficiency-map__plot::after {
  content: none;
}

.site-new .hero--ref .proficiency-map__zones {
  position: absolute;
  inset: 0;
  display: grid;
  /* Ability ranges per reference: 0–35, 35–50, 50–60, 60–70, 70–80, 80–90, 90–95, 95–100 */
  grid-template-columns: 35fr 15fr 10fr 10fr 10fr 10fr 5fr 5fr;
  z-index: 0;
  pointer-events: none;
}

.site-new .hero--ref .proficiency-map__zone {
  height: 100%;
  border-right: none;
}

.site-new .hero--ref .proficiency-map__zone:last-child {
  border-right: none;
}

.site-new .hero--ref .proficiency-map__phase-band {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  border-radius: 0;
  background: color-mix(in srgb, var(--blue-soft) 82%, transparent);
  border: none;
  border-left: 1px solid color-mix(in srgb, var(--blue) 22%, var(--demo-border));
  border-right: 1px solid color-mix(in srgb, var(--blue) 22%, var(--demo-border));
  box-shadow: none;
  transform: translateX(-50%);
  pointer-events: none;
}

.site-new .hero--ref .proficiency-map__svg {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
}

.site-new .hero--ref .proficiency-map__grid line {
  stroke: color-mix(in srgb, var(--ink-muted) 24%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.site-new .hero--ref .proficiency-map__scores text,
.site-new .hero--ref .proficiency-map__score {
  fill: var(--demo-ink-muted);
  font-size: 10px;
  font-weight: 500;
  text-anchor: middle;
}

.site-new .hero--ref .proficiency-map__path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-new .hero--ref .proficiency-map__path--past,
.site-new .hero--ref .proficiency-map__path--ahead {
  stroke: color-mix(in srgb, var(--demo-ink-muted) 42%, var(--demo-border));
  stroke-width: 2;
  opacity: 0.55;
}

.site-new .hero--ref .proficiency-map__path--done {
  stroke: var(--blue);
  stroke-width: 2.75;
}

.site-new .hero--ref .proficiency-map__path--planned {
  stroke: var(--orange);
  stroke-width: 2.5;
  stroke-dasharray: 6 5;
}

.site-new .hero--ref .proficiency-map__marker {
  pointer-events: none;
}

.site-new .hero--ref .proficiency-map__marker-dot {
  fill: color-mix(in srgb, var(--blue) 70%, var(--ink-muted));
  stroke: var(--demo-surface);
  stroke-width: 1;
}

.site-new .hero--ref .proficiency-map__marker-label--start {
  fill: var(--demo-ink-body);
  font-size: 10px;
  font-weight: 600;
  text-anchor: middle;
}

.site-new .hero--ref .proficiency-map__marker-ring {
  fill: color-mix(in srgb, var(--blue) 14%, transparent);
  stroke: none;
}

.site-new .hero--ref .proficiency-map__marker-core {
  fill: var(--demo-surface);
  stroke: var(--blue);
  stroke-width: 1.5;
}

.site-new .hero--ref .proficiency-map__marker-pin {
  fill: var(--blue);
  stroke: none;
}

.site-new .hero--ref .proficiency-map__marker-flag {
  fill: var(--orange);
  stroke: var(--demo-surface);
  stroke-width: 1;
}

.site-new .hero--ref .proficiency-map__marker-label {
  fill: var(--blue);
  font-size: 12px;
  font-weight: 600;
  text-anchor: middle;
}

.site-new .hero--ref .proficiency-map__marker-label--target {
  fill: var(--orange);
  font-size: 12px;
  font-weight: 600;
}

.site-new .hero--ref .student-plan-panel__wt {
  font-style: normal;
  font-weight: 700;
  color: var(--demo-ink-label);
}


.site-new .hero--ref .proficiency-map__phases {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 35fr 15fr 10fr 10fr 10fr 10fr 5fr 5fr;
  gap: 0;
  padding: 0.28rem 0 0.45rem;
  border-top: 1px solid color-mix(in srgb, var(--demo-border) 70%, var(--border));
  background: color-mix(in srgb, var(--demo-surface) 80%, var(--surface));
}

.site-new .hero--ref .proficiency-map__phases span {
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  color: var(--demo-ink-muted);
  padding: 0.12rem 0.1rem;
}

.site-new .hero--ref .proficiency-map__phases span.is-active {
  color: var(--blue);
  font-weight: 600;
  background: color-mix(in srgb, var(--blue-soft) 75%, transparent);
  border-radius: 3px;
}

.site-new .hero--ref .proficiency-map--hero:not(.is-motion-ready) .proficiency-map__path--past,
.site-new .hero--ref .proficiency-map--hero:not(.is-motion-ready) .proficiency-map__path--done {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}

.site-new .hero--ref .proficiency-map--hero:not(.is-motion-ready) .proficiency-map__path--planned,
.site-new .hero--ref .proficiency-map--hero:not(.is-motion-ready) .proficiency-map__marker--start,
.site-new .hero--ref .proficiency-map--hero:not(.is-motion-ready) .proficiency-map__marker--you,
.site-new .hero--ref .proficiency-map--hero:not(.is-motion-ready) .proficiency-map__marker--target {
  opacity: 0;
}

.site-new .hero--ref .proficiency-map--hero.is-motion-ready .proficiency-map__path--past,
.site-new .hero--ref .proficiency-map--hero.is-motion-ready .proficiency-map__path--done {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: proficiency-path-draw 1s ease forwards;
}

.site-new .hero--ref .proficiency-map--hero.is-motion-ready .proficiency-map__path--done {
  animation-delay: 0.4s;
}

.site-new .hero--ref .proficiency-map--hero.is-motion-ready .proficiency-map__path--planned {
  opacity: 0;
  animation: proficiency-planned-in 0.5s ease 0.85s forwards;
}

.site-new .hero--ref .proficiency-map--hero.is-motion-ready .proficiency-map__marker--start {
  opacity: 0;
  animation: proficiency-dot-in 0.3s ease 0.5s forwards;
}

.site-new .hero--ref .proficiency-map--hero.is-motion-ready .proficiency-map__marker--you {
  opacity: 0;
  animation: proficiency-dot-in 0.35s ease 0.75s forwards;
}

.site-new .hero--ref .proficiency-map--hero.is-motion-ready .proficiency-map__marker--you .proficiency-map__marker-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: proficiency-you-pulse 1.6s ease-in-out 1.15s 2;
}

.site-new .hero--ref .proficiency-map--hero.is-motion-ready .proficiency-map__marker--target {
  opacity: 0;
  animation: proficiency-dot-in 0.35s ease 0.95s forwards;
}

@keyframes proficiency-planned-in {
  to { opacity: 1; }
}

@keyframes proficiency-path-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes proficiency-dot-in {
  to { opacity: 1; }
}

@keyframes proficiency-you-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: 0.72; }
}

@media (prefers-reduced-motion: reduce) {
  .site-new .hero--ref .proficiency-map--hero .proficiency-map__path--past,
  .site-new .hero--ref .proficiency-map--hero .proficiency-map__path--done {
    stroke-dashoffset: 0;
  }

  .site-new .hero--ref .proficiency-map--hero .proficiency-map__path--planned,
  .site-new .hero--ref .proficiency-map--hero .proficiency-map__marker--you,
  .site-new .hero--ref .proficiency-map--hero .proficiency-map__marker--target,
  .site-new .hero--ref .proficiency-map--hero .proficiency-map__marker--start {
    opacity: 1;
  }

  .site-new .hero--ref .proficiency-map--hero.is-motion-ready .proficiency-map__path--past,
  .site-new .hero--ref .proficiency-map--hero.is-motion-ready .proficiency-map__path--done {
    animation: none;
    stroke-dashoffset: 0;
  }

  .site-new .hero--ref .proficiency-map--hero.is-motion-ready .proficiency-map__path--planned {
    animation: none;
    opacity: 1;
  }

  .site-new .hero--ref .proficiency-map--hero.is-motion-ready .proficiency-map__marker--you,
  .site-new .hero--ref .proficiency-map--hero.is-motion-ready .proficiency-map__marker--target,
  .site-new .hero--ref .proficiency-map--hero.is-motion-ready .proficiency-map__marker--start {
    animation: none;
    opacity: 1;
  }

  .site-new .hero--ref .proficiency-map--hero.is-motion-ready .proficiency-map__marker--you .proficiency-map__marker-ring {
    animation: none;
  }
}

.site-new .hero--ref .student-days-card {
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--demo-border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue-soft) 80%, #fff7ed) 0%, var(--surface) 100%);
}

.site-new .hero--ref .student-days-card__label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--demo-ink-label);
}

.site-new .hero--ref .student-days-card__value {
  margin: 0.12rem 0 0;
  font-size: clamp(2rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--blue);
}

.site-new .hero--ref .student-days-card__exam {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--demo-ink);
}

.site-new .hero--ref .student-days-card__meta {
  margin: 0.15rem 0 0;
  font-size: 0.625rem;
  color: var(--demo-ink-muted);
}

/* Institute — chart + connected KPIs (left), action plan (right) */
.site-new .hero--ref .edu-spread-demo {
  width: 100%;
  padding: 0 0 0.5rem;
  background: transparent;
}

.site-new .hero--ref .edu-spread-demo__head {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  margin-bottom: 0.75rem;
  padding: 0;
}

.site-new .hero--ref .edu-spread-demo__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--demo-ink);
}

.site-new .hero--ref .edu-spread-demo__sub {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--demo-ink-muted);
}

.site-new .hero--ref .edu-spread-demo__split {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(10.5rem, 0.78fr);
  gap: clamp(1rem, 2.2vw, 1.5rem);
  align-items: stretch;
}

.site-new .hero--ref .edu-spread-demo__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-new .hero--ref .edu-spread-demo__chart {
  min-width: 0;
  display: flex;
  width: 100%;
}

.site-new .hero--ref .edu-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid color-mix(in srgb, var(--demo-border) 90%, var(--border));
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--demo-surface-muted) 80%, var(--surface)) 0%,
    color-mix(in srgb, #ffedd5 35%, var(--surface)) 100%
  );
  align-items: stretch;
}

.site-new .hero--ref .edu-kpi-row .edu-kpi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0;
  padding: 0.5rem 0.7rem;
  min-height: 2.625rem;
  margin: 0;
  border: none;
  border-right: 1px solid color-mix(in srgb, var(--demo-border) 65%, var(--border));
  border-radius: 0;
  background: transparent;
  align-items: stretch;
}

.site-new .hero--ref .edu-kpi-row .edu-kpi__col--main {
  display: grid;
  grid-template-rows: 1fr 1fr;
  min-width: 0;
  padding-right: 0.6rem;
}

.site-new .hero--ref .edu-kpi-row .edu-kpi__col--main .edu-kpi__label {
  align-self: start;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.25;
  color: var(--demo-ink-label);
}

.site-new .hero--ref .edu-kpi-row .edu-kpi__col--main .edu-kpi__value {
  align-self: end;
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--demo-ink);
}

.site-new .hero--ref .edu-kpi-row .edu-kpi--primary .edu-kpi__label {
  color: var(--blue);
  white-space: nowrap;
}

.site-new .hero--ref .edu-kpi-row .edu-kpi--primary .edu-kpi__value {
  color: var(--blue);
}

.site-new .hero--ref .edu-kpi-row .edu-kpi--warn .edu-kpi__label {
  color: #b45309;
}

.site-new .hero--ref .edu-kpi-row .edu-kpi--warn .edu-kpi__value {
  color: #c2410c;
}

.site-new .hero--ref .edu-kpi-row .edu-kpi--ok .edu-kpi__label {
  color: #047857;
}

.site-new .hero--ref .edu-kpi-row .edu-kpi--ok .edu-kpi__value {
  color: #059669;
}

.site-new .hero--ref .edu-kpi-row .edu-kpi__col--meta {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  align-self: stretch;
  gap: 0.1rem;
  padding-left: 0.6rem;
  border-left: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.site-new .hero--ref .edu-kpi-row .edu-kpi__col--meta .edu-kpi__change {
  display: block;
  padding: 0;
  font-size: 0.6875rem;
  line-height: 1.25;
  white-space: nowrap;
  background: transparent;
  border-radius: 0;
  color: var(--demo-ink-body);
}

.site-new .hero--ref .edu-kpi-row .edu-kpi__col--meta .edu-kpi__change--bad strong {
  color: var(--critical);
}

.site-new .hero--ref .edu-kpi-row .edu-kpi__col--meta .edu-kpi__change--ok strong {
  color: var(--success);
}

.site-new .hero--ref .edu-kpi-row .edu-kpi:not(:has(.edu-kpi__col--meta)) .edu-kpi__col--main {
  grid-column: 1 / -1;
  padding-right: 0;
}

.site-new .hero--ref .edu-kpi-row .edu-kpi:last-child {
  border-right: none;
}

.site-new .hero--ref .edu-action-panel {
  min-width: 0;
  padding: 0.65rem 0 0.65rem clamp(0.85rem, 1.5vw, 1.15rem);
  border-left: 1px solid color-mix(in srgb, var(--demo-border) 80%, var(--border));
  display: flex;
  flex-direction: column;
  background: transparent;
}

.site-new .hero--ref .edu-action-panel__label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--demo-ink-label);
}

.site-new .hero--ref .edu-action-panel__lead {
  margin: 0.45rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--demo-ink-body);
}

.site-new .hero--ref .edu-action-panel .edu-kpi__actions {
  margin-top: 0.55rem;
  flex: 1;
}

.site-new .hero--ref .spread-band {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
}

.site-new .hero--ref .spread-band--flush {
  border: none;
  border-radius: 0;
  background: transparent;
}

.site-new .hero--ref .spread-band__plot {
  --spread-track-inset: 0.25rem;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.site-new .hero--ref .spread-band__chart-area {
  --spread-pct-offset: 1rem;
  --spread-pct-h: 1.15rem;
  position: relative;
  min-height: clamp(8.75rem, 23vh, 11.25rem);
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-muted) 38%, transparent);
}

.site-new .hero--ref .spread-band__zones {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, #dc2626 18%, #fff7ed) 0%,
    color-mix(in srgb, #dc2626 18%, #fff7ed) 50%,
    color-mix(in srgb, #d97706 14%, #fffbeb) 50%,
    color-mix(in srgb, #d97706 14%, #fffbeb) 70%,
    color-mix(in srgb, #059669 14%, #ecfdf5) 70%,
    color-mix(in srgb, #059669 14%, #ecfdf5) 100%
  );
  z-index: 0;
}

.site-new .hero--ref .spread-band__guides {
  position: absolute;
  left: var(--spread-track-inset);
  right: var(--spread-track-inset);
  top: 0.35rem;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
}

.site-new .hero--ref .spread-band__guide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed color-mix(in srgb, var(--ink-muted) 28%, transparent);
  transform: translateX(-50%);
}

.site-new .hero--ref .spread-band__dots {
  position: absolute;
  left: var(--spread-track-inset);
  right: var(--spread-track-inset);
  top: 0.35rem;
  bottom: calc(var(--spread-pct-offset) + var(--spread-pct-h) + 0.2rem);
  z-index: 3;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.site-new .hero--ref .spread-band__pct-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--spread-pct-offset);
  z-index: 5;
  padding: 0 var(--spread-track-inset);
  pointer-events: none;
}

.site-new .hero--ref .spread-band__pct-legend {
  position: absolute;
  left: 0.35rem;
  bottom: 0;
  margin: 0;
  padding-bottom: 0.18rem;
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--demo-ink-label);
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(255, 251, 235, 0.95);
}

.site-new .hero--ref .spread-band__pct-track {
  position: relative;
  min-height: var(--spread-pct-h);
}

.site-new .hero--ref .spread-band__pct-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  border-top: 1px dashed color-mix(in srgb, var(--ink-muted) 40%, transparent);
}

.site-new .hero--ref .spread-band__bands {
  position: relative;
  min-height: calc(var(--spread-pct-h) - 0.18rem);
  pointer-events: none;
}

.site-new .hero--ref .spread-band__bands span {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  color: var(--demo-ink);
  white-space: nowrap;
}

.site-new .hero--ref .spread-band__axis {
  padding: 0.3rem var(--spread-track-inset) 0;
  pointer-events: none;
}

.site-new .hero--ref .spread-band__axis-ticks {
  position: relative;
  height: 0.85rem;
}

.site-new .hero--ref .spread-band__axis-ticks span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1;
  color: var(--demo-ink-muted);
}

.site-new .hero--ref .spread-band__axis-ticks span:first-child {
  left: 0;
  transform: none;
}

.site-new .hero--ref .spread-band__axis-ticks span:last-child {
  left: auto;
  right: 0;
  transform: none;
}

.site-new .hero--ref .spread-band__axis-label {
  display: block;
  margin: 0.15rem 0 0;
  padding-bottom: 0;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--demo-ink-label);
}

.site-new .hero--ref .spread-band__axis-note {
  display: block;
  margin: 0.1rem 0 0;
  text-align: center;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--demo-ink-muted);
}

.site-new .hero--ref .edu-kpi-row .edu-kpi__col--meta .edu-kpi__roi {
  margin: 0;
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.08rem;
  font-size: 0.6875rem;
  line-height: 1.2;
  text-align: right;
  color: var(--demo-ink-body);
}

.site-new .hero--ref .edu-kpi-row .edu-kpi__col--meta .edu-kpi__roi-line {
  display: block;
  white-space: nowrap;
}

.site-new .hero--ref .edu-kpi-row .edu-kpi__col--meta .edu-kpi__roi strong {
  color: var(--success);
  font-weight: 700;
}

.site-new .hero--ref .spread-band__dots.is-visible,
.site-new .hero--ref .product-demo__slide.is-active .spread-band__dots {
  opacity: 1;
}

.site-new .hero--ref .spread-band__dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #3b82f6;
  transform: translate(-50%, 50%);
  box-shadow: 0 0 0 0.5px rgba(255, 251, 235, 0.9);
  will-change: opacity;
}

.site-new .hero--ref .edu-kpi-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.site-new .hero--ref .edu-kpi {
  padding: 0.55rem 0;
  border-radius: 0;
  background: transparent;
}

.site-new .hero--ref .edu-kpi__label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--demo-ink-label);
}

.site-new .hero--ref .edu-kpi__value {
  margin: 0.15rem 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--demo-ink);
}

.site-new .hero--ref .edu-kpi__value--warn { color: var(--warning); }
.site-new .hero--ref .edu-kpi__value--ok { color: var(--success); }

.site-new .hero--ref .edu-kpi--warn .edu-kpi__value { color: var(--warning); }
.site-new .hero--ref .edu-kpi--ok .edu-kpi__value { color: var(--success); }

.site-new .hero--ref .edu-kpi__sub {
  margin: 0.1rem 0 0;
  font-size: 0.625rem;
  color: var(--ink-muted);
}

.site-new .hero--ref .edu-kpi__foot {
  margin: 0.35rem 0 0;
  font-size: 0.5625rem;
  color: var(--ink-muted);
}

.site-new .hero--ref .edu-kpi__changes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.45rem;
}

.site-new .hero--ref .edu-kpi__change {
  padding: 0.2rem 0.35rem;
  border-radius: 5px;
  font-size: 0.5625rem;
  color: var(--ink-copy);
  background: color-mix(in srgb, var(--surface-muted) 80%, transparent);
}

.site-new .hero--ref .edu-kpi__change strong {
  font-weight: 700;
}

.site-new .hero--ref .edu-kpi__change--bad {
  background: color-mix(in srgb, var(--critical) 8%, var(--surface));
}

.site-new .hero--ref .edu-kpi__change--bad strong {
  color: var(--critical);
}

.site-new .hero--ref .edu-kpi__change--ok {
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
}

.site-new .hero--ref .edu-kpi__change--ok strong {
  color: var(--success);
}

.site-new .hero--ref .edu-kpi--action {
  background: transparent;
}

.site-new .hero--ref .edu-kpi__actions {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.site-new .hero--ref .edu-kpi__actions li,
.site-new .hero--ref .edu-kpi__actions__item {
  padding: 0.28rem 0 0.28rem 0.5rem;
  border-left: 2px solid color-mix(in srgb, var(--orange) 62%, var(--demo-border));
  background: color-mix(in srgb, var(--demo-surface-muted) 55%, transparent);
  border-radius: 0 4px 4px 0;
}

.site-new .hero--ref .edu-kpi__actions__item.is-priority {
  padding: 0.38rem 0.45rem 0.38rem 0.55rem;
  border-left: 3px solid var(--blue);
  background: color-mix(in srgb, var(--blue-soft) 55%, var(--demo-surface-muted));
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.08);
}

.site-new .hero--ref .edu-kpi__actions__item.is-priority strong {
  color: var(--blue);
}

.site-new .hero--ref .student-plan__cta {
  align-self: stretch;
  margin-top: 0.55rem;
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  padding: 0.42rem 0.65rem;
}

.site-new .hero--ref .edu-kpi__actions strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--demo-ink);
  line-height: 1.3;
}

.site-new .hero--ref .edu-kpi__actions span {
  display: block;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--demo-ink-muted);
  margin-top: 0.12rem;
}

.site-new .hero--ref .edu-kpi__roi {
  margin: 0.45rem 0 0;
  padding-top: 0.45rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-size: 0.625rem;
  color: var(--ink-copy);
}

.site-new .hero--ref .edu-kpi__roi strong {
  color: var(--success);
  font-weight: 700;
}

/* Hero mock page — full app shell with real + dummy sections */
.site-new .hero--ref .mock-page {
  display: grid;
  grid-template-columns: minmax(9rem, 11.25rem) 1fr;
  width: 100%;
  min-height: clamp(16rem, 38vh, 28rem);
  background: var(--surface);
  border-top: 1px solid var(--border);
  text-align: left;
}

.site-new .hero--ref .mock-page__nav {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.85rem 0.65rem;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-muted) 75%, var(--surface));
  min-height: 0;
}

.site-new .hero--ref .mock-page--edu {
  grid-template-columns: minmax(10.5rem, 13.25rem) 1fr;
}

.site-new .hero--ref .mock-page__nav--edu {
  gap: 0.65rem;
  padding: 0.75rem 0.55rem 0.65rem;
  background: color-mix(in srgb, var(--surface-muted) 55%, var(--surface));
}

.site-new .hero--ref .mock-page__nav-brand {
  padding: 0 0.35rem 0.35rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}

.site-new .hero--ref .mock-page__nav-role {
  margin: 0.1rem 0 0;
  padding: 0 0.35rem;
  font-size: 0.5625rem;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

.site-new .hero--ref .mock-page__nav-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0;
}

.site-new .hero--ref .mock-page__nav-label {
  margin: 0.35rem 0 0.15rem;
  padding: 0 0.45rem;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: 0.75;
}

.site-new .hero--ref .mock-page__nav--edu .mock-page__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.45rem;
  font-size: 0.625rem;
}

.site-new .hero--ref .mock-page__nav--edu .mock-page__item--active {
  position: relative;
  background: var(--orange-soft);
  color: var(--orange);
  border-radius: 6px;
  box-shadow: inset 3px 0 0 var(--orange);
}

.site-new .hero--ref .mock-page__icon {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--border) 70%, var(--surface-muted));
  opacity: 0.85;
}

.site-new .hero--ref .mock-page__item--active .mock-page__icon {
  background: color-mix(in srgb, var(--orange) 35%, var(--surface));
}

.site-new .hero--ref .mock-page__nav-foot {
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.site-new .hero--ref .mock-page__item--foot {
  padding: 0.35rem 0.45rem;
  font-size: 0.625rem;
}

.site-new .hero--ref .mock-page__nav-user {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
}

.site-new .hero--ref .mock-page__nav-avatar {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--orange);
  background: var(--orange-soft);
  border: 1px solid color-mix(in srgb, var(--orange) 22%, var(--border));
}

.site-new .hero--ref .mock-page__nav-user-text {
  min-width: 0;
}

.site-new .hero--ref .mock-page__nav-user-text strong {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}

.site-new .hero--ref .mock-page__nav-user-text span {
  display: block;
  font-size: 0.5625rem;
  color: var(--ink-muted);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-new .hero--ref .mock-page--edu .mock-page__top {
  align-items: flex-start;
  padding: 0.65rem 1rem 0.55rem;
}

.site-new .hero--ref .mock-page__top-copy {
  min-width: 0;
}

.site-new .hero--ref .mock-page__crumb-sub {
  margin: 0.15rem 0 0;
  font-size: 0.5625rem;
  font-weight: 400;
  color: var(--ink-muted);
}

.site-new .hero--ref .mock-page__subjects--inline {
  margin-bottom: 0;
  flex-wrap: nowrap;
}

.site-new .hero--ref .mock-page__subjects--inline .mock-page__subject {
  font-size: 0.5625rem;
  padding: 0.22rem 0.45rem;
}

.site-new .hero--ref .mock-page__logo {
  margin: 0;
  padding: 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--blue);
}

.site-new .hero--ref .mock-page__logo--orange {
  color: var(--orange);
}

.site-new .hero--ref .mock-page__menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.site-new .hero--ref .mock-page__item {
  padding: 0.42rem 0.55rem;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-muted);
  line-height: 1.3;
}

.site-new .hero--ref .mock-page__item--active {
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 600;
}

.site-new .hero--ref .mock-page__item--orange.mock-page__item--active {
  background: var(--orange-soft);
  color: var(--orange);
}

.site-new .hero--ref .mock-page__item--dim {
  opacity: 0.42;
}

.site-new .hero--ref .mock-page__frame {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.site-new .hero--ref .mock-page__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.site-new .hero--ref .mock-page__crumb {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink);
}

.site-new .hero--ref .mock-page__top-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-new .hero--ref .mock-page__pill {
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-soft);
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--border));
}

.site-new .hero--ref .mock-page__pill--orange {
  color: var(--orange);
  background: var(--orange-soft);
  border-color: color-mix(in srgb, var(--orange) 22%, var(--border));
}

.site-new .hero--ref .mock-page__pill--live {
  color: var(--success);
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 25%, var(--border));
}

.site-new .hero--ref .mock-page__avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-soft), color-mix(in srgb, var(--blue) 25%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--border));
}

.site-new .hero--ref .mock-page__avatar--orange {
  background: linear-gradient(135deg, var(--orange-soft), color-mix(in srgb, var(--orange) 25%, var(--surface)));
  border-color: color-mix(in srgb, var(--orange) 22%, var(--border));
}

.site-new .hero--ref .mock-page__body {
  flex: 1;
  padding: 0.75rem 1rem 1rem;
  background: color-mix(in srgb, var(--surface-muted) 40%, var(--surface));
}

.site-new .hero--ref .mock-page__subjects {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.site-new .hero--ref .mock-page__subject {
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--border);
}

.site-new .hero--ref .mock-page__subject--active {
  color: var(--blue);
  font-weight: 600;
  background: var(--blue-soft);
  border-color: color-mix(in srgb, var(--blue) 22%, var(--border));
}

.site-new .hero--ref .mock-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.9fr);
  gap: 0.65rem;
  align-items: start;
}

.site-new .hero--ref .mock-page__grid--edu {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr);
}

.site-new .hero--ref .mock-page__primary,
.site-new .hero--ref .mock-page__aside {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.site-new .hero--ref .mock-page__feature {
  box-shadow: var(--shadow-card);
}

.site-new .hero--ref .mock-page__feature.mock-card--insights,
.site-new .hero--ref .mock-page__feature.mock-card--ability {
  max-width: none;
  margin: 0;
}

.site-new .hero--ref .mock-edu--inline {
  padding: 0.85rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}

.site-new .hero--ref .mock-edu--inline .mock-edu__header {
  margin-bottom: 0.65rem;
  padding-bottom: 0.65rem;
}

.site-new .hero--ref .mock-edu--inline .mock-scatter {
  margin-bottom: 0;
}

.site-new .hero--ref .mock-page__stats {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 0.65rem;
}

.site-new .hero--ref .mock-page__stats .mock-stat {
  padding: 0.55rem 0.65rem;
}

.site-new .hero--ref .mock-page__stats .mock-stat__value {
  font-size: 0.9375rem;
}

.site-new .hero--ref .mock-page__dummy {
  padding: 0.6rem 0.65rem;
  border-radius: var(--radius-md);
  border: 1px dashed color-mix(in srgb, var(--border) 95%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 55%, var(--surface));
}

.site-new .hero--ref .mock-page__dummy-label {
  margin: 0 0 0.4rem;
  font-size: 0.5625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.site-new .hero--ref .mock-page__dummy-line {
  height: 0.42rem;
  margin-top: 0.32rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--border) 75%, var(--surface-muted));
}

.site-new .hero--ref .mock-page__dummy-line--short { width: 55%; }
.site-new .hero--ref .mock-page__dummy-line--med { width: 78%; }

.site-new .hero--ref .mock-page__dummy--chart {
  padding-bottom: 0.75rem;
}

.site-new .hero--ref .mock-page__dummy-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  height: 3.25rem;
  margin-top: 0.25rem;
}

.site-new .hero--ref .mock-page__dummy-bars span {
  flex: 1;
  height: var(--h, 50%);
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--blue) 22%, var(--border));
}

.site-new .hero--ref .mock-page .mock-quick {
  margin-top: 0.15rem;
}

.site-new .hero--ref .mock-page .mock-quick__item {
  padding: 0.45rem 0.5rem;
}

.site-new .hero--ref .mock-page .mock-phase-badge {
  margin-top: 0;
  font-size: 0.625rem;
}

/* Ability journey — hero student demo */
.site-new .hero--ref .mock-ability-hub {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.site-new .hero--ref .mock-ability-hub__hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--blue) 16%, #f59e0b 6%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue-soft) 88%, #fff7ed) 0%, var(--surface) 100%);
}

.site-new .hero--ref .mock-ability-hub__hero--rising {
  border-color: color-mix(in srgb, var(--success) 20%, #f59e0b 8%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--success-soft) 75%, #fff7ed) 0%, var(--surface) 100%);
}

.site-new .hero--ref .mock-ability-hub__label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--demo-ink-label, var(--ink-muted));
}

.site-new .hero--ref .mock-ability-hub__score {
  margin: 0.15rem 0 0;
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--blue);
}

.site-new .hero--ref .mock-ability-hub__hero--rising .mock-ability-hub__score {
  color: var(--demo-ink, var(--ink));
}

.site-new .hero--ref .mock-ability-hub__delta {
  margin-left: 0.35rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--success);
  vertical-align: middle;
}

.site-new .hero--ref .mock-ability-hub__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  text-align: right;
}

.site-new .hero--ref .mock-ability-hub__phase {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--demo-ink, var(--ink));
}

.site-new .hero--ref .mock-ability-hub__target {
  font-size: 0.6875rem;
  color: var(--demo-ink-muted, var(--ink-muted));
}

.site-new .hero--ref .mock-ability-hub__subjects {
  padding: 0.75rem 0.85rem;
  box-shadow: none;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, #fff7ed 32%, var(--surface-muted));
  border: 1px solid color-mix(in srgb, #f59e0b 6%, var(--border) 55%, transparent);
}

.site-new .hero--ref .product-demo__shell--hero .mock-ability__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--demo-ink-label);
}

.site-new .hero--ref .product-demo__shell--hero .mock-ability__head {
  font-size: 0.6875rem;
  color: var(--demo-ink-body);
}

.site-new .hero--ref .product-demo__shell--hero .mock-card__eyebrow,
.site-new .hero--ref .product-demo__shell--hero .mock-card__sub {
  color: var(--demo-ink-muted);
}

.site-new .hero--ref .product-demo__shell--hero .mock-card__title {
  color: var(--demo-ink);
}

.site-new .hero--ref .mock-journey-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.site-new .hero--ref .mock-journey-rail__step {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.5rem 0.45rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-muted);
  opacity: 0.45;
}

.site-new .hero--ref .mock-journey-rail__step > span:first-child {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--border);
}

.site-new .hero--ref .mock-journey-rail__step strong {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--demo-ink, var(--ink));
  line-height: 1.3;
}

.site-new .hero--ref .mock-journey-rail__step em {
  display: block;
  font-style: normal;
  font-size: 0.625rem;
  line-height: 1.35;
  color: var(--demo-ink-muted, var(--ink-muted));
  margin-top: 0.12rem;
}

.site-new .hero--ref .mock-journey-rail__step--active {
  opacity: 1;
  background: var(--blue-soft);
  border-color: color-mix(in srgb, var(--blue) 25%, var(--border));
}

.site-new .hero--ref .mock-journey-rail__step--active > span:first-child {
  color: var(--blue);
  background: var(--surface);
  border-color: color-mix(in srgb, var(--blue) 30%, var(--border));
}

.site-new .hero--ref .mock-journey-rail__step--done {
  opacity: 0.9;
  background: color-mix(in srgb, var(--success-soft) 60%, var(--surface));
  border-color: color-mix(in srgb, var(--success) 20%, var(--border));
}

.site-new .hero--ref .mock-journey-rail__step--done > span:first-child {
  color: var(--success);
}

.site-new .hero--ref .mock-journey-rail__step--locked {
  opacity: 0.35;
}

.site-new .hero--ref .mock-adaptive--hero {
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
}

.site-new .hero--ref .mock-adaptive--hero .mock-adaptive__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--demo-ink-body, var(--ink-copy));
  margin-bottom: 0.65rem;
}

.site-new .hero--ref .mock-adaptive--hero .mock-adaptive__levels {
  gap: 0.5rem;
}

.site-new .hero--ref .mock-adaptive--hero .mock-adaptive__level {
  grid-template-columns: 3.5rem 1fr;
  font-size: 0.6875rem;
  color: var(--demo-ink-body, var(--ink-copy));
}

.site-new .hero--ref .mock-adaptive--hero .mock-adaptive__note {
  margin-top: 0.65rem;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--demo-ink-muted, var(--ink-muted));
}

.site-new .hero--ref .mock-growth--compact {
  padding: 0.65rem 0.85rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  max-width: none;
  margin: 0;
}

.site-new .hero--ref .mock-growth--compact .mock-growth__header {
  margin-bottom: 0.5rem;
}

.site-new .hero--ref .mock-growth--compact .mock-growth__header h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--demo-ink, var(--ink));
}

.site-new .hero--ref .mock-growth--compact .mock-growth__header p {
  font-size: 0.6875rem;
  color: var(--demo-ink-muted, var(--ink-muted));
}

.site-new .hero--ref .mock-growth--compact .mock-growth__delta {
  font-size: 0.6875rem;
  color: var(--success);
}

.site-new .hero--ref .mock-hero-cta {
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--border));
  background: linear-gradient(180deg, var(--blue-soft) 0%, var(--surface) 100%);
  text-align: center;
}

.site-new .hero--ref .mock-hero-cta__title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
}

.site-new .hero--ref .mock-hero-cta__sub {
  margin: 0.25rem 0 0.65rem;
  font-size: 0.625rem;
  color: var(--ink-muted);
  line-height: 1.4;
}

.site-new .hero--ref .mock-card--unlock {
  padding: 0.75rem 0.85rem;
  background: linear-gradient(180deg, var(--success-soft) 0%, var(--surface) 100%);
  border-color: color-mix(in srgb, var(--success) 25%, var(--border));
}

.site-new .hero--ref .mock-card--unlock .mock-schedule {
  margin-top: 0.55rem;
}

.site-new .hero--ref .mock-card--unlock .mock-schedule__row {
  font-size: 0.625rem;
}

.site-new .hero--ref .mock-growth--hero {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  max-width: none;
  margin: 0;
}

.site-new .hero--ref .mock-growth--hero .mock-growth__header {
  margin-bottom: 0.65rem;
}

.site-new .hero--ref .mock-growth--hero .mock-growth__header h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--demo-ink, var(--ink));
}

.site-new .hero--ref .mock-growth--hero .mock-growth__header p {
  font-size: 0.6875rem;
  color: var(--demo-ink-muted, var(--ink-muted));
}

.site-new .hero--ref .mock-growth--hero .mock-growth__delta {
  font-size: 0.75rem;
}

.site-new .hero--ref .mock-page__summary {
  padding: 0.6rem 0.65rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
}

.site-new .hero--ref .mock-page__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.625rem;
  color: var(--ink-copy);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.site-new .hero--ref .mock-page__summary-row:last-child {
  border-bottom: none;
}

.site-new .hero--ref .mock-page__summary-row strong {
  font-weight: 600;
  color: var(--ink);
}

.site-new .hero--ref .mock-insights-combo {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  max-width: none;
  margin: 0;
}

.site-new .hero--ref .mock-insights-combo__col + .mock-insights-combo__col {
  padding-left: 0.85rem;
  border-left: 1px solid var(--border);
}

.site-new .hero--ref .mock-action-plan {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.site-new .hero--ref .mock-action-plan li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.site-new .hero--ref .mock-action-plan__num {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-soft);
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--border));
}

.site-new .hero--ref .mock-action-plan strong {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.site-new .hero--ref .mock-action-plan span {
  display: block;
  font-size: 0.5625rem;
  color: var(--ink-muted);
  margin-top: 0.1rem;
  line-height: 1.35;
}

.site-new .hero--ref .product-demo__slide.is-active .mock-page__feature {
  animation: mock-page-feature-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes mock-page-feature-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-new .hero--ref .hero__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(2.5rem, 5vw, 3.5rem);
}

.site-new .hero--ref .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.site-new .hero--ref .hero__hint {
  font-size: var(--text-small);
  color: var(--ink-muted);
}

@media (min-width: 1200px) {
  .site-new .hero--ref .hero__title {
    font-size: 4rem;
    line-height: 1.04;
    max-width: min(var(--hero-text-max), 100%);
  }

  .site-new .hero--ref .hero__subtitle {
    font-size: 1.1875rem;
    margin-top: 0.75rem;
  }
}

@media (max-width: 900px) {
  .site-new .hero--ref {
    padding-top: calc(var(--nav-h) + 1.75rem);
  }

  .site-new .hero--ref .hero__title {
    font-size: clamp(2rem, 6.5vw, 2.75rem);
    letter-spacing: -0.032em;
  }

  .site-new .hero--ref .hero__copy {
    padding-bottom: clamp(2rem, 5vw, 3rem);
  }

  .site-new .hero--ref .product-demo__viewport--hero {
    min-height: clamp(18rem, 48vh, 24rem);
    padding-top: 3.5rem;
  }
}

@media (max-width: 640px) {
  .site-new .hero--ref .mock-page {
    grid-template-columns: 1fr;
  }

  .site-new .hero--ref .mock-page:not(.mock-page--edu) .mock-page__nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.65rem;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .site-new .hero--ref .mock-page--edu {
    grid-template-columns: 1fr;
  }

  .site-new .hero--ref .mock-page__nav--edu .mock-page__nav-scroll {
    display: none;
  }

  .site-new .hero--ref .mock-page__nav--edu .mock-page__nav-foot {
    display: none;
  }

  .site-new .hero--ref .mock-page__nav--edu {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .site-new .hero--ref .mock-page__top {
    flex-direction: column;
    gap: 0.5rem;
  }

  .site-new .hero--ref .mock-page__subjects--inline {
    flex-wrap: wrap;
  }

  .site-new .hero--ref .edu-spread-demo__split {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .site-new .hero--ref .edu-action-panel {
    padding: 0.75rem 0 0;
    border-left: none;
    border-top: 1px solid color-mix(in srgb, var(--demo-border) 80%, var(--border));
  }

  .site-new .hero--ref .edu-kpi-row {
    grid-template-columns: 1fr;
  }

  .site-new .hero--ref .edu-kpi-row .edu-kpi {
    grid-template-columns: minmax(0, 1fr) auto;
    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, var(--demo-border) 65%, var(--border));
    min-height: 0;
  }

  .site-new .hero--ref .edu-kpi-row .edu-kpi:last-child {
    border-bottom: none;
  }

  .site-new .hero--ref .edu-spread-demo__head {
    flex-direction: row;
    align-items: center;
  }

  .site-new .hero--ref .mock-page__logo {
    margin-right: 0.35rem;
  }

  .site-new .hero--ref .mock-page__menu {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .site-new .hero--ref .mock-page__item {
    padding: 0.3rem 0.45rem;
    font-size: 0.625rem;
  }

  .site-new .hero--ref .mock-page__grid,
  .site-new .hero--ref .mock-page__grid--edu {
    grid-template-columns: 1fr;
  }

  .site-new .hero--ref .mock-page__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-new .hero--ref .mock-journey-rail {
    grid-template-columns: 1fr;
  }

  .site-new .hero--ref .mock-ability-hub__hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-new .hero--ref .mock-ability-hub__meta {
    align-items: flex-start;
    text-align: left;
  }

  .site-new .hero--ref .hero__title {
    font-size: clamp(1.875rem, 8vw, 2.25rem);
  }

  .site-new .hero--ref .hero__subtitle {
    font-size: 1rem;
    margin-top: 0.5rem;
  }

  .site-new .hero--ref .product-demo__viewport--hero {
    min-height: 16rem;
    padding: 0.85rem 0.85rem 0;
  }

  .site-new .hero--ref .product-demo__shell--hero[data-active-audience="institute"] .product-demo__viewport--hero {
    padding-bottom: 0.25rem;
  }
}

@media (max-width: 400px) {
  .site-new .hero--ref .hero__title {
    font-size: clamp(1.75rem, 8.5vw, 2rem);
  }
}

/* Portal mock — student home */

.mock-app {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--surface-muted);
  padding: 0.75rem;
  box-shadow: var(--shadow-card);
}

.mock-app__chrome {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem 0.65rem;
}

.mock-app__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
}

.mock-app__dot--blue { background: var(--blue); }
.mock-app__dot--orange { background: var(--orange); }

.mock-app__body {
  display: grid;
  grid-template-columns: 1fr 9.5rem;
  gap: 0.65rem;
}

.mock-app__main {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.mock-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 0.85rem 1rem;
}

.mock-card--hero {
  background: linear-gradient(135deg, var(--blue-soft) 0%, var(--surface) 100%);
  border-color: color-mix(in srgb, var(--blue) 15%, var(--border));
}

.mock-card__eyebrow {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

.mock-card__title {
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 0.25rem;
  color: var(--ink);
}

.mock-card__sub {
  font-size: 0.6875rem;
  color: var(--ink-muted);
  margin-top: 0.15rem;
}

.mock-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.mock-quick__item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
}

.mock-quick__icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 700;
}

.mock-quick__icon--blue { background: var(--blue-soft); color: var(--blue); }
.mock-quick__icon--green { background: var(--success-soft); color: var(--success); }
.mock-quick__icon--orange { background: var(--orange-soft); color: var(--orange); }

.mock-quick__text strong {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink);
}

.mock-quick__text span {
  font-size: 0.625rem;
  color: var(--ink-muted);
  line-height: 1.35;
}

.mock-sidebar { display: flex; flex-direction: column; gap: 0.5rem; }

.mock-badge {
  border-radius: var(--radius-md);
  background: var(--orange-soft);
  border: 1px solid color-mix(in srgb, var(--orange) 25%, var(--border));
  padding: 0.55rem 0.65rem;
  text-align: center;
}

.mock-badge__num {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--orange);
  line-height: 1;
}

.mock-badge__label {
  font-size: 0.5625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-top: 0.2rem;
}

.mock-ability__label {
  font-size: 0.5625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: 0.45rem;
}

.mock-ability__row + .mock-ability__row { margin-top: 0.45rem; }

.mock-ability__head {
  display: flex;
  justify-content: space-between;
  font-size: 0.625rem;
  margin-bottom: 0.2rem;
}

.mock-ability__head span:last-child {
  font-weight: 600;
  color: var(--blue);
}

.mock-bar {
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface-muted));
  overflow: hidden;
}

.mock-bar__fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 35%, transparent), var(--blue));
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.mock-bar__fill--orange {
  background: linear-gradient(90deg, color-mix(in srgb, var(--orange) 35%, transparent), var(--orange));
}

.value-sequence__frame.is-active .mock-bar__fill--anim,
.product-demo__slide.is-active .mock-bar__fill--anim {
  width: calc(var(--bar-width, 0) * 1%);
}

.mock-btn-static { pointer-events: none; }

.mock-app__body--solo { grid-template-columns: 1fr; }

.mock-app--demo,
.mock-edu--demo {
  max-width: 36rem;
  margin-inline: auto;
}

/* ── Product demo shell (shared + standalone fallback) ── */

.product-demo__shell {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--surface-muted);
  box-shadow:
    0 0 0 1px rgba(17, 24, 39, 0.03),
    0 24px 48px rgba(17, 24, 39, 0.08);
  overflow: hidden;
}

.product-demo__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.audience-toggle {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  border: 1px solid var(--border);
}

.audience-toggle__btn {
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.audience-toggle__btn.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}

.audience-toggle__btn[data-audience="institute"].is-active {
  color: var(--orange);
}

.audience-toggle__btn[data-audience="student"].is-active {
  color: var(--blue);
}

.product-demo__dots {
  display: flex;
  gap: 0.35rem;
}

.product-demo__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.product-demo__dot.is-active {
  background: var(--blue);
  transform: scale(1.2);
}


.product-demo__shell[data-active-audience="institute"] .product-demo__dot.is-active {
  background: var(--orange);
}

.product-demo__viewport {
  position: relative;
  min-height: 22rem;
  padding: 1.25rem;
}

.product-demo__deck {
  position: relative;
  min-height: 20rem;
}

.product-demo__deck[hidden] { display: none; }

.product-demo__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
}

.product-demo__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  position: relative;
}

.product-demo__caption {
  padding: 0.85rem 1.25rem 1.15rem;
  font-size: 0.875rem;
  color: var(--ink-copy);
  text-align: center;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* Mock assign */

.mock-assign {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mock-assign__row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-muted);
}

.mock-assign__row--selected {
  border-color: color-mix(in srgb, var(--orange) 40%, var(--border));
  background: var(--orange-soft);
}

.mock-assign__check {
  width: 1rem;
  height: 1rem;
  border-radius: 4px;
  border: 2px solid var(--border);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.mock-assign__row--selected .mock-assign__check {
  background: var(--orange);
  border-color: var(--orange);
  box-shadow: inset 0 0 0 2px var(--surface);
}

.mock-assign__row strong {
  display: block;
  font-size: 0.8125rem;
}

.mock-assign__row span {
  font-size: 0.6875rem;
  color: var(--ink-muted);
}

.mock-assign__footer {
  margin-top: 0.5rem;
  display: flex;
  justify-content: flex-end;
}

/* Insights card */

.mock-card--insights,
.mock-card--ability {
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-xl);
  max-width: 22rem;
  margin-inline: auto;
}

.mock-topic-rows {
  display: grid;
  gap: 0;
  font-size: 0.75rem;
  margin-top: 0.75rem;
}

.mock-topic-row {
  display: flex;
  justify-content: space-between;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
}

.mock-topic-row:last-child { border-bottom: none; }

.mock-topic-row__val { color: var(--blue); }
.mock-topic-row__val--ok { color: var(--success); }
.mock-topic-row__val--bad { color: var(--critical); }

.mock-card__footnote {
  margin-top: 0.85rem;
  font-size: 0.75rem;
  color: var(--ink-muted);
  line-height: 1.5;
}

.mock-phase-badge {
  margin-top: 1rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-md);
  background: var(--blue-soft);
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--border));
  text-align: center;
}

.mock-phase-badge__label {
  display: block;
  font-size: 0.5625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.mock-phase-badge strong {
  display: block;
  font-size: var(--text-small);
  margin-top: 0.15rem;
}

.mock-phase-badge__range {
  font-size: 0.6875rem;
  color: var(--ink-muted);
}

/* Scatter animation */

.mock-scatter--animated .mock-scatter__dot,
.mock-scatter--animated .spread-band__dot {
  opacity: 0;
  transform: translate(-50%, 50%) scale(0);
}

.mock-scatter--tall { height: 9rem; }

.product-demo__slide.is-active .mock-scatter--animated .mock-scatter__dot,
.product-demo__slide.is-active .mock-scatter--animated .spread-band__dot,
.value-sequence__frame.is-active .mock-scatter--animated .mock-scatter__dot,
.value-sequence__frame.is-active .mock-scatter--animated .spread-band__dot {
  animation: scatter-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.product-demo__slide.is-active .mock-scatter--animated .mock-scatter__dot:nth-child(1),
.value-sequence__frame.is-active .mock-scatter--animated .mock-scatter__dot:nth-child(1) { animation-delay: 0.05s; }
.product-demo__slide.is-active .mock-scatter--animated .mock-scatter__dot:nth-child(2),
.value-sequence__frame.is-active .mock-scatter--animated .mock-scatter__dot:nth-child(2) { animation-delay: 0.12s; }
.product-demo__slide.is-active .mock-scatter--animated .mock-scatter__dot:nth-child(3),
.value-sequence__frame.is-active .mock-scatter--animated .mock-scatter__dot:nth-child(3) { animation-delay: 0.19s; }
.product-demo__slide.is-active .mock-scatter--animated .mock-scatter__dot:nth-child(4),
.value-sequence__frame.is-active .mock-scatter--animated .mock-scatter__dot:nth-child(4) { animation-delay: 0.26s; }
.product-demo__slide.is-active .mock-scatter--animated .mock-scatter__dot:nth-child(5),
.value-sequence__frame.is-active .mock-scatter--animated .mock-scatter__dot:nth-child(5) { animation-delay: 0.33s; }
.product-demo__slide.is-active .mock-scatter--animated .mock-scatter__dot:nth-child(6),
.value-sequence__frame.is-active .mock-scatter--animated .mock-scatter__dot:nth-child(6) { animation-delay: 0.4s; }
.product-demo__slide.is-active .mock-scatter--animated .mock-scatter__dot:nth-child(7),
.value-sequence__frame.is-active .mock-scatter--animated .mock-scatter__dot:nth-child(7) { animation-delay: 0.47s; }
.product-demo__slide.is-active .mock-scatter--animated .mock-scatter__dot:nth-child(8),
.value-sequence__frame.is-active .mock-scatter--animated .mock-scatter__dot:nth-child(8) { animation-delay: 0.54s; }

.mock-scatter__dot--warn { background: var(--warning); }

@keyframes scatter-pop {
  to {
    opacity: 0.85;
    transform: translate(-50%, 50%) scale(1);
  }
}

/* ── Value sequence (animated screens below each section) ── */

.section-block__header {
  max-width: var(--page-max);
  margin-inline: auto;
  margin-bottom: 2.5rem;
}

.section-block--problem {
  padding-top: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.problem-block {
  max-width: var(--page-max);
  margin-inline: auto;
}

.problem-block__header {
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.problem-split {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}

.problem-tired {
  margin: 0;
  min-width: 0;
}

.problem-tired__art {
  display: block;
  width: 100%;
  max-width: 26rem;
  height: auto;
  margin-inline: auto;
}

.problem-pairs {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  min-width: 0;
}

.problem-pair {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  align-items: start;
}

.problem-pair__icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-top: 0.1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--orange-soft) 70%, var(--surface));
  color: color-mix(in srgb, var(--orange) 72%, var(--ink-muted));
}

.problem-pair__icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.problem-pair__body {
  min-width: 0;
}

.problem-pair__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.problem-pair__detail {
  margin: 0.35rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-copy);
}

.problem-pair__jump {
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, var(--blue) 45%, var(--border));
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.problem-pair__jump:hover,
.problem-pair__jump:focus-visible {
  color: var(--blue);
  text-decoration-color: var(--blue);
  outline: none;
}

.problem-bridge {
  margin: 0.35rem 0 0;
  padding-left: calc(2rem + 0.85rem);
  font-size: var(--text-body-lg);
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink);
}

@media (max-width: 768px) {
  .problem-split {
    grid-template-columns: 1fr;
  }

  .problem-tired__art {
    max-width: 20rem;
  }

  .problem-bridge {
    padding-left: 0;
  }
}

.section-block__cta {
  max-width: var(--page-max);
  margin-inline: auto;
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem 0.55rem;
}

.section-block__cta-hint {
  font-size: var(--text-small);
  color: var(--ink-muted);
}

.value-sequence {
  max-width: var(--page-max);
  margin-inline: auto;
}

.value-sequence__stage {
  position: relative;
  min-height: 16rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-card);
}

.section-block--muted .value-sequence__stage {
  background: var(--surface);
}

.value-sequence__frame {
  position: absolute;
  inset: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
}

.value-sequence__frame.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  position: relative;
  inset: auto;
  width: 100%;
}

.value-sequence__frame .mock-card,
.value-sequence__frame .mock-adaptive,
.value-sequence__frame .mock-edu,
.value-sequence__frame .mock-growth {
  width: 100%;
  max-width: 28rem;
}

.value-sequence__footer {
  margin-top: 1.25rem;
  text-align: center;
}

.value-sequence__dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
}

.value-sequence__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.value-sequence__dot.is-active {
  background: var(--blue);
  transform: scale(1.2);
}

.value-sequence--institute .value-sequence__dot.is-active {
  background: var(--orange);
}

.value-sequence__label {
  font-size: var(--text-small);
  color: var(--ink-copy);
  line-height: 1.6;
  max-width: 32rem;
  margin-inline: auto;
}

/* Growth chart */

.mock-growth__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.mock-growth__header h4 {
  font-size: 0.875rem;
  font-weight: 600;
}

.mock-growth__header p {
  font-size: 0.6875rem;
  color: var(--ink-muted);
}

.mock-growth__delta {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--success);
  white-space: nowrap;
}

.mock-growth__chart {
  width: 100%;
  height: auto;
}

.mock-growth__line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
}

.product-demo__slide.is-active .mock-growth__line,
.value-sequence__frame.is-active .mock-growth__line {
  animation: draw-line 1.2s ease forwards;
}

.mock-growth__dot-end {
  opacity: 0;
}

.product-demo__slide.is-active .mock-growth__dot-end,
.value-sequence__frame.is-active .mock-growth__dot-end {
  animation: fade-in 0.3s ease 1s forwards;
}

.mock-growth__labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.625rem;
  color: var(--ink-muted);
  margin-top: 0.35rem;
}

@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

@keyframes fade-in {
  to { opacity: 1; }
}

/* Adaptive mock */

.mock-adaptive__label {
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.mock-adaptive__levels {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mock-adaptive__level {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--ink-muted);
  opacity: 0.6;
  transition: opacity 0.3s;
}

.mock-adaptive__level--active {
  opacity: 1;
  color: var(--ink);
}

.mock-adaptive__note {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  color: var(--ink-copy);
  line-height: 1.55;
}

/* Phase cards in showcase */

.mock-phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
}

.mock-phase {
  padding: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-muted);
  opacity: 0.55;
  transform: scale(0.97);
  transition: opacity 0.35s, transform 0.35s, border-color 0.35s, background 0.35s;
}

.mock-phase--active {
  opacity: 1;
  transform: scale(1);
  background: var(--blue-soft);
  border-color: color-mix(in srgb, var(--blue) 25%, var(--border));
}

.mock-phase__num {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 0.35rem;
}

.mock-phase h3 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.mock-phase p {
  font-size: 0.6875rem;
  color: var(--ink-muted);
}

.mock-phases--single {
  display: block;
  max-width: 20rem;
  margin-inline: auto;
}

.mock-phases--single .mock-phase {
  opacity: 1;
  transform: none;
  padding: 1.35rem;
}

.mock-phase__score {
  margin-top: 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
}

/* Test schedule mock */

.mock-schedule {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.mock-schedule__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.75rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--ink-muted);
}

.mock-schedule__row strong {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink);
}

.mock-schedule__row--active {
  background: var(--blue-soft);
  border-color: color-mix(in srgb, var(--blue) 25%, var(--border));
}

.product-demo__slide.is-active .mock-topic-rows--anim .mock-topic-row,
.value-sequence__frame.is-active .mock-topic-rows--anim .mock-topic-row {
  animation: row-slide 0.4s ease backwards;
}

.product-demo__slide.is-active .mock-topic-rows--anim .mock-topic-row:nth-child(1),
.value-sequence__frame.is-active .mock-topic-rows--anim .mock-topic-row:nth-child(1) { animation-delay: 0.08s; }
.product-demo__slide.is-active .mock-topic-rows--anim .mock-topic-row:nth-child(2),
.value-sequence__frame.is-active .mock-topic-rows--anim .mock-topic-row:nth-child(2) { animation-delay: 0.16s; }
.product-demo__slide.is-active .mock-topic-rows--anim .mock-topic-row:nth-child(3),
.value-sequence__frame.is-active .mock-topic-rows--anim .mock-topic-row:nth-child(3) { animation-delay: 0.24s; }
.product-demo__slide.is-active .mock-topic-rows--anim .mock-topic-row:nth-child(4),
.value-sequence__frame.is-active .mock-topic-rows--anim .mock-topic-row:nth-child(4) { animation-delay: 0.32s; }

@keyframes row-slide {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-demo__slide,
  .value-sequence__frame,
  .mock-page__feature,
  .edu-overlay-card,
  .edu-overlay-card.is-active,
  .mock-bar__fill,
  .mock-scatter--animated .mock-scatter__dot,
  .mock-scatter--animated .spread-band__dot,
  .mock-growth__line,
  .mock-topic-rows--anim .mock-topic-row {
    transition: none !important;
    animation: none !important;
  }

  .mock-bar__fill--anim { width: calc(var(--bar-width, 0) * 1%); }
  .mock-scatter--animated .mock-scatter__dot,
  .mock-scatter--animated .spread-band__dot {
    opacity: 0.85;
    transform: translate(-50%, 50%) scale(1);
  }
  .mock-growth__line { stroke-dashoffset: 0; }
  .mock-growth__dot-end { opacity: 1; }
}

@media (max-width: 768px) {
  .mock-phases {
    grid-template-columns: 1fr;
  }

  .product-demo__viewport {
    min-height: 20rem;
  }

  .value-sequence__stage {
    min-height: 14rem;
  }
}

/* ── Audience band ── */

.audience-band {
  padding: 3.5rem var(--section-x);
  background: var(--surface-muted);
  border-block: 1px solid var(--border);
}

.audience-band__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  text-align: center;
}

.audience-band__title {
  font-size: var(--text-h2);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.audience-band__lead {
  color: var(--ink-copy);
  max-width: 32rem;
  margin-inline: auto;
  margin-bottom: 2rem;
}

.audience-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 42rem;
  margin-inline: auto;
  text-align: left;
}

.audience-card {
  padding: 1.25rem 1.35rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.audience-card:hover {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--border));
  box-shadow: var(--shadow-card);
}

.audience-card__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.audience-card--student .audience-card__icon {
  background: var(--blue-soft);
  color: var(--blue);
}

.audience-card--institute .audience-card__icon {
  background: var(--orange-soft);
  color: var(--orange);
}

.audience-card__icon svg {
  display: block;
}

.audience-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.audience-card p {
  font-size: 0.875rem;
  color: var(--ink-copy);
  line-height: 1.55;
}

@media (max-width: 640px) {
  .audience-cards { grid-template-columns: 1fr; }
}

/* ── Feature sections ── */

.section-block {
  padding: clamp(3.5rem, 8vw, 5.5rem) var(--section-x);
}

.section-block--muted {
  background: var(--surface-muted);
}

.section-block__grid {
  max-width: var(--page-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.section-block__grid--reverse .section-block__copy { order: 2; }
.section-block__grid--reverse .section-block__visual { order: 1; }

.feature-list {
  list-style: none;
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.feature-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
}

.feature-list__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--blue-soft);
  color: var(--blue);
}

.feature-list__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.feature-list__icon--orange {
  background: var(--orange-soft);
  color: var(--orange);
}

.feature-list strong {
  display: block;
  font-size: var(--text-small);
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.feature-list span {
  font-size: 0.875rem;
  color: var(--ink-copy);
  line-height: 1.55;
}

/* Educator mock */

.mock-edu {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 1rem;
  box-shadow: var(--shadow-card);
}

.mock-edu__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.mock-edu__header h4 {
  font-size: 0.875rem;
  font-weight: 600;
}

.mock-edu__header p {
  font-size: 0.6875rem;
  color: var(--ink-muted);
  margin-top: 0.15rem;
}

.mock-edu__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.mock-stat {
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-muted);
}

.mock-stat__label {
  font-size: 0.5625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.mock-stat__value {
  font-size: 1.125rem;
  font-weight: 700;
  margin-top: 0.2rem;
  color: var(--ink);
}

.mock-stat__value--warn { color: var(--warning); }
.mock-stat__value--ok { color: var(--success); }

.mock-scatter {
  height: 7rem;
  border-radius: var(--radius-md);
  background:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px),
    var(--surface-muted);
  background-size: 20px 20px;
  position: relative;
  margin-bottom: 0.75rem;
}

.mock-scatter__dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  opacity: 0.75;
  transform: translate(-50%, 50%);
}

.mock-attention {
  padding: 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--warning-soft);
}

.mock-attention__title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink);
}

.mock-attention__item {
  margin-top: 0.45rem;
  padding-left: 0.65rem;
  border-left: 2px solid color-mix(in srgb, var(--warning) 50%, transparent);
  font-size: 0.625rem;
  color: var(--ink-copy);
  line-height: 1.45;
}

/* Journey phases */

.journey-phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.journey-phase {
  padding: 1.35rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  position: relative;
}

.journey-phase__num {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 0.5rem;
}

.journey-phase h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.journey-phase p {
  font-size: 0.875rem;
  color: var(--ink-copy);
  line-height: 1.55;
}

.journey-phase__score {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
}

@media (max-width: 768px) {
  .section-block__grid {
    grid-template-columns: 1fr;
  }

  .section-block__grid--reverse .section-block__copy,
  .section-block__grid--reverse .section-block__visual { order: unset; }

  .mock-app__body { grid-template-columns: 1fr; }

  .mock-quick { grid-template-columns: 1fr; }

  .journey-phases { grid-template-columns: 1fr; }
}

/* ── CTA ── */

.cta-new {
  padding: clamp(3.5rem, 7vw, 5rem) var(--section-x);
  text-align: center;
  background:
    radial-gradient(ellipse 60% 70% at 50% 100%, rgba(238, 244, 255, 0.7) 0%, transparent 65%),
    var(--surface);
}

.cta-new__inner {
  max-width: 40rem;
  margin-inline: auto;
}

.cta-new__title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin-bottom: 1rem;
}

.cta-new__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}

.cta-new__hint {
  font-size: var(--text-small);
  color: var(--ink-muted);
}

/* ── Footer ── */

.site-new .footer {
  padding: 2.5rem var(--section-x) 1.75rem;
  background: var(--surface-muted);
  border-top: 1px solid var(--border);
  color: var(--ink-copy);
}

.site-new .footer__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.site-new .footer__brand svg {
  display: block;
  height: 27px;
  width: auto;
  opacity: 0.95;
}

.site-new .footer__tagline {
  font-size: var(--text-small);
  color: var(--ink-muted);
  margin-top: 0.35rem;
}

.site-new .footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
}

.site-new .footer__nav a {
  font-size: var(--text-small);
  color: var(--ink-copy);
}

.site-new .footer__nav a:hover { color: var(--ink); }

.site-new .footer__divider {
  width: 1px;
  height: 0.875rem;
  background: var(--border);
}

.site-new .footer__bottom {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: var(--text-caption);
  color: var(--ink-muted);
}

.site-new .footer__credit a {
  color: var(--ink-copy);
}

.site-new .footer__credit a:hover { color: var(--blue); }

/* ── Page-specific overrides (formerly a separate positioning layer) ── */

/* Lighter border + slightly stronger card shadow, scoped to this page.
   The shared --border (#e5e7eb) drawn around every card, row, and badge
   was doing a lot of the "dusty gray" work — Linear leans on soft shadow
   for card definition and keeps borders closer to invisible. */
.site-new2 {
  --border: #edeff2;
  --shadow-card:
    0 1px 3px rgba(17, 24, 39, 0.05),
    0 10px 28px rgba(17, 24, 39, 0.07);
}

.site-new2 .nav__links a.is-active {
  color: var(--blue);
}

/* Hero: exact parity with the live production hero — same headline,
   subtitle, exam chips, CTA strip, and typography scale. The whole copy
   block is centered, matching live's centered layout. The interactive
   product-demo mockup stays in the stage below (kept per site design;
   live doesn't have an equivalent in its hero), everything above it
   mirrors live's markup and CSS values exactly. */
.site-new2 .hero--ref .hero__copy {
  align-items: center;
  text-align: center;
  max-width: var(--page-max);
  margin-inline: auto;
  gap: 3rem; /* matches live's .hero__inner gap: 48px */
}

.site-new2 .hero--ref .hero__title {
  font-size: 90px;
  line-height: 1;
  letter-spacing: -0.125rem;
}

@media (min-width: 2000px) {
  .site-new2 .hero--ref .hero__title {
    font-size: 120px;
  }
}

@media (max-width: 1400px) {
  .site-new2 .hero--ref .hero__title {
    font-size: 80px;
  }
}

@media (max-width: 1300px) {
  .site-new2 .hero--ref .hero__title {
    font-size: 70px;
  }
}

@media (max-width: 1200px) {
  .site-new2 .hero--ref .hero__title {
    font-size: 60px;
  }
}

@media (max-width: 900px) {
  .site-new2 .hero--ref .hero__title {
    font-size: 50px;
  }
}

@media (max-width: 640px) {
  .site-new2 .hero--ref .hero__title {
    font-size: clamp(2rem, 11vw, 3.125rem);
    letter-spacing: -0.06rem;
  }

  .site-new2 .hero--ref .hero__copy {
    gap: 1.75rem;
  }
}

@media (max-width: 400px) {
  .site-new2 .hero--ref .hero__title {
    font-size: clamp(1.75rem, 10vw, 2.5rem);
  }
}

.site-new2 .hero--ref .hero__line {
  white-space: normal;
}

/* Narrower centered column for subtitle + chips + CTA, sitting under the
   full-width title. Slightly wider than live's 580px since our subtitle
   copy runs longer than live's exact-fit text — gap matches live's
   .hero__details gap: 12px exactly. */
.site-new2 .hero--ref .hero__details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 38rem;
}

.site-new2 .hero--ref .hero__subtitle {
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: none;
  white-space: normal;
  text-wrap: balance;
}

@media (max-width: 640px) {
  .site-new2 .hero--ref .hero__subtitle {
    font-size: 1rem;
  }
}

.site-new2 .hero--ref .hero__exams {
  justify-content: center;
  gap: 0.75rem;
}

.site-new2 .hero--ref .hero__exams li {
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink-muted);
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  padding: 0.4rem 0.85rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.site-new2 .hero--ref .hero__exams li:hover {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--border);
}

.site-new2 .hero--ref .hero__exams li + li::before {
  content: none;
}

@media (max-width: 640px) {
  .site-new2 .hero--ref .hero__exams {
    gap: 0.5rem;
  }

  .site-new2 .hero--ref .hero__exams li {
    font-size: 0.9375rem;
    padding: 0.3rem 0.6rem;
  }
}

/* CTA strip — title/hint on the left, actions on the right, separated
   from the chips above by a hairline, exactly like live. */
.site-new2 .hero--ref .hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 1.25rem; /* live: margin-top 20px, on top of the 12px hero__details gap */
  padding-top: 1.5rem; /* live: padding-top 24px */
  border-top: 1px solid var(--border);
  width: 100%;
  text-align: left;
}

.site-new2 .hero--ref .hero__cta-copy {
  flex: 1;
  min-width: 0;
}

.site-new2 .hero--ref .hero__cta-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.25rem;
}

.site-new2 .hero--ref .hero__cta-text {
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin: 0;
}

.site-new2 .hero--ref .hero__cta-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .site-new2 .hero--ref .hero__cta {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .site-new2 .hero--ref .hero__cta-actions {
    justify-content: center;
  }
}

/* Richer hero gradient — scoped to .site-new2, layered on top of the shared .hero--ref base */
.site-new2 .hero--ref {
  background:
    radial-gradient(ellipse 50% 42% at 14% -8%, rgba(37, 99, 235, 0.14) 0%, transparent 68%),
    radial-gradient(ellipse 46% 38% at 90% -4%, rgba(245, 158, 11, 0.12) 0%, transparent 64%),
    radial-gradient(ellipse 55% 40% at 50% -8%, rgba(238, 244, 255, 0.75) 0%, transparent 70%),
    var(--surface);
  /* Base .hero--ref has 0 bottom padding — it relies on .hero__copy's own
     padding-bottom, which only affects the copy column, not the (taller)
     demo stage below it. That left almost no real gap before the next
     section. Give the section itself real breathing room at the bottom. */
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* Let the browser choose better break points on multi-line headings —
   scoped to this page only, doesn't touch the shared .section-title class. */
.site-new2 .section-title,
.site-new2 .cta-new__title {
  text-wrap: balance;
}

.section-block--compact {
  padding-top: clamp(2rem, 5vw, 3rem);
  padding-bottom: clamp(2rem, 5vw, 3rem);
}

/* Replace the flat gray "muted" band (compare + why-it-works) with a soft,
   light wash — same idea as the hero gradient. Flat #f4f6f8 next to gray
   borders/gray muted text was the main source of the page's dusty feel. */
.site-new2 .section-block--muted {
  background:
    radial-gradient(ellipse 55% 60% at 90% 0%, rgba(37, 99, 235, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 55% at 5% 100%, rgba(245, 158, 11, 0.06) 0%, transparent 65%),
    var(--surface);
}

/* More air around every section header — eyebrow → title → lead,
   and header → content below. Was 0.75rem/2.5rem everywhere, too tight
   for the amount of type on screen at once. */
.site-new2 .section-block__header {
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.site-new2 .section-block__header .label {
  margin-bottom: 1rem;
}

.site-new2 .section-block__header .section-title {
  margin-bottom: 1rem;
}

/* A little more room between problem pairs than the shared .problem-pairs default */
.site-new2 .problem-pairs {
  gap: 1.75rem;
}

/* ── How it works flow ── */

.prep-flow {
  max-width: var(--page-max);
  margin-inline: auto;
}

.prep-flow__header {
  text-align: center;
  max-width: 48rem;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.prep-flow__header .label {
  margin-bottom: 1rem;
}

.prep-flow__header .section-lead {
  margin-inline: auto;
}

.prep-flow__more {
  margin-top: 0.75rem;
}

/* Highlighted insight — ability → score bridge on marketing pages */
.insight-callout {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  width: 100%;
  max-width: none;
  padding: clamp(1.25rem, 2.5vw, 1.6rem) clamp(1.35rem, 3vw, 2rem);
  border-left: 4px solid var(--blue);
  background: var(--blue-soft);
  border-radius: var(--radius-lg);
}

.insight-callout p {
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink-copy);
}

.prep-flow__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.prep-flow__step {
  position: relative;
  padding: 1.1rem 1rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.prep-flow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  font-size: var(--text-label);
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-soft);
  margin-bottom: 0.55rem;
}

.prep-flow__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.prep-flow__detail {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

/* ── Product pillars (adaptive → plan) ── */

.pillar-split {
  max-width: var(--page-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

/* Align workspace top with section title (skip the label row) */
.site-new2 #students .pillar-stage {
  margin-top: calc(1em + 0.75rem);
}

.pillar-copy {
  min-width: 0;
}

.pillar-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.75rem;
}

.pillar-item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.pillar-item__icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
}

.pillar-item__icon svg {
  width: 1rem;
  height: 1rem;
}

.pillar-item__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.pillar-item__detail {
  margin: 0.3rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-copy);
}

.pillar-stage {
  min-width: 0;
}

/* ── Student workspace (single screen) ── */

.pillar-workspace {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-align: left;
}

.pillar-workspace__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
}

.pillar-workspace__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--ink-muted);
}

.pillar-workspace__title {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.pillar-workspace__sep {
  color: color-mix(in srgb, var(--ink-muted) 55%, transparent);
}

.pillar-workspace__phase,
.pillar-workspace__stat {
  font-weight: 600;
  color: var(--blue);
}

.pillar-workspace__chip {
  flex-shrink: 0;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--success) 25%, var(--border));
}

/* Ability rail — started · you · target */

.ability-rail {
  padding: 0.9rem 1rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.ability-rail__scale {
  position: relative;
}

.ability-rail__track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 6%, var(--surface-muted));
  overflow: hidden;
}

.ability-rail__base {
  position: absolute;
  inset: 0 auto 0 0;
  width: 52%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--blue) 14%, var(--surface-muted));
}

.ability-rail__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 52%;
  width: 11%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 55%, transparent), var(--blue));
}

.ability-rail__dot {
  position: absolute;
  top: 50%;
  left: var(--pos);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  transform: translate(-50%, -50%);
  z-index: 1;
}

.ability-rail__dot--start {
  border-color: color-mix(in srgb, var(--ink-muted) 40%, var(--border));
}

.ability-rail__dot--current {
  width: 10px;
  height: 10px;
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent);
}

.ability-rail__dot--target {
  border-color: color-mix(in srgb, var(--orange) 50%, var(--border));
  background: var(--surface);
}

.ability-rail__labels {
  position: relative;
  height: 2.35rem;
  margin-top: 0.55rem;
}

.ability-rail__label {
  position: absolute;
  top: 0;
  left: var(--pos);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 3rem;
  text-align: center;
}

.ability-rail__label strong {
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

.ability-rail__label span {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

.ability-rail__label--current strong {
  font-size: 0.8125rem;
  color: var(--blue);
}

.ability-rail__label--current span {
  color: var(--blue);
}

.ability-rail__label--target strong {
  color: var(--orange);
}

.ability-rail__label--target span {
  color: color-mix(in srgb, var(--orange) 75%, var(--ink-muted));
}

.ability-rail__note {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.55rem 0 0;
  font-size: 0.625rem;
  color: var(--ink-muted);
}

/* Workspace body — tests + plan */

.pillar-workspace__body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
}

.pillar-workspace__label {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.pillar-workspace__tests {
  padding: 0.9rem 1rem 1rem;
  min-width: 0;
}

.workspace-tests {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.workspace-tests__item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
}

.workspace-tests__item--ready {
  border-color: color-mix(in srgb, var(--blue) 22%, var(--border));
  background: color-mix(in srgb, var(--blue-soft) 35%, var(--surface));
}

.workspace-tests__icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-soft);
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--border));
}

.workspace-tests__icon--focus {
  font-size: 0.5rem;
  letter-spacing: -0.02em;
}

.workspace-tests__icon--muted {
  color: var(--ink-muted);
  background: var(--surface-muted);
  border-color: var(--border);
}

.workspace-tests__copy strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.workspace-tests__copy span {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--ink-muted);
}

.workspace-tests__status {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--blue);
  white-space: nowrap;
}

.workspace-tests__status--locked {
  color: var(--ink-muted);
}

.pillar-workspace__plan {
  padding: 0.9rem 1rem 1rem;
  border-left: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-muted) 50%, var(--surface));
  min-width: 0;
}

.pillar-workspace__plan-lead {
  margin: 0.4rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

.pillar-workspace__list {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.pillar-workspace__list-item {
  padding: 0.35rem 0 0.35rem 0.5rem;
  border-left: 2px solid color-mix(in srgb, var(--orange) 55%, var(--border));
  background: color-mix(in srgb, var(--surface-muted) 70%, var(--surface));
  border-radius: 0 4px 4px 0;
}

.pillar-workspace__list-item.is-priority {
  padding: 0.45rem 0.5rem 0.45rem 0.55rem;
  border-left-width: 3px;
  border-left-color: var(--blue);
  background: color-mix(in srgb, var(--blue-soft) 55%, var(--surface));
}

.pillar-workspace__list-item strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.pillar-workspace__list-item.is-priority strong {
  color: var(--blue);
}

.pillar-workspace__list-item span {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--ink-muted);
}

.pillar-workspace__list-item span em {
  font-style: normal;
  font-weight: 600;
  color: var(--ink-copy);
}

@media (max-width: 960px) {
  .site-new2 #students .pillar-stage {
    margin-top: 0;
  }

  .pillar-workspace__body {
    grid-template-columns: 1fr;
  }

  .pillar-workspace__plan {
    border-left: none;
    border-top: 1px solid var(--border);
  }
}


.pillar-stage__card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  min-height: 18rem;
}

/* ── Exam prep grid ── */

/* Warm, light wash instead of a flat gray band — keeps the section
   visually distinct without adding to the page's "dusty" gray feel. */
.exam-prep {
  background:
    radial-gradient(ellipse 55% 60% at 8% 0%, rgba(245, 158, 11, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 55% at 95% 100%, rgba(37, 99, 235, 0.06) 0%, transparent 65%),
    var(--surface);
}

.exam-prep .section-block__header {
  padding-inline: 0;
}

.exam-prep__grid {
  max-width: var(--page-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.exam-prep__card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.5rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.exam-prep__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background: var(--orange-soft);
  color: var(--orange);
}

.exam-prep__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.exam-prep__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.exam-prep__detail {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-copy);
  flex: 1;
}

.exam-prep__tag {
  display: inline-block;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ── Institute benefits — shares exam-prep__grid / exam-prep__card / mock-schedule ── */

.institute-benefit .exam-prep__icon {
  background: var(--blue-soft);
  color: var(--blue);
}

/* ── Why it works — mechanism-based trust strip ── */

.trust-strip {
  max-width: var(--page-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 1.75rem;
}

.trust-strip__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-left: 1rem;
  border-left: 2px solid color-mix(in srgb, var(--blue) 22%, var(--border));
}

.trust-strip__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  background: var(--blue-soft);
  color: var(--blue);
}

.trust-strip__icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.trust-strip__title {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.trust-strip__detail {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-copy);
}

.exam-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: var(--page-max);
  margin: 2.25rem auto 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--border);
}

.exam-badges li {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}

/* Simulator mock */

.sim-mock {
  margin-top: 0.5rem;
  padding: 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-muted);
}

.sim-mock__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--ink-muted);
}

.sim-mock__timer {
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}

.sim-mock__sections {
  display: flex;
  gap: 0.35rem;
}

.sim-mock__section {
  flex: 1;
  padding: 0.45rem 0.35rem;
  border-radius: 6px;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--border);
}

.sim-mock__section.is-active {
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 35%, var(--border));
  background: var(--blue-soft);
}

.sim-mock__hint {
  margin: 0.55rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--ink-muted);
}

/* ── Compare table ── */

.prep-compare {
  max-width: var(--page-max);
  margin-inline: auto;
}

.prep-compare__header {
  text-align: center;
  max-width: 50rem;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.prep-compare__header .label {
  margin-bottom: 1rem;
}

.prep-compare__header .section-lead {
  margin-inline: auto;
}

.prep-compare__table {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.prep-compare__row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.85fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.25fr);
  gap: 0.75rem;
  align-items: start;
  padding: 1.1rem 0;
  /* This is the only separator between rows (no card background per row),
     so it needs to stay visible even though the shared --border is now
     much lighter. */
  border-bottom: 1px solid #e2e5ea;
}

.prep-compare__row:last-child {
  border-bottom: none;
}

.prep-compare__row--head {
  padding-top: 0;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid #e2e5ea;
}

.prep-compare__row--head .prep-compare__cell {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.prep-compare__cell {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-copy);
}

.prep-compare__cell--topic {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 1.4;
  padding-top: 0.1rem;
}

.prep-compare__row--head .prep-compare__cell--topic {
  font-weight: 600;
}

.prep-compare__cell--typical {
  color: var(--ink-muted);
}

.prep-compare__cell--prepwll {
  color: var(--ink);
  font-weight: 500;
}

.prep-compare__cell--result {
  color: var(--ink);
  padding-left: 0.65rem;
  border-left: 2px solid color-mix(in srgb, var(--blue) 25%, var(--border));
}

.prep-compare__row--head .prep-compare__cell--prepwll {
  color: var(--blue);
}

.prep-compare__row--head .prep-compare__cell--result {
  color: var(--ink-muted);
  border-left-color: transparent;
  padding-left: 0.65rem;
}

.prep-compare__bridge {
  margin: clamp(1.25rem, 3vw, 1.75rem) auto 0;
  max-width: 36rem;
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink);
}

@media (max-width: 960px) {
  .prep-flow__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pillar-split {
    grid-template-columns: 1fr;
  }

  .exam-prep__grid {
    grid-template-columns: 1fr;
  }

  .trust-strip {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .prep-compare__row:not(.prep-compare__row--head) {
    grid-template-columns: 1fr;
    gap: 0.45rem;
    padding: 1rem 0;
  }

  .prep-compare__row--head {
    display: none;
  }

  .prep-compare__cell--topic {
    font-size: 0.9375rem;
    margin-bottom: 0.15rem;
  }

  .prep-compare__cell:not(.prep-compare__cell--topic)::before {
    content: attr(data-label);
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 0.2rem;
  }

  .prep-compare__cell--prepwll::before {
    color: var(--blue);
  }

  .prep-compare__cell--result {
    border-left: none;
    padding-left: 0;
    padding-top: 0.35rem;
    margin-top: 0.15rem;
    border-top: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
  }
}

@media (max-width: 560px) {
  .prep-flow__steps {
    grid-template-columns: 1fr;
  }
}

/* ── Nav / footer current-page state (contact page) ── */

.nav__links a[aria-current="page"] {
  color: var(--blue);
}

.footer__nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* ── Contact page ── */

/* The hero banner itself (padding, gradient, __inner sizing) is shared with
   .page-hero — contact.html uses that directly so this page can never drift
   out of sync with how other sub-pages render their intro. Only the reply-
   time badge below is specific to this page. */
.contact-hero__note {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  padding: 0.4rem 0.9rem 0.4rem 0.75rem;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  font-size: var(--text-small);
  font-weight: 600;
}

.contact-hero__note svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.contact-section {
  padding-top: clamp(2.5rem, 6vw, 4rem);
}

.contact-options {
  max-width: 62rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.contact-card:hover {
  border-color: color-mix(in srgb, var(--blue) 25%, var(--border));
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.1);
  transform: translateY(-3px);
}

.contact-card__header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
  min-width: 11rem;
}

.contact-card__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--blue-soft);
  color: var(--blue);
}

.contact-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Institutes card uses the site's established orange = institutes accent,
   instead of the default blue, so it reads as its own category at a glance. */
.contact-card__icon--orange {
  background: var(--orange-soft);
  color: var(--orange);
}

.contact-card__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.contact-card__description {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-copy);
  flex: 1;
  min-width: 0;
}

.contact-card__action {
  flex-shrink: 0;
  width: fit-content;
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .contact-card:not(.contact-card--whatsapp) {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
  }

  .contact-card:not(.contact-card--whatsapp) .contact-card__header {
    min-width: 0;
  }

  .contact-card:not(.contact-card--whatsapp) .contact-card__action {
    align-self: flex-start;
  }
}

.contact-card--whatsapp {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  padding: 1.75rem 2rem;
}

.whatsapp-qr-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  border: 1px solid var(--border);
}

.whatsapp-qr__image {
  width: 132px;
  height: 132px;
  display: block;
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.whatsapp-qr__label {
  margin: 0;
  font-size: var(--text-small);
  color: var(--ink-muted);
  text-align: center;
  font-weight: 500;
}

.whatsapp-content {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.whatsapp-content .contact-card__action {
  align-self: flex-start;
}

.whatsapp-content__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.whatsapp-content__description {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-copy);
  flex: 1;
}

.btn--whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 600;
  font-size: var(--text-small);
  transition: border-color 0.2s ease, background 0.2s ease;
  width: fit-content;
}

.btn--whatsapp:hover {
  border-color: var(--ink-muted);
  background: var(--surface-muted);
}

.btn--whatsapp svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: #25d366;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .contact-card--whatsapp {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.75rem;
    text-align: center;
  }

  .whatsapp-content {
    align-items: center;
  }

  .whatsapp-content .contact-card__action {
    align-self: center;
  }

  .whatsapp-qr-section {
    justify-self: center;
  }
}

@media (max-width: 640px) {
  .whatsapp-qr__image {
    width: 128px;
    height: 128px;
  }
}

/* Narrower reading column for the contact page's FAQ + closing CTA — reuses
   .faq-list and .article__end-cta from the article layout, just re-centered
   at a width suited to a short Q&A list instead of a full prose column. */
.contact-faq__inner {
  max-width: 44rem;
  margin-inline: auto;
}

/* ── Generic sub-page hero — the shared intro banner for any non-homepage
   page (contact, how-it-works, future pages). Centered by default; use
   .page-hero--left for long-form/article pages and .page-hero--plain to
   drop the gradient wash for a more documentation-style feel. ── */

.page-hero {
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4rem));
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
  background:
    radial-gradient(ellipse 55% 50% at 18% -10%, rgba(37, 99, 235, 0.12) 0%, transparent 68%),
    radial-gradient(ellipse 50% 45% at 88% -5%, rgba(245, 158, 11, 0.1) 0%, transparent 64%),
    var(--surface);
}

.page-hero__inner {
  max-width: calc(var(--page-max) + 2 * var(--section-x));
  margin-inline: auto;
  padding-inline: var(--section-x);
}

.page-hero__inner .label {
  margin-inline: auto;
}

.page-hero__inner .section-lead {
  max-width: 42rem;
  margin-inline: auto;
}

@media (max-width: 640px) {
  .page-hero {
    padding-top: calc(var(--nav-h) + 2rem);
  }
}

/* ── Centered header modifier — pairs with .section-block__header for
   prose-style sections (vs. the default left-aligned split layouts) ── */

.section-block__header--center {
  text-align: center;
  max-width: 42rem;
}

/* Flat variant of .page-hero for reference/educational pages — drops the
   gradient wash so the page reads as documentation, not a pitch. */
.page-hero--plain {
  background: var(--surface);
}

/* Left-aligned variant — for pages where a centered, marketing-style hero
   doesn't fit (e.g. long-form guides/articles). */
.page-hero--left {
  text-align: left;
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.page-hero--left .page-hero__meta {
  justify-content: flex-start;
}

.page-hero--left .label,
.page-hero--left .section-lead {
  margin-inline: 0;
}

.page-hero--left .section-lead {
  max-width: 58rem;
}

.page-hero__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  font-size: var(--text-caption);
  color: var(--ink-muted);
}

.page-hero__meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--ink-muted);
  flex: none;
}

/* ── Article / reference layout — a single, narrower prose column with
   a table of contents, numbered steps, and plain lists instead of the
   marketing sections' icon-card grids and alternating backgrounds.
   Used for explainer / documentation-style pages like /how-it-works. ── */

/* max-width includes the padding (rather than being applied inside it, like
   most sections) so the actual content column lines up exactly with
   .nav__inner and .page-hero__inner, which size the same way. */
.article {
  max-width: calc(var(--page-max) + 2 * var(--section-x));
  margin-inline: auto;
  padding-inline: var(--section-x);
}

/* "On this page" — a compact, wrapping chip nav. Full width, so it never
   steals horizontal space from the reading column the way a fixed sidebar
   would. */
.article-toc {
  margin: 0 0 clamp(2.5rem, 6vw, 3.5rem);
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}

.article-toc__label {
  margin: 0 0 0.85rem;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.article-toc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.article-toc__chips a {
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-copy);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.article-toc__chips a:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-soft);
}

.article__section {
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
  border-top: 1px solid var(--border);
}

.article__section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.article__section-title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.4vw + 1rem, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 1.1rem;
}

.article__section p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-copy);
  margin: 0 0 1rem;
}

.article__section p:last-child {
  margin-bottom: 0;
}

.article__lead {
  font-size: 1.0625rem;
}

/* Numbered steps — plain, no card chrome, distinct from .prep-flow__step */
.doc-steps {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  counter-reset: steps;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.doc-steps li {
  counter-increment: steps;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.9rem;
}

.doc-steps li::before {
  content: counter(steps);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.9375rem;
  font-weight: 700;
}

.doc-steps li > div {
  min-width: 0;
  padding-top: 0.3rem;
}

.doc-steps strong {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.doc-steps span {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-copy);
}

/* Plain bullet list for prose sections — no icon badges */
.article__list {
  margin: 1.25rem 0 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* A short bolded label acting as a heading for the list right below it
   (e.g. "Result:") — tighten the gap so the two read as one unit. */
.article__list-label {
  margin-bottom: 0.4rem;
}

.article__list-label + .article__list {
  margin-top: 0;
}

.article__list li {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-copy);
}

.article__list strong {
  color: var(--ink);
}

.article__list--spaced {
  margin-top: 1.75rem;
}


/* Callout / worked example */
.article__callout {
  margin: 1.5rem 0 0;
  padding: 1.15rem 1.4rem;
  border-left: 3px solid var(--blue);
  background: var(--blue-soft);
  border-radius: var(--radius-md);
}

/* Intro variant — the "in short" summary at the top of the article,
   not tied to a preceding paragraph like the worked-example callouts. */
.article__callout--intro {
  margin: 0 0 clamp(2rem, 5vw, 3rem);
}

/* Visual step-by-step flow — for a quick, scannable overview (the top-level
   journey, or the mocks/PYQ progression), distinct from .doc-steps, which
   is for the detailed, numbered mechanical explanation within a section.
   Sits inside a soft, tinted "diagram card" (.journey-panel) so it reads
   as a distinct visual, not just more body copy.
   Mobile-first: a vertical stack, badge above label, joined by a small
   chevron. From 700px up: a horizontal, wrapping flow read left to right,
   top to bottom, like a real flowchart. */
.journey-panel {
  margin: 1.75rem 0 0;
  padding: clamp(1.75rem, 4vw, 2.25rem) clamp(1.1rem, 4vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 160% at 10% -10%, color-mix(in srgb, var(--blue) 8%, transparent), transparent 55%),
    var(--surface-muted);
}

.journey-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.journey-flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 15rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.journey-flow--numbered .journey-flow__step {
  counter-increment: journey-step;
}

.journey-flow--numbered {
  counter-reset: journey-step;
}

.journey-flow--numbered .journey-flow__step::before {
  content: counter(journey-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), #4f7fe0);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  flex: none;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--blue) 32%, transparent);
}

.journey-flow__arrow {
  width: 0.5rem;
  height: 0.5rem;
  margin: 0.1rem 0;
  border-top: 2px solid color-mix(in srgb, var(--ink-muted) 50%, transparent);
  border-right: 2px solid color-mix(in srgb, var(--ink-muted) 50%, transparent);
  transform: rotate(135deg);
  flex: none;
}

@media (min-width: 700px) {
  .journey-flow {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .journey-flow__step {
    width: 7.75rem;
  }

  .journey-flow__arrow {
    margin: 1.05rem 0.35rem 0;
    transform: rotate(45deg);
  }
}

/* Loop grouping — steps that repeat (plan → practice → ability improves)
   get boxed together with a dashed border and a caption, instead of
   reading as one more link in a straight chain. */
.journey-flow__loop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 0.85rem 0.75rem;
  border: 1.5px dashed color-mix(in srgb, var(--blue) 42%, var(--border));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--blue) 4%, transparent);
}

.journey-flow__loop-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.journey-flow__loop-label {
  margin: 0;
  max-width: 15rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.45;
  color: color-mix(in srgb, var(--blue) 80%, var(--ink-muted) 20%);
  text-align: center;
}

@media (min-width: 700px) {
  .journey-flow__loop-steps {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .journey-flow__loop-label {
    max-width: 26rem;
  }
}

.article__callout p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-copy);
  margin: 0 0 0.6rem;
}

.article__callout p:last-child {
  margin-bottom: 0;
}

.article__callout strong {
  color: var(--ink);
}

/* Single end-of-article CTA — deliberately the only CTA on the page */
.article__end-cta {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  padding-bottom: clamp(2.5rem, 6vw, 3.5rem);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.article__end-cta-hint {
  font-size: var(--text-caption);
  color: var(--ink-muted);
}

.article__exam-note {
  margin-top: 1.75rem;
  font-size: 0.9375rem;
  color: var(--ink-copy);
}

/* ── FAQ list — simple, static Q&A, no accordion; matches the site's
   calm, low-chrome aesthetic ── */

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}

.faq-item:first-child {
  padding-top: 0;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item__q {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.faq-item__a {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-copy);
}