/* CORPUS marketing site — implements design_guide.md §1–§9 exactly.
   Token names and values are §7.1 verbatim; type tokens are §2.2; spacing §3.3;
   radii §3.4; components §4; motion §5. Section comments cite guide sections. */

/* §7.1 CSS variables */
:root {
  /* Color — Dark */
  --bg-void: #000000;
  --bg-surface-dark: #0A0A0A;
  --fg-spectral: #F0F0FA;
  --fg-muted-dark: #A7A7A7;
  --border-dark: rgba(240, 240, 250, 0.35);
  --ghost-surface: rgba(240, 240, 250, 0.10);
  --overlay-dark: rgba(0, 0, 0, 0.50);

  /* Color — Light */
  --bg-paper: #FFFFFF;
  --bg-paper-soft: #F7F7F5;
  --fg-ink: #000000;
  --fg-ink-muted: #5A5A5A;
  --border-light: rgba(0, 0, 0, 0.12);

  /* Accent */
  --accent-coral: #FF8562;
  --accent-coral-hover: #FF6F47;

  /* Semantic */
  --state-error: #D14343;
  --state-success: #3A7D5C;
  --state-warning: #B58A2E;

  /* Type */
  --font-display: 'Barlow Condensed', 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Montserrat', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Spacing */
  --space-1: 8px;  --space-2: 16px; --space-3: 24px;
  --space-4: 32px; --space-5: 48px; --space-6: 64px;
  --space-7: 96px; --space-8: 128px; --space-9: 192px;

  /* Radii */
  --radius-none: 0px;
  --radius-ghost: 32px;
  --radius-hairline: 4px;

  /* §4.5 table + §4.6 nav values the guide specifies outside §7.1 */
  --divider-dark: rgba(240, 240, 250, 0.12);
  --row-hover: rgba(255, 133, 98, 0.04);
  --nav-scrolled: rgba(0, 0, 0, 0.85);
  --ghost-surface-hover: rgba(240, 240, 250, 0.18);

  /* §5 motion */
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);

  /* §2.2 type scale: size / weight / line-height / tracking */
  --type-hero-xl: 120px;
  --type-hero-lg: 80px;
  --type-display: 48px;
  --type-heading-1: 40px;
  --type-heading-2: 32px;
  --type-heading-3: 24px;

  /* §3.2 content width and side padding */
  --content-max: 1280px;
  --gutter: 48px;
  --side: 80px;
}

/* §3.1 tablet: 8 columns, 32 px gutters */
@media (max-width: 1023px) {
  :root { --gutter: 32px; --side: 48px; }
}
/* §3.1 mobile: single column; display type scales to 60 % */
@media (max-width: 639px) {
  :root {
    --gutter: 24px; --side: 24px;
    --type-hero-xl: 72px;
    --type-hero-lg: 48px;
    --type-display: 28.8px;
    --type-heading-1: 24px;
    --type-heading-2: 19.2px;
  }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg-void);
  color: var(--fg-spectral);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.60;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus { outline: none; }
/* §1.3 focus ring: 2 px solid coral, offset 3 px, both themes */
:focus-visible { outline: 2px solid var(--accent-coral); outline-offset: 3px; }
.skip {
  position: absolute; left: var(--space-2); top: -64px; z-index: 100;
  background: var(--bg-void); color: var(--fg-spectral);
  padding: var(--space-1) var(--space-2);
  font: 700 13px/0.94 var(--font-display); letter-spacing: 1.17px; text-transform: uppercase;
}
.skip:focus-visible { top: var(--space-2); }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- §2.2 type scale ---------- */
.t-hero-xl, .t-hero-lg, .t-display, .t-h1, .t-h2, .t-label, .t-label-sm, .t-micro {
  font-family: var(--font-display);
  text-transform: uppercase;
}
.t-hero-xl { font-size: var(--type-hero-xl); font-weight: 700; line-height: 1.00; letter-spacing: 1.2px; }
.t-hero-lg { font-size: var(--type-hero-lg); font-weight: 700; line-height: 1.00; letter-spacing: 1.0px; }
.t-display { font-size: var(--type-display); font-weight: 700; line-height: 1.00; letter-spacing: 0.96px; }
.t-h1 { font-size: var(--type-heading-1); font-weight: 700; line-height: 1.05; letter-spacing: 0.8px; }
.t-h2 { font-size: var(--type-heading-2); font-weight: 700; line-height: 1.10; letter-spacing: 0.6px; }
.t-h3 {
  font-family: var(--font-body);
  font-size: var(--type-heading-3); font-weight: 600; line-height: 1.20; letter-spacing: 0.4px;
}
.t-body-lg { font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.65; }
.t-body { font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.60; }
.t-body-sm { font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.55; }
.t-label { font-size: 13px; font-weight: 700; line-height: 0.94; letter-spacing: 1.17px; }
.t-label-sm { font-size: 12px; font-weight: 400; line-height: 2.00; letter-spacing: 1.0px; }
.t-micro { font-size: 10px; font-weight: 400; line-height: 0.94; letter-spacing: 1.0px; }
.t-mono { font-family: var(--font-mono); font-weight: 400; font-variant-numeric: tabular-nums; }
.measure { max-width: 60ch; }
.coral { color: var(--accent-coral); }
.muted-dark { color: var(--fg-muted-dark); }
.muted-light { color: var(--fg-ink-muted); }

/* ---------- §1.2 themes: dark (SpaceX) and light (Kazakhstan) ---------- */
.theme-dark { background: var(--bg-void); color: var(--fg-spectral); }
.theme-dark-surface { background: var(--bg-surface-dark); color: var(--fg-spectral); }
.theme-light { background: var(--bg-paper); color: var(--fg-ink); }
.theme-light-soft { background: var(--bg-paper-soft); color: var(--fg-ink); }

/* ---------- §3.2 layout ---------- */
.container {
  width: 100%;
  /* §3.2 / C12: the 1280 px column is the border box; the side padding sits
     inside it, so dark-section text is inset 80 px from the column edges. */
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--side);
  padding-right: var(--side);
}
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-5);
}
@media (max-width: 1023px) { .grid-12 { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 639px) { .grid-12 { grid-template-columns: minmax(0, 1fr); } }
.span-5 { grid-column: span 5; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
.span-12 { grid-column: 1 / -1; }
@media (max-width: 1023px) {
  .span-5, .span-7, .span-6 { grid-column: 1 / -1; }
  .span-4 { grid-column: span 4; }
}
@media (max-width: 639px) { .span-4 { grid-column: 1 / -1; } }

/* §3.3 rhythm: light sections 96–128 px; dark scenes 100 vh, generous */
.section-light { padding: var(--space-8) 0; }
.section-light.tight { padding: var(--space-7) 0; }
.scene {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--space-9) 0;
}
.scene.short { min-height: 40vh; padding: var(--space-7) 0; }
@media (max-width: 1023px) { .scene { min-height: 70vh; padding: var(--space-8) 0; } .scene.short { min-height: 40vh; padding: var(--space-7) 0; } }
@media (max-width: 639px) {
  .scene { min-height: 0; padding: var(--space-7) 0; }
  .scene.hero { min-height: 100vh; }
  .section-light { padding: var(--space-7) 0; }
}
/* Scenes hold their content in a full-width column (flex would shrink it). */
.scene > .container { flex: 1 1 auto; }

/* Full-bleed photography with the only permitted gradient: §1.1 overlay */
.scene-media { position: absolute; inset: 0; overflow: hidden; }
/* Same founder exception for full-bleed scenes: the photo melts into black at
   its top and bottom edges, so no hard seam shows between sections. */
.scene-media img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000000 12%, #000000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000000 12%, #000000 80%, transparent 100%);
}
.scene-media img {
  width: 100%; height: 100%; object-fit: cover;
}
.scene-media::after {
  content: ""; position: absolute; inset: 0;
  background: var(--overlay-dark);
}
.scene > .container { position: relative; z-index: 1; }

