/* ════════════════════════════════════════════════════════════════════════════════
   TRELLIS MTSS — Consolidated Application Stylesheet
   ════════════════════════════════════════════════════════════════════════════════
   Compiled from 13 static HTML source files into a single Rails-ready stylesheet.

   STRUCTURE:
   1. Design tokens (:root) — merged from all pages
   2. Reset + base styles
   3. Typography system
   4. Layout utilities
   5. Buttons
   6. Navigation
   7. Scroll reveal animations
   8. Home page components (hero, sections, pricing, etc.)
   9. Page-specific sections (product, pricing, why-trellis, etc.)
   10. Shared CTA + Footer
   11. Shared responsive rules
   ════════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════════
   BASE STYLES — from index.html (home page)
   Includes: design tokens, reset, typography, layout, buttons, navigation,
   scroll reveal, hero, all home-page sections, CTA, footer, responsive
   ════════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   BRAND DESIGN TOKENS — v2.0 (2026 redesign)
═══════════════════════════════════════════ */
:root {
  /* Primary brand colors */
  --brand:         #37c9d1; /* primary teal */
  --brand-blue:    #3aa4f2; /* blue accent */
  --brand-yellow:  #f5df64; /* yellow accent */
  --brand-mint:    #ebfafa; /* light mint background */

  /* Keep legacy aliases pointing to new values */
  --trellis:       #37c9d1;
  --trellis-light: #ebfafa;
  --trellis-dark:  #2ba8b0;
  --navy:          #21190e;
  --navy-dark:     #21190e;
  --teal:          #37c9d1;
  --warm-white:    #ffffff;

  /* Text scale */
  --text-primary:  #21190e;
  --text-muted:    #908c86;
  --text-light:    #c3c3c3;

  /* Neutrals */
  --n100: #f0efe9;
  --n200: #dddbd5;
  --n400: #908c86;
  --n600: #575750;
  --n800: #21190e;

  /* Assessment scale — 5-point system */
  --blue-level:   #4A90E2; /* Exceeds */
  --green-level:  #5BA02E; /* Meets */
  --yellow-level: #D4920A; /* Approaching */
  --orange-level: #D4600A; /* Below */
  --red-level:    #C8102E; /* Concern */

  /* Typography */
  --font-display: 'Source Serif 4', Georgia, serif;
  --font-body:    'TT Commons Pro', 'DM Sans', system-ui, sans-serif;
  --font-mono:    'Degular Mono', 'DM Mono', monospace;

  /* Gradients */
  --gradient-btn: linear-gradient(201.304deg, #3aa4f2 0%, #37c9cd 80.728%);
  --gradient-cta: linear-gradient(216.797deg, #8bd068 0%, #60cfa0 44.019%, #37c9d1 99.513%);
  --gradient-line: linear-gradient(90deg, transparent, #f5df64 20%, #37c9d1 50%, #3aa4f2 80%, transparent);

  /* Spacing scale (8px base) */
  --sp1: 8px; --sp2: 16px; --sp3: 24px; --sp4: 32px;
  --sp6: 48px; --sp8: 64px; --sp10: 80px; --sp12: 96px;

  /* Border radius */
  --r4: 4px; --r8: 8px; --r12: 12px; --r16: 16px; --r20: 20px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(33,25,14,.06);
  --shadow-md: 0 8px 32px rgba(33,25,14,.10);
  --shadow-lg: 0 24px 64px rgba(33,25,14,.15);
  --shadow-teal: 0 8px 32px rgba(55,201,209,.25);
  --shadow-green: 0 8px 32px rgba(55,201,209,.25);
}

/* ═══════════════════════════════════════════
   RESET + BASE
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: #ffffff;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font-body); }

/* ═══════════════════════════════════════════
   TYPOGRAPHY SYSTEM
═══════════════════════════════════════════ */
.display-xl {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 80px);
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-weight: 400;
}
.display-lg {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 60px);
  letter-spacing: -0.025em;
  line-height: 1.0;
  font-weight: 400;
}
.display-md {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-weight: 400;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow-light {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.body-lg { font-size: 20px; line-height: 1.6; font-weight: 500; }
.body-md { font-size: 16px; line-height: 1.6; font-weight: 500; }
.body-sm { font-size: 14px; line-height: 1.6; font-weight: 500; }
.mono-sm { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; }

/* ═══════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════ */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp4); }
.container-narrow { max-width: 800px; margin: 0 auto; padding: 0 var(--sp4); }
.section { padding: var(--sp12) 0; }
.section-tight { padding: var(--sp8) 0; }

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--r12);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.18s ease;
  white-space: nowrap;
  line-height: 1;
}
/* Filled gradient — primary action */
.btn-primary {
  background: var(--gradient-btn);
  color: white;
}
.btn-primary:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}
/* Outline with gradient text */
.btn-outline-gradient {
  background: transparent;
  color: var(--brand-blue);
  border: 2px solid var(--brand-blue);
}
.btn-outline-gradient:hover {
  background: rgba(58,164,242,.06);
}
/* Legacy secondary */
.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--n200);
}
.btn-secondary:hover {
  border-color: var(--brand);
  color: var(--brand);
}
/* CTA green-to-teal gradient */
.btn-gradient-cta {
  background: var(--gradient-cta);
  color: white;
}
.btn-gradient-cta:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.btn-ghost-white {
  background: rgba(255,255,255,.1);
  color: white;
  border: 1.5px solid rgba(255,255,255,.25);
}
.btn-ghost-white:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.4);
}
.btn-lg { padding: 16px 32px; font-size: 18px; }
.btn-sm { padding: 9px 18px; font-size: 14px; }

/* ═══════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: white;
  border-bottom: 1px solid rgba(33,25,14,.06);
  transition: box-shadow 0.2s;
}
.nav.scrolled {
  box-shadow: 0 4px 24px rgba(33,25,14,.08);
}
.nav-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}
.nav-logo-mark {
  flex-shrink: 0;
  display: block;
}
.nav-logo-wordmark {
  height: 25px;
  width: auto;
  aspect-ratio: 81.999 / 25.2015;
  display: block;
}
/* Nav links with dropdowns */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.nav-item {
  position: relative;
}
.nav-item > a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: var(--r8);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.12s;
}
.nav-item > a:hover { background: rgba(33,25,14,.04); }
.nav-item > a.active { color: var(--brand); }
.nav-chevron {
  display: inline-block;
  flex-shrink: 0;
  transition: transform 0.15s;
  vertical-align: middle;
  margin-left: 1px;
}
.nav-item:hover .nav-chevron { transform: rotate(-180deg); }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: -16px;
  background: white;
  border: 1px solid rgba(33,25,14,.08);
  border-radius: var(--r12);
  padding: 8px;
  min-width: 200px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  pointer-events: none;
}
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-dropdown a {
  display: block;
  padding: 10px 16px;
  border-radius: var(--r8);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.1s;
  white-space: nowrap;
}
.nav-dropdown a:hover { background: rgba(33,25,14,.04); }
/* CTA area */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.nav-login {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  padding: 8px 4px;
  transition: color 0.12s;
}
.nav-login:hover { color: var(--brand); }
/* Mobile */
.nav-mobile-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  color: var(--text-primary);
  cursor: pointer;
}
/* Mobile open state */
@media (max-width: 960px) {
  .nav.open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: absolute;
    top: 72px;
    left: 0; right: 0;
    background: white;
    border-bottom: 1px solid rgba(33,25,14,.08);
    padding: 16px 24px 24px;
    box-shadow: var(--shadow-md);
  }
  .nav.open .nav-item > a { font-size: 16px; width: 100%; }
  .nav.open .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 0 0 8px 16px;
    pointer-events: auto;
  }
  .nav.open .nav-cta { display: none; }
}

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero {
  padding-top: 68px; /* nav height */
  background: var(--navy-dark);
  color: white;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* Background grid */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* Radial glow */
.hero::after {
  content: '';
  position: absolute;
  bottom: -200px; right: -100px;
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(45,122,95,.18) 0%, transparent 65%);
  pointer-events: none;
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp10) var(--sp4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp10);
  align-items: center;
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 99px;
  background: rgba(80,197,183,.1);
  border: 1px solid rgba(80,197,183,.25);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 28px;
}
.hero-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(44px, 5.5vw, 72px);
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: white;
  margin-bottom: 28px;
}
.hero-headline em { color: var(--teal); font-style: italic; }

.hero-sub {
  font-size: 18px;
  color: rgba(255,255,255,.6);
  line-height: 1.75;
  font-weight: 300;
  max-width: 520px;
  margin-bottom: 40px;
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 52px;
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.hero-proof-item {
  text-align: center;
}
.hero-proof-num {
  font-family: var(--font-display);
  font-size: 28px;
  color: white;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 3px;
}
.hero-proof-label {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  font-weight: 500;
  line-height: 1.4;
}
.hero-proof-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.1);
}

/* ── Seating chart demo ── */
.seating-demo {
  background: white;
  border-radius: var(--r20);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.05);
}
.demo-chrome {
  background: var(--navy);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.demo-dots { display: flex; gap: 5px; }
.demo-dot { width: 9px; height: 9px; border-radius: 50%; }
.demo-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  letter-spacing: 0.04em;
}
.demo-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: rgba(255,255,255,.35);
  font-family: var(--font-mono);
}
.demo-status-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #2D9B6A;
}

.demo-body { padding: 20px; background: #FAFAF5; }

.demo-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.demo-class-name {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.demo-period { font-size: 11px; color: var(--n400); font-weight: 500; }

/* Assessment scale legend */
.demo-legend {
  display: flex;
  align-items: center;
  gap: 5px;
  background: white;
  border: 1px solid var(--n100);
  border-radius: 6px;
  padding: 5px 10px;
  margin-bottom: 14px;
}
.demo-legend-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--n400);
  margin-right: 4px;
}
.demo-lswatch {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  color: var(--n400);
}
.demo-lbox {
  width: 11px; height: 11px;
  border-radius: 3px;
  border: 1.5px solid;
}

/* Student desk grid */
.desk-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.desk {
  aspect-ratio: 1;
  border-radius: 7px;
  border: 1.5px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: transform 0.1s ease-out, box-shadow 0.1s;
  position: relative;
}
.desk:hover { transform: scale(1.08); box-shadow: var(--shadow-sm); }
.desk-ini { font-size: 8px; font-weight: 800; line-height: 1; }
.desk-dot { width: 5px; height: 5px; border-radius: 50%; }

/* Desk colors */
.d-blue   { background:#EEF4FD; border-color:#4A90E2; color:#1B5FA8; }
.d-blue   .desk-dot { background:#4A90E2; }
.d-green  { background:#EEF8E3; border-color:#5BA02E; color:#2F6B0A; }
.d-green  .desk-dot { background:#5BA02E; }
.d-yellow { background:#FEF9E7; border-color:#D4920A; color:#7A4800; }
.d-yellow .desk-dot { background:#D4920A; }
.d-orange { background:#FEF1E6; border-color:#D4600A; color:#7A2800; }
.d-orange .desk-dot { background:#D4600A; }
.d-red    { background:#FDE9E9; border-color:#C8102E; color:#880E1A; }
.d-red    .desk-dot { background:#C8102E; }
.d-empty  { background:#F4F4EF; border-color:#E0E0DA; color:#C0C0B8; }

/* Animated pulse on red/orange desks */
.desk.d-red   { animation: pulse-concern 2.5s ease-in-out infinite; }
.desk.d-orange { animation: pulse-below 3s ease-in-out infinite; }
@keyframes pulse-concern {
  0%,100% { box-shadow: 0 0 0 0 rgba(200,16,46,.0); }
  50%      { box-shadow: 0 0 0 4px rgba(200,16,46,.18); }
}
@keyframes pulse-below {
  0%,100% { box-shadow: 0 0 0 0 rgba(212,96,10,.0); }
  50%      { box-shadow: 0 0 0 3px rgba(212,96,10,.15); }
}

/* Intervention panel */
.intervention-panel {
  background: white;
  border: 1.5px solid var(--n100);
  border-radius: var(--r12);
  padding: 16px;
  margin-top: 12px;
  box-shadow: var(--shadow-md);
  animation: slideUp 0.35s cubic-bezier(.16,1,.3,1);
}
@keyframes slideUp {
  from { opacity:0; transform: translateY(8px); }
  to   { opacity:1; transform: translateY(0); }
}
.panel-student-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.panel-avatar {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: #FDE9E9;
  border: 1.5px solid #C8102E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 900;
  color: #880E1A;
  flex-shrink: 0;
}
.panel-student-name { font-size: 13px; font-weight: 700; color: var(--navy); }
.panel-student-level { font-size: 11px; color: var(--red-level); font-weight: 500; }
.panel-close {
  margin-left: auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--n100);
  border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--n400);
  cursor: pointer;
  transition: all 0.12s;
}
.panel-close:hover { background: var(--n200); color: var(--n600); }

.panel-interventions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 12px;
}
.panel-int {
  padding: 8px 10px;
  border-radius: 7px;
  border: 1.5px solid var(--n100);
  font-size: 11px;
  font-weight: 600;
  color: var(--n600);
  cursor: pointer;
  background: #FAFAF5;
  transition: all 0.12s;
  text-align: left;
}
.panel-int:hover { background: var(--trellis-light); border-color: rgba(45,122,95,.3); color: var(--trellis); }
.panel-int.active { background: var(--trellis); border-color: var(--trellis); color: white; }

.panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--n100);
}
.panel-timer {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--trellis);
}
.panel-log-btn {
  background: var(--trellis);
  color: white;
  border: none;
  border-radius: 7px;
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.12s;
}
.panel-log-btn:hover { background: var(--trellis-dark); }

/* ─ Undo toast ─ */
.undo-toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--navy);
  color: white;
  border-radius: 99px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  margin-top: 10px;
  box-shadow: var(--shadow-md);
}
.undo-btn {
  color: var(--teal);
  font-weight: 700;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 12px;
  padding: 0;
}

/* ═══════════════════════════════════════════
   PROBLEM SECTION
═══════════════════════════════════════════ */
.problem-section {
  background: white;
  padding: var(--sp12) 0;
}
.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp12);
  align-items: center;
}
.problem-left {}
.problem-stats {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: var(--sp6);
}
.stat-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp3);
  padding: var(--sp3) var(--sp4);
  background: var(--warm-white);
  border-left: 4px solid;
  border-radius: 0 var(--r8) var(--r8) 0;
  transition: all 0.15s;
}
.stat-row:hover { transform: translateX(4px); }
.stat-row-num {
  font-family: var(--font-display);
  font-size: 42px;
  letter-spacing: -0.04em;
  line-height: 1;
  flex-shrink: 0;
  width: 100px;
}
.stat-row-text { font-size: 14px; color: var(--n600); line-height: 1.65; padding-top: 6px; }
.stat-row-text strong { color: var(--n800); font-weight: 700; display: block; font-size: 15px; margin-bottom: 2px; }

.problem-right {}
.problem-pullquote {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--navy);
  line-height: 1.35;
  letter-spacing: -0.02em;
  border-left: 4px solid var(--trellis);
  padding-left: var(--sp4);
  margin-bottom: var(--sp4);
}
.problem-pullquote em { color: var(--trellis); font-style: italic; }

/* ═══════════════════════════════════════════
   HOW IT WORKS
═══════════════════════════════════════════ */
.how-section {
  background: var(--navy-dark);
  padding: var(--sp12) 0;
  position: relative;
  overflow: hidden;
}
.how-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}
.how-header { text-align: center; margin-bottom: var(--sp10); position: relative; z-index: 2; }
.how-header .display-lg { color: white; }
.how-header .body-lg { color: rgba(255,255,255,.55); max-width: 560px; margin: 16px auto 0; }

.steps-flow {
  display: flex;
  gap: 0;
  position: relative;
  z-index: 2;
  align-items: flex-start;
}
.step {
  flex: 1;
  position: relative;
  padding: 0 var(--sp3);
}
.step::after {
  content: '→';
  position: absolute;
  right: -12px;
  top: 28px;
  font-size: 18px;
  color: rgba(255,255,255,.2);
  z-index: 3;
}
.step:last-child::after { display: none; }

.step-num {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255,255,255,.4);
  margin-bottom: var(--sp2);
}
.step-title {
  font-size: 15px;
  font-weight: 700;
  color: white;
  margin-bottom: 6px;
}
.step-desc {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  line-height: 1.65;
}
.step-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.time-callout {
  text-align: center;
  margin-top: var(--sp8);
  padding: var(--sp6);
  background: rgba(45,122,95,.15);
  border-radius: var(--r16);
  border: 1px solid rgba(45,122,95,.25);
  position: relative; z-index: 2;
}
.time-callout-num {
  font-family: var(--font-display);
  font-size: 72px;
  color: var(--teal);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 6px;
}
.time-callout-label {
  font-size: 18px;
  color: rgba(255,255,255,.7);
  font-weight: 300;
}
.time-callout-sub {
  font-size: 13px;
  color: rgba(255,255,255,.35);
  margin-top: 8px;
}

/* ═══════════════════════════════════════════
   BENEFITS
═══════════════════════════════════════════ */
.benefits-section {
  background: var(--warm-white);
  padding: var(--sp12) 0;
}
.benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp3);
  margin-top: var(--sp8);
}
.benefit-card {
  background: white;
  border-radius: var(--r20);
  padding: var(--sp6);
  border: 1.5px solid var(--n100);
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.benefit-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.benefit-card.green::before  { background: var(--trellis); }
.benefit-card.navy::before   { background: var(--navy); }
.benefit-card.teal::before   { background: var(--teal); }
.benefit-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.benefit-icon {
  width: 52px; height: 52px;
  border-radius: var(--r12);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: var(--sp3);
}
.benefit-icon.green { background: var(--trellis-light); }
.benefit-icon.navy  { background: rgba(26,58,82,.08); }
.benefit-icon.teal  { background: rgba(80,197,183,.1); }
.benefit-title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  line-height: 1.15;
}
.benefit-body {
  font-size: 14px;
  color: var(--n600);
  line-height: 1.7;
  margin-bottom: var(--sp3);
}
.benefit-stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.benefit-stat-num {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: -0.03em;
  line-height: 1;
}
.benefit-stat-label { font-size: 12px; color: var(--n400); }

/* ═══════════════════════════════════════════
   RESEARCH SECTION
═══════════════════════════════════════════ */
.research-section {
  background: white;
  padding: var(--sp12) 0;
  border-top: 1px solid var(--n100);
}
.research-header {
  text-align: center;
  margin-bottom: var(--sp10);
}
.research-header .display-md { color: var(--navy); }
.research-convergence {
  font-size: 14px;
  color: var(--n400);
  max-width: 560px;
  margin: 12px auto 0;
  font-style: italic;
}
.research-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp4);
  position: relative;
}
.research-grid::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--trellis);
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
}
.research-grid::after {
  content: 'TRELLIS';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: white;
  z-index: 6;
}

.researcher-card {
  background: var(--warm-white);
  border-radius: var(--r16);
  border: 1.5px solid var(--n100);
  padding: var(--sp6);
  transition: all 0.2s;
}
.researcher-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.researcher-num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--trellis);
  letter-spacing: 0.08em;
  margin-bottom: var(--sp2);
}
.researcher-name {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.researcher-institution {
  font-size: 11px;
  color: var(--n400);
  font-weight: 500;
  margin-bottom: var(--sp3);
}
.researcher-finding {
  background: var(--trellis-light);
  border-left: 3px solid var(--trellis);
  padding: var(--sp2) var(--sp3);
  border-radius: 0 var(--r8) var(--r8) 0;
  margin-bottom: var(--sp3);
}
.researcher-finding-num {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--trellis);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 3px;
}
.researcher-finding-label {
  font-size: 11px;
  color: var(--trellis-dark);
  font-weight: 600;
  line-height: 1.4;
}
.researcher-quote {
  font-size: 13px;
  color: var(--n600);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: var(--sp3);
}
.researcher-trellis {
  font-size: 12px;
  font-weight: 600;
  color: var(--trellis);
  padding-top: var(--sp2);
  border-top: 1px solid var(--n100);
}

/* ═══════════════════════════════════════════
   TESTIMONIAL
═══════════════════════════════════════════ */
.testimonial-section {
  background: var(--trellis);
  padding: var(--sp12) 0;
  position: relative;
  overflow: hidden;
}
.testimonial-section::before {
  content: '"';
  font-family: var(--font-display);
  font-size: 400px;
  color: rgba(255,255,255,.06);
  position: absolute;
  top: -80px; left: 40px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.testimonial-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--sp4);
  position: relative; z-index: 2;
  text-align: center;
}
.testimonial-quote {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 34px);
  color: white;
  line-height: 1.4;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp6);
}
.testimonial-attr {
  font-size: 14px;
  color: rgba(255,255,255,.65);
  font-weight: 500;
}
.testimonial-attr strong { color: white; }

/* ═══════════════════════════════════════════
   PRICING
═══════════════════════════════════════════ */
.pricing-section {
  background: var(--warm-white);
  padding: var(--sp12) 0;
}
.pricing-header { text-align: center; margin-bottom: var(--sp10); }
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp4);
  align-items: start;
}
.pricing-card {
  background: white;
  border-radius: var(--r20);
  border: 1.5px solid var(--n100);
  overflow: hidden;
  transition: all 0.2s;
}
.pricing-card:hover { box-shadow: var(--shadow-md); }
.pricing-card.featured {
  border-color: var(--trellis);
  box-shadow: var(--shadow-green), var(--shadow-md);
  transform: scale(1.02);
}
.pricing-card-header {
  padding: var(--sp6) var(--sp6) var(--sp4);
  border-bottom: 1px solid var(--n100);
}
.pricing-card.featured .pricing-card-header {
  background: var(--trellis);
}
.pricing-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--teal);
  color: var(--navy-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp2);
}
.pricing-tier {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--navy);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.pricing-card.featured .pricing-tier { color: white; }
.pricing-for { font-size: 13px; color: var(--n400); }
.pricing-card.featured .pricing-for { color: rgba(255,255,255,.65); }
.pricing-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: var(--sp3);
}
.pricing-num {
  font-family: var(--font-display);
  font-size: 42px;
  color: var(--navy);
  letter-spacing: -0.04em;
  line-height: 1;
}
.pricing-card.featured .pricing-num { color: white; }
.pricing-per { font-size: 14px; color: var(--n400); }
.pricing-card.featured .pricing-per { color: rgba(255,255,255,.6); }
.pricing-body { padding: var(--sp4) var(--sp6) var(--sp6); }
.pricing-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--sp6); }
.pricing-feature {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--n600);
  line-height: 1.5;
}
.pricing-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 1px;
}
.pricing-check.yes { background: var(--trellis-light); color: var(--trellis); }
.pricing-check.no  { background: var(--n100); color: var(--n400); }
.pricing-roi {
  background: var(--trellis-light);
  border-radius: var(--r8);
  padding: var(--sp2) var(--sp3);
  font-size: 12px;
  color: var(--trellis-dark);
  font-weight: 600;
  margin-top: var(--sp4);
  text-align: center;
}

/* ═══════════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════════ */
.cta-section {
  background: var(--navy-dark);
  padding: var(--sp12) 0;
  text-align: center;
  position: relative; overflow: hidden;
}
.cta-section::after {
  content: '';
  position: absolute;
  bottom: -200px; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45,122,95,.2) 0%, transparent 65%);
  pointer-events: none;
}
.cta-inner { position: relative; z-index: 2; }
.cta-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: var(--sp8);
  max-width: 900px;
  margin: var(--sp10) auto 0;
  align-items: start;
}
.cta-option-divider { background: rgba(255,255,255,.08); }
.cta-option-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-bottom: var(--sp3);
}
.cta-option-title {
  font-family: var(--font-display);
  font-size: 26px;
  color: white;
  margin-bottom: var(--sp2);
  letter-spacing: -0.02em;
}
.cta-option-desc {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  line-height: 1.7;
  margin-bottom: var(--sp4);
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.footer {
  background: white;
  border-top: 0.5px solid var(--brand-yellow);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 64px 56px 48px;
  gap: 56px;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 262px;
  flex-shrink: 0;
}
.footer-brand-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.footer-brand-mark {
  flex-shrink: 0;
}
.footer-brand-wordmark {
  height: 38px;
  width: auto;
  aspect-ratio: 126.726 / 38.9478;
  display: block;
}
.footer-nav {
  display: flex;
  gap: 56px;
  padding: 32px 0;
  flex: 1;
}
.footer-col {}
.footer-col-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-links a {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.12s;
}
.footer-links a:hover { color: var(--brand); }
/* Bottom bar */
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 56px 24px;
}
.footer-divider {
  width: 100%;
  height: 1px;
  background: var(--gradient-line);
  margin-bottom: 4px;
}
.footer-copyright {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}
.footer-copyright a { color: var(--text-muted); text-decoration: none; transition: color 0.12s; }
.footer-copyright a:hover { color: var(--brand); }
/* Legacy aliases for old footer partial classes */
.footer-brand-desc { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.footer-bottom-left { font-size: 13px; color: var(--text-muted); }
.footer-bottom-right { display: flex; gap: var(--sp3); }
.footer-bottom-right a { font-size: 13px; color: var(--text-muted); transition: color 0.12s; }
.footer-bottom-right a:hover { color: var(--brand); }

/* ═══════════════════════════════════════════
   ANNOUNCEMENT BAR
═══════════════════════════════════════════ */
.announcement-bar {
  background: var(--trellis);
  padding: 10px var(--sp4);
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.9);
}
.announcement-bar a {
  color: white;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ═══════════════════════════════════════════
   ASSESSMENT SCALE VISUAL
═══════════════════════════════════════════ */
.scale-strip {
  display: flex;
  border-radius: var(--r8);
  overflow: hidden;
  height: 52px;
  margin-top: var(--sp4);
}
.scale-seg {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.scale-seg-label { font-size: 10px; font-weight: 700; color: white; letter-spacing: 0.04em; }
.scale-seg-name  { font-size: 8px; font-weight: 500; color: rgba(255,255,255,.7); }

/* ═══════════════════════════════════════════
   UTILITIES / HELPERS
═══════════════════════════════════════════ */
.text-center { text-align: center; }
.text-white  { color: white; }
.text-trellis { color: var(--trellis); }
.text-teal   { color: var(--teal); }
.text-navy   { color: var(--navy); }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.italic { font-style: italic; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ═══════════════════════════════════════════
   RESPONSIVE — simplified mobile
═══════════════════════════════════════════ */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .seating-demo { display: none; }
  .problem-grid { grid-template-columns: 1fr; gap: var(--sp8); }
  .steps-flow { flex-direction: column; gap: var(--sp4); }
  .step::after { display: none; }
  .benefits-grid { grid-template-columns: 1fr; }
  .research-grid { grid-template-columns: 1fr; }
  .research-grid::before, .research-grid::after { display: none; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card.featured { transform: scale(1); }
  .cta-grid { grid-template-columns: 1fr; }
  .cta-option-divider { display: none; }
  .footer-inner { flex-direction: column; padding: 40px 24px 32px; gap: 32px; }
  .footer-brand { width: 100%; align-items: flex-start; }
  .footer-nav { flex-wrap: wrap; gap: 32px; padding: 0; }
  .footer-bottom { padding: 0 24px 24px; }
  .nav-links { display: none; }
  .nav-mobile-toggle { display: flex; }
}


/* ════════════════════════════════════════════════════════════════════════════════
   ADDITIONAL DESIGN TOKENS — from secondary pages
   ════════════════════════════════════════════════════════════════════════════════ */
:root {
  /* Extended color system — product + features pages */
  --cr: #E53E3E; --crl: #FFF5F5; --crb: #FC8181;
  --co: #DD6B20; --col: #FFFAF0; --cob: #F6AD55;
  --cy: #C8960A; --cyl: #FFFFF0; --cyb: #ECC94B;
  --cg: #2D7A5F; --cgl: #F0FFF4; --cgb: #68D391;
  --cb: #2B6CB0; --cbl: #EBF8FF; --cbb: #63B3ED;

  /* Equity selector accent */
  --shadow-teal: 0 8px 32px rgba(80,197,183,.3);

  /* Zhou page accent */
  --zhou-bg: #0d2e1e;
}


/* ════════════════════════════════════════════════════════════════════════════════
   PRODUCT PAGE — product.html
   ════════════════════════════════════════════════════════════════════════════════ */

/* HERO */
.hero{padding-top:68px;background:var(--navy-dark);overflow:hidden;position:relative}
.hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-80px;left:50%;transform:translateX(-50%);width:900px;height:400px;background:radial-gradient(ellipse at 50% 100%,rgba(45,122,95,.28) 0%,transparent 70%);pointer-events:none}
.hero-inner{max-width:1100px;margin:0 auto;padding:var(--sp10) var(--sp4) var(--sp12);text-align:center;position:relative;z-index:2}
.hero-eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:var(--sp3)}
.hero-headline{font-family:var(--font-display);font-size:clamp(40px,5.5vw,68px);letter-spacing:-.04em;line-height:.92;color:white;margin-bottom:var(--sp4)}
.hero-headline em{color:var(--teal);font-style:italic}
.hero-sub{font-size:clamp(16px,1.6vw,19px);color:rgba(255,255,255,.75);font-weight:300;line-height:1.75;max-width:640px;margin:0 auto var(--sp6)}
.hero-ctas{display:flex;align-items:center;justify-content:center;gap:var(--sp2);flex-wrap:wrap;margin-bottom:var(--sp8)}
.hero-pills{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--sp2)}
.hero-pill{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:40px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:13px;color:rgba(255,255,255,.72)}
.hero-pill-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* FEATURE SECTIONS */
.feature-section{padding:var(--sp12) 0}
.feature-section.alt{background:white}
.feature-section.dark-bg{background:var(--navy-dark)}
.feature-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp10);align-items:center}
.feature-row.flip{direction:rtl}.feature-row.flip>*{direction:ltr}
.feature-row.wide-mockup{grid-template-columns:5fr 7fr}
.feature-row.wide-copy{grid-template-columns:7fr 5fr}

