/* ==========================================================================
   GridGrade — styles.css
   LIGHT design system · "Precision instrument, editorial confidence"
   Single coherent naming convention. Every class here is used in index.html;
   every class in index.html has a rule here.

   Display/headings = Fraunces (editorial serif)
   Body/UI          = IBM Plex Sans
   Evidence/code    = IBM Plex Mono
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted woff2, font-display:swap, robust fallback stacks)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/plex-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/plex-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design tokens — LIGHT theme
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces — warm near-white paper → white cards (layered) */
  --paper:        #fbfbf8;  /* page background (warm near-white) */
  --paper-tint:   #f5f6f3;  /* alt section band */
  --surface:      #ffffff;  /* white cards */
  --surface-2:    #f8f9fb;  /* nested / inset surface (cool) */
  --surface-3:    #eef0f2;  /* code/readout fill, table head */

  /* Ink — text (AA-verified on paper/surface) */
  --ink:          #15171c;  /* headings / strong */
  --ink-body:     #2c3038;  /* body */
  --ink-muted:    #5b626d;  /* secondary / captions (AA) */
  --ink-faint:    #6c7682;  /* hairline labels (AA on light fills) */

  /* Borders / hairlines (light-gray) */
  --line:         #e4e6ea;  /* default hairline */
  --line-strong:  #d3d7dd;  /* emphasized hairline / table rules */
  --line-grid:    #e9ebee;  /* worksheet graph-paper lines */

  /* Brand accent — teal→cyan (DECORATIVE / large display only) */
  --brand-teal:   #34d399;  /* emerald */
  --brand-cyan:   #38bdf8;  /* sky */
  --brand-cyan-2: #7dd3fc;  /* light sky (decor strokes) */

  /* Accessible accents for TEXT / LINKS / BUTTONS (AA on white) */
  --accent-deep:  #0e7490;  /* deep teal — links */
  --accent-deep-h:#0b5d72;  /* link hover (darker) */
  --ink-fill:     #14181f;  /* primary button fill (ink) */
  --ink-fill-h:   #232a35;  /* primary button hover */

  /* Semantic */
  --danger:       #b42318;  /* deduction text / errors */
  --danger-soft:  #fdecea;  /* deduction pill bg */
  --success:      #067647;  /* positive states (AA on white) */

  /* Signature gradients (decor only — never behind small text) */
  --grad-brand:      linear-gradient(118deg, #0f766e 0%, #0e7490 52%, #0369a1 100%);
  --grad-mark:       linear-gradient(135deg, #34d399 0%, #38bdf8 100%);
  --grad-wash:       radial-gradient(60% 70% at 78% 8%, rgba(56,189,248,0.14) 0%, rgba(52,211,153,0.10) 32%, rgba(56,189,248,0) 70%);

  /* Type scale (fluid, clamp-based) */
  --fs-display: clamp(2.6rem, 1.6rem + 4.6vw, 4.5rem);
  --fs-h2:      clamp(1.85rem, 1.3rem + 2.2vw, 2.8rem);
  --fs-h3:      1.32rem;
  --fs-h4:      0.78rem;
  --fs-lead:    clamp(1.08rem, 0.98rem + 0.6vw, 1.32rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-chip:    0.75rem;

  /* Fonts (brand face + robust fallbacks) */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-sans:    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* Layout */
  --maxw:    1140px;
  --measure: 66ch;
  --nav-h:   66px;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radius */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* Elevation — SOFT, light-tuned shadows */
  --shadow-xs:   0 1px 2px rgba(20,24,31,0.05);
  --shadow-sm:   0 1px 3px rgba(20,24,31,0.06), 0 1px 2px rgba(20,24,31,0.04);
  --shadow-md:   0 4px 10px rgba(20,24,31,0.06), 0 1px 3px rgba(20,24,31,0.05);
  --shadow-lg:   0 18px 40px -12px rgba(20,24,31,0.16), 0 6px 14px -8px rgba(20,24,31,0.10);
  --shadow-nav:  0 1px 0 rgba(20,24,31,0.06), 0 6px 20px -10px rgba(20,24,31,0.12);
  --shadow-focus: 0 0 0 3px rgba(14,116,144,0.32);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--ink-body);
  background-color: var(--paper);
  /* faint full-page worksheet grid + soft brand wash atmosphere */
  background-image:
    var(--grad-wash),
    linear-gradient(var(--line-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-grid) 1px, transparent 1px);
  background-size: 100% 100%, 28px 28px, 28px 28px;
  background-position: 0 0, 0 0, 0 0;
  background-attachment: fixed, scroll, scroll;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 460;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  font-optical-sizing: auto;
  text-wrap: balance;
}

p { margin: 0; }

a {
  color: var(--accent-deep);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: from-font;
  transition: color 0.15s ease;
}
a:hover { color: var(--accent-deep-h); text-decoration: underline; }

strong { color: var(--ink); font-weight: 600; }
em { font-style: italic; }

code, .mono { font-family: var(--font-mono); }

/* --------------------------------------------------------------------------
   4. Accessibility — skip link & focus-visible
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--ink-fill);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--fs-small);
  box-shadow: var(--shadow-lg);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; text-decoration: none; outline: none; }

:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus-visible, .btn:focus-visible, button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* --------------------------------------------------------------------------
   5. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

.section {
  position: relative;
  padding-block: clamp(var(--space-8), 9vw, var(--space-9));
}
.section--alt {
  background: var(--paper-tint);
  border-block: 1px solid var(--line);
}

.section__head {
  max-width: 760px;
  margin-bottom: var(--space-7);
}
.section__head h2 { font-size: var(--fs-h2); }
.section__head .lead { margin-top: var(--space-4); }

.center { text-align: center; }
.small {
  font-size: var(--fs-small);
  color: var(--ink-muted);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   6. Typography helpers
   -------------------------------------------------------------------------- */
.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-body);
  max-width: var(--measure);
}

