/* ==========================================================================
   CheckpointQA — checkpointqa.co.uk marketing site
   Design system: Notion DS (CQA-REF-DS-002) — deep indigo (structure) ·
   Notion blue (action) · warm paper canvas. Matches the eQMS product shell.
   90–95% of any screen stays neutral; brand colour is deliberate.
   ========================================================================== */

/* ---- 1. Fonts (self-hosted, SIL OFL — see LICENSE files in /assets/fonts/) ----
   Inter is the shipped substitute for NotionInter (Notion's proprietary tuning).
   The negative tracking in the type scale below reproduces its display tightness.
   Deliberately self-hosted: no Google Fonts CDN → no third-party request,
   no GDPR exposure, and `default-src 'none'` in /_headers stays intact. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-800-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}

/* ---- 2. Tokens ----
   Notion Design System (CQA-REF-DS-002). The variable *names* below are the
   long-standing site vocabulary; only their values changed at the DS cutover,
   which is what re-skins every component without touching the class layer.
   Contrast: every value used for text meets WCAG AA on its stated surface. */
:root {
  /* Structure — deep indigo "night" bands, footer, dark panels */
  --navy-900: #18245F;
  --navy-800: #213183;   /* DS --color-secondary */
  --navy-700: #2C3F9E;
  --navy-600: #3D51B5;
  --navy-100: #DFE3F5;
  --navy-50:  #EEF0FA;

  /* Action — Notion blue, the only structural accent */
  --purple-800: #00447F;
  --purple-700: #005BAB;  /* DS --color-primary-active (pressed) */
  --purple-600: #0069C7;
  --purple-500: #0075DE;  /* DS --color-primary */
  --purple-400: #4D9FE8;
  --purple-on-dark: #8FC3F2; /* links on indigo — 6.2:1 */
  --purple-100: #D6E8FA;
  --purple-50:  #EAF3FD;

  /* Insight — non-text use only, except --teal-text */
  --teal-800: #14524F;
  --teal-700: #1D7A76;
  --teal-600: #2A9D99;   /* DS --color-accent-teal */
  --teal-400: #6DC0BD;
  --teal-100: #D6EDEC;
  --teal-50:  #EBF6F5;
  --teal-text: #1D7A76;  /* 4.9:1 on white — the only teal for text */

  /* Neutrals (warm, paper-tinted — DS canvas is #F6F5F4, not a cool grey) */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F6F5F4;  /* DS --color-canvas-soft */
  --neutral-100: #EFEDEA;
  --neutral-200: #E6E6E6;  /* DS --color-hairline */
  --neutral-300: #D4D1CC;
  --neutral-400: #A39E98;  /* DS --color-ink-faint — large/decorative only */
  --neutral-500: #8A847D;  /* fails AA for normal text — large/bold only */
  --neutral-600: #615D59;  /* DS --color-ink-muted — 6.4:1 */
  --neutral-700: #4A4744;
  --neutral-800: #31302E;  /* DS --color-ink-secondary */
  --neutral-900: #0A0A0A;  /* DS --color-ink */

  /* Semantic (AA on white) */
  --success-700: #0E5A27;
  --success-600: #137333;  /* the only green for text */
  --success-500: #1AAE39;  /* DS --color-accent-green — dots/fills only */
  --success-100: #DCEFE2;
  --success-50:  #EDF7F0;
  --warning-700: #793400;  /* DS --color-accent-orange-deep */
  --warning-600: #A34400;
  --warning-100: #FBEAD5;
  --warning-50:  #FDF4E7;
  --danger-700:  #A31B18;
  --danger-600:  #C5221F;
  --danger-100:  #FADEDD;
  --danger-50:   #FCEEEE;
  --info-700:    #00447F;
  --info-600:    #0069C7;
  --info-100:    #D6E8FA;
  --info-50:     #EAF3FD;

  /* Quality Campus domains (six business areas) — DS decorative accents */
  --campus-leadership: #213183;
  --campus-leadership-bg: #EEF0FA;
  --campus-planning: #62AEF0;       /* DS --color-accent-sky */
  --campus-planning-text: #0069C7;
  --campus-planning-bg: #EAF3FD;
  --campus-people: #391C57;         /* DS --color-accent-purple-deep */
  --campus-people-bg: #F1EAF8;
  --campus-operations: #DD5B00;     /* DS --color-accent-orange */
  --campus-operations-text: #793400;
  --campus-operations-bg: #FDF0E7;
  --campus-performance: #2A9D99;    /* DS --color-accent-teal */
  --campus-performance-text: #1D7A76;
  --campus-performance-bg: #EBF6F5;
  --campus-improvement: #137333;
  --campus-improvement-bg: #EDF7F0;

  /* Text aliases (contrast-corrected) */
  --text-heading: var(--neutral-900);
  --text-body: var(--neutral-800);
  --text-secondary: var(--neutral-600); /* #615D59, 6.4:1 — not #8A847D (fails AA) */
  --text-faint: var(--neutral-400);     /* metadata/captions on white only */
  --text-inverse: #FFFFFF;
  /* #0075DE is only 4.27:1 on the #F6F5F4 canvas — fails AA for normal text.
     Links therefore use the -700 step (6.2:1); the -500 stays the button fill,
     where white-on-blue is 4.59:1 and passes. */
  --text-link: var(--purple-700);

  /* Surfaces */
  --surface-page: var(--neutral-50);
  --surface-card: var(--neutral-0);
  --surface-nav: var(--neutral-0);

  /* Type — Inter, with DS tracking (more negative as size grows) */
  --font-sans: 'Inter', -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.125rem;
  --text-4xl: 3.375rem;
  --leading-tight: 1.1;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --tracking-caps: 0.08em;
  --tracking-display: -0.035em;  /* h1 */
  --tracking-heading: -0.028em;  /* h2 */
  --tracking-title: -0.014em;    /* h3/h4 */

  /* Spacing — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Radius — DS scale */
  --radius-xs: 4px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows — DS elevation is "barely there": many near-transparent layers,
     never a hard cast. Level 0 relies on the hairline alone. */
  --shadow-xs: rgba(0,0,0,0.02) 0 1px 2px;
  --shadow-sm: rgba(0,0,0,0.02) 0 1px 3px, rgba(0,0,0,0.03) 0 3px 8px;
  --shadow-md:
    rgba(0,0,0,0.01) 0 0.175px 1.041px,
    rgba(0,0,0,0.02) 0 0.8px 2.925px,
    rgba(0,0,0,0.027) 0 2.025px 7.847px,
    rgba(0,0,0,0.04) 0 4px 18px;
  --shadow-lg:
    rgba(0,0,0,0.02) 0 1px 3px,
    rgba(0,0,0,0.03) 0 6px 14px,
    rgba(0,0,0,0.05) 0 23px 52px;

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);

  /* Layout */
  --content-max: 1140px;
  --touch-target: 44px;
  --focus-ring: 0 0 0 2px var(--neutral-0), 0 0 0 4px var(--purple-500);
  --focus-ring-dark: 0 0 0 2px var(--navy-800), 0 0 0 4px var(--purple-400);
}