.feature-step{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--trellis);margin-bottom:var(--sp2);font-family:var(--font-mono)}
.feature-step.light{color:var(--teal)}
.feature-step-num{width:22px;height:22px;border-radius:50%;background:var(--trellis);color:white;font-size:10px;display:inline-flex;align-items:center;justify-content:center}
.feature-headline{font-family:var(--font-display);font-size:clamp(24px,2.8vw,38px);letter-spacing:-.03em;line-height:1.05;color:var(--navy);margin-bottom:var(--sp3)}
.feature-headline em{color:var(--trellis);font-style:italic}
.feature-headline.light{color:white}.feature-headline.light em{color:var(--teal)}
.feature-body{font-size:clamp(14px,1.4vw,16px);color:var(--n600);font-weight:300;line-height:1.85;margin-bottom:var(--sp4)}
.feature-body.light{color:rgba(255,255,255,.75)}
.feature-bullets{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:var(--sp3)}
.feature-bullet{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--n600);line-height:1.5}
.feature-bullet.light{color:rgba(255,255,255,.75)}
.feature-bullet-icon{width:18px;height:18px;border-radius:50%;background:var(--trellis-light);color:var(--trellis);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;margin-top:1px}
.feature-bullet.light .feature-bullet-icon{background:rgba(45,122,95,.35);color:var(--teal)}
.feature-note{font-size:13px;color:var(--n400);font-style:italic;line-height:1.6}
.feature-note.light{color:rgba(255,255,255,.5)}

/* MOCKUP CHROME */
.mockup-chrome{background:white;border-radius:var(--r20);box-shadow:0 32px 80px rgba(15,34,51,.22),0 0 0 1px rgba(15,34,51,.07);overflow:hidden}
.mockup-chrome.gray{background:#f0f2f5}
.titlebar{height:36px;background:rgba(15,34,51,.04);border-bottom:1px solid rgba(15,34,51,.06);display:flex;align-items:center;padding:0 14px;gap:8px}
.titlebar-dot{width:10px;height:10px;border-radius:50%}
.td-red{background:#FF5F57}.td-yellow{background:#FFBD2E}.td-green{background:#28CA41}

/* HOME MOCKUP */
.hm-top{background:var(--navy-dark);padding:14px}
.hm-greeting{font-size:11px;color:rgba(255,255,255,.6);font-family:var(--font-mono)}
.hm-name{font-family:var(--font-display);font-size:20px;color:white;letter-spacing:-.02em;margin-top:1px}
.hm-snapshot-row{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp2)}
.hm-snapshot-label{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45);font-family:var(--font-mono)}
.hm-toggle{display:flex;gap:3px}
.hm-tbtn{padding:3px 8px;border-radius:5px;font-size:9px;font-weight:700;font-family:var(--font-mono);cursor:pointer;border:none}
.hm-tbtn.on{background:var(--trellis);color:white}
.hm-tbtn.off{background:rgba(255,255,255,.08);color:rgba(255,255,255,.55)}
.hm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.hm-stat{background:rgba(255,255,255,.07);border-radius:7px;padding:8px;text-align:center}
.hm-stat-num{font-family:var(--font-display);font-size:20px;letter-spacing:-.03em;line-height:1}
.hm-stat-lbl{font-size:8px;color:rgba(255,255,255,.5);font-family:var(--font-mono);margin-top:2px}
.hm-gc{display:flex;align-items:center;gap:5px;padding:6px 14px;font-size:10px;color:var(--n400)}
.hm-gc-icon{width:14px;height:14px;background:#4285F4;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:8px;color:white;font-weight:700}
.hm-courses{display:flex;flex-direction:column;gap:7px;padding:0 12px 12px}
.hm-course{background:white;border-radius:var(--r12);padding:11px 13px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow-sm);border:1px solid var(--n100);cursor:pointer}
.hm-course-period{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--n400);font-family:var(--font-mono)}
.hm-course-name{font-size:13px;font-weight:600;color:var(--navy);margin-top:1px}
.hm-badge{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;font-family:var(--font-mono)}
.hm-badge.g{background:var(--cgl);color:var(--cg)}.hm-badge.y{background:var(--cyl);color:var(--cy)}.hm-badge.o{background:var(--col);color:var(--co)}
.hm-arrow{color:var(--n400)}

/* SEATING CHART MOCKUP */
.cm-toolbar{background:var(--navy);padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.cm-menu{width:28px;height:28px;background:rgba(255,255,255,.08);border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.cm-title-txt{font-size:11px;font-weight:600;color:white;font-family:var(--font-mono)}
.cm-view-tabs{display:flex;gap:3px}
.cm-tab{padding:4px 9px;border-radius:5px;font-size:10px;font-weight:600;cursor:pointer;border:none;font-family:var(--font-body)}
.cm-tab.on{background:var(--trellis);color:white}.cm-tab.off{background:rgba(255,255,255,.08);color:rgba(255,255,255,.55)}
.cm-icons{display:flex;gap:5px}
.cm-icon{width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;color:rgba(255,255,255,.72)}
.cm-icon.equity{background:rgba(80,197,183,.2);color:var(--teal)}
.cm-grid{padding:10px;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;background:#f0f2f5}
.seat{aspect-ratio:1;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:8.5px;font-weight:600;cursor:pointer;transition:transform .12s;padding:3px;text-align:center}
.seat:hover{transform:scale(1.07)}
.seat.empty{background:white;border:1.5px dashed var(--n200)}
.seat.empty::after{content:'+';font-size:15px;color:var(--n200)}
.seat.sr{background:var(--crl);border:1.5px solid var(--crb)}
.seat.so{background:var(--col);border:1.5px solid var(--cob)}
.seat.sy{background:var(--cyl);border:1.5px solid var(--cyb)}
.seat.sg{background:var(--cgl);border:1.5px solid var(--cgb)}
.seat.sb{background:var(--cbl);border:1.5px solid var(--cbb)}
.seat-name{font-size:8px;font-weight:700;color:var(--navy);line-height:1.2}
.seat-count{font-size:7.5px;color:var(--n400);font-family:var(--font-mono)}

/* PARTICIPATION WINDOW */
.pw{background:white;border-radius:var(--r16);box-shadow:0 24px 60px rgba(15,34,51,.2),0 0 0 1px rgba(15,34,51,.06);overflow:hidden}
.pw-hdr{background:var(--navy);padding:12px 14px 0}
.pw-hdr-top{display:flex;align-items:flex-start;justify-content:space-between;padding-bottom:10px}
.pw-student-name{font-family:var(--font-display);font-size:17px;color:white;letter-spacing:-.02em;line-height:1}
.pw-student-email{font-size:10px;color:rgba(255,255,255,.58);font-family:var(--font-mono);margin-top:2px}
.pw-close{color:rgba(255,255,255,.4);font-size:16px;cursor:pointer}
.pw-tabs{display:flex}
.pw-tab{padding:8px 12px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border-bottom:2px solid transparent;color:rgba(255,255,255,.45)}
.pw-tab.on{color:var(--teal);border-bottom-color:var(--teal)}
.pw-body{padding:13px}
.pw-label{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);margin-bottom:6px;font-family:var(--font-mono)}
.pw-colors{display:flex;gap:5px;margin-bottom:3px}
.pw-color-btn{flex:1;height:34px;border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:800;font-family:var(--font-mono);border:2px solid transparent;transition:transform .1s}
.pw-color-btn:hover,.pw-color-btn.sel{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.18)}
.pw-color-btn.cr{background:var(--cr);color:white;border-color:var(--cr)}
.pw-color-btn.co{background:var(--co);color:white;border-color:var(--co)}
.pw-color-btn.cy{background:var(--cy);color:white;border-color:var(--cy)}
.pw-color-btn.cg.sel{background:var(--cg);color:white;border-color:var(--cg)}
.pw-color-btn.cg{background:var(--cg);color:white;border-color:var(--cg)}
.pw-color-btn.cb{background:var(--cb);color:white;border-color:var(--cb)}
.pw-bar-labels{display:flex;justify-content:space-between;margin-bottom:9px}
.pw-bar-lbl{font-size:8px;color:var(--n400);font-family:var(--font-mono)}
.pw-competencies{background:var(--cgl);border:1px solid var(--cgb);border-radius:7px;padding:8px 10px;margin-bottom:9px}
.pw-comp-lbl{font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cg);margin-bottom:4px}
.pw-comp{font-size:10px;color:var(--trellis-dark);display:flex;align-items:center;gap:4px;margin-bottom:2px}
.pw-comp::before{content:'✓';font-size:9px;color:var(--cg)}
.pw-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:9px}
.pw-mini{text-align:center;background:var(--warm-white);border-radius:7px;border:1px solid var(--n100);padding:5px}
.pw-mini-num{font-family:var(--font-display);font-size:17px;letter-spacing:-.03em;line-height:1}
.pw-mini-num.g{color:var(--cg)}.pw-mini-num.b{color:var(--cb)}.pw-mini-num.o{color:var(--co)}
.pw-mini-lbl{font-size:8px;color:var(--n400);font-family:var(--font-mono);margin-top:1px}
.pw-interventions{display:flex;flex-direction:column;gap:3px;margin-bottom:9px}
.pw-intv{display:flex;align-items:center;justify-content:space-between;padding:5px 7px;border-radius:5px;background:var(--warm-white);border:1px solid var(--n100);cursor:pointer}
.pw-intv:hover{background:var(--trellis-light)}
.pw-intv-name{font-size:11px;color:var(--navy);font-weight:500}
.pw-check{width:15px;height:15px;border-radius:3px;border:1.5px solid var(--n200)}
.pw-check.on{background:var(--trellis);border-color:var(--trellis);display:flex;align-items:center;justify-content:center;font-size:8px;color:white}
.pw-notes{width:100%;height:38px;border-radius:5px;border:1px solid var(--n100);background:var(--warm-white);padding:5px 7px;font-size:11px;color:var(--n400);font-family:var(--font-body);resize:none;margin-bottom:9px}
.pw-save-row{display:flex;justify-content:flex-end;border-top:1px solid var(--n100);padding-top:8px}
.pw-save{background:var(--trellis);color:white;border:none;padding:7px 16px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font-body)}

/* GROUP MOCKUP */
.gm-tb{background:var(--navy);padding:8px 12px;display:flex;align-items:center;justify-content:space-between}
.gm-tb-title{font-size:11px;font-weight:600;color:white;font-family:var(--font-mono)}
.gm-add-btn{background:var(--trellis);color:white;border:none;padding:4px 10px;border-radius:5px;font-size:10px;font-weight:700;cursor:pointer;font-family:var(--font-body)}
.gm-body{padding:10px;background:#f0f2f5;display:flex;flex-direction:column;gap:7px}
.gm-row{display:flex;gap:6px;align-items:center}
.gm-label{min-width:60px;height:34px;border-radius:7px;background:var(--navy);color:white;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;font-family:var(--font-mono);cursor:pointer;flex-shrink:0}
.gm-label:hover{background:var(--trellis)}
.gm-seats{display:flex;gap:5px}
.gm-seat{width:44px;height:34px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;text-align:center;line-height:1.2;cursor:grab;flex-shrink:0}
.gm-seat.sb{background:var(--cbl);border:1.5px solid var(--cbb);color:var(--cb)}
.gm-seat.sy{background:var(--cyl);border:1.5px solid var(--cyb);color:var(--cy)}
.gm-seat.so{background:var(--col);border:1.5px solid var(--cob);color:var(--co)}
.gm-seat.sr{background:var(--crl);border:1.5px solid var(--crb);color:var(--cr)}
.gm-seat.sg{background:var(--cgl);border:1.5px solid var(--cgb);color:var(--cg)}
.gm-plus{width:34px;height:34px;border-radius:7px;background:white;border:1.5px dashed var(--n200);display:flex;align-items:center;justify-content:center;color:var(--n300);font-size:15px;cursor:pointer;flex-shrink:0}

/* ADMIN MOCKUP */
.am-hdr{background:var(--navy-dark);padding:12px 14px;display:flex;align-items:center;justify-content:space-between}
.am-hdr-title{font-family:var(--font-display);font-size:16px;color:white;letter-spacing:-.02em}
.am-hdr-sub{font-size:9px;color:rgba(255,255,255,.55);font-family:var(--font-mono);margin-top:1px}
.am-badges{display:flex;gap:6px}
.am-badge{font-size:9px;font-weight:700;padding:3px 7px;border-radius:4px;font-family:var(--font-mono)}
.am-badge.live{background:rgba(80,197,183,.15);color:var(--teal);border:1px solid rgba(80,197,183,.3)}
.am-badge.dev{background:rgba(212,146,10,.1);color:#D4920A;border:1px solid rgba(212,146,10,.2)}
.am-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--n100)}
.am-stat{background:white;padding:11px;text-align:center}
.am-stat-num{font-family:var(--font-display);font-size:21px;letter-spacing:-.04em;line-height:1}
.am-stat-num.g{color:var(--trellis)}.am-stat-num.t{color:var(--teal)}.am-stat-num.n{color:var(--navy)}.am-stat-num.o{color:var(--co)}
.am-stat-lbl{font-size:8.5px;color:var(--n400);font-family:var(--font-mono);margin-top:2px}
.am-thead{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;padding:6px 12px;background:var(--warm-white);border-bottom:1px solid var(--n100)}
.am-th{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--n400);font-family:var(--font-mono)}
.am-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;padding:8px 12px;border-bottom:1px solid var(--n100);align-items:center}
.am-row:last-child{border-bottom:none}
.am-row-name{font-size:11px;font-weight:600;color:var(--navy)}
.am-row-sub{font-size:9px;color:var(--n400);font-family:var(--font-mono)}
.am-val{font-size:11px;font-family:var(--font-mono)}
.am-val.g{color:var(--trellis)}.am-val.o{color:var(--co)}
.am-bar-wrap{height:5px;background:var(--n100);border-radius:3px;overflow:hidden;max-width:56px}
.am-bar{height:100%;border-radius:3px}
.am-bar.high{background:var(--trellis);width:86%}.am-bar.med{background:var(--cy);width:58%}.am-bar.low{background:var(--co);width:33%}

/* SCALE SECTION */
.scale-section{background:white;border-top:1px solid var(--n100);border-bottom:1px solid var(--n100);padding:var(--sp10) 0}
.scale-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.scale-bar{display:flex;border-radius:var(--r16);overflow:hidden;box-shadow:var(--shadow-md);margin-top:var(--sp8)}
.scale-level{flex:1;padding:var(--sp4);transition:flex .2s;cursor:default}
.scale-level:hover{flex:1.3}
.scale-level.r{background:var(--cr)}.scale-level.o{background:var(--co)}
.scale-level.y{background:var(--cy)}.scale-level.g{background:var(--cg)}.scale-level.b{background:var(--cb)}
.scale-color-name{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:3px;font-family:var(--font-mono)}
.scale-level-name{font-family:var(--font-display);font-size:clamp(14px,1.6vw,19px);color:white;letter-spacing:-.02em;line-height:1.1;margin-bottom:5px}
.scale-comps{list-style:none;display:flex;flex-direction:column;gap:2px}
.scale-comp{font-size:10px;color:rgba(255,255,255,.78);line-height:1.4;display:flex;gap:4px}
.scale-comp::before{content:'·';flex-shrink:0}

/* SETUP SECTION */
.setup-section{background:var(--trellis-light);border-top:1px solid rgba(45,122,95,.12);border-bottom:1px solid rgba(45,122,95,.12);padding:var(--sp10) 0}
.setup-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.setup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp4);margin-top:var(--sp8)}
.setup-card{background:white;border-radius:var(--r16);padding:var(--sp4);border:1.5px solid rgba(45,122,95,.15);transition:box-shadow .2s}
.setup-card:hover{box-shadow:var(--shadow-md)}
.setup-card-icon{width:44px;height:44px;border-radius:var(--r12);background:var(--trellis);color:white;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:var(--sp2)}
.setup-card-title{font-family:var(--font-display);font-size:20px;letter-spacing:-.02em;color:var(--navy);margin-bottom:6px}
.setup-card-body{font-size:13px;color:var(--n600);line-height:1.65;font-weight:300}

/* CTA + FOOTER */

/* Responsive — PRODUCT PAGE */
@media(max-width:960px){
  .nav-links{display:none}.nav-mobile-toggle{display:flex}
  .feature-row,.feature-row.flip,.feature-row.wide-mockup,.feature-row.wide-copy{grid-template-columns:1fr;direction:ltr}
  .feature-row.flip>*{direction:ltr}
  .setup-grid{grid-template-columns:1fr}
  .scale-bar{flex-direction:column;border-radius:var(--r12)}
  .scale-level{flex:none}
  .am-stats{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp4)}
  .footer-grid>div:first-child{grid-column:1/-1}
}


/* ════════════════════════════════════════════════════════════════════════════════
   PRICING PAGE — pricing.html
   ════════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   PAGE HERO
═══════════════════════════════════════════ */
.pricing-hero {
  padding-top: 68px;
  background: var(--navy-dark);
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-bottom: var(--sp10);
}
.pricing-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.pricing-hero::after {
  content: '';
  position: absolute; bottom: -300px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(circle, rgba(45,122,95,.18) 0%, transparent 65%);
  pointer-events: none;
}
.pricing-hero-inner {
  position: relative; z-index: 2;
  max-width: 760px; margin: 0 auto;
  padding: var(--sp10) var(--sp4) 0;
}
.pricing-hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px; border-radius: 99px;
  background: rgba(80,197,183,.1); border: 1px solid rgba(80,197,183,.25);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--teal); margin-bottom: var(--sp3);
}
.pricing-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 64px);
  letter-spacing: -0.03em; line-height: 1;
  color: white; margin-bottom: var(--sp3);
}
.pricing-hero h1 em { color: var(--teal); font-style: italic; }
.pricing-hero-sub {
  font-size: 18px; color: rgba(255,255,255,.55);
  line-height: 1.7; font-weight: 300;
  max-width: 560px; margin: 0 auto var(--sp6);
}
.pricing-hero-toggle {
  display: inline-flex; align-items: center; gap: 0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 99px; padding: 4px;
  margin-bottom: var(--sp6);
}
.toggle-btn {
  padding: 8px 24px; border-radius: 99px; font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.5); background: none; border: none; cursor: pointer;
  transition: all 0.2s;
}
.toggle-btn.active { background: var(--trellis); color: white; box-shadow: var(--shadow-green); }

/* ═══════════════════════════════════════════
   PRICING GRID SECTION
═══════════════════════════════════════════ */
.pricing-section {
  background: var(--warm-white);
  padding: var(--sp10) 0 var(--sp12);
  position: relative;
}
.pricing-section::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 60px;
  background: var(--navy-dark);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp3);
  align-items: start;
  position: relative; z-index: 2;
}

/* ── Cards ── */
.pricing-card {
  background: white;
  border-radius: var(--r20);
  border: 1.5px solid var(--n100);
  overflow: hidden;
  transition: all 0.2s;
}
.pricing-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* Free card — muted/outlined style */
.pricing-card.free {
  border-color: var(--n200);
  background: white;
}
.pricing-card.free:hover { border-color: var(--trellis); }

/* Featured school card */
.pricing-card.featured {
  border-color: var(--trellis);
  box-shadow: var(--shadow-green), var(--shadow-md);
  transform: scale(1.02);
}
.pricing-card.featured:hover { transform: scale(1.02) translateY(-2px); }

/* ── Card header ── */
.pricing-card-header {
  padding: var(--sp4) var(--sp4) var(--sp3);
  border-bottom: 1px solid var(--n100);
}
.pricing-card.featured .pricing-card-header { background: var(--trellis); }
.pricing-card.featured .pricing-body { background: var(--trellis); }
.pricing-card.free .pricing-card-header { background: var(--n100); }

.pricing-badge {
  display: inline-block;
  padding: 3px 10px; border-radius: 99px;
  background: var(--teal); color: var(--navy-dark);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: var(--sp2);
}
.pricing-badge.free-badge {
  background: var(--n400); color: white;
}

.pricing-tier {
  font-family: var(--font-display);
  font-size: 20px; color: var(--navy);
  margin-bottom: 4px; letter-spacing: -0.01em;
}
.pricing-card.featured .pricing-tier { color: white; }
.pricing-card.free .pricing-tier { color: var(--n600); }

.pricing-for { font-size: 12px; color: var(--n400); line-height: 1.5; }
.pricing-card.featured .pricing-for { color: rgba(255,255,255,.65); }

.pricing-price-row {
  display: flex; align-items: baseline;
  gap: 4px; margin-top: var(--sp3);
}
.pricing-num {
  font-family: var(--font-display);
  font-size: 40px; color: var(--navy);
  letter-spacing: -0.04em; line-height: 1;
}
.pricing-card.featured .pricing-num { color: white; }
.pricing-card.free .pricing-num { font-size: 32px; color: var(--n600); }
.pricing-per { font-size: 13px; color: var(--n400); }
.pricing-card.featured .pricing-per { color: rgba(255,255,255,.6); }
.pricing-free-forever {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 12px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--trellis);
  background: var(--trellis-light);
  padding: 4px 10px; border-radius: 99px;
}

/* ── Card body ── */
.pricing-body { padding: var(--sp3) var(--sp4) var(--sp4); }

.pricing-features {
  list-style: none; display: flex; flex-direction: column;
  gap: 9px; margin-bottom: var(--sp4);
}
.pricing-feature {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13px; color: var(--n600); line-height: 1.5;
}
.pricing-check {
  width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900; flex-shrink: 0; margin-top: 1px;
}
.pricing-check.yes { background: var(--trellis-light); color: var(--trellis); }
.pricing-check.no  { background: var(--n100); color: var(--n400); }
.pricing-check.featured-yes { background: rgba(255,255,255,.15); color: white; }

.pricing-card.featured .pricing-feature { color: rgba(255,255,255,.85); }

/* Wall divider in free card */
.pricing-wall {
  margin: var(--sp2) 0 var(--sp3);
  padding: var(--sp2) var(--sp3);
  background: var(--n100);
  border-radius: var(--r8);
  font-size: 11px;
  font-weight: 600;
  color: var(--n400);
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pricing-wall span { display: block; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--n400); margin-top: 2px; }

.pricing-cta-btn {
  display: flex; justify-content: center;
  width: 100%; padding: 13px 20px;
  border-radius: var(--r8); font-size: 14px; font-weight: 600;
  border: none; cursor: pointer; transition: all 0.18s;
  text-align: center;
}
.pricing-cta-btn.btn-free {
  background: var(--warm-white); color: var(--trellis);
  border: 1.5px solid rgba(45,122,95,.3);
}
.pricing-cta-btn.btn-free:hover { background: var(--trellis-light); border-color: var(--trellis); }
.pricing-cta-btn.btn-ind {
  background: transparent; color: var(--navy);
  border: 1.5px solid var(--n200);
}
.pricing-cta-btn.btn-ind:hover { border-color: var(--trellis); color: var(--trellis); background: var(--trellis-light); }
.pricing-cta-btn.btn-school {
  background: white; color: var(--trellis);
  box-shadow: 0 2px 8px rgba(255,255,255,.2);
}
.pricing-cta-btn.btn-school:hover { background: var(--trellis-light); }
.pricing-cta-btn.btn-dist {
  background: transparent; color: var(--navy);
  border: 1.5px solid var(--n200);
}
.pricing-cta-btn.btn-dist:hover { border-color: var(--trellis); color: var(--trellis); background: var(--trellis-light); }

.pricing-roi {
  background: var(--trellis-light);
  border-radius: var(--r8);
  padding: var(--sp1) var(--sp2);
  font-size: 11px; color: var(--trellis-dark);
  font-weight: 600; margin-top: var(--sp2); text-align: center;
}
.pricing-roi.roi-featured {
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.8);
}

.pricing-subtext {
  font-size: 11px; color: var(--n400);
  text-align: center; margin-top: var(--sp2); line-height: 1.5;
}

/* ── Upgrade nudge on free card ── */
.upgrade-nudge {
  margin-top: var(--sp2);
  font-size: 11px; color: var(--n400); text-align: center; line-height: 1.5;
}
.upgrade-nudge a { color: var(--trellis); font-weight: 600; }
.upgrade-nudge a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════
   FOOTER NOTE
═══════════════════════════════════════════ */
.pricing-footnote {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp4); flex-wrap: wrap;
  margin-top: var(--sp6); padding-top: var(--sp4);
  border-top: 1px solid var(--n100);
}
.pricing-footnote-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--n400);
}
.pricing-footnote-icon {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--trellis-light); color: var(--trellis);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900; flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   HOW FREE GROWS — EXPLAINER
═══════════════════════════════════════════ */
.growth-section {
  background: white;
  padding: var(--sp12) 0;
  border-top: 1px solid var(--n100);
}
.growth-inner {
  max-width: 960px; margin: 0 auto; padding: 0 var(--sp4);
}
.growth-header { text-align: center; margin-bottom: var(--sp8); }
.growth-steps {
  display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr;
  gap: 0; align-items: center;
}
.growth-step {
  background: var(--warm-white); border-radius: var(--r16);
  border: 1.5px solid var(--n100); padding: var(--sp4);
  text-align: center;
}
.growth-step-num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--trellis-light); color: var(--trellis);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 18px;
  margin: 0 auto var(--sp2);
}
.growth-step h3 {
  font-family: var(--font-display); font-size: 18px;
  color: var(--navy); margin-bottom: 8px; letter-spacing: -0.01em;
}
.growth-step p { font-size: 13px; color: var(--n600); line-height: 1.6; }
.growth-arrow {
  text-align: center; color: var(--trellis); font-size: 22px;
}
.growth-step.highlighted {
  border-color: var(--trellis);
  background: var(--trellis-light);
  box-shadow: var(--shadow-green);
}
.growth-step.highlighted h3 { color: var(--trellis-dark); }

/* ═══════════════════════════════════════════
   COMPARISON TABLE
═══════════════════════════════════════════ */
.compare-section {
  background: var(--warm-white);
  padding: var(--sp12) 0;
}
.compare-header { text-align: center; margin-bottom: var(--sp8); }

.compare-table {
  width: 100%; border-collapse: collapse;
  font-size: 13.5px;
}
.compare-table th, .compare-table td {
  padding: 14px 16px; text-align: center;
  border-bottom: 1px solid var(--n100);
}
.compare-table th:first-child, .compare-table td:first-child {
  text-align: left; color: var(--n600); font-weight: 500;
}
.compare-table thead th {
  font-family: var(--font-display); font-size: 15px;
  color: var(--navy); letter-spacing: -0.01em;
  padding-bottom: 20px; border-bottom: 2px solid var(--n100);
}
.compare-table thead th.col-featured {
  color: var(--trellis); background: var(--trellis-light);
  border-radius: var(--r8) var(--r8) 0 0;
}
.compare-table tbody td.col-featured {
  background: var(--trellis-light);
}
.compare-table .row-group th {
  background: var(--n100); color: var(--n600);
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 700;
  padding: 10px 16px;
}
.check-yes { color: var(--trellis); font-size: 16px; font-weight: 900; }
.check-no  { color: var(--n300); font-size: 18px; }
.check-partial { font-size: 11px; color: var(--n600); font-weight: 600; }

/* ═══════════════════════════════════════════
   FAQ
═══════════════════════════════════════════ */
.faq-section {
  background: white;
  padding: var(--sp12) 0;
  border-top: 1px solid var(--n100);
}
.faq-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp6);
  max-width: 960px; margin: 0 auto;
}
.faq-item { padding: var(--sp3) 0; border-bottom: 1px solid var(--n100); }
.faq-item:last-child { border-bottom: none; }
.faq-q {
  font-family: var(--font-display); font-size: 17px;
  color: var(--navy); margin-bottom: 10px; letter-spacing: -0.01em;
}
.faq-a { font-size: 14px; color: var(--n600); line-height: 1.7; }

/* ═══════════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════════ */