.gradient-text {
  background: var(--grad-mark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   7. Brand wordmark
   -------------------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 600;
}
.brand:hover { color: var(--ink); text-decoration: none; }
.brand__mark { display: inline-flex; }
.brand__mark svg { filter: drop-shadow(0 1px 1px rgba(20,24,31,0.08)); }
.brand__word {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --_pad-y: 11px;
  --_pad-x: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  padding: var(--_pad-y) var(--_pad-x);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.16s var(--ease), box-shadow 0.18s var(--ease),
              background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(0.5px); }

.btn--primary {
  background: var(--ink-fill);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--ink-fill-h);
  color: #fff;
  transform: translateY(-1.5px);
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-xs);
}
.btn--secondary:hover {
  color: var(--ink);
  border-color: var(--accent-deep);
  transform: translateY(-1.5px);
  box-shadow: var(--shadow-sm);
}

.btn--lg { --_pad-y: 14px; --_pad-x: 26px; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* --------------------------------------------------------------------------
   9. Chips & pills
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-chip);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px 13px 6px 11px;
  box-shadow: var(--shadow-xs);
}
.chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--grad-mark);
  flex: none;
  box-shadow: 0 0 0 3px rgba(56,189,248,0.14);
}
.chip--accent {
  color: var(--accent-deep);
  border-color: rgba(14,116,144,0.28);
  background: linear-gradient(180deg, #fff, #f3fbfd);
}

.ded-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid rgba(180,35,24,0.22);
  border-radius: var(--r-sm);
  padding: 3px 11px;
}

