/* ==========================================================================
   Equal PDF — build-a styles  (SEVERE EDITORIAL / PALANTIR-DARK)
   Depends on css/tokens.css (linked FIRST). Every color, type size, and
   spacing value is a token from that file — no ad-hoc values that would
   break the WCAG-verified palette. Import discipline: tokens define the
   contract; this file only composes it.
   ========================================================================== */

/* ------------------------------------------------------------------ *
   1. Optional webfonts. The token font-stacks fall back to
      Helvetica Neue -> Arial on locked-down machines, so a failed
      webfont load never breaks layout or contrast.
 * ------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ev-bg);
  color: var(--ev-text);
  font-family: var(--ev-font-body);
  font-size: var(--ev-fs-body);
  font-weight: var(--ev-weight-regular);
  line-height: var(--ev-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--ev-link); }

/* Honor reduce-motion at the document level. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* When the on-page toggle sets the class, cut motion the same way. */
:root.ev-reduce-motion *,
:root.ev-reduce-motion *::before,
:root.ev-reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* ------------------------------------------------------------------ *
   3. Global focus contract — never removed, always visible.
      Light surfaces use --ev-focus; dark surfaces override to
      --ev-focus-inverse further down.
 * ------------------------------------------------------------------ */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--ev-focus-width) solid var(--ev-focus);
  outline-offset: var(--ev-focus-offset);
  border-radius: var(--ev-radius-sm);
}
/* Fallback for engines without :focus-visible — keep a visible ring. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus {
  outline: var(--ev-focus-width) solid var(--ev-focus);
  outline-offset: var(--ev-focus-offset);
}
:where(a, button, input, textarea, select, summary, [tabindex]):focus:not(:focus-visible) {
  outline: var(--ev-focus-width) solid var(--ev-focus);
  outline-offset: var(--ev-focus-offset);
}

/* ------------------------------------------------------------------ *
   4. Layout primitives
 * ------------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--ev-maxwidth-page);
  margin-inline: auto;
  padding-inline: var(--ev-space-5);
}
.wrap--prose { max-width: 76ch; }

.section {
  padding-block: var(--ev-space-9);
  border-top: var(--ev-border-hairline) solid var(--ev-border);
}
.section--band { background: var(--ev-bg-band); }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ev-space-6);
}
@media (min-width: 52em) {
  .grid-2 {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: var(--ev-space-8);
    align-items: start;
  }
}

.prose { max-width: var(--ev-maxwidth-prose); }
.prose p { margin-block: 0 var(--ev-space-4); }
.prose p:last-child { margin-bottom: 0; }
.prose--center { max-width: 60ch; margin-inline: auto; text-align: center; }

/* ------------------------------------------------------------------ *
   5. Typography helpers
 * ------------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--ev-font-display);
  color: var(--ev-text);
  line-height: var(--ev-lh-tight);
  letter-spacing: var(--ev-tracking-tight);
  font-weight: var(--ev-weight-semi);
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: var(--ev-fs-h2); }
h3 { font-size: var(--ev-fs-h4); line-height: var(--ev-lh-snug); }

.eyebrow {
  font-family: var(--ev-font-mono);
  font-size: var(--ev-fs-caption);
  font-weight: var(--ev-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ev-text-muted);
  margin: 0 0 var(--ev-space-3);
}
.eyebrow--light { color: var(--ev-text-muted); }

.section__lead h2 { margin-top: var(--ev-space-2); }
.section__lead--wide { max-width: 60ch; margin-bottom: var(--ev-space-7); }
.section__intro {
  font-size: var(--ev-fs-body-lg);
  color: var(--ev-text-secondary);
  margin-block: var(--ev-space-4) 0;
  max-width: var(--ev-maxwidth-prose);
}
.section__aside {
  font-family: var(--ev-font-legal);
  font-style: italic;
  font-size: var(--ev-fs-body-lg);
  color: var(--ev-text);
  border-left: 2px solid var(--ev-border-strong);
  padding-left: var(--ev-space-4);
  margin-block: var(--ev-space-5) 0;
  max-width: var(--ev-maxwidth-prose);
}

/* ------------------------------------------------------------------ *
   6. Skip link — first focusable, hidden until focused
 * ------------------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: var(--ev-space-4);
  top: -100px;
  z-index: 200;
  background: var(--ev-ink);
  color: var(--ev-white);
  padding: var(--ev-space-3) var(--ev-space-4);
  border-radius: var(--ev-radius-sm);
  font-weight: var(--ev-weight-semi);
  text-decoration: none;
  transition: top var(--ev-duration-fast) var(--ev-ease);
}
.skip-link:focus {
  top: var(--ev-space-3);
  outline: var(--ev-focus-width) solid var(--ev-focus-inverse);
  outline-offset: var(--ev-focus-offset);
}

/* ------------------------------------------------------------------ *
   7. Buttons — tap targets >= 44px tall (well over the 24px floor)
 * ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ev-space-2);
  min-height: 44px;
  padding: var(--ev-space-3) var(--ev-space-5);
  font-family: var(--ev-font-display);
  font-size: var(--ev-fs-body);
  font-weight: var(--ev-weight-semi);
  line-height: 1.1;
  text-decoration: none;
  text-align: center;
  border: var(--ev-border-hairline) solid transparent;
  border-radius: var(--ev-radius-sm);
  cursor: pointer;
  transition: background-color var(--ev-duration-fast) var(--ev-ease),
              color var(--ev-duration-fast) var(--ev-ease),
              border-color var(--ev-duration-fast) var(--ev-ease);
}
.btn--lg { min-height: 48px; padding: var(--ev-space-4) var(--ev-space-6); font-size: var(--ev-fs-body-lg); }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--ev-cta-bg);
  color: var(--ev-cta-text);
  border-color: var(--ev-cta-bg);
}
.btn--primary:hover { background: #000; border-color: #000; }

/* Ghost button for the dark hero — high-contrast white on Ink. */
.btn--ghost-dark {
  background: transparent;
  color: var(--ev-text-inverse);
  border-color: var(--ev-text-inverse);
}
.btn--ghost-dark:hover {
  background: var(--ev-text-inverse);
  color: var(--ev-ink);
}

