/* =============================================================================
   AMATIX — delivery platform engineering for regulated Swiss finance

   Design direction: a technical spec sheet, not a brochure. Everything hangs
   off a left axis with a monospace label column, the way a runbook or a build
   log does. Purple is a signal colour with exactly one job: it marks what is
   live, current or measured. If it is not one of those three things, it is ink.

   1.  Tokens
   2.  Reset & base
   3.  Typography
   4.  Layout — the spec grid
   5.  Scroll spine
   6.  Header
   7.  Hero
   8.  Capacity strip          (signature)
   9.  Pillars
   10. Track record
   11. Assessment demo
   12. Engagement models
   13. CTA
   14. Footer
   15. Inner pages
   16. Motion
   17. Responsive
   ========================================================================== */

/* =============================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* Palette — one accent, deliberately. Purple = live / current / measured. */
  --ink:         #0B0D12;
  --ink-soft:    #1B1F2A;
  --body:        #3D4353;
  --muted:       #737B8C;
  --paper:       #FFFFFF;
  --mist:        #F2F3F7;
  --rule:        #D8DBE4;
  --signal:      #6D4AFF;
  --signal-dim:  #EDE9FF;
  --signal-deep: #4A2FD1;

  /* Type */
  --font-display: 'Satoshi', 'Geist Sans', system-ui, sans-serif;
  --font-sans:    'Geist Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', 'Courier New', monospace;

  /* Type scale — display steps are fluid, body steps are not. */
  --t-display: clamp(2.5rem, 1.2rem + 5.2vw, 5.25rem);
  --t-h2:      clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
  --t-h3:      clamp(1.15rem, 0.95rem + 0.7vw, 1.4rem);
  --t-lead:    clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --t-body:    1rem;
  --t-small:   0.875rem;
  --t-label:   0.6875rem;

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Layout */
  --wrap:      1240px;
  --gutter:    1.25rem;
  --label-col: 148px;
  --header-h:  64px;

  --radius:    4px;
  --radius-lg: 10px;

  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast:    140ms var(--ease);
  --t-mid:     260ms var(--ease);
  --t-slow:    520ms var(--ease);
}

/* =============================================================================
   FONTS — self-hosted, no external requests
   ========================================================================== */
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Variable.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Geist Sans';
  src: url('/fonts/GeistVF.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMonoVF.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

/* =============================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--signal); color: var(--paper); }

.skip-nav {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--t-small);
}
.skip-nav:focus { left: var(--s-4); top: var(--s-4); }

/* =============================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h1 { font-size: var(--t-display); font-weight: 800; letter-spacing: -0.042em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.02em; }

p { text-wrap: pretty; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--body);
  max-width: 54ch;
}

/* The monospace label is the site's connective tissue: eyebrows, dates,
   metric names, status. Never used for prose. */
.label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}

.label-signal { color: var(--signal); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* =============================================================================
   4. LAYOUT — the spec grid
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--s-8);
  border-top: 1px solid var(--rule);
}

.section-flush { border-top: 0; }

.section-ink {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.72);
  border-top: 0;
}
.section-ink h2,
.section-ink h3 { color: var(--paper); }
.section-ink .label { color: rgba(255, 255, 255, 0.5); }

/* Label column left, content right. Collapses to stacked on small screens. */
.spec {
  display: grid;
  gap: var(--s-4);
}

.spec-head { margin-bottom: var(--s-6); }

/* =============================================================================
   5. SCROLL SPINE
   The thin rule that fills as you scroll. Reads as a pipeline running the
   length of the page. Hidden on small screens where there is no left margin
   to spare.
   ========================================================================== */
.spine {
  display: none;
  position: fixed;
  left: max(calc((100vw - var(--wrap)) / 2 + 0.5rem), 0.75rem);
  top: calc(var(--header-h) + var(--s-6));
  bottom: var(--s-6);
  width: 2px;
  background: var(--rule);
  z-index: 5;
  pointer-events: none;
}

.spine-fill {
  position: absolute;
  inset: 0 0 auto 0;
  height: 0;
  background: var(--signal);
  transform-origin: top;
}