/* ---- 3. Reset + base ---- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--text-heading);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
  font-weight: 800;
}
h1 { font-size: clamp(2.25rem, 5vw, var(--text-4xl)); letter-spacing: var(--tracking-display); line-height: 1.02; }
h2 { font-size: clamp(1.75rem, 4vw, var(--text-3xl)); letter-spacing: var(--tracking-heading); }
h3 { font-size: var(--text-xl); letter-spacing: var(--tracking-title); font-weight: 700; }
h4 { font-size: var(--text-lg); letter-spacing: var(--tracking-title); font-weight: 700; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

.lead { font-size: var(--text-lg); line-height: var(--leading-relaxed); }

a { color: var(--text-link); }
a:hover { color: var(--purple-700); }

ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }

img, svg { vertical-align: middle; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}
.on-dark :focus-visible,
.on-dark:focus-visible {
  box-shadow: var(--focus-ring-dark);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--navy-800);
  color: #FFF;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus-visible {
  transform: none;
  color: #FFF;
}

/* ---- 4. Layout ---- */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.section { padding: var(--space-16) 0; }
.section-alt { background: var(--neutral-0); border-top: 1px solid var(--neutral-200); border-bottom: 1px solid var(--neutral-200); }
.section-header { max-width: 720px; margin-bottom: var(--space-10); }

.grid-2, .grid-3, .grid-4 {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

.cta-band {
  background: var(--navy-800);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-8);
  text-align: center;
}
.cta-band h2 { color: #FFF; }
.cta-band p { color: var(--neutral-300); max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-band .btn-row { justify-content: center; }

/* ---- 5. Components ---- */

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--neutral-200);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 64px;
  flex-wrap: wrap;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--navy-800);
  margin-right: auto;
}
.brand:hover { color: var(--navy-800); }
.brand img { width: 32px; height: 32px; }