/* ------------------------------------------------------------------ *
   8. Header + navigation
 * ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ev-bg);
  border-bottom: var(--ev-border-hairline) solid var(--ev-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ev-space-5);
  min-height: 64px;
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  padding: var(--ev-space-2);
  margin-inline-start: calc(-1 * var(--ev-space-2));
  border-radius: var(--ev-radius-sm);
}
.brand-logo { height: 32px; width: auto; }

.site-nav { display: flex; align-items: center; }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--ev-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__list a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--ev-space-1);
  color: var(--ev-text);
  font-size: var(--ev-fs-body);
  font-weight: var(--ev-weight-medium);
  text-decoration: none;
}
.site-nav__list a:not(.btn):hover { color: var(--ev-link); text-decoration: underline; text-underline-offset: 4px; }
.site-nav__cta a { min-height: 44px; }

/* Mobile nav toggle — hidden on wide screens */
.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--ev-space-2);
  min-height: 44px;
  padding-inline: var(--ev-space-3);
  background: transparent;
  border: var(--ev-border-hairline) solid var(--ev-border-strong);
  border-radius: var(--ev-radius-sm);
  color: var(--ev-text);
  font-family: var(--ev-font-display);
  font-weight: var(--ev-weight-semi);
  font-size: var(--ev-fs-body);
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after  { position: absolute; top: 6px; }

@media (max-width: 60em) {
  .nav-toggle { display: inline-flex; }
  .site-nav { position: relative; }
  .site-nav__list {
    position: absolute;
    right: 0;
    top: calc(100% + var(--ev-space-3));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 15rem;
    padding: var(--ev-space-2);
    background: var(--ev-bg-surface);
    border: var(--ev-border-hairline) solid var(--ev-border);
    border-radius: var(--ev-radius-md);
    box-shadow: 0 8px 28px rgba(10, 10, 10, 0.12);
  }
  /* Collapsed by default; JS toggles [data-open]. With JS off, :target
     is not available, so we keep the menu visible as a static list to
     guarantee no-JS operability. */
  .site-nav__list { display: flex; }
  .js .site-nav__list { display: none; }
  .js .site-nav__list[data-open] { display: flex; }
  .site-nav__list li { border-bottom: var(--ev-border-hairline) solid var(--ev-border); }
  .site-nav__list li:last-child { border-bottom: 0; }
  .site-nav__list a { min-height: 48px; padding-inline: var(--ev-space-3); }
  .site-nav__cta { padding: var(--ev-space-2); }
  .site-nav__cta a { width: 100%; }
}

