/*
 * Parvati Axis website (warm theme v1.0, handoff v3.3: THEME-WARM-v1.0.md) — shared tokens and components.
 *
 * Source of truth for the visual language (direction 1c "Mixed", Claude Design
 * handoff v3). tools/build.py concatenates this file with src/css/pages/*.css
 * into site/assets/css/site.css. Pages carry NO inline style="" attributes:
 * the build refuses them, which is what lets the CSP drop 'unsafe-inline'.
 */

/* ---- Fonts (self-hosted, OFL — see assets/fonts/OFL.txt) ---------------- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plex-sans-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/plex-sans-400-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plex-sans-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plex-sans-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plex-mono-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plex-mono-500-normal.woff2") format("woff2"); }

/* ---- Tokens -------------------------------------------------------------- */
:root {
  --bg: #f4f1ea;
  --surface-raised: #faf7f1;
  --text: #24221e;
  --text-2: #3e3a33;
  --text-3: #6b6457;
  --text-footer: #57524a;
  --teal: #0f6e7e;
  --teal-700: #0a5260;
  --teal-800: #073f4a;
  --tint: #e8ede4;
  --tint-rule: #cdd8c8;
  --panel-text: #33392f;
  --divider: #ddd6c8;
  --dot: #d9d1c2;
  --input-border: #8a8170; /* 3.9:1 on the white field, 3.4:1 on bg: meets the 3:1 floor for control edges (WCAG 1.4.11). Was #c9c1b2, 1.8:1. */
  --shadow-sm: 0 1px 2px rgba(45, 43, 43, .14);
  --shadow-md: 0 3px 10px rgba(45, 43, 43, .16);
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --pad-section: clamp(64px, 8vw, 104px);
  --container: 1240px;
  /* Warm theme v1.0 (handoff v3.3): softer corners. */
  --radius-card: 12px;
  --radius-control: 8px;
}

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; }
strong { font-weight: 600; color: var(--text); }
a { color: var(--teal-700); text-decoration: none; }
a:hover { color: var(--teal); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
img { max-width: 100%; display: block; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--teal); color: #fff; padding: 8px 14px; border-radius: var(--radius-control); z-index: 10; }
.skip:focus { left: 8px; color: #fff; }

/* ---- Layout -------------------------------------------------------------- */
.wrap { max-width: var(--container); margin: 0 auto; padding-left: 28px; padding-right: 28px; }
@media (max-width: 480px) { .wrap { padding-left: 16px; padding-right: 16px; } }
.section { border-top: 1px solid var(--divider); }
.section > .wrap { padding-top: var(--pad-section); padding-bottom: var(--pad-section); display: flex; flex-direction: column; gap: 32px; }
.section.flush { border-top: 0; }
.stack-sm { display: flex; flex-direction: column; gap: 16px; }
.stack { display: flex; flex-direction: column; gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px 48px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; }

/* ---- Type ---------------------------------------------------------------- */
.kicker { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-700); }
.h1 { font-size: clamp(42px, 5.6vw, 72px); line-height: 1.03; letter-spacing: -.03em; max-width: 17ch; text-wrap: balance; }
.h2 { font-size: clamp(32px, 4vw, 46px); line-height: 1.08; letter-spacing: -.02em; }
.mw-22 { max-width: 22ch; }
.mw-24 { max-width: 24ch; }
.h2-sm { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.02em; }
.h2-close { font-size: clamp(36px, 5vw, 60px); line-height: 1.04; letter-spacing: -.03em; max-width: 18ch; text-wrap: balance; }
.h3 { font-size: 24px; line-height: 1.2; letter-spacing: -.01em; }
.h3-stage { font-size: 22px; line-height: 1.25; }
.lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; max-width: 56ch; color: var(--text-2); text-wrap: pretty; }
.body { font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.body-lg { font-size: 17px; line-height: 1.6; color: var(--text-2); max-width: 60ch; }
.muted { color: var(--text-3); }
.face { font-size: 15.5px; color: var(--text-3); font-style: italic; }
.outcome { font-size: 16px; font-weight: 500; color: var(--teal-700); }
.num { font-family: var(--mono); font-size: 13px; color: var(--teal); letter-spacing: .04em; }
.label { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.accent { color: var(--teal); }
.note { font-size: 14.5px; color: var(--text-3); }

/* ---- Buttons and tags ---------------------------------------------------- */
.btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn { display: inline-block; border: 1px solid var(--teal); border-radius: var(--radius-control); padding: 13px 22px; font: 500 16px/1.2 var(--sans); cursor: pointer; text-align: center; }
.btn-fill { background: var(--teal); color: #fff; }
.btn-fill:hover { background: var(--teal-700); color: #fff; }
.btn-fill:active { background: var(--teal-800); color: #fff; }
.btn-line { background: transparent; color: var(--teal-700); }
.btn-line:hover { background: var(--tint); color: var(--teal-700); }
.btn-line:active { background: var(--tint-rule); }
.btn-sm { padding: 9px 16px; font-size: 15px; }
.tag { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--teal); color: var(--teal-700); border-radius: var(--radius-control); padding: 5px 9px; white-space: nowrap; }
.link-arrow { font-weight: 500; color: var(--teal-700); }
.mail { font-family: var(--mono); font-size: 15px; color: var(--teal-700); border-bottom: 1px solid var(--teal); padding-bottom: 2px; }

/* ---- Nav ----------------------------------------------------------------- */
/* Sticky header (content v3.10): the menu and "Book a 30-min call" stay on screen.
   Jump targets land below it via scroll-padding-top on html. */
html { scroll-padding-top: 96px; }
.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--divider); background: var(--bg); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 14px; padding-bottom: 14px; }
.site-nav .nav-links { margin-left: auto; }
.wordmark { display: flex; align-items: center; gap: 10px; color: var(--text); }
.wordmark-mark { flex: none; display: block; }
.wordmark-text { display: flex; align-items: baseline; gap: 8px; }
.wordmark:hover { color: var(--text); }
.wordmark-name { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.wordmark-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--teal-700); }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; font-size: 15px; }
.nav-link { color: var(--text); padding: 8px 0; border-bottom: 2px solid transparent; }
.nav-link:hover { color: var(--teal); }
.nav-link[aria-current="page"] { color: var(--teal-700); font-weight: 500; border-bottom-color: var(--teal); }
.nav-sep { width: 1px; height: 20px; background: var(--divider); }
@media (max-width: 720px) {
  .nav-sep { display: none; }
  html { scroll-padding-top: 116px; }
  /* Phone: row 1 = wordmark + Book; row 2 = the page links in one swipeable row. */
  .site-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding-top: 10px; padding-bottom: 0; }
  .wordmark-sub { display: none; }
  .site-nav .nav-links { grid-column: 1 / -1; order: 3; margin: 0 -16px; padding: 0 16px; flex-wrap: nowrap; overflow-x: auto; gap: 20px; scrollbar-width: none; white-space: nowrap; }
  .site-nav .nav-links::-webkit-scrollbar { display: none; }
  .nav-cta { padding: 7px 12px; font-size: 14px; }
}