/* ---------- §4.1 navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}
.nav.is-scrolled {
  background: var(--nav-scrolled);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border-dark);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 96px;
}
/* The wordmark is the word alone: semibold condensed caps, tracked wide
   for an airy, engineered logotype. No mark, no accent colour. */
.wordmark {
  display: inline-flex; align-items: center;
  font: 600 24px/1 var(--font-display); letter-spacing: 8px; text-transform: uppercase;
  color: var(--fg-spectral);
}
.nav-links { display: flex; align-items: center; gap: var(--space-4); }
.nav-links a:not(.btn) {
  font: 400 12px/2 var(--font-display); letter-spacing: 1px; text-transform: uppercase;
  color: var(--fg-spectral);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease-out, color 200ms ease-out;
}
.nav-links a:not(.btn):hover, .nav-links a:not(.btn)[aria-current="page"] { border-bottom-color: var(--accent-coral); }
.nav-toggle { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; }
.nav-toggle svg { stroke: var(--fg-spectral); }
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}
.nav-panel {
  position: fixed; inset: 0; z-index: 60;
  background: var(--bg-void); color: var(--fg-spectral);
  display: none; flex-direction: column; padding: var(--space-3) var(--side);
}
.nav-panel.is-open { display: flex; }
.nav-panel-head { display: flex; justify-content: space-between; align-items: center; height: 72px; }
.nav-panel ul { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.nav-panel ul a { font: 700 32px/1.10 var(--font-display); letter-spacing: 0.6px; text-transform: uppercase; }
.nav-panel .btn { margin-top: var(--space-5); align-self: flex-start; }

/* ---------- §4.2 buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 var(--space-4);
  font: 700 13px/0.94 var(--font-display); letter-spacing: 1.17px; text-transform: uppercase;
  border-radius: var(--radius-none);
  transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out;
  white-space: nowrap;
}
.btn-ghost-dark {
  background: var(--ghost-surface);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-ghost);
  color: var(--fg-spectral);
}
.btn-ghost-dark:hover { background: var(--ghost-surface-hover); border-color: var(--fg-spectral); }
.btn-ghost-light { background: transparent; border: 1px solid var(--fg-ink); color: var(--fg-ink); }
.btn-ghost-light:hover { background: var(--fg-ink); color: var(--fg-spectral); }
/* Primary is the guide's one permitted coral fill, light sections only (§4.2) */
.btn-primary { background: var(--accent-coral); border: 0; color: var(--fg-ink); }
.btn-primary:hover { background: var(--accent-coral-hover); }
.link {
  font: 500 16px/1.60 var(--font-body);
  color: var(--accent-coral);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 200ms ease-out;
}
.link:hover { text-decoration-color: var(--accent-coral); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }

/* ---------- §4.3 cards ---------- */
.card {
  border: 1px solid var(--border-light);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
  transition: border-color 200ms ease-out;
  background: var(--bg-paper);
}
.card:hover { border-color: var(--accent-coral); }
.card .link { margin-top: auto; padding-top: var(--space-3); }
.cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 1023px) { .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .cards-2, .cards-3 { grid-template-columns: minmax(0, 1fr); } }
.card-dark { position: relative; overflow: hidden; min-height: 480px; display: flex; align-items: flex-end; }
.card-dark img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease-expo);
}
.card-dark:hover img { transform: scale(1.02); }
.card-dark::after {
  content: ""; position: absolute; inset: 0;
  background: var(--overlay-dark);
}
.card-dark .card-dark-body { position: relative; z-index: 1; padding: var(--space-5); }

/* ---------- §4.4 inputs ---------- */
.field { display: grid; gap: var(--space-1); }
.field label { font: 400 12px/2 var(--font-display); letter-spacing: 1px; text-transform: uppercase; }
.input {
  height: 48px; width: 100%; padding: 0 var(--space-2);
  font: 400 16px/1.6 var(--font-body);
  border-radius: var(--radius-none);
  transition: border-color 200ms ease-out;
}
textarea.input { height: auto; min-height: 128px; padding: var(--space-2); resize: vertical; }
.theme-dark .input { background: transparent; color: var(--fg-spectral); border: 1px solid var(--border-dark); }
.theme-light .input, .theme-light-soft .input { background: var(--bg-paper); color: var(--fg-ink); border: 1px solid var(--border-light); }
.input:focus-visible { border-color: var(--accent-coral); outline: 2px solid var(--accent-coral); outline-offset: 2px; }

/* ---------- §4.5 data tables ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th {
  height: 56px; text-align: left; vertical-align: middle;
  font: 400 10px/0.94 var(--font-display); letter-spacing: 1px; text-transform: uppercase;
  padding: 0 var(--space-2);
}
.table td { height: 56px; vertical-align: middle; padding: 0 var(--space-2); }
.theme-dark .table th { color: var(--fg-muted-dark); border-bottom: 1px solid var(--divider-dark); }
.theme-dark .table td { border-bottom: 1px solid var(--divider-dark); }
.theme-light .table th, .theme-light-soft .table th { color: var(--fg-ink); border-bottom: 1px solid var(--fg-ink); }
.theme-light .table td, .theme-light-soft .table td { border-bottom: 1px solid var(--border-light); }
.table tbody tr { transition: background-color 200ms ease-out; }
.table tbody tr:hover { background: var(--row-hover); }
.table .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

/* ---------- §4.6 footer: always dark ---------- */
.footer { background: var(--bg-void); color: var(--fg-spectral); padding: var(--space-8) 0 var(--space-5); }
.footer-grid {
  display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: var(--space-5);
}
@media (max-width: 1023px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.footer h2 { margin-bottom: var(--space-2); }
.footer li + li { margin-top: var(--space-1); }
.footer a {
  font: 400 14px/1.55 var(--font-body); color: var(--fg-muted-dark);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
  transition: text-decoration-color 200ms ease-out, color 200ms ease-out;
}
.footer a:hover { color: var(--fg-spectral); text-decoration-color: var(--accent-coral); }
.footer-bar {
  margin-top: var(--space-8); padding-top: var(--space-3);
  border-top: 1px solid var(--divider-dark);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2);
  color: var(--fg-muted-dark);
}

