/* ==========================================================================
   Doing AI — design system
   One stylesheet. Every page links it. Tokens are defined here and nowhere
   else: if you find a raw hex outside the :root / [data-theme] blocks below,
   it is a bug.
   ========================================================================== */

/* --- Typefaces ------------------------------------------------------------
   Inter (variable, self-hosted) carries everything. Space Mono appears only
   as a micro-label — eyebrows, indices, figures. Two voices, no more.        */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/i7dPIFZifjKcF5UAWdDRYEF8RXi4EwQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/i7dMIFZifjKcF5UAWdDRaPpZUFWaHi6WZ3Q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Surface */
  --bg:        #FFFFFF;
  --bg-2:      #F6F6F5;
  --bg-3:      #EDEDEA;
  --bg-invert: #101215;

  /* Text */
  --ink:        #101215;   /* 18.8:1 on --bg */
  --ink-2:      #3A3F47;   /* 10.6:1 — body copy */
  --ink-3:      #6A707A;   /*  5.0:1 — secondary */
  --ink-4:      #868C95;   /*  3.4:1 — large text only, never body */
  --ink-invert: #F5F6F7;

  /* Line */
  --rule:   #E4E4E1;
  --rule-2: #D3D3CF;

  /* Accent — a single colour, used sparingly.
     --accent is for text and hairlines; --accent-fill backs a white label. */
  --accent:       #1C46C4;   /* 7.7:1 on --bg */
  --accent-hover: #16389E;
  --accent-fill:  #1C46C4;   /* white on it: 7.7:1 */
  --on-accent:    #FFFFFF;
  --accent-wash:  #F0F3FD;

  /* Focus ring — its own token so it survives an accent change */
  --focus: #1C46C4;

  /* Type scale — fluid, 320px → 1440px */
  --t-display: clamp(2.75rem, 1.15rem + 7.1vw, 6.25rem);
  --t-h1:      clamp(2.25rem, 1.25rem + 4.4vw, 4.25rem);
  --t-h2:      clamp(1.875rem, 1.2rem + 3.0vw, 3.25rem);
  --t-h3:      clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  --t-h4:      clamp(1.125rem, 1.03rem + 0.42vw, 1.375rem);
  --t-lead:    clamp(1.125rem, 1.02rem + 0.47vw, 1.4375rem);
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-micro:   0.75rem;

  /* Space — 8px base */
  --s1: 0.5rem;  --s2: 1rem;    --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;    --s6: 4rem;    --s7: 5.5rem;  --s8: 7rem;
  --s9: 9rem;    --s10: 12rem;

  /* Section rhythm — one knob for vertical density */
  --band: clamp(4.5rem, 2rem + 8vw, 9.5rem);

  /* Measure */
  --w-page:  1240px;
  --w-text:  62ch;
  --w-lead:  46ch;
  --gutter:  clamp(1.25rem, 0.5rem + 3vw, 3.5rem);

  /* Radius — rounded, not pill */
  --r-sm: 4px;
  --r:    6px;
  --r-lg: 10px;

  /* Motion */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:       520ms;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #0C0D0F;
  --bg-2:      #141618;
  --bg-3:      #1B1D21;
  --bg-invert: #F5F6F7;

  --ink:        #F5F6F7;   /* 18.0:1 */
  --ink-2:      #C9CCD1;   /* 12.1:1 */
  --ink-3:      #93989F;   /*  6.7:1 */
  --ink-4:      #6B7078;   /*  3.9:1 */
  --ink-invert: #101215;

  --rule:   #232528;
  --rule-2: #303338;

  /* Rotated toward cyan rather than lightened — a blue pushed past ~65%
     lightness reads violet (Abney effect) even at an unchanged hue. */
  --accent:       #5B93F2;   /* 6.4:1 on --bg */
  --accent-hover: #83AEF7;
  --accent-fill:  #1C46C4;   /* held, so white on it still clears AA */
  --on-accent:    #FFFFFF;
  --accent-wash:  #101A2E;

  --focus: #5B93F2;
}

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background: var(--bg);
  color: var(--ink-2);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--t-body);
  line-height: 1.65;
  font-feature-settings: 'cv05' 1, 'cv08' 1, 'ss03' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

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

