/* The why Club — design tokens */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,900&family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

@font-face{font-family:Nunito;src:url('/fonts/assessments/nunito-latin.woff2') format('woff2');font-style:normal;font-weight:400 900;font-display:swap}

:root {
  /* Paper + ink */
  --paper: oklch(99% .004 280);
  --paper-2: oklch(96% .022 285);
  --paper-3: oklch(91% .045 285);
  --ink: oklch(28% .055 285);
  --ink-2: oklch(38% .045 285);
  --ink-3: oklch(45% .035 285);
  --line: oklch(86% .025 285);

  /* Brand colors */
  --why: #FFD23F;
  --why-bright: #FFE56B;
  --why-deep: #E6B400;
  --clarity: oklch(52% .17 290);
  --clarity-soft: oklch(94% .04 290);
  --boss: #B23859;
  --verify: #2F7D5B;
  --verify-soft: #C9E4D2;
  --warn: #E5602B;

  /* Type */
  --font-display: Nunito, ui-rounded, 'Avenir Next', system-ui, sans-serif;
  --font-body: Nunito, ui-rounded, 'Avenir Next', system-ui, sans-serif;
  --font-mono: Nunito, ui-rounded, 'Avenir Next', system-ui, sans-serif;

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-card: 0 1px 0 var(--ink);
  --shadow-pop: 0 4px 0 var(--line);
  --shadow-pop-sm: 0 3px 0 var(--line);

  /* Spacing */
  --gutter: clamp(16px, 2vw, 28px);
  --max: 1240px;
}

[data-theme="night"] {
  --paper: #1A1816;
  --paper-2: #25221E;
  --paper-3: #2F2A23;
  --ink: #F6F1E6;
  --ink-2: #E6DCC2;
  --ink-3: #A99E8B;
  --line: #F6F1E6;
}

[data-theme="lab"] {
  --paper: #F2F4F1;
  --paper-2: #E7EBE3;
  --paper-3: #D6DDD0;
  --why: #6BD968;
  --why-deep: #2F9F2C;
  --clarity: #2A4D8F;
  --boss: #B23859;
}

[data-theme="bubblegum"] {
  --paper: #FFF1F2;
  --paper-2: #FFD8DD;
  --paper-3: #FFC1C9;
  --why: #FF7AB6;
  --why-deep: #C8246E;
  --clarity: #5B3CFF;
  --boss: #B23859;
  --verify: #00A878;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.5;
}

/* Density modes */
[data-density="cozy"] { --pad: 18px; --pad-lg: 28px; --gap: 14px; --gap-lg: 22px; }
[data-density="comfy"] { --pad: 24px; --pad-lg: 40px; --gap: 18px; --gap-lg: 28px; }
[data-density="airy"] { --pad: 32px; --pad-lg: 56px; --gap: 24px; --gap-lg: 40px; }

/* Reusable bits */
.wc-shell {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
}

.wc-container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wc-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  padding-bottom: 0.08em;
}
.wc-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.wc-mono { font-family: var(--font-mono); }

/* Buttons */
.wc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 16px;
  min-height: 44px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s;
  box-shadow: var(--shadow-pop-sm);
  text-decoration: none;
}
.wc-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.wc-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.wc-btn--primary { background: var(--why); }
.wc-btn--ink { background: var(--ink); color: var(--paper); }
.wc-btn--ghost { box-shadow: none; }
.wc-btn--ghost:hover { background: var(--paper-2); }

/* Card */
.wc-card {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-lg);
  padding: var(--pad, 24px);
  box-shadow: var(--shadow-pop-sm);
}

/* Sticker */
.wc-sticker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--ink);
  background: var(--why);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.wc-sticker--blue { background: var(--clarity-soft); }
.wc-sticker--boss { background: var(--boss); color: var(--paper); border-color: var(--ink); }
.wc-sticker--verify { background: var(--verify-soft); }
.wc-sticker--ink { background: var(--ink); color: var(--paper); }

/* Section divider */
.wc-rule {
  display: flex; align-items: center; gap: 12px;
  color: var(--ink); opacity: .9;
}
.wc-rule::before, .wc-rule::after {
  content: ''; flex: 1; height: 1.5px; background: var(--ink);
}

/* Wordmark */
.wc-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.04em;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.wc-mark .q {
  display: inline-flex;
  width: 22px; height: 22px;
  align-items: center; justify-content: center;
  background: var(--why);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  margin-right: 4px;
  transform: translateY(2px);
}

/* Form bits */
.wc-input {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  width: 100%;
  outline: none;
}
.wc-input:focus { box-shadow: var(--shadow-pop-sm); }
.wc-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display:block; margin-bottom: 6px; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* Link */
.wc-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 1px;
}
.wc-link:hover { color: var(--why-deep); border-color: var(--why-deep); }

/* Marquee */
@keyframes wc-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Reveal */
@keyframes wc-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Pulsing AI typing indicator */
@keyframes wc-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ────────────────────────────────────────────────────────────────────
   The Lab — Investigation format animations + theme
   ──────────────────────────────────────────────────────────────────── */