/* ---------- Page-specific patterns ---------- */
.eyebrow { display: inline-block; margin-bottom: var(--space-3); }
.hero-copy { max-width: 1280px; }
.hero-sub { margin-top: var(--space-4); max-width: 60ch; }
.hero .actions { margin-top: var(--space-5); }
.hero-stats {
  margin-top: var(--space-8);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--gutter);
  border-top: 1px solid var(--border-dark); padding-top: var(--space-4);
}
@media (max-width: 639px) { .hero-stats { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } }
.stat-value { font: 700 48px/1.00 var(--font-display); letter-spacing: 0.96px; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.stat-label { margin-top: var(--space-2); color: var(--fg-muted-dark); }

.format-row {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  justify-content: center;
}
.format-row li {
  font: 700 32px/1.10 var(--font-display); letter-spacing: 2px; text-transform: uppercase;
  opacity: 0.4; transition: opacity 200ms ease-out;
}
.format-row li:hover { opacity: 1; }
.center { text-align: center; }

.num { font: 700 48px/1.00 var(--font-display); letter-spacing: 0.96px; color: var(--accent-coral); text-transform: uppercase; }
.triad-item { display: flex; flex-direction: column; gap: var(--space-2); }
.triad-item .t-label { color: var(--accent-coral); }

/* Product preview: hard-edged frame (§6 Home 4) */
.frame { border: 1px solid var(--border-dark); background: var(--bg-void); }
.frame-bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 48px; padding: 0 var(--space-2);
  border-bottom: 1px solid var(--border-dark);
  color: var(--fg-muted-dark);
}
.frame-dots { display: flex; gap: var(--space-1); }
.frame-dots i { width: 8px; height: 8px; border: 1px solid var(--border-dark); display: block; }
.diff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1023px) { .diff { grid-template-columns: minmax(0, 1fr); } }
.diff-pane { padding: var(--space-4); font: 400 14px/1.85 var(--font-mono); }
.diff-pane + .diff-pane { border-left: 1px solid var(--border-dark); }
@media (max-width: 1023px) { .diff-pane + .diff-pane { border-left: 0; border-top: 1px solid var(--border-dark); } }
.diff-pane h3 { margin-bottom: var(--space-3); color: var(--fg-muted-dark); }
.pii { color: var(--fg-spectral); border-bottom: 1px solid var(--border-dark); }
.fake { color: var(--accent-coral); border-bottom: 1px solid var(--accent-coral); }
.caption { margin-top: var(--space-2); color: var(--fg-muted-dark); }

/* Quote (§6 Home 6) */
.quote-mark { font: 700 120px/1 var(--font-display); letter-spacing: 1.2px; color: var(--accent-coral); height: 72px; display: block; }
.quote { font: 400 32px/1.35 var(--font-body); max-width: 30ch; }
@media (max-width: 639px) { .quote { font-size: 24px; } }
.quote-by { margin-top: var(--space-4); color: var(--fg-muted-dark); }

/* §6 Product sticky feature nav */
.tabs {
  position: sticky; top: 96px; z-index: 40;
  background: var(--bg-paper); border-bottom: 1px solid var(--border-light);
}
.tabs ul { display: flex; gap: var(--space-4); overflow-x: auto; }
.tabs a {
  display: inline-flex; align-items: center; height: 56px;
  font: 700 13px/0.94 var(--font-display); letter-spacing: 1.17px; text-transform: uppercase;
  color: var(--fg-ink); border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs a:hover, .tabs a.is-active { border-bottom-color: var(--accent-coral); }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--gutter); align-items: center; }
@media (max-width: 1023px) { .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }
.split-copy { display: flex; flex-direction: column; gap: var(--space-3); }
.bullets li { position: relative; padding-left: var(--space-3); }
.bullets li + li { margin-top: var(--space-1); }
.bullets li::before {
  content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 1px;
  background: var(--accent-coral);
}
/* Founder exception to §3.4/§9 (2026-10-30): photographs dissolve into the
   section instead of sitting in a hard-edged box. An alpha mask, not a colour
   gradient: the image fades to transparent, so the section's own background
   (black or paper) shows through. Two linear masks intersected give soft
   edges on all four sides with a fully opaque centre. */
.shot { border: 0; }
.shot img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000000 18%, #000000 82%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000000 18%, #000000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000000 18%, #000000 82%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000000 18%, #000000 82%, transparent 100%);
  mask-composite: intersect;
}

.logo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .logo-grid { grid-template-columns: minmax(0, 1fr); } }
.logo-grid li {
  border: 1px solid var(--border-light); margin: 0 -1px -1px 0;
  min-height: 128px; padding: var(--space-3);
  display: flex; flex-direction: column; justify-content: space-between;
  transition: border-color 200ms ease-out;
}
.logo-grid li:hover { border-color: var(--accent-coral); position: relative; }
.logo-grid .ext { font: 400 18px/1.2 var(--font-mono); }

.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--divider-dark); }
@media (max-width: 1023px) { .specs { grid-template-columns: minmax(0, 1fr); } }
.specs > div { padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: 1px solid var(--divider-dark); }
.specs h3 { margin-bottom: var(--space-2); }

/* Metric (§6 Solutions 4) */
.metric { font: 700 64px/1.00 var(--font-display); letter-spacing: 0.96px; color: var(--accent-coral); text-transform: uppercase; }

/* Calculator (§6 Solutions 5) */
.calc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); align-items: end; }
@media (max-width: 1023px) { .calc { grid-template-columns: minmax(0, 1fr); } }
.calc-out { font: 700 48px/1.00 var(--font-display); letter-spacing: 0.96px; color: var(--accent-coral); text-transform: uppercase; }

/* Pricing (§6 Pricing 2) */
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border-light); }
@media (max-width: 1023px) { .price-grid { grid-template-columns: minmax(0, 1fr); } }
.price-col { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.price-col + .price-col { border-left: 1px solid var(--border-light); }
@media (max-width: 1023px) { .price-col + .price-col { border-left: 0; border-top: 1px solid var(--border-light); } }
.price { font: 700 64px/1.00 var(--font-display); letter-spacing: 0.96px; text-transform: uppercase; }
@media (max-width: 639px) { .price { font-size: 48px; } }
.checks li { position: relative; padding-left: var(--space-3); font-size: 14px; line-height: 1.55; }
.checks li + li { margin-top: var(--space-1); }
.checks li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-coral); }
.price-col .btn { margin-top: auto; align-self: flex-start; }