/* ------------------------------------------------------------------ *
   9. HERO — dark Ink band, generous negative space
 * ------------------------------------------------------------------ */
.hero {
  background: var(--ev-bg-inverse);
  color: var(--ev-text-inverse);
  padding-block: var(--ev-space-10) var(--ev-space-9);
  position: relative;
  overflow: hidden;
}
/* Hairline horizon rule at the base of the hero for editorial structure. */
.hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.hero__inner { display: grid; gap: var(--ev-space-8); }
.hero__copy { max-width: 60ch; }

.hero .eyebrow { color: var(--ev-link-inverse); }

.hero__title {
  font-size: var(--ev-fs-display);
  font-weight: var(--ev-weight-bold);
  color: var(--ev-text-inverse);
  line-height: var(--ev-lh-tight);
  letter-spacing: var(--ev-tracking-tight);
  margin: 0 0 var(--ev-space-5);
  max-width: 18ch;
}
.hero__subhead {
  font-size: var(--ev-fs-body-lg);
  color: #D6D6D3;                 /* light neutral on Ink — high contrast */
  max-width: var(--ev-maxwidth-prose);
  margin: 0 0 var(--ev-space-7);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ev-space-4);
}

/* Dark-surface focus + link overrides for the hero band. */
.hero a:focus-visible,
.hero button:focus-visible,
.hero a:focus,
.hero button:focus {
  outline-color: var(--ev-focus-inverse);
}

.hero__media { margin: 0; }
.hero__media-caption {
  font-family: var(--ev-font-mono);
  font-size: var(--ev-fs-caption);
  color: #A9AFB8;                 /* muted on Ink, meets AA for caption text */
  margin-top: var(--ev-space-3);
}

@media (min-width: 60em) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: var(--ev-space-9);
  }
}

/* ---- Video embed / placeholder ---- */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--ev-radius-md);
  overflow: hidden;
}
.video-embed__poster,
.video-embed__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-embed__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ev-space-3);
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  color: var(--ev-white);
  cursor: pointer;
}
.video-embed__play-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--ev-radius-full);
  border: 2px solid var(--ev-white);
  background: rgba(10, 10, 10, 0.55);
  position: relative;
  transition: background-color var(--ev-duration-fast) var(--ev-ease);
}
.video-embed__play-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--ev-white);
}
.video-embed__play:hover .video-embed__play-icon { background: rgba(27, 77, 179, 0.85); }
.video-embed__play-label {
  font-family: var(--ev-font-display);
  font-weight: var(--ev-weight-semi);
  font-size: var(--ev-fs-body);
}
.video-embed__play:focus-visible { outline-color: var(--ev-focus-inverse); outline-offset: -4px; }
.video-embed__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  padding: var(--ev-space-3) var(--ev-space-4);
  background: linear-gradient(to top, rgba(5, 5, 5, 0.85), rgba(5, 5, 5, 0));
  font-family: var(--ev-font-mono);
  font-size: var(--ev-fs-caption);
  color: #D6D6D3;
  text-align: center;
  pointer-events: none;
}

/* ------------------------------------------------------------------ *
   10. Pull quotes
 * ------------------------------------------------------------------ */
.pullquote {
  margin: var(--ev-space-6) 0 0;
  padding: var(--ev-space-5);
  background: var(--ev-bg-surface);
  border: var(--ev-border-hairline) solid var(--ev-border);
  border-left: 3px solid var(--ev-border-strong);
  border-radius: var(--ev-radius-sm);
}
.pullquote blockquote { margin: 0; }
.pullquote blockquote p {
  font-family: var(--ev-font-legal);
  font-size: var(--ev-fs-h4);
  font-style: italic;
  line-height: var(--ev-lh-snug);
  color: var(--ev-text);
  margin: 0;
}
.pullquote figcaption {
  margin-top: var(--ev-space-3);
  font-size: var(--ev-fs-caption);
  color: var(--ev-text-muted);
}