/* =============================================================================
   6. HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.logo-icon { width: 18px; height: auto; }

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.nav-link {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--body);
  transition: color var(--t-fast);
}
.nav-link:hover,
.nav-link.active { color: var(--signal); }

.nav-cta {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  padding: 0.45rem 0.9rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  transition: background var(--t-fast);
}
.nav-cta:hover { background: var(--signal); }

.lang-switcher {
  display: flex;
  gap: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--t-label);
}
.lang-option {
  padding: 0.2rem 0.35rem;
  color: var(--muted);
  border-radius: 3px;
  transition: color var(--t-fast), background var(--t-fast);
}
.lang-option:hover { color: var(--ink); background: var(--mist); }
.lang-active { color: var(--signal); font-weight: 600; }

/* Mobile nav — CSS only, no JS */
.nav-toggle-input { display: none; }
.nav-toggle-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  padding: var(--s-2);
}
.hamburger-bar {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--t-fast), opacity var(--t-fast);
}

/* =============================================================================
   7. HERO
   ========================================================================== */
.hero {
  padding-block: var(--s-8) var(--s-7);
  border-top: 0;
}

.hero-eyebrow { margin-bottom: var(--s-5); }

.hero-title { margin-bottom: var(--s-5); max-width: 16ch; }

/* The one word that carries the thesis, marked the way the rest of the site
   marks anything live. */
.hero-title em {
  font-style: normal;
  color: var(--signal);
}

.hero-lead { margin-bottom: var(--s-6); }

.hero-portrait {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  filter: grayscale(1) contrast(1.04);
  transition: filter var(--t-slow);
}
.hero-portrait:hover { filter: grayscale(0) contrast(1); }

.hero-figure {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.hero-figcaption {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  line-height: 1.7;
  color: var(--muted);
}
.hero-figcaption strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero-institutions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--muted);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.hero-institutions span { white-space: nowrap; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-small);
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--signal); color: var(--paper); }
.btn-primary:hover { background: var(--signal-deep); }

.btn-ghost { border-color: var(--rule); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }

.btn-ink { background: var(--paper); color: var(--ink); }

/* =============================================================================
   8. CAPACITY STRIP — signature
   A one-person practice has finite capacity. Saying so precisely is the
   differentiator, so it gets the site's most deliberate piece of design.
   ========================================================================== */
.capacity {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  margin-top: var(--s-7);
}

.capacity-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.capacity-head .label { color: rgba(255, 255, 255, 0.55); }

.capacity-updated {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  color: rgba(255, 255, 255, 0.4);
}

.capacity-row {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: var(--s-3);
  align-items: start;
  padding-block: var(--s-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.capacity-row:last-child { border-bottom: 0; }

.capacity-dot {
  width: 8px;
  height: 8px;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  position: relative;
}

.capacity-row-live .capacity-dot { background: var(--signal); }

.capacity-row-live .capacity-dot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--signal);
  animation: ping 2.6s var(--ease) infinite;
}