@keyframes wc-stage-enter {
  from { opacity: 0; transform: translateY(20px) scale(0.985); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

@keyframes wc-stage-exit {
  from { opacity: 1; transform: none; filter: none; }
  to   { opacity: 0; transform: translateY(-12px) scale(0.985); filter: blur(4px); }
}

@keyframes wc-evidence-reveal {
  from { opacity: 0; transform: translateY(16px) rotate(-1.4deg); }
  to   { opacity: 1; transform: translateY(0) rotate(-0.6deg); }
}

@keyframes wc-evidence-flag {
  0%   { transform: rotate(-0.6deg) scale(1); box-shadow: 0 1px 0 var(--ink); }
  35%  { transform: rotate(-1.5deg) scale(1.04); box-shadow: 0 14px 30px rgba(0,0,0,.35); }
  100% { transform: rotate(-0.8deg) scale(1.02); box-shadow: 0 10px 24px rgba(0,0,0,.28); }
}

@keyframes wc-cursor-blink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0; }
}

@keyframes wc-typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes wc-spotlight-drift {
  0%   { transform: translate(-3%, -2%); }
  50%  { transform: translate(3%, 2%); }
  100% { transform: translate(-3%, -2%); }
}

@keyframes wc-badge-burst {
  0%   { transform: scale(0.4) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(-3deg); opacity: 1; }
}

@keyframes wc-particle {
  0%   { transform: translate(0, 0) scale(0); opacity: 0; }
  20%  { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

@keyframes wc-shake-soft {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

/* The Lab page chrome */
.lab-shell {
  min-height: 100vh;
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 210, 63, 0.06), transparent 60%),
              radial-gradient(ellipse at 70% 80%, rgba(46, 91, 255, 0.04), transparent 60%),
              #14110D;
  color: var(--paper);
  position: relative;
  overflow-x: hidden;
}

.lab-shell::before {
  content: '';
  position: fixed; inset: 0;
  background-image: radial-gradient(rgba(246, 241, 230, 0.025) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  animation: wc-spotlight-drift 24s ease-in-out infinite;
  z-index: 0;
}

.lab-stage {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 64px);
  display: flex; align-items: center; justify-content: center;
  padding: 60px 24px;
  animation: wc-stage-enter .55s cubic-bezier(.2,.7,.2,1);
}

.lab-stage--exiting { animation: wc-stage-exit .35s cubic-bezier(.6,.1,.7,.4) forwards; }

.lab-card {
  background: rgba(246, 241, 230, 0.04);
  border: 1.5px solid rgba(246, 241, 230, 0.18);
  border-radius: 20px;
  padding: 36px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4);
}

.lab-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 210, 63, 0.85);
}

.lab-headline {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--paper);
}

.lab-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.2;
  color: var(--paper);
}

.lab-button {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  background: var(--why);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(255, 210, 63, 0.35);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.lab-button:hover  { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255, 210, 63, 0.45); }
.lab-button:active { transform: translateY(1px); box-shadow: 0 4px 14px rgba(255, 210, 63, 0.3); }
.lab-button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.lab-button--ghost {
  background: transparent;
  color: var(--paper);
  border-color: rgba(246, 241, 230, 0.4);
  box-shadow: none;
}
.lab-button--ghost:hover { background: rgba(246, 241, 230, 0.08); box-shadow: none; }