/* The section-hero positioning line */
.positioning {
  margin: var(--ev-space-8) 0;
  padding: var(--ev-space-7) 0;
  border-block: var(--ev-border-hairline) solid var(--ev-border);
}
.positioning blockquote { margin: 0; max-width: 46ch; }
.positioning blockquote p {
  font-family: var(--ev-font-display);
  font-size: var(--ev-fs-h3);
  font-weight: var(--ev-weight-semi);
  line-height: var(--ev-lh-snug);
  letter-spacing: var(--ev-tracking-tight);
  color: var(--ev-text);
  margin: 0;
  text-wrap: balance;
}

/* Solid-Ink positioning CARD (grafted from build-b) — a stronger focal point
   than the hairline-bracketed quote. White-on-Ink 19.80:1 (AAA); the mono
   label uses --ev-verify-dark 8.30:1 (AAA on Ink). No new colors. */
.positioning--card {
  padding: var(--ev-space-7);
  background: var(--ev-bg-inverse);
  border: 0;
  border-radius: var(--ev-radius-lg);
}
.positioning--card .positioning__mark {
  font-family: var(--ev-font-mono);
  font-size: var(--ev-fs-caption);
  font-weight: var(--ev-weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ev-link-inverse);
  margin: 0 0 var(--ev-space-4);
}
.positioning--card blockquote { max-width: 44ch; }
.positioning--card blockquote p { color: var(--ev-text-inverse); }

/* ------------------------------------------------------------------ *
   11. Steps (how it works)
 * ------------------------------------------------------------------ */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ev-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
@media (min-width: 46em) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--ev-space-6); }
}
.step {
  padding: var(--ev-space-5);
  background: var(--ev-bg-surface);
  border: var(--ev-border-hairline) solid var(--ev-border);
  border-top: 3px solid var(--ev-border-strong);
  border-radius: var(--ev-radius-sm);
}
.step__num {
  font-family: var(--ev-font-mono);
  font-size: var(--ev-fs-h3);
  font-weight: var(--ev-weight-medium);
  color: var(--ev-text-muted);
  margin: 0 0 var(--ev-space-3);
  letter-spacing: 0.02em;
}
.step__title { font-size: var(--ev-fs-h5); margin: 0 0 var(--ev-space-2); }
.step__body { margin: 0; color: var(--ev-text-secondary); }

/* ------------------------------------------------------------------ *
   12. Difference — proof block (equation as structure vs sentence)
 * ------------------------------------------------------------------ */
.proof {
  margin: var(--ev-space-8) 0 0;
}
.proof__heading {
  font-size: var(--ev-fs-h4);
  margin: 0 0 var(--ev-space-5);
  max-width: 44ch;
}
.proof__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ev-space-5);
}
@media (min-width: 52em) {
  .proof__grid { grid-template-columns: 1fr 1fr; gap: var(--ev-space-6); }
}
.proof-card {
  padding: var(--ev-space-5);
  background: var(--ev-bg-surface);
  border: var(--ev-border-hairline) solid var(--ev-border);
  border-radius: var(--ev-radius-md);
}
.proof-card--good { border-color: var(--ev-verify); border-top: 3px solid var(--ev-verify); }
.proof-card--bad  { border-top: 3px solid var(--ev-muted); }
.proof-card__label {
  font-family: var(--ev-font-mono);
  font-size: var(--ev-fs-caption);
  font-weight: var(--ev-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ev-text-muted);
  margin: 0 0 var(--ev-space-4);
}
.proof-card--good .proof-card__label { color: var(--ev-verify); }
.proof-card__equation {
  font-family: var(--ev-font-mono);
  font-size: var(--ev-fs-h5);
  color: var(--ev-text);
  background: var(--ev-bg-band);
  border: var(--ev-border-hairline) solid var(--ev-border);
  border-radius: var(--ev-radius-sm);
  padding: var(--ev-space-4);
  margin: 0 0 var(--ev-space-4);
  overflow-x: auto;
}
.proof-card__readout { margin-bottom: var(--ev-space-4); }
.proof-card__readout-title {
  font-size: var(--ev-fs-caption);
  font-weight: var(--ev-weight-semi);
  color: var(--ev-text);
  margin: 0 0 var(--ev-space-2);
}
.proof-card__sentence {
  font-family: var(--ev-font-legal);
  font-style: italic;
  color: var(--ev-text-secondary);
  margin: 0;
}
.proof-card__notes {
  margin: 0;
  padding-left: var(--ev-space-5);
  color: var(--ev-text-secondary);
  font-size: var(--ev-fs-body);
}
.proof-card__notes li { margin-bottom: var(--ev-space-2); }
.proof-card__notes li:last-child { margin-bottom: 0; }