::selection { background: var(--accent-wash); color: var(--ink); }

/* --- Typography ---------------------------------------------------------- */

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.1;
  text-wrap: balance;
}

.display {
  font-size: var(--t-display);
  font-weight: 500;
  letter-spacing: -0.038em;
  line-height: 0.98;
}
.h1 { font-size: var(--t-h1); letter-spacing: -0.032em; line-height: 1.03; }
.h2 { font-size: var(--t-h2); letter-spacing: -0.028em; line-height: 1.06; }
.h3 { font-size: var(--t-h3); letter-spacing: -0.02em;  line-height: 1.15; }
.h4 { font-size: var(--t-h4); letter-spacing: -0.014em; line-height: 1.3; font-weight: 500; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: -0.011em;
  max-width: var(--w-lead);
  text-wrap: pretty;
}

.prose { max-width: var(--w-text); text-wrap: pretty; }
.prose p + p { margin-top: 1.15em; }
.prose strong { color: var(--ink); font-weight: 500; }

.muted { color: var(--ink-3); }
.small { font-size: var(--t-small); line-height: 1.6; }

/* Eyebrow — the only place Space Mono is allowed to appear. */
.eyebrow {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
  display: block;
}

.idx {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* --- Layout -------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band); }
.band-tight { padding-block: calc(var(--band) * 0.62); }
.band-sub { background: var(--bg-2); }
.band-line { border-top: 1px solid var(--rule); }

/* 12-column grid. Sections opt in; nothing is boxed by default. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s5);
}
/* Span sets the *end* edge only. If it set `grid-column` wholesale, a later
   `.start-N` would overwrite the start and leave the end at `auto` — which
   silently collapses the item to a single column. */
.col-4  { grid-column-end: span 4; }
.col-5  { grid-column-end: span 5; }
.col-6  { grid-column-end: span 6; }
.col-7  { grid-column-end: span 7; }
.col-8  { grid-column-end: span 8; }
.col-12 { grid-column-end: span 12; }
.start-6 { grid-column-start: 6; }
.start-7 { grid-column-start: 7; }

@media (max-width: 900px) {
  .grid > [class*="col-"],
  .grid > [class*="start-"] { grid-column: 1 / span 12; }
  .grid { row-gap: var(--s4); }
}

/* Section head: label above, headline below, optional note to the right. */
.sec-head { margin-bottom: var(--s6); }
.sec-head .eyebrow { margin-bottom: var(--s3); }
.sec-head .lead { margin-top: var(--s3); }

/* --- Links & buttons ----------------------------------------------------- */

a { color: inherit; }

.link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding-bottom: 1px;
  transition: border-color 180ms var(--ease-soft), color 180ms var(--ease-soft);
}
.link:hover { border-bottom-color: var(--accent); color: var(--accent-hover); }

/* Text link with a rule that grows — used for "next page" affordances. */
.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.012em;
}
.link-arrow::after {
  content: "→";
  color: var(--accent);
  transition: transform 260ms var(--ease);
}
.link-arrow:hover::after { transform: translateX(4px); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.78rem 1.4rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: -0.008em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 180ms var(--ease-soft), border-color 180ms var(--ease-soft),
              color 180ms var(--ease-soft), transform 180ms var(--ease-soft);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent-fill); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
[data-theme="dark"] .btn-primary:hover { background: #2A57DA; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn-ghost:hover { border-color: var(--ink-4); background: var(--bg-2); }

.btn-invert { background: var(--bg-invert); color: var(--ink-invert); }
.btn-invert:hover { opacity: 0.88; }

.btn-lg { padding: 0.95rem 1.7rem; font-size: var(--t-body); }

.actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* --- Header -------------------------------------------------------------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--ease-soft), background 240ms var(--ease-soft);
}
.hdr[data-scrolled="true"] { border-bottom-color: var(--rule); }