@keyframes ping {
  0%   { transform: scale(0.7); opacity: 0.9; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.capacity-term {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.capacity-row-live .capacity-term { color: var(--signal); }

.capacity-value {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--paper);
  letter-spacing: -0.01em;
  margin-top: 2px;
}

.capacity-note {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
}

/* =============================================================================
   9. PILLARS — build it, measure it, put agents in it
   ========================================================================== */
.pillars { display: grid; gap: var(--s-5); margin-top: var(--s-6); }

.pillar {
  padding-top: var(--s-4);
  border-top: 2px solid var(--ink);
}

.pillar-index {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  color: var(--signal);
  letter-spacing: 0.14em;
}

.pillar h3 { margin: var(--s-3) 0 var(--s-2); }

.pillar p { font-size: var(--t-small); line-height: 1.7; }

/* =============================================================================
   10. TRACK RECORD
   A typed timeline: order carries information, so it is numbered by date and
   nothing else. Current engagement is the only one marked in signal.
   ========================================================================== */
.record { margin-top: var(--s-6); }

.record-item { border-top: 1px solid var(--rule); }
.record-item:last-child { border-bottom: 1px solid var(--rule); }

.record-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding-block: var(--s-5);
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.record-dates {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: var(--s-2);
}

.record-current .record-dates { color: var(--signal); }

.record-org {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  transition: color var(--t-fast);
}
.record-toggle:hover .record-org { color: var(--signal); }

.record-role {
  font-size: var(--t-small);
  color: var(--muted);
  margin-top: 2px;
}

.record-sign {
  width: 26px;
  height: 26px;
  flex: none;
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 50%;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.record-sign::before,
.record-sign::after {
  content: '';
  position: absolute;
  inset: 50% 7px auto 7px;
  height: 1px;
  background: var(--ink);
  transition: transform var(--t-mid), background var(--t-fast);
}
.record-sign::after { transform: rotate(90deg); }

.record-toggle:hover .record-sign { border-color: var(--signal); }

.record-toggle[aria-expanded='true'] .record-sign {
  background: var(--signal);
  border-color: var(--signal);
}
.record-toggle[aria-expanded='true'] .record-sign::before,
.record-toggle[aria-expanded='true'] .record-sign::after { background: var(--paper); }
.record-toggle[aria-expanded='true'] .record-sign::after { transform: rotate(0deg); }

.record-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-mid);
}
.record-panel[data-open='true'] { grid-template-rows: 1fr; }

.record-panel-inner { overflow: hidden; }

.record-body {
  padding-bottom: var(--s-6);
  max-width: 62ch;
}
.record-body p { font-size: var(--t-small); line-height: 1.75; }

.record-stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.record-tag {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  padding: 0.2rem 0.5rem;
  background: var(--mist);
  color: var(--body);
  border-radius: 3px;
}

/* =============================================================================
   11. ASSESSMENT DEMO
   The product is a delivery-performance readout, so the page performs one.
   ========================================================================== */
.demo {
  margin-top: var(--s-6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.demo-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
}

.demo-illustrative {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.demo-body { padding: var(--s-5); }

.demo-controls { display: grid; gap: var(--s-5); }

.demo-control label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--s-3);
}

.demo-control output {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
}

input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  cursor: pointer;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--signal);
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 1px var(--signal);
  transition: transform var(--t-fast);
}
input[type='range']::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type='range']::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--signal);
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 1px var(--signal);
}

.demo-metrics {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* Each tile is a column. The children are spans, so they need to be told to
   stack — otherwise the meter bar renders inline and the fill sits behind the
   band label instead of above it. */
.metric {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.metric-name {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.metric-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  font-weight: 700;
  color: var(--paper);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-block: var(--s-2) var(--s-3);
}

.metric-bar {
  display: block;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 2px;
  overflow: hidden;
}
.metric-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--signal);
  border-radius: 2px;
  transition: width var(--t-mid);
}

.metric-band {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  margin-top: var(--s-2);
}

.demo-finding {
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: rgba(109, 74, 255, 0.14);
  border-left: 2px solid var(--signal);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.demo-finding .label { color: var(--signal); margin-bottom: var(--s-2); }
.demo-finding p {
  font-size: var(--t-small);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
}

.demo-noscript {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: rgba(255, 255, 255, 0.55);
}

/* =============================================================================
   12. ENGAGEMENT MODELS
   ========================================================================== */
.models { display: grid; gap: 0; margin-top: var(--s-6); }

.model {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-top: 1px solid var(--rule);
}
.models .model:last-child { border-bottom: 1px solid var(--rule); }

.model-term {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
}
.model h3 { font-size: 1.0625rem; }
.model p { font-size: var(--t-small); }

/* =============================================================================
   13. CTA
   ========================================================================== */
.cta-inner { max-width: 46ch; }
.cta-inner h2 { margin-bottom: var(--s-4); }
.cta-inner .lead { margin-bottom: var(--s-6); }

/* =============================================================================
   14. FOOTER
   ========================================================================== */
.site-footer {
  padding-block: var(--s-7) var(--s-6);
  border-top: 1px solid var(--rule);
  background: var(--mist);
}

.footer-grid {
  display: grid;
  gap: var(--s-6);
  margin-bottom: var(--s-7);
}

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-3);
}
.footer-col ul { list-style: none; display: grid; gap: var(--s-2); }
.footer-col a,
.footer-col li {
  font-size: var(--t-small);
  color: var(--body);
}
.footer-col a { transition: color var(--t-fast); }
.footer-col a:hover { color: var(--signal); }