/* Navigable-structure tree (mono, indented, hairline guides) */
.proof-tree,
.proof-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--ev-font-mono);
  font-size: var(--ev-fs-caption);
  color: var(--ev-text);
}
.proof-tree ul {
  margin-left: var(--ev-space-3);
  padding-left: var(--ev-space-4);
  border-left: var(--ev-border-hairline) solid var(--ev-border);
}
.proof-tree li { padding: 2px 0; }
/* Inline annotation on a tree node (e.g. naming the radical as the
   discriminant) — a credibility beat for a STEM reader. Muted still clears
   AA (5.59:1 on band). */
.proof-tree__note { color: var(--ev-text-muted); }
.proof__foot,
.proof-card__foot {
  font-size: var(--ev-fs-caption);
  color: var(--ev-text-muted);
  margin: var(--ev-space-5) 0 0;
  max-width: var(--ev-maxwidth-prose);
}

/* ------------------------------------------------------------------ *
   13. Comparison table
 * ------------------------------------------------------------------ */
.table-wrap {
  margin-top: var(--ev-space-8);
  overflow-x: auto;
  border: var(--ev-border-hairline) solid var(--ev-border);
  border-radius: var(--ev-radius-md);
}
.compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 34rem;
  background: var(--ev-bg-surface);
}
.compare caption {
  caption-side: top;
  text-align: left;
  padding: var(--ev-space-4) var(--ev-space-4) var(--ev-space-3);
  font-size: var(--ev-fs-caption);
  color: var(--ev-text-muted);
  border-bottom: var(--ev-border-hairline) solid var(--ev-border);
}
.compare th,
.compare td {
  padding: var(--ev-space-3) var(--ev-space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--ev-border-hairline) solid var(--ev-border);
}
.compare thead th {
  font-family: var(--ev-font-display);
  font-size: var(--ev-fs-body);
  font-weight: var(--ev-weight-bold);
  color: var(--ev-text);
  background: var(--ev-bg-band);
  border-bottom: 2px solid var(--ev-border-strong);
}
.compare tbody th {
  font-weight: var(--ev-weight-semi);
  color: var(--ev-text);
}
.compare td {
  font-family: var(--ev-font-mono);
  font-size: var(--ev-fs-caption);
  color: var(--ev-text-secondary);
}
.compare td[data-yes] {
  color: var(--ev-verify);
  font-weight: var(--ev-weight-medium);
}
/* Status is conveyed by real VISIBLE TEXT in every cell ("Yes"/"Partial"/
   "No…"/etc). The icons below are aria-hidden decoration only, present on
   both positive and negative cells so status never depends on color or a
   single glyph alone. (Grafted from build-b.) */
.compare .cell-icon {
  font-weight: 700;
  margin-right: var(--ev-space-1);
}
.compare .cell-icon--yes { color: var(--ev-verify); }
.compare .cell-icon--no  { color: var(--ev-text-muted); }
.compare tbody tr:nth-child(even) { background: var(--ev-bg-band); }
.compare .compare__row--key th,
.compare .compare__row--key td {
  background: var(--ev-white);
}
.compare .compare__row--key th {
  border-left: 3px solid var(--ev-verify);
}
.compare .compare__row--key td[data-yes] { font-weight: var(--ev-weight-bold); }
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }
.compare__cap-col { width: 44%; }

/* ------------------------------------------------------------------ *
   14. Review checklist
 * ------------------------------------------------------------------ */