/* ---- Footer -------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--divider); }
.footer-grid { padding-top: 40px; padding-bottom: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 28px 40px; font-size: 14px; line-height: 1.55; color: var(--text-footer); }
.footer-col { display: flex; flex-direction: column; gap: 4px; }
.footer-brand { gap: 8px; }
.footer-name { font-size: 17px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; align-content: flex-start; }
.mono-sm { font-family: var(--mono); font-size: 12.5px; }

/* ---- Hero ---------------------------------------------------------------- */
.hero { padding-top: clamp(56px, 8vw, 104px); padding-bottom: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 48px; align-items: center; }
.hero-solo { grid-template-columns: minmax(0, 1fr); }
.hero-text { display: flex; flex-direction: column; gap: 24px; }
.proof-line { font-size: 15px; color: var(--teal-700); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }

/* Screenshot frame (window chrome around a console capture) */
.frame { background: var(--surface-raised); border: 1px solid var(--divider); border-radius: var(--radius-card); padding: 10px; box-shadow: var(--shadow-sm); }
.frame-dots { display: flex; gap: 6px; padding: 2px 4px 10px; }
.frame-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--dot); }
.frame-shot { aspect-ratio: 16 / 10; width: 100%; border-radius: var(--radius-control); object-fit: contain; background: var(--bg); }
.frame-shot.r43 { aspect-ratio: 4 / 3; }
img.frame-shot { display: block; height: auto; }
/* Product screens: enlarge, numbered highlights, caption (content v3.2) */
.shot { margin: 0; }
.shot-box { position: relative; }
.shot-pin { position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; background: var(--teal); color: #fff; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); font-family: var(--mono); font-size: 12px; line-height: 18px; text-align: center; pointer-events: none; }
.pin-gov-1 { left: 74%; top: 17.4%; }
.pin-gov-2 { left: 53%; top: 27.2%; }
.pin-gov-3 { left: 86%; top: 47.2%; }
.pin-ssp-1 { left: 25.8%; top: 49.9%; }
.pin-ssp-2 { left: 25.6%; top: 80.3%; }
.pin-ssp-3 { left: 86.5%; top: 49.9%; }
.pin-pol-1 { left: 84.5%; top: 5.7%; }
.pin-pol-2 { left: 73.4%; top: 16.4%; }
.pin-pol-3 { left: 95.1%; top: 16.4%; }
.shot-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 4px 0; font-family: var(--mono); font-size: 12.5px; color: var(--text-3); }
img.shot-img { aspect-ratio: auto; }
.shot-hint { display: none; }
.zoom-ready .hint-touch { display: inline; }
@media (hover: hover) and (pointer: fine) { .zoom-ready .hint-touch { display: none; } .zoom-ready .hint-fine { display: inline; } }
.shot-box.zoomable { overflow: hidden; border-radius: var(--radius-control); cursor: zoom-in; }
.shot-box.zoomable:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.zoomable .shot-img { transition: transform .2s ease; }
.shot-box.zoomed { cursor: zoom-out; touch-action: none; }
.zoomed .shot-pin { display: none; }
@media (prefers-reduced-motion: reduce) { .zoomable .shot-img { transition: none; } }
.shot-lens { position: absolute; z-index: 2; width: 200px; height: 200px; box-sizing: border-box; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid var(--teal); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); background-color: #fff; background-repeat: no-repeat; background-origin: border-box; pointer-events: none; display: none; }
.shot-lens.on { display: block; }
.shot-legend { list-style: none; margin: 0; padding: 10px 4px 2px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
@media (max-width: 600px) { .shot-pin { width: 16px; height: 16px; font-size: 9.5px; line-height: 13px; border-width: 1.5px; } }
.shot-legend li { display: flex; gap: 10px; align-items: baseline; }
.shot-n { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--teal); color: #fff; font-family: var(--mono); font-size: 11.5px; line-height: 20px; text-align: center; }
.frame-empty { display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--text-3); border: 1px dashed var(--divider); }