.site-nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--neutral-700);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
}
.site-nav a:hover { background: var(--neutral-100); color: var(--navy-800); }
.site-nav a[aria-current="page"] { color: var(--purple-700); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-md);
  background: var(--neutral-0);
  color: var(--navy-800);
  cursor: pointer;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Small screens: nav stacks full-width; JS collapses it behind the toggle */
@media (max-width: 959px) {
  .site-nav { order: 10; flex-basis: 100%; padding-bottom: var(--space-2); }
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
}
@media (min-width: 960px) {
  .site-nav ul { flex-direction: row; gap: var(--space-1); }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--purple-500); color: #FFF; }
.btn-primary:hover { background: var(--purple-600); color: #FFF; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 117, 222, 0.28); }
.btn-primary:active { background: var(--purple-700); transform: translateY(0); box-shadow: none; }
.btn-secondary { background: var(--neutral-0); color: var(--purple-500); border-color: var(--neutral-200); }
.btn-secondary:hover { border-color: var(--neutral-300); background: var(--neutral-50); color: var(--purple-700); }
/* On the indigo band the white pill is the secondary action (DS pattern) */
.btn-on-light { background: #FFF; color: var(--navy-800); border-color: transparent; }
.btn-on-light:hover { background: var(--neutral-50); color: var(--navy-800); }
.btn-disabled,
.btn[disabled] {
  background: var(--neutral-100);
  color: var(--neutral-600);
  border-color: var(--neutral-200);
  cursor: not-allowed;
}
.btn-on-dark { background: transparent; color: #FFF; border-color: rgba(255, 255, 255, 0.55); }
.btn-on-dark:hover { border-color: #FFF; background: rgba(255, 255, 255, 0.08); color: #FFF; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cta-microcopy { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-4); margin-bottom: 0; }
.on-dark .cta-microcopy { color: var(--neutral-300); }
.on-dark .cta-microcopy a { color: var(--purple-on-dark); }
.cta-band .cta-microcopy { max-width: 560px; margin-left: auto; margin-right: auto; }

/* Kicker + pills */
.kicker {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
}
.pill-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.pill-on-dark { background: rgba(255, 255, 255, 0.12); color: var(--purple-100); }
.pill-accent { background: var(--purple-50); color: var(--purple-700); }

/* Hero */
.hero-dark {
  background: var(--navy-800);
  color: var(--neutral-300);
  padding: var(--space-20) 0;
}
.hero-dark h1 { color: #FFF; max-width: 18ch; }
.hero-dark .lead { color: var(--neutral-300); max-width: 56ch; }
.hero-dark .kicker { color: var(--purple-400); }

.hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center; }
.hero-visual { display: flex; justify-content: center; }
.phone-mock { margin: 0; width: 100%; max-width: 250px; }
.phone-mock svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 44px rgba(0, 0, 0, 0.35)); }
.phone-mock figcaption { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--neutral-300); text-align: center; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-12); }
  .phone-mock { max-width: 270px; }
}

.audience-strip {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--navy-600);
  color: var(--neutral-300);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* Cards */
.card {
  background: var(--surface-card);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
}
.card, .campus-card, .pricing-card {
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.card:hover, .campus-card:hover, .pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--neutral-300);
}
.pricing-card--featured:hover { border-color: var(--purple-500); }
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--text-secondary); font-size: 0.9375rem; }

.feature-card h3 .pill { font-size: var(--text-xs); vertical-align: middle; margin-left: var(--space-2); }
.feature-card .feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--purple-50);
  color: var(--purple-700);
  margin-bottom: var(--space-4);
}
.feature-card .feature-icon.icon-teal { background: var(--teal-50); color: var(--teal-text); }