/* --------------------------------------------------------------------------
   10. Header / nav (sticky, light, scroll-state hairline)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251,251,248,0.82);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease),
              background-color 0.25s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(251,251,248,0.92);
  box-shadow: var(--shadow-nav);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--nav-h);
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: auto;
}
.nav__link {
  display: inline-block;
  padding: 8px 13px;
  border-radius: var(--r-sm);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-body);
}
.nav__link:hover {
  color: var(--ink);
  background: var(--surface-3);
  text-decoration: none;
}
.nav__cta { margin-left: 6px; }

.nav__toggle {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle:hover { border-color: var(--accent-deep); }

/* Mobile slide-down panel */
.mobile-panel {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.mobile-panel.is-open { display: block; }
.mobile-panel ul {
  list-style: none;
  margin: 0;
  padding: var(--space-4) clamp(20px, 5vw, 40px) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-panel a {
  display: block;
  padding: 13px 14px;
  border-radius: var(--r-sm);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink-body);
}
.mobile-panel a:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.mobile-panel li:last-child { margin-top: var(--space-3); }
.mobile-panel li:last-child a.btn { color: #fff; }
.mobile-panel li:last-child a.btn:hover { color: #fff; }

/* --------------------------------------------------------------------------
   11. Announcement bar
   -------------------------------------------------------------------------- */
.announce {
  background: var(--ink-fill);
  color: #eef1f5;
  font-size: var(--fs-small);
}
.announce.is-hidden { display: none; }
.announce__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 9px clamp(48px, 8vw, 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  position: relative;
  text-align: center;
}
.announce__inner a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--brand-cyan-2);
}
.announce__inner a:hover { color: var(--brand-cyan-2); }
.announce__close {
  position: absolute;
  right: clamp(12px, 4vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  line-height: 1;
  color: #c7cdd6;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.announce__close:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* --------------------------------------------------------------------------
   12. Hero (asymmetric, orchestrated load, worksheet grid backdrop)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(var(--space-8), 9vw, 132px) clamp(var(--space-8), 8vw, var(--space-9));
  overflow: hidden;
}
.hero::before {
  /* denser worksheet grid panel fading out — the memorable motif */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-grid) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px;
  -webkit-mask-image: radial-gradient(110% 80% at 70% 0%, #000 0%, rgba(0,0,0,0.5) 45%, transparent 78%);
  mask-image: radial-gradient(110% 80% at 70% 0%, #000 0%, rgba(0,0,0,0.5) 45%, transparent 78%);
  z-index: 0;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(var(--space-6), 5vw, var(--space-8));
  align-items: center;
}
.hero .prose { max-width: 640px; }
.hero h1 {
  font-size: var(--fs-display);
  margin-top: var(--space-5);
  font-weight: 390;
  letter-spacing: -0.018em;
}
/* one expressive Fraunces italic accent on a key hero phrase */
.hero h1 .accent {
  font-style: italic;
  font-weight: 420;
}
.hero .lead { margin-top: var(--space-5); }
.hero .btn-row { margin-top: var(--space-6); }

.hero__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

/* Animated grid mark — trimmed so the two stacked evidence cards lead the eye */
.hero-mark { width: clamp(60px, 9vw, 84px); height: auto; }
.hero-mark .sq-fill { transform-box: fill-box; transform-origin: center; }

/* Two evidence cards — fair (accept) above rigorous (deduction) — proving both at a glance.
   A clean vertical stack so the credit card leads; max-width keeps the column tidy.
   (No per-card transform here — the orchestrated gg-rise load owns transform.) */
.hero__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 440px;
}
.hero__cards .evidence-card { max-width: none; margin: 0; }

/* Evidence card — rendered as a crisp spreadsheet readout */
.evidence-card {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 420px;
  position: relative;
}
.evidence-card::before {
  /* spreadsheet column tab accent on the top edge */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--grad-mark);
  opacity: 0.9;
}
.evidence-card__head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.evidence-card__head .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--danger);
  flex: none;
}
.evidence-card code {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-cyan);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.evidence-card .fix-line {
  font-size: 0.92rem;
  color: var(--ink-body);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line-strong);
}

/* --------------------------------------------------------------------------
   13. Trust strip
   -------------------------------------------------------------------------- */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* --------------------------------------------------------------------------
   14. Cards & capability grid
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-5); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  position: relative;
  /* faint cell-grid texture inside each card */
  background-image:
    linear-gradient(var(--line-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-grid) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px;
  background-position: -1px -1px, -1px -1px;
}
.card h3 {
  font-size: var(--fs-h3);
  font-weight: 500;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}
.card p { color: var(--ink-body); font-size: 0.98rem; }
/* Mono "field tag" footer — pinned to the bottom of every capability card.
   margin-top:auto distributes the slack so short and tall cards share a baseline,
   and the hairline rule reinforces the spreadsheet/evidence identity. */
.card p.card__tag {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.card--hover { transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease); }
.card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line-strong);
}

.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  color: var(--accent-deep);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.icon-tile svg { width: 24px; height: 24px; }
.icon-tile--grad {
  color: #fff;
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 4px 12px -4px rgba(3,105,161,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
}

/* --------------------------------------------------------------------------
   15. Comparison table (+ mobile card variant)
   -------------------------------------------------------------------------- */
.compare-wrap {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96rem;
}
.compare thead th {
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--surface-3);
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-strong);
}
.compare thead th:last-child {
  color: var(--accent-deep);
  background: linear-gradient(180deg, #f1fbfd, #e8f7fb);
}
.compare tbody td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-body);
}
.compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody td:first-child { font-weight: 600; color: var(--ink); }
.compare tbody tr:nth-child(even) td { background: var(--surface-2); }
.compare .col-them { color: var(--ink-muted); }
.compare .col-us {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(56,189,248,0.05), rgba(52,211,153,0.04)) !important;
  border-left: 2px solid rgba(14,116,144,0.25);
}
.compare tbody tr:nth-child(even) td.col-us {
  background: linear-gradient(180deg, rgba(56,189,248,0.085), rgba(52,211,153,0.06)) !important;
}