/* ---- Proof strip --------------------------------------------------------- */
.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); border-top: 1px solid var(--teal); border-bottom: 1px solid var(--divider); }
.proof-item { padding: 20px 24px 22px 0; display: flex; flex-direction: column; gap: 6px; }
.proof-item .t { font-size: 16px; line-height: 1.4; font-weight: 500; }
.proof-item.lead-item .t { font-size: 19px; line-height: 1.35; font-weight: 600; color: var(--teal-700); }

/* ---- Tinted panel (at most one per section) ------------------------------ */
.tint { background: var(--tint); border-radius: var(--radius-card); padding: clamp(20px, 3vw, 36px); color: var(--panel-text); }
.tint-rows { padding-top: 6px; padding-bottom: 6px; padding-left: clamp(16px, 2.4vw, 28px); padding-right: clamp(16px, 2.4vw, 28px); display: flex; flex-direction: column; }
.outline { border: 1px solid var(--teal); border-radius: var(--radius-card); padding: clamp(28px, 4vw, 48px); }

/* "Sound familiar?" rows: quote | answer | tag. Locked 3-column grid on
   desktop so the tag never wanders (handoff v3.1 IMPROVEMENTS 1.2); stacked below 960px. */
.say-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px 0; border-bottom: 1px solid var(--tint-rule); color: var(--text); }
.say-row:last-child { border-bottom: 0; }
.say-row:hover { color: var(--teal-700); }
.say-row .q { font-size: 20px; font-weight: 500; line-height: 1.35; }
.say-row .a { font-size: 16px; line-height: 1.55; color: var(--panel-text); }
.say-row .tag { justify-self: start; }
@media (min-width: 960px) {
  .say-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 190px; gap: 8px 32px; align-items: baseline; }
  .say-row .tag { justify-self: end; }
}

/* ---- Cards --------------------------------------------------------------- */
.card { border: 1px solid var(--divider); border-top: 2px solid var(--teal); border-radius: var(--radius-card); padding: 26px; display: flex; flex-direction: column; gap: 14px; color: var(--text); background: var(--bg); }
a.card:hover { border-color: var(--teal); box-shadow: var(--shadow-sm); color: var(--text); }
.card .body { flex: 1; }
.card-plain { border-top-width: 1px; }

/* ---- Numbered rows ------------------------------------------------------- */
.rows { display: flex; flex-direction: column; }
.rows.ruled { border-top: 1px solid var(--divider); }
.row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--divider); }
.row.wide { grid-template-columns: 40px minmax(0, 1fr); padding: 12px 0; align-items: baseline; }
.row .num { padding-top: 4px; }
.row-title { font-size: 17px; font-weight: 600; }
.row-body { font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
.rows-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 40px; border-top: 1px solid var(--divider); }

/* Columns with a teal top rule (stages, steps) */
.ruled-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 40px; }
.ruled-col { border-top: 1px solid var(--teal); padding: 22px 0 8px; display: flex; flex-direction: column; gap: 12px; }
.ruled-col .head { display: flex; align-items: baseline; gap: 12px; }

/* "You face / We do / You get" */
.fdg { display: flex; flex-direction: column; }
.fdg-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--divider); }
.fdg-row:first-child { border-top: 1px solid var(--divider); }
.fdg-row .label { padding-top: 3px; }
.fdg-row p { font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.fdg-row.get p { color: var(--teal-700); font-weight: 500; }
@media (max-width: 480px) { .fdg-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* Layer / chapter rows: heading column + detail column */
.layer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px 48px; padding: 40px 0; border-top: 1px solid var(--divider); scroll-margin-top: 24px; }
.layer:first-child { border-top: 0; padding-top: 8px; }
.layer-head { display: flex; flex-direction: column; gap: 10px; }

/* Anchor index / chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--divider); border-radius: var(--radius-control); padding: 6px 10px; color: var(--teal-700); }
.chip:hover { border-color: var(--teal); background: var(--tint); }

/* Pull line with a teal left rule */
.pull { border-left: 2px solid var(--teal); padding-left: 20px; font-size: 19px; line-height: 1.5; font-weight: 500; color: var(--text); }

/* Simple data table with hairline rows */
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); font-weight: 400; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--teal); }
.table td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--divider); vertical-align: top; color: var(--text-2); }
.table td:first-child { font-family: var(--mono); font-size: 13px; color: var(--teal); width: 40px; }
.table td.name { color: var(--text); font-weight: 500; }
.table-wrap { overflow-x: auto; }

/* ---- Close --------------------------------------------------------------- */
.close > .wrap { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(72px, 9vw, 120px); gap: 24px; align-items: flex-start; }