/* Campus (six business areas) */
.campus-card {
  background: var(--surface-card);
  border: 1px solid var(--neutral-200);
  border-left: 4px solid var(--campus-leadership);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
}
.campus-card .kicker { margin-bottom: var(--space-2); }
.campus-card h3 { margin-bottom: var(--space-2); font-size: var(--text-lg); }
.campus-card p { color: var(--text-secondary); font-size: 0.9375rem; margin-bottom: var(--space-4); }
.campus-card--leadership { border-left-color: var(--campus-leadership); }
.campus-card--leadership .kicker { color: var(--campus-leadership); }
.campus-card--leadership .module-chip { background: var(--campus-leadership-bg); }
.campus-card--planning { border-left-color: var(--campus-planning); }
.campus-card--planning .kicker { color: var(--campus-planning-text); }
.campus-card--planning .module-chip { background: var(--campus-planning-bg); }
.campus-card--people { border-left-color: var(--campus-people); }
.campus-card--people .kicker { color: var(--campus-people); }
.campus-card--people .module-chip { background: var(--campus-people-bg); }
.campus-card--operations { border-left-color: var(--campus-operations); }
.campus-card--operations .kicker { color: var(--campus-operations); }
.campus-card--operations .module-chip { background: var(--campus-operations-bg); }
.campus-card--performance { border-left-color: var(--campus-performance); }
.campus-card--performance .kicker { color: var(--campus-performance-text); }
.campus-card--performance .module-chip { background: var(--campus-performance-bg); }
.campus-card--improvement { border-left-color: var(--campus-improvement); }
.campus-card--improvement .kicker { color: var(--campus-improvement); }
.campus-card--improvement .module-chip { background: var(--campus-improvement-bg); }

.module-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.module-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--neutral-100);
  color: var(--neutral-800);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* Module cards (platform page) */
.module-card h3 { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.standards-note {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
}
.standards-note strong { color: var(--neutral-700); }

/* Steps */
.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: var(--space-6); }
.step { position: relative; padding-left: var(--space-12); }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--purple-500);
  color: #FFF;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step h3 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.step p { color: var(--text-secondary); }

/* Pricing */
.pricing-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: stretch; }
.pricing-card {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6) var(--space-6);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.pricing-card--featured { border: 2px solid var(--purple-500); box-shadow: var(--shadow-md); }
.featured-flag {
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: var(--space-6);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--purple-500);
  color: #FFF;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.pricing-card .plan-name { font-size: var(--text-xl); margin: 0; }
.plan-blurb { color: var(--text-secondary); font-size: 0.9375rem; margin: 0; min-height: 4.4em; }
.price { font-size: var(--text-4xl); font-weight: 700; color: var(--navy-800); line-height: 1; }
.price-period { font-size: var(--text-md); font-weight: 400; color: var(--text-secondary); }
.plan-limit { font-weight: 600; color: var(--neutral-700); margin: 0; }
.plan-features { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); font-size: 0.9375rem; }
.plan-features li { padding-left: var(--space-6); position: relative; color: var(--text-secondary); }
.plan-features li::before { content: "✓"; position: absolute; left: 0; color: var(--success-600); font-weight: 700; }
.pricing-card .btn { width: 100%; margin-top: auto; }
.annual-line { font-size: var(--text-xs); color: var(--success-600); font-weight: 600; margin: calc(-1 * var(--space-2)) 0 0; }
.js .annual-line { display: none; } /* no-JS fallback only; the toggle handles annual when JS runs */

/* Billing period toggle (JS-only; monthly shown without JS) */
.billing-toggle { display: none; }
.js .billing-toggle {
  display: inline-flex;
  gap: 0;
  padding: 4px;
  margin-bottom: var(--space-8);
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-full);
}
.billing-opt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-2) var(--space-5);
  border: 0;
  background: transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--neutral-700);
  cursor: pointer;
}
.billing-opt.is-active { background: var(--neutral-0); color: var(--navy-800); box-shadow: var(--shadow-xs); }
.billing-opt:focus-visible { box-shadow: var(--focus-ring); }
.save-tag { font-size: var(--text-xs); font-weight: 700; color: var(--success-600); }

/* Comparison table */
.table-wrap { overflow-x: auto; border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); background: var(--neutral-0); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare-table caption {
  text-align: left;
  padding: var(--space-4) var(--space-5);
  font-weight: 700;
  color: var(--navy-800);
  border-bottom: 1px solid var(--neutral-200);
}
.compare-table th, .compare-table td {
  padding: var(--space-3) var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--neutral-100);
  font-size: var(--text-sm);
}
.compare-table thead th {
  background: var(--navy-800);
  color: #FFF;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.compare-table tbody th { font-weight: 600; color: var(--neutral-700); }
.compare-table td { color: var(--text-secondary); }
.compare-table .check { color: var(--success-600); font-weight: 700; }

/* Info / honesty note */
.note-box {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--info-600);
  background: var(--info-50);
  color: var(--info-700);
  font-size: var(--text-sm);
}

/* FAQ */
.faq { display: grid; gap: var(--space-6); max-width: 760px; }
.faq h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.faq p { color: var(--text-secondary); }