/* Mobile card variant (hidden on desktop) */
.compare-cards { display: none; flex-direction: column; gap: var(--space-4); }
.cc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.cc__task {
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--ink);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.cc__row { display: grid; gap: 3px; padding-block: var(--space-3); }
.cc__row + .cc__row { border-top: 1px dashed var(--line); }
.cc__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.cc__them { color: var(--ink-muted); font-size: 0.95rem; }
.cc__us { color: var(--ink); font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   16. Steps (how-it-works teaser)
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  counter-reset: step;
}
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent-deep);
  margin-bottom: var(--space-3);
}
.step__kicker {
  display: block;
  font-family: var(--font-display);
  font-size: 1.18rem;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.step p { font-size: 0.94rem; color: var(--ink-body); }

/* --------------------------------------------------------------------------
   17. Pricing teaser mini-cards
   -------------------------------------------------------------------------- */
.mini-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.mini-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.mini-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  font-weight: 480;
  line-height: 1.05;
  color: var(--ink);
}
.num--grad {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mini-card .label {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   18. Final CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  text-align: center;
}
.cta-band .container {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  padding: clamp(var(--space-7), 7vw, var(--space-9)) clamp(var(--space-5), 5vw, var(--space-8));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 900px;
}
.cta-band .container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-wash);
  z-index: 0;
}
.cta-band .container::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-grid) 1px, transparent 1px);
  background-size: 30px 30px, 30px 30px;
  -webkit-mask-image: radial-gradient(70% 90% at 50% 0%, #000, transparent 70%);
  mask-image: radial-gradient(70% 90% at 50% 0%, #000, transparent 70%);
  opacity: 0.7;
  z-index: 0;
}
.cta-band h2 { position: relative; z-index: 1; font-size: var(--fs-h2); }
.cta-band .lead { position: relative; z-index: 1; margin-top: var(--space-4); max-width: 620px; margin-inline: auto; }
.cta-band .btn-row { position: relative; z-index: 1; margin-top: var(--space-6); justify-content: center; }
.cta-band .small { position: relative; z-index: 1; }
.founder-line {
  position: relative;
  z-index: 1;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  max-width: 560px;
  margin-inline: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink-body);
}

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-block: var(--space-8) var(--space-6);
  margin-top: var(--space-2);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--space-6);
}
.footer-col h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col ul a { color: var(--ink-body); font-size: 0.95rem; }
.footer-col ul a:hover { color: var(--accent-deep); }
.footer-brand .brand { margin-bottom: var(--space-4); }
.footer-tag {
  color: var(--ink-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 34ch;
  margin-bottom: var(--space-3);
}
.footer-baseline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: baseline;
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-muted);
}
.footer-baseline .disclaimer { flex: 1 1 320px; min-width: 240px; color: var(--ink-faint); line-height: 1.55; }

/* --------------------------------------------------------------------------
   19b. Forms — crisp worksheet inputs (contact form system)
        Every class here matches contact.html's markup 1:1.
   -------------------------------------------------------------------------- */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 720px;
}
.form--full { max-width: 760px; }

/* .contact-form is the JS behaviour hook (app.js: querySelectorAll("form.contact-form"))
   and the #contact-form anchor target. Layout/visuals come from .form/.form--full;
   this rule exists so the class is part of the styles.css vocabulary (no orphans). */
.contact-form { display: flex; flex-direction: column; }

/* Field stack: label, control, error */
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

/* Two fields side-by-side on wider viewports.
   .field--row is the markup wrapper; .form-row--2 is an alias for the same intent. */
.field--row,
.form-row--2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 560px) {
  .field--row,
  .form-row--2 { grid-template-columns: 1fr 1fr; }
}

/* Labels */
label,
.field-label {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.field-label { display: block; }
.req { color: var(--danger); font-weight: 600; }

/* Inputs — crisp worksheet cells: white fill, hairline border, mono-ish precision */
.input,
.select,
.textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-body);
  background-color: var(--surface);
  border: 1px solid #d8dad5;
  border-radius: var(--r-sm);
  padding: 11px 14px;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s ease, box-shadow 0.16s var(--ease), background-color 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}
.input::placeholder,
.textarea::placeholder { color: var(--ink-faint); opacity: 1; }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--line-strong); }

.input:focus,
.select:focus,
.textarea:focus,
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: none;
  border-color: var(--accent-deep);
  box-shadow: var(--shadow-focus);
  background-color: var(--surface);
}

.textarea {
  min-height: 148px;
  resize: vertical;
}

/* Select — custom chevron (deep teal) drawn as a background SVG */
.select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230e7490' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

/* Invalid state (set by JS or :user-invalid) */
.input.is-invalid,
.select.is-invalid,
.textarea.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(180,35,24,0.16);
}

/* Per-field error text */
.field__error {
  display: none;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--danger);
  font-weight: 500;
}
.field__error.is-shown { display: block; }