/* ---- Forms --------------------------------------------------------------- */
.form-panel { background: var(--surface-raised); border: 1px solid var(--divider); border-radius: var(--radius-card); padding: clamp(20px, 3vw, 32px); }
.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 500; }
.field input, .field select, .field textarea { font: 400 16px/1.4 var(--sans); color: var(--text); background: #fff; border: 1px solid var(--input-border); border-radius: var(--radius-control); padding: 11px 12px; width: 100%; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--teal); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: #9a2a1c; font-size: 15px; }
[hidden] { display: none !important; }

/* ---- Prose (privacy, 404) ------------------------------------------------ */
.prose { max-width: 70ch; display: flex; flex-direction: column; gap: 16px; font-size: 16px; line-height: 1.65; color: var(--text-2); }
.prose h2 { font-size: 22px; line-height: 1.3; color: var(--text); margin-top: 16px; }
.prose ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.footer-bar { padding-top: 16px; padding-bottom: 32px; border-top: 1px solid var(--divider); font-size: 13.5px; color: var(--text-footer); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }

/* "The service" / "the platform" line under a hero sub (handoff v3.1 CONTENT E) */
.role-line { font-size: 16px; font-weight: 500; color: var(--teal-700); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.role-line .link-arrow { border-bottom: 1px solid var(--teal); }
.role-line-muted { font-weight: 400; color: var(--text-3); }

/* ---- Legal pages (Notices, Privacy; handoff v3.3 Notices layout) ---------- */
.legal-hero { padding-top: clamp(56px, 8vw, 96px); padding-bottom: 32px; display: flex; flex-direction: column; gap: 16px; }
.legal-h1 { font-size: clamp(40px, 5vw, 60px); line-height: 1.04; letter-spacing: -.03em; }
.legal-rows { border-top: 1px solid var(--text-3); margin-bottom: clamp(64px, 8vw, 104px); max-width: 820px; }
.legal-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px 40px; padding: 28px 0; border-bottom: 1px solid var(--divider); }
.legal-row h2 { font-size: 20px; line-height: 1.3; }
.legal-body { grid-column: span 2; max-width: 62ch; color: var(--text-2); display: flex; flex-direction: column; gap: 10px; line-height: 1.65; }
.legal-body ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 720px) { .legal-body { grid-column: auto; } }

/* ---- ai-ml-ops.css ---- */
.ai-hero { padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(48px, 6vw, 72px); display: flex; flex-direction: column; gap: 24px; }
.ai-lead { max-width: 60ch; }
.ai-h2 { font-size: clamp(30px, 3.8vw, 44px); line-height: 1.08; letter-spacing: -.02em; }
.ai-mw16 { max-width: 16ch; }
.section > .wrap.ai-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px 64px; }
.section > .wrap.ai-gap { gap: 28px; }
.ai-p { font-size: 17px; line-height: 1.65; max-width: 58ch; }
.ai-qs { display: flex; flex-direction: column; border-top: 1px solid var(--divider); }
.ai-q { padding: 12px 0; border-bottom: 1px solid var(--divider); font-size: 18px; font-weight: 500; display: flex; gap: 14px; align-items: baseline; }
.ai-card { padding: 24px; gap: 12px; }
.ai-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; }
.ai-option { border: 1px solid var(--teal); border-radius: var(--radius-card); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.ai-option .num { letter-spacing: .06em; }
.ai-option-p { font-size: 16px; line-height: 1.6; color: var(--text-2); }
.ai-either { background: var(--tint); border-radius: var(--radius-card); padding: 20px 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px 32px; align-items: baseline; font-size: 16px; color: var(--panel-text); }
.ai-either-label { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--teal-700); }
.ai-links { display: flex; flex-direction: column; border-top: 1px solid var(--divider); }
.ai-link { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--divider); color: var(--text); font-size: 16px; }
.ai-link:hover { color: var(--teal-700); }
.ai-link-t { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--teal); padding-top: 3px; }
.ai-close-p { font-size: 18px; color: var(--text-2); max-width: 60ch; }

/* ---- company.css ---- */
.co-hero { padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(48px, 6vw, 72px); display: flex; flex-direction: column; gap: 24px; }
.co-h1 { max-width: 16ch; }
.co-lead { max-width: 58ch; }
.section > .co-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px 64px; }
.co-h2 { font-size: clamp(30px, 3.8vw, 44px); line-height: 1.08; letter-spacing: -.02em; }
.co-h2-narrow { max-width: 16ch; }
.co-why { font-size: 18px; line-height: 1.65; color: var(--text-2); max-width: 58ch; align-self: end; }
.section > .co-beliefs-wrap { gap: 28px; }
.co-beliefs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px 32px; padding: clamp(20px, 3vw, 32px); }
.co-belief { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--teal); padding-top: 16px; }
.co-belief-t { font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.co-belief-d { font-size: 15.5px; line-height: 1.55; color: var(--panel-text); }
.co-practices { display: flex; flex-direction: column; border-top: 1px solid var(--teal); }
.co-practice { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--divider); color: var(--text); align-items: baseline; }
.co-practice:hover { color: var(--teal-700); }
.co-practice-t { font-size: 17px; font-weight: 600; }
.co-practice-d { font-size: 15.5px; color: var(--text-2); }
.section > .co-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
.co-card { border: 1px solid var(--divider); border-radius: var(--radius-card); padding: clamp(28px, 4vw, 40px); display: flex; flex-direction: column; gap: 14px; }
.co-card-teal { border-color: var(--teal); }
.co-h2-card { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: -.02em; }
.co-card-body { font-size: 16.5px; line-height: 1.6; color: var(--text-2); }
.co-self-start { align-self: flex-start; }
.co-details { display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.55; }
.co-details-name { font-weight: 600; }
.co-details-cin { font-family: var(--mono); font-size: 14px; color: var(--text-2); }
.co-details-muted { color: var(--text-2); }
@media (max-width: 480px) { .co-practice { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
/* v2.7 B2: three practices, then two foundations. */
.co-group { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-700); padding: 14px 0 4px; }
.co-group-2 { padding-top: 28px; }
.co-people { border-top: 1px solid var(--teal); }
.co-person { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--divider); align-items: baseline; }
.co-person-n { font-size: 20px; font-weight: 600; }
.co-person-r { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-700); }
.co-careers-head { gap: 18px; }
.co-careers-rows { border-top: 1px solid var(--teal); }
.co-careers-label { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-700); padding: 16px 0 4px; }