/* Responsive — PRICING PAGE */
@media (max-width: 1100px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-card.featured { transform: scale(1); }
  .growth-steps { grid-template-columns: 1fr; gap: var(--sp2); }
  .growth-arrow { transform: rotate(90deg); }
  .compare-table { font-size: 12px; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .cta-grid { grid-template-columns: 1fr; }
  .cta-option-divider { display: none; }
  .nav-links { display: none; }
  .nav-mobile-toggle { display: block; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .compare-section { overflow-x: auto; }
}


/* ════════════════════════════════════════════════════════════════════════════════
   WHY TRELLIS — why-trellis.html
   ════════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════
   HERO — editorial / manifesto feel
   Dark with giant typographic treatment
════════════════════════════════════════════ */
.hero-why{
  padding-top:68px;
  background:var(--navy-dark);
  position:relative;overflow:hidden;
  min-height:90vh;
  display:flex;align-items:center;
}
/* Subtle grid texture */
.hero-why::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:48px 48px;pointer-events:none;
}
/* Green glow from bottom */
.hero-why::after{
  content:'';position:absolute;bottom:-100px;left:50%;
  transform:translateX(-50%);
  width:1000px;height:500px;
  background:radial-gradient(ellipse at 50% 100%,rgba(45,122,95,.22) 0%,transparent 70%);
  pointer-events:none;
}
.hero-why-inner{
  max-width:1200px;margin:0 auto;padding:var(--sp10) var(--sp4) var(--sp12);
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp10);align-items:center;
}

/* Left: the big statement */
.hero-why-left{}
.hero-why-eyebrow{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.35);margin-bottom:var(--sp3);
  display:flex;align-items:center;gap:8px;
}
.hero-why-eyebrow::before{
  content:'';display:block;width:24px;height:1px;background:rgba(255,255,255,.2);
}
.hero-why-headline{
  font-family:var(--font-display);
  font-size:clamp(40px,5.5vw,68px);
  letter-spacing:-.04em;line-height:.92;
  color:white;margin-bottom:var(--sp4);
}
.hero-why-headline em{color:var(--teal)}
.hero-why-sub{
  font-size:clamp(16px,1.6vw,19px);color:rgba(255,255,255,.5);
  font-weight:300;line-height:1.75;max-width:480px;
  margin-bottom:var(--sp6);
}
.hero-why-ctas{display:flex;align-items:center;gap:var(--sp2);flex-wrap:wrap}

/* Right: the three numbers */
.hero-why-right{display:flex;flex-direction:column;gap:0}
.hero-stat-card{
  padding:var(--sp4) var(--sp6);
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative;
}
.hero-stat-card:first-child{border-top:1px solid rgba(255,255,255,.06)}
.hero-stat-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:3px;background:transparent;transition:background .3s;
}
.hero-stat-card:hover::before{background:var(--teal)}
.hero-stat-num{
  font-family:var(--font-display);
  font-size:clamp(48px,6vw,72px);
  letter-spacing:-.05em;line-height:1;
  margin-bottom:4px;
}
.hero-stat-num.green{color:var(--teal)}
.hero-stat-num.red{color:#E8748A}
.hero-stat-num.amber{color:#F5C842}
.hero-stat-label{font-size:14px;color:rgba(255,255,255,.45);font-weight:300;line-height:1.5}
.hero-stat-source{
  font-size:10px;color:rgba(255,255,255,.2);font-family:var(--font-mono);
  margin-top:6px;letter-spacing:.04em;
}

/* ════════════════════════════════════════════
   PROBLEM NARRATIVE — editorial columns
   Argument built section by section
════════════════════════════════════════════ */
.problem-section{
  background:var(--warm-white);
  padding:var(--sp12) 0;
}
.problem-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}

/* Chapter intro */
.chapter-intro{
  display:grid;grid-template-columns:auto 1fr;gap:var(--sp6);align-items:start;
  margin-bottom:var(--sp10);
}
.chapter-num{
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  color:var(--trellis);letter-spacing:.1em;
  writing-mode:vertical-lr;text-orientation:mixed;
  transform:rotate(180deg);
  padding-top:4px;
  white-space:nowrap;
}
.chapter-content{}
.chapter-eyebrow{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--n400);margin-bottom:var(--sp2);
}
.chapter-headline{
  font-family:var(--font-display);
  font-size:clamp(28px,3.2vw,42px);
  letter-spacing:-.03em;line-height:1.05;
  color:var(--navy);
  margin-bottom:var(--sp3);
}
.chapter-headline em{color:var(--trellis);font-style:italic}
.chapter-body{
  font-size:clamp(15px,1.5vw,17px);
  color:var(--n600);font-weight:300;
  line-height:1.85;
  max-width:700px;
}
.chapter-body + .chapter-body{margin-top:var(--sp3)}

/* ── Pull quote ── */
.pull-quote{
  margin:var(--sp8) 0;
  padding:var(--sp6) var(--sp8);
  background:white;
  border-left:4px solid var(--teal);
  border-radius:0 var(--r16) var(--r16) 0;
  box-shadow:var(--shadow-sm);
  position:relative;
}
.pull-quote::before{
  content:'"';
  font-family:var(--font-display);font-size:120px;color:rgba(80,197,183,.1);
  position:absolute;top:-16px;left:24px;line-height:1;
  pointer-events:none;user-select:none;
}
.pull-quote-text{
  font-family:var(--font-display);
  font-size:clamp(20px,2.2vw,28px);
  letter-spacing:-.02em;line-height:1.35;
  color:var(--navy);font-style:italic;
  margin-bottom:var(--sp2);
  position:relative;z-index:1;
}
.pull-quote-text em{color:var(--trellis);font-style:normal}
.pull-quote-attr{
  font-size:12px;font-weight:600;color:var(--n400);
  letter-spacing:.06em;text-transform:uppercase;
  font-family:var(--font-mono);
}
.pull-quote-attr a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}

/* ── Why-it-fails grid ── */
.fail-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp3);
  margin:var(--sp8) 0;
}
.fail-card{
  background:white;border-radius:var(--r16);
  border:1.5px solid var(--n100);
  padding:var(--sp4);
  position:relative;overflow:hidden;
  transition:border-color .2s,box-shadow .2s;
}
.fail-card:hover{border-color:rgba(200,16,46,.2);box-shadow:0 8px 32px rgba(200,16,46,.06)}
.fail-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:rgba(200,16,46,.3);
}
.fail-card-num{
  font-family:var(--font-display);font-size:40px;letter-spacing:-.04em;
  color:rgba(200,16,46,.25);margin-bottom:var(--sp1);line-height:1;
}
.fail-card-title{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:6px}
.fail-card-body{font-size:13px;color:var(--n600);line-height:1.6;font-weight:300}
.fail-card-research{
  margin-top:var(--sp2);
  font-size:11px;font-family:var(--font-mono);color:var(--n400);
  padding-top:var(--sp2);border-top:1px solid var(--n100);
}

/* ── Divider ── */
.section-divider{
  height:1px;background:var(--n100);margin:var(--sp10) 0;
  position:relative;
}
.section-divider::before{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:8px;height:8px;border-radius:50%;background:var(--n200);
}

/* ════════════════════════════════════════════
   STATS BAND — three damning numbers
════════════════════════════════════════════ */
.stats-band{
  background:white;
  border-top:1px solid var(--n100);border-bottom:1px solid var(--n100);
  padding:var(--sp8) 0;
}
.stats-band-inner{
  max-width:1100px;margin:0 auto;padding:0 var(--sp4);
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
}
.stat-item{
  text-align:center;padding:var(--sp4) var(--sp6);
  border-right:1px solid var(--n100);
}
.stat-item:last-child{border-right:none}
.stat-big{
  font-family:var(--font-display);
  font-size:clamp(52px,7vw,80px);
  letter-spacing:-.05em;line-height:1;
  margin-bottom:8px;
}
.stat-big.red{color:#C8102E}
.stat-big.amber{color:var(--orange-level,#D4600A)}
.stat-big.teal{color:var(--teal)}
.stat-label{font-size:15px;font-weight:600;color:var(--navy);margin-bottom:4px}
.stat-sub{font-size:13px;color:var(--n600);line-height:1.55;font-weight:300}
.stat-citation{font-size:10px;font-family:var(--font-mono);color:var(--n400);margin-top:8px}

/* ════════════════════════════════════════════
   DRIVERS FRAMEWORK — the conceptual model
════════════════════════════════════════════ */
.drivers-section{
  background:var(--warm-white);
  padding:var(--sp12) 0;
}
.drivers-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.drivers-header{margin-bottom:var(--sp8)}

.drivers-framework{
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:var(--sp4);align-items:center;
  margin-bottom:var(--sp8);
}
.drivers-col-label{
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:var(--sp3);text-align:center;
}
.drivers-col-label.what-is{color:var(--n400)}
.drivers-col-label.what-needs{color:var(--trellis)}

.driver-cards{display:flex;flex-direction:column;gap:var(--sp2)}
.driver-card{
  padding:var(--sp3) var(--sp4);
  border-radius:var(--r12);border:1.5px solid;
}
.driver-card.has{
  background:white;border-color:var(--n100);
}
.driver-card.missing{
  background:rgba(200,16,46,.03);border-color:rgba(200,16,46,.15);
}
.driver-card.solution{
  background:var(--trellis-light);border-color:rgba(45,122,95,.2);
}
.driver-card-top{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.driver-card-icon{
  width:28px;height:28px;border-radius:var(--r8);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
}
.driver-card-icon.green{background:var(--trellis-light)}
.driver-card-icon.red{background:rgba(200,16,46,.08)}
.driver-card-icon.trellis{background:var(--trellis);color:white}
.driver-card-badge{
  font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 7px;border-radius:4px;
}
.driver-card-badge.has{background:rgba(26,58,82,.07);color:var(--navy)}
.driver-card-badge.missing{background:rgba(200,16,46,.1);color:#C8102E}
.driver-card-badge.solution{background:var(--trellis);color:white}
.driver-card-title{font-size:14px;font-weight:700;color:var(--navy)}
.driver-card-body{font-size:12px;color:var(--n600);line-height:1.5;font-weight:300}

/* Center arrow */
.drivers-arrow{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp2);
}
.drivers-arrow-icon{
  width:48px;height:48px;border-radius:50%;
  background:var(--trellis);color:white;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;box-shadow:var(--shadow-green);
}
.drivers-arrow-label{font-size:11px;color:var(--n400);text-align:center;line-height:1.4}

/* Fixsen framework diagram — simplified */
.fixsen-box{
  background:white;border-radius:var(--r16);border:1.5px solid var(--n100);
  padding:var(--sp6);box-shadow:var(--shadow-sm);
  margin-bottom:var(--sp6);
}
.fixsen-box-title{
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--n400);margin-bottom:var(--sp4);text-align:center;
}
.fixsen-drivers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp3)}
.fixsen-driver{
  border-radius:var(--r12);padding:var(--sp3);
  text-align:center;border:1.5px solid;
}
.fixsen-driver.competency{background:rgba(26,58,82,.04);border-color:rgba(26,58,82,.12)}
.fixsen-driver.organization{background:var(--trellis-light);border-color:rgba(45,122,95,.25)}
.fixsen-driver.leadership{background:rgba(80,197,183,.06);border-color:rgba(80,197,183,.2)}
.fixsen-driver-label{
  font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:6px;
}
.fixsen-driver.competency .fixsen-driver-label{color:var(--navy)}
.fixsen-driver.organization .fixsen-driver-label{color:var(--trellis-dark)}
.fixsen-driver.leadership .fixsen-driver-label{color:rgba(80,197,183,.9)}
.fixsen-driver-items{display:flex;flex-direction:column;gap:4px}
.fixsen-driver-item{
  font-size:11px;color:var(--n600);padding:4px 8px;border-radius:6px;
  background:rgba(255,255,255,.7);
}
.fixsen-driver.organization .fixsen-driver-item{background:rgba(45,122,95,.08);color:var(--trellis-dark)}
.fixsen-driver-highlight{
  margin-top:var(--sp2);
  font-size:10px;font-weight:700;
  padding:4px 8px;border-radius:6px;
  background:var(--trellis);color:white;
  font-family:var(--font-mono);
}

/* ════════════════════════════════════════════
   THE SOLUTION BRIDGE — dark transition
════════════════════════════════════════════ */
.bridge-section{
  background:var(--navy);
  padding:var(--sp12) 0;
  position:relative;overflow:hidden;
}
.bridge-section::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.035) 1px,transparent 0);
  background-size:28px 28px;pointer-events:none;
}
.bridge-inner{
  max-width:1100px;margin:0 auto;padding:0 var(--sp4);
  position:relative;z-index:2;
}
.bridge-header{text-align:center;margin-bottom:var(--sp10)}

/* The "train and hope → train and trellis" visual */
.bridge-visual{
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:var(--sp4);align-items:center;
  margin-bottom:var(--sp10);
}
.bridge-side{
  background:rgba(255,255,255,.04);
  border-radius:var(--r20);
  border:1px solid rgba(255,255,255,.07);
  padding:var(--sp6);
}
.bridge-side-label{
  font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:var(--sp3);
}
.bridge-side.problem .bridge-side-label{color:rgba(232,116,138,.7)}
.bridge-side.solution .bridge-side-label{color:var(--teal)}
.bridge-side-title{
  font-family:var(--font-display);font-size:clamp(22px,2.8vw,32px);
  letter-spacing:-.02em;line-height:1.1;margin-bottom:var(--sp3);
  color:white;
}
.bridge-side.problem .bridge-side-title{color:rgba(255,255,255,.5)}
.bridge-side-items{list-style:none;display:flex;flex-direction:column;gap:8px}
.bridge-item{
  font-size:13px;line-height:1.5;padding:10px 14px;
  border-radius:var(--r8);display:flex;align-items:flex-start;gap:9px;
}
.bridge-item.fail{background:rgba(200,16,46,.06);color:rgba(255,255,255,.45)}
.bridge-item.fail::before{content:'✕';color:rgba(200,16,46,.5);font-weight:700;flex-shrink:0}
.bridge-item.win{background:rgba(45,122,95,.12);color:rgba(255,255,255,.85)}
.bridge-item.win::before{content:'✓';color:var(--teal);font-weight:700;flex-shrink:0}

/* Bridge center */
.bridge-center{display:flex;flex-direction:column;align-items:center;gap:var(--sp2)}
.bridge-arrow{
  font-family:var(--font-display);font-size:24px;color:var(--teal);
}
.bridge-word{
  font-family:var(--font-display);font-size:14px;color:rgba(255,255,255,.3);
  letter-spacing:-.01em;text-align:center;
  writing-mode:vertical-lr;text-orientation:mixed;
  transform:rotate(180deg);
}

/* ════════════════════════════════════════════
   THREE RESEARCH PILLARS
════════════════════════════════════════════ */
.research-section{
  background:var(--warm-white);
  padding:var(--sp12) 0;
}
.research-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.research-header{text-align:center;margin-bottom:var(--sp10)}
.research-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp4)}

.researcher-card{
  background:white;border-radius:var(--r20);
  border:1.5px solid var(--n100);overflow:hidden;
  transition:box-shadow .2s,transform .2s;
}
.researcher-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.researcher-card-top{
  padding:var(--sp4);
  border-bottom:1px solid var(--n100);
}
.researcher-num{
  font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--n400);margin-bottom:var(--sp2);
}
.researcher-name{
  font-family:var(--font-display);font-size:24px;letter-spacing:-.02em;
  color:var(--navy);margin-bottom:2px;
}
.researcher-institution{font-size:11px;color:var(--n400);font-weight:300;margin-bottom:var(--sp3);line-height:1.4}
.researcher-finding{
  display:flex;align-items:baseline;gap:10px;
  padding:var(--sp2) var(--sp3);
  background:var(--warm-white);border-radius:var(--r12);
}
.researcher-finding-num{
  font-family:var(--font-display);font-size:28px;letter-spacing:-.04em;
  color:var(--trellis);line-height:1;flex-shrink:0;
}
.researcher-finding-label{font-size:12px;color:var(--n600);font-weight:300;line-height:1.4}

.researcher-card-body{padding:var(--sp4)}
.researcher-quote{
  font-size:13px;color:var(--n600);line-height:1.7;font-style:italic;
  margin-bottom:var(--sp3);font-weight:300;
  border-left:2px solid var(--n100);padding-left:var(--sp2);
}
.researcher-trellis{
  font-size:12px;font-weight:600;color:var(--trellis-dark);
  background:var(--trellis-light);padding:var(--sp2) var(--sp3);
  border-radius:var(--r8);line-height:1.5;
}
.researcher-link{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:700;color:var(--trellis);
  margin-top:var(--sp2);
  transition:gap .12s;
}
.researcher-link:hover{gap:8px}

/* Convergence callout */
.convergence-callout{
  margin-top:var(--sp8);
  background:var(--navy);border-radius:var(--r20);
  padding:var(--sp8);text-align:center;
  position:relative;overflow:hidden;
}
.convergence-callout::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 100%,rgba(45,122,95,.25) 0%,transparent 70%);
  pointer-events:none;
}
.convergence-callout-inner{position:relative;z-index:1}
.convergence-eyebrow{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.35);margin-bottom:var(--sp3);
}
.convergence-headline{
  font-family:var(--font-display);
  font-size:clamp(22px,3vw,36px);
  letter-spacing:-.03em;line-height:1.1;
  color:white;margin-bottom:var(--sp3);
}
.convergence-headline em{color:var(--teal);font-style:italic}
.convergence-body{
  font-size:15px;color:rgba(255,255,255,.5);font-weight:300;
  line-height:1.75;max-width:680px;margin:0 auto var(--sp6);
}

/* ════════════════════════════════════════════
   CTA
════════════════════════════════════════════ */

/* Responsive — WHY TRELLIS */
@media(max-width:960px){
  .nav-links{display:none}
  .nav-mobile-toggle{display:flex}
  .hero-why-inner{grid-template-columns:1fr;gap:var(--sp6)}
  .hero-why-right{gap:0}
  .chapter-intro{grid-template-columns:1fr}
  .chapter-num{writing-mode:horizontal-tb;transform:none;margin-bottom:4px}
  .fail-grid{grid-template-columns:1fr}
  .stats-band-inner{grid-template-columns:1fr}
  .stat-item{border-right:none;border-bottom:1px solid var(--n100)}
  .stat-item:last-child{border-bottom:none}
  .drivers-framework{grid-template-columns:1fr;gap:var(--sp4)}
  .drivers-arrow{flex-direction:row}
  .drivers-arrow-icon{width:36px;height:36px;font-size:16px}
  .bridge-visual{grid-template-columns:1fr;gap:var(--sp4)}
  .bridge-center{flex-direction:row;gap:var(--sp2)}
  .bridge-word{writing-mode:horizontal-tb;transform:none}
  .research-grid{grid-template-columns:1fr}
  .fixsen-drivers{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp4)}
  .footer-grid>div:first-child{grid-column:1/-1}
  .pull-quote{padding:var(--sp4)}
}


/* ════════════════════════════════════════════════════════════════════════════════
   TEACHERS PAGE — teachers.html
   ════════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════
   HERO — "Teach More. Document Less."
   Light, inviting — teacher energy, not sales page
════════════════════════════════════════════ */
.hero-teacher{
  padding-top:68px;
  background: var(--warm-white);
  position:relative;
  overflow:hidden;
}
/* Subtle dot grid background */
.hero-teacher::before{
  content:'';
  position:absolute;inset:0;
  background-image: radial-gradient(circle, rgba(45,122,95,.12) 1px, transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
}
/* Green gradient wash on left */
.hero-teacher::after{
  content:'';
  position:absolute;
  top:0;left:0;bottom:0;width:50%;
  background: linear-gradient(135deg, rgba(238,247,243,.9) 0%, transparent 100%);
  pointer-events:none;
}
.hero-teacher-inner{
  max-width:1200px;
  margin:0 auto;
  padding:var(--sp10) var(--sp4) var(--sp8);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp8);
  align-items:center;
  position:relative;
  z-index:2;
}
.hero-t-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--trellis);margin-bottom:var(--sp3);
}
.hero-t-eyebrow-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--trellis);animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}

.hero-t-headline{
  font-family:var(--font-display);
  font-size:clamp(48px,5.5vw,72px);
  letter-spacing:-.04em;
  line-height:.9;
  color:var(--n800);
  margin-bottom:var(--sp3);
}
.hero-t-headline em{
  color:var(--trellis);
  font-style:italic;
}
.hero-t-sub{
  font-size:clamp(16px,1.6vw,19px);
  line-height:1.65;
  color:var(--n600);
  font-weight:300;
  max-width:520px;
  margin-bottom:var(--sp4);
}
.hero-t-ctas{display:flex;align-items:center;gap:var(--sp2);flex-wrap:wrap;margin-bottom:var(--sp6)}

/* Teacher proof strip */
.hero-proof{
  display:flex;align-items:center;gap:var(--sp3);
  flex-wrap:wrap;
}
.hero-proof-item{
  display:flex;align-items:center;gap:7px;
  font-size:13px;color:var(--n600);font-weight:500;
}
.hero-proof-icon{
  width:28px;height:28px;border-radius:var(--r8);
  background:var(--trellis-light);color:var(--trellis);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
}
.hero-proof-divider{width:1px;height:28px;background:var(--n200)}

/* ── Right: Inline seating chart + clock visual ── */
.hero-visual{
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.classroom-frame{
  background:white;
  border:1.5px solid var(--n100);
  border-radius:var(--r20);
  padding:24px;
  box-shadow:var(--shadow-lg);
  width:100%;max-width:440px;
  position:relative;
}
.classroom-frame-title{
  font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--n400);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--n100);
  display:flex;justify-content:space-between;align-items:center;
}
.classroom-frame-title span{
  font-family:var(--font-mono);font-size:10px;color:var(--trellis);font-weight:500;
}
/* Compact seating grid */
.seat-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:16px;
}
.seat{
  aspect-ratio:1;border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-size:7px;font-weight:700;font-family:var(--font-mono);color:white;cursor:pointer;
  transition:transform .12s;position:relative;
}
.seat:hover{transform:scale(1.12)}
.seat.empty{background:var(--n100);color:var(--n400)}
.seat.exceeds{background:var(--blue-level)}
.seat.meets{background:var(--green-level)}
.seat.approaching{background:var(--yellow-level)}
.seat.below{background:var(--orange-level)}
.seat.concern{background:var(--red-level)}
/* Active seat — currently selected */
.seat.active{
  outline:3px solid var(--trellis);
  outline-offset:2px;
  transform:scale(1.18);
  z-index:2;
  box-shadow:0 4px 16px rgba(45,122,95,.4);
}
/* Timer badge floating on active seat */
.seat-timer{
  position:absolute;
  top:-16px;right:-10px;
  background:var(--trellis);
  color:white;
  font-family:var(--font-mono);
  font-size:9px;font-weight:700;
  padding:2px 5px;border-radius:4px;
  white-space:nowrap;
  box-shadow:0 2px 8px rgba(45,122,95,.4);
  animation:timerPop .3s ease;
}
@keyframes timerPop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}

/* Scale legend */
.scale-legend{
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;
}
.scale-chip{
  display:flex;align-items:center;gap:4px;
  font-size:8px;font-weight:600;color:var(--n600);
  font-family:var(--font-mono);
}
.scale-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* Floating intervention toast */
.intervention-toast{
  position:absolute;
  top:-16px;right:-20px;
  background:white;
  border:1.5px solid var(--n100);
  border-radius:var(--r12);
  padding:12px 16px;
  box-shadow:0 12px 40px rgba(15,34,51,.16);
  width:200px;
  animation:toastSlide .4s ease both;
}
@keyframes toastSlide{0%{opacity:0;transform:translateY(12px) scale(.95)}100%{opacity:1;transform:translateY(0) scale(1)}}
.toast-header{
  font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange-level);margin-bottom:6px;
  display:flex;align-items:center;gap:4px;
}
.toast-header-dot{width:6px;height:6px;border-radius:50%;background:var(--orange-level)}
.toast-student{font-size:12px;font-weight:700;color:var(--navy);margin-bottom:8px}
.toast-intervention{
  font-size:10px;font-weight:600;color:var(--trellis);
  padding:5px 8px;border-radius:6px;background:var(--trellis-light);
  margin-bottom:4px;cursor:pointer;transition:background .1s;
  display:flex;align-items:center;gap:5px;
}
.toast-intervention:hover{background:rgba(45,122,95,.15)}
.toast-intervention-icon{font-size:11px}

/* 5-second badge */
.five-sec-badge{
  position:absolute;bottom:-16px;left:-20px;
  background:var(--trellis);color:white;
  border-radius:var(--r16);padding:10px 16px;
  display:flex;align-items:center;gap:8px;
  box-shadow:var(--shadow-green);
  animation:badgeBounce .6s ease .5s both;
}
@keyframes badgeBounce{0%{opacity:0;transform:scale(.8) rotate(-3deg)}80%{transform:scale(1.05) rotate(1deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.five-sec-num{
  font-family:var(--font-display);font-size:28px;line-height:1;letter-spacing:-.03em;
}
.five-sec-label{font-size:10px;font-weight:700;line-height:1.3}

/* ════════════════════════════════════════════
   PAIN POINTS — "You're not the problem"
════════════════════════════════════════════ */
.pain-section{
  background:white;
  padding:var(--sp12) 0 var(--sp10);
  border-top:1px solid var(--n100);
}
.pain-inner{
  max-width:1200px;margin:0 auto;padding:0 var(--sp4);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp10);align-items:start;
}
.pain-left{}
.pain-heading-pre{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--n400);margin-bottom:var(--sp2);
}
.pain-heading{
  font-family:var(--font-display);
  font-size:clamp(30px,3.5vw,44px);
  letter-spacing:-.03em;line-height:1.05;
  color:var(--navy);
  margin-bottom:var(--sp3);
}
.pain-heading em{color:var(--trellis);font-style:italic}
.pain-body{
  font-size:16px;line-height:1.75;color:var(--n600);font-weight:300;
  margin-bottom:var(--sp6);
}
.research-pull{
  border-left:3px solid var(--teal);
  padding:var(--sp3) var(--sp4);
  background:rgba(80,197,183,.04);
  border-radius:0 var(--r8) var(--r8) 0;
  margin-bottom:var(--sp4);
}
.research-pull-quote{
  font-family:var(--font-display);
  font-size:clamp(16px,1.8vw,20px);
  color:var(--navy);
  letter-spacing:-.01em;
  line-height:1.4;
  font-style:italic;
  margin-bottom:8px;
}
.research-pull-attr{
  font-size:11px;font-weight:600;color:var(--n400);letter-spacing:.06em;text-transform:uppercase;
}
.pain-right{}
/* Pain point cards */
.pain-cards{display:flex;flex-direction:column;gap:var(--sp2)}
.pain-card{
  background:var(--warm-white);
  border:1.5px solid var(--n100);
  border-radius:var(--r12);
  padding:var(--sp3) var(--sp4);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--sp3);
  align-items:start;
  transition:border-color .15s,box-shadow .15s;
}
.pain-card:hover{border-color:var(--n200);box-shadow:var(--shadow-sm)}
.pain-card-icon{
  width:40px;height:40px;border-radius:var(--r12);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
  background:var(--trellis-light);
}
.pain-card-title{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:4px}
.pain-card-body{font-size:13px;color:var(--n600);line-height:1.55}
/* Before/after indicator on card */
.pain-card-verdict{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  margin-top:6px;
  color:var(--n400);
}
.pain-card-verdict.before::before{content:'✕ ';color:var(--red-level)}
.pain-card-verdict.fixed::before{content:'✓ ';color:var(--trellis)}

/* ════════════════════════════════════════════
   HOW IT WORKS — The 5-second workflow
════════════════════════════════════════════ */
.workflow-section{
  background:var(--navy-dark);
  padding:var(--sp12) 0;
  position:relative;overflow:hidden;
}
.workflow-section::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
}
.workflow-header{text-align:center;margin-bottom:var(--sp10);position:relative;z-index:2}
.workflow-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4);position:relative;z-index:2}

/* Giant 5 seconds number */
.workflow-time{
  text-align:center;margin-bottom:var(--sp2);
}
.workflow-time-num{
  font-family:var(--font-display);
  font-size:clamp(80px,12vw,140px);
  letter-spacing:-.05em;
  line-height:.9;
  color:var(--teal);
  display:inline-block;
}
.workflow-time-label{
  font-size:clamp(14px,1.5vw,18px);
  color:rgba(255,255,255,.5);
  font-weight:300;
  margin-top:8px;
}