/* Radio cards — selectable cards, teal checked state */
.radio-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--space-3);
}
.radio-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 0.96rem;
  color: var(--ink-body);
  background: var(--surface);
  border: 1px solid #d8dad5;
  border-radius: var(--r-md);
  padding: 13px 15px;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s ease, box-shadow 0.16s var(--ease), background-color 0.15s ease, color 0.15s ease;
}
.radio-card input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex: none;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.radio-card:hover { border-color: var(--line-strong); }
.radio-card input[type="radio"]:checked {
  border-color: var(--accent-deep);
  border-width: 5px;
}
.radio-card:has(input[type="radio"]:checked) {
  border-color: var(--accent-deep);
  color: var(--ink);
  background: linear-gradient(180deg, #fff, #f3fbfd);
  box-shadow: 0 0 0 1px rgba(14,116,144,0.25), var(--shadow-sm);
}
.radio-card:has(input[type="radio"]:focus-visible) {
  box-shadow: var(--shadow-focus);
}
/* Fallback for browsers without :has() — keep keyboard focus visible */
.radio-card input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}

/* Checkbox field — consent row */
.checkbox-field {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
}
.checkbox-field input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex: none;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.checkbox-field input[type="checkbox"]:hover { border-color: var(--accent-deep); }
.checkbox-field input[type="checkbox"]:checked {
  background-color: var(--accent-deep);
  border-color: var(--accent-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.checkbox-field input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.checkbox-field label {
  font-weight: 400;
  font-size: 0.96rem;
  color: var(--ink-body);
  line-height: 1.5;
  cursor: pointer;
}

/* Error summary banner above the form */
.form-banner {
  display: none;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.96rem;
  line-height: 1.5;
  border-radius: var(--r-md);
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink-body);
}
.form-banner.is-shown { display: flex; }
.form-banner--error {
  color: #7a1a12;
  background: var(--danger-soft);
  border-color: rgba(180,35,24,0.28);
}
.form-banner--error::before {
  content: "!";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
  background: var(--danger);
  border-radius: 50%;
  line-height: 1;
}
.form-banner a { color: inherit; font-weight: 600; text-decoration: underline; }

/* Success panel — hidden by default, revealed on a 200 response */
.form-success {
  display: none;
  flex-direction: column;
  gap: var(--space-4);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  box-shadow: var(--shadow-md);
  max-width: 560px;
}
.form-success.is-shown { display: flex; }
.form-success__icon {
  width: 56px;
  height: 56px;
  margin-inline: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--grad-brand);
  border-radius: 50%;
  box-shadow: 0 6px 16px -6px rgba(3,105,161,0.5);
}
.form-success__icon svg { width: 28px; height: 28px; }
.form-success h2,
.form-success h3 { font-size: var(--fs-h3); }
.form-success p { color: var(--ink-body); }
.form-success:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Honeypot — present in the a11y tree but visually removed off-screen.
   Match both class names so either markup wrapper is covered. */
.honeypot,
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   19c. Prose blocks — readable body copy inside a section
        (.prose is also used in index.html's hero as a structural hook)
   -------------------------------------------------------------------------- */
.prose { max-width: var(--measure); }
.prose > p + p { margin-top: var(--space-4); }
.prose p { color: var(--ink-body); }

/* --------------------------------------------------------------------------
   19c-i. Quicklinks — in-page jump nav, rendered as worksheet tab pills
          (support.html jump bar, privacy.html hero anchors)
   -------------------------------------------------------------------------- */
.quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.quicklinks a {
  display: inline-flex;
  align-items: center;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-body);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 8px 15px;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s ease, color 0.15s ease,
              background-color 0.15s ease, box-shadow 0.16s var(--ease);
}
.quicklinks a:hover {
  color: var(--accent-deep);
  border-color: var(--accent-deep);
  background: linear-gradient(180deg, #fff, #f3fbfd);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   19c-ii. Ordered / unordered worksheet lists
           (.steps-list — support "getting started" steps; privacy security list)
           Numbered variant gets a mono ledger counter; bare variant gets a
           teal cell-tick. Sits inside a .prose measure for readability.
   -------------------------------------------------------------------------- */
.steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 68ch;
}
.steps-list li {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px 14px 52px;
  box-shadow: var(--shadow-xs);
  color: var(--ink-body);
  font-size: 0.98rem;
  line-height: 1.55;
}
/* Numbered ledger counter for ordered lists */
ol.steps-list { counter-reset: sl; }
ol.steps-list li { counter-increment: sl; }
ol.steps-list li::before {
  content: counter(sl, decimal-leading-zero);
  position: absolute;
  left: 14px;
  top: 14px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-deep);
}
/* Cell-tick marker for unordered lists */
ul.steps-list li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 19px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--accent-deep);
  border-bottom: 2px solid var(--accent-deep);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   19d. Lifecycle feature rows (how-it-works: LOCATE → … → SCORE)
        Two-column: copy on the left, an evidence readout on the right.
   -------------------------------------------------------------------------- */