/* FAQ accordion (§6 Pricing 4) */
.faq { border-top: 1px solid var(--border-dark); }
.faq details { border-bottom: 1px solid var(--border-dark); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  min-height: 80px; padding: var(--space-3) 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { flex: 0 0 auto; width: 16px; height: 16px; position: relative; }
.faq summary .pm::before, .faq summary .pm::after {
  content: ""; position: absolute; background: var(--accent-coral);
  left: 0; top: 7px; width: 16px; height: 2px;
}
.faq summary .pm::after { transform: rotate(90deg); transition: transform 200ms ease-out; }
.faq details[open] summary .pm::after { transform: rotate(0deg); }
.faq .answer { padding: 0 0 var(--space-4); max-width: 72ch; color: var(--fg-muted-dark); }

/* Company manifesto + timeline (§6 Company 2, 3) */
.rule { width: 64px; height: 1px; background: var(--accent-coral); margin-top: var(--space-3); }
.manifesto { font: 400 24px/1.70 var(--font-body); }
@media (max-width: 639px) { .manifesto { font-size: 18px; } }
.manifesto p + p { margin-top: var(--space-4); }
.timeline { border-left: 1px solid var(--accent-coral); }
.timeline li { padding: 0 0 var(--space-5) var(--space-5); position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: -5px; top: 4px; width: 9px; height: 9px;
  background: var(--bg-paper); border: 1px solid var(--accent-coral);
}
.timeline .t-label { display: block; margin-bottom: var(--space-1); }

/* Demo form */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--gutter); }
@media (max-width: 639px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.form-grid .full { grid-column: 1 / -1; }
.note { margin-top: var(--space-2); }

/* Page-hero breadcrumb */
.crumb { margin-bottom: var(--space-4); color: var(--fg-muted-dark); }
.crumb a:hover { color: var(--fg-spectral); }

/* ---------- §5 motion ---------- */
.js .reveal { opacity: 0; transform: translateY(32px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 600ms var(--ease-expo), transform 600ms var(--ease-expo);
}
.js .hero-enter { opacity: 0; transform: translateY(24px); }
.js .hero-enter.is-in {
  opacity: 1; transform: none;
  transition: opacity 800ms var(--ease-expo), transform 800ms var(--ease-expo);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .hero-enter { opacity: 1; transform: none; transition: none; }
  .card-dark img, .card-dark:hover img { transition: none; transform: none; }
  * { scroll-behavior: auto !important; }
}

/* Preview line highlight cycle (Home 4): opacity only, slow and weighted */
.diff-pane .row { transition: opacity 600ms var(--ease-expo); }
.diff.is-cycling .row { opacity: 0.45; }
.diff.is-cycling .row.is-lit { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .diff.is-cycling .row { opacity: 1; } }

/* A dark panel inside a light section keeps its own theme: the nearer
   ancestor must win over the section's light table rules. */
.theme-light .theme-dark .table th, .theme-light-soft .theme-dark .table th {
  color: var(--fg-muted-dark); border-bottom-color: var(--divider-dark);
}
.theme-light .theme-dark .table td, .theme-light-soft .theme-dark .table td {
  border-bottom-color: var(--divider-dark);
}

/* Mirror a scene photo so its busy side sits opposite the headline. Only for
   photographs without legible text or logos (mirroring would reverse them). */
.scene-media img.flip { transform: scaleX(-1); }

/* Scene photo anchored to the right: the headline sits on clean black and the
   photo's left edge dissolves into it (same founder-approved alpha-mask
   treatment as above, horizontal and vertical masks intersected). */
.scene-media.media-right img {
  position: absolute; top: 0; right: 0; left: auto;
  width: 72%; height: 100%;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000000 40%, #000000 100%),
    linear-gradient(to bottom, transparent 0%, #000000 12%, #000000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000000 40%, #000000 100%),
    linear-gradient(to bottom, transparent 0%, #000000 12%, #000000 80%, transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 639px) { .scene-media.media-right img { width: 100%; } }
/* scaleX(-1) mirrors the mask with the image: reverse the horizontal fade so
   the soft edge still faces the headline. */
.scene-media.media-right img.flip {
  -webkit-mask-image:
    linear-gradient(to left, transparent 0%, #000000 40%, #000000 100%),
    linear-gradient(to bottom, transparent 0%, #000000 12%, #000000 80%, transparent 100%);
  mask-image:
    linear-gradient(to left, transparent 0%, #000000 40%, #000000 100%),
    linear-gradient(to bottom, transparent 0%, #000000 12%, #000000 80%, transparent 100%);
}
/* Product hero crop: show exactly two rack doors (the source is mirrored, so
   moving the source crop right trims the visual right edge). */
.scene-media.media-right img.crop-two-racks { object-position: 30% 50%; }
/* Two-rack framing: the source is a repeating row of racks, so the frame also
   fades out on the visual right, dissolving the next rack's sliver. Mirrored
   image: "to left" runs from the visual left edge to the visual right edge. */
.scene-media.media-right img.flip.crop-two-racks {
  -webkit-mask-image:
    linear-gradient(to left, transparent 0%, #000000 40%, #000000 84%, transparent 95%),
    linear-gradient(to bottom, transparent 0%, #000000 12%, #000000 80%, transparent 100%);
  mask-image:
    linear-gradient(to left, transparent 0%, #000000 40%, #000000 84%, transparent 95%),
    linear-gradient(to bottom, transparent 0%, #000000 12%, #000000 80%, transparent 100%);
}
/* Lock the two-rack frame's proportions (measured at 1440×900: 1037×900) so
   the crop — and therefore exactly two rack doors — is identical on every
   screen. The frame (not the image) is sized and anchored right, so the
   photo overlay on .scene-media::after always covers exactly the photo. */
@media (min-width: 640px) {
  .scene-media.frame-two-racks {
    left: auto; right: 0; width: auto; height: 84%; top: 8%; aspect-ratio: 1037 / 900;
  }
  .scene-media.frame-two-racks img.crop-two-racks { width: 100%; height: 100%; }
}

/* §8 conflict C8 (accessibility): coral text on white is 2.39:1, so on light
   canvases coral appears only as underline, border or the primary fill. Text
   stays ink; links keep a persistent coral underline. */
.theme-light .coral, .theme-light-soft .coral,
.theme-light .num, .theme-light-soft .num,
.theme-light .calc-out, .theme-light-soft .calc-out,
.theme-light .triad-item .t-label, .theme-light-soft .triad-item .t-label { color: var(--fg-ink); }
.theme-light .num, .theme-light-soft .num {
  text-decoration: underline; text-decoration-color: var(--accent-coral);
  text-decoration-thickness: 2px; text-underline-offset: 8px;
}
.theme-light .link, .theme-light-soft .link {
  color: var(--fg-ink); text-decoration-color: var(--accent-coral);
}
.theme-light .checks li::before, .theme-light-soft .checks li::before { color: var(--fg-ink); }

/* §6 Pricing 4: FAQ questions are uppercase display labels */
.faq summary { font-family: var(--font-display); text-transform: uppercase; }

/* ---------- Copy deck v2 components (same rectilinear, token-only system) ---------- */

/* Headline line breaks from the deck (" / "). On phones the display sizes are
   fixed at 60 %, so the browser balances the words instead of forcing breaks. */
.t-hero-xl, .t-hero-lg, .t-display, .t-h1, .t-h2 { text-wrap: balance; }
@media (max-width: 639px) { br.lb { display: none; } }
.nowrap { white-space: nowrap; }

/* CTA microcopy under a button row. */
.cta-note { margin-top: var(--space-2); max-width: 60ch; }
.center .cta-note { margin-left: auto; margin-right: auto; }
.cta-note + .cta-note { margin-top: var(--space-1); }

/* Home hero: stats sit side by side; the qualifiers sit directly underneath. */
.stats-note { margin-top: var(--space-3); max-width: 96ch; }

/* §4.5 tables, both themes. Rows are fixed at 56 px. Cells hold body-sm text,
   so a desktop cell can take two lines (2 × 14 × 1.55 = 43 px) inside the row;
   below 1024 px every cell stays on one line and the wrapper scrolls (C16). */
.table td, .table th[scope="row"] { font-size: 14px; line-height: 1.55; }
.table th[scope="row"] { font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: 0; vertical-align: middle; }
.theme-light .table th[scope="row"], .theme-light-soft .table th[scope="row"] { color: var(--fg-ink); border-bottom: 1px solid var(--border-light); }
.theme-dark .table th[scope="row"] { color: var(--fg-muted-dark); border-bottom: 1px solid var(--divider-dark); }
.theme-dark .table td { color: var(--fg-spectral); font-family: var(--font-mono); }
.theme-dark .table td.coral { color: var(--accent-coral); }
.theme-light .table, .theme-light-soft .table { background: var(--bg-paper); }
.theme-dark .table tbody tr:last-child > *, .theme-light .table tbody tr:last-child > *,
.theme-light-soft .table tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 1023px) {
  .table-wrap .table td, .table-wrap .table th { white-space: nowrap; }
}
.table-caption { margin-bottom: var(--space-2); }
.table-note { margin-top: var(--space-3); max-width: 96ch; }

/* Product 03 persona table and Home link panel: compact first column. */
.table .k { width: 1%; white-space: nowrap; }

/* Product capability matrix: rows marked "ours" carry a coral rule on the left. */
.matrix th[scope="row"] { width: 18%; }
.matrix .ours th[scope="row"] { border-left: 2px solid var(--accent-coral); }

/* Home 6 parity grid: 3 × 3 hairline tiles, like the logo grid. */
.parity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .parity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .parity-grid { grid-template-columns: minmax(0, 1fr); } }
.parity-grid li {
  border: 1px solid var(--border-light); margin: 0 -1px -1px 0;
  padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--bg-paper);
  transition: border-color 200ms ease-out;
}
.parity-grid li:hover { border-color: var(--accent-coral); position: relative; }
.grid-foot { margin-top: var(--space-5); display: grid; gap: var(--space-2); max-width: 80ch; }

/* Section headers: eyebrow + heading + intro, stacked. */
.section-head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); max-width: 64rem; }
.section-head .eyebrow { margin-bottom: 0; }

/* Product 4 numbers: a dark spec ledger (measure · result · scope) with
   hairline dividers. The scope text is too long for a 56 px table row. */
.ledger { border-top: 1px solid var(--divider-dark); }
.ledger > div {
  display: grid; grid-template-columns: 4fr 3fr 5fr; column-gap: var(--gutter);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--divider-dark);
}
@media (max-width: 1023px) { .ledger > div { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-1); } .ledger dd.scope { grid-column: 1 / -1; } }
@media (max-width: 639px) { .ledger > div { grid-template-columns: minmax(0, 1fr); } }
.ledger dt { font: 400 16px/1.60 var(--font-body); }
.ledger .result { font: 400 18px/1.55 var(--font-mono); font-variant-numeric: tabular-nums; }
.ledger .scope { color: var(--fg-muted-dark); }
.ledger-head {
  display: grid; grid-template-columns: 4fr 3fr 5fr; column-gap: var(--gutter);
  padding-bottom: var(--space-2); color: var(--fg-muted-dark);
}
@media (max-width: 1023px) { .ledger-head { display: none; } }

/* Product 03 Link: the copy column is long, so the table column aligns top. */
.split.top { align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.subhead-h { font-family: var(--font-display); }

/* Demo: describe-your-files path. Without JS both forms show. */
.js .describe-form:not(.is-active), .js .book-form.is-hidden { display: none; }
.form-path { margin-bottom: var(--space-4); display: grid; gap: var(--space-1); }

/* Spacing helpers that replace per-page inline styles. */
.head-row { margin-bottom: var(--space-6); }
.triad-title { max-width: 26ch; margin-bottom: var(--space-7); }
.format-row { margin-top: var(--space-4); }
.statement-sub { margin-top: var(--space-4); max-width: 60ch; }
.cta-sentence { margin: var(--space-4) auto 0; max-width: 60ch; }
.cta-actions { justify-content: center; margin-top: var(--space-5); }
.frame-caption { margin: 0; padding: var(--space-2); border-top: 1px solid var(--border-dark); }
.proof { padding-top: var(--space-2); border-top: 1px solid var(--border-light); }
.persona, .link-panel { margin-top: var(--space-6); }
.link-panel + .actions, .numbers-links { margin-top: var(--space-4); }
[hidden] { display: none !important; }
.footer-line { margin-top: var(--space-2); max-width: 32ch; }
.cases-title { max-width: 22ch; }
.field-copy, .field-note { margin-top: var(--space-4); }
.field-metric { align-self: end; display: grid; gap: var(--space-2); }
.calc-help { margin-top: var(--space-3); }
.calc-out + .t-body-sm { margin-top: var(--space-2); }
.values-title { margin-bottom: var(--space-7); }
.plans-note { margin-top: var(--space-3); margin-bottom: var(--space-1); }
.compare-title { margin-bottom: var(--space-5); }
.faq-more { margin-top: var(--space-5); display: grid; gap: var(--space-1); }
.demo-grid { margin-top: var(--space-7); }
.demo-list, .demo-sample { margin-top: var(--space-4); }
.form-title { margin-bottom: var(--space-3); }
.form-actions { margin-top: var(--space-4); }
.close-title { max-width: 24ch; margin: 0 auto; }
.t-h3 { text-wrap: balance; }
.footer h3 { margin-bottom: var(--space-2); }
/* Home 4 link decisions: a two-column decision list (seen → decision) with
   hairline dividers; it stacks on phones instead of scrolling sideways. */
.decisions { border-top: 1px solid var(--divider-dark); }
.decisions li {
  display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--gutter);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--divider-dark);
  font: 400 14px/1.85 var(--font-mono);
}
@media (max-width: 639px) { .decisions li { grid-template-columns: minmax(0, 1fr); } }
.decisions .seen { color: var(--fg-spectral); }
/* Busy, bright photographs are darkened at the source so small labels over
   them stay legible (the overlay token itself stays at 50 %). */
.scene-media.dim img { filter: brightness(0.5); }
.scene-media.dim-soft img { filter: brightness(0.75); }
/* Pricing compare on phones: row labels wrap to at most three 12 px lines
   (3 × 18 = 54 px, inside the 56 px row) so the tick columns stay in view. */
@media (max-width: 639px) {
  .compare th, .compare td { padding: 0 var(--space-1); }
  .table-wrap .compare th[scope="row"] { white-space: normal; font-size: 12px; line-height: 1.5; width: 184px; min-width: 184px; }
  .table-wrap .compare thead th { white-space: normal; }
  .table-wrap .compare td { white-space: normal; font-size: 12px; line-height: 1.5; min-width: 72px; }
  .table-wrap .compare td:last-child { min-width: 176px; }
}
/* Founder placeholders (CONTACT_EMAIL, PRIVACY_NOTICE_URL) are tokens, not
   prose: set in mono so they read as "to be filled in". */
.ph { font: 400 14px/1.55 var(--font-mono); color: var(--fg-muted-dark); }
/* Product hero: the text column now starts 80px further in (LAYOUT-03), so the
   two-rack frame is drawn smaller on narrower screens and stays clear of the
   headline. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .scene-media.frame-two-racks { height: 70%; top: 15%; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .scene-media.frame-two-racks { height: 60%; top: auto; bottom: 8%; }
}

/* ======================================================================
   Home v3 (founder brief 2026-10-30): fewer words, workflows that play
   once on scroll. All motion uses the guide's tokens: 400/600/800 ms,
   ease-out-expo, delays in 80 ms steps, nothing loops after it lands,
   and prefers-reduced-motion shows the finished state with no motion.
   ====================================================================== */

/* Hero: PrivacyBench results sit beside the CTA (desktop) or right under
   it (tablet, phone), so they are above the fold on a 1280×800 screen. */
.hero-lower { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5) var(--gutter); }
.hero .bench { max-width: 960px; }
.bench-title { color: var(--fg-muted-dark); margin-bottom: var(--space-2); }
.hero .bench .hero-stats { margin-top: 0; }
.hero .bench .stats-note { margin-top: var(--space-2); }
@media (min-width: 1024px) {
  .hero-lower { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; margin-top: var(--space-4); }
  .hero-lower .hero-sub { margin-top: 0; }
  .hero .bench .hero-stats { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding-top: var(--space-2); }
  .hero .bench .hero-stats > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: var(--gutter); align-items: center; }
  .hero .bench .stat-label { margin-top: 0; }
}

/* Formats trust strip: logos at 40 %, full colour on hover (guide L438). */
.logo-row {
  margin: var(--space-4) auto 0; max-width: 1040px;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-4) var(--gutter);
}
.logo-row li, .logo-grid li { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.logo-row img, .logo-grid img { width: 40px; height: 40px; object-fit: contain; }
.logo-row li { opacity: 1; }
.logo-row img { filter: none; }
.logo-row li:hover { opacity: 1; }
.logo-row li:hover img { filter: none; }
@media (max-width: 1023px) { .logo-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Phones: logos wrap as a flowing row, not a grid (single-column rule). */
@media (max-width: 639px) {
  .logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-4); }
  .logo-row li { width: 64px; }
}

/* Workflow pipeline: a hairline runs through six square nodes. On reveal
   the coral line draws left to right (800 ms) and each node takes the
   coral border as the line reaches it (80 ms steps). */
.flow-title { max-width: 24ch; margin: var(--space-2) 0 var(--space-7); }
.flow {
  position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3) var(--gutter);
}
.flow::before, .flow::after {
  content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 0;
}
.flow::before { border-top: 1px solid var(--border-light); }
.flow::after { border-top: 1px solid var(--accent-coral); transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  .js .flow::after { transform: scaleX(0); }
  .js .flow.is-in::after { transform: scaleX(1); transition: transform 800ms var(--ease-expo) 400ms; }
}
.flow li { position: relative; display: flex; flex-direction: column; gap: var(--space-1); padding-top: var(--space-4); }
.flow-node {
  position: absolute; top: 0; left: 0; width: 13px; height: 13px;
  background: var(--bg-paper); border: 1px solid var(--border-light); z-index: 1;
}
.flow-node { border-color: var(--accent-coral); }
@media (prefers-reduced-motion: no-preference) {
  .js .flow .flow-node { border-color: var(--border-light); }
  .js .flow.is-in .flow-node {
    border-color: var(--accent-coral);
    transition: border-color 400ms var(--ease-expo) calc(400ms + var(--i) * 160ms);
  }
}
@media (max-width: 1023px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-left: var(--space-5); }
  .flow::before, .flow::after { left: 6px; right: auto; top: 0; bottom: 0; width: 0; height: auto; border-top: 0; }
  .flow::before { border-left: 1px solid var(--border-light); }
  .flow::after { border-left: 1px solid var(--accent-coral); transform-origin: center top; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .js .flow::after { transform: scaleY(0); }
  .js .flow.is-in::after { transform: scaleY(1); }
  .flow li { padding-top: 0; }
  .flow-node { left: calc(-1 * var(--space-5)); top: 2px; }
}

/* Re-scan gate: files get their verdict one after another (once). */
.gate { border-top: 1px solid var(--border-light); }
.gate li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--gutter);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--border-light);
  font: 400 14px/1.55 var(--font-mono);
}
.gate-file { overflow-wrap: anywhere; }
.gate-verdict { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-body); }
/* Written: ink square; held back: coral square (coral as a border only). */
.gate-verdict::before { content: ""; width: 9px; height: 9px; border: 1px solid var(--fg-ink); }
.gate-verdict.held::before { border-color: var(--accent-coral); }
@media (prefers-reduced-motion: no-preference) {
  .js .gate-verdict { opacity: 0; }
  .js .gate-figure.is-in .gate-verdict { opacity: 1; transition: opacity 600ms var(--ease-expo) calc(400ms + var(--i) * 240ms); }
}
.gate-caption { margin-top: var(--space-2); }
@media (max-width: 639px) { .gate li { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }

/* On your machines: guide's integration grid (4 columns, hairlines, coral on hover). */
.machines-sub { margin-top: var(--space-2); max-width: 52ch; }
.logo-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border-light); border-left: 1px solid var(--border-light);
}
.logo-grid li {
  padding: var(--space-4) var(--space-2);
  border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
  transition: border-color 200ms ease-out;
}
.logo-grid li:hover { border-color: var(--accent-coral); }
@media (max-width: 639px) {
  .logo-grid { display: flex; flex-wrap: wrap; }
  .logo-grid li { width: 50%; }
}
/* Bring your own cloud: one status line per platform (founder, 2026-10-31).
   Only Azure is available now ("Pilots now", underlined like "internet
   disconnected"); roadmap platforms are drawn quieter, never presented as live. */