/* Steps */
.workflow-steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  margin-top:var(--sp8);
  position:relative;
}
/* Connector line between steps */
.workflow-steps::before{
  content:'';
  position:absolute;
  top:28px;left:calc(10% + 4px);right:calc(10% + 4px);
  height:2px;
  background:linear-gradient(90deg,rgba(80,197,183,.3),rgba(80,197,183,.6),rgba(80,197,183,.3));
}
.step{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:0 var(--sp2);
  position:relative;z-index:2;
}
.step-num{
  width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.05);
  border:2px solid rgba(80,197,183,.35);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--teal);
  letter-spacing:.06em;margin-bottom:var(--sp2);
  flex-shrink:0;transition:all .2s;
}
.step:hover .step-num{
  background:rgba(80,197,183,.15);
  border-color:var(--teal);
  transform:scale(1.08);
}
.step-icon{font-size:22px;margin-bottom:var(--sp1)}
.step-title{
  font-size:13px;font-weight:700;color:white;
  margin-bottom:5px;line-height:1.2;
}
.step-body{font-size:11px;color:rgba(255,255,255,.45);line-height:1.55}
.step-time{
  margin-top:6px;
  font-family:var(--font-mono);font-size:9px;
  color:var(--teal);font-weight:500;letter-spacing:.06em;
}

/* ════════════════════════════════════════════
   BEFORE vs AFTER — The transformation
════════════════════════════════════════════ */
.bva-section{
  background:var(--warm-white);
  padding:var(--sp12) 0;
}
.bva-inner{max-width:1200px;margin:0 auto;padding:0 var(--sp4)}
.bva-header{text-align:center;margin-bottom:var(--sp8)}
.bva-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:var(--sp4);
  align-items:start;
}
.bva-col-label{
  text-align:center;
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 20px;border-radius:var(--r8);margin-bottom:var(--sp3);
  display:inline-block;
}
.bva-col-label.before{background:rgba(200,16,46,.08);color:var(--red-level)}
.bva-col-label.after{background:var(--trellis-light);color:var(--trellis-dark)}

.bva-items{display:flex;flex-direction:column;gap:var(--sp2)}
.bva-item{
  padding:14px 18px;
  border-radius:var(--r8);
  border:1.5px solid var(--n100);
  font-size:14px;line-height:1.5;
  color:var(--n800);
}
.bva-item.before-item{
  background:rgba(200,16,46,.02);
  border-color:rgba(200,16,46,.12);
}
.bva-item.before-item::before{
  content:'✕ ';color:var(--red-level);font-weight:700;
}
.bva-item.after-item{
  background:var(--trellis-light);
  border-color:rgba(45,122,95,.2);
}
.bva-item.after-item::before{
  content:'✓ ';color:var(--trellis);font-weight:700;
}

/* Center arrow */
.bva-arrow{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-top:52px;gap:var(--sp2);
}
.bva-arrow-icon{
  width:44px;height:44px;border-radius:50%;
  background:var(--trellis);color:white;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;box-shadow:var(--shadow-green);
  animation:arrowPulse 3s ease-in-out infinite;
}
@keyframes arrowPulse{0%,100%{box-shadow:var(--shadow-green)}50%{box-shadow:0 8px 40px rgba(45,122,95,.4)}}
.bva-arrow-label{
  font-family:var(--font-display);font-size:20px;color:var(--trellis);letter-spacing:-.02em;
  text-align:center;
}

/* ════════════════════════════════════════════
   FEATURES FOR TEACHERS — 4 capability cards
════════════════════════════════════════════ */
.features-section{
  background:white;
  padding:var(--sp12) 0;
  border-top:1px solid var(--n100);
  border-bottom:1px solid var(--n100);
}
.features-inner{max-width:1200px;margin:0 auto;padding:0 var(--sp4)}
.features-header{text-align:center;margin-bottom:var(--sp10)}
.features-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--sp4);
}
.feature-card{
  border-radius:var(--r16);
  border:1.5px solid var(--n100);
  overflow:hidden;
  transition:box-shadow .2s,transform .2s;
  background:var(--warm-white);
}
.feature-card:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.feature-card-top{
  padding:var(--sp4);
  display:flex;align-items:flex-start;gap:var(--sp3);
  border-bottom:1px solid var(--n100);
}
.feature-card-icon{
  width:52px;height:52px;border-radius:var(--r12);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;flex-shrink:0;
}
.feature-card-icon.green{background:var(--trellis-light)}
.feature-card-icon.navy{background:rgba(26,58,82,.07)}
.feature-card-icon.teal{background:rgba(80,197,183,.1)}
.feature-card-icon.gold{background:rgba(212,146,10,.08)}
.feature-card-headline{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:4px;line-height:1.2}
.feature-card-sub{font-size:13px;color:var(--n400);font-weight:500;letter-spacing:.02em}
.feature-card-body{padding:var(--sp4)}
.feature-card-body p{font-size:14px;line-height:1.7;color:var(--n600);font-weight:300;margin-bottom:var(--sp3)}
/* Proof point list in each card */
.feature-bullets{list-style:none;display:flex;flex-direction:column;gap:8px}
.feature-bullet{
  display:flex;align-items:flex-start;gap:9px;
  font-size:13px;color:var(--n800);line-height:1.5;
}
.bullet-check{
  width:18px;height:18px;border-radius:5px;
  background:var(--trellis-light);color:var(--trellis);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:900;flex-shrink:0;margin-top:1px;
}

/* ════════════════════════════════════════════
   ASSESSMENT SCALE — visual explainer
════════════════════════════════════════════ */
.scale-section{
  background:var(--warm-white);
  padding:var(--sp12) 0;
}
.scale-inner{max-width:1000px;margin:0 auto;padding:0 var(--sp4)}
.scale-header{text-align:center;margin-bottom:var(--sp8)}
.scale-track{
  display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp2);
  margin-bottom:var(--sp6);
}
.scale-level{
  border-radius:var(--r12);overflow:hidden;
  transition:transform .15s;cursor:default;
}
.scale-level:hover{transform:translateY(-4px)}
.scale-level-top{
  padding:var(--sp3) var(--sp2);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
}
.scale-level-num{
  font-family:var(--font-display);font-size:32px;letter-spacing:-.03em;line-height:1;
  color:white;margin-bottom:4px;
}
.scale-level-icon{font-size:20px;margin-bottom:4px}
.scale-level-name{font-size:11px;font-weight:700;color:white;letter-spacing:.04em;text-transform:uppercase}
.scale-level-bottom{
  padding:12px;background:rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.06);
}
.scale-level-tier{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--n400);margin-bottom:3px}
.scale-level-desc{font-size:11px;color:var(--n600);line-height:1.5}
.scale-level-action{font-size:10px;font-weight:600;color:var(--trellis);margin-top:6px}

/* Pattern overlays for WCAG compliance */
.pattern-exceeds .scale-level-top{background:var(--blue-level)}
.pattern-meets    .scale-level-top{background:var(--green-level)}
.pattern-approach .scale-level-top{background:var(--yellow-level)}
.pattern-below    .scale-level-top{background:var(--orange-level)}
.pattern-concern  .scale-level-top{background:var(--red-level)}

.scale-note{
  text-align:center;font-size:13px;color:var(--n400);
  line-height:1.7;font-style:italic;
}

/* ════════════════════════════════════════════
   RESEARCH ANCHOR — Wiliam
════════════════════════════════════════════ */
.research-anchor{
  background:var(--navy);
  padding:var(--sp10) 0;
  position:relative;overflow:hidden;
}
.research-anchor::before{
  content:'"';
  font-family:var(--font-display);
  font-size:clamp(200px,28vw,320px);
  position:absolute;top:-40px;left:20px;
  color:rgba(255,255,255,.03);
  line-height:1;pointer-events:none;user-select:none;
}
.research-anchor-inner{
  max-width:900px;margin:0 auto;padding:0 var(--sp4);
  text-align:center;position:relative;z-index:2;
}
.research-anchor-label{
  font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:var(--sp4);
}
.research-anchor-quote{
  font-family:var(--font-display);
  font-size:clamp(20px,2.8vw,34px);
  letter-spacing:-.02em;line-height:1.35;
  color:white;margin-bottom:var(--sp4);
  font-style:italic;
}
.research-anchor-quote em{color:var(--teal);font-style:normal}
.research-anchor-attr{
  font-size:13px;color:rgba(255,255,255,.5);font-weight:300;margin-bottom:var(--sp6);
}
.research-anchor-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--teal);
  padding:8px 16px;border-radius:var(--r8);border:1px solid rgba(80,197,183,.3);
  transition:all .15s;
}
.research-anchor-link:hover{background:rgba(80,197,183,.1);border-color:var(--teal)}

/* Stats row */
.research-stats{
  display:flex;justify-content:center;align-items:center;gap:var(--sp8);
  flex-wrap:wrap;margin-top:var(--sp8);padding-top:var(--sp8);
  border-top:1px solid rgba(255,255,255,.08);
}
.r-stat{text-align:center}
.r-stat-num{
  font-family:var(--font-display);
  font-size:clamp(36px,4.5vw,52px);
  letter-spacing:-.04em;line-height:1;
  color:var(--teal);margin-bottom:4px;
}
.r-stat-label{font-size:12px;color:rgba(255,255,255,.5);font-weight:300;line-height:1.4;max-width:160px;margin:0 auto}
.r-stat-divider{width:1px;height:60px;background:rgba(255,255,255,.1)}

/* ════════════════════════════════════════════
   TESTIMONIAL — Teacher voice
════════════════════════════════════════════ */
.teacher-testimonial{
  background:var(--trellis-light);
  padding:var(--sp10) 0;
  border-top:1px solid rgba(45,122,95,.15);
  border-bottom:1px solid rgba(45,122,95,.15);
}
.teacher-testimonial-inner{
  max-width:800px;margin:0 auto;padding:0 var(--sp4);
  text-align:center;
}
.testimonial-icon{font-size:36px;margin-bottom:var(--sp3)}
.testimonial-text{
  font-family:var(--font-display);
  font-size:clamp(20px,2.4vw,28px);
  letter-spacing:-.02em;line-height:1.4;
  color:var(--navy);font-style:italic;
  margin-bottom:var(--sp4);
}
.testimonial-attribution{
  font-size:13px;font-weight:600;color:var(--trellis-dark);
  letter-spacing:.04em;
}

/* ════════════════════════════════════════════
   CTA — Teacher-specific
════════════════════════════════════════════ */

/* Responsive — TEACHERS PAGE */
@media(max-width:960px){
  .hero-teacher-inner{grid-template-columns:1fr;gap:var(--sp6)}
  .hero-visual{order:-1}
  .classroom-frame{max-width:360px}
  .intervention-toast{right:-10px;top:-20px;width:170px}
  .pain-inner{grid-template-columns:1fr}
  .workflow-steps{grid-template-columns:1fr;gap:var(--sp4)}
  .workflow-steps::before{display:none}
  .step{flex-direction:row;text-align:left;gap:var(--sp3)}
  .bva-grid{grid-template-columns:1fr;gap:var(--sp4)}
  .bva-arrow{display:none}
  .features-grid{grid-template-columns:1fr}
  .scale-track{grid-template-columns:1fr 1fr;gap:var(--sp2)}
  .scale-track .scale-level:last-child{grid-column:1/-1}
  .nav-links{display:none}
  .nav-mobile-toggle{display:flex}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp4)}
  .footer-grid>div:first-child{grid-column:1/-1}
}


/* ════════════════════════════════════════════════════════════════════════════════
   ADMINISTRATORS PAGE — administrators.html
   ════════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero {
  padding-top: 68px;
  background: var(--navy-dark);
  color: white;
  position: relative;
  overflow: hidden;
  min-height: 88vh;
  display: flex;
  align-items: center;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -200px; left: -100px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(45,122,95,.2) 0%, transparent 65%);
  pointer-events: none;
}
.hero-inner {
  max-width: 1200px; margin: 0 auto;
  padding: var(--sp10) var(--sp4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp10);
  align-items: center;
  position: relative; z-index: 2; width: 100%;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: 99px;
  background: rgba(80,197,183,.1);
  border: 1px solid rgba(80,197,183,.25);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--teal);
  margin-bottom: 28px;
}
.hero-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 68px);
  letter-spacing: -0.03em; line-height: 0.95;
  color: white; margin-bottom: 28px;
}
.hero-headline em { color: var(--teal); font-style: italic; }
.hero-sub {
  font-size: 18px; color: rgba(255,255,255,.6);
  line-height: 1.75; font-weight: 300;
  max-width: 500px; margin-bottom: 40px;
}
.hero-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 52px; }
.hero-proof {
  display: flex; align-items: center; gap: 20px;
  padding-top: 28px; border-top: 1px solid rgba(255,255,255,.08);
}
.hero-proof-item { text-align: center; }
.hero-proof-num {
  font-family: var(--font-display); font-size: 28px;
  color: white; letter-spacing: -0.03em; line-height: 1; margin-bottom: 3px;
}
.hero-proof-label { font-size: 11px; color: rgba(255,255,255,.4); font-weight: 500; line-height: 1.4; }
.hero-proof-divider { width: 1px; height: 36px; background: rgba(255,255,255,.1); }

/* ═══════════════════════════════════════════
   ADMIN DASHBOARD MOCKUP
═══════════════════════════════════════════ */
.dashboard-frame {
  background: white;
  border-radius: var(--r20);
  overflow: hidden;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.06);
  position: relative;
}
.dash-chrome {
  background: var(--navy);
  padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.dash-dots { display: flex; gap: 5px; }
.dash-dot { width: 9px; height: 9px; border-radius: 50%; }
.dash-title { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.45); letter-spacing: 0.04em; }
.dash-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: rgba(80,197,183,.2); color: var(--teal); }

.dash-body { background: #f4f5f7; padding: 14px; }
.dash-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dash-school-name { font-size: 13px; font-weight: 700; color: var(--navy); }
.dash-date { font-size: 10px; color: var(--n400); font-family: var(--font-mono); }

/* KPI strip */
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.dash-kpi {
  background: white; border-radius: var(--r8); padding: 10px 12px;
  border: 1px solid rgba(15,34,51,.06);
}
.dash-kpi-val { font-family: var(--font-display); font-size: 22px; color: var(--navy); letter-spacing: -0.03em; line-height: 1; margin-bottom: 2px; }
.dash-kpi-val.alert { color: var(--orange-level); }
.dash-kpi-val.good { color: var(--trellis); }
.dash-kpi-label { font-size: 9px; color: var(--n400); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.3; }

/* Teacher table */
.dash-table { background: white; border-radius: var(--r8); overflow: hidden; border: 1px solid rgba(15,34,51,.06); margin-bottom: 12px; }
.dash-table-header { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; padding: 7px 12px; background: #f8f9fb; border-bottom: 1px solid rgba(15,34,51,.06); }
.dash-th { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--n400); }
.dash-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; padding: 8px 12px; border-bottom: 1px solid rgba(15,34,51,.04); align-items: center; }
.dash-row:last-child { border-bottom: none; }
.dash-row:hover { background: #fafbfc; }
.dash-teacher { font-size: 11px; font-weight: 600; color: var(--navy); }
.dash-cell { font-size: 11px; color: var(--n600); font-family: var(--font-mono); }
.fidelity-bar { width: 100%; height: 5px; background: var(--n100); border-radius: 99px; overflow: hidden; }
.fidelity-fill { height: 100%; border-radius: 99px; background: var(--trellis); }
.fidelity-fill.med { background: var(--yellow-level); }
.fidelity-fill.low { background: var(--orange-level); }

/* Alert strip */
.dash-alerts { display: flex; flex-direction: column; gap: 6px; }
.dash-alert {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--r8);
  background: white; border: 1px solid rgba(15,34,51,.06);
  font-size: 10px; color: var(--n600); line-height: 1.4;
}
.dash-alert-icon {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; flex-shrink: 0;
}
.dash-alert-icon.warn { background: rgba(212,96,10,.12); color: var(--orange-level); }
.dash-alert-icon.flag { background: rgba(200,16,46,.1); color: var(--red-level); }
.dash-alert-icon.ok { background: rgba(45,122,95,.1); color: var(--trellis); }
.dash-alert strong { color: var(--navy); }

/* ═══════════════════════════════════════════
   SECTION: THE PROBLEM
═══════════════════════════════════════════ */
.problem-band {
  background: var(--navy);
  color: white;
  padding: var(--sp10) 0;
  position: relative;
  overflow: hidden;
}
.problem-band::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(80,197,183,.08) 0%, transparent 70%);
  pointer-events: none;
}
.problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp10); align-items: center; }
.problem-quote {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: white;
  margin-bottom: var(--sp4);
}
.problem-quote span { color: var(--teal); }
.problem-body { font-size: 16px; color: rgba(255,255,255,.55); line-height: 1.75; font-weight: 300; }
.problem-stats { display: flex; flex-direction: column; gap: 24px; }
.problem-stat {
  padding: 24px 28px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--teal);
  border-radius: var(--r12);
}
.problem-stat-num {
  font-family: var(--font-display);
  font-size: 48px; letter-spacing: -0.04em; line-height: 1;
  color: white; margin-bottom: 6px;
}
.problem-stat-label { font-size: 14px; color: rgba(255,255,255,.5); line-height: 1.5; }

/* ═══════════════════════════════════════════
   ROLE TABS
═══════════════════════════════════════════ */
.role-nav {
  background: white;
  border-bottom: 1px solid var(--n100);
  position: sticky; top: 68px; z-index: 50;
}
.role-nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--sp4);
  display: flex; align-items: center; gap: 0;
}
.role-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 28px;
  font-size: 14px; font-weight: 600;
  color: var(--n400);
  border-bottom: 2px solid transparent;
  cursor: pointer; transition: all 0.15s;
  background: none; border-top: none; border-left: none; border-right: none;
}
.role-tab:hover { color: var(--navy); }
.role-tab.active { color: var(--trellis); border-bottom-color: var(--trellis); }
.role-tab-icon { font-size: 16px; }

/* ═══════════════════════════════════════════
   ROLE SECTIONS
═══════════════════════════════════════════ */
.role-section { padding: var(--sp12) 0; }
.role-section.alt { background: #f8f9fb; }

/* Feature cards */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: var(--sp8); }
.feature-card {
  background: white;
  border: 1px solid var(--n100);
  border-radius: var(--r16);
  padding: 32px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--trellis);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--n200); }
.feature-card:hover::before { transform: scaleX(1); }
.feature-card.horizon-2::before { background: var(--navy); }
.feature-card-icon {
  width: 48px; height: 48px; border-radius: var(--r12);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 20px;
}
.feature-card-icon.green { background: var(--trellis-light); }
.feature-card-icon.navy { background: rgba(26,58,82,.08); }
.feature-card-icon.teal { background: rgba(80,197,183,.1); }
.feature-card-title { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 10px; line-height: 1.3; }
.feature-card-body { font-size: 14px; color: var(--n600); line-height: 1.7; }
.feature-card-tag {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 16px; padding: 4px 10px;
  border-radius: 99px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.feature-card-tag.now { background: var(--trellis-light); color: var(--trellis); }
.feature-card-tag.scale { background: rgba(26,58,82,.07); color: var(--navy); }

/* ═══════════════════════════════════════════
   HORIZON EXPLAINER
═══════════════════════════════════════════ */
.horizon-section {
  background: var(--navy-dark);
  padding: var(--sp12) 0;
  color: white;
  position: relative;
  overflow: hidden;
}
.horizon-section::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(45,122,95,.15) 0%, transparent 60%);
  pointer-events: none;
}
.horizon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: var(--sp8); background: rgba(255,255,255,.06); border-radius: var(--r16); overflow: hidden; }
.horizon-block {
  padding: 40px 32px;
  background: var(--navy-dark);
  transition: background 0.2s;
  position: relative;
}
.horizon-block:hover { background: rgba(255,255,255,.03); }
.horizon-num {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,.25);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 16px;
}
.horizon-title {
  font-family: var(--font-display);
  font-size: 24px; color: white;
  letter-spacing: -0.02em; line-height: 1.1;
  margin-bottom: 16px;
}
.horizon-subtitle { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 20px; }
.horizon-items { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.horizon-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.5;
}
.horizon-item-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal); margin-top: 6px; flex-shrink: 0;
}
.horizon-item-dot.navy-dot { background: var(--n400); }
.horizon-item-dot.dim { background: rgba(255,255,255,.2); }
.horizon-bar {
  position: absolute; bottom: 0; left: 32px; right: 32px; height: 2px;
  border-radius: 99px;
}
.horizon-bar.h1 { background: var(--teal); }
.horizon-bar.h2 { background: var(--n400); }
.horizon-bar.h3 { background: rgba(255,255,255,.15); }

/* ═══════════════════════════════════════════
   PRINCIPAL vs DISTRICT SPLIT SECTION
═══════════════════════════════════════════ */
.split-section { padding: var(--sp12) 0; background: #f8f9fb; }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
.split-card {
  background: white;
  border-radius: var(--r20);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--n100);
  display: flex; flex-direction: column;
}
.split-card-header {
  padding: 36px 36px 28px;
  border-bottom: 1px solid var(--n100);
}
.split-card-header.green { background: linear-gradient(135deg, #1b4b3a 0%, var(--trellis) 100%); }
.split-card-header.navy { background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%); }
.split-role-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
  margin-bottom: 10px;
}
.split-role-title {
  font-family: var(--font-display);
  font-size: 28px; color: white;
  letter-spacing: -0.02em; line-height: 1.1;
  margin-bottom: 12px;
}
.split-role-sub { font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.6; }
.split-card-body { padding: 32px 36px; flex: 1; display: flex; flex-direction: column; gap: 20px; }
.split-feature {
  display: flex; gap: 16px; align-items: flex-start;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--n100);
}
.split-feature:last-child { border-bottom: none; padding-bottom: 0; }
.split-feature-icon {
  width: 36px; height: 36px; border-radius: var(--r8);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0; margin-top: 2px;
}
.split-feature-icon.green { background: var(--trellis-light); }
.split-feature-icon.navy { background: rgba(26,58,82,.08); }
.split-feature-title { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.split-feature-body { font-size: 13px; color: var(--n600); line-height: 1.6; }

/* ═══════════════════════════════════════════
   COACHING SECTION
═══════════════════════════════════════════ */
.coaching-section { padding: var(--sp12) 0; }
.coaching-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp10); align-items: center; }
.coaching-visual {
  background: var(--navy-dark);
  border-radius: var(--r20);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.coaching-viz-header {
  background: var(--navy);
  padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.coaching-viz-title { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.4); letter-spacing: 0.04em; }
.coaching-viz-body { padding: 20px; }
.teacher-row-viz {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.teacher-row-viz:last-child { border-bottom: none; }
.teacher-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.6);
}
.teacher-name-viz { font-size: 12px; font-weight: 600; color: white; min-width: 80px; }
.strat-chips { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.strat-chip {
  padding: 2px 7px; border-radius: 4px;
  font-size: 9px; font-weight: 600; letter-spacing: 0.04em;
  background: rgba(80,197,183,.15); color: var(--teal);
}
.strat-chip.dim { background: rgba(255,255,255,.06); color: rgba(255,255,255,.3); }
.coach-flag {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 99px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  background: rgba(212,96,10,.2); color: #f4874a;
  white-space: nowrap;
}
.coach-flag.good { background: rgba(45,122,95,.2); color: #6acba5; }

/* ═══════════════════════════════════════════
   EQUITY SECTION
═══════════════════════════════════════════ */
.equity-section { background: var(--trellis-light); padding: var(--sp12) 0; }
.equity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp10); align-items: center; }
.equity-bars { display: flex; flex-direction: column; gap: 16px; }
.equity-bar-row { display: flex; flex-direction: column; gap: 6px; }
.equity-bar-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600; color: var(--navy);
}
.equity-bar-pct { color: var(--n400); font-family: var(--font-mono); font-size: 11px; }
.equity-track { height: 8px; background: rgba(45,122,95,.12); border-radius: 99px; overflow: hidden; }
.equity-fill { height: 100%; border-radius: 99px; background: var(--trellis); transition: width 1s ease; }
.equity-fill.gap { background: var(--orange-level); }

/* ═══════════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════════ */

/* Responsive — ADMINISTRATORS PAGE */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .dashboard-frame { display: none; }
  .problem-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .horizon-grid { grid-template-columns: 1fr; }
  .split-grid { grid-template-columns: 1fr; }
  .coaching-grid { grid-template-columns: 1fr; }
  .equity-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .nav-mobile-toggle { display: flex; }
}

@media (max-width: 600px) {
  .features-grid { grid-template-columns: 1fr; }
  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
}


/* ════════════════════════════════════════════════════════════════════════════════
   FEATURES — DOCUMENTATION — features/documentation.html
   ════════════════════════════════════════════════════════════════════════════════ */

/* HERO */
.hero{background:var(--navy-dark);overflow:hidden;position:relative}
.hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-80px;left:50%;transform:translateX(-50%);width:900px;height:400px;background:radial-gradient(ellipse at 50% 100%,rgba(45,122,95,.28) 0%,transparent 70%);pointer-events:none}
.hero-inner{max-width:1100px;margin:0 auto;padding:var(--sp8) var(--sp4) var(--sp10);display:grid;grid-template-columns:1fr 1fr;gap:var(--sp10);align-items:center;position:relative;z-index:2}
.hero-eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:var(--sp3)}
.hero-headline{font-family:var(--font-display);font-size:clamp(36px,4.5vw,56px);letter-spacing:-.04em;line-height:.93;color:white;margin-bottom:var(--sp4)}
.hero-headline em{color:var(--teal);font-style:italic}
.hero-sub{font-size:clamp(15px,1.5vw,17px);color:rgba(255,255,255,.75);font-weight:300;line-height:1.8;margin-bottom:var(--sp6)}
.hero-ctas{display:flex;gap:var(--sp2);flex-wrap:wrap}

/* THE BEFORE / AFTER CONTRAST BAND */
.contrast-band{background:white;border-top:1px solid var(--n100);border-bottom:1px solid var(--n100);padding:var(--sp10) 0}
.contrast-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.contrast-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--sp6);align-items:start;margin-top:var(--sp8)}
.contrast-col{}
.contrast-col-label{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--sp3);padding-bottom:var(--sp2);border-bottom:2px solid;font-family:var(--font-mono)}
.contrast-col-label.before{color:rgba(200,16,46,.6);border-color:rgba(200,16,46,.2)}
.contrast-col-label.after{color:var(--trellis);border-color:var(--trellis)}
.contrast-items{display:flex;flex-direction:column;gap:var(--sp2)}
.contrast-item{padding:var(--sp2) var(--sp3);border-radius:var(--r12);font-size:14px;line-height:1.6}
.contrast-item.before{background:rgba(200,16,46,.03);border:1px solid rgba(200,16,46,.1);color:var(--n600)}
.contrast-item.after{background:var(--trellis-light);border:1px solid rgba(45,122,95,.15);color:var(--trellis-dark)}
.contrast-item strong{font-weight:700}
.contrast-arrow{display:flex;align-items:center;justify-content:center;padding-top:48px}
.contrast-arrow-inner{width:44px;height:44px;border-radius:50%;background:var(--trellis);color:white;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:var(--shadow-green)}

/* 5-SECOND EXPLAINER */
.five-sec-section{background:var(--navy-dark);padding:var(--sp10) 0;position:relative;overflow:hidden}
.five-sec-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 80% at 50% 50%,rgba(45,122,95,.15) 0%,transparent 70%);pointer-events:none}
.five-sec-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4);position:relative;z-index:2}
.steps-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:var(--sp8);position:relative}
.steps-grid::before{content:'';position:absolute;top:28px;left:10%;right:10%;height:1px;background:rgba(255,255,255,.1);z-index:0}
.step-item{text-align:center;padding:0 var(--sp2);position:relative;z-index:1}
.step-num{width:56px;height:56px;border-radius:50%;margin:0 auto var(--sp2);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:22px;letter-spacing:-.03em;border:2px solid}
.step-item:nth-child(1) .step-num{background:rgba(80,197,183,.15);border-color:var(--teal);color:var(--teal)}
.step-item:nth-child(2) .step-num{background:rgba(45,122,95,.2);border-color:var(--trellis);color:rgba(255,255,255,.9)}
.step-item:nth-child(3) .step-num{background:rgba(45,122,95,.25);border-color:var(--trellis);color:rgba(255,255,255,.9)}
.step-item:nth-child(4) .step-num{background:rgba(45,122,95,.3);border-color:var(--trellis);color:rgba(255,255,255,.9)}
.step-item:nth-child(5) .step-num{background:var(--trellis);border-color:var(--trellis);color:white}
.step-action{font-size:12px;font-weight:700;color:white;margin-bottom:4px;line-height:1.3}
.step-detail{font-size:11px;color:rgba(255,255,255,.55);line-height:1.5;font-weight:300}
.step-time{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-top:4px;font-family:var(--font-mono)}
.five-sec-total{margin-top:var(--sp8);text-align:center}
.five-sec-big{font-family:var(--font-display);font-size:clamp(48px,8vw,96px);letter-spacing:-.05em;line-height:1;color:var(--teal)}
.five-sec-label{font-size:16px;color:rgba(255,255,255,.65);font-weight:300;margin-top:4px}
.five-sec-sub{font-size:13px;color:rgba(255,255,255,.45);margin-top:8px;font-family:var(--font-mono)}