.feature-row {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--space-5), 4vw, var(--space-7));
  align-items: center;
  padding-block: var(--space-6);
  border-top: 1px solid var(--line);
}
.feature-row:first-of-type { border-top: 0; padding-top: var(--space-2); }
.feature-row h3 {
  font-size: 1.35rem;
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}
.feature-row p { color: var(--ink-body); max-width: 56ch; }
.feature-row__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  background: var(--grad-brand);
  box-shadow: 0 4px 12px -4px rgba(3,105,161,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
}
.feature-row__media { min-width: 0; }
/* The evidence-card sits flush inside a feature row (no 420px cap here) */
.feature-row__media .evidence-card { max-width: none; }
.feature-row__media .evidence-card code b { color: var(--accent-deep); font-weight: 600; }

/* --------------------------------------------------------------------------
   19e. Accordion (how-it-works: "what it grades — in detail")
        Native <details>/<summary>, styled as worksheet rows.
   -------------------------------------------------------------------------- */
.accordion {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.accordion details { border-top: 1px solid var(--line); }
.accordion details:first-child { border-top: 0; }
.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  transition: background-color 0.15s ease;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--accent-deep);
  border-bottom: 2px solid var(--accent-deep);
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
  margin-top: -3px;
}
.accordion details[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; }
.accordion summary:hover { background: var(--surface-2); }
.accordion details[open] > summary { background: var(--surface-2); }
.accordion__body { padding: 0 20px 18px; }
.accordion__body p { color: var(--ink-body); font-size: 0.98rem; max-width: 68ch; }

/* --------------------------------------------------------------------------
   19f. Callout — bordered note panel (warn variant gets a teal rule)
   -------------------------------------------------------------------------- */
.callout {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-xs);
  max-width: none;
}
.callout p { color: var(--ink-body); }
.callout--warn {
  border-left-color: var(--accent-deep);
  background: linear-gradient(180deg, #fff, #f6fbfc);
}
.callout a { font-weight: 600; }

/* --------------------------------------------------------------------------
   19g. Pricing — banded table, price cards, pay-toggle, FAQ
   -------------------------------------------------------------------------- */
.grid--2 { grid-template-columns: repeat(2, 1fr); }

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

/* Pay-model toggle (anchor links to the two model sections) */
.pay-toggle {
  display: inline-flex;
  gap: 4px;
  margin-top: var(--space-5);
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-xs);
}
.pay-toggle .btn { box-shadow: none; }

/* Banded price table */
.price-table-wrap {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96rem;
}
.price-table thead th {
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--surface-3);
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-strong);
}
.price-table tbody td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--ink-body);
}
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table tbody tr:nth-child(even) td { background: var(--surface-2); }
.price-table .band { font-weight: 600; color: var(--ink); }
.price-table .price {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 500;
  color: var(--ink);
}
.price-table .muted { font-size: 0.9rem; }

/* Price cards */
.price-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.price-card__tag {
  align-self: flex-start;
  font-size: var(--fs-chip);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: linear-gradient(180deg, #fff, #f3fbfd);
  border: 1px solid rgba(14,116,144,0.28);
  border-radius: var(--r-pill);
  padding: 5px 12px;
}
.price-card__price {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.3rem);
  font-weight: 480;
  line-height: 1.05;
  color: var(--ink);
}
.price-card__price span {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-muted);
}
.price-card p { color: var(--ink-body); }
.price-card--featured {
  border-color: rgba(14,116,144,0.3);
  background:
    linear-gradient(180deg, rgba(56,189,248,0.05), rgba(52,211,153,0.03)),
    var(--surface);
  box-shadow: var(--shadow-md);
}

/* Standalone-affordability highlight (replaces competitor-price badge) */
.badge-highlight {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(56,189,248,0.10), rgba(52,211,153,0.07));
  border: 1px solid rgba(14,116,144,0.22);
  border-radius: var(--r-md);
  padding: 10px 14px;
  line-height: 1.5;
}