.cloud-grid .cloud-status { margin-top: calc(-1 * var(--space-1)); color: var(--fg-ink-muted); }
.cloud-grid .is-now .cloud-status { color: var(--fg-ink); }
.cloud-grid .is-later img { opacity: 1; filter: none; }
.cloud-grid .is-later:hover img { opacity: 1; filter: none; }
/* Checklist: an even grid so every tick lines up (5 × 2 on desktop). */
.checklist {
  margin-top: var(--space-5); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2) var(--gutter);
}
.checklist li { display: flex; align-items: baseline; gap: var(--space-1); }
.checklist li::before { content: "✓"; }
@media (max-width: 1023px) { .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .checklist { grid-template-columns: minmax(0, 1fr); } }
/* Centred section heads (Re-scan, On your machines). */
.head-center { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; margin-bottom: var(--space-6); }
.head-center .machines-sub { margin-top: 0; }
.logo-more { margin-top: var(--space-4); }
.checklist-link { text-align: center; }
.checklist-link { margin-top: var(--space-4); }


.trail-title { max-width: 22ch; margin: 0 auto; }
.trail-sub { margin: var(--space-3) auto 0; max-width: 52ch; }

/* ======================================================================
   Home 6a — De-identify at the source. A flat schematic of the customer's
   cloud account: three stages inside a hairline boundary whose only opening
   is the gate in its bottom edge; the internet line stops at a cut short of
   the boundary. On reveal the stages settle in turn, one coral pulse runs
   down each link and through the gate, and the verified dataset outside
   lights coral. Plays once; reduced motion shows the finished schematic.
   ====================================================================== */