.hdr-in {
  display: flex;
  align-items: center;
  gap: var(--s4);
  height: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.03em;
  margin-right: auto;
}
.brand-mark { width: 20px; height: 20px; flex: none; color: var(--ink); }

.nav { display: flex; align-items: center; gap: var(--s3); }
.nav a {
  text-decoration: none;
  color: var(--ink-3);
  font-size: var(--t-small);
  letter-spacing: -0.006em;
  transition: color 160ms var(--ease-soft);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }

.hdr-end { display: flex; align-items: center; gap: var(--s2); }

@media (max-width: 900px) {
  .nav { display: none; }
  .hdr-in { height: 4rem; }
  /* The CTA is 188px wide and does not fit beside the toggle and the menu
     button at 390px — it lives in the mobile sheet instead. */
  .hdr-end > .btn { display: none; }
}

/* Theme toggle — three states, understated. */
.theme {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--bg-2);
}
.theme button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 26px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--ink-4);
  cursor: pointer;
  transition: color 160ms var(--ease-soft), background 160ms var(--ease-soft);
}
.theme button:hover { color: var(--ink-2); }
.theme button[aria-pressed="true"] { background: var(--bg); color: var(--ink); }
.theme svg { width: 14px; height: 14px; }

/* Mobile menu */
.menu-btn {
  display: none;
  width: 36px; height: 34px;
  align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: transparent; color: var(--ink); cursor: pointer;
}
.menu-btn svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .menu-btn { display: inline-flex; } }

.mobile {
  display: none;
  border-top: 1px solid var(--rule);
  background: var(--bg);
  padding: var(--s3) 0 var(--s4);
}
.mobile[data-open="true"] { display: block; }
@media (min-width: 901px) { .mobile { display: none !important; } }
.mobile a {
  display: block;
  padding: 0.7rem 0;
  text-decoration: none;
  color: var(--ink);
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--rule);
}
.mobile .btn { margin-top: var(--s3); width: 100%; }

/* --- Hero ---------------------------------------------------------------- */

.hero { padding-block: clamp(4rem, 1rem + 11vw, 10rem) clamp(3rem, 1rem + 6vw, 6rem); }
.hero .display { max-width: 15ch; }
.hero .lead { margin-top: var(--s4); max-width: 52ch; }
.hero .actions { margin-top: var(--s5); }

/* A single sentence, set large, on its own. */
.statement {
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.026em;
  color: var(--ink);
  max-width: 24ch;
  text-wrap: balance;
}
.statement em { font-style: normal; color: var(--ink-4); }

/* --- Dark hero -----------------------------------------------------------
   Always dark, in both themes. It is the one place on the site that carries
   visual weight, so it must not invert with the colour scheme. All colours
   here are the *dark* palette values, hard-set for that reason.            */

.hero-dark {
  position: relative;
  background: #0C0D0F;
  color: #F5F6F7;
  overflow: hidden;
  isolation: isolate;
  /* Slide up under the sticky header so it can sit transparently over the
     art. A sticky element still occupies flow, hence the negative margin. */
  margin-top: -4.5rem;
  padding-top: 4.5rem;
}
@media (max-width: 900px) {
  .hero-dark { margin-top: -4rem; padding-top: 4rem; }
}

/* Header over the dark hero: transparent until scrolled, then the normal
   glassy header takes over against the light content below. */