.footer-hours { color: var(--muted); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  justify-content: space-between;
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  color: var(--muted);
}

.footer-disclaimer {
  margin-top: var(--s-5);
  max-width: 68ch;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  line-height: 1.75;
  color: var(--muted);
}

/* =============================================================================
   15. INNER PAGES
   ========================================================================== */
.page-head { padding-block: var(--s-8) var(--s-6); }
.page-head h1 { max-width: 18ch; margin-bottom: var(--s-5); }

.prose { max-width: 68ch; }
.prose h2 { font-size: var(--t-h2); margin: var(--s-7) 0 var(--s-4); }
.prose h3 { margin: var(--s-6) 0 var(--s-3); }
.prose p { margin-bottom: var(--s-4); }
.prose ul, .prose ol { margin: 0 0 var(--s-4) var(--s-5); }
.prose li { margin-bottom: var(--s-2); }
.prose a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); font-weight: 600; }

/* The opening argument on About — set larger than body, smaller than a hero
   lead, so three paragraphs still read as one thought. */
.prose-lead p {
  font-size: var(--t-lead);
  line-height: 1.6;
  max-width: 58ch;
}

/* The role run. Monospace makes it read as a list of facts rather than prose,
   which is the point — it should be scannable, not eloquent. */
.roles {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  line-height: 1.9;
  color: var(--ink);
  max-width: 54ch;
  margin: var(--s-5) 0 var(--s-5);
  padding-left: var(--s-4);
  border-left: 2px solid var(--signal);
}

.contact-list { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
.contact-item { border-top: 1px solid var(--rule); padding-top: var(--s-4); }
.contact-item a { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; color: var(--ink); }
.contact-item a:hover { color: var(--signal); }

/* =============================================================================
   16. MOTION
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}
.reveal.is-in { opacity: 1; transform: none; }

@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;
  }
  .reveal { opacity: 1; transform: none; }
  .capacity-row-live .capacity-dot::after { display: none; }
}

/* =============================================================================
   17. RESPONSIVE
   ========================================================================== */
@media (min-width: 640px) {
  .pillars { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
  .demo-metrics { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .capacity { padding: var(--s-6) var(--s-7); }
  .capacity-row { grid-template-columns: 14px 210px 1fr; align-items: baseline; }
  .capacity-value { margin-top: 0; }
}

@media (min-width: 900px) {
  :root { --gutter: 2rem; }

  .spine { display: block; }

  .section { padding-block: var(--s-9); }

  .spec {
    grid-template-columns: var(--label-col) minmax(0, 1fr);
    gap: var(--s-7);
  }

  .hero { padding-block: var(--s-9) var(--s-8); }
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--s-8);
    align-items: end;
  }

  .record-toggle { grid-template-columns: 210px minmax(0, 1fr) auto; gap: var(--s-6); }
  .record-dates { margin-bottom: 0; }

  .model { grid-template-columns: 210px minmax(0, 1fr); gap: var(--s-6); align-items: baseline; }

  .demo-controls { grid-template-columns: repeat(2, 1fr); gap: var(--s-7); }
  .demo-metrics { grid-template-columns: repeat(4, 1fr); }

  .footer-grid { grid-template-columns: repeat(4, 1fr); }

  .nav-toggle-label { display: none; }
}

@media (max-width: 899px) {
  .main-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
    padding: var(--s-6) var(--gutter) var(--s-7);
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    transform: translateY(-120%);
    transition: transform var(--t-mid);
  }
  .nav-toggle-input:checked ~ .main-nav { transform: none; }
  .nav-toggle-label { order: 2; }
}