.u-mark { text-decoration: underline; text-decoration-color: var(--accent-coral); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.source-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--gutter); align-items: center; }
@media (min-width: 1024px) { .source-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.source-lede { margin-top: var(--space-3); max-width: 46ch; }
.principles { margin-top: var(--space-5); border-top: 1px solid var(--divider-dark); }
.principles li {
  display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: var(--gutter); align-items: baseline;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--divider-dark);
}
.principles .t-label { color: var(--accent-coral); }
@media (max-width: 639px) { .principles li { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); } }

.source-scene { overflow-x: clip; }
.egress { --rail: 20px; margin: 0; display: grid; row-gap: 0; min-width: 0; }

/* The internet stops at a cut, short of the boundary. */
.egress-net { display: flex; flex-direction: column; align-items: flex-end; row-gap: var(--space-1); padding-right: var(--space-5); color: var(--fg-muted-dark); }
.egress-net-line { width: 0; height: var(--space-4); border-left: 1px dashed var(--border-dark); margin-right: 7px; transform-origin: top center; }
/* The cut: two hairlines crossed, drawn with borders. */
.egress-cut { position: relative; width: 16px; height: 16px; margin-bottom: var(--space-2); }
.egress-cut::before, .egress-cut::after { content: ""; position: absolute; left: 0; top: 50%; width: 16px; border-top: 1px solid var(--border-dark); transform: rotate(45deg); }
.egress-cut::after { transform: rotate(-45deg); }