/* Pricing / general FAQ (definition list) */
.faq { max-width: 760px; }
.faq dt {
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--ink);
  margin-top: var(--space-5);
}
.faq dt:first-child { margin-top: 0; }
.faq dd {
  margin: var(--space-2) 0 0;
  color: var(--ink-body);
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   20. Motion — orchestrated hero load + scroll reveal
   -------------------------------------------------------------------------- */
@keyframes gg-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gg-pop {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

/* Hero entrance — staggered */
.hero .prose > * { opacity: 0; animation: gg-rise 0.7s var(--ease) forwards; }
.hero .prose > .chip          { animation-delay: 0.05s; }
.hero .prose > h1             { animation-delay: 0.16s; }
.hero .prose > .lead          { animation-delay: 0.30s; }
.hero .prose > .btn-row       { animation-delay: 0.44s; }
.hero__visual .hero-mark      { opacity: 0; animation: gg-rise 0.7s var(--ease) 0.40s forwards; }
.hero__visual .hero-mark .sq-fill { opacity: 0; animation: gg-pop 0.5s var(--ease) forwards; }
.hero__visual .hero-mark .sq--1 { animation-delay: 0.52s; }
.hero__visual .hero-mark .sq--2 { animation-delay: 0.62s; }
.hero__visual .hero-mark .sq--3 { animation-delay: 0.72s; }
.hero__visual .hero-mark .sq--4 { animation-delay: 0.82s; }
.hero__visual .evidence-card  { opacity: 0; animation: gg-rise 0.7s var(--ease) 0.58s forwards; }
.hero__visual .hero__cards .evidence-card--accept { animation-delay: 0.58s; }
.hero__visual .hero__cards .evidence-card--deduct { animation-delay: 0.70s; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
/* stagger siblings within a grid/steps row */
.grid .reveal:nth-child(2), .steps .reveal:nth-child(2) { transition-delay: 0.06s; }
.grid .reveal:nth-child(3), .steps .reveal:nth-child(3) { transition-delay: 0.12s; }
.grid .reveal:nth-child(4), .steps .reveal:nth-child(4) { transition-delay: 0.18s; }
.grid .reveal:nth-child(5) { transition-delay: 0.24s; }
.grid .reveal:nth-child(6) { transition-delay: 0.30s; }

/* --------------------------------------------------------------------------
   20b. Evidence-card outcome states (sample page) — same component, four states.
   Extends .evidence-card with a state-colored top accent + head dot + result pill,
   reusing the existing token palette. No new visual language; AA contrast.
   -------------------------------------------------------------------------- */
.evidence-card--accept::before { background: var(--success); opacity: 1; }
.evidence-card--accept .evidence-card__head .dot { background: var(--success); }
.evidence-card--deduct::before { background: var(--danger); opacity: 1; }
.evidence-card--partial::before { background: var(--grad-mark); opacity: 1; }
.evidence-card--review::before { background: var(--accent-deep); opacity: 1; }
.evidence-card--review .evidence-card__head .dot { background: var(--accent-deep); }

/* result pill — accept (credit) and review variants alongside the existing .ded-pill */
.ev-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--r-sm);
  padding: 3px 11px;
}
.ev-pill--credit {
  color: var(--success);
  background: #e7f4ee;
  border: 1px solid rgba(6,118,71,0.22);
}
.ev-pill--review {
  color: var(--accent-deep);
  background: #eef9fb;
  border: 1px solid rgba(14,116,144,0.22);
}

/* the located-at + status meta row inside a sample evidence card */
.ev-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-muted);
}
.ev-meta b { color: var(--ink); font-weight: 600; }

/* a soft inline note for the "what the student did" line above the code block */
.ev-did {
  font-size: 0.92rem;
  color: var(--ink-body);
  margin: 0;
}
.ev-did b { color: var(--ink); font-weight: 600; }

/* sample-page layout: stack the four cards full-width with breathing room */
.sample-cases { display: grid; gap: var(--space-6); max-width: 760px; margin-inline: auto; }
.sample-cases .evidence-card { max-width: none; }
.sample-case__lead {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: var(--space-3);
}
.sample-case__lead h3 { font-size: var(--fs-h3); font-weight: 500; }
.sample-case__lead .q {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* condensed 2-up sample teaser (why-gridgrade) reuses .evidence-card */
.sample-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.sample-teaser .evidence-card { max-width: none; }

/* --------------------------------------------------------------------------
   21. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .nav__links { display: none; }
  .nav__cta   { display: none; }
  .nav__toggle { display: inline-flex; }
}

@media (min-width: 1024px) {
  .mobile-panel { display: none !important; }
}

@media (max-width: 920px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: 2; align-items: flex-start; }
  .hero .prose { order: 1; max-width: none; }
  .evidence-card { max-width: 480px; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5); }
  .footer-brand { grid-column: 1 / -1; }
  .feature-row { grid-template-columns: 1fr; gap: var(--space-5); }
}

@media (max-width: 720px) {
  /* swap comparison table → cards */
  .compare-wrap { display: none; }
  .compare-cards { display: flex; }
}