/* FEATURE SECTIONS */
.feature-section{padding:var(--sp12) 0}
.feature-section.alt{background:white}
.feature-section.tinted{background:var(--trellis-light);border-top:1px solid rgba(45,122,95,.1);border-bottom:1px solid rgba(45,122,95,.1)}
.feature-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp10);align-items:center}
.feature-row.flip{direction:rtl}.feature-row.flip>*{direction:ltr}
.feature-row.wide-mockup{grid-template-columns:5fr 7fr}
.feature-row.wide-copy{grid-template-columns:7fr 5fr}
.feature-step{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--trellis);margin-bottom:var(--sp2);font-family:var(--font-mono)}
.feature-step-num{width:22px;height:22px;border-radius:50%;background:var(--trellis);color:white;font-size:10px;display:inline-flex;align-items:center;justify-content:center}
.feature-headline{font-family:var(--font-display);font-size:clamp(24px,2.8vw,38px);letter-spacing:-.03em;line-height:1.05;color:var(--navy);margin-bottom:var(--sp3)}
.feature-headline em{color:var(--trellis);font-style:italic}
.feature-headline.light{color:white}.feature-headline.light em{color:var(--teal)}
.feature-body{font-size:clamp(14px,1.4vw,16px);color:var(--n600);font-weight:300;line-height:1.85;margin-bottom:var(--sp4)}
.feature-body.light{color:rgba(255,255,255,.75)}
.feature-bullets{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:var(--sp3)}
.feature-bullet{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--n600);line-height:1.5}
.feature-bullet.light{color:rgba(255,255,255,.78)}
.feature-bullet-icon{width:18px;height:18px;border-radius:50%;background:var(--trellis-light);color:var(--trellis);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;margin-top:1px}
.feature-bullet.light .feature-bullet-icon{background:rgba(45,122,95,.35);color:var(--teal)}
.feature-note{font-size:13px;color:var(--n400);font-style:italic;line-height:1.6}

/* SHARED MOCKUP CHROME */
.mockup-chrome{background:white;border-radius:var(--r20);box-shadow:0 32px 80px rgba(15,34,51,.22),0 0 0 1px rgba(15,34,51,.07);overflow:hidden}
.mockup-chrome.gray{background:#f0f2f5}
.titlebar{height:36px;background:rgba(15,34,51,.04);border-bottom:1px solid rgba(15,34,51,.06);display:flex;align-items:center;padding:0 14px;gap:8px}
.td{width:10px;height:10px;border-radius:50%}
.td-r{background:#FF5F57}.td-y{background:#FFBD2E}.td-g{background:#28CA41}

/* SEATING CHART MOCKUP */
.cm-toolbar{background:var(--navy);padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.cm-title{font-size:11px;font-weight:600;color:white;font-family:var(--font-mono)}
.cm-icons{display:flex;gap:5px}
.cm-icon{width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;color:rgba(255,255,255,.72)}
.cm-grid{padding:10px;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;background:#f0f2f5}
.seat{aspect-ratio:1;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:8.5px;font-weight:600;cursor:pointer;transition:transform .12s;padding:3px;text-align:center}
.seat:hover{transform:scale(1.07)}
.seat.empty{background:white;border:1.5px dashed var(--n200)}
.seat.empty::after{content:'+';font-size:15px;color:var(--n200)}
.seat.sr{background:var(--crl);border:1.5px solid var(--crb)}
.seat.so{background:var(--col);border:1.5px solid var(--cob)}
.seat.sy{background:var(--cyl);border:1.5px solid var(--cyb)}
.seat.sg{background:var(--cgl);border:1.5px solid var(--cgb)}
.seat.sb{background:var(--cbl);border:1.5px solid var(--cbb)}
.seat.pulse{animation:pulse-seat 1.5s ease-in-out infinite}
@keyframes pulse-seat{0%,100%{box-shadow:0 0 0 0 rgba(45,122,95,.4)}50%{box-shadow:0 0 0 6px rgba(45,122,95,0)}}
.seat-name{font-size:8px;font-weight:700;color:var(--navy);line-height:1.2}
.seat-count{font-size:7.5px;color:var(--n400);font-family:var(--font-mono)}

/* PARTICIPATION WINDOW */
.pw{background:white;border-radius:var(--r16);box-shadow:0 24px 60px rgba(15,34,51,.2),0 0 0 1px rgba(15,34,51,.06);overflow:hidden}
.pw-hdr{background:var(--navy);padding:12px 14px 0}
.pw-hdr-top{display:flex;align-items:flex-start;justify-content:space-between;padding-bottom:10px}
.pw-student-name{font-family:var(--font-display);font-size:17px;color:white;letter-spacing:-.02em;line-height:1}
.pw-student-email{font-size:10px;color:rgba(255,255,255,.58);font-family:var(--font-mono);margin-top:2px}
.pw-close{color:rgba(255,255,255,.4);font-size:16px;cursor:pointer}
.pw-tabs{display:flex}
.pw-tab{padding:8px 12px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border-bottom:2px solid transparent;color:rgba(255,255,255,.45)}
.pw-tab.on{color:var(--teal);border-bottom-color:var(--teal)}
.pw-body{padding:13px}
.pw-label{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);margin-bottom:6px;font-family:var(--font-mono)}
.pw-colors{display:flex;gap:5px;margin-bottom:3px}
.pw-color-btn{flex:1;height:34px;border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:800;font-family:var(--font-mono);border:2px solid transparent;transition:transform .1s}
.pw-color-btn.sel{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.18)}
.pw-color-btn.cr{background:var(--cr);color:white;border-color:var(--cr)}
.pw-color-btn.co{background:var(--co);color:white;border-color:var(--co)}
.pw-color-btn.cy{background:var(--cy);color:white;border-color:var(--cy)}
.pw-color-btn.cg{background:var(--cg);color:white;border-color:var(--cg)}
.pw-color-btn.cb{background:var(--cb);color:white;border-color:var(--cb)}
.pw-bar-labels{display:flex;justify-content:space-between;margin-bottom:8px}
.pw-bar-lbl{font-size:8px;color:var(--n400);font-family:var(--font-mono)}
.pw-competencies{background:var(--col);border:1px solid var(--cob);border-radius:7px;padding:8px 10px;margin-bottom:8px}
.pw-comp-lbl{font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--co);margin-bottom:4px}
.pw-comp{font-size:10px;color:#7B3B00;display:flex;align-items:center;gap:4px;margin-bottom:2px}
.pw-comp::before{content:'·';font-size:12px;color:var(--co)}
.pw-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:8px}
.pw-mini{text-align:center;background:var(--warm-white);border-radius:7px;border:1px solid var(--n100);padding:5px}
.pw-mini-num{font-family:var(--font-display);font-size:17px;letter-spacing:-.03em;line-height:1}
.pw-mini-num.g{color:var(--cg)}.pw-mini-num.b{color:var(--cb)}.pw-mini-num.o{color:var(--co)}
.pw-mini-lbl{font-size:8px;color:var(--n400);font-family:var(--font-mono);margin-top:1px}
.pw-interventions{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.pw-intv{display:flex;align-items:center;justify-content:space-between;padding:5px 7px;border-radius:5px;background:var(--warm-white);border:1px solid var(--n100);cursor:pointer}
.pw-intv:hover{background:var(--trellis-light)}
.pw-intv-name{font-size:11px;color:var(--navy);font-weight:500}
.pw-check{width:15px;height:15px;border-radius:3px;border:1.5px solid var(--n200)}
.pw-check.on{background:var(--trellis);border-color:var(--trellis);display:flex;align-items:center;justify-content:center;font-size:8px;color:white}
.pw-notes{width:100%;height:36px;border-radius:5px;border:1px solid var(--n100);background:var(--warm-white);padding:5px 7px;font-size:11px;color:var(--n400);font-family:var(--font-body);resize:none;margin-bottom:8px}
.pw-save-row{display:flex;justify-content:flex-end;border-top:1px solid var(--n100);padding-top:8px}
.pw-save{background:var(--trellis);color:white;border:none;padding:7px 16px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer}

/* HISTORY TAB MOCKUP */
.history-mockup{background:white;border-radius:var(--r16);box-shadow:0 24px 60px rgba(15,34,51,.18),0 0 0 1px rgba(15,34,51,.06);overflow:hidden}
.hm-hdr{background:var(--navy);padding:12px 14px}
.hm-hdr-name{font-family:var(--font-display);font-size:15px;color:white;letter-spacing:-.02em}
.hm-hdr-sub{font-size:10px;color:rgba(255,255,255,.5);font-family:var(--font-mono);margin-top:2px}
.hm-tabs{display:flex;background:var(--navy);padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.hm-tab{padding:7px 11px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-bottom:2px solid transparent;color:rgba(255,255,255,.4);cursor:pointer}
.hm-tab.on{color:var(--teal);border-bottom-color:var(--teal)}
.hm-body{padding:14px;display:flex;flex-direction:column;gap:8px}
.hm-entry{display:flex;gap:10px;align-items:flex-start}
.hm-entry-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:3px}
.hm-entry-dot.g{background:var(--cg)}.hm-entry-dot.o{background:var(--co)}.hm-entry-dot.y{background:var(--cy)}.hm-entry-dot.n{background:var(--navy)}.hm-entry-dot.t{background:var(--teal)}
.hm-entry-body{flex:1}
.hm-entry-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.hm-entry-type{font-size:10px;font-weight:700;color:var(--navy)}
.hm-entry-time{font-size:9px;color:var(--n400);font-family:var(--font-mono)}
.hm-entry-detail{font-size:11px;color:var(--n600);line-height:1.5}
.hm-entry-tags{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}
.hm-tag{font-size:9px;padding:2px 6px;border-radius:4px;font-family:var(--font-mono);font-weight:600}
.hm-tag.g{background:var(--cgl);color:var(--cg)}
.hm-tag.o{background:var(--col);color:var(--co)}
.hm-tag.y{background:var(--cyl);color:var(--cy)}
.hm-tag.n{background:rgba(26,58,82,.08);color:var(--navy)}
.hm-divider{height:1px;background:var(--n100);margin:2px 0}

/* SNAPSHOT SECTION — what accumulates over time */
.snapshot-section{background:var(--navy-dark);padding:var(--sp10) 0;position:relative;overflow:hidden}
.snapshot-section::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.snapshot-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4);position:relative;z-index:2}
.snapshot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp4);margin-top:var(--sp8)}
.snapshot-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r16);padding:var(--sp4)}
.snapshot-card-icon{width:44px;height:44px;border-radius:var(--r12);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:var(--sp2)}
.snapshot-card-icon.teal{background:rgba(80,197,183,.15)}
.snapshot-card-icon.green{background:rgba(45,122,95,.2)}
.snapshot-card-icon.navy{background:rgba(255,255,255,.08)}
.snapshot-card-title{font-family:var(--font-display);font-size:20px;letter-spacing:-.02em;color:white;margin-bottom:6px}
.snapshot-card-body{font-size:13px;color:rgba(255,255,255,.68);line-height:1.65;font-weight:300}

/* PRIVACY / TRUST CALLOUT */
.trust-section{background:var(--trellis-light);border-top:1px solid rgba(45,122,95,.1);border-bottom:1px solid rgba(45,122,95,.1);padding:var(--sp10) 0}
.trust-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp4);margin-top:var(--sp8)}
.trust-item{text-align:center;padding:var(--sp3)}
.trust-item-icon{font-size:28px;margin-bottom:var(--sp2)}
.trust-item-title{font-family:var(--font-display);font-size:17px;letter-spacing:-.02em;color:var(--navy);margin-bottom:6px}
.trust-item-body{font-size:13px;color:var(--n600);line-height:1.6;font-weight:300}

/* CTA */

/* Responsive — FEATURES — DOCUMENTATION */
@media(max-width:960px){
  .nav-links{display:none}.nav-mobile-toggle{display:flex}
  .hero-inner,.contrast-grid,.feature-row,.feature-row.flip,.feature-row.wide-mockup,.feature-row.wide-copy{grid-template-columns:1fr;direction:ltr}
  .feature-row.flip>*{direction:ltr}
  .contrast-arrow{padding-top:0;padding:var(--sp2) 0}
  .steps-grid{grid-template-columns:1fr 1fr;gap:var(--sp3)}
  .steps-grid::before{display:none}
  .snapshot-grid,.trust-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp4)}
  .footer-grid>div:first-child{grid-column:1/-1}
}


/* ════════════════════════════════════════════════════════════════════════════════
   FEATURES — EQUITY SELECTOR — features/equity-selector.html
   ════════════════════════════════════════════════════════════════════════════════ */

/* HERO */
.hero{background:var(--navy-dark);overflow:hidden;position:relative}
.hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-100px;right:-100px;width:700px;height:700px;background:radial-gradient(ellipse at 70% 70%,rgba(80,197,183,.12) 0%,transparent 65%);pointer-events:none}
.hero-inner{max-width:1100px;margin:0 auto;padding:var(--sp8) var(--sp4) var(--sp10);display:grid;grid-template-columns:1fr 500px;gap:var(--sp10);align-items:center;position:relative;z-index:2}
.hero-eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:var(--sp3)}
.hero-headline{font-family:var(--font-display);font-size:clamp(36px,4.5vw,58px);letter-spacing:-.04em;line-height:.93;color:white;margin-bottom:var(--sp4)}
.hero-headline em{color:var(--teal);font-style:italic}
.hero-sub{font-size:clamp(15px,1.5vw,17px);color:rgba(255,255,255,.72);font-weight:300;line-height:1.8;margin-bottom:var(--sp6)}
.hero-ctas{display:flex;gap:var(--sp2);flex-wrap:wrap}

/* HERO SEATING CHART MOCKUP — full featured with counts + equity callout */
.hero-mockup-wrap{position:relative}
.hero-chart{background:white;border-radius:var(--r20);box-shadow:0 32px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06);overflow:hidden}
.hc-toolbar{background:var(--navy);padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.hc-title{font-size:11px;font-weight:600;color:white;font-family:var(--font-mono)}
.hc-view-tabs{display:flex;gap:3px}
.hc-tab{padding:4px 9px;border-radius:5px;font-size:10px;font-weight:600;cursor:pointer;border:none;font-family:var(--font-body)}
.hc-tab.on{background:var(--trellis);color:white}
.hc-tab.off{background:rgba(255,255,255,.08);color:rgba(255,255,255,.55)}
.hc-icons{display:flex;gap:5px}
.hc-icon{width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;color:rgba(255,255,255,.7)}
.hc-icon.equity-on{background:var(--teal);color:var(--navy-dark);animation:epulse 2s ease-in-out infinite}
@keyframes epulse{0%,100%{box-shadow:0 0 0 0 rgba(80,197,183,.5)}60%{box-shadow:0 0 0 8px rgba(80,197,183,0)}}
.hc-grid{padding:10px;display:grid;grid-template-columns:repeat(5,1fr);gap:7px;background:#f0f2f5}

/* SEAT COMPONENT — includes visible count */
.seat{border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 4px 5px;cursor:pointer;transition:transform .12s,box-shadow .12s;text-align:center;min-height:52px}
.seat:hover{transform:scale(1.06)}
.seat.empty{background:white;border:1.5px dashed var(--n200);min-height:52px}
.seat.empty::after{content:'+';font-size:16px;color:var(--n200)}
.seat.sr{background:var(--crl);border:1.5px solid var(--crb)}
.seat.so{background:var(--col);border:1.5px solid var(--cob)}
.seat.sy{background:var(--cyl);border:1.5px solid var(--cyb)}
.seat.sg{background:var(--cgl);border:1.5px solid var(--cgb)}
.seat.sb{background:var(--cbl);border:1.5px solid var(--cbb)}
/* Highlighted seat — equity selector surfaced student */
.seat.equity-surfaced{border-width:2px;border-color:var(--teal)!important;box-shadow:0 0 0 3px rgba(80,197,183,.35),0 0 14px rgba(80,197,183,.4)}
.seat-name{font-size:9px;font-weight:700;color:var(--navy);line-height:1.2;margin-bottom:2px}
/* THE KEY UI ELEMENT: visible interaction count badge on every seat */
.seat-count{font-size:9px;font-family:var(--font-mono);font-weight:700;padding:1px 5px;border-radius:4px;background:rgba(15,34,51,.08);color:var(--n600);line-height:1.4}
.seat.sr .seat-count{background:rgba(229,62,62,.12);color:var(--cr)}
.seat.so .seat-count{background:rgba(221,107,32,.12);color:var(--co)}
.seat.sy .seat-count{background:rgba(200,150,10,.12);color:var(--cy)}
.seat.sg .seat-count{background:rgba(45,122,95,.12);color:var(--cg)}
.seat.sb .seat-count{background:rgba(43,108,176,.12);color:var(--cb)}
.seat.equity-surfaced .seat-count{background:rgba(80,197,183,.2);color:var(--teal)!important}

/* Equity callout floating card */
.equity-callout{position:absolute;bottom:-16px;right:-16px;z-index:5;width:230px}
.equity-callout-badge{display:inline-flex;align-items:center;gap:6px;background:var(--teal);color:var(--navy-dark);font-size:10px;font-weight:800;padding:5px 12px;border-radius:40px;margin-bottom:8px;font-family:var(--font-mono);box-shadow:var(--shadow-teal)}
.equity-callout-card{background:white;border-radius:var(--r16);padding:14px;box-shadow:var(--shadow-lg);border:1px solid rgba(80,197,183,.15)}
.ecc-label{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);font-family:var(--font-mono);margin-bottom:3px}
.ecc-name{font-family:var(--font-display);font-size:20px;color:var(--navy);letter-spacing:-.03em;line-height:1;margin-bottom:3px}
.ecc-detail{font-size:10px;color:var(--n400);font-family:var(--font-mono);margin-bottom:10px}
.ecc-btn{display:block;background:var(--trellis);color:white;border-radius:var(--r8);padding:8px;font-size:11px;font-weight:700;text-align:center;cursor:pointer}

/* COUNTS EXPLAINER CALLOUT */
.counts-explainer{background:var(--navy-dark);border-top:1px solid rgba(255,255,255,.06);padding:var(--sp6) 0}
.counts-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.counts-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp4);margin-top:var(--sp4)}
.count-point{display:flex;gap:12px;align-items:flex-start}
.count-point-icon{width:36px;height:36px;border-radius:var(--r8);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.count-point-icon.teal{background:rgba(80,197,183,.15)}
.count-point-icon.green{background:rgba(45,122,95,.2)}
.count-point-icon.white{background:rgba(255,255,255,.07)}
.count-point-title{font-size:13px;font-weight:700;color:white;margin-bottom:3px}
.count-point-body{font-size:12px;color:rgba(255,255,255,.6);line-height:1.55;font-weight:300}

/* PROBLEM SECTION */
.problem-section{background:white;border-top:1px solid var(--n100);border-bottom:1px solid var(--n100);padding:var(--sp10) 0}
.problem-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.pull-quote{max-width:800px;margin:var(--sp8) auto 0;text-align:center;padding:var(--sp6) var(--sp8);background:var(--trellis-light);border-radius:var(--r20);border:1.5px solid rgba(45,122,95,.15);position:relative}
.pull-quote::before{content:'\201C';font-family:var(--font-display);font-size:120px;color:rgba(45,122,95,.1);position:absolute;top:-20px;left:var(--sp4);line-height:1}
.pull-quote-text{font-family:var(--font-display);font-size:clamp(20px,2.5vw,28px);letter-spacing:-.03em;line-height:1.3;color:var(--navy);position:relative;z-index:1}
.pull-quote-text em{color:var(--trellis);font-style:italic}
.pull-quote-source{font-size:12px;color:var(--n400);font-family:var(--font-mono);margin-top:var(--sp2)}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp4);margin-top:var(--sp8)}
.stat-card{padding:var(--sp4);background:var(--warm-white);border-radius:var(--r16);border:1.5px solid var(--n100);text-align:center}
.stat-num{font-family:var(--font-display);font-size:clamp(36px,5vw,56px);letter-spacing:-.05em;line-height:1;margin-bottom:4px}
.stat-num.teal{color:var(--teal)}.stat-num.green{color:var(--trellis)}.stat-num.navy{color:var(--navy)}
.stat-label{font-size:13px;color:var(--n600);font-weight:400;line-height:1.5}
.stat-sub{font-size:11px;color:var(--n400);font-weight:300;margin-top:4px;font-family:var(--font-mono)}

/* TWO-LAYER EXPLAINER */
.two-layer-section{background:var(--trellis-light);border-top:1px solid rgba(45,122,95,.1);border-bottom:1px solid rgba(45,122,95,.1);padding:var(--sp10) 0}
.two-layer-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.two-layer-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp6);margin-top:var(--sp8)}
.layer-card{background:white;border-radius:var(--r20);padding:var(--sp6);border:1.5px solid var(--n100);box-shadow:var(--shadow-sm)}
.layer-card.teal-accent{border-color:rgba(80,197,183,.3);background:white}
.layer-card-badge{display:inline-flex;align-items:center;gap:6px;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-mono);padding:4px 10px;border-radius:20px;margin-bottom:var(--sp3)}
.layer-card-badge.always{background:var(--trellis-light);color:var(--trellis-dark)}
.layer-card-badge.tap{background:rgba(80,197,183,.12);color:#0a6b60}
.layer-card-title{font-family:var(--font-display);font-size:clamp(20px,2.2vw,28px);letter-spacing:-.03em;color:var(--navy);margin-bottom:var(--sp2);line-height:1.1}
.layer-card-title em{color:var(--trellis);font-style:italic}
.layer-card-title.teal em{color:var(--teal)}
.layer-card-body{font-size:14px;color:var(--n600);font-weight:300;line-height:1.75;margin-bottom:var(--sp3)}
.layer-card-points{display:flex;flex-direction:column;gap:8px}
.layer-card-point{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--n600);line-height:1.5}
.layer-card-point-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:5px}
.layer-card-point-dot.green{background:var(--trellis)}
.layer-card-point-dot.teal{background:var(--teal)}

/* SEAT ANATOMY DIAGRAM */
.anatomy-section{background:white;border-top:1px solid var(--n100);border-bottom:1px solid var(--n100);padding:var(--sp10) 0}
.anatomy-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.anatomy-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp10);align-items:center;margin-top:var(--sp8)}
.anatomy-copy{}
.anatomy-headline{font-family:var(--font-display);font-size:clamp(24px,2.8vw,38px);letter-spacing:-.03em;line-height:1.05;color:var(--navy);margin-bottom:var(--sp3)}
.anatomy-headline em{color:var(--trellis);font-style:italic}
.anatomy-body{font-size:clamp(14px,1.4vw,16px);color:var(--n600);font-weight:300;line-height:1.85;margin-bottom:var(--sp4)}
.anatomy-points{display:flex;flex-direction:column;gap:var(--sp3)}
.anatomy-point{display:flex;gap:var(--sp2);align-items:flex-start}
.anatomy-point-icon{width:36px;height:36px;border-radius:var(--r8);background:var(--trellis-light);border:1.5px solid rgba(45,122,95,.15);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;margin-top:2px}
.anatomy-point-title{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:2px}
.anatomy-point-body{font-size:13px;color:var(--n600);line-height:1.55;font-weight:300}

/* LARGE SEAT DIAGRAM */
.seat-diagram{display:flex;flex-direction:column;align-items:center;gap:var(--sp6)}
.seat-diagram-main{position:relative;width:180px;height:180px}
.seat-demo{width:180px;height:180px;border-radius:20px;background:var(--cgl);border:2.5px solid var(--cgb);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:var(--shadow-md)}
.seat-demo-name{font-size:16px;font-weight:700;color:var(--navy);font-family:var(--font-body)}
.seat-demo-count{font-size:14px;font-family:var(--font-mono);font-weight:800;padding:4px 12px;border-radius:6px;background:rgba(45,122,95,.12);color:var(--cg)}
/* Annotation labels */
.annot{position:absolute;display:flex;align-items:center;gap:6px}
.annot-line{height:1px;background:var(--n300)}
.annot-text{font-size:11px;font-family:var(--font-mono);color:var(--n600);white-space:nowrap}
.annot.name-annot{top:52px;right:-170px}
.annot.count-annot{bottom:54px;right:-200px}
.seat-diagram-grid{width:100%;background:white;border-radius:var(--r16);border:1.5px solid var(--n100);overflow:hidden;box-shadow:var(--shadow-sm)}
.sdg-label{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);font-family:var(--font-mono);padding:8px 12px 4px;border-bottom:1px solid var(--n100)}
.sdg-grid{padding:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;background:#f5f5f2}
.sdg-seat{border-radius:7px;padding:5px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;text-align:center}
.sdg-seat.sg{background:var(--cgl);border:1.5px solid var(--cgb)}
.sdg-seat.sy{background:var(--cyl);border:1.5px solid var(--cyb)}
.sdg-seat.so{background:var(--col);border:1.5px solid var(--cob)}
.sdg-seat.sr{background:var(--crl);border:1.5px solid var(--crb)}
.sdg-seat.sb{background:var(--cbl);border:1.5px solid var(--cbb)}
.sdg-seat.es{background:var(--teal);border:2px solid rgba(80,197,183,.5);box-shadow:0 0 0 3px rgba(80,197,183,.25)}
.sdg-name{font-size:8.5px;font-weight:700;color:var(--navy);line-height:1.2;margin-bottom:2px}
.sdg-count{font-size:8.5px;font-family:var(--font-mono);font-weight:700;padding:1px 4px;border-radius:3px}
.sdg-seat.sg .sdg-count{background:rgba(45,122,95,.1);color:var(--cg)}
.sdg-seat.sy .sdg-count{background:rgba(200,150,10,.1);color:var(--cy)}
.sdg-seat.so .sdg-count{background:rgba(221,107,32,.12);color:var(--co)}
.sdg-seat.sr .sdg-count{background:rgba(229,62,62,.1);color:var(--cr)}
.sdg-seat.sb .sdg-count{background:rgba(43,108,176,.1);color:var(--cb)}
.sdg-seat.es .sdg-count{background:rgba(10,107,96,.2);color:#0a6b60;font-weight:800}
.sdg-key{padding:8px 12px;border-top:1px solid var(--n100);display:flex;align-items:center;gap:8px}
.sdg-key-teal{width:10px;height:10px;border-radius:50%;background:var(--teal);flex-shrink:0}
.sdg-key-text{font-size:10px;color:var(--n600);font-style:italic}

/* HOW IT WORKS STEPS */
.how-section{background:var(--navy-dark);padding:var(--sp10) 0;position:relative;overflow:hidden}
.how-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(80,197,183,.05) 0%,transparent 70%);pointer-events:none}
.how-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4);position:relative;z-index:2}
.how-steps{display:flex;flex-direction:column;gap:0;margin-top:var(--sp8)}
.how-step{display:grid;grid-template-columns:64px 1fr 280px;gap:var(--sp6);align-items:center;padding:var(--sp5) 0;border-bottom:1px solid rgba(255,255,255,.07)}
.how-step:last-child{border-bottom:none}
.sp5{padding-top:40px;padding-bottom:40px}
.how-step-num{font-family:var(--font-display);font-size:56px;letter-spacing:-.06em;line-height:1;text-align:center}
.how-step:nth-child(1) .how-step-num{color:rgba(80,197,183,.3)}
.how-step:nth-child(2) .how-step-num{color:rgba(80,197,183,.5)}
.how-step:nth-child(3) .how-step-num{color:rgba(80,197,183,.75)}
.how-step:nth-child(4) .how-step-num{color:var(--teal)}
.how-step-copy{}
.how-step-eyebrow{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:6px;font-family:var(--font-mono)}
.how-step-title{font-family:var(--font-display);font-size:clamp(18px,2vw,24px);letter-spacing:-.03em;color:white;margin-bottom:8px}
.how-step-body{font-size:14px;color:rgba(255,255,255,.62);font-weight:300;line-height:1.7}
.how-step-visual{display:flex;align-items:center;justify-content:center}

/* Mini grid for step visuals */
.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px;background:rgba(255,255,255,.04);border-radius:var(--r12);border:1px solid rgba(255,255,255,.08)}
.mini-seat{border-radius:6px;padding:4px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:38px;text-align:center}
.mini-seat.sg{background:var(--cgl);border:1.5px solid var(--cgb)}
.mini-seat.sy{background:var(--cyl);border:1.5px solid var(--cyb)}
.mini-seat.so{background:var(--col);border:1.5px solid var(--cob)}
.mini-seat.sr{background:var(--crl);border:1.5px solid var(--crb)}
.mini-seat.sb{background:var(--cbl);border:1.5px solid var(--cbb)}
.mini-seat.es{background:rgba(80,197,183,.15);border:2px solid var(--teal);box-shadow:0 0 0 3px rgba(80,197,183,.25)}
.mini-n{font-size:7.5px;font-weight:700;color:var(--navy);line-height:1.1}
.mini-c{font-size:7.5px;font-family:var(--font-mono);font-weight:700}
.mini-seat.sg .mini-c{color:var(--cg)}
.mini-seat.sy .mini-c{color:var(--cy)}
.mini-seat.so .mini-c{color:var(--co)}
.mini-seat.sr .mini-c{color:var(--cr)}
.mini-seat.sb .mini-c{color:var(--cb)}
.mini-seat.es .mini-c{color:var(--teal);font-weight:800}
.mini-label{font-size:9px;color:rgba(255,255,255,.5);font-family:var(--font-mono);text-align:center;margin-top:6px}