body.has-dark-hero .hdr[data-scrolled="false"] {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
/* .brand-mark carries its own `color: var(--ink)`, which resolves to near-black
   in the light theme — invisible on the dark hero. It must be set explicitly. */
body.has-dark-hero .hdr[data-scrolled="false"] .brand,
body.has-dark-hero .hdr[data-scrolled="false"] .brand-mark { color: #FFFFFF; }
body.has-dark-hero .hdr[data-scrolled="false"] .nav a { color: rgba(245, 246, 247, 0.74); }
body.has-dark-hero .hdr[data-scrolled="false"] .nav a:hover,
body.has-dark-hero .hdr[data-scrolled="false"] .nav a[aria-current="page"] { color: #FFFFFF; }
body.has-dark-hero .hdr[data-scrolled="false"] .theme {
  background: rgba(245, 246, 247, 0.07);
  border-color: rgba(245, 246, 247, 0.18);
}
body.has-dark-hero .hdr[data-scrolled="false"] .theme button { color: rgba(245, 246, 247, 0.6); }
body.has-dark-hero .hdr[data-scrolled="false"] .theme button[aria-pressed="true"] {
  background: rgba(245, 246, 247, 0.16);
  color: #FFFFFF;
}
body.has-dark-hero .hdr[data-scrolled="false"] .menu-btn {
  color: #FFFFFF;
  border-color: rgba(245, 246, 247, 0.28);
}
.hero-dark .wrap { position: relative; z-index: 2; }
.hero-dark-in {
  min-height: min(86vh, 820px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(4.5rem, 2rem + 9vw, 8rem) clamp(2.5rem, 1rem + 4vw, 4rem);
}
.hero-dark h1 { color: #FFFFFF; max-width: 16ch; }
.hero-dark .lead { color: #C9CCD1; max-width: 50ch; margin-top: var(--s4); }
.hero-dark .actions { margin-top: var(--s5); }
.hero-dark .btn-ghost {
  color: #F5F6F7;
  border-color: rgba(245, 246, 247, 0.28);
  background: transparent;
}
.hero-dark .btn-ghost:hover {
  border-color: rgba(245, 246, 247, 0.6);
  background: rgba(245, 246, 247, 0.06);
}
.hero-dark .eyebrow { color: #93989F; }
.hero-dark .note { color: #93989F; }

/* The topology graphic. Decorative, so aria-hidden and pointer-events none. */
.hero-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(100deg, transparent 34%, #000 72%);
  mask-image: linear-gradient(100deg, transparent 34%, #000 72%);
}
.hero-art svg { width: 100%; height: 100%; }
.hero-art .n { fill: #5B93F2; }
.hero-art .n-dim { fill: #2C3138; }
.hero-art .e { stroke: #2C3138; stroke-width: 1; fill: none; }
.hero-art .e-a { stroke: #5B93F2; stroke-width: 1; fill: none; opacity: 0.75; }
@media (prefers-reduced-motion: no-preference) {
  .hero-art .pulse { animation: pulse 4.5s var(--ease-soft) infinite; }
  .hero-art .pulse:nth-of-type(2) { animation-delay: 1.5s; }
  .hero-art .pulse:nth-of-type(3) { animation-delay: 3s; }
}
@keyframes pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* Stat rail — sits at the foot of the hero. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: clamp(3rem, 1rem + 5vw, 5rem);
  padding-top: var(--s4);
  border-top: 1px solid rgba(245, 246, 247, 0.14);
}
.stat .v {
  display: block;
  white-space: nowrap;
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  font-weight: 500;
}
.stat .k {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--t-small);
  color: #93989F;
}
@media (max-width: 620px) {
  .stats { grid-template-columns: 1fr; row-gap: var(--s3); }
  .stat { display: flex; align-items: baseline; gap: 0.8rem; }
  .stat .k { margin-top: 0; }
}

/* --- Client rail ---------------------------------------------------------- */

.rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s6);
  list-style: none;
  padding: 0;
}
.rail li {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink-3);
}

/* --- Quotes --------------------------------------------------------------- */

.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.quote-card { border-top: 2px solid var(--ink); padding-top: var(--s3); }
.quote-card blockquote { font-size: var(--t-h4); line-height: 1.4; color: var(--ink); letter-spacing: -0.015em; }
.quote-card figcaption { margin-top: var(--s3); font-size: var(--t-small); color: var(--ink-3); }
.quote-card figcaption b { display: block; color: var(--ink); font-weight: 500; }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; row-gap: var(--s4); } }

/* --- Placeholder guard ---------------------------------------------------
   Anything still awaiting real content is loud on purpose. `npm`-free check:
   tools/check-placeholders.sh greps for data-placeholder before deploy.    */

[data-placeholder] {
  position: relative;
  outline: 2px dashed #B3261E;
  outline-offset: 6px;
  border-radius: var(--r-sm);
}
[data-placeholder]::before {
  content: "PLACEHOLDER — replace before deploy";
  position: absolute;
  top: -0.75rem;
  left: 0;
  transform: translateY(-100%);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #FFFFFF;
  background: #B3261E;
  padding: 0.2rem 0.45rem;
  border-radius: 3px;
  white-space: nowrap;
}

/* --- Editorial list — the replacement for cards --------------------------- */

.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 22ch) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule);
}
.row .idx { padding-top: 0.35rem; }
.row h3 { font-size: var(--t-h4); }
.row p { color: var(--ink-3); max-width: 56ch; }

@media (max-width: 760px) {
  .row { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .row p { grid-column: 2; }
}

/* --- Four-step sequence --------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  border-top: 1px solid var(--rule);
}
.step { padding-top: var(--s3); border-top: 2px solid var(--ink); margin-top: -1px; }
.step:nth-child(n+2) { border-top-color: var(--rule-2); }
.step h3 { font-size: var(--t-h4); margin-bottom: var(--s1); }
.step p { color: var(--ink-3); font-size: var(--t-small); }
.step .idx { display: block; margin-bottom: var(--s2); }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s4); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* --- Stack list (understated tech credits) -------------------------------- */

.stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  list-style: none;
  padding: 0;
  color: var(--ink-3);
  font-size: var(--t-small);
}

/* --- Definition pairs ----------------------------------------------------- */

.defs { display: grid; gap: var(--s4); }
.def { border-top: 1px solid var(--rule); padding-top: var(--s3); }
.def h3 { font-size: var(--t-h4); margin-bottom: var(--s1); }
.def p { color: var(--ink-3); font-size: var(--t-small); }
.defs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
.defs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
@media (max-width: 860px) { .defs-3, .defs-2 { grid-template-columns: 1fr; } }

/* --- Figures (line diagrams) ---------------------------------------------- */

.figure { color: var(--ink); }
.figure svg { width: 100%; height: auto; }
/* The diagram's 9px mono labels become illegible once the 960-unit viewBox
   is squeezed below ~680px. Let it scroll inside its own box instead of
   shrinking — and never let it widen the page. */
@media (max-width: 760px) {
  .figure { overflow-x: auto; }
  .figure svg { min-width: 660px; }
}
.figure figcaption {
  margin-top: var(--s3);
  font-size: var(--t-micro);
  font-family: 'Space Mono', ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.dgm-line   { stroke: var(--rule-2); stroke-width: 1; fill: none; }
.dgm-line-a { stroke: var(--accent); stroke-width: 1; fill: none; }
.dgm-node   { stroke: var(--rule-2); stroke-width: 1; fill: var(--bg); }
.dgm-node-a { stroke: var(--accent); stroke-width: 1; fill: var(--bg); }
.dgm-fill   { fill: var(--ink); }
.dgm-text   {
  fill: var(--ink-3);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dgm-text-a { fill: var(--accent); }

/* --- Quote / perspective -------------------------------------------------- */

.quote {
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 34ch;
}

/* --- Work entries --------------------------------------------------------- */

.entry {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--gutter);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.entry:first-child { border-top: 1px solid var(--rule); }
.entry h3 { font-size: var(--t-h3); }
.entry .eyebrow { margin-bottom: var(--s2); }
.entry-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-top: var(--s3); }
.entry-meta span { font-size: var(--t-micro); color: var(--ink-4); font-family: 'Space Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 860px) { .entry { grid-template-columns: 1fr; row-gap: var(--s3); } }

/* --- Disclosure (FAQ) ----------------------------------------------------- */

.qa { border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  padding-block: var(--s3);
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-size: var(--t-h4);
  font-weight: 500;
  letter-spacing: -0.016em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--ink-4);
  border-bottom: 1.5px solid var(--ink-4);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 240ms var(--ease);
}
.qa details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.qa .qa-body { padding-bottom: var(--s4); color: var(--ink-3); max-width: 66ch; }

/* --- Forms ---------------------------------------------------------------- */

.field { display: block; margin-bottom: var(--s3); }
.field > span {
  display: block;
  font-size: var(--t-small);
  color: var(--ink-2);
  margin-bottom: 0.45rem;
  font-weight: 500;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  color: var(--ink);
  font-size: var(--t-small);
  transition: border-color 160ms var(--ease-soft), box-shadow 160ms var(--ease-soft);
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.field .err { display: none; margin-top: 0.4rem; font-size: var(--t-micro); color: #B3261E; }
[data-theme="dark"] .field .err { color: #F2857C; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: #B3261E; }
.field[data-invalid="true"] .err { display: block; }

.check { display: flex; gap: 0.65rem; align-items: flex-start; font-size: var(--t-small); color: var(--ink-3); }
.check input { margin-top: 0.28rem; width: 15px; height: 15px; accent-color: var(--accent-fill); flex: none; }

/* --- Footer --------------------------------------------------------------- */

.ftr { border-top: 1px solid var(--rule); padding-block: var(--s6) var(--s4); }
.ftr-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr));
  gap: var(--gutter);
  row-gap: var(--s5);
}
.ftr h4 {
  font-size: var(--t-micro);
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 400;
  margin-bottom: var(--s2);
}
.ftr ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.ftr ul a { text-decoration: none; color: var(--ink-3); font-size: var(--t-small); transition: color 160ms var(--ease-soft); }
.ftr ul a:hover { color: var(--ink); }
.ftr-base {
  margin-top: var(--s6);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2);
  font-size: var(--t-micro);
  color: var(--ink-4);
}
@media (max-width: 860px) { .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Interior pages ------------------------------------------------------- */

.page-head { padding-block: clamp(3.5rem, 1rem + 8vw, 7rem) clamp(2rem, 1rem + 3vw, 3.5rem); }
.page-head .eyebrow { margin-bottom: var(--s3); }
.page-head .lead { margin-top: var(--s4); }

/* Capability / long-form entry — same skeleton as .entry, more room. */
.cap {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--gutter);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.cap:first-child { border-top: 1px solid var(--rule); }
.cap h3 { font-size: var(--t-h3); }
.cap .idx { display: block; margin-bottom: var(--s2); }
@media (max-width: 860px) { .cap { grid-template-columns: 1fr; row-gap: var(--s3); } }

.ticks { list-style: none; padding: 0; display: grid; gap: 0.55rem; margin-top: var(--s3); }
.ticks li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--t-small);
  color: var(--ink-3);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.panel {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--bg);
}

/* Vertical sequence — the approach page's expanded stages. */
.seq { border-top: 1px solid var(--rule); }
.seq > div {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--gutter);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.seq h3 { font-size: var(--t-h3); margin-top: var(--s2); }
@media (max-width: 860px) { .seq > div { grid-template-columns: 1fr; row-gap: var(--s2); } }

.note { font-size: var(--t-small); color: var(--ink-4); }

/* --- Legal ---------------------------------------------------------------- */

.legal { max-width: 68ch; }
.legal section { margin-top: var(--s5); }
.legal h2 {
  font-size: var(--t-h4);
  margin-bottom: var(--s2);
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
}
.legal h2 .idx { flex: none; }
.legal p + p, .legal ul + p { margin-top: 0.9em; }
.legal code {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.86em;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 0.1em 0.36em;
}
.legal ul { margin-top: 0.9em; padding-left: 1.1rem; display: grid; gap: 0.5rem; }
.legal li { color: var(--ink-3); }

/* --- Result panel (assessment tool) --------------------------------------- */

.result { display: none; }
.result[data-state="on"] { display: block; }
.result-kv { display: grid; gap: var(--s3); margin-top: var(--s4); }
.result-kv > div { border-top: 1px solid var(--rule); padding-top: var(--s2); }
.result-kv h4 {
  font-size: var(--t-micro);
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 400;
  margin-bottom: 0.5rem;
}
.spin {
  width: 14px; height: 14px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Motion --------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --- Utilities ------------------------------------------------------------ */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bg);
  color: var(--ink);
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  z-index: 100;
}
.skip:focus { left: var(--gutter); top: 0.75rem; }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hr { border: 0; border-top: 1px solid var(--rule); }
.mt-1 { margin-top: var(--s1); } .mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); }