@media (max-width: 720px) {
  /* stack price-table cells (no horizontal scroll on narrow screens) */
  .price-table thead { display: none; }
  .price-table,
  .price-table tbody,
  .price-table tr,
  .price-table td { display: block; width: 100%; }
  .price-table tr {
    border-bottom: 1px solid var(--line-strong);
    padding: var(--space-3) 0;
  }
  .price-table tbody tr:last-child { border-bottom: 0; }
  .price-table tbody tr:nth-child(even) td { background: transparent; }
  .price-table td {
    border-bottom: 0;
    padding: 4px 18px;
  }
  .price-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
}

@media (max-width: 600px) {
  .grid--3 { grid-template-columns: 1fr; }
  .grid--2 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .mini-cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .btn-row .btn { flex: 1 1 auto; }
  .hero__visual { align-items: stretch; }
  .evidence-card { max-width: none; }
  .sample-teaser { grid-template-columns: 1fr; }
  .pay-toggle { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   22. Reduced motion — disable all orchestration
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero .prose > *,
  .hero__visual .hero-mark,
  .hero__visual .hero-mark .sq-fill,
  .hero__visual .evidence-card,
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   23. APP COMPATIBILITY LAYER — instructor app (app/templates/*)
   The Jinja app links this same stylesheet and layers inline styles in
   base.html that reference the OLD dark design's tokens and classes. This
   section maps those legacy names onto the light palette so the app keeps
   rendering correctly. None of these classes appear in the marketing pages
   (verified), so this section is inert there. Keep it at the END of the
   file; remove it only after app/templates/base.html is migrated to the
   new token names.
   -------------------------------------------------------------------------- */
:root {
  /* Legacy token aliases: old dark-theme names -> light-palette values.
     base.html falls back to dark hex codes when these are undefined, which
     would paint white headings on a white page — so they MUST exist. */
  --bg-0: var(--paper);
  --bg-1: var(--surface-3);   /* old: darkest inset (inputs, table heads) */
  --bg-2: var(--surface);     /* old: card surface */
  --text-strong: var(--ink);
  --text-base: var(--ink-body);
  --text-muted: var(--ink-muted);
  --border: var(--line);
  --accent-blue: var(--accent-deep);    /* used as hover/border + text accents */
  --accent-blue-2: var(--accent-deep);  /* old light-sky TEXT color: unreadable on white, remap deep */
  --accent-green: var(--success);       /* used as TEXT color (.pass) — needs AA on white */
}

/* App nav: <header class="nav"><div class="nav__inner">… (marketing instead
   wraps <nav class="nav"> in .site-header). .nav already provides the flex
   row + maxw + padding; .nav__inner becomes a full-width inner row, and the
   header itself gets the site-header bar treatment. */
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
}
.nav:has(> .nav__inner) {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 251, 248, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-nav);
}

/* Legacy brand wordmark (renamed .brand__word in the new design). */
.brand__name {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}

/* Base .badge pill: the app layers status variants (.badge--ok/--info/--warn/
   --muted/--fail, defined in base.html) over this neutral shape. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink-muted);
}

/* Evidence-card internals the app still renders (the marketing mock moved to
   bare <code> + .fix-line). */
.evidence-card__title {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.evidence-card__snippet {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--ink);
  line-height: 1.55;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--space-3) var(--space-4);
  margin: 0;
  white-space: pre-wrap;
  overflow-x: auto;
}
.evidence-card__fix {
  font-size: var(--fs-small);
  color: var(--ink-body);
  margin: 0;
}
.evidence-card__fix strong { color: var(--success); }

/* Deduction pill (app grading output), recolored for the light palette. */
.pill-deduction {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--danger-soft);
  border: 1px solid rgba(180, 35, 24, 0.28);
  color: var(--danger);
  font-weight: 700;
}

/* The app's review cards (every one carries data-review-state) are full-width
   state-accented rows — undo the marketing hero's 420px cap and its decorative
   gradient top tab (base.html's review--* LEFT accent encodes the state; a
   green-cyan tab on an unlocated check would mislead). */
.evidence-card[data-review-state] {
  max-width: none;
  box-shadow: var(--shadow-sm);
}
.evidence-card[data-review-state]::before { display: none; }

/* Legibility patches for base.html colors hand-tuned for the old dark bg.
   (main .x outranks base.html's .x by specificity; the app renders all page
   content inside <main>, and marketing pages never use these classes.) */
main .fail { color: var(--danger); }            /* was #f87171 — ~2.7:1 on white */
main .badge--warn { color: #8a5a00; }           /* was #fbbf24 — illegible on its light amber fill */
main .review-banner--alert { color: var(--danger); }  /* was #fecaca — invisible on the light card */