/* ---- contact.css ---- */
.ct-hero { padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(40px, 5vw, 56px); display: flex; flex-direction: column; gap: 24px; }
.ct-lead { max-width: 58ch; }
.ct-ways { padding-bottom: clamp(56px, 7vw, 88px); }
.ct-way { padding: 24px; gap: 10px; scroll-margin-top: 24px; }
.ct-way-k { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--teal); }
.ct-way-t { font-size: 22px; line-height: 1.2; }
.ct-way-d { font-size: 15px; line-height: 1.55; color: var(--text-2); flex: 1; }
.section > .ct-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 40px 64px; align-items: start; }
.ct-h2 { font-size: clamp(30px, 3.8vw, 44px); line-height: 1.08; letter-spacing: -.02em; max-width: 14ch; }
.ct-intro { font-size: 16.5px; color: var(--text-2); max-width: 44ch; }
.ct-addresses { display: flex; flex-direction: column; border-top: 1px solid var(--divider); margin-top: 12px; }
.ct-address { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--divider); align-items: baseline; font-size: 15px; color: var(--text-2); }
.ct-address a { font-family: var(--mono); font-size: 14px; }
.ct-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px; }
.ct-submit { padding-left: 26px; padding-right: 26px; }
.ct-sent { border: 1px solid var(--teal); border-radius: var(--radius-card); padding: clamp(24px, 3vw, 36px); background: var(--tint); display: flex; flex-direction: column; gap: 12px; }
.ct-sent-t { font-size: 26px; line-height: 1.25; }
@media (max-width: 480px) { .ct-address { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.ct-form { padding: clamp(24px, 3vw, 36px); }
.ct-privacy { margin-top: -4px; }
.ct-way-note { font-size: 14px; color: var(--text-3); }

/* ---- engineering.css ---- */
.eng-hero { padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(48px, 6vw, 72px); display: flex; flex-direction: column; gap: 24px; }
.eng-h1 { max-width: 16ch; }
.eng-lead { max-width: 60ch; }
.eng-h2 { font-size: clamp(30px, 3.8vw, 44px); line-height: 1.08; letter-spacing: -.02em; }
.eng-mw18 { max-width: 18ch; }
.section > .wrap.eng-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px 64px; align-items: end; }
.section > .wrap.eng-gap { gap: 28px; }
.section > .wrap.eng-gap24 { gap: 24px; }
.eng-p { font-size: 17px; line-height: 1.65; color: var(--text-2); max-width: 58ch; }
.eng-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 48px; border-top: 1px solid var(--teal); }
.eng-cap { padding: 24px 0; border-bottom: 1px solid var(--divider); display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
.eng-cap .num { padding-top: 6px; }
.eng-cap-text { display: flex; flex-direction: column; gap: 6px; }
.eng-steps { background: var(--tint); border-radius: var(--radius-card); padding: clamp(20px, 3vw, 32px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 24px 32px; }
.eng-step { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--teal); padding-top: 16px; }
.eng-step-t { font-size: 22px; font-weight: 600; }
.eng-step-d { font-size: 15.5px; line-height: 1.55; color: var(--panel-text); }
.eng-changes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px 40px; }
.eng-change { border-top: 1px solid var(--divider); padding-top: 14px; font-size: 19px; font-weight: 500; line-height: 1.35; }
.eng-close-p { font-size: 18px; color: var(--text-2); max-width: 60ch; }

/* ---- iip.css ---- */
/* IIP Platform page */
.iip-hero { padding-bottom: clamp(48px, 6vw, 72px); }
.iip-h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.04; max-width: 16ch; }
.iip-h2 { font-size: clamp(30px, 3.8vw, 44px); }
.iip-mw-16 { max-width: 16ch; }
.iip-h3 { font-size: 21px; line-height: 1.2; }
.iip-gap-28 { gap: 28px !important; }
.iip-gap-24 { gap: 24px !important; }
.iip-gap-20 { display: flex; flex-direction: column; gap: 20px; }

/* The problem: heading left, text right, bottom-aligned */
.section > .wrap.iip-problem { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px 64px; align-items: end; }
.iip-problem-text { line-height: 1.65; max-width: 58ch; }

/* Four jobs */
.iip-jobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.iip-job { padding: 24px; gap: 12px; background: transparent; }
.iip-job-d { font-size: 15px; line-height: 1.55; color: var(--text-2); }
.iip-tagline { font-size: 18px; font-weight: 500; color: var(--teal-700); }

/* Three checks */
.iip-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px 32px; padding: clamp(20px, 3vw, 32px); }
.iip-check { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--teal); padding-top: 16px; }
.iip-check-n { font-weight: 500; font-size: 48px; line-height: 1; color: var(--teal); }
.iip-check-k { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--teal-700); }
.iip-check-t { font-size: 22px; font-weight: 600; color: var(--text); }
.iip-check-d { font-size: 15.5px; line-height: 1.55; color: var(--panel-text); }
.iip-after { font-size: 16px; color: var(--text-2); max-width: 62ch; }

/* Day in the life strip */
.iip-day { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); border-top: 1px solid var(--teal); }
.iip-day-step { padding: 18px 20px 18px 0; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--divider); }
.iip-day-t { font-size: 18px; font-weight: 600; }
.iip-day-d { font-size: 14.5px; line-height: 1.5; color: var(--text-2); }