/* Forms */
.form-grid { display: grid; gap: var(--space-5); max-width: 560px; }
.form-field { display: grid; gap: var(--space-2); }
.form-field label { font-weight: 600; font-size: var(--text-sm); color: var(--neutral-700); }
.form-field .hint { font-size: var(--text-xs); color: var(--text-secondary); }
.input {
  width: 100%;
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--neutral-300);
  border-radius: var(--radius-sm);
  background: var(--neutral-0);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--neutral-800);
}
textarea.input { min-height: 140px; resize: vertical; }
.input:focus-visible { box-shadow: var(--focus-ring); border-color: var(--purple-500); }

/* Prose pages (legal, statements) */
.prose { max-width: 720px; }
.prose h2 { font-size: var(--text-xl); margin-top: var(--space-10); }
.prose h3 { font-size: var(--text-lg); margin-top: var(--space-6); }
.prose li { margin-bottom: var(--space-2); }

/* Footer */
.site-footer {
  background: var(--navy-800);
  color: var(--neutral-300);
  padding: var(--space-16) 0 var(--space-8);
  margin-top: var(--space-16);
}
.footer-grid { display: grid; gap: var(--space-8); grid-template-columns: 1fr; margin-bottom: var(--space-10); }
.site-footer h2 {
  color: #FFF;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--neutral-300);
  text-decoration: none;
}
.site-footer a:hover { color: #FFF; text-decoration: underline; }
.footer-brand { display: flex; align-items: center; gap: var(--space-3); color: #FFF; font-weight: 700; margin-bottom: var(--space-3); }
.footer-legal {
  border-top: 1px solid var(--navy-600);
  padding-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--neutral-300);
}

/* Spotlight band (dark, mid-page feature — e.g. ISO 9001:2026) */
.panel-dark {
  background: var(--navy-800);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-8);
  color: var(--neutral-300);
}
.panel-dark .panel-head { max-width: 760px; margin-bottom: var(--space-10); }
.panel-dark h2 { color: #FFF; }
.panel-dark .lead { color: var(--neutral-300); }
.panel-point h3 { color: #FFF; font-size: var(--text-lg); margin-bottom: var(--space-2); }
.panel-point p { color: var(--neutral-300); font-size: 0.9375rem; }
.panel-point .panel-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-md);
  background: var(--purple-500); color: #FFF; font-weight: 700; margin-bottom: var(--space-3);
}
.panel-dark .panel-foot { margin-top: var(--space-8); color: var(--neutral-300); font-size: var(--text-sm); }
.panel-dark .panel-foot a { color: var(--purple-on-dark); }
@media (min-width: 960px) {
  .panel-dark { padding: var(--space-16) var(--space-12); }
}

/* Product mock-ups (inline SVG previews — swap for real screenshots later) */
.ui-mock-frame { margin: var(--space-12) 0 0; }
.ui-mock-frame svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--neutral-300);
  box-shadow: var(--shadow-lg);
  background: var(--neutral-0);
}
.hero-dark .ui-mock-frame svg { border-color: var(--navy-600); }
.ui-mock-frame figcaption { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--text-secondary); }
.hero-dark .ui-mock-frame figcaption { color: var(--neutral-300); }

/* Readiness self-assessment */
.quiz-area { border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); background: var(--neutral-0); padding: var(--space-6); margin: 0 0 var(--space-6); }
.quiz-area legend { font-weight: 700; color: var(--navy-800); padding: 0 var(--space-2); font-size: var(--text-lg); }
.quiz-q { border: 0; padding: 0; margin: var(--space-5) 0 0; }
.quiz-q legend { font-size: var(--text-md); font-weight: 600; color: var(--neutral-700); padding: 0; margin-bottom: var(--space-2); }
.quiz-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.quiz-option { position: relative; }
.quiz-option input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.quiz-option span {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--neutral-300);
  border-radius: var(--radius-md);
  background: var(--neutral-0);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--neutral-700);
}
.quiz-option input:checked + span { background: var(--purple-50); border-color: var(--purple-500); color: var(--purple-700); }
.quiz-option input:focus-visible + span { box-shadow: var(--focus-ring); }
.score-panel {
  border: 2px solid var(--purple-500);
  border-radius: var(--radius-xl);
  background: var(--purple-50);
  padding: var(--space-6);
  margin: 0 0 var(--space-6);
}
.score-panel .score-value { font-size: var(--text-4xl); font-weight: 700; color: var(--navy-800); line-height: 1; }
.score-panel .score-band { font-size: var(--text-xl); font-weight: 700; color: var(--purple-700); margin: var(--space-2) 0; }
.score-panel .score-detail { color: var(--neutral-700); margin: 0; }