/* Participation window mini for step 3 */
.pw-step{background:white;border-radius:var(--r12);box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid var(--n100)}
.pw-step-hdr{background:var(--navy);padding:9px 11px}
.pw-step-name{font-family:var(--font-display);font-size:13px;color:white;letter-spacing:-.02em}
.pw-step-via{font-size:9px;color:var(--teal);font-family:var(--font-mono);margin-top:1px}
.pw-step-body{padding:10px}
.pw-step-label{font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);margin-bottom:4px;font-family:var(--font-mono)}
.pw-step-colors{display:flex;gap:3px;margin-bottom:7px}
.pw-step-color{flex:1;height:26px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:7.5px;font-weight:800;font-family:var(--font-mono)}
.pw-step-color.cr{background:var(--cr);color:white}
.pw-step-color.co{background:var(--co);color:white}
.pw-step-color.cy{background:var(--cy);color:white}
.pw-step-color.cg{background:var(--cg);color:white;transform:translateY(-2px);box-shadow:0 3px 8px rgba(45,122,95,.35)}
.pw-step-color.cb{background:var(--cb);color:white}
.pw-step-intv{display:flex;flex-direction:column;gap:3px}
.pw-step-row{display:flex;align-items:center;justify-content:space-between;padding:4px 6px;border-radius:4px;background:var(--warm-white);border:1px solid var(--n100)}
.pw-step-row-name{font-size:10px;color:var(--navy);font-weight:500}
.pw-step-check{width:12px;height:12px;border-radius:3px;border:1.5px solid var(--n200)}
.pw-step-check.on{background:var(--trellis);border-color:var(--trellis);display:flex;align-items:center;justify-content:center;font-size:7px;color:white}
.pw-step-save{margin-top:8px;width:100%;background:var(--trellis);color:white;border:none;padding:6px;border-radius:5px;font-size:10px;font-weight:700;cursor:pointer;font-family:var(--font-body)}

/* INVISIBLE BY DESIGN */
.invisible-section{background:var(--warm-white);border-top:1px solid var(--n100);border-bottom:1px solid var(--n100);padding:var(--sp10) 0}
.invisible-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.not-list{background:white;border-radius:var(--r20);border:1.5px solid var(--n100);overflow:hidden;box-shadow:var(--shadow-md);margin-top:var(--sp8)}
.not-list-header{display:grid;grid-template-columns:1fr 1fr;background:var(--warm-white);border-bottom:2px solid var(--n100)}
.nlh-col{padding:12px var(--sp3);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-mono)}
.nlh-col.bad{color:rgba(200,16,46,.65);border-right:1px solid var(--n100)}
.nlh-col.good{color:var(--trellis)}
.not-list-rows{display:flex;flex-direction:column}
.nlr{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--n100)}
.nlr:last-child{border-bottom:none}
.nlc{padding:11px var(--sp3);font-size:13px;line-height:1.55}
.nlc.bad{background:rgba(200,16,46,.02);color:var(--n600);border-right:1px solid var(--n100)}
.nlc.good{color:var(--trellis-dark);font-weight:500}
.nlc.good strong{color:var(--trellis)}

/* EQUITY OVER TIME */
.over-time-section{background:white;border-top:1px solid var(--n100);border-bottom:1px solid var(--n100);padding:var(--sp10) 0}
.over-time-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.ot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp4);margin-top:var(--sp8)}
.ot-card{background:var(--warm-white);border-radius:var(--r16);padding:var(--sp4);border:1.5px solid var(--n100)}
.ot-period{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-mono);margin-bottom:var(--sp2)}
.ot-period.w1{color:var(--co)}.ot-period.w6{color:var(--cy)}.ot-period.w12{color:var(--cg)}
.ot-title{font-family:var(--font-display);font-size:18px;letter-spacing:-.02em;color:var(--navy);margin-bottom:var(--sp3)}
.ot-students{display:flex;flex-direction:column;gap:6px}
.ot-student{display:flex;align-items:center;gap:8px}
.ot-name{font-size:11px;color:var(--navy);font-weight:500;width:70px;flex-shrink:0}
.ot-bar-wrap{flex:1;height:8px;background:var(--n100);border-radius:4px;overflow:hidden}
.ot-bar{height:100%;border-radius:4px}
.ot-count{font-size:10px;font-family:var(--font-mono);width:24px;text-align:right;flex-shrink:0}

/* RESEARCH BAND */
.research-band{background:var(--navy);padding:var(--sp8) 0}
.research-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.research-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp4);margin-top:var(--sp6)}
.research-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r16);padding:var(--sp4)}
.rc-eyebrow{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:var(--sp2);font-family:var(--font-mono)}
.rc-body{font-size:13px;color:rgba(255,255,255,.72);line-height:1.65;font-weight:300;margin-bottom:var(--sp2)}
.rc-source{font-size:10px;color:rgba(255,255,255,.4);font-family:var(--font-mono);margin-bottom:var(--sp2)}
.rc-link{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--teal);font-weight:600}

/* CTA + FOOTER */

/* Responsive — FEATURES — EQUITY SELECTOR */
@media(max-width:960px){
  .nav-links{display:none}.nav-mobile-toggle{display:flex}
  .hero-inner,.two-layer-grid,.anatomy-row{grid-template-columns:1fr}
  .how-step{grid-template-columns:48px 1fr;gap:var(--sp3)}.how-step-visual{display:none}
  .stat-row,.ot-grid,.research-cards{grid-template-columns:1fr 1fr}
  .not-list-header,.nlr{grid-template-columns:1fr}
  .nlc.bad{border-right:none;border-bottom:1px solid var(--n100)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp4)}
  .footer-grid>div:first-child{grid-column:1/-1}
  .counts-grid{grid-template-columns:1fr}
}


/* ════════════════════════════════════════════════════════════════════════════════
   FEATURES — TRELLISES — features/trellises.html
   ════════════════════════════════════════════════════════════════════════════════ */


/* BREADCRUMB */
.breadcrumb{padding-top:calc(68px + var(--sp3));padding-bottom:var(--sp2);max-width:1100px;margin:0 auto;padding-left:var(--sp4);padding-right:var(--sp4)}
.breadcrumb-inner{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--n400);font-family:var(--font-mono)}
.breadcrumb-inner a{color:var(--trellis)}
.breadcrumb-sep{color:var(--n200)}

/* HERO */
.hero{background:var(--navy-dark);overflow:hidden;position:relative}
.hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-80px;left:50%;transform:translateX(-50%);width:900px;height:400px;background:radial-gradient(ellipse at 50% 100%,rgba(45,122,95,.28) 0%,transparent 70%);pointer-events:none}
.hero-inner{max-width:1100px;margin:0 auto;padding:var(--sp8) var(--sp4) var(--sp10);display:grid;grid-template-columns:1fr 400px;gap:var(--sp10);align-items:center;position:relative;z-index:2}
.hero-eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:var(--sp3)}
.hero-headline{font-family:var(--font-display);font-size:clamp(36px,4.5vw,56px);letter-spacing:-.04em;line-height:.93;color:white;margin-bottom:var(--sp4)}
.hero-headline em{color:var(--teal);font-style:italic}
.hero-sub{font-size:clamp(15px,1.5vw,17px);color:rgba(255,255,255,.75);font-weight:300;line-height:1.8;margin-bottom:var(--sp6)}
.hero-ctas{display:flex;gap:var(--sp2);flex-wrap:wrap}

/* HERO SIDEBAR MINI-MOCKUP */
.hero-sidebar-mockup{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r20);overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,.4);
}
.hsm-header{background:var(--navy);padding:12px 14px;display:flex;align-items:center;justify-content:space-between}
.hsm-title{font-family:var(--font-display);font-size:15px;color:white;letter-spacing:-.02em}
.hsm-close{color:rgba(255,255,255,.4);font-size:14px;cursor:pointer}
.hsm-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.08);padding:0 14px;background:var(--navy)}
.hsm-tab{padding:8px 12px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45);border-bottom:2px solid transparent;cursor:pointer}
.hsm-tab.on{color:var(--teal);border-bottom-color:var(--teal)}
.hsm-body{padding:14px;background:white}
.hsm-section-label{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);margin-bottom:8px;font-family:var(--font-mono)}
.hsm-add-row{display:flex;gap:6px;margin-bottom:10px}
.hsm-input{flex:1;border:1px solid var(--n100);border-radius:6px;padding:6px 8px;font-size:11px;color:var(--navy);font-family:var(--font-body)}
.hsm-add-btn{background:var(--trellis);color:white;border:none;padding:6px 10px;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font-body);white-space:nowrap}
.hsm-list{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.hsm-item{display:flex;align-items:center;justify-content:space-between;padding:7px 9px;border-radius:7px;background:var(--warm-white);border:1px solid var(--n100)}
.hsm-item-name{font-size:11px;color:var(--navy);font-weight:500}
.hsm-item-actions{display:flex;gap:4px}
.hsm-item-btn{font-size:9px;color:var(--n400);cursor:pointer;padding:2px 5px;border-radius:4px;border:1px solid var(--n100);background:white;font-family:var(--font-mono)}
.hsm-item-btn:hover{color:var(--trellis);border-color:var(--trellis)}
.hsm-link-label{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);margin-bottom:6px;font-family:var(--font-mono)}
.hsm-link-row{display:flex;gap:6px;align-items:center}
.hsm-link-select{flex:1;border:1px solid var(--n100);border-radius:6px;padding:5px 7px;font-size:11px;color:var(--navy);font-family:var(--font-body);background:white}
.hsm-link-btn{background:var(--navy);color:white;border:none;padding:5px 10px;border-radius:6px;font-size:10px;font-weight:700;cursor:pointer;font-family:var(--font-body)}

/* THREE BUILDING BLOCKS */
.blocks-section{background:white;border-top:1px solid var(--n100);border-bottom:1px solid var(--n100);padding:var(--sp10) 0}
.blocks-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.blocks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:var(--sp8);border:1.5px solid var(--n100);border-radius:var(--r20);overflow:hidden;box-shadow:var(--shadow-sm)}
.block-card{padding:var(--sp6) var(--sp4);border-right:1px solid var(--n100);position:relative;overflow:hidden}
.block-card:last-child{border-right:none}
.block-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px}
.block-card:nth-child(1)::before{background:var(--trellis)}
.block-card:nth-child(2)::before{background:var(--teal)}
.block-card:nth-child(3)::before{background:var(--navy)}
.block-num{font-family:var(--font-display);font-size:48px;letter-spacing:-.06em;line-height:1;margin-bottom:var(--sp2)}
.block-card:nth-child(1) .block-num{color:var(--trellis)}
.block-card:nth-child(2) .block-num{color:var(--teal)}
.block-card:nth-child(3) .block-num{color:var(--navy)}
.block-title{font-family:var(--font-display);font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;color:var(--navy);margin-bottom:8px}
.block-body{font-size:14px;color:var(--n600);line-height:1.7;font-weight:300;margin-bottom:var(--sp3)}
.block-examples{display:flex;flex-direction:column;gap:4px}
.block-example{font-size:11px;color:var(--n600);background:var(--warm-white);border:1px solid var(--n100);border-radius:6px;padding:5px 9px;font-family:var(--font-mono)}

/* FEATURE SECTIONS */
.feature-section{padding:var(--sp12) 0}
.feature-section.alt{background:white}
.feature-section.tinted{background:var(--trellis-light);border-top:1px solid rgba(45,122,95,.1);border-bottom:1px solid rgba(45,122,95,.1)}
.feature-section.dark{background:var(--navy-dark)}
.feature-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp10);align-items:center}
.feature-row.flip{direction:rtl}.feature-row.flip>*{direction:ltr}
.feature-row.wide-mockup{grid-template-columns:5fr 7fr}
.feature-row.wide-copy{grid-template-columns:7fr 5fr}

.feature-step{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--trellis);margin-bottom:var(--sp2);font-family:var(--font-mono)}
.feature-step.light{color:var(--teal)}
.feature-step-num{width:22px;height:22px;border-radius:50%;background:var(--trellis);color:white;font-size:10px;display:inline-flex;align-items:center;justify-content:center}
.feature-step-num.t{background:var(--teal);color:var(--navy)}
.feature-step-num.n{background:var(--navy)}
.feature-headline{font-family:var(--font-display);font-size:clamp(24px,2.8vw,38px);letter-spacing:-.03em;line-height:1.05;color:var(--navy);margin-bottom:var(--sp3)}
.feature-headline em{color:var(--trellis);font-style:italic}
.feature-headline.light{color:white}.feature-headline.light em{color:var(--teal)}
.feature-body{font-size:clamp(14px,1.4vw,16px);color:var(--n600);font-weight:300;line-height:1.85;margin-bottom:var(--sp4)}
.feature-body.light{color:rgba(255,255,255,.75)}
.feature-bullets{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:var(--sp3)}
.feature-bullet{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--n600);line-height:1.5}
.feature-bullet.light{color:rgba(255,255,255,.78)}
.feature-bullet-icon{width:18px;height:18px;border-radius:50%;background:var(--trellis-light);color:var(--trellis);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;margin-top:1px}
.feature-bullet.light .feature-bullet-icon{background:rgba(45,122,95,.35);color:var(--teal)}
.feature-note{font-size:13px;color:var(--n400);font-style:italic;line-height:1.6}
.feature-note.light{color:rgba(255,255,255,.5)}

/* MOCKUP CHROME */
.mockup-chrome{background:white;border-radius:var(--r20);box-shadow:0 32px 80px rgba(15,34,51,.22),0 0 0 1px rgba(15,34,51,.07);overflow:hidden}
.mockup-chrome.gray{background:#f0f2f5}
.titlebar{height:36px;background:rgba(15,34,51,.04);border-bottom:1px solid rgba(15,34,51,.06);display:flex;align-items:center;padding:0 14px;gap:8px}
.td{width:10px;height:10px;border-radius:50%}
.td-r{background:#FF5F57}.td-y{background:#FFBD2E}.td-g{background:#28CA41}

/* BUILD YOUR TRELLIS SIDEBAR MOCKUP — large version */
.sidebar-mockup{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--r20);overflow:hidden;box-shadow:0 32px 80px rgba(15,34,51,.22),0 0 0 1px rgba(15,34,51,.07)}
.sm-left{background:#f0f2f5;padding:var(--sp3);display:flex;flex-direction:column;gap:6px}
.sm-left-label{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);margin-bottom:4px;font-family:var(--font-mono)}
.sm-nav-item{padding:8px 10px;border-radius:8px;font-size:12px;font-weight:500;color:var(--n600);cursor:pointer;display:flex;align-items:center;gap:8px}
.sm-nav-item.active{background:white;color:var(--trellis);font-weight:700;box-shadow:var(--shadow-sm)}
.sm-nav-item-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sm-right{background:white;padding:var(--sp3)}
.sm-right-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp3);padding-bottom:var(--sp2);border-bottom:1px solid var(--n100)}
.sm-right-title{font-family:var(--font-display);font-size:16px;color:var(--navy);letter-spacing:-.02em}
.sm-right-sub{font-size:10px;color:var(--n400);font-family:var(--font-mono);margin-top:2px}
.sm-add-row{display:flex;gap:6px;margin-bottom:var(--sp2)}
.sm-input{flex:1;border:1.5px solid var(--n100);border-radius:7px;padding:7px 10px;font-size:12px;color:var(--navy);font-family:var(--font-body)}
.sm-input:focus{outline:none;border-color:var(--trellis)}
.sm-btn{background:var(--trellis);color:white;border:none;padding:7px 12px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font-body);white-space:nowrap}
.sm-list{display:flex;flex-direction:column;gap:4px;margin-bottom:var(--sp3)}
.sm-list-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:8px;background:var(--warm-white);border:1px solid var(--n100);transition:border-color .12s}
.sm-list-item:hover{border-color:rgba(45,122,95,.2)}
.sm-list-item.default{border-left:3px solid var(--n200)}
.sm-list-item.custom{border-left:3px solid var(--trellis)}
.sm-list-item-left{display:flex;align-items:center;gap:8px}
.sm-list-item-name{font-size:11px;color:var(--navy);font-weight:500}
.sm-list-item-badge{font-size:8px;font-weight:700;padding:2px 5px;border-radius:4px;font-family:var(--font-mono)}
.sm-list-item-badge.def{background:var(--n100);color:var(--n400)}
.sm-list-item-badge.cust{background:var(--trellis-light);color:var(--trellis-dark)}
.sm-list-item-badge.dist{background:rgba(26,58,82,.08);color:var(--navy)}
.sm-list-item-actions{display:flex;gap:3px}
.sm-list-item-action{font-size:9px;color:var(--n400);cursor:pointer;padding:2px 5px;border-radius:4px;border:1px solid var(--n100);background:white;font-family:var(--font-mono)}
.sm-list-item-action:hover{color:var(--trellis);border-color:var(--trellis)}
.sm-link-section{border-top:1px solid var(--n100);padding-top:var(--sp2)}
.sm-link-title{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);margin-bottom:6px;font-family:var(--font-mono)}
.sm-link-tabs{display:flex;gap:4px;margin-bottom:8px}
.sm-link-tab{padding:4px 10px;border-radius:5px;font-size:10px;font-weight:600;cursor:pointer;border:1.5px solid var(--n100);background:white;color:var(--n600);font-family:var(--font-body)}
.sm-link-tab.on{background:var(--trellis-light);border-color:var(--trellis);color:var(--trellis-dark)}
.sm-link-row{display:flex;gap:6px}
.sm-link-select{flex:1;border:1px solid var(--n100);border-radius:6px;padding:5px 7px;font-size:11px;color:var(--navy);font-family:var(--font-body);background:white}
.sm-link-go{background:var(--navy);color:white;border:none;padding:5px 10px;border-radius:6px;font-size:10px;font-weight:700;cursor:pointer;font-family:var(--font-body)}

/* LAYERING DIAGRAM */
.layer-section{background:white;border-top:1px solid var(--n100);border-bottom:1px solid var(--n100);padding:var(--sp10) 0}
.layer-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.layer-stack{display:flex;flex-direction:column;gap:0;margin-top:var(--sp8);border-radius:var(--r20);overflow:hidden;box-shadow:var(--shadow-md)}
.layer-item{padding:var(--sp4);display:flex;align-items:center;gap:var(--sp4);position:relative}
.layer-item.l1{background:var(--navy-dark)}
.layer-item.l2{background:var(--navy)}
.layer-item.l3{background:var(--trellis-dark)}
.layer-item.l4{background:var(--trellis)}
.layer-icon{width:48px;height:48px;border-radius:var(--r12);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.layer-item.l1 .layer-icon{background:rgba(255,255,255,.08)}
.layer-item.l2 .layer-icon{background:rgba(255,255,255,.1)}
.layer-item.l3 .layer-icon{background:rgba(255,255,255,.12)}
.layer-item.l4 .layer-icon{background:rgba(255,255,255,.15)}
.layer-body{flex:1}
.layer-scope{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);font-family:var(--font-mono);margin-bottom:3px}
.layer-title{font-family:var(--font-display);font-size:18px;color:white;letter-spacing:-.02em;margin-bottom:4px}
.layer-desc{font-size:13px;color:rgba(255,255,255,.72);font-weight:300;line-height:1.55}
.layer-examples{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.layer-ex{font-size:10px;padding:3px 8px;border-radius:4px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.75);font-family:var(--font-mono)}
.layer-arrow{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);z-index:2;width:28px;height:28px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--n400);box-shadow:var(--shadow-sm)}
.layer-item:last-child .layer-arrow{display:none}

/* COMPETENCY SCALE SECTION */
.comp-section{padding:var(--sp10) 0}
.comp-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.comp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:var(--sp8);border-radius:var(--r16);overflow:hidden;box-shadow:var(--shadow-md)}
.comp-col{padding:var(--sp3)}
.comp-col.cr{background:var(--cr)}.comp-col.co{background:var(--co)}
.comp-col.cy{background:var(--cy)}.comp-col.cg{background:var(--cg)}.comp-col.cb{background:var(--cb)}
.comp-col-label{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:3px;font-family:var(--font-mono)}
.comp-col-name{font-family:var(--font-display);font-size:clamp(13px,1.4vw,16px);color:white;letter-spacing:-.02em;margin-bottom:var(--sp2);line-height:1.1}
.comp-default-label{font-size:8px;font-weight:700;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;font-family:var(--font-mono)}
.comp-list{list-style:none;display:flex;flex-direction:column;gap:3px}
.comp-item{font-size:10px;color:rgba(255,255,255,.82);line-height:1.4;display:flex;gap:4px}
.comp-item::before{content:'·';flex-shrink:0}
.comp-custom-hint{margin-top:var(--sp2);padding-top:var(--sp2);border-top:1px solid rgba(255,255,255,.15)}
.comp-custom-text{font-size:9px;color:rgba(255,255,255,.5);font-style:italic;line-height:1.4}

/* BEHAVIOR SECTION MOCKUP */
.behavior-mockup{background:white;border-radius:var(--r16);box-shadow:0 24px 60px rgba(15,34,51,.18),0 0 0 1px rgba(15,34,51,.06);overflow:hidden}
.bm-header{background:var(--navy);padding:12px 14px}
.bm-title{font-family:var(--font-display);font-size:15px;color:white;letter-spacing:-.02em}
.bm-sub{font-size:10px;color:rgba(255,255,255,.55);font-family:var(--font-mono);margin-top:2px}
.bm-body{padding:14px}
.bm-section{margin-bottom:12px}
.bm-section:last-child{margin-bottom:0}
.bm-section-label{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;font-family:var(--font-mono);display:flex;align-items:center;gap:6px}
.bm-section-label.pro{color:var(--cg)}
.bm-section-label.anti{color:var(--cr)}
.bm-section-dot{width:8px;height:8px;border-radius:50%}
.bm-section-dot.pro{background:var(--cg)}.bm-section-dot.anti{background:var(--cr)}
.bm-items{display:flex;flex-direction:column;gap:4px}
.bm-item{display:flex;align-items:center;justify-content:space-between;padding:7px 9px;border-radius:7px;cursor:pointer;transition:background .12s}
.bm-item.pro{background:var(--cgl);border:1px solid var(--cgb)}
.bm-item.anti{background:var(--crl);border:1px solid var(--crb)}
.bm-item:hover.pro{background:rgba(104,211,145,.2)}
.bm-item:hover.anti{background:rgba(252,129,129,.2)}
.bm-item-name{font-size:11px;font-weight:500}
.bm-item-name.pro{color:var(--trellis-dark)}.bm-item-name.anti{color:var(--cr)}
.bm-check{width:15px;height:15px;border-radius:3px;border:1.5px solid}
.bm-check.pro{border-color:var(--cgb)}.bm-check.anti{border-color:var(--crb)}
.bm-check.on{display:flex;align-items:center;justify-content:center;font-size:9px;color:white}
.bm-check.on.pro{background:var(--cg);border-color:var(--cg)}.bm-check.on.anti{background:var(--cr);border-color:var(--cr)}

/* WHO BUILDS SECTION */
.who-section{background:var(--warm-white);border-top:1px solid var(--n100);padding:var(--sp10) 0}
.who-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp4);margin-top:var(--sp8)}
.who-card{background:white;border-radius:var(--r16);padding:var(--sp4);border:1.5px solid var(--n100);transition:box-shadow .2s,transform .2s}
.who-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.who-card-icon{width:48px;height:48px;border-radius:var(--r12);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:var(--sp2)}
.who-card-icon.green{background:var(--trellis-light)}
.who-card-icon.teal{background:rgba(80,197,183,.1)}
.who-card-icon.navy{background:rgba(26,58,82,.06)}
.who-card-role{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-mono);margin-bottom:4px}
.who-card-role.green{color:var(--trellis)}.who-card-role.teal{color:var(--teal)}.who-card-role.navy{color:var(--navy)}
.who-card-title{font-family:var(--font-display);font-size:20px;letter-spacing:-.02em;color:var(--navy);margin-bottom:6px}
.who-card-body{font-size:13px;color:var(--n600);line-height:1.65;font-weight:300}
.who-card-perms{display:flex;flex-direction:column;gap:4px;margin-top:var(--sp2)}
.who-card-perm{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--n600)}
.who-card-perm-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* CTA + FOOTER */

/* Responsive — FEATURES — TRELLISES */
@media(max-width:960px){
  .nav-links{display:none}.nav-mobile-toggle{display:flex}
  .hero-inner{grid-template-columns:1fr}
  .feature-row,.feature-row.flip,.feature-row.wide-mockup,.feature-row.wide-copy{grid-template-columns:1fr;direction:ltr}
  .feature-row.flip>*{direction:ltr}
  .blocks-grid,.who-grid{grid-template-columns:1fr}
  .block-card{border-right:none;border-bottom:1px solid var(--n100)}
  .block-card:last-child{border-bottom:none}
  .comp-grid{grid-template-columns:1fr 1fr}
  .sidebar-mockup{grid-template-columns:1fr}
  .sm-left{display:none}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp4)}
  .footer-grid>div:first-child{grid-column:1/-1}
}


/* ════════════════════════════════════════════════════════════════════════════════
   RESEARCH HUB — research/index.html
   ════════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
.hero{
  padding-top:68px;background:var(--navy-dark);
  position:relative;overflow:hidden;
}
.hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-60px;left:50%;transform:translateX(-50%);width:900px;height:420px;background:radial-gradient(ellipse at 50% 100%,rgba(45,122,95,.22) 0%,transparent 70%);pointer-events:none}
.hero-inner{max-width:1000px;margin:0 auto;padding:var(--sp10) var(--sp4) var(--sp12);text-align:center;position:relative;z-index:2}
.hero-eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:var(--sp3)}
.hero-headline{font-family:var(--font-display);font-size:clamp(40px,5.5vw,68px);letter-spacing:-.04em;line-height:.92;color:white;margin-bottom:var(--sp4)}
.hero-headline em{color:var(--teal);font-style:italic}
.hero-sub{font-size:clamp(16px,1.6vw,19px);color:rgba(255,255,255,.5);font-weight:300;line-height:1.75;max-width:680px;margin:0 auto var(--sp6)}

/* Research navigation pills */
.research-nav{display:flex;justify-content:center;gap:var(--sp2);flex-wrap:wrap;margin-bottom:var(--sp6)}
.research-nav-pill{
  display:flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:var(--r20);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.6);font-size:13px;font-weight:600;
  transition:all .15s;cursor:pointer;text-decoration:none;
}
.research-nav-pill:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:white}
.research-nav-pill-num{font-family:var(--font-mono);font-size:10px;color:var(--teal);letter-spacing:.04em}

/* ════════════════════════════════════════
   CONVERGENCE THESIS
════════════════════════════════════════ */
.thesis-section{background:var(--warm-white);padding:var(--sp12) 0}
.thesis-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.thesis-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp10);align-items:center;margin-bottom:var(--sp12)}
.thesis-copy{}
.thesis-copy p{font-size:clamp(15px,1.5vw,17px);color:var(--n600);font-weight:300;line-height:1.85;margin-bottom:var(--sp3)}
.thesis-copy p:last-child{margin-bottom:0}
.thesis-copy em{font-style:italic;color:var(--navy);font-weight:400}

/* Venn-style convergence diagram */
.convergence-diagram{position:relative;display:flex;align-items:center;justify-content:center;min-height:320px}
.venn-wrap{position:relative;width:340px;height:320px;flex-shrink:0}
.venn-circle{
  position:absolute;width:180px;height:180px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
}
.venn-label{font-size:11px;font-weight:700;line-height:1.3;padding:12px}
.venn-circle.fixsen{top:0;left:0;background:rgba(26,58,82,.08);border:1.5px solid rgba(26,58,82,.2)}
.venn-circle.fixsen .venn-label{color:var(--navy)}
.venn-circle.wiliam{top:0;right:0;background:rgba(80,197,183,.08);border:1.5px solid rgba(80,197,183,.25)}
.venn-circle.wiliam .venn-label{color:rgba(26,82,74,1)}
.venn-circle.zhou{bottom:0;left:50%;transform:translateX(-50%);background:rgba(45,122,95,.08);border:1.5px solid rgba(45,122,95,.2)}
.venn-circle.zhou .venn-label{color:var(--trellis-dark)}
/* Center convergence point */
.venn-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-42%);
  width:80px;height:80px;border-radius:50%;
  background:var(--trellis);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-green),0 0 0 8px rgba(45,122,95,.1);
  z-index:2;
}
.venn-center-label{font-size:9px;font-weight:800;color:white;letter-spacing:.06em;text-align:center;text-transform:uppercase;line-height:1.3;padding:8px}

/* ════════════════════════════════════════
   THREE RESEARCHER CARDS — deep dive
════════════════════════════════════════ */
.researchers-section{background:white;padding:var(--sp12) 0;border-top:1px solid var(--n100);border-bottom:1px solid var(--n100)}
.researchers-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.researchers-header{text-align:center;margin-bottom:var(--sp10)}