/* The account: hairline boundary, open only at the gate in its bottom edge. */
.egress-account { position: relative; padding: var(--space-4); background: var(--bg-surface-dark); border: 1px solid var(--border-dark); border-bottom: 0; }
.egress-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: 1px solid var(--divider-dark); }
.egress-head .t-label { color: var(--fg-spectral); }
.egress-state { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--accent-coral); white-space: nowrap; }
.egress-state i { width: 8px; height: 8px; border: 1px solid var(--accent-coral); }

.egress-node, .egress-out { display: flex; align-items: center; gap: var(--space-2); }
/* Stage marks: numbered hairline frames on the rail. */
.egress-mark { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border-dark); color: var(--fg-muted-dark); }
.egress-text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.egress-text .t-label { color: var(--fg-spectral); }
.egress-tag { flex: none; display: inline-flex; align-items: center; height: var(--space-3); padding: 0 var(--space-1); border: 1px solid var(--divider-dark); color: var(--fg-muted-dark); white-space: nowrap; }

/* Links run down the icon rail; a pulse travels each one once. */
.egress-link { position: relative; display: block; width: 0; height: var(--space-4); margin-left: var(--rail); border-left: 1px solid var(--border-dark); overflow: hidden; }
.egress-pulse { position: absolute; top: 0; left: -1px; width: 1px; height: var(--space-2); background: var(--accent-coral); opacity: 0; }

/* Bottom edge with a gate on the rail; the exit beam crosses it. */
.egress-gate { position: absolute; left: 0; right: 0; bottom: 0; height: 0; }
.egress-gate::before, .egress-gate::after { content: ""; position: absolute; bottom: 0; border-top: 1px solid var(--border-dark); }
.egress-gate::before { left: 0; width: calc(var(--space-4) + var(--rail) - 12px); }
.egress-gate::after { left: calc(var(--space-4) + var(--rail) + 12px); right: 0; }
.egress-exit { position: absolute; left: calc(var(--space-4) + var(--rail)); top: calc(-1 * var(--space-4)); width: 0; height: calc(var(--space-4) + var(--space-5)); border-left: 1px solid var(--accent-coral); overflow: hidden; transform-origin: top center; }
/* On the coral exit the pulse is a dark packet passing through. */
.egress-exit .egress-pulse { left: -1px; background: var(--bg-void); }

/* A schematic note beside the exit beam, below the boundary. */
.egress-gate-note { position: absolute; top: var(--space-2); left: calc(var(--space-4) + var(--rail) + var(--space-2)); color: var(--fg-muted-dark); white-space: nowrap; }
@media (max-width: 639px) { .egress-gate-note { left: calc(var(--space-3) + var(--rail) + var(--space-2)); } }

/* Outside the account: the only thing that leaves. */
.egress-out { margin-top: var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--accent-coral); }
.egress-check { border-color: var(--accent-coral); }
/* The tick: a short and a long hairline, drawn with two borders. */
.egress-tick { width: 8px; height: 16px; margin-top: -4px; border: solid var(--accent-coral); border-width: 0 1px 1px 0; transform: rotate(45deg); }
.egress-tag-out { border-color: var(--accent-coral); color: var(--accent-coral); }
.egress .perimeter-legend { margin-top: var(--space-4); }