.checklist {
  margin: var(--ev-space-5) 0 0;
  padding: 0;
  list-style: none;
}
.checklist li {
  position: relative;
  padding-left: var(--ev-space-6);
  margin-bottom: var(--ev-space-3);
  color: var(--ev-text-secondary);
}
.checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ev-verify);
  font-weight: 700;
  font-size: var(--ev-fs-body-lg);
  line-height: 1.4;
}
.checklist li:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ *
   15. Compliance deadlines
 * ------------------------------------------------------------------ */
.deadlines {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ev-space-5);
  margin-bottom: var(--ev-space-8);
}
@media (min-width: 46em) {
  .deadlines { grid-template-columns: repeat(3, 1fr); gap: var(--ev-space-5); }
}
.deadline-card {
  padding: var(--ev-space-6) var(--ev-space-5);
  background: var(--ev-bg-surface);
  border: var(--ev-border-hairline) solid var(--ev-border);
  border-top: 3px solid var(--ev-verify);
  border-radius: var(--ev-radius-sm);
}
.deadline-card--standard { border-top-color: var(--ev-border-strong); }
.deadline-card__date {
  font-family: var(--ev-font-mono);
  font-size: var(--ev-fs-h4);
  font-weight: var(--ev-weight-medium);
  color: var(--ev-text);
  margin: 0 0 var(--ev-space-3);
  letter-spacing: -0.01em;
}
.deadline-card__date span {
  display: block;
  font-size: var(--ev-fs-h5);
  color: var(--ev-text-secondary);
}
.deadline-card__who {
  font-family: var(--ev-font-display);
  font-weight: var(--ev-weight-semi);
  font-size: var(--ev-fs-body-lg);
  color: var(--ev-text);
  margin: 0 0 var(--ev-space-2);
}
.deadline-card__detail { margin: 0; color: var(--ev-text-secondary); font-size: var(--ev-fs-body); }

.section__cta-line { margin-top: var(--ev-space-6); }

/* ------------------------------------------------------------------ *
   16. Closing / contact
 * ------------------------------------------------------------------ */
.section--closing {
  background: var(--ev-bg-inverse);
  color: var(--ev-text-inverse);
}
.section--closing .eyebrow { color: var(--ev-link-inverse); }
.closing {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ev-space-8);
}
@media (min-width: 56em) {
  .closing { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: var(--ev-space-9); align-items: start; }
}
.closing__title {
  font-size: var(--ev-fs-h1);
  font-weight: var(--ev-weight-bold);
  color: var(--ev-text-inverse);
  margin: var(--ev-space-2) 0 var(--ev-space-4);
  max-width: 16ch;
}
.closing__lead {
  font-size: var(--ev-fs-body-lg);
  color: #D6D6D3;
  max-width: var(--ev-maxwidth-prose);
  margin: 0;
}
.section--closing a:focus-visible,
.section--closing button:focus-visible,
.section--closing a:focus,
.section--closing button:focus { outline-color: var(--ev-focus-inverse); }
.section--closing .contact-form__note a { color: var(--ev-link-inverse); }

/* ---- Contact form ---- */
.contact-form {
  background: var(--ev-bg-surface);
  color: var(--ev-text);
  padding: var(--ev-space-6);
  border-radius: var(--ev-radius-md);
  border: var(--ev-border-hairline) solid var(--ev-border);
}
.field { margin-bottom: var(--ev-space-4); }
.field label {
  display: block;
  font-weight: var(--ev-weight-semi);
  font-size: var(--ev-fs-body);
  margin-bottom: var(--ev-space-2);
  color: var(--ev-text);
}
.field__optional { font-weight: var(--ev-weight-regular); color: var(--ev-text-muted); }
.field input,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--ev-space-3) var(--ev-space-4);
  font-family: var(--ev-font-body);
  font-size: var(--ev-fs-body);
  color: var(--ev-text);
  background: var(--ev-white);
  border: var(--ev-border-hairline) solid var(--ev-muted);
  border-radius: var(--ev-radius-sm);
}
.field textarea { min-height: 120px; resize: vertical; line-height: var(--ev-lh-body); }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: var(--ev-focus-width) solid var(--ev-focus);
  outline-offset: var(--ev-focus-offset);
  border-color: var(--ev-verify);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--ev-ink); border-width: 2px; }