.researcher-deep{
  display:grid;grid-template-columns:1fr 2fr;gap:0;
  border-radius:var(--r20);border:1.5px solid var(--n100);
  overflow:hidden;margin-bottom:var(--sp6);
  transition:box-shadow .2s;background:white;
}
.researcher-deep:hover{box-shadow:var(--shadow-md)}
.researcher-deep:last-child{margin-bottom:0}

/* Left panel */
.rd-left{
  padding:var(--sp6);border-right:1px solid var(--n100);
  display:flex;flex-direction:column;
}
.rd-num{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--n400);margin-bottom:var(--sp3)}
.rd-name{font-family:var(--font-display);font-size:clamp(26px,3vw,36px);letter-spacing:-.03em;color:var(--navy);line-height:1.05;margin-bottom:4px}
.rd-field{font-size:12px;color:var(--trellis);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:var(--sp2)}
.rd-institution{font-size:13px;color:var(--n400);font-weight:300;line-height:1.5;margin-bottom:var(--sp4)}
.rd-finding{
  background:var(--warm-white);border-radius:var(--r12);padding:var(--sp3);
  margin-bottom:var(--sp4);
}
.rd-finding-num{font-family:var(--font-display);font-size:36px;letter-spacing:-.04em;color:var(--trellis);line-height:1}
.rd-finding-label{font-size:12px;color:var(--n600);font-weight:300;line-height:1.4;margin-top:4px}
.rd-paper{font-size:11px;color:var(--n400);font-family:var(--font-mono);line-height:1.5;margin-bottom:var(--sp4)}
.rd-cta{margin-top:auto}
.rd-cta a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--trellis);transition:gap .12s}
.rd-cta a:hover{gap:10px}

/* Right panel */
.rd-right{padding:var(--sp6)}
.rd-right-section{margin-bottom:var(--sp6)}
.rd-right-section:last-child{margin-bottom:0}
.rd-section-label{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--n400);margin-bottom:var(--sp2);padding-bottom:var(--sp1);border-bottom:1px solid var(--n100)}
.rd-quote{
  font-family:var(--font-display);font-size:clamp(16px,1.8vw,20px);
  letter-spacing:-.01em;line-height:1.4;color:var(--navy);
  font-style:italic;padding-left:var(--sp3);border-left:3px solid var(--teal);
  margin-bottom:var(--sp2);
}
.rd-quote em{color:var(--trellis);font-style:normal}
.rd-problem{font-size:14px;color:var(--n600);line-height:1.7;font-weight:300;margin-bottom:var(--sp3)}
.rd-trellis-box{
  background:var(--trellis-light);border-radius:var(--r12);padding:var(--sp3) var(--sp4);
  border-left:3px solid var(--trellis);
}
.rd-trellis-label{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--trellis-dark);margin-bottom:6px}
.rd-trellis-text{font-size:13px;color:var(--trellis-dark);line-height:1.6;font-weight:400}

/* Key findings grid inside card */
.rd-findings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp2);margin-top:var(--sp3)}
.rd-finding-item{padding:var(--sp2) var(--sp3);background:var(--warm-white);border-radius:var(--r8);border:1px solid var(--n100)}
.rd-finding-item-num{font-family:var(--font-display);font-size:20px;color:var(--trellis);letter-spacing:-.03em;line-height:1}
.rd-finding-item-label{font-size:11px;color:var(--n600);font-weight:300;line-height:1.45;margin-top:2px}

/* ════════════════════════════════════════
   SYNTHESIS SECTION — how they connect
════════════════════════════════════════ */
.synthesis-section{background:var(--warm-white);padding:var(--sp12) 0}
.synthesis-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.synthesis-header{text-align:center;margin-bottom:var(--sp10)}

/* Flow diagram */
.synthesis-flow{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
  gap:0;align-items:center;margin-bottom:var(--sp10);
}
.flow-node{
  background:white;border-radius:var(--r16);border:1.5px solid var(--n100);
  padding:var(--sp4);text-align:center;
}
.flow-node-researcher{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);margin-bottom:var(--sp1)}
.flow-node-problem{font-family:var(--font-display);font-size:clamp(14px,1.5vw,18px);letter-spacing:-.02em;color:var(--navy);margin-bottom:var(--sp2);line-height:1.2}
.flow-node-finding{font-size:12px;color:var(--n600);font-weight:300;line-height:1.5}
.flow-arrow{text-align:center;color:var(--n200);font-size:24px;padding:0 var(--sp2)}
.flow-result{
  grid-column:1/-1;margin-top:var(--sp4);
  background:var(--navy);border-radius:var(--r16);padding:var(--sp6);
  text-align:center;position:relative;overflow:hidden;
}
.flow-result::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 100%,rgba(45,122,95,.3) 0%,transparent 70%);pointer-events:none}
.flow-result-inner{position:relative;z-index:1}
.flow-result-eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:var(--sp2)}
.flow-result-headline{font-family:var(--font-display);font-size:clamp(22px,3vw,36px);letter-spacing:-.03em;color:white;line-height:1.1;margin-bottom:var(--sp2)}
.flow-result-headline em{color:var(--teal);font-style:italic}
.flow-result-body{font-size:15px;color:rgba(255,255,255,.5);font-weight:300;line-height:1.7;max-width:640px;margin:0 auto}

/* Insight table */
.insight-table{width:100%;border-collapse:collapse;margin-top:var(--sp6)}
.insight-table th{padding:12px var(--sp3);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);text-align:left;border-bottom:2px solid var(--n100)}
.insight-table th:not(:first-child){text-align:center}
.insight-table td{padding:14px var(--sp3);font-size:13px;color:var(--n800);border-bottom:1px solid var(--n100);vertical-align:middle}
.insight-table td:not(:first-child){text-align:center;color:var(--n600);font-size:12px}
.insight-table .td-highlight{background:rgba(45,122,95,.04)}
.insight-table .td-trellis{font-size:12px;font-weight:600;color:var(--trellis);background:var(--trellis-light);border-radius:var(--r8);padding:4px 10px;display:inline-block}

/* ════════════════════════════════════════
   DOWNLOAD / CITATIONS
════════════════════════════════════════ */
.citations-section{background:white;padding:var(--sp10) 0;border-top:1px solid var(--n100)}
.citations-inner{max-width:900px;margin:0 auto;padding:0 var(--sp4)}
.citations-header{text-align:center;margin-bottom:var(--sp6)}
.citation-list{display:flex;flex-direction:column;gap:var(--sp3)}
.citation-item{
  padding:var(--sp3) var(--sp4);border-radius:var(--r12);
  border:1.5px solid var(--n100);background:var(--warm-white);
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--sp3);align-items:center;
}
.citation-num{font-family:var(--font-mono);font-size:11px;color:var(--trellis);font-weight:700;width:24px}
.citation-text{font-size:13px;color:var(--n600);line-height:1.6;font-weight:300}
.citation-text strong{color:var(--navy);font-weight:600}
.citation-link{font-size:12px;font-weight:700;color:var(--trellis);white-space:nowrap;flex-shrink:0}
.citation-link:hover{text-decoration:underline;text-underline-offset:3px}

/* ════════════════════════════════════════
   CTA + FOOTER
════════════════════════════════════════ */

/* Responsive — RESEARCH HUB */
@media(max-width:960px){
  .nav-links{display:none}.nav-mobile-toggle{display:flex}
  .thesis-grid{grid-template-columns:1fr}
  .convergence-diagram{display:none}
  .researcher-deep{grid-template-columns:1fr}
  .rd-left{border-right:none;border-bottom:1px solid var(--n100)}
  .synthesis-flow{grid-template-columns:1fr}
  .flow-arrow{display:none}
  .flow-result{grid-column:auto}
  .rd-findings-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp4)}
  .footer-grid>div:first-child{grid-column:1/-1}
  .citation-item{grid-template-columns:auto 1fr}
  .citation-link{display:none}
}


/* ════════════════════════════════════════════════════════════════════════════════
   RESEARCH — FIXSEN — research/fixsen.html
   ════════════════════════════════════════════════════════════════════════════════ */


/* Breadcrumb */
.breadcrumb{
  padding-top:calc(68px + var(--sp3));padding-bottom:var(--sp2);
  max-width:1100px;margin:0 auto;padding-left:var(--sp4);padding-right:var(--sp4);
}
.breadcrumb-inner{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--n400);font-family:var(--font-mono)}
.breadcrumb-inner a{color:var(--trellis);transition:color .12s}
.breadcrumb-inner a:hover{color:var(--trellis-dark)}
.breadcrumb-sep{color:var(--n200)}

/* ════════════════════════════════════════
   READING PROGRESS
════════════════════════════════════════ */
.reading-progress{position:fixed;top:68px;left:0;right:0;height:2px;background:transparent;z-index:99}
.reading-progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--navy),var(--teal));transition:width .1s linear}

/* ════════════════════════════════════════
   HERO — dark editorial
════════════════════════════════════════ */
.hero{
  background:var(--navy-dark);
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:44px 44px;pointer-events:none;
}
.hero::after{
  content:'';position:absolute;bottom:-80px;left:50%;transform:translateX(-50%);
  width:900px;height:400px;
  background:radial-gradient(ellipse at 50% 100%,rgba(26,58,82,.6) 0%,transparent 70%);
  pointer-events:none;
}
.hero-inner{
  max-width:1100px;margin:0 auto;padding:var(--sp8) var(--sp4) var(--sp10);
  display:grid;grid-template-columns:1fr 360px;gap:var(--sp10);align-items:start;
  position:relative;z-index:2;
}

/* Left */
.hero-kicker{
  display:flex;align-items:center;gap:var(--sp2);margin-bottom:var(--sp3);
}
.hero-kicker-num{
  font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.25);font-family:var(--font-mono);
}
.hero-kicker-label{
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.35);
}
.hero-kicker-sep{width:1px;height:14px;background:rgba(255,255,255,.12)}
.hero-headline{
  font-family:var(--font-display);
  font-size:clamp(36px,5vw,60px);
  letter-spacing:-.04em;line-height:.92;
  color:white;margin-bottom:var(--sp4);
}
.hero-headline em{color:var(--teal);font-style:italic}
.hero-body{
  font-size:clamp(15px,1.5vw,17px);color:rgba(255,255,255,.5);
  font-weight:300;line-height:1.8;max-width:580px;margin-bottom:var(--sp6);
}
.hero-ctas{display:flex;align-items:center;gap:var(--sp2);flex-wrap:wrap}

/* Right — author card */
.author-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r20);
  padding:var(--sp4);
  position:sticky;top:calc(68px + var(--sp4));
}
.author-label{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:var(--sp3);font-family:var(--font-mono)}
.author-avatar{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--navy) 0%,rgba(26,58,82,.8) 100%);
  border:2px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:22px;color:rgba(255,255,255,.7);
  margin-bottom:var(--sp2);
  letter-spacing:-.02em;
}
.author-name{font-family:var(--font-display);font-size:22px;color:white;letter-spacing:-.02em;line-height:1;margin-bottom:4px}
.author-field{font-size:11px;font-weight:700;color:var(--teal);letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--sp2)}
.author-bio{font-size:12px;color:rgba(255,255,255,.4);line-height:1.6;font-weight:300;margin-bottom:var(--sp3)}
.author-divider{height:1px;background:rgba(255,255,255,.07);margin-bottom:var(--sp3)}
.author-stat{margin-bottom:var(--sp2)}
.author-stat-num{font-family:var(--font-display);font-size:28px;color:white;letter-spacing:-.04em;line-height:1}
.author-stat-label{font-size:11px;color:rgba(255,255,255,.35);line-height:1.4}
.author-publication{
  margin-top:var(--sp3);font-size:11px;color:rgba(255,255,255,.25);
  font-family:var(--font-mono);line-height:1.5;
  padding-top:var(--sp3);border-top:1px solid rgba(255,255,255,.07);
}

/* Table of contents — sidebar on desktop */
.toc{
  position:sticky;top:calc(68px + var(--sp4));
  background:white;border-radius:var(--r16);border:1.5px solid var(--n100);
  padding:var(--sp3);
  font-size:12px;
}
.toc-label{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--n400);margin-bottom:var(--sp2);font-family:var(--font-mono)}
.toc-list{list-style:none;display:flex;flex-direction:column;gap:2px}
.toc-list a{
  display:block;padding:6px 8px;border-radius:var(--r8);
  color:var(--n600);line-height:1.4;transition:all .12s;
  border-left:2px solid transparent;
}
.toc-list a:hover{color:var(--trellis);background:var(--trellis-light);border-left-color:var(--trellis)}
.toc-list a.active{color:var(--trellis);background:var(--trellis-light);border-left-color:var(--trellis);font-weight:600}
.toc-section{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n200);padding:8px 8px 2px;margin-top:4px}

/* ════════════════════════════════════════
   ARTICLE LAYOUT — sidebar + content
════════════════════════════════════════ */
.article-outer{max-width:1100px;margin:0 auto;padding:var(--sp10) var(--sp4)}
.article-layout{display:grid;grid-template-columns:240px 1fr;gap:var(--sp8);align-items:start}
.article-sidebar{}
.article-content{}

/* ── Prose sections ── */
.prose-section{margin-bottom:var(--sp10)}
.prose-section:last-child{margin-bottom:0}

.section-anchor{
  display:flex;align-items:center;gap:var(--sp2);margin-bottom:var(--sp4);
}
.section-num{
  font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--n400);font-family:var(--font-mono);white-space:nowrap;
}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(24px,2.8vw,36px);
  letter-spacing:-.03em;line-height:1.05;
  color:var(--navy);
}
.section-title em{color:var(--trellis);font-style:italic}
.prose-p{
  font-size:clamp(15px,1.5vw,17px);color:var(--n600);
  font-weight:300;line-height:1.85;margin-bottom:var(--sp3);
}
.prose-p:last-child{margin-bottom:0}
.prose-p em{font-style:italic;color:var(--n800);font-weight:400}
.prose-p strong{font-weight:700;color:var(--navy)}

/* ── Pull quote ── */
.pull-quote{
  margin:var(--sp6) 0;
  padding:var(--sp5,36px) var(--sp6);
  padding:clamp(24px,3vw,40px) clamp(24px,4vw,48px);
  background:white;
  border-left:4px solid var(--navy);
  border-radius:0 var(--r16) var(--r16) 0;
  box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
}
.pull-quote::before{
  content:'\201C';
  font-family:var(--font-display);font-size:160px;color:rgba(26,58,82,.04);
  position:absolute;top:-32px;left:16px;line-height:1;pointer-events:none;user-select:none;
}
.pull-quote.teal-rule{border-left-color:var(--teal)}
.pull-quote.green-rule{border-left-color:var(--trellis)}
.pq-text{
  font-family:var(--font-display);
  font-size:clamp(18px,2vw,24px);
  letter-spacing:-.02em;line-height:1.4;
  color:var(--navy);font-style:italic;
  margin-bottom:var(--sp2);position:relative;z-index:1;
}
.pq-text em{color:var(--trellis);font-style:normal;font-weight:400}
.pq-attr{
  font-size:11px;font-weight:700;color:var(--n400);
  letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-mono);
}
.pq-attr a{color:var(--trellis);text-decoration:underline;text-underline-offset:3px}
.pq-page{font-size:10px;color:var(--n400);font-family:var(--font-mono);margin-top:4px}

/* ── Trellis response box ── */
.trellis-response{
  background:var(--trellis-light);
  border-radius:var(--r16);padding:var(--sp4);
  border-left:4px solid var(--trellis);
  margin:var(--sp4) 0;
}
.trellis-response-label{
  display:flex;align-items:center;gap:8px;
  font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--trellis-dark);margin-bottom:var(--sp2);
}
.trellis-response-label span{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;background:var(--trellis);color:white;
  font-size:10px;
}
.trellis-response-text{font-size:14px;color:var(--trellis-dark);line-height:1.7;font-weight:400}

/* ── Research callout / key finding ── */
.finding-callout{
  background:white;border-radius:var(--r16);border:1.5px solid var(--n100);
  padding:var(--sp4);margin:var(--sp4) 0;display:flex;gap:var(--sp3);align-items:flex-start;
  box-shadow:var(--shadow-sm);
}
.finding-callout-icon{
  width:44px;height:44px;border-radius:var(--r12);
  background:var(--trellis-light);color:var(--trellis);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
.finding-callout-body{}
.finding-callout-label{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);margin-bottom:4px}
.finding-callout-text{font-size:14px;color:var(--navy);line-height:1.6;font-weight:500}

/* ── Chapter section divider ── */
.chapter-divider{
  display:flex;align-items:center;gap:var(--sp3);
  margin:var(--sp8) 0;
}
.chapter-divider-line{flex:1;height:1px;background:var(--n100)}
.chapter-divider-label{
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--n400);font-family:var(--font-mono);white-space:nowrap;
}

/* ════════════════════════════════════════
   DRIVERS FRAMEWORK VISUAL
════════════════════════════════════════ */
.drivers-visual{
  background:white;border-radius:var(--r20);border:1.5px solid var(--n100);
  padding:var(--sp6);margin:var(--sp6) 0;box-shadow:var(--shadow-sm);
}
.drivers-visual-title{
  font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--n400);margin-bottom:var(--sp4);text-align:center;
}
.drivers-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp3)}
.driver-col{border-radius:var(--r12);padding:var(--sp4);border:1.5px solid}
.driver-col.competency{background:rgba(26,58,82,.03);border-color:rgba(26,58,82,.1)}
.driver-col.organization{background:var(--trellis-light);border-color:rgba(45,122,95,.25)}
.driver-col.leadership{background:rgba(80,197,183,.05);border-color:rgba(80,197,183,.2)}
.driver-col-title{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--sp2)}
.driver-col.competency .driver-col-title{color:var(--navy)}
.driver-col.organization .driver-col-title{color:var(--trellis-dark)}
.driver-col.leadership .driver-col-title{color:rgba(26,100,90,1)}
.driver-items{list-style:none;display:flex;flex-direction:column;gap:4px}
.driver-item{font-size:12px;padding:5px 8px;border-radius:6px;line-height:1.4}
.driver-col.competency .driver-item{background:rgba(26,58,82,.04);color:var(--navy)}
.driver-col.organization .driver-item{background:rgba(45,122,95,.08);color:var(--trellis-dark)}
.driver-col.leadership .driver-item{background:rgba(80,197,183,.08);color:rgba(20,85,78,1)}
.driver-trellis-tag{
  margin-top:var(--sp2);display:inline-block;
  background:var(--trellis);color:white;
  font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:6px;font-family:var(--font-mono);
}
.driver-invest-tag{
  margin-top:var(--sp2);display:inline-block;
  background:rgba(26,58,82,.06);color:rgba(26,58,82,.6);
  font-size:9px;font-weight:700;letter-spacing:.06em;
  padding:4px 10px;border-radius:6px;
}
.drivers-arrow-row{
  display:flex;justify-content:center;gap:var(--sp4);align-items:center;
  margin:var(--sp2) 0;font-size:18px;color:var(--n200);
}
.drivers-equation{
  text-align:center;padding:var(--sp3);
  background:var(--navy);border-radius:var(--r12);
  font-family:var(--font-mono);font-size:13px;color:rgba(255,255,255,.7);
  margin-top:var(--sp3);
}
.drivers-equation em{color:var(--teal);font-style:normal;font-weight:700}

/* ════════════════════════════════════════
   FINDINGS SUMMARY TABLE
════════════════════════════════════════ */
.findings-table-section{
  background:white;padding:var(--sp12) 0;
  border-top:1px solid var(--n100);border-bottom:1px solid var(--n100);
}
.findings-table-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.findings-table{width:100%;border-collapse:collapse}
.findings-table thead th{
  padding:12px var(--sp3);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--n400);text-align:left;border-bottom:2px solid var(--n100);
}
.findings-table td{
  padding:14px var(--sp3);font-size:13px;color:var(--n800);
  border-bottom:1px solid var(--n100);vertical-align:top;line-height:1.55;
}
.findings-table tr:last-child td{border-bottom:none}
.findings-table td:first-child{font-weight:600;color:var(--navy);width:30%}
.findings-table td:nth-child(2){color:var(--n600);font-weight:300;width:35%}
.findings-table td:nth-child(3){width:35%}
.findings-table .td-trellis{
  font-size:12px;color:var(--trellis-dark);font-weight:500;
  display:inline-block;background:var(--trellis-light);
  padding:4px 10px;border-radius:6px;
}

/* ════════════════════════════════════════
   RELATED RESEARCH
════════════════════════════════════════ */
.related-section{background:var(--warm-white);padding:var(--sp12) 0}
.related-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp4);margin-top:var(--sp8)}
.related-card{
  background:white;border-radius:var(--r16);border:1.5px solid var(--n100);
  padding:var(--sp4);display:flex;flex-direction:column;
  transition:box-shadow .2s,transform .2s;
}
.related-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.related-card-num{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);margin-bottom:var(--sp2);font-family:var(--font-mono)}
.related-card-name{font-family:var(--font-display);font-size:24px;letter-spacing:-.02em;color:var(--navy);margin-bottom:4px}
.related-card-field{font-size:11px;font-weight:700;color:var(--trellis);letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--sp2)}
.related-card-finding{font-size:13px;color:var(--n600);line-height:1.6;font-weight:300;margin-bottom:var(--sp4);flex:1}
.related-card-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--trellis);transition:gap .12s}
.related-card-link:hover{gap:10px}

/* ════════════════════════════════════════
   CTA + FOOTER
════════════════════════════════════════ */

/* Responsive — RESEARCH — FIXSEN */
@media(max-width:960px){
  .nav-links{display:none}.nav-mobile-toggle{display:flex}
  .hero-inner{grid-template-columns:1fr}
  .author-card{position:static}
  .article-layout{grid-template-columns:1fr}
  .article-sidebar{display:none}
  .drivers-row{grid-template-columns:1fr}
  .findings-table{font-size:12px}
  .findings-table td{padding:10px var(--sp2)}
  .related-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp4)}
  .footer-grid>div:first-child{grid-column:1/-1}
  .pull-quote{padding:var(--sp4)}
}


/* ════════════════════════════════════════════════════════════════════════════════
   RESEARCH — WILIAM — research/wiliam.html
   ════════════════════════════════════════════════════════════════════════════════ */


/* Breadcrumb */
.breadcrumb{padding-top:calc(68px + var(--sp3));padding-bottom:var(--sp2);max-width:1100px;margin:0 auto;padding-left:var(--sp4);padding-right:var(--sp4)}
.breadcrumb-inner{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--n400);font-family:var(--font-mono)}
.breadcrumb-inner a{color:var(--trellis);transition:color .12s}
.breadcrumb-inner a:hover{color:var(--trellis-dark)}
.breadcrumb-sep{color:var(--n200)}

/* Reading progress */
.reading-progress{position:fixed;top:68px;left:0;right:0;height:2px;z-index:99}
.reading-progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--trellis));transition:width .1s linear}

/* ════════════════════
   HERO
   Warmer than Fixsen — teal accent vs navy, reflects the
   "formative" / generative nature of Wiliam's research
════════════════════ */
.hero{
  background:var(--navy);position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 0% 100%, rgba(80,197,183,.12) 0%, transparent 50%),
    radial-gradient(circle at 100% 0%, rgba(45,122,95,.1) 0%, transparent 50%),
    linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
  background-size:100% 100%, 100% 100%, 40px 40px, 40px 40px;
  pointer-events:none;
}
.hero-inner{
  max-width:1100px;margin:0 auto;
  padding:var(--sp8) var(--sp4) var(--sp10);
  display:grid;grid-template-columns:1fr 340px;gap:var(--sp10);
  align-items:start;position:relative;z-index:2;
}
.hero-kicker{display:flex;align-items:center;gap:var(--sp2);margin-bottom:var(--sp3)}
.hero-kicker-num{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);font-family:var(--font-mono)}
.hero-kicker-sep{width:1px;height:14px;background:rgba(255,255,255,.12)}
.hero-kicker-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.hero-headline{font-family:var(--font-display);font-size:clamp(34px,5vw,58px);letter-spacing:-.04em;line-height:.92;color:white;margin-bottom:var(--sp4)}
.hero-headline em{color:var(--teal);font-style:italic}
.hero-body{font-size:clamp(15px,1.5vw,17px);color:rgba(255,255,255,.75);font-weight:300;line-height:1.8;max-width:580px;margin-bottom:var(--sp6)}
.hero-ctas{display:flex;align-items:center;gap:var(--sp2);flex-wrap:wrap}

/* Author card */
.author-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r20);padding:var(--sp4);
  position:sticky;top:calc(68px + var(--sp4));
}
.author-label{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:var(--sp3);font-family:var(--font-mono)}
.author-avatar{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,rgba(80,197,183,.3) 0%,rgba(45,122,95,.4) 100%);
  border:2px solid rgba(80,197,183,.25);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:22px;color:rgba(255,255,255,.7);
  margin-bottom:var(--sp2);letter-spacing:-.02em;
}
.author-name{font-family:var(--font-display);font-size:22px;color:white;letter-spacing:-.02em;line-height:1;margin-bottom:4px}
.author-field{font-size:11px;font-weight:700;color:var(--teal);letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--sp2)}
.author-bio{font-size:12px;color:rgba(255,255,255,.7);line-height:1.6;font-weight:300;margin-bottom:var(--sp3)}
.author-divider{height:1px;background:rgba(255,255,255,.07);margin-bottom:var(--sp3)}
.author-stat{margin-bottom:var(--sp2)}
.author-stat-num{font-family:var(--font-display);font-size:28px;color:white;letter-spacing:-.04em;line-height:1}
.author-stat-label{font-size:11px;color:rgba(255,255,255,.65);line-height:1.4}
.author-publication{margin-top:var(--sp3);font-size:11px;color:rgba(255,255,255,.6);font-family:var(--font-mono);line-height:1.5;padding-top:var(--sp3);border-top:1px solid rgba(255,255,255,.07)}

/* ════════════════════
   THREE-QUESTION FRAMEWORK
   Visual callout for Wiliam's "where / going / how" model
════════════════════ */
.three-q-band{
  background:white;border-top:1px solid var(--n100);border-bottom:1px solid var(--n100);
  padding:var(--sp8) 0;
}
.three-q-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.three-q-header{text-align:center;margin-bottom:var(--sp8)}
.three-q-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.three-q-item{
  padding:var(--sp6);border-right:1px solid var(--n100);
  position:relative;
}
.three-q-item:last-child{border-right:none}
.three-q-item::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
}
.three-q-item:nth-child(1)::before{background:var(--teal)}
.three-q-item:nth-child(2)::before{background:var(--trellis)}
.three-q-item:nth-child(3)::before{background:var(--navy)}
.three-q-num{font-family:var(--font-display);font-size:48px;letter-spacing:-.05em;line-height:1;margin-bottom:8px}
.three-q-item:nth-child(1) .three-q-num{color:var(--teal)}
.three-q-item:nth-child(2) .three-q-num{color:var(--trellis)}
.three-q-item:nth-child(3) .three-q-num{color:var(--navy)}
.three-q-question{font-family:var(--font-display);font-size:clamp(18px,2vw,24px);letter-spacing:-.02em;color:var(--navy);margin-bottom:var(--sp2);line-height:1.15}
.three-q-wiliam{font-size:12px;color:var(--n400);font-style:italic;margin-bottom:var(--sp3);line-height:1.5}
.three-q-trellis{font-size:13px;color:var(--trellis-dark);background:var(--trellis-light);padding:var(--sp2) var(--sp3);border-radius:var(--r8);line-height:1.55;font-weight:400}
.three-q-trellis-label{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--trellis);margin-bottom:4px}

/* ════════════════════
   ARTICLE LAYOUT
════════════════════ */
.article-outer{max-width:1100px;margin:0 auto;padding:var(--sp10) var(--sp4)}
.article-layout{display:grid;grid-template-columns:240px 1fr;gap:var(--sp8);align-items:start}

/* TOC */
.toc{position:sticky;top:calc(68px + var(--sp4));background:white;border-radius:var(--r16);border:1.5px solid var(--n100);padding:var(--sp3)}
.toc-label{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--n400);margin-bottom:var(--sp2);font-family:var(--font-mono)}
.toc-list{list-style:none;display:flex;flex-direction:column;gap:2px}
.toc-list a{display:block;padding:6px 8px;border-radius:var(--r8);color:var(--n600);line-height:1.4;transition:all .12s;border-left:2px solid transparent;font-size:12px}
.toc-list a:hover{color:var(--trellis);background:var(--trellis-light);border-left-color:var(--trellis)}
.toc-list a.active{color:var(--trellis);background:var(--trellis-light);border-left-color:var(--trellis);font-weight:600}