/* Console: labelled rows + screenshot */
.section > .wrap.iip-console { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px 56px; align-items: start; }
.iip-krows { display: flex; flex-direction: column; border-top: 1px solid var(--divider); }
.iip-krow { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--divider); font-size: 15.5px; line-height: 1.55; }
.iip-k { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); padding-top: 3px; }
@media (max-width: 480px) { .iip-krow { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* Reports table */
.iip-reports { width: 100%; border-collapse: collapse; border-top: 1px solid var(--teal); }
.iip-reports th { text-align: left; font-family: var(--mono); font-size: 13px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 10px 16px 10px 0; border-bottom: 1px solid var(--divider); }
.iip-reports td { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--divider); vertical-align: baseline; font-size: 15px; color: var(--text-2); }
.iip-reports th:first-child, .iip-reports td:first-child { width: 48px; }
.iip-reports td:first-child { font-family: var(--mono); font-size: 13px; color: var(--teal); }
.iip-reports td:nth-child(2) { font-size: 16px; font-weight: 600; color: var(--text); width: 38%; }

/* How it's built */
.iip-built { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 48px; border-top: 1px solid var(--divider); }
.iip-built-item { padding: 18px 0; border-bottom: 1px solid var(--divider); display: flex; flex-direction: column; gap: 4px; }

.iip-close-p { font-size: 18px; color: var(--text-2); max-width: 60ch; }

/* Three checks as one connection, in order (handoff v3.1 IMPROVEMENTS 2.8) */
.iip-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; counter-reset: none; }
.iip-flow li { position: relative; border: 1px solid var(--divider); border-radius: var(--radius-card); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; background: var(--surface-raised); }
.iip-flow li:not(:last-child)::after { content: "→"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); color: var(--teal); font-size: 18px; }
.iip-flow-end { border-color: var(--teal) !important; }
.iip-flow-k { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--teal); }
.iip-flow-t { font-size: 17px; font-weight: 600; color: var(--text); }
@media (max-width: 1080px) {
  .iip-flow { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .iip-flow li:not(:last-child)::after { content: "↓"; right: auto; left: 22px; top: auto; bottom: -24px; transform: none; }
}
/* v2.7 B6: one heading that groups Evidence + How it's built. */
.iip-sec-intro.wrap { padding-bottom: 0; gap: 12px; }
.iip-sec-lead { font-size: 19px; line-height: 1.5; font-weight: 500; max-width: 56ch; }
#security-team + #evidence { border-top: 0; }
.iip-flow-fail { max-width: 70ch; }
.iip-day-shot { margin-top: 32px; max-width: 960px; }

/* ---- index.css ---- */
.start-panel { align-items: center; }
.start-note { margin-top: 12px; }
.underline-link { align-self: flex-start; border-bottom: 1px solid var(--teal); padding-bottom: 2px; }

/* Home v4 (content v4.0) */
.home-h1 { font-size: clamp(38px, 4.4vw, 58px); max-width: 16ch; }
.proof-big .proof-item { gap: 4px; padding-right: 28px; }
.proof-fig { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; color: var(--teal); }
.proof-big .t { font-size: 15px; line-height: 1.45; font-weight: 400; color: var(--text-2); }

.scale-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.scale-step { border: 1px solid var(--divider); border-top: 2px solid var(--teal); border-radius: var(--radius-card); background: var(--surface-raised); padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.scale-step .body { flex: 1; }
.scale-next { border-style: dashed; border-top-style: solid; background: transparent; }
.scale-status { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-700); }

/* One foundation: the one dark band on the page */
.stack-band { background: var(--teal-800); border-top: 0; color: #f4f1ea; }
.stack-band .kicker { color: #a9dbe0; }
.stack-band .h2 { color: #fff; }
.stack-lead { color: #d7e6e4; max-width: 62ch; }
.stack-layers { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.stack-layer { display: grid; grid-template-columns: 230px minmax(0, 1fr) auto; gap: 12px 24px; align-items: center; padding: 18px 22px; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--radius-card); background: rgba(255, 255, 255, .05); color: #fff; }
.stack-layer:hover { border-color: #a9dbe0; background: rgba(255, 255, 255, .09); color: #fff; }
.stack-w1 { margin: 0 9%; } .stack-w2 { margin: 0 6%; } .stack-w3 { margin: 0 3%; } .stack-w4 { margin: 0; border-color: rgba(255, 255, 255, .32); }
.stack-head { display: flex; gap: 12px; align-items: baseline; }
.stack-n { font-family: var(--mono); font-size: 13px; color: #a9dbe0; }
.stack-name { font-size: 18px; font-weight: 600; }
.stack-items { display: flex; flex-wrap: wrap; gap: 8px; }
.stack-chip { border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; padding: 4px 11px; font-size: 14px; color: #eef5f4; }
.stack-go { font-size: 14.5px; font-weight: 500; color: #a9dbe0; white-space: nowrap; }
.stack-practices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .2); }
.stack-built { grid-column: 1 / -1; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #a9dbe0; }
.stack-prac { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--radius-card); background: #f4f1ea; color: var(--text); }
.stack-prac:hover { background: #fff; color: var(--text); }
.stack-prac-t { font-size: 18px; font-weight: 600; color: var(--teal-700); }
.stack-prac-d { font-size: 15px; color: var(--text-2); }
.stack-band a:focus-visible { outline-color: #a9dbe0; }
@media (max-width: 860px) {
  .stack-layer { grid-template-columns: minmax(0, 1fr); margin: 0; }
}

.why-split { align-items: start; }
.why-rows { border-top: 1px solid var(--teal); }

/* Hero: the four layers, equal width, Governance first and strongest
   (option A of the 2026-10-18 hero alternatives canvas, chosen by the
   operator 2026-10-19; replaced option B, PR #38). "See it running" gallery
   and viewer below (content v4.3). */
.hero-layers { display: flex; flex-direction: column; gap: 8px; }
.hl-kicker { margin: 0 0 6px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-700); }
.hl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hl-row { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-radius: var(--radius-card); background: var(--surface-raised); border: 1px solid var(--divider); color: var(--text); }
.hl-row:hover { border-color: var(--teal); color: var(--text); }
.hl-top { background: var(--teal-800); border-color: var(--teal-800); color: #fff; padding-top: 18px; padding-bottom: 18px; }
.hl-top:hover { background: var(--teal-700); border-color: var(--teal-700); color: #fff; }
.hl-n { font-family: var(--mono); font-size: 13px; color: var(--teal-700); }
.hl-text { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hl-name { font-size: 18px; font-weight: 600; }
.hl-sub { font-size: 14px; color: var(--text-2); }
.hl-go { font-size: 18px; color: var(--teal); }
.hl-top .hl-n, .hl-top .hl-go { color: #a9dbe0; }
.hl-top .hl-sub { color: #d7e6e4; }
.hl-top:focus-visible { outline-color: var(--teal-800); }
.hl-base { margin: 6px 0 0; font-size: 14px; color: var(--text-2); }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.g-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 18px; border: 1px solid var(--divider); border-radius: var(--radius-card); background: var(--surface-raised); color: var(--text); }
.g-card:hover { border-color: var(--teal); color: var(--text); }
.g-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-control); border: 1px solid var(--divider); margin-bottom: 8px; background: #f3f4f6; }
.g-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.g-t { font-size: 18px; font-weight: 600; padding: 0 6px; }
.g-d { font-size: 15px; line-height: 1.5; color: var(--text-2); padding: 0 6px; flex: 1; }
.g-open { font-size: 14.5px; font-weight: 500; color: var(--teal-700); padding: 4px 6px 0; }

.viewer { width: min(1100px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: var(--radius-card); background: var(--bg); color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.viewer::backdrop { background: rgba(7, 25, 29, .62); }
.viewer-bar { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px 12px 20px; background: var(--bg); border-bottom: 1px solid var(--divider); }
.viewer-t { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-700); }
.viewer-close { font: 500 15px/1 var(--sans); color: var(--teal-700); background: transparent; border: 1px solid var(--teal); border-radius: var(--radius-control); padding: 8px 12px; cursor: pointer; }
.viewer-close:hover { background: var(--tint); }
.viewer-shot { padding: 16px 20px 20px; }
/* Fit the whole screen and its legend inside the viewer: the box hugs the
   image so the % pins and the zoom stay aligned. */
.viewer .shot-box { width: fit-content; max-width: 100%; margin: 0 auto; }
.viewer .shot-img { width: auto; max-width: 100%; max-height: calc(92vh - 250px); }
.viewer .shot-cap, .viewer .shot-legend { max-width: 760px; margin: 0 auto; }
.g-next { margin-top: 20px; font-size: 16.5px; color: var(--text-2); }

/* ---- it-foundation.css ---- */
.itf-hero { padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(48px, 6vw, 72px); display: flex; flex-direction: column; gap: 24px; }
.itf-h1 { max-width: 16ch; }
.itf-lead { max-width: 60ch; }
.itf-index { display: flex; flex-wrap: wrap; border-top: 1px solid var(--teal); border-bottom: 1px solid var(--divider); margin-top: 24px; }
.itf-index a { flex: 1 1 180px; padding: 16px 20px 16px 0; display: flex; flex-direction: column; gap: 4px; color: var(--text); }
.itf-index a:hover { color: var(--teal-700); }
.itf-index .t { font-size: 16px; font-weight: 500; }

.itf-h2 { font-size: clamp(30px, 3.8vw, 44px); }
.itf-story-h2 { max-width: 18ch; }
.section > .itf-story { padding-top: var(--pad-section); padding-bottom: var(--pad-section); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px 64px; }
.itf-story-body { display: flex; flex-direction: column; gap: 18px; font-size: 17px; line-height: 1.65; color: var(--text-2); max-width: 60ch; }
.itf-pull { font-size: 19px; font-weight: 500; color: var(--teal-700); border-left: 2px solid var(--teal); padding-left: 18px; }

.section > .itf-layers-wrap { padding-top: var(--pad-section); padding-bottom: var(--pad-section); display: flex; flex-direction: column; gap: 28px; }
.itf-layers { display: flex; flex-direction: column; }
.itf-layer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px 56px; padding: 36px 0; border-top: 1px solid var(--teal); scroll-margin-top: 24px; }
.itf-n { font-family: var(--mono); font-size: 13px; color: var(--teal); }
.itf-h3 { font-size: 28px; line-height: 1.15; letter-spacing: -.015em; }
.itf-tag { font-size: 17px; font-style: italic; color: var(--text-3); }
.itf-fdg { display: flex; flex-direction: column; }
.itf-r { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--divider); font-size: 16px; color: var(--text-2); }
.itf-r.get { border-bottom: 0; font-size: 17px; font-weight: 500; color: var(--teal-700); }
.itf-l { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding-top: 3px; }
.face-l { color: var(--text-3); }
.do-l { color: var(--teal); }
.get-l { color: var(--teal-700); }
.itf-do { color: var(--text); }
.itf-do-col { display: flex; flex-direction: column; gap: 10px; }
.itf-list { display: flex; flex-direction: column; gap: 8px; background: var(--tint); border-radius: var(--radius-card); padding: 14px 16px; font-size: 15px; line-height: 1.5; color: var(--panel-text); }
.itf-agent { font-size: 14.5px; color: var(--teal-700); border-top: 1px solid var(--tint-rule); padding-top: 8px; }
.itf-agent strong { color: var(--teal-700); }
@media (max-width: 480px) { .itf-r { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

.section > .itf-pair { padding-top: var(--pad-section); padding-bottom: var(--pad-section); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
.itf-panel { padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 14px; }
.itf-h2-panel { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; letter-spacing: -.02em; color: var(--text); }
.itf-panel-body { font-size: 17px; line-height: 1.6; color: var(--text-2); }
.tint .itf-panel-body { color: var(--panel-text); }
.itf-close-p { font-size: 18px; color: var(--text-2); }

/* Layers: title -> outcome on the left, detail on the right (handoff v3.1 IMPROVEMENTS 1.1) */
.itf-out { display: flex; flex-direction: column; gap: 6px; font-size: 18px; line-height: 1.45; font-weight: 500; color: var(--teal-700); margin-top: 6px; max-width: 34ch; }
.itf-next { padding-top: 14px; }
@media (min-width: 960px) {
  .itf-layer > .layer-head { position: sticky; top: 104px; align-self: start; }
}

/* ---- vlsi.css ---- */
.vlsi-hero { padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(40px, 5vw, 56px); display: flex; flex-direction: column; gap: 24px; }
.vlsi-h1 { max-width: 15ch; }
.vlsi-lead { max-width: 62ch; }
.vlsi-proof { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 16px; }
.vlsi-proof .num { letter-spacing: .06em; }
.vlsi-proof-t { font-weight: 500; color: var(--teal-700); }

.vlsi-cost { border-top: 1px solid var(--teal); border-bottom: 1px solid var(--divider); padding: 32px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px 56px; align-items: center; }
.vlsi-figure { font-weight: 500; font-size: clamp(64px, 9vw, 120px); line-height: .95; letter-spacing: -.04em; color: var(--teal); font-feature-settings: "tnum"; white-space: nowrap; }
.vlsi-cost-text { display: flex; flex-direction: column; gap: 12px; max-width: 62ch; }
.vlsi-cost-lead { font-size: 19px; line-height: 1.5; font-weight: 500; }
.vlsi-cost-body { font-size: 16px; line-height: 1.6; color: var(--text-2); }
.vlsi-source { font-family: var(--mono); font-size: 13px; color: var(--text-3); }

.section > .wrap.vlsi-story { gap: 28px; }
.vlsi-h2 { font-size: clamp(30px, 3.8vw, 44px); }
.vlsi-chip { border: 1px solid var(--divider); border-radius: var(--radius-control); padding: 7px 12px; font-size: 14.5px; color: var(--text); display: flex; gap: 8px; align-items: baseline; }
.vlsi-chip:hover { border-color: var(--teal); color: var(--teal-700); }

.vlsi-ch { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px 56px; padding: 36px 0; border-top: 1px solid var(--teal); scroll-margin-top: 0; }
.vlsi-ch-n { font-family: var(--mono); font-size: 13px; color: var(--teal); }
.vlsi-ch-t { font-size: 28px; line-height: 1.15; letter-spacing: -.015em; }
.vlsi-fdg { display: flex; flex-direction: column; }
.vlsi-fdg-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--divider); }
.vlsi-fdg-row.get { border-bottom: 0; }
.vlsi-l { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding-top: 3px; }
.vlsi-l.face-l { color: var(--text-3); }
.vlsi-l.do-l { color: var(--teal); }
.vlsi-l.get-l { color: var(--teal-700); }
.vlsi-v { font-size: 16px; color: var(--text-2); }
.vlsi-v.do { color: var(--text); }
.vlsi-v.get { font-size: 17px; font-weight: 500; color: var(--teal-700); }
@media (max-width: 480px) { .vlsi-fdg-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

.vlsi-outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px 40px; padding: clamp(20px, 3vw, 32px); }
.vlsi-outcome { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--teal); padding-top: 16px; }
.vlsi-outcome-t { font-size: 20px; font-weight: 600; color: var(--text); }
.vlsi-outcome-d { font-size: 15.5px; line-height: 1.55; color: var(--panel-text); }

.vlsi-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.vlsi-way { padding: 24px; gap: 12px; }
.vlsi-way-t { font-size: 21px; line-height: 1.2; }
.vlsi-way-d { font-size: 15px; line-height: 1.55; color: var(--text-2); }

.vlsi-close-p { font-size: 18px; color: var(--text-2); max-width: 60ch; }

/* Sound familiar? (content v2.6) */
.vlsi-sf { padding-bottom: clamp(48px, 6vw, 80px); }
.vlsi-sf-wrap { display: flex; flex-direction: column; gap: 24px; }
.vlsi-sf-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px 56px; align-items: end; }
.vlsi-sf-head .vlsi-h2 { max-width: 18ch; }
.vlsi-reframe { color: var(--teal-700); font-size: 18px; max-width: 46ch; }

/* Chapters: title -> outcome on the left, detail on the right (IMPROVEMENTS 1.1) */
.vlsi-out { display: flex; flex-direction: column; gap: 6px; font-size: 18px; line-height: 1.45; font-weight: 500; color: var(--teal-700); margin-top: 6px; max-width: 34ch; }
.vlsi-next { padding-top: 14px; }
@media (min-width: 960px) {
  .vlsi-ch > .layer-head { position: sticky; top: 104px; align-self: start; }
}
.vlsi-fig-wrap { display: flex; flex-direction: column; gap: 6px; }
.vlsi-fig-unit { color: var(--teal-700); }

/* Positioning + today/next split (content v3.0) */
.vlsi-what { padding-bottom: clamp(40px, 5vw, 64px); }
.vlsi-l.next-l { color: var(--text-3); }
.vlsi-v.next { color: var(--text-3); }