.field__error {
  display: block;
  margin-top: var(--ev-space-2);
  font-size: var(--ev-fs-caption);
  font-weight: var(--ev-weight-semi);
  color: var(--ev-ink);
}
.field__error::before { content: "\26A0\00a0"; }  /* warning sign + nbsp, not color-only */
.contact-form__note {
  margin: var(--ev-space-4) 0 0;
  font-size: var(--ev-fs-caption);
  color: var(--ev-text-muted);
}
.contact-form__status {
  margin: var(--ev-space-4) 0 0;
  padding: var(--ev-space-3) var(--ev-space-4);
  border-radius: var(--ev-radius-sm);
  font-size: var(--ev-fs-body);
  font-weight: var(--ev-weight-semi);
  background: var(--ev-bg-band);
  border: var(--ev-border-hairline) solid var(--ev-border);
}

/* ------------------------------------------------------------------ *
   17. Footer
 * ------------------------------------------------------------------ */
.site-footer {
  background: var(--ev-bg-inverse);
  color: var(--ev-text-inverse);
  padding-block: var(--ev-space-8) var(--ev-space-6);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ev-space-7);
  padding-bottom: var(--ev-space-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 46em) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}
.site-footer .brand-logo { height: 34px; }
.site-footer__org {
  font-family: var(--ev-font-display);
  font-weight: var(--ev-weight-semi);
  color: var(--ev-text-inverse);
  margin: var(--ev-space-4) 0 var(--ev-space-1);
}
.site-footer__domain { margin: 0; }
.site-footer__domain a,
.site-footer__nav a { color: #C9C9C6; }
.site-footer__domain a:hover,
.site-footer__nav a:hover { color: var(--ev-white); }
.site-footer a:focus-visible,
.site-footer a:focus { outline-color: var(--ev-focus-inverse); }

.site-footer__nav-heading {
  font-family: var(--ev-font-mono);
  font-size: var(--ev-fs-caption);
  font-weight: var(--ev-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #A9AFB8;
  margin: 0 0 var(--ev-space-4);
}
.site-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ev-space-2);
}
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  text-decoration: none;
}
.site-footer__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__nav [aria-current="page"] { color: var(--ev-white); font-weight: var(--ev-weight-semi); }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ev-space-2) var(--ev-space-5);
  padding-top: var(--ev-space-5);
}
.site-footer__legal p {
  margin: 0;
  font-size: var(--ev-fs-caption);
  color: #A9AFB8;
}

/* ------------------------------------------------------------------ *
   18. Legal / accessibility-statement page
 * ------------------------------------------------------------------ */
.section--legal { padding-block: var(--ev-space-9); }
.legal__title { font-size: var(--ev-fs-h1); margin: var(--ev-space-2) 0 var(--ev-space-6); }
.legal-body { font-family: var(--ev-font-legal); }
.legal-body h2 {
  font-family: var(--ev-font-display);
  font-size: var(--ev-fs-h4);
  margin: var(--ev-space-7) 0 var(--ev-space-3);
}
.legal-body p { margin: 0 0 var(--ev-space-4); max-width: 72ch; }
.legal-body ul { margin: 0 0 var(--ev-space-4); padding-left: var(--ev-space-5); max-width: 72ch; }
.legal-body li { margin-bottom: var(--ev-space-2); }
.legal__lead { font-size: var(--ev-fs-body-lg); color: var(--ev-text-secondary); }
/* Meta note under the conformance target — quieter register, still AA
   (--ev-text-secondary Slate 10.63:1). Left rule sets it apart as an aside. */
.legal__meta-note {
  color: var(--ev-text-secondary);
  font-size: var(--ev-fs-body);
  border-left: 2px solid var(--ev-border);
  padding-left: var(--ev-space-4);
}
.contact-list { list-style: none; padding-left: 0; }
.contact-list__label { font-weight: 700; font-family: var(--ev-font-display); }
.legal__reviewed {
  margin-top: var(--ev-space-7);
  padding-top: var(--ev-space-4);
  border-top: var(--ev-border-hairline) solid var(--ev-border);
  font-family: var(--ev-font-mono);
  font-size: var(--ev-fs-caption);
  color: var(--ev-text-muted);
}
.legal__reviewed-label { font-weight: var(--ev-weight-medium); }
.legal__back { margin-top: var(--ev-space-6); font-family: var(--ev-font-display); }