/* Prose */
.prose-section{margin-bottom:var(--sp10)}
.prose-section:last-child{margin-bottom:0}
.section-anchor{display:flex;align-items:center;gap:var(--sp2);margin-bottom:var(--sp4)}
.section-num{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);font-family:var(--font-mono);white-space:nowrap}
.section-title{font-family:var(--font-display);font-size:clamp(24px,2.8vw,36px);letter-spacing:-.03em;line-height:1.05;color:var(--navy)}
.section-title em{color:var(--trellis);font-style:italic}
.prose-p{font-size:clamp(15px,1.5vw,17px);color:var(--n600);font-weight:300;line-height:1.85;margin-bottom:var(--sp3)}
.prose-p:last-child{margin-bottom:0}
.prose-p em{font-style:italic;color:var(--n800);font-weight:400}
.prose-p strong{font-weight:700;color:var(--navy)}

/* Pull quotes */
.pull-quote{
  margin:var(--sp6) 0;
  padding:clamp(24px,3vw,40px) clamp(24px,4vw,48px);
  background:white;border-radius:0 var(--r16) var(--r16) 0;
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
}
.pull-quote::before{content:'\201C';font-family:var(--font-display);font-size:160px;color:rgba(80,197,183,.07);position:absolute;top:-32px;left:16px;line-height:1;pointer-events:none;user-select:none}
.pq-teal{border-left:4px solid var(--teal)}
.pq-green{border-left:4px solid var(--trellis)}
.pq-navy{border-left:4px solid var(--navy)}
.pq-text{font-family:var(--font-display);font-size:clamp(17px,1.9vw,23px);letter-spacing:-.02em;line-height:1.4;color:var(--navy);font-style:italic;margin-bottom:var(--sp2);position:relative;z-index:1}
.pq-text em{color:var(--trellis);font-style:normal;font-weight:400}
.pq-attr{font-size:11px;font-weight:700;color:var(--n400);letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-mono)}
.pq-attr a{color:var(--trellis);text-decoration:underline;text-underline-offset:3px}
.pq-page{font-size:10px;color:var(--n400);font-family:var(--font-mono);margin-top:4px}

/* Trellis response */
.trellis-response{background:var(--trellis-light);border-radius:var(--r16);padding:var(--sp4);border-left:4px solid var(--trellis);margin:var(--sp4) 0}
.trellis-response-label{display:flex;align-items:center;gap:8px;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--trellis-dark);margin-bottom:var(--sp2)}
.trellis-response-label span{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--trellis);color:white;font-size:10px}
.trellis-response-text{font-size:14px;color:var(--trellis-dark);line-height:1.7}

/* Finding callout */
.finding-callout{background:white;border-radius:var(--r16);border:1.5px solid var(--n100);padding:var(--sp4);margin:var(--sp4) 0;display:flex;gap:var(--sp3);align-items:flex-start;box-shadow:var(--shadow-sm)}
.finding-callout-icon{width:44px;height:44px;border-radius:var(--r12);background:rgba(80,197,183,.1);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.finding-callout-body{}
.finding-callout-label{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);margin-bottom:4px}
.finding-callout-text{font-size:14px;color:var(--navy);line-height:1.6;font-weight:500}

/* Chapter divider */
.chapter-divider{display:flex;align-items:center;gap:var(--sp3);margin:var(--sp8) 0}
.chapter-divider-line{flex:1;height:1px;background:var(--n100)}
.chapter-divider-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--n400);font-family:var(--font-mono);white-space:nowrap}

/* ════════════════════
   FEEDBACK SPECTRUM VISUAL
   Shows the spectrum from bad → good feedback
════════════════════ */
.feedback-spectrum{
  background:white;border-radius:var(--r20);border:1.5px solid var(--n100);
  padding:var(--sp6);margin:var(--sp6) 0;box-shadow:var(--shadow-sm);
}
.feedback-spectrum-title{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--n400);margin-bottom:var(--sp4);text-align:center}
.spectrum-row{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--sp4);align-items:start;margin-bottom:var(--sp4)}
.spectrum-row:last-child{margin-bottom:0}
.spectrum-col{}
.spectrum-col-label{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--sp2)}
.spectrum-bad .spectrum-col-label{color:rgba(200,16,46,.6)}
.spectrum-good .spectrum-col-label{color:var(--trellis)}
.spectrum-example{padding:var(--sp2) var(--sp3);border-radius:var(--r8);font-size:13px;line-height:1.5}
.spectrum-bad .spectrum-example{background:rgba(200,16,46,.05);border:1px solid rgba(200,16,46,.12);color:var(--n600)}
.spectrum-good .spectrum-example{background:var(--trellis-light);border:1px solid rgba(45,122,95,.2);color:var(--trellis-dark)}
.spectrum-arrow{display:flex;align-items:center;justify-content:center;padding-top:24px;color:var(--teal);font-size:18px}
.spectrum-divider{height:1px;background:var(--n100);margin:var(--sp3) 0}

/* ════════════════════
   SELF-ASSESSMENT CALLOUT — big number visual
════════════════════ */
.big-number-callout{
  background:var(--navy);border-radius:var(--r20);padding:var(--sp8);
  display:grid;grid-template-columns:auto 1fr;gap:var(--sp6);align-items:center;
  margin:var(--sp6) 0;position:relative;overflow:hidden;
}
.big-number-callout::before{
  content:'';position:absolute;top:0;right:0;width:200px;height:200px;
  background:radial-gradient(ellipse at 100% 0%,rgba(80,197,183,.15) 0%,transparent 70%);
  pointer-events:none;
}
.bnc-num{font-family:var(--font-display);font-size:80px;letter-spacing:-.06em;line-height:1;color:var(--teal);flex-shrink:0}
.bnc-body{}
.bnc-headline{font-family:var(--font-display);font-size:clamp(18px,2vw,24px);letter-spacing:-.02em;line-height:1.2;color:white;margin-bottom:8px}
.bnc-text{font-size:13px;color:rgba(255,255,255,.78);line-height:1.6;font-weight:300}
.bnc-source{font-size:10px;color:rgba(255,255,255,.55);font-family:var(--font-mono);margin-top:6px}

/* ════════════════════
   SUMMARY TABLE
════════════════════ */
.findings-table-section{background:white;padding:var(--sp12) 0;border-top:1px solid var(--n100);border-bottom:1px solid var(--n100)}
.findings-table-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.findings-table{width:100%;border-collapse:collapse}
.findings-table thead th{padding:12px var(--sp3);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);text-align:left;border-bottom:2px solid var(--n100)}
.findings-table td{padding:14px var(--sp3);font-size:13px;color:var(--n800);border-bottom:1px solid var(--n100);vertical-align:top;line-height:1.55}
.findings-table tr:last-child td{border-bottom:none}
.findings-table td:first-child{font-weight:600;color:var(--navy);width:30%}
.findings-table td:nth-child(2){color:var(--n600);font-weight:300;width:35%}
.findings-table td:nth-child(3){width:35%}
.td-trellis{font-size:12px;color:var(--trellis-dark);font-weight:500;display:inline-block;background:var(--trellis-light);padding:4px 10px;border-radius:6px}

/* ════════════════════
   RELATED RESEARCH
════════════════════ */
.related-section{background:var(--warm-white);padding:var(--sp12) 0}
.related-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp4);margin-top:var(--sp8)}
.related-card{background:white;border-radius:var(--r16);border:1.5px solid var(--n100);padding:var(--sp4);display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.related-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.related-card-num{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);margin-bottom:var(--sp2);font-family:var(--font-mono)}
.related-card-name{font-family:var(--font-display);font-size:24px;letter-spacing:-.02em;color:var(--navy);margin-bottom:4px}
.related-card-field{font-size:11px;font-weight:700;color:var(--trellis);letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--sp2)}
.related-card-finding{font-size:13px;color:var(--n600);line-height:1.6;font-weight:300;margin-bottom:var(--sp4);flex:1}
.related-card-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--trellis);transition:gap .12s}
.related-card-link:hover{gap:10px}

/* ════════════════════
   CTA + FOOTER
════════════════════ */

/* Responsive — RESEARCH — WILIAM */
@media(max-width:960px){
  .nav-links{display:none}.nav-mobile-toggle{display:flex}
  .hero-inner{grid-template-columns:1fr}
  .author-card{position:static}
  .article-layout{grid-template-columns:1fr}
  .article-sidebar{display:none}
  .three-q-grid{grid-template-columns:1fr}
  .three-q-item{border-right:none;border-bottom:1px solid var(--n100)}
  .three-q-item:last-child{border-bottom:none}
  .spectrum-row{grid-template-columns:1fr}
  .spectrum-arrow{display:none}
  .big-number-callout{grid-template-columns:1fr}
  .bnc-num{font-size:56px}
  .related-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp4)}
  .footer-grid>div:first-child{grid-column:1/-1}
}


/* ════════════════════════════════════════════════════════════════════════════════
   RESEARCH — ZHOU — research/zhou.html
   ════════════════════════════════════════════════════════════════════════════════ */


/* Breadcrumb */
.breadcrumb{padding-top:calc(68px + var(--sp3));padding-bottom:var(--sp2);max-width:1100px;margin:0 auto;padding-left:var(--sp4);padding-right:var(--sp4)}
.breadcrumb-inner{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--n400);font-family:var(--font-mono)}
.breadcrumb-inner a{color:var(--trellis)}
.breadcrumb-inner a:hover{color:var(--trellis-dark)}
.breadcrumb-sep{color:var(--n200)}

/* Reading progress */
.reading-progress{position:fixed;top:68px;left:0;right:0;height:2px;z-index:99}
.reading-progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--trellis),var(--teal));transition:width .1s linear}

/* ══════════════════════════
   HERO — deep forest green,
   distinct from navy (Fixsen) and teal-navy (Wiliam)
══════════════════════════ */
.hero{
  background:var(--zhou-bg);
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(45,122,95,.18) 0%, transparent 55%),
    radial-gradient(circle at 80% 10%, rgba(80,197,183,.08) 0%, transparent 45%),
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,40px 40px,40px 40px;
  pointer-events:none;
}
.hero::after{
  content:'';position:absolute;bottom:-60px;left:50%;transform:translateX(-50%);
  width:800px;height:360px;
  background:radial-gradient(ellipse at 50% 100%,rgba(45,122,95,.3) 0%,transparent 70%);
  pointer-events:none;
}
.hero-inner{
  max-width:1100px;margin:0 auto;
  padding:var(--sp8) var(--sp4) var(--sp10);
  display:grid;grid-template-columns:1fr 340px;gap:var(--sp10);
  align-items:start;position:relative;z-index:2;
}
.hero-kicker{display:flex;align-items:center;gap:var(--sp2);margin-bottom:var(--sp3)}
.hero-kicker-num{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);font-family:var(--font-mono)}
.hero-kicker-sep{width:1px;height:14px;background:rgba(255,255,255,.2)}
.hero-kicker-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.hero-headline{font-family:var(--font-display);font-size:clamp(34px,5vw,58px);letter-spacing:-.04em;line-height:.92;color:white;margin-bottom:var(--sp4)}
.hero-headline em{color:var(--teal);font-style:italic}
.hero-body{font-size:clamp(15px,1.5vw,17px);color:rgba(255,255,255,.78);font-weight:300;line-height:1.8;max-width:580px;margin-bottom:var(--sp6)}
.hero-ctas{display:flex;align-items:center;gap:var(--sp2);flex-wrap:wrap}

/* Author card */
.author-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r20);padding:var(--sp4);
  position:sticky;top:calc(68px + var(--sp4));
}
.author-label{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:var(--sp3);font-family:var(--font-mono)}
.author-avatar{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,rgba(45,122,95,.6) 0%,rgba(27,75,58,.8) 100%);
  border:2px solid rgba(45,122,95,.5);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:22px;color:rgba(255,255,255,.85);
  margin-bottom:var(--sp2);letter-spacing:-.02em;
}
.author-name{font-family:var(--font-display);font-size:22px;color:white;letter-spacing:-.02em;line-height:1;margin-bottom:4px}
.author-field{font-size:11px;font-weight:700;color:var(--teal);letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--sp2)}
.author-bio{font-size:12px;color:rgba(255,255,255,.72);line-height:1.6;font-weight:300;margin-bottom:var(--sp3)}
.author-divider{height:1px;background:rgba(255,255,255,.1);margin-bottom:var(--sp3)}
.author-stat{margin-bottom:var(--sp2)}
.author-stat-num{font-family:var(--font-display);font-size:28px;color:white;letter-spacing:-.04em;line-height:1}
.author-stat-label{font-size:11px;color:rgba(255,255,255,.65);line-height:1.4}
.author-publication{margin-top:var(--sp3);font-size:11px;color:rgba(255,255,255,.55);font-family:var(--font-mono);line-height:1.5;padding-top:var(--sp3);border-top:1px solid rgba(255,255,255,.1)}

/* ══════════════════════════
   FOUR SOURCES BAND
   Visual treatment of Bandura's four CTE sources
══════════════════════════ */
.sources-band{
  background:white;
  border-top:1px solid var(--n100);border-bottom:1px solid var(--n100);
  padding:var(--sp8) 0;
}
.sources-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.sources-header{text-align:center;margin-bottom:var(--sp8)}

.sources-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.source-item{
  padding:var(--sp4) var(--sp4);
  border-right:1px solid var(--n100);
  position:relative;
}
.source-item:last-child{border-right:none}
.source-item::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:0;
}
.source-item:nth-child(1)::before{background:var(--trellis)}
.source-item:nth-child(2)::before{background:var(--teal)}
.source-item:nth-child(3)::before{background:var(--navy)}
.source-item:nth-child(4)::before{background:#D4920A}

.source-rank{
  font-family:var(--font-display);font-size:42px;letter-spacing:-.05em;
  line-height:1;margin-bottom:6px;
}
.source-item:nth-child(1) .source-rank{color:var(--trellis)}
.source-item:nth-child(2) .source-rank{color:var(--teal)}
.source-item:nth-child(3) .source-rank{color:var(--navy)}
.source-item:nth-child(4) .source-rank{color:#D4920A}

.source-name{font-family:var(--font-display);font-size:clamp(16px,1.8vw,20px);letter-spacing:-.02em;color:var(--navy);margin-bottom:6px;line-height:1.15}
.source-pct{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--n400);margin-bottom:var(--sp2)}
.source-desc{font-size:13px;color:var(--n600);line-height:1.6;font-weight:300;margin-bottom:var(--sp3)}
.source-trellis-tag{
  font-size:10px;font-weight:700;color:var(--trellis-dark);
  background:var(--trellis-light);padding:4px 10px;
  border-radius:6px;display:inline-block;line-height:1.4;
}

/* ══════════════════════════
   ARTICLE LAYOUT
══════════════════════════ */
.article-outer{max-width:1100px;margin:0 auto;padding:var(--sp10) var(--sp4)}
.article-layout{display:grid;grid-template-columns:240px 1fr;gap:var(--sp8);align-items:start}

/* TOC */
.toc{position:sticky;top:calc(68px + var(--sp4));background:white;border-radius:var(--r16);border:1.5px solid var(--n100);padding:var(--sp3)}
.toc-label{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--n400);margin-bottom:var(--sp2);font-family:var(--font-mono)}
.toc-list{list-style:none;display:flex;flex-direction:column;gap:2px}
.toc-list a{display:block;padding:6px 8px;border-radius:var(--r8);color:var(--n600);line-height:1.4;transition:all .12s;border-left:2px solid transparent;font-size:12px}
.toc-list a:hover{color:var(--trellis);background:var(--trellis-light);border-left-color:var(--trellis)}
.toc-list a.active{color:var(--trellis);background:var(--trellis-light);border-left-color:var(--trellis);font-weight:600}

/* Prose */
.prose-section{margin-bottom:var(--sp10)}
.prose-section:last-child{margin-bottom:0}
.section-anchor{display:flex;align-items:center;gap:var(--sp2);margin-bottom:var(--sp4)}
.section-num{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);font-family:var(--font-mono);white-space:nowrap}
.section-title{font-family:var(--font-display);font-size:clamp(24px,2.8vw,36px);letter-spacing:-.03em;line-height:1.05;color:var(--navy)}
.section-title em{color:var(--trellis);font-style:italic}
.prose-p{font-size:clamp(15px,1.5vw,17px);color:var(--n600);font-weight:300;line-height:1.85;margin-bottom:var(--sp3)}
.prose-p:last-child{margin-bottom:0}
.prose-p em{font-style:italic;color:var(--n800);font-weight:400}
.prose-p strong{font-weight:700;color:var(--navy)}

/* Pull quotes */
.pull-quote{
  margin:var(--sp6) 0;
  padding:clamp(24px,3vw,40px) clamp(24px,4vw,48px);
  background:white;border-radius:0 var(--r16) var(--r16) 0;
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
}
.pull-quote::before{content:'\201C';font-family:var(--font-display);font-size:160px;color:rgba(45,122,95,.05);position:absolute;top:-32px;left:16px;line-height:1;pointer-events:none;user-select:none}
.pq-green{border-left:4px solid var(--trellis)}
.pq-teal{border-left:4px solid var(--teal)}
.pq-navy{border-left:4px solid var(--navy)}
.pq-text{font-family:var(--font-display);font-size:clamp(17px,1.9vw,23px);letter-spacing:-.02em;line-height:1.4;color:var(--navy);font-style:italic;margin-bottom:var(--sp2);position:relative;z-index:1}
.pq-text em{color:var(--trellis);font-style:normal;font-weight:400}
.pq-attr{font-size:11px;font-weight:700;color:var(--n400);letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-mono)}
.pq-attr a{color:var(--trellis);text-decoration:underline;text-underline-offset:3px}
.pq-page{font-size:10px;color:var(--n400);font-family:var(--font-mono);margin-top:4px}

/* Trellis response */
.trellis-response{background:var(--trellis-light);border-radius:var(--r16);padding:var(--sp4);border-left:4px solid var(--trellis);margin:var(--sp4) 0}
.trellis-response-label{display:flex;align-items:center;gap:8px;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--trellis-dark);margin-bottom:var(--sp2)}
.trellis-response-label span{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--trellis);color:white;font-size:10px}
.trellis-response-text{font-size:14px;color:var(--trellis-dark);line-height:1.7}

/* Finding callout */
.finding-callout{background:white;border-radius:var(--r16);border:1.5px solid var(--n100);padding:var(--sp4);margin:var(--sp4) 0;display:flex;gap:var(--sp3);align-items:flex-start;box-shadow:var(--shadow-sm)}
.finding-callout-icon{width:44px;height:44px;border-radius:var(--r12);background:var(--trellis-light);color:var(--trellis);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.finding-callout-body{}
.finding-callout-label{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);margin-bottom:4px}
.finding-callout-text{font-size:14px;color:var(--navy);line-height:1.6;font-weight:500}

/* Chapter divider */
.chapter-divider{display:flex;align-items:center;gap:var(--sp3);margin:var(--sp8) 0}
.chapter-divider-line{flex:1;height:1px;background:var(--n100)}
.chapter-divider-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--n400);font-family:var(--font-mono);white-space:nowrap}

/* ══════════════════════════
   MASTERY EXPERIENCE CALLOUT
   The big 80% finding
══════════════════════════ */
.mastery-callout{
  background:var(--trellis-dark);border-radius:var(--r20);
  padding:var(--sp8);display:grid;
  grid-template-columns:auto 1fr;gap:var(--sp6);align-items:center;
  margin:var(--sp6) 0;position:relative;overflow:hidden;
}
.mastery-callout::before{
  content:'';position:absolute;top:0;right:0;
  width:240px;height:240px;
  background:radial-gradient(ellipse at 100% 0%,rgba(80,197,183,.18) 0%,transparent 70%);
  pointer-events:none;
}
.mc-num{font-family:var(--font-display);font-size:88px;letter-spacing:-.06em;line-height:1;color:var(--teal);flex-shrink:0;position:relative;z-index:1}
.mc-body{position:relative;z-index:1}
.mc-headline{font-family:var(--font-display);font-size:clamp(18px,2vw,26px);letter-spacing:-.02em;line-height:1.2;color:white;margin-bottom:var(--sp2)}
.mc-text{font-size:14px;color:rgba(255,255,255,.8);line-height:1.7;margin-bottom:8px}
.mc-source{font-size:10px;color:rgba(255,255,255,.55);font-family:var(--font-mono)}

/* ══════════════════════════
   CTE IMPACT STATS BAND
══════════════════════════ */
.impact-band{
  background:var(--warm-white);
  padding:var(--sp8) 0;
  border-top:1px solid var(--n100);border-bottom:1px solid var(--n100);
}
.impact-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4);display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.impact-stat{text-align:center;padding:var(--sp4) var(--sp6);border-right:1px solid var(--n100)}
.impact-stat:last-child{border-right:none}
.impact-num{font-family:var(--font-display);font-size:clamp(44px,6vw,68px);letter-spacing:-.05em;line-height:1;margin-bottom:8px}
.impact-num.green{color:var(--trellis)}
.impact-num.teal{color:var(--teal)}
.impact-num.navy{color:var(--navy)}
.impact-label{font-size:15px;font-weight:600;color:var(--navy);margin-bottom:4px}
.impact-sub{font-size:13px;color:var(--n600);line-height:1.55;font-weight:300}
.impact-cite{font-size:10px;font-family:var(--font-mono);color:var(--n400);margin-top:8px}

/* ══════════════════════════
   ENABLING STRUCTURE DIAGRAM
══════════════════════════ */
.enabling-diagram{
  background:white;border-radius:var(--r20);border:1.5px solid var(--n100);
  padding:var(--sp6);margin:var(--sp6) 0;box-shadow:var(--shadow-sm);
}
.ed-title{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--n400);text-align:center;margin-bottom:var(--sp6)}
.ed-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--sp4);align-items:center}
.ed-col-label{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;text-align:center;margin-bottom:var(--sp3)}
.ed-col-label.hinder{color:rgba(200,16,46,.6)}
.ed-col-label.enable{color:var(--trellis)}
.ed-cards{display:flex;flex-direction:column;gap:var(--sp2)}
.ed-card{padding:var(--sp2) var(--sp3);border-radius:var(--r8);font-size:13px;line-height:1.5}
.ed-card.bad{background:rgba(200,16,46,.04);border:1px solid rgba(200,16,46,.1);color:var(--n600)}
.ed-card.good{background:var(--trellis-light);border:1px solid rgba(45,122,95,.18);color:var(--trellis-dark)}
.ed-arrow{display:flex;flex-direction:column;align-items:center;gap:var(--sp2)}
.ed-arrow-icon{width:40px;height:40px;border-radius:50%;background:var(--trellis);color:white;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:var(--shadow-green)}
.ed-arrow-label{font-size:10px;color:var(--n400);text-align:center;font-family:var(--font-mono);line-height:1.4}
.ed-result{
  grid-column:1/-1;margin-top:var(--sp4);
  padding:var(--sp3) var(--sp4);
  background:var(--navy);border-radius:var(--r12);
  font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,.75);
  text-align:center;
}
.ed-result em{color:var(--teal);font-style:normal;font-weight:700}

/* ══════════════════════════
   SUMMARY TABLE
══════════════════════════ */
.findings-table-section{background:white;padding:var(--sp12) 0;border-top:1px solid var(--n100);border-bottom:1px solid var(--n100)}
.findings-table-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.findings-table{width:100%;border-collapse:collapse}
.findings-table thead th{padding:12px var(--sp3);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);text-align:left;border-bottom:2px solid var(--n100)}
.findings-table td{padding:14px var(--sp3);font-size:13px;color:var(--n800);border-bottom:1px solid var(--n100);vertical-align:top;line-height:1.55}
.findings-table tr:last-child td{border-bottom:none}
.findings-table td:first-child{font-weight:600;color:var(--navy);width:30%}
.findings-table td:nth-child(2){color:var(--n600);font-weight:300;width:35%}
.td-trellis{font-size:12px;color:var(--trellis-dark);font-weight:500;display:inline-block;background:var(--trellis-light);padding:4px 10px;border-radius:6px}

/* ══════════════════════════
   RELATED RESEARCH
══════════════════════════ */
.related-section{background:var(--warm-white);padding:var(--sp12) 0}
.related-inner{max-width:1100px;margin:0 auto;padding:0 var(--sp4)}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp4);margin-top:var(--sp8)}
.related-card{background:white;border-radius:var(--r16);border:1.5px solid var(--n100);padding:var(--sp4);display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.related-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.related-card-num{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--n400);margin-bottom:var(--sp2);font-family:var(--font-mono)}
.related-card-name{font-family:var(--font-display);font-size:24px;letter-spacing:-.02em;color:var(--navy);margin-bottom:4px}
.related-card-field{font-size:11px;font-weight:700;color:var(--trellis);letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--sp2)}
.related-card-finding{font-size:13px;color:var(--n600);line-height:1.6;font-weight:300;margin-bottom:var(--sp4);flex:1}
.related-card-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--trellis);transition:gap .12s}
.related-card-link:hover{gap:10px}

/* ══════════════════════════
   CTA + FOOTER
══════════════════════════ */

/* Responsive — RESEARCH — ZHOU */
@media(max-width:960px){
  .nav-links{display:none}.nav-mobile-toggle{display:flex}
  .hero-inner{grid-template-columns:1fr}
  .author-card{position:static}
  .article-layout{grid-template-columns:1fr}
  .article-sidebar{display:none}
  .sources-grid{grid-template-columns:1fr 1fr}
  .source-item{border-bottom:1px solid var(--n100)}
  .source-item:nth-child(odd){border-right:1px solid var(--n100)}
  .source-item:nth-child(even){border-right:none}
  .source-item:nth-last-child(-n+2){border-bottom:none}
  .impact-inner{grid-template-columns:1fr}
  .impact-stat{border-right:none;border-bottom:1px solid var(--n100)}
  .impact-stat:last-child{border-bottom:none}
  .mastery-callout{grid-template-columns:1fr}
  .mc-num{font-size:64px}
  .ed-grid{grid-template-columns:1fr}
  .ed-arrow{flex-direction:row;gap:var(--sp2)}
  .related-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp4)}
  .footer-grid>div:first-child{grid-column:1/-1}
}

/* ═══════════════════════════════════════════
   PAGE LAYOUT UTILITIES (shared across content pages)
═══════════════════════════════════════════ */
.pg-section {
  padding: 64px 56px;
  width: 100%;
}
.pg-section-mint { background: var(--brand-mint); }
.pg-section-white { background: white; }
.pg-section-blue { background-image: linear-gradient(197deg, #3aa4f2 0%, #37c9d1 81%); }
.pg-section-green { background-image: linear-gradient(217deg, #8bd068 0%, #60cfa0 44%, #37c9d1 100%); }
.pg-inner {
  max-width: 1328px;
  margin: 0 auto;
}
.pg-header {
  max-width: 1328px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.pg-eyebrow {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.pg-eyebrow-white { color: white; }
.pg-headline {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.25;
  margin: 0;
}
.pg-headline-lg {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.15;
  margin: 0;
}
.pg-headline em { font-style: italic; font-weight: 700; }
.pg-headline-lg em { font-style: italic; font-weight: 700; }
.pg-headline-white { color: white; }
.pg-body {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.25;
  margin: 0;
}
.pg-body-lg {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0;
}
.pg-body-white { color: white; }

/* 50/50 two-column layouts */
.pg-50-50 {
  max-width: 1328px;
  margin: 0 auto;
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.pg-50-50-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.pg-img-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: var(--brand-mint);
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  max-width: 500px;
  flex-shrink: 0;
}

/* ── Screenshot / image slots ──
   Drop files into public/images/ using the names in public/images/README.md.
   Until a file exists, onerror="this.remove()" strips the <img> and the
   empty placeholder box (or its label) shows through, so nothing breaks. */
.slot-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.slot-img-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Widescreen variant for app-screenshot slots (fills its column, landscape). */
/* Widescreen app-screenshot slot: shares the row 50/50 with the text and can
   shrink (min-width:0), so wide images never squash the copy or overflow. */
.pg-img-box.wide { aspect-ratio: 16 / 10; max-width: none; flex: 1 1 0; width: auto; min-width: 0; }

/* 3-column card grids */
.pg-3col {
  max-width: 1328px;
  margin: 0 auto;
  display: flex;
  gap: 24px;
  align-items: stretch;
}
.pg-card-mint {
  flex: 1;
  background: var(--brand-mint);
  border-radius: 12px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pg-card-white-border {
  flex: 1;
  border: 2px solid white;
  border-radius: 12px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: white;
}
.pg-card-num {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pg-card-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.1;
}
.pg-card-body {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
}
.pg-card-footnote {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* CTA section */
.pg-cta-inner {
  max-width: 1328px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}
.pg-cta-cards {
  display: flex;
  gap: 26px;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.pg-cta-card {
  background: rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 24px;
  width: 450px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
}
.pg-cta-card-headline {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  color: white;
  line-height: 1.1;
}
.pg-cta-card-body {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: white;
  line-height: 1.4;
}
.pg-btn-white-green {
  display: inline-block;
  background: white;
  border-radius: 12px;
  padding: 16px 32px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  color: var(--brand);
}

@media (max-width: 960px) {
  .pg-section { padding: 48px 24px; }
  .pg-50-50 { flex-direction: column; }
  .pg-img-box { max-width: 100%; }
  .pg-3col { flex-direction: column; }
  .pg-cta-card { width: 100%; }
}