/* Motion: entrance + scroll reveals (light, reduced-motion-safe).
   Hidden states are only ever applied by JS (reveal.js), which bails out
   under prefers-reduced-motion or without IntersectionObserver — so content
   is always visible with JS off or motion off. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
  }
  .hero-dark .container > * { animation: fade-up 0.5s var(--ease-out) backwards; }
  .hero-dark .container > *:nth-child(1) { animation-delay: 0.05s; }
  .hero-dark .container > *:nth-child(2) { animation-delay: 0.14s; }
  .hero-dark .container > *:nth-child(3) { animation-delay: 0.22s; }
  .hero-dark .container > *:nth-child(4) { animation-delay: 0.3s; }
  .hero-dark .container > *:nth-child(5) { animation-delay: 0.38s; }
}
.reveal-init { opacity: 0; transform: translateY(14px); }
.reveal-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

/* Table row hover */
.compare-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); }
.compare-table tbody tr:hover { background: var(--purple-50); }

/* ---- 6. Utilities ---- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mono { font-family: var(--font-mono); }
.text-secondary { color: var(--text-secondary); }
.center { text-align: center; }

/* ---- 7. Breakpoints ---- */
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .pricing-grid { grid-template-columns: repeat(4, 1fr); }
  .section { padding: var(--space-20) 0; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .cta-band { padding: var(--space-16) var(--space-12); }
}

/* ---- 8. Mobile density: leaner, calmer, USP-first (≤639px) ---- */
/* Same content and DOM order (no reorder = no focus/reading-order issues) —
   just less padding and supplementary detail, so the page feels less busy
   and the key USP band arrives sooner in the scroll. */
@media (max-width: 639px) {
  /* Leaner header: one row, one job — get people into the demo. Sign in stays in the footer. */
  .site-header .container { gap: var(--space-3); padding-top: var(--space-2); padding-bottom: var(--space-2); min-height: 56px; }
  .header-actions .btn-secondary { display: none; }
  .brand { font-size: var(--text-md); gap: var(--space-2); }
  .brand img { width: 28px; height: 28px; }
  .header-actions .btn { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
  .section { padding: var(--space-10) 0; }
  .section-header { margin-bottom: var(--space-6); }
  .hero-dark { padding: var(--space-12) 0; }
  .hero-grid { gap: var(--space-6); }
  .hero-dark .lead { font-size: var(--text-md); }
  .phone-mock { max-width: 210px; }
  .grid-2, .grid-3, .grid-4 { gap: var(--space-4); }
  .card, .campus-card, .feature-card, .pricing-card { padding: var(--space-5); }
  .campus-card .module-chips { display: none; } /* supplementary; full list is on /platform/ */
  .cta-band { padding: var(--space-10) var(--space-5); }
  .panel-dark { padding: var(--space-10) var(--space-5); }
  .panel-dark .panel-head { margin-bottom: var(--space-6); }
  .steps { gap: var(--space-4); }
}

/* ---- 9. Notion DS cutover components ----
   Introduced with the 2026 repositioning ("Walk into your audit already ready").
   Every pattern that the new design expressed as an inline style lives here as a
   class, so /_headers can keep `default-src 'none'` with no 'unsafe-inline'. */

/* Trust strip — honest, claim-free credibility row under the hero */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  margin: 0;
}
.trust-strip dt {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.trust-strip dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-body);
}
.trust-strip dd + dd::before {
  content: "·";
  color: var(--neutral-300);
  margin-right: var(--space-6);
}