@media (max-width: 639px) {
  .egress-account { padding: var(--space-3); }
  .egress-node .egress-tag, .egress-out .egress-tag { display: none; }
  .egress-gate::before { width: calc(var(--space-3) + var(--rail) - 12px); }
  .egress-gate::after { left: calc(var(--space-3) + var(--rail) + 12px); }
  .egress-exit { left: calc(var(--space-3) + var(--rail)); top: calc(-1 * var(--space-3)); height: calc(var(--space-3) + var(--space-5)); }
  .egress-out { padding: var(--space-3); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Stages settle in turn (the reveal: 600 ms, 32 px, 80 ms steps). */
  .js .egress .egress-node, .js .egress .egress-out { opacity: 0; transform: translateY(32px); }
  .js .egress.is-in .egress-node, .js .egress.is-in .egress-out {
    opacity: 1; transform: none;
    transition: opacity 600ms var(--ease-expo), transform 600ms var(--ease-expo);
    transition-delay: calc(var(--i, 3) * 80ms);
  }
  .js .egress .egress-out { --i: 3; }
  /* The internet line drops toward the boundary and stops at the cut. */
  .js .egress .egress-net-line { transform: scaleY(0); }
  .js .egress.is-in .egress-net-line { transform: none; transition: transform 400ms var(--ease-expo) 240ms; }
  /* One pulse per link, then through the gate. */
  .js .egress.is-in .egress-link .egress-pulse { animation: egress-run 800ms var(--ease-expo) both; animation-delay: calc(480ms + var(--i) * 320ms); }
  .js .egress .egress-exit { transform: scaleY(0); }
  .js .egress .egress-gate-note { opacity: 0; }
  .js .egress.is-in .egress-gate-note { opacity: 1; transition: opacity 600ms var(--ease-expo) 1120ms; }
  .js .egress.is-in .egress-exit { transform: none; transition: transform 400ms var(--ease-expo) 1120ms; }
  .js .egress.is-in .egress-exit .egress-pulse { animation: egress-run 800ms var(--ease-expo) 1120ms both; }
  /* The dataset outside lights coral; the tick draws. */
  .js .egress .egress-out, .js .egress .egress-check, .js .egress .egress-tag-out { border-color: var(--border-dark); }
  .js .egress .egress-tag-out { color: var(--fg-muted-dark); }
  .js .egress .egress-tick { opacity: 0; }
  .js .egress.is-in .egress-out {
    border-color: var(--accent-coral);
    transition: opacity 600ms var(--ease-expo) 240ms, transform 600ms var(--ease-expo) 240ms, border-color 400ms ease-out 1520ms;
  }
  .js .egress.is-in .egress-check { border-color: var(--accent-coral); transition: border-color 400ms ease-out 1520ms; }
  .js .egress.is-in .egress-tag-out { border-color: var(--accent-coral); color: var(--accent-coral); transition: border-color 400ms ease-out 1520ms, color 400ms ease-out 1520ms; }
  .js .egress.is-in .egress-tick { opacity: 1; transition: opacity 600ms var(--ease-expo) 1600ms; }
}
@keyframes egress-run {
  from { opacity: 1; transform: translateY(calc(-1 * var(--space-2))); }
  to { opacity: 0; transform: translateY(var(--space-5)); }
}

.standard { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--divider-dark); display: grid; gap: var(--space-3); }
.standard-line { max-width: 40ch; }
.frameworks { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.frameworks li { padding: var(--space-1) var(--space-2); border: 1px solid var(--border-dark); }

/* Legend under the egress schematic. */
.perimeter-legend { display: grid; gap: var(--space-1); justify-self: stretch; color: var(--fg-spectral); }
.perimeter-legend span { display: flex; align-items: center; gap: var(--space-2); }
.key { flex: none; width: 24px; height: 0; border-top: 1px solid var(--border-dark); }
.key-out { border-top-color: var(--accent-coral); }
.key-cut { border-top-style: dashed; }

/* Product name in page heroes (founder 2026-10-31) */
/* "CORPUS Engine" on Product and Solutions sits one display step above the
   old 13 px label: it takes the existing t-h2 token (Barlow Condensed 700,
   uppercase, 32 px, 0.6 px tracking; 19.2 px on phones via --type-heading-2),
   so no off-scale size is introduced. "Engine" uses the existing .coral class,
   echoing the coral mark in the header wordmark. A <p>, not a heading. */
.hero .product-name {
  margin: 0 0 var(--space-3);
  color: var(--fg-spectral);
  white-space: nowrap;
}

/* ======================================================================
   Before/after compare (Home 4). The "after" layer is clipped to the right
   of the handle; a native range input drives --pos, so the slider works
   with mouse, touch and keyboard. Nothing moves unless the visitor drags.
   ====================================================================== */
.examples { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5) var(--gutter); align-items: stretch; }
@media (min-width: 1024px) { .examples { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.ba { margin: 0; display: flex; flex-direction: column; }
.ba .frame { flex: 1; display: flex; flex-direction: column; }
.compare-stage { flex: 1; }
.ba-email .compare-layer { height: 100%; }
.ba-email .email-pane { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.sig-gap { margin-top: var(--space-2); color: var(--fg-muted-dark); }
.compare-stage { position: relative; --pos: 50%; overflow: hidden; touch-action: pan-y; }
.compare-layer { display: block; width: 100%; }
.compare-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
img.compare-layer { height: auto; }
.email-pane { padding: var(--space-5) var(--space-4); font: 400 14px/1.85 var(--font-mono); }
.compare-after .email-pane { background: var(--bg-void); height: 100%; }
.ba-v { display: inline-grid; vertical-align: bottom; }
.ba-v > span { grid-area: 1 / 1; justify-self: start; }
.v-ghost { visibility: hidden; }
.compare-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0;
  border-left: 1px solid var(--accent-coral); pointer-events: none;
}
.compare-handle::after {
  content: "‹ ›"; position: absolute; top: 50%; left: -20px; width: 40px; height: 40px; margin-top: -20px;
  display: grid; place-items: center; background: var(--bg-void); border: 1px solid var(--accent-coral);
  color: var(--fg-spectral); font: 700 13px/0.94 var(--font-display); letter-spacing: 1.17px;
}
.compare-range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent;
}
.compare-stage:has(.compare-range:focus-visible) .compare-handle::after { outline: 2px solid var(--accent-coral); outline-offset: 4px; }
.compare-tag { position: absolute; top: var(--space-1); padding: 0 var(--space-1); background: var(--bg-void); color: var(--fg-muted-dark); pointer-events: none; }
.compare-tag-before { left: var(--space-1); }
.compare-tag-after { right: var(--space-1); }
.compare-note { margin-top: var(--space-3); }
.examples + .compare-note + .decisions, .compare-note + .decisions { margin-top: var(--space-5); }

/* Pilot note under hero CTAs: an honest status line (paid pilots,
   founder-run). No counts, counters or seat markers (CLAIMS.md 2026-10-31). */
.pilot-note { margin-top: var(--space-3); display: flex; align-items: center; gap: var(--space-1); color: var(--fg-spectral); }
.pilot-dot { width: 8px; height: 8px; border: 1px solid var(--accent-coral); }
.cta-links { margin-top: var(--space-4); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); }
@media (min-width: 1024px) { .flow.flow-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.waitlist-form { margin-top: var(--space-4); max-width: 560px; }
.other-paths { display: grid; gap: var(--space-2); align-content: start; }
.other-paths .rule { margin-bottom: var(--space-2); }

/* ======================================================================
   Home 2b — Sources marquee (founder exception F6, GUIDE-CONFLICTS.md).
   One row per category: a fixed label, then a strip of monochrome marks
   that drifts at the same speed in every row (duration scales with the
   item count), alternating direction. Each list is rendered twice so the
   -50% loop is seamless; the copy is aria-hidden. Hover pauses a row.
   Reduced motion: no movement, one copy, wrapped.
   ====================================================================== */
.sources-sub { max-width: 44ch; }
.sources { display: grid; gap: var(--space-1); }
.src-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); align-items: center; padding: var(--space-1) 0; border-top: 1px solid var(--divider-dark); }
.src-row:last-child { border-bottom: 1px solid var(--divider-dark); }
@media (min-width: 1024px) { .src-row { grid-template-columns: 240px minmax(0, 1fr); column-gap: var(--gutter); } }
.src-label { color: var(--fg-muted-dark); }
.src-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000000 8%, #000000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000000 8%, #000000 92%, transparent 100%);
}
.src-track { display: flex; width: max-content; }
.src-track li {
  display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-4) var(--space-1) 0;
  color: var(--fg-spectral); opacity: 1; white-space: nowrap;
}
.src-track li:hover { opacity: 1; }
.src-track img { width: 20px; height: 20px; object-fit: contain; }
@keyframes src-drift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
  .src-track { animation: src-drift calc(var(--n) * 5s) linear infinite; }
  .src-row[data-dir="reverse"] .src-track { animation-direction: reverse; }
  .src-row:hover .src-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .src-viewport { -webkit-mask-image: none; mask-image: none; }
  .src-track { width: auto; flex-wrap: wrap; }
  .src-track li[aria-hidden="true"] { display: none; }
}
.sources-note { margin-top: var(--space-4); max-width: 80ch; }

/* Paid pilot (partners.html): the pilot's scope beside what the call settles. */
@media (min-width: 1024px) { .price-grid.price-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.criteria-head { margin-top: var(--space-4); }
.checks-dark { margin: var(--space-2) 0 var(--space-3); display: grid; gap: var(--space-1); }
.checks-dark li::before { content: "✓"; margin-right: var(--space-1); color: var(--accent-coral); }
/* Paid-pilot criteria grid and exclusions. */
.criteria { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5) var(--gutter); }
@media (min-width: 768px) { .criteria { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.criteria li { display: grid; gap: var(--space-1); align-content: start; }
.not-accepted { margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid var(--border-light); }
.not-accepted ul { margin-top: var(--space-2); display: grid; gap: var(--space-1); }
.not-accepted li::before { content: "✕"; margin-right: var(--space-1); }

/* Lead-form honeypot: off-canvas, aria-hidden and tabindex=-1, so people never
   see or reach it; a bot that fills it is answered "ok" and nothing is stored. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.lead-form { position: relative; }

/* Founder placeholders on light canvases keep body-text contrast. */
.theme-light .ph, .theme-light-soft .ph { color: var(--fg-ink-muted); }

/* Privacy notice: label column + plain paragraphs (manifesto layout). */
.notice h2 + p, .notice h3 + p { margin-top: var(--space-2); }
.notice p + p { margin-top: var(--space-2); }
.notice p + h3 { margin-top: var(--space-5); }