/* Evidence card (manila folder feel) */
.lab-evidence {
  background: linear-gradient(180deg, #E6DCC2 0%, #D6C99A 100%);
  color: var(--ink);
  border: 1.5px solid rgba(0,0,0,0.4);
  border-radius: 14px;
  padding: 22px 24px;
  position: relative;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s, filter .25s;
  animation: wc-evidence-reveal .55s cubic-bezier(.2,.7,.2,1) backwards;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.4;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.lab-evidence::before {
  content: '';
  position: absolute; left: 22px; top: -1px; width: 64px; height: 6px;
  background: rgba(0,0,0,0.55); border-radius: 0 0 4px 4px;
}
.lab-evidence:hover { transform: translateY(-3px) rotate(-0.4deg); box-shadow: 0 14px 28px rgba(0,0,0,0.35); }
.lab-evidence--picked { animation: wc-evidence-flag .5s cubic-bezier(.2,.7,.2,1) forwards; outline: 3px solid var(--why); }
.lab-evidence--dim   { opacity: 0.4; filter: saturate(0.6); }

.lab-input {
  width: 100%;
  background: rgba(246, 241, 230, 0.06);
  border: 1.5px solid rgba(246, 241, 230, 0.25);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  outline: none;
  transition: border-color .2s, background .2s;
}
.lab-input:focus { border-color: var(--why); background: rgba(246, 241, 230, 0.1); }
.lab-input::placeholder { color: rgba(246, 241, 230, 0.4); }

.lab-typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  animation: wc-typewriter 1.6s steps(40, end);
}
.lab-typewriter::after {
  content: '▎';
  display: inline-block;
  margin-left: 2px;
  color: var(--why);
  animation: wc-cursor-blink 1s step-end infinite;
}

/* Verdict tags */
.lab-verdict {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 8px;
}
.lab-verdict--hit      { background: rgba(46, 125, 91, 0.4); color: #C9E4D2; border: 1px solid #2E7D5B; }
.lab-verdict--indirect { background: rgba(255, 210, 63, 0.25); color: #FFD23F; border: 1px solid #E6B400; }
.lab-verdict--miss     { background: rgba(255, 77, 109, 0.3); color: #FFB3BD; border: 1px solid #FF4D6D; }

/* Stage progress dots */
.lab-progress {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 5;
}
.lab-progress-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: rgba(246, 241, 230, 0.2);
  transition: all .35s;
}
.lab-progress-dot--done    { background: var(--why); }
.lab-progress-dot--current { background: var(--paper); width: 24px; }

/* Voice control + mute */
.lab-voice-toggle {
  position: fixed; bottom: 22px; left: 22px; z-index: 5;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(246, 241, 230, 0.08);
  border: 1.5px solid rgba(246, 241, 230, 0.25);
  color: var(--paper);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s;
}
.lab-voice-toggle:hover { background: rgba(246, 241, 230, 0.16); }

/* Magnifying-glass cursor for Stage 3 (discovery) */
.lab-stage--discovery {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='13' cy='13' r='8' fill='none' stroke='%23FFD23F' stroke-width='2.5'/><line x1='19' y1='19' x2='27' y2='27' stroke='%23FFD23F' stroke-width='3' stroke-linecap='round'/></svg>") 12 12, auto;
}

/* Particle burst at badge unlock */
.lab-particle {
  position: absolute;
  width: 10px; height: 10px;
  background: var(--why);
  border-radius: 999px;
  pointer-events: none;
  animation: wc-particle 1s cubic-bezier(.2,.7,.2,1) forwards;
}

/* ── Mobile breakpoints ── */
@media (max-width: 768px) {
  .wc-container { padding-left: var(--gutter); padding-right: var(--gutter); }
  .wc-display { word-break: break-word; }
  .wc-grid-10 { grid-template-columns: repeat(5, 1fr) !important; }
  .wc-grid-6  { grid-template-columns: repeat(3, 1fr) !important; }
  .wc-grid-5  { grid-template-columns: repeat(2, 1fr) !important; }
  .wc-grid-2  { grid-template-columns: 1fr !important; }
  .wc-nav-items { display: none; }
  .wc-nav-mobile { display: flex !important; }
  .wc-letter-stamp { transform: scale(0.7) rotate(-12deg) !important; top: -28px !important; left: -10px !important; }
  .wc-letter-stamp--alt { transform: scale(0.7) rotate(6deg) !important; top: -22px !important; right: -4px !important; }

  /* Mastery ladder rungs at phone widths: number + title on one row,
     description on the next, so the rung never forces 378px+ minimum
     on a 375px viewport. */
  .hw-rung { grid-template-columns: 44px 1fr !important; }
  .hw-rung > :nth-child(3) {
    grid-column: 1 / -1;
    margin-top: 4px;
  }
}
@media (min-width: 769px) {
  .wc-nav-mobile { display: none !important; }
}

/* ────────────────────────────────────────────────────────────────────
   HOW IT WORKS page (editorial programme) — standalone how-it-works.html
   Long-scroll, numbered chapters, mobile-natural stacking.
   ──────────────────────────────────────────────────────────────────── */

.hw-step { position: relative; }
.hw-step + .hw-step { margin-top: 0; }

/* Step I: four-cell rhythm row + chip swarm + before/after transformations */
.hw-quad-row {
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  background: var(--paper-2);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
  .hw-quad-row {
    grid-template-columns: 1fr 1fr;
  }
  .hw-quad-row > div:nth-child(-n+2) {
    border-bottom: 1.5px solid var(--ink);
  }
  .hw-quad-row > div:nth-child(2) {
    border-right: none !important;
  }
}

.hw-chip-swarm {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  padding: 22px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.hw-pair-arrow { transition: transform .2s; }
@media (max-width: 600px) {
  .hw-pair {
    grid-template-columns: 1fr !important;
    justify-items: start !important;
    gap: 6px !important;
  }
  .hw-pair-arrow {
    transform: rotate(90deg);
  }
}

/* Step II: 45-minute lesson timeline */
.hw-timeline {
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  background: var(--paper);
  overflow: hidden;
}
.hw-timeline-row {
  display: grid;
  grid-template-columns: 130px 130px 1fr;
  align-items: stretch;
}
.hw-timeline-row + .hw-timeline-row {
  border-top: 1.5px solid var(--ink);
}
.hw-timeline-time {
  padding: 16px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  border-right: 1.5px solid var(--ink);
}
.hw-timeline-tag {
  padding: 16px 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  display: flex;
  align-items: center;
  border-right: 1.5px solid var(--ink);
  background: var(--paper-2);
}
.hw-timeline-body {
  padding: 14px 20px;
}
.hw-timeline-title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
.hw-timeline-desc {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
@media (max-width: 768px) {
  .hw-timeline-row {
    grid-template-columns: 110px 1fr;
  }
  .hw-timeline-time {
    border-right: 1.5px solid var(--ink);
    border-bottom: none;
  }
  .hw-timeline-tag {
    grid-column: 1 / -1;
    padding: 8px 16px;
    border-top: 1px solid rgba(26,24,22,0.15);
    border-right: none;
    background: var(--paper-2);
  }
  .hw-timeline-body {
    grid-column: 1 / -1;
    padding: 14px 18px 16px;
  }
}

/* Step III: 4 modules */
.hw-module {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
  align-items: center;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  padding: 18px 22px;
}
.hw-module-num {
  width: 56px; height: 56px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.hw-module-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.hw-module-desc {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.hw-module-weeks {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .hw-module {
    grid-template-columns: 48px 1fr;
    gap: 14px;
    padding: 14px 16px;
  }
  .hw-module-num { width: 48px; height: 48px; font-size: 13px; }
  .hw-module-weeks {
    grid-column: 1 / -1;
    padding-top: 4px;
    font-size: 10px;
  }
}

/* Step IV: before/after quote rows */
.hw-quotes {
  display: grid;
  gap: 14px;
}
.hw-quote-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hw-quote-cell {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  padding: 16px 18px;
}
.hw-quote-cell--before { background: var(--paper); }
.hw-quote-cell--after  { background: var(--paper-2); }
.hw-quote-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 8px;
}
.hw-quote-eyebrow--before { color: #712B13; }
.hw-quote-eyebrow--after  { color: #042C53; }
.hw-quote-text {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}
.hw-quote-text--before { font-style: italic; font-weight: 400; }
.hw-quote-text--after  { font-weight: 500; }

@media (max-width: 600px) {
  .hw-quote-row { grid-template-columns: 1fr; gap: 8px; }
  .hw-quote-cell { padding: 12px 14px; }
}

/* Step V: 3 pillars */
.hw-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.hw-pillar {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  padding: 22px 22px 20px;
}
@media (max-width: 900px) {
  .hw-pillars { grid-template-columns: 1fr; }
}

/* Step VI: final lesson card + next-up grid */
.hw-final {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  align-items: start;
}
.hw-final-card {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  padding: 28px 28px 32px;
  box-shadow: var(--shadow-pop);
}
.hw-next-list {
  display: grid;
  gap: 10px;
}
.hw-next-card {
  display: block;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: transform .12s, box-shadow .12s;
  box-shadow: var(--shadow-pop-sm);
}
.hw-next-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}
@media (max-width: 900px) {
  .hw-final { grid-template-columns: 1fr; gap: 36px; }
  .hw-final-card { padding: 22px 22px 28px; }
}

/* Pull-quote eyebrow accent colors reused on the chip swarm and quote
   rows above already, no extras needed. All accent hex literals above
   come from the storyboard's curated palette and are not new tokens. */

/* ────────────────────────────────────────────────────────────────────
   Section 2 — A decade of agreement (WEF timeline)
   Section 3 — Where they don't teach it (Education stages)
   Both sections sit between the hero and the curriculum. The default
   layouts above are tuned for desktop; the rules below tighten them
   for tablet and especially for phones, where vertical room is
   precious and inline padding values blow up otherwise.
   ──────────────────────────────────────────────────────────────────── */

/* ── Tablet (≤ 900px) ──
   Panels stack to one column. Corroboration drops to 2-up. Stages
   become 2x2. The expanded-quote panel switches its divider from a
   left border to a top border. The counter strip stacks with dashed
   bottom rules in place of right rules. */
@media (max-width: 900px) {
  .wef-panel-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .wef-corroboration-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stages-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stage-panel {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .stage-panel > div:last-child {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1.5px dashed rgba(246, 241, 230, 0.2);
    padding-top: 24px !important;
  }
  .counter-strip {
    grid-template-columns: 1fr !important;
  }
  .counter-cell {
    border-right: none !important;
    padding-right: 0 !important;
    padding-bottom: 18px;
    border-bottom: 1.5px dashed rgba(246, 241, 230, 0.22);
  }
  .counter-cell:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* ── Phone (≤ 768px) ──
   Major polish pass. Section paddings collapse to ~56px so each
   block lands above the fold faster. Headlines breathe via a tighter
   line-height. The WEF quote band pulls the giant italic mark in
   from the corner and shrinks it so it does not dominate. The Top 10
   "← critical / analytical thinking" annotation hides because it
   wraps to a second line and weakens the red bar. The stages cards
   reflow horizontally so the big "0/Maybe" hammer sits next to the
   subjects instead of underneath them — keeps the visual weight when
   stacked 2-up. The loop-back line size floor lifts so it lands as
   the closer the brief asked for. */
@media (max-width: 768px) {
  .wef-section,
  .gap-section {
    padding: 56px 0 !important;
  }
  .wef-headline,
  .gap-headline {
    font-size: clamp(32px, 7.6vw, 44px) !important;
    line-height: 1.05 !important;
  }
  .wef-sub {
    margin-bottom: 28px !important;
  }
  .wef-timeline {
    height: 200px !important;
  }
  .wef-panel {
    padding: 22px !important;
  }
  .wef-quote {
    margin-top: 40px !important;
    padding: 32px 22px 26px !important;
  }
  .wef-quote-mark {
    font-size: 110px !important;
    top: -18px !important;
    left: 10px !important;
  }
  .wef-quote-text {
    padding-left: 28px !important;
    font-size: clamp(19px, 4.6vw, 24px) !important;
    line-height: 1.32 !important;
  }
  .wef-quote-attribution {
    padding-left: 28px !important;
    margin-top: 18px !important;
  }
  .wef-annotation {
    display: none !important;
  }

  .stage-card {
    padding: 18px !important;
    gap: 10px !important;
  }
  .stage-card .stage-big {
    font-size: 64px !important;
  }
  .stage-panel { padding: 22px !important; }
  .counter-strip { padding: 28px !important; }
  .counter-num {
    font-size: clamp(64px, 16vw, 96px) !important;
  }

  .gap-loopback {
    margin-top: 48px !important;
    font-size: clamp(30px, 7vw, 38px) !important;
    line-height: 1.15 !important;
  }
}

/* ── Small phone (≤ 540px) ──
   Stages and corroboration both finish their collapse to a single
   column. The stage card flips to horizontal: text on the left,
   the big "0/Maybe" hammer on the right with a left rule replacing
   the top rule. This keeps the visual weight balanced when each
   card spans the full viewport width. */
@media (max-width: 540px) {
  .wef-corroboration-grid {
    grid-template-columns: 1fr !important;
  }
  .stages-grid {
    grid-template-columns: 1fr !important;
  }
  .stage-card {
    grid-template-columns: 1fr 130px !important;
    column-gap: 16px !important;
    row-gap: 6px !important;
    align-items: start !important;
  }
  .stage-card > *:nth-child(1),
  .stage-card > *:nth-child(2),
  .stage-card > *:nth-child(3) {
    grid-column: 1;
  }
  .stage-card > *:nth-child(4) {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: stretch;
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-left: 14px !important;
    border-left: 1.5px solid rgba(246, 241, 230, 0.18);
  }
  .stage-card[aria-pressed="true"] > *:nth-child(4) {
    border-left-color: rgba(26, 24, 22, 0.22);
  }
  .stage-card.stage-card .stage-big {
    font-size: 60px !important;
    line-height: 1 !important;
  }
}

/* L1 closing CTA — viewport-locked, ink background. 2-col layout
   on desktop (headline left, body+bullets+CTAs right), stacks on
   mobile. Mirrors the hero's lock pattern so the page opens on a
   beat and closes on a beat. */
.final-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 64px);
  max-height: 920px;
  padding: 60px 0;
}
.final-cta-inner { width: 100%; }

@media (max-width: 900px) {
  .final-cta-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}
@media (max-width: 767px) {
  .final-cta {
    min-height: 0;
    max-height: none;
    padding: 56px 0 64px;
  }
  .final-cta-headline {
    font-size: clamp(26px, 7.4vw, 40px) !important;
  }
}

/* L1 dashboard responsive rules. The continue + progress card row
   collapses to a single column on tablets; the 20-day grid steps
   from 5 cols to 4, then 3, then 2. The Master's Path callout
   stacks on small screens. */
@media (max-width: 900px) {
  .dash-grid { grid-template-columns: 1fr !important; }
  .dash-lesson-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .dash-mp { grid-template-columns: 1fr !important; padding: 26px 24px !important; }
  .dash-mp > a { justify-self: start; }
}
@media (max-width: 640px) {
  .dash-lesson-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 420px) {
  .dash-lesson-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* L1 hero: viewport-locked. The whole section fits the visible
   window minus the sticky TopNav. On mobile the constraint relaxes
   so content can scroll naturally. */
.hero-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 64px);
  max-height: 920px;
  scroll-margin-top: 64px;
}
.hero-inner {
  width: 100%;
  padding: 32px 0;
}
@media (min-width: 768px) {
  .hero-inner { padding: 40px 0; }
}

/* Hero headline scales hard so it never blows the viewport budget. */
.hero-h1 {
  font-size: clamp(40px, 7vw, 80px) !important;
}
@media (min-width: 1280px) {
  .hero-h1 { font-size: clamp(56px, 6.4vw, 88px) !important; }
}

/* Mobile: relax the viewport-lock so content scrolls. */
@media (max-width: 767px) {
  .hero-section {
    min-height: 0;
    max-height: none;
  }
  .hero-h1 { font-size: 36px !important; }
}

/* L1 hero: four-cell rhythm. 4-col on desktop, 2x2 on mobile.
   Editorial-spread variant uses solid (not dashed) inter-cell rules. */
.hero-quad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
  .hero-quad {
    grid-template-columns: 1fr 1fr !important;
  }
  .hero-quad > div:nth-child(-n+2) {
    border-bottom: 1.5px solid var(--ink);
  }
  .hero-quad > div:nth-child(2) {
    border-right: none !important;
  }
}

/* L1 hero: masthead strip — drop the meta line below the brand mark
   on phones so "A parent's brief · Issue 01" doesn't overflow. */
@media (max-width: 600px) {
  .hero-masthead {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .hero-masthead-meta {
    font-size: 9.5px !important;
    gap: 10px !important;
  }
}

/* L1 hero: pull-quote — tighter padding, smaller decorative open
   quote, and a smaller squiggle on phones so the focal element keeps
   its presence without dominating the column. */
@media (max-width: 600px) {
  .hero-pullquote {
    padding: 26px 22px 38px !important;
  }
  .hero-pullquote-open {
    font-size: 96px !important;
    top: -28px !important;
    left: -4px !important;
  }
  .hero-pullquote-squiggle {
    transform: rotate(-8deg) scale(0.72) !important;
    bottom: -22px !important;
    right: 18px !important;
  }
}

/* L1 hero: CTA row — primary CTA gets full width on phones; the
   ghost text link drops onto its own row. */
@media (max-width: 480px) {
  .hero-cta-row > a:first-child {
    width: 100%;
    justify-content: center;
  }
}

/* Focused lessons and investigations share the existing paper-and-ink tokens. */
.lp-layout { padding: 28px 0 64px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; }
.lp-layout > *, .lp-title-row > * { min-width: 0; }
.lp-navigation { padding-bottom: 18px; }
.lp-step-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-step-controls .wc-mono { text-align: center; }
.lp-stage-list { margin-top: 14px; }
.lp-stage-list summary { cursor: pointer; font-size: 14px; min-height: 44px; display: flex; align-items: center; }
.lp-stage-options { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 12px; }
.lp-stage-options [aria-current="step"] { background: var(--why); }
.lesson-video { margin-bottom: 24px; }
.lesson-video-label, .lesson-video-controls { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; margin: 12px 0; font-size: 13px; }
.lesson-video-frame { border: 1.5px solid var(--ink); border-radius: 14px; overflow: hidden; background: var(--paper-2); }
.lesson-video-frame video { display: block; width: 100%; max-height: 64vh; aspect-ratio: 16 / 9; object-fit: contain; }
.lesson-video-note { font-size: 13px; color: var(--ink-2); }
.lesson-transcript { margin: 14px 0; }
.lesson-transcript summary { min-height: 44px; cursor: pointer; padding: 10px 0; }
.lesson-transcript p { max-width: 70ch; line-height: 1.7; }
.wc-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--clarity); outline-offset: 4px; }
@media (max-width: 800px) {
  .lp-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 24px; }
  .lp-sidebar { position: static !important; }
  .lp-title-row { flex-basis: 100% !important; }
  .lp-title-meta { flex-shrink: 1 !important; }
  .lp-idea-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .lp-layout .wc-card { padding: 20px !important; }
  .lp-layout input, .lp-layout textarea { font-size: 16px !important; max-width: 100%; min-width: 0; }
  .lp-step-controls { gap: 6px; }
  .lp-step-controls .wc-mono { font-size: 11px; }
  .lp-step-controls .wc-btn { padding: 10px 12px; min-height: 44px; }
  .wb-root { grid-template-columns: minmax(0, 1fr) !important; }
  .wb-root > div { grid-column: 1 !important; grid-row: auto !important; }
  .lesson-video-controls .wc-btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-layout *, .investigation * { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}

.inv-shell { width: min(900px, calc(100% - 40px)); margin: 0 auto; padding: 32px 0 72px; }
.inv-loading { padding-top: 80px; }
.inv-topline { display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); margin-bottom: 30px; }
.inv-heading h1, .inv-page-title { font-family: var(--font-display); font-size: clamp(32px, 4vw, 48px); line-height: 1.08; font-weight: 600; max-width: 22ch; margin: 12px 0 28px; }
.inv-heading h1 { scroll-margin-top: 96px; }
.inv-heading h1:focus { outline: none; }
.inv-progress { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0 0 24px; border-bottom: 1px solid var(--line); gap: 12px; }
.inv-progress li { padding: 0 0 14px; font-size: 11px; color: var(--ink-3); display: grid; gap: 8px; }
.inv-progress li > span:first-child { font-family: var(--font-mono); font-size: 12px; }
.inv-progress li[aria-current="step"] { color: var(--ink); font-weight: 600; box-shadow: 0 3px 0 var(--ink); }
.inv-save { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.inv-save[data-save-state="error"] { padding: 14px; background: var(--paper-2); border: 1.5px solid var(--ink); border-radius: 10px; }
.inv-privacy { font-size: 13px; color: var(--ink-2); line-height: 1.65; padding: 18px 0; max-width: 80ch; }
.inv-parent { padding: 0 0 20px; font-size: 14px; }
.inv-parent summary, .inv-reading summary, .inv-review summary, .inv-import summary { cursor: pointer; min-height: 44px; padding: 12px 0; font-weight: 600; }
.inv-parent p { max-width: 68ch; }
.inv-work { padding: 22px 0; }
.inv-work h2, .inv-reading h2, .inv-record h2, .inv-import h2, .inv-empty h2 { font-family: var(--font-display); font-size: 30px; line-height: 1.2; margin: 0 0 16px; }
.inv-work p { max-width: 70ch; }
.inv-scene { padding: 28px; background: var(--paper-2); border: 1.5px solid var(--ink); border-radius: 16px; margin-bottom: 28px; }
.inv-scene h2 { font-size: 34px; margin-top: 12px; }
.inv-lead { font-size: 19px; line-height: 1.65; max-width: 65ch; }
.inv-field { display: grid; gap: 10px; margin: 24px 0; font-size: 16px; font-weight: 600; }
.inv-field textarea, .inv-field select { font-family: var(--font-body); font-weight: 400; font-size: 16px; width: 100%; padding: 14px; border: 1.5px solid var(--ink); border-radius: 10px; color: var(--ink); background: var(--paper); line-height: 1.5; }
.inv-field textarea { resize: vertical; min-height: 110px; }
.inv-field small { font-size: 13px; line-height: 1.5; color: var(--ink-2); font-weight: 400; }
.inv-choice { border: 0; padding: 0; margin: 26px 0; display: grid; gap: 10px; }
.inv-choice legend { font-weight: 600; margin-bottom: 12px; font-size: 16px; }
.inv-choice label { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border: 1px solid var(--ink-3); border-radius: 10px; cursor: pointer; min-height: 54px; line-height: 1.5; }
.inv-choice label.is-selected { border: 1.5px solid var(--ink); background: var(--paper-2); box-shadow: 2px 2px 0 var(--ink); }
.inv-choice input { margin-top: 5px; accent-color: var(--ink); flex-shrink: 0; width: 17px; height: 17px; }
.inv-small { font-size: 13px; color: var(--ink-2); line-height: 1.65; }
.inv-evidence { border-top: 1.5px solid var(--ink); margin: 24px 0; }
.inv-evidence details { border-bottom: 1px solid var(--ink); padding: 12px 0; }
.inv-evidence summary { display: flex; gap: 20px; align-items: baseline; cursor: pointer; padding: 12px 0; font-family: var(--font-display); font-size: 24px; }
.inv-evidence summary small { display: block; font-family: var(--font-body); font-size: 12px; color: var(--ink-3); margin-top: 5px; }
.inv-evidence-number { font-family: var(--font-mono); font-size: 12px; }
.inv-evidence-limit { font-size: 14px; color: var(--ink-2); }
.inv-feedback, .inv-before, .inv-offline, .inv-import, .inv-delete { padding: 22px; background: var(--paper-2); border: 1.5px solid var(--ink); border-radius: 12px; margin: 24px 0; }
.inv-feedback p:first-child, .inv-before p:first-child { margin-top: 0; }
.inv-offline { background: transparent; border-style: dashed; }
.inv-before { font-size: 14px; }
.inv-finished { padding: 26px; background: var(--why); border: 1.5px solid var(--ink); border-radius: 14px; margin-top: 28px; }
.inv-finished h3 { font-family: var(--font-display); font-size: 28px; margin: 0; }
.inv-form-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.inv-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1.5px solid var(--ink); padding: 22px 0; margin-top: 24px; }
.inv-bottom > span { font-family: var(--font-mono); font-size: 12px; }
.inv-bottom .wc-btn, .inv-actions .wc-btn, .inv-work .wc-btn { min-height: 46px; }
.inv-version { font-size: 11px; color: var(--ink-3); line-height: 1.6; margin-top: 32px; }
.inv-explainer { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-family: var(--font-display); font-size: 24px; padding: 24px 0; }
.inv-explainer span:nth-child(even) { color: var(--ink-3); }
.inv-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 24px 0; }
.inv-notebook { margin-top: 40px; }
.family-dashboard { padding-bottom: 56px; }
.family-home { padding-top: 44px; padding-bottom: 32px; }
.family-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.family-heading > div { max-width: 750px; }
.family-heading h1 { font: 600 clamp(34px, 5vw, 58px)/1.06 var(--font-display); letter-spacing: -.025em; margin: 14px 0 18px; }
.family-heading p { font-size: 18px; line-height: 1.6; max-width: 62ch; }
.family-heading > a { flex-shrink: 0; margin-bottom: 22px; }
.family-storage, .family-small { color: var(--ink-3); font-size: 13px; line-height: 1.6; }
.family-storage { border-top: 1px solid var(--ink); padding-top: 18px; margin: 24px 0; }
.family-next { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 28px; margin: 28px 0 44px; background: var(--paper-2); border: 1.5px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow-pop-sm); }
.family-next > div { max-width: 60ch; }
.family-next h2 { font: 600 clamp(26px, 3.2vw, 38px)/1.12 var(--font-display); margin: 12px 0; }
.family-next p { line-height: 1.6; margin-bottom: 0; }
.family-next > a { flex-shrink: 0; white-space: normal; max-width: 260px; }
.family-section-heading { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; }
.family-section-heading h2, .family-caregiver h2 { font: 600 30px/1.15 var(--font-display); }
.family-section-heading p { color: var(--ink-3); font-size: 13px; max-width: 38ch; line-height: 1.5; }
.family-path ol { padding: 0; list-style: none; margin: 8px 0 36px; }
.family-path li { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: start; gap: 24px; padding: 26px 0; border-top: 1.5px solid var(--ink); }
.family-path li:last-child { border-bottom: 1.5px solid var(--ink); }
.family-step-number { font: 500 32px/1.2 var(--font-display); }
.family-path h3 { font: 600 26px/1.15 var(--font-display); margin: 9px 0; }
.family-path p { margin: 8px 0 0; line-height: 1.6; max-width: 62ch; }
.family-caregiver { padding: 26px; background: var(--paper-2); border-radius: 12px; margin: 34px 0; }
.family-caregiver blockquote { margin: 20px 0; padding-left: 20px; border-left: 4px solid var(--ink); font: 500 23px/1.5 var(--font-display); white-space: pre-wrap; overflow-wrap: anywhere; }
.family-caregiver p { line-height: 1.6; }
.family-how, .family-extended { border-top: 1.5px solid var(--ink); padding-top: 22px; margin-top: 30px; }
.family-how > summary, .family-extended > summary { cursor: pointer; font: 600 22px/1.4 var(--font-display); padding: 8px 0; }
.family-how-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
.family-how-grid h3 { font-family: var(--font-display); font-size: 22px; }
.family-how-grid p, .family-extended > p { line-height: 1.65; }
.family-extended .wc-container { width: 100%; }
.family-library-links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 28px; padding-top: 20px; }
.family-library-links a { min-height: 44px; line-height: 1.6; }
.family-import { padding: 20px; border: 1.5px solid var(--ink); border-radius: 10px; }
.family-import p { line-height: 1.6; }
.family-note { margin: 18px 0; padding: 16px; border-left: 3px solid var(--ink); background: var(--paper-2); }
.family-note p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.family-path-intro { color: var(--ink-2); max-width: 66ch; margin: 0 0 24px; line-height: 1.6; }
.family-category { border-top: 1.5px solid var(--ink); scroll-margin-top: 120px; }
.family-category:last-child { border-bottom: 1.5px solid var(--ink); }
.family-category > summary { display: flex; align-items: center; gap: 20px; cursor: pointer; padding: 26px 0; list-style: none; }
.family-category > summary::-webkit-details-marker { display: none; }
.family-category > summary::after { content: '+'; font: 400 28px var(--font-body); margin-left: 8px; }
.family-category[open] > summary::after { content: '−'; }
.family-category > summary > span:nth-child(2) { flex: 1; }
.family-category > summary strong { display: block; font: 600 clamp(24px, 3vw, 32px)/1.15 var(--font-display); }
.family-category-number { font: 500 14px var(--font-mono); color: var(--ink-3); }
.family-category-description { display: block; font-size: 15px; line-height: 1.5; color: var(--ink-2); margin-top: 8px; }
.family-category-count { font: 500 14px var(--font-mono); white-space: nowrap; }
.family-category-count > span { font: 400 13px var(--font-body); color: var(--ink-3); }
.family-category > ol { margin: 0 0 28px 40px; }
.family-category .family-step-number { font-size: 22px; }
.curriculum-heading { margin-top: 64px; max-width: 740px; }
.curriculum-heading h2 { font: 600 clamp(30px, 4vw, 46px)/1.1 var(--font-display); margin: 14px 0 20px; }
.curriculum-heading p { color: var(--ink-2); line-height: 1.65; }
.curriculum-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; margin: 32px 0; }
.curriculum-category { border-top: 1.5px solid var(--ink); padding: 26px 0; }
.curriculum-category h3 { font: 600 28px/1.15 var(--font-display); margin: 14px 0; }
.curriculum-category h3 a { color: inherit; text-decoration: none; }
.curriculum-category p { color: var(--ink-2); line-height: 1.6; max-width: 55ch; }
.curriculum-category ul { display: grid; gap: 14px; padding-left: 19px; }
.curriculum-category li { padding-left: 2px; line-height: 1.5; }
.lesson-modern-link { padding: 18px 22px; border: 1.5px solid var(--ink); background: var(--paper-2); border-radius: 12px; margin-bottom: 24px; }
.lesson-modern-link p { margin: 0 0 12px; line-height: 1.6; }
@media (max-width: 700px) {
  .family-category > summary { gap: 12px; align-items: start; padding: 24px 0; }
  .family-category-count > span { display: none; }
  .family-category > ol { margin-left: 0; }
  .family-category-number { padding-top: 5px; }
  .family-category-count { padding-top: 7px; }
  .curriculum-categories { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .family-heading, .family-next, .family-section-heading { flex-direction: column; align-items: stretch; gap: 12px; }
  .family-home { padding-top: 26px; }
  .family-next { padding: 22px; }
  .family-next > a { max-width: 100%; align-self: start; }
  .family-path li { grid-template-columns: 32px minmax(0,1fr); gap: 16px; }
  .family-path li > a { grid-column: 2; justify-self: start; }
  .family-step-number { font-size: 25px; }
  .family-how-grid, .family-library-links { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .family-caregiver { padding: 20px; }
}
.inv-record { border-top: 1.5px solid var(--ink); padding: 32px 0; }
.inv-record-heading { display: flex; flex-wrap: wrap; gap: 20px; align-items: baseline; justify-content: space-between; }
.inv-record-heading h2 { margin-top: 8px; }
.inv-record-heading time { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.inv-response { background: var(--paper-2); padding: 20px; border-radius: 10px; }
.inv-review { margin-top: 16px; }
.inv-empty { padding: 44px 0; }
@media (max-width: 640px) {
  .inv-shell { width: calc(100% - 32px); padding-top: 24px; }
  .inv-topline { margin-bottom: 24px; }
  .inv-progress { gap: 8px; }
  .inv-progress li > span:last-child { display: none; }
  .inv-progress li[aria-current="step"] > span:last-child { display: block; min-width: 68px; font-size: 10px; }
  .inv-heading h1 { font-size: 34px; }
  .inv-scene, .inv-feedback, .inv-before, .inv-offline { padding: 20px; }
  .inv-scene h2 { font-size: 29px; }
  .inv-form-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .inv-choice label { padding: 14px; }
  .inv-evidence summary { font-size: 22px; gap: 14px; }
  .inv-bottom .wc-btn { padding: 10px 16px; }
  .inv-lead { font-size: 17px; }
}