/* Persona router — "start where you stand" */
.persona-card {
  display: block;
  background: var(--surface-card);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.persona-card:hover {
  border-color: var(--neutral-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.persona-card::before {
  content: "";
  display: block;
  height: 6px;
  background: var(--persona-accent, var(--purple-500));
}
.persona-card--product   { --persona-accent: var(--campus-planning); }
.persona-card--pricing   { --persona-accent: var(--success-500); }
.persona-card--trust     { --persona-accent: var(--campus-people); }
.persona-card--demo      { --persona-accent: var(--campus-operations); }
.persona-card > div { padding: var(--space-5); }
.persona-card h3 { font-size: 0.9375rem; font-weight: 700; margin-bottom: var(--space-2); }
.persona-card p { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: var(--space-3); }
.persona-card .persona-go { font-size: 0.8125rem; font-weight: 600; color: var(--purple-700); }

/* Product mock — browser-chrome window (replaces the phone mock on the home hero) */
.mock-window {
  margin: 0;
  background: var(--surface-card);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.mock-window__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--neutral-200);
  background: var(--neutral-50);
}
.mock-window__dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--neutral-300); }
.mock-window__title { margin-left: var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
.mock-window__body { padding: var(--space-5); }
.mock-window__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.mock-window__head strong { font-size: 0.9375rem; color: var(--text-heading); }
.mock-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--neutral-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}
.mock-row dt { flex: none; width: 78px; font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary); }
.mock-row dd { margin: 0; font-size: 0.8125rem; color: var(--text-body); }
.mock-row dd.mono { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); }
.mock-window figcaption {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--neutral-200);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.status-sealed {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  font-size: 0.7188rem;
  font-weight: 700;
  background: var(--success-50);
  color: var(--success-600);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
}
.status-sealed::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: var(--radius-full);
  background: var(--success-500);
}

/* Numbered points inside the indigo band */
.diff-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.diff-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.diff-item .diff-num {
  flex: none;
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.15);
  color: #FFF;
  font-size: var(--text-xs);
  font-weight: 800;
}
.diff-item h3 { color: #FFF; font-size: 0.9375rem; margin: 0 0 2px; }
.diff-item p { color: rgba(255, 255, 255, 0.72); font-size: 0.8438rem; line-height: var(--leading-snug); margin: 0; }

/* Tick list — used on the "we're early" panel and elsewhere */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.check-list li {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  background: var(--neutral-50);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-body);
  margin: 0;
}
.check-list li::before {
  content: "✓";
  color: var(--success-600);
  font-weight: 800;
}
.check-list li.is-next::before { content: "→"; color: var(--purple-700); }

/* Split panel — white bordered two-column feature block */
.split-panel {
  background: var(--surface-card);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

/* Step cards — the "Do the work / Keep the evidence / Pass the audit" trio */
.step-card { background: var(--surface-card); border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); padding: var(--space-6); }
.step-card .step-num { display: block; font-size: 0.8125rem; font-weight: 800; color: var(--purple-700); margin-bottom: var(--space-3); }
.step-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.step-card p { color: var(--text-secondary); font-size: 0.9063rem; }

/* Light CTA — the DS "See it for yourself" closer (replaces a dark band where
   the page has already used the indigo band once; two dark bands read as heavy) */
.cta-light {
  text-align: center;
  background: var(--surface-card);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  padding: var(--space-16) var(--space-8);
}
.cta-light p { max-width: 50ch; margin-left: auto; margin-right: auto; color: var(--text-secondary); font-size: var(--text-lg); }
.cta-light .btn-row { justify-content: center; }

@media (min-width: 640px) {
  .split-panel { grid-template-columns: 1fr 1fr; padding: var(--space-10); }
}
@media (max-width: 639px) {
  .split-panel { padding: var(--space-6); }
  .cta-light { padding: var(--space-10) var(--space-5); }
  .trust-strip { gap: var(--space-2) var(--space-4); padding: var(--space-4); }
  .trust-strip dd + dd::before { margin-right: var(--space-4); }
  .mock-window__body { padding: var(--space-4); }
}

/* Light hero — the DS leads on the warm paper canvas, not a dark band.
   The indigo band still appears once per page, further down, as the accent. */
.hero-light { padding-top: var(--space-16); padding-bottom: var(--space-10); }
/* Tighten the measure only in the two-column hero, where a visual sits beside
   the copy. On single-column heroes the section-header width governs instead —
   a 16ch measure there wraps a long h1 into a narrow column beside dead space. */
.hero-light .hero-grid h1 { max-width: 16ch; }
.hero-light .lead { color: var(--text-secondary); max-width: 52ch; }
.hero-light .btn-row { margin-top: var(--space-8); }

.section-tight { padding: 0 0 var(--space-12); }

/* Indigo band — full-bleed, replaces the old .panel-dark inset card on pages
   where the band should span the viewport (DS "night band" pattern). */