/* ------------------------------------------------------------------ *
   19. Motion toggle (fixed control, meets WCAG 2.3.3 AAA touch)
 * ------------------------------------------------------------------ */
.motion-toggle {
  position: fixed;
  right: var(--ev-space-4);
  bottom: var(--ev-space-4);
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: var(--ev-space-2);
  min-height: 44px;
  padding: var(--ev-space-2) var(--ev-space-4);
  background: var(--ev-white);
  color: var(--ev-text);
  border: var(--ev-border-hairline) solid var(--ev-border-strong);
  border-radius: var(--ev-radius-full);
  font-family: var(--ev-font-display);
  font-size: var(--ev-fs-caption);
  font-weight: var(--ev-weight-semi);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(10, 10, 10, 0.18);
}
.motion-toggle__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ev-verify);
  border: 1px solid var(--ev-verify);
}
.motion-toggle[aria-pressed="true"] .motion-toggle__dot { background: transparent; }

/* ------------------------------------------------------------------ *
   20. Section-reveal (progressive enhancement; JS adds .is-in)
      With JS off, everything is visible by default (no .js gate hides it).
 * ------------------------------------------------------------------ */
/* Content is ALWAYS visible by default — never gated on scroll/JS observers.
   The entrance is a one-time load fade, applied only when motion is welcome,
   so it can never leave content stuck hidden. */
.js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { animation: ev-reveal var(--ev-duration-reveal) var(--ev-ease) both; }
}
@keyframes ev-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.js .reveal.is-in { opacity: 1; transform: none; }
:root.ev-reduce-motion .js .reveal { animation: none; opacity: 1; transform: none; }

/* ------------------------------------------------------------------ *
   21. Utilities
 * ------------------------------------------------------------------ */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ *
   22. Reflow / zoom safeguards
 * ------------------------------------------------------------------ */
@media (max-width: 30em) {
  :root { }
  .hero__title { font-size: var(--ev-fs-h1); }
  .closing__title { font-size: var(--ev-fs-h2); }
  .positioning blockquote p { font-size: var(--ev-fs-h4); }
  .section { padding-block: var(--ev-space-8); }
  .wrap { padding-inline: var(--ev-space-4); }
}

/* ------------------------------------------------------------------ *
   23. No-JS nav fallback (grafted from build-b)
      With JS the mobile menu collapses behind the toggle. With JS off
      the toggle would be a dead control, so hide it and expose the menu
      inline. (The existing .js gate already keeps the list visible when
      JS is off; this removes the useless button and lays the list out.)
 * ------------------------------------------------------------------ */
.no-js .nav-toggle { display: none !important; }
@media (max-width: 60em) {
  .no-js .site-nav__list {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ev-space-4);
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .no-js .site-nav__list li { border-bottom: 0; }
  .no-js .site-nav__cta { padding: 0; }
  .no-js .site-nav__cta a { width: auto; }
}

/* ------------------------------------------------------------------ *
   24. Print — flatten dark bands to black-on-white, drop nav / CTAs /
       video / motion toggle. Institutional buyers print these pages.
       (Grafted from build-b, adapted to build-a's class names.)
 * ------------------------------------------------------------------ */
@media print {
  .site-header,
  .hero__media,
  .motion-toggle,
  .hero__actions,
  .section__cta-line,
  .contact-form,
  .site-nav {
    display: none !important;
  }

  html, body { background: #fff !important; color: #000 !important; }

  /* Flatten the dark bands (hero, closing, footer) to black-on-white. */
  .hero,
  .section--closing,
  .site-footer {
    background: #fff !important;
    color: #000 !important;
  }
  .hero__title,
  .hero__subhead,
  .closing__title,
  .closing__lead,
  .site-footer__org,
  .positioning--card .positioning__mark,
  .positioning--card blockquote p {
    color: #000 !important;
  }
  .positioning--card {
    background: #fff !important;
    border: 1px solid #000 !important;
  }
  .site-footer__domain a,
  .site-footer__nav a { color: #000 !important; }

  /* Reveal any not-yet-revealed sections so print is complete. */
  .js .reveal { opacity: 1 !important; transform: none !important; }

  a { text-decoration: underline; }
  .section { border-top-color: #000; }
}