/* ==========================================================================
   Density sections — industries, calculator, comparison, founder
   ========================================================================== */

/* --- Tiles: capability grid ----------------------------------------------
   A single-pixel grid drawn with gap + background, so cells read as one
   table rather than as floating cards.                                     */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.tile { background: var(--bg); padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); }
.tile .idx { display: block; margin-bottom: var(--s3); }
.tile h3 { font-size: var(--t-h4); margin-bottom: var(--s2); }
.tile p { font-size: var(--t-small); color: var(--ink-3); }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tiles { grid-template-columns: 1fr; } }

/* --- Industries ----------------------------------------------------------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-bottom: var(--s5);
}
.tabs button {
  padding: 0.55rem 1rem;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-full, 999px);
  background: transparent;
  color: var(--ink-3);
  font-size: var(--t-small);
  cursor: pointer;
  white-space: nowrap;
  transition: color 160ms var(--ease-soft), background 160ms var(--ease-soft),
              border-color 160ms var(--ease-soft);
}
.tabs button:hover { color: var(--ink); border-color: var(--ink-4); }
.tabs button[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.panel-ind[hidden] { display: none; }
.ind-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); margin-bottom: var(--s4); }
.ind-head h3 { font-size: var(--t-h3); }

.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.case { border-top: 1px solid var(--rule); padding-top: var(--s3); }
.case .eyebrow { margin-bottom: var(--s2); }
.case h4 { font-size: var(--t-h4); margin-bottom: var(--s2); }
.case p { font-size: var(--t-small); color: var(--ink-3); }
.shift {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--s3);
  font-size: var(--t-micro);
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.shift .from { color: var(--ink-4); text-decoration: line-through; }
.shift .to { color: var(--accent); }
@media (max-width: 860px) { .cases { grid-template-columns: 1fr; row-gap: var(--s4); } }

.built {
  margin-top: var(--s5);
  padding: var(--s3) var(--s4);
  border-left: 2px solid var(--accent);
  background: var(--bg-2);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.built b { color: var(--ink); font-weight: 500; }

/* --- Calculator ----------------------------------------------------------- */