.band-dark { background: var(--navy-800); padding: var(--space-20) 0; }
.band-dark h2 { color: #FFF; max-width: 20ch; }
.band-dark .lead { color: rgba(255, 255, 255, 0.82); max-width: 48ch; }
.band-dark .kicker { color: rgba(255, 255, 255, 0.6); }
.band-dark__grid { align-items: center; gap: var(--space-10); }

.section-header.center { margin-left: auto; margin-right: auto; text-align: center; max-width: 56ch; }

@media (max-width: 639px) {
  .hero-light { padding-top: var(--space-10); padding-bottom: var(--space-6); }
  .hero-light .btn-row { margin-top: var(--space-6); }
  .band-dark { padding: var(--space-12) 0; }
  .section-tight { padding-bottom: var(--space-8); }
}

/* Evidence architecture — the five properties that make a record evidence */
.evidence-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); counter-reset: none; }
.evidence-item {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  background: var(--surface-card);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: 0;
}
.evidence-item .evidence-num {
  flex: none;
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--purple-50);
  color: var(--purple-700);
  font-size: var(--text-sm);
  font-weight: 800;
}
.evidence-item h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.evidence-item p { color: var(--text-secondary); font-size: 0.9375rem; }
.chain-demo {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--neutral-50);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.mono { font-family: var(--font-mono); }

@media (max-width: 639px) {
  .evidence-item { padding: var(--space-5); gap: var(--space-4); }
}

/* Assurance posture — In place / Planned / We do not claim.
   The three states are distinguished by a top rule and the marker glyph, not
   by colour alone (colour is never the only carrier of meaning). */
.posture-card { border-top: 3px solid var(--neutral-300); }
.posture-card--now { border-top-color: var(--success-600); }
.posture-card--planned { border-top-color: var(--campus-planning); }
.posture-card--never { border-top-color: var(--neutral-400); }
.posture-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.posture-list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin: 0;
}
.posture-list li::before { position: absolute; left: 0; font-weight: 800; }
.posture-card--now .posture-list li::before { content: "✓"; color: var(--success-600); }
.posture-card--planned .posture-list li::before { content: "○"; color: var(--campus-planning-text); }
.posture-card--never .posture-list li::before { content: "✕"; color: var(--neutral-500); }

/* Negative list — "what it isn't" / "what we'll never do" */
.cross-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.cross-list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin: 0;
}
.cross-list li::before { content: "✕"; position: absolute; left: 0; color: var(--danger-600); font-weight: 800; }
.cross-list--grid {
  gap: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

/* Founder card */
.founder-card {
  background: var(--surface-card);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
  text-align: center;
  width: 100%;
  max-width: 320px;
}
.founder-avatar {
  width: 72px; height: 72px;
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--navy-800);
  color: #FFF;
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: 0;
}
.founder-name { font-size: var(--text-lg); font-weight: 700; color: var(--text-heading); margin-bottom: var(--space-1); }
.founder-role { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-5); }
.founder-creds { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); text-align: left; }
.founder-creds li {
  font-size: 0.875rem;
  color: var(--text-body);
  padding: var(--space-2) var(--space-3);
  background: var(--neutral-50);
  border-radius: var(--radius-md);
  margin: 0;
}

/* Comparison — "choose us when / look elsewhere when" */
.vs-stack { display: grid; gap: var(--space-6); }
.vs-card {
  background: var(--surface-card);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}
.vs-card > h2 { font-size: var(--text-xl); letter-spacing: var(--tracking-title); margin-bottom: var(--space-6); }
.vs-split { display: grid; gap: var(--space-6); }
.vs-for, .vs-against { padding-left: var(--space-5); border-left: 3px solid var(--neutral-200); }
.vs-for { border-left-color: var(--success-600); }
.vs-against { border-left-color: var(--warning-600); }
.vs-split h3 { font-size: var(--text-md); margin-bottom: var(--space-2); }
.vs-split p { color: var(--text-secondary); font-size: 0.9375rem; }

@media (min-width: 640px) {
  .vs-split { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .cross-list--grid { grid-template-columns: 1fr 1fr; column-gap: var(--space-8); }
}
@media (max-width: 639px) {
  .vs-card { padding: var(--space-5); }
  .founder-card { padding: var(--space-6); }
}

/* Consent checkbox — the label is the hit target alongside the box */
.form-consent { display: flex; align-items: flex-start; gap: var(--space-3); }
.form-consent input[type="checkbox"] {
  flex: none;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--purple-500);
}
.form-consent label { font-size: 0.875rem; color: var(--text-secondary); font-weight: 400; }
.hint-inline { font-weight: 400; color: var(--text-secondary); }

/* Card headings take card-sized type whatever their level. Heading level is a
   document-structure decision (a card can legitimately be an h2 section); its
   size is a layout decision, and the two shouldn't be forced to agree. */
.card h2,
.vs-card h2,
.split-panel .card h2 {
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-title);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.card h2.kicker {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  margin-bottom: var(--space-3);
}