.calc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 5rem); }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }

.slider { margin-bottom: var(--s5); }
.slider-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.slider-top label { font-size: var(--t-body); color: var(--ink); font-weight: 500; }
.slider-top output {
  font-family: 'Space Mono', monospace;
  font-size: 1.125rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.slider p { font-size: var(--t-small); color: var(--ink-3); margin-top: 0.35rem; }
.slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  margin-top: var(--s3);
  background: var(--rule-2);
  border-radius: 2px;
  cursor: pointer;
}
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent-fill);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent-fill);
  cursor: grab;
}
.slider input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent-fill);
  border: 3px solid var(--bg);
  cursor: grab;
}

.readout { border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--bg-2); }
.readout .big {
  display: block;
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.readout .unit { display: block; margin-top: var(--s2); color: var(--ink-3); font-size: var(--t-small); }
.readout hr { margin-block: var(--s4); }

/* --- Comparison ----------------------------------------------------------- */

.cmp-wrap { overflow-x: auto; }
.cmp { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; }
.cmp th, .cmp td { padding: var(--s3) var(--s2); border-bottom: 1px solid var(--rule); vertical-align: top; font-size: var(--t-small); }
.cmp thead th {
  font-family: 'Space Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 400;
  border-bottom-color: var(--rule-2);
}
.cmp tbody th { color: var(--ink); font-weight: 500; width: 22%; }
.cmp td { color: var(--ink-3); }
.cmp .us { background: var(--accent-wash); color: var(--ink-2); }
.cmp thead .us { color: var(--accent); font-weight: 700; }

/* --- Founder -------------------------------------------------------------- */

.founder { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--gutter); align-items: start; }
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; } }
.avatar {
  width: 92px; height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--bg);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: var(--s3);
}