/* Style 1: Swiss engineering. Light ground, one accent, strict 12-column grid. */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --bg: #FFFFFF;
  --surface: #F2F4F8;
  --ink: #0B1433;
  --ink-2: #3D4560;
  --ink-3: #5C6680;
  --field: #6B7489;
  --track: #DDE1EA;
  --accent: #213FFF;
  --accent-hover: #1A33D6;
  --gutter: clamp(16px, 4.4vw, 64px);
  --gap: clamp(16px, 2vw, 32px);
  --display: clamp(1.5rem, min(5vw, 8vh), 4.5rem);
  --h2: clamp(1.75rem, 0.9rem + 3.3vw, 3.5rem);
  --big: clamp(1.25rem, 1.65vw, 1.625rem);
  --t-small: 0.9375rem;
  --t-meta: 1rem;
  --t-body: 1.125rem;
  --t-h3: 1.25rem;
  --t-h3l: clamp(1.375rem, 1.9vw, 1.75rem);
  --t-claim: clamp(1.5rem, 2.4vw, 2.25rem);
  --pill: 999px;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-size: var(--t-body);
  line-height: 1.6;
}
/* Tabular figures only on pure numerals. This face also widens punctuation under tnum. */
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--accent) 28%, var(--bg)); color: var(--ink); }

/* The grid: 12 columns. Children of a grid container place themselves by column. */
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
.hero .wrap, .head, .cta__grid, .rail {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
}
.hero .wrap > *, .head > * { grid-column: 1 / -1; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 10; }
.skip:focus { left: 8px; }

h1, h2 { font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--t-h3); font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; }

/* Buttons and links: round controls */
.btn {
  display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
  font-weight: 600; padding: 16px 30px; border-radius: var(--pill); font-size: var(--t-body); line-height: 1.2;
  border: 0; font-family: inherit; cursor: pointer; transition: background-color 0.15s ease-out;
}
.btn:hover { background: var(--accent-hover); }
.btn--small { padding: 10px 20px; font-size: var(--t-small); }
.link { color: var(--ink); font-weight: 600; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
.link:hover { color: var(--accent); }

/* Header */
.top { position: sticky; top: 0; z-index: 5; background: var(--bg); }
.top__bar { display: flex; align-items: center; gap: 32px; height: 72px; }
.top__brand img { width: 107px; height: auto; flex-shrink: 0; } .top .btn { white-space: nowrap; }
.top nav { margin-left: auto; }
.top__nav { display: flex; gap: 28px; font-size: var(--t-small); font-weight: 500; white-space: nowrap; }
.top__nav a { color: var(--ink-2); text-decoration: none; }
.top__nav a:hover { color: var(--accent); }
.top__nav a[aria-current] { color: var(--ink); text-decoration: underline 2px var(--accent); text-underline-offset: 8px; }
@media (max-width: 1320px) { .top nav { display: none; } .top .btn { margin-left: auto; } }

/* Hero */
/* The hero: title, lead and actions, then a large product screenshot that starts in the first screen and runs below the fold. */
.hero { padding: clamp(48px, 8vh, 112px) 0 0; }
.hero__title { font-size: var(--display); line-height: 1; letter-spacing: -0.045em; }
.hero .wrap > .hero__lead { grid-column: 1 / 8; max-width: 58ch; margin-top: clamp(24px, 3vw, 48px); font-size: var(--big); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.hero__actions { margin-top: clamp(32px, 3.5vw, 56px); display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
/* The hero screenshot floats on a soft, offset shadow tinted from the ink token. This is the page's one shadow. */
.hero__shot { margin-top: clamp(40px, 5vw, 72px); margin-bottom: clamp(24px, 3vw, 48px); }
.hero__shot img { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent), 0 0 6px color-mix(in srgb, var(--ink) 14%, transparent), 0 4px 24px color-mix(in srgb, var(--ink) 24%, transparent), 0 14px 36px -6px color-mix(in srgb, var(--ink) 28%, transparent); }
.hero__shot img { display: block; width: 100%; height: auto; }

@media (max-width: 760px) { .hero { --display: clamp(1.75rem, 9vw, 2.5rem); } }

/* Sections */
.band { padding: clamp(72px, 8vw, 120px) 0; }
.head .intro, .intro { margin-top: 28px; max-width: 46ch; font-size: var(--big); line-height: 1.4; color: var(--ink-2); }
.head h2 { grid-column: 1 / 11; }
.head .intro { grid-column: 1 / 8; }
.note { margin-top: 28px; font-size: var(--t-small); line-height: 1.5; color: var(--ink-3); max-width: 72ch; }

/* Feature infographics: one diagram per section on a surface panel, then a row of short facts.
   Nodes are white (or ink, or accent) squares; connectors are 2px Deep Ink lines; status is a square pill. */
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ig { margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 20px; background: var(--surface); padding: clamp(20px, 3.2vw, 48px); }
.ig-label { color: var(--ink-3); font-size: var(--t-small); font-weight: 700; }
.ig-node { display: grid; gap: 6px; align-content: start; background: var(--bg); padding: 14px 16px; color: var(--ink-2); font-size: var(--t-small); line-height: 1.45; }
.ig-node b { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: var(--t-meta); line-height: 1.3; }
.ig-node b .ico { color: var(--accent); }
.ig-node--ink { background: var(--ink); color: var(--track); }
.ig-node--more { background: transparent; outline: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); outline-offset: -2px; }
.ig-node--accent { background: var(--accent); color: #fff; }
.ig-node--ink b, .ig-node--accent b, .ig-node--ink b .ico, .ig-node--accent b .ico { color: #fff; }
.ig-node .pill { justify-self: start; margin-top: 4px; }
.ig-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--t-small); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; background: var(--surface); color: var(--ink); font-size: var(--t-small); font-weight: 600; line-height: 1.4; }
.pill .ico { width: 14px; height: 14px; }
.ig-node .pill, .ig-legend .pill, .lane .pill { background: var(--surface); }
.ig-node--ink .pill, .ig-node--accent .pill { background: var(--bg); color: var(--ink); }
.pill--on, .ig-node .pill--on, .ig-node--ink .pill--on, .lane .pill--on, .ig-legend .pill--on { background: var(--accent); color: #fff; }
.pill--ink, .ig-node .pill--ink { background: var(--ink); color: #fff; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li, .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg); color: var(--ink); font-size: var(--t-small); font-weight: 600; }
.chips .ico, .chip .ico { color: var(--accent); }
.chips--stack { display: grid; }
.facts { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 32px var(--gap); }
.facts li { display: grid; gap: 8px; align-content: start; color: var(--ink-2); font-size: var(--t-meta); line-height: 1.5; }
.facts .ico { width: 26px; height: 26px; color: var(--accent); stroke-width: 1.5; }
.facts strong { color: var(--ink); font-size: var(--t-h3); line-height: 1.25; }

/* Tree: one root, four children joined by an ink bracket. */
.tree { display: grid; justify-items: center; }
.bots { display: flex; gap: 4px; }
.bots i { display: grid; place-items: center; width: 24px; height: 24px; background: var(--ink); color: #fff; }
.bots .ico { width: 14px; height: 14px; }
.tree > .ig-node { width: min(440px, 100%); text-align: center; justify-items: center; }
.tree__kids { position: relative; width: 100%; margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.tree__kids::before { content: ""; position: absolute; top: -24px; left: calc((100% - 3 * var(--gap)) / 8); right: calc((100% - 3 * var(--gap)) / 8); height: 2px; background: var(--ink); }
.tree__kids::after { content: ""; position: absolute; top: -48px; left: 50%; width: 2px; height: 24px; background: var(--ink); }
.tree__kids > li { position: relative; display: grid; }
.tree__kids > li::before { content: ""; position: absolute; top: -24px; left: 50%; width: 2px; height: 24px; background: var(--ink); }

.cmd { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; width: min(560px, 100%); padding: 16px 18px; background: #fff; outline: 2px solid var(--ink); outline-offset: -2px; }
.cmd__ico { display: grid; place-items: center; width: 44px; height: 44px; background: var(--accent); color: #fff; }
.cmd__ico .ico { width: 22px; height: 22px; }
.cmd b { color: var(--ink); font-size: var(--t-meta); }
.cmd__msg { margin-top: 4px; padding: 10px 12px; background: var(--surface); color: var(--ink); font-size: var(--t-small); line-height: 1.45; }
.cmd__link { display: grid; grid-template-columns: 1fr 2px 2px 1fr; align-items: center; column-gap: 14px; width: min(560px, 100%); height: 56px; font-size: var(--t-small); font-weight: 600; }
.cmd__arr { align-self: stretch; position: relative; background: var(--ink); }
.cmd__arr::after { content: ""; position: absolute; left: -5px; width: 12px; height: 8px; background: inherit; }
.cmd__arr--dn::after { bottom: -2px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.cmd__arr--up { background: color-mix(in srgb, var(--accent) 70%, var(--bg)); }
.cmd__arr--up::after { top: -2px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cmd__down { justify-self: end; color: var(--ink); }
.cmd__up { justify-self: start; color: var(--accent); }
@media (max-width: 560px) { .cmd__link { column-gap: 10px; height: 64px; } .cmd__down, .cmd__up { line-height: 1.3; } }

/* Funnel: rows of nodes joined by drawn lines. */
.funnel { display: grid; }
.funnel > .ig-label { margin-bottom: 10px; }
.funnel > .ig-label:last-child { margin: 10px 0 0; }
.ig-row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap); }
.ig-row .ig-node, .funnel > .ig-node { text-align: center; justify-items: center; }
.ig-row .ig-node b { justify-content: center; }
.ig-row > li { display: grid; }
.ig-row .ig-node { align-content: center; }
.join { height: 40px; }
.join--short { height: 20px; }
.join svg { display: block; width: 100%; height: 100%; overflow: visible; }
.join path { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* Lanes: one git branch per session, with commits as square markers. */
.lanes { display: grid; gap: 16px; }
.lane { display: grid; grid-template-columns: 240px minmax(0, 1fr) 140px; align-items: center; gap: 20px; }
.lane .pill { justify-self: end; }
.lane__label { color: var(--ink-3); font-size: var(--t-small); line-height: 1.4; }
.lane__label b { display: block; color: var(--ink); font-size: var(--t-meta); }
.lane__track { position: relative; display: flex; align-items: center; gap: clamp(28px, 5vw, 72px); height: 28px; padding-left: var(--start); }
.lane__track::before { content: ""; position: absolute; left: var(--start); right: 0; top: 50%; height: 2px; background: var(--ink); transform: translateY(-50%); }
.lane--main .lane__track::before { background: var(--ink-3); }
.lane__track i { position: relative; display: grid; place-items: center; width: 14px; height: 14px; background: var(--ink); }
.lane--main .lane__track i { background: var(--ink-3); }
.lane__track i.is-head { background: var(--accent); }
.lane__track i.is-restore, .lane__track i.is-fork { width: 28px; height: 28px; background: var(--bg); color: var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; }
.lane__track i .ico { width: 16px; height: 16px; }

/* Trace: a requirement linked to its specs, files and tests. */
.trace__arrow, .trace__arrow::after, .ig 

/* Preview window: a drawn browser frame with a wireframe app. */
.win { background: var(--bg); }
.win__bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--ink); color: #fff; font-size: var(--t-small); font-weight: 600; }
.win__bar em { margin-left: auto; padding: 2px 10px; background: var(--accent); font-style: normal; }
.win__body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px; }
.win__body i { height: 56px; background: var(--surface); }
.win__body i:first-child { grid-column: 1 / -1; height: 24px; }
.win__body i:nth-child(2) { background: var(--accent); }
.win__body i:last-child { grid-column: 1 / -1; height: 88px; }

@media (max-width: 1000px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tree__kids, .ig-row[style*="5"], .ig-row[style*="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tree__kids::before, .tree__kids::after, .tree__kids > li::before { display: none; }
  .tree__kids { margin-top: var(--gap); }
  .join { display: none; }
  .funnel { gap: 10px; }
        .lane { grid-template-columns: minmax(0, 1fr) auto; }
  .lane__track { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 560px) {
  .facts, .tree__kids, .ig-row { grid-template-columns: 1fr; }
  .trace__arrow { display: none; }
}

.rail { margin-top: 64px; padding: clamp(24px, 3vw, 40px); background: var(--surface); row-gap: 24px; align-items: start; }
.rail__title { grid-column: 1 / 4; font-size: var(--t-h3l); }
.rail ul { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px var(--gap); color: var(--ink-2); font-size: var(--t-meta); line-height: 1.5; }
.rail strong { display: block; color: var(--ink); font-size: var(--t-body); }

/* Factory flow: the pipeline on a Deep Ink panel. A line joins the stage markers, and one square pulse travels it. */
.fv { --fv-line: color-mix(in srgb, var(--accent) 75%, var(--ink)); --fv-raised: color-mix(in srgb, var(--bg) 9%, var(--ink)); --fv-muted: color-mix(in srgb, var(--bg) 62%, var(--ink));
  margin-top: clamp(56px, 7vw, 96px); background: var(--ink); color: var(--track); padding: clamp(24px, 4vw, 56px); }
.fv .ico { width: 20px; height: 20px; }
.fv__lead { margin-bottom: clamp(24px, 3vw, 40px); color: #fff; font-size: var(--t-claim); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.fv__lanes { --lane: 170px; --g: 14px; position: relative; display: grid; grid-template-columns: var(--lane) repeat(7, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: var(--g); }
.fv__lanes::before { content: ""; position: absolute; top: 25px; left: calc(var(--lane) + var(--g) + 26px); right: calc((100% - var(--lane) - 7 * var(--g)) / 7 - 26px); height: 2px; background: var(--fv-line); }
.fv__lanes::after { content: ""; position: absolute; top: 21px; left: calc(var(--lane) + var(--g) + 22px); width: 10px; height: 10px; background: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 45%, transparent); animation: fv-run 8s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
@keyframes fv-run { 0% { left: calc(var(--lane) + var(--g) + 22px); opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - (100% - var(--lane) - 7 * var(--g)) / 7 + 22px); opacity: 0; } }
.fv__stages { display: contents; }
.fv__stage { display: contents; }
.fv__head { grid-column: var(--c); grid-row: 1; display: grid; gap: 14px; align-content: start; padding-bottom: 8px; }
.fv__head h3 { color: #fff; font-size: var(--t-h3); line-height: 1.2; }
.fv__mark { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; background: var(--fv-raised); color: #fff; outline: 2px solid var(--fv-line); outline-offset: -2px; }
.fv__stage--on .fv__mark { background: var(--accent); outline-color: var(--accent); }
.fv__cell { display: grid; gap: 6px; align-content: start; padding: 14px; font-size: var(--t-small); line-height: 1.45; }
.fv__cell--agent { grid-column: var(--c); grid-row: 2; background: var(--fv-raised); color: var(--track); }
.fv__who { color: color-mix(in srgb, var(--accent) 50%, var(--bg)); font-weight: 700; }
.fv__cell--decide, .fv__cell--opt { grid-column: var(--c); grid-row: 3; }
.fv__cell--decide { background: #fff; color: var(--ink-2); }
.fv__cell--decide .ico { color: var(--accent); width: 22px; height: 22px; }
.fv__cell--decide b { color: var(--ink); font-size: var(--t-meta); line-height: 1.25; }
.fv__cell--opt { color: var(--fv-muted); outline: 1px dashed color-mix(in srgb, var(--bg) 22%, var(--ink)); outline-offset: -1px; }
.fv__cell--opt b { color: var(--fv-muted); font-size: var(--t-small); }
.fv__lane { grid-column: 1; display: grid; gap: 4px; align-content: start; padding-top: 14px; color: var(--fv-muted); font-size: var(--t-small); line-height: 1.4; }
.fv__lane--agent { grid-row: 2; } .fv__lane--people { grid-row: 3; }
.fv__lane b { color: #fff; font-size: var(--t-meta); }
.fv__lane-ico { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 6px; background: var(--accent); color: #fff; }
.fv__lane--people .fv__lane-ico { background: #fff; color: var(--ink); }
.fv__run { margin-top: clamp(40px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px var(--gap); background: var(--fv-raised); padding: clamp(20px, 2.4vw, 32px); }
.fv__run-title { color: #fff; font-size: var(--t-h3l); }
.fv__run ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px var(--gap); font-size: var(--t-small); line-height: 1.5; }
.fv__run li { display: grid; gap: 6px; align-content: start; }
.fv__run .ico { color: color-mix(in srgb, var(--accent) 60%, var(--bg)); }
.fv__run strong { color: #fff; font-size: var(--t-meta); }
.fv__note { margin-top: 20px; color: var(--fv-muted); font-size: var(--t-small); max-width: 80ch; }
@media (max-width: 1100px) {
  .fv__lanes { display: block; }
  .fv__lanes::before, .fv__lanes::after, .fv__lane { display: none; }
  .fv__stages { display: grid; gap: 28px; }
  .fv__stage { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px 18px; }
  .fv__stage:not(:last-child)::before { content: ""; position: absolute; top: 52px; bottom: -28px; left: 25px; width: 2px; background: var(--fv-line); }
  .fv__head { grid-column: 1 / -1; grid-row: auto; grid-template-columns: 52px 1fr; align-items: center; gap: 18px; padding: 0; }
  .fv__cell--agent, .fv__cell--decide, .fv__cell--opt { grid-column: 2; grid-row: auto; }
  .fv__cell--agent::before { content: "Agents"; color: var(--fv-muted); font-weight: 700; }
  .fv__cell--decide::before, .fv__cell--opt::before { content: "People"; font-weight: 700; color: var(--ink-3); }
  .fv__cell--opt::before { color: var(--fv-muted); }
  .fv__run { grid-template-columns: 1fr; }
  .fv__run ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .fv__run ul { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fv__lanes::after { animation: none; display: none; } }

@media (max-width: 1100px) {
  .fleet { grid-template-columns: 1fr; }
  .fleet__fan { display: none; }
  .fleet__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.al { --muted: color-mix(in srgb, var(--bg) 62%, var(--ink)); --raised: color-mix(in srgb, var(--bg) 9%, var(--ink)); --line: color-mix(in srgb, var(--accent) 75%, var(--ink));
  margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px clamp(24px, 3vw, 48px); align-items: center; background: var(--ink); color: var(--track); padding: clamp(20px, 3.2vw, 48px); }

.ab { --muted: color-mix(in srgb, var(--bg) 62%, var(--ink)); --raised: color-mix(in srgb, var(--bg) 9%, var(--ink)); --soft: color-mix(in srgb, var(--accent) 45%, var(--bg));
  margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 14px; background: var(--ink); color: var(--track); padding: clamp(20px, 3vw, 40px); }

.tm { --muted: color-mix(in srgb, var(--bg) 62%, var(--ink)); --raised: color-mix(in srgb, var(--bg) 9%, var(--ink)); --soft: color-mix(in srgb, var(--accent) 45%, var(--bg));
  margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 20px; background: var(--ink); color: var(--track); padding: clamp(20px, 3vw, 40px); }
@media (max-width: 1100px) {
  .tm__cols { grid-template-columns: 1fr; gap: 16px; }
  .tm__link { display: none; }
  .tm__col ul { grid-auto-rows: auto; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
  .tm__n { padding: 10px 12px; }
  .tm__h { height: auto; margin-bottom: 8px; }
}

@media (max-width: 1000px) {
  .zz__row--wide .zz__text { grid-column: 1 / -1; }
  .zz__row--wide > .zz__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc__stages { flex-direction: column; align-items: stretch; }
  .pc__arr { width: 2px; height: 22px; margin-left: 24px; align-self: flex-start; }
  .pc__arr::after { right: auto; left: -4px; top: auto; bottom: 0; width: 10px; height: 7px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
}

.pf { display: grid; gap: 10px; }
.pf .ig-label { display: flex; align-items: center; gap: 6px; }
.pf .ig-label .ico { width: 16px; height: 16px; color: var(--accent); }
.pf__list { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 0; }
.pf__list li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; gap: 16px; background: var(--bg); padding: 10px 12px; font-size: var(--t-small); }
.pf__app { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.pf__app .ico { width: 16px; height: 16px; color: var(--accent); }
.pf__via { color: var(--ink-3); }
.pf__list .pill { justify-self: end; }
.pf__list .pill:not(.pill--on):not(.pill--ink) { background: var(--surface); }
@media (max-width: 560px) { .pf__list { grid-template-columns: 1fr; } .pf__list li { grid-template-columns: 1fr auto; } .pf__via { grid-column: 1 / -1; grid-row: 2; } }

/* Artifact cards: six documents in order, each with a preview, its author and its approval. */
.ad__strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 14px; background: var(--ink); color: var(--track); font-size: var(--t-small); }
.ad__strip .ico { width: 18px; height: 18px; color: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
.ad__strip b { color: #fff; font-size: var(--t-meta); }
.ads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ad { display: grid; grid-template-rows: auto 1fr auto; background: var(--bg); }
.ad__h { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; color: var(--ink); font-size: var(--t-small); line-height: 1.25; }
.ad__h b { font-size: var(--t-small); font-weight: 700; }
.ad__h .ico { width: 16px; height: 16px; flex: none; color: var(--accent); }
.ad__n { display: grid; place-items: center; flex: none; width: 20px; height: 20px; background: var(--surface); color: var(--ink-3); font-size: var(--t-small); font-weight: 700; }
.ad__body { display: grid; gap: 5px; align-content: start; padding: 0 12px 12px; color: var(--ink-2); font-size: var(--t-small); line-height: 1.35; }
.ad__chip { justify-self: start; padding: 1px 7px; background: var(--ink); color: #fff; font-weight: 600; }
.ad__t { color: var(--ink); font-weight: 700; }
.ad__line { color: var(--ink-3); }
.ad__row { display: flex; align-items: center; gap: 6px; }
.ad__row code, .ad__file code { font-family: var(--mono); font-size: var(--t-small); color: var(--ink); }
.ad__row code { padding: 0 5px; background: var(--surface); }
.ad__row .ico { width: 14px; height: 14px; flex: none; color: var(--accent); }
.ad__flow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ad__flow span, .ad__mods span { padding: 3px 7px; background: var(--surface); color: var(--ink); font-weight: 600; }
.ad__flow .ico { width: 12px; height: 12px; color: var(--ink-3); }
.ad__mods { display: flex; flex-wrap: wrap; gap: 4px; }
.ad__file { padding: 3px 7px; background: var(--surface); }
.ad__foot { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-top: 0; background: var(--surface); color: var(--ink-3); font-size: var(--t-small); font-weight: 600; }
.ad__foot .ico { width: 14px; height: 14px; flex: none; }
.ad__foot--ok { background: var(--ink); color: #fff; }
.ad__foot--ok .ico { color: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
.ad--final { outline: 2px solid var(--accent); outline-offset: -2px; }
.ad--final .ad__n { background: var(--accent); color: #fff; }
@media (max-width: 1100px) { .ads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ads { grid-template-columns: 1fr; } }

@media (max-width: 1000px) {
  .zz__text, .zz__viz, .zz__row:nth-child(even) .zz__text, .zz__row:nth-child(even) .zz__viz { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 560px) {
  .zz__row--wide > .zz__list { grid-template-columns: 1fr; }
  .route, .compose { grid-template-columns: 1fr; gap: 8px; }
      .loop3 { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); }
}

.cluster-wrap { margin-top: clamp(32px, 4vw, 56px); background: var(--surface); padding: clamp(20px, 3.2vw, 48px); }
.logo { width: 16px; height: 16px; flex: none; fill: var(--ink); }
.layer__tech { display: flex; flex-wrap: wrap; gap: 6px; }
.layer__tech li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; background: var(--surface); color: var(--ink); font-size: var(--t-small); font-weight: 600; }
.layer__tech .ico { width: 16px; height: 16px; color: var(--ink); }
.cluster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px var(--gap); align-items: center; }
.cluster__text h4 { color: var(--ink); font-size: var(--t-h3l); line-height: 1.2; }
.cluster__text p { margin: 10px 0 16px; color: var(--ink-2); font-size: var(--t-meta); line-height: 1.5; }
.cluster__text .layer__tech li { background: var(--bg); }
.cluster__viz { display: grid; gap: 12px; background: var(--ink); padding: clamp(16px, 2vw, 24px); color: var(--track); }
.cluster__viz .logo { fill: #fff; }
.cluster__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: var(--t-small); }
.cluster__bar b { color: #fff; font-size: var(--t-meta); }
.cluster__bar span:not(.pill) { color: color-mix(in srgb, var(--bg) 62%, var(--ink)); }
.cluster__bar .pill { margin-left: auto; }
.cluster__url { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--accent); color: #fff; font-size: var(--t-small); font-weight: 600; }
.pods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pod { position: relative; display: grid; gap: 4px; align-content: start; padding: 12px; background: color-mix(in srgb, var(--bg) 9%, var(--ink)); font-size: var(--t-small); line-height: 1.3; }
.pod b { color: #fff; }
.pod span { color: color-mix(in srgb, var(--bg) 62%, var(--ink)); }
.pod__dot { position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; background: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
@media (max-width: 1000px) { .cluster { grid-template-columns: minmax(0, 1fr); } }
.cluster > * { min-width: 0; }
.cluster__url { overflow-wrap: anywhere; min-width: 0; }
.pod { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 400px) { .cluster-wrap { padding: 14px; } .cluster__viz { padding: 12px; } .pods { gap: 6px; } .pod { padding: 10px; } }
@media (max-width: 560px) { .pods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Fleet: one engineer steers dozens of agents, each in its own secure cloud sandbox. Deep Ink panel. */
.fleet { --muted: color-mix(in srgb, var(--bg) 62%, var(--ink)); --raised: color-mix(in srgb, var(--bg) 9%, var(--ink)); margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: 250px 90px minmax(0, 1fr); align-items: center; row-gap: 24px; background: var(--ink); color: var(--track); padding: clamp(20px, 3.2vw, 48px); }
.fleet__person { display: grid; gap: 8px; background: #fff; color: var(--ink-2); padding: 22px; font-size: var(--t-small); line-height: 1.45; }
.fleet__person > b { color: var(--ink); font-size: var(--t-h3l); line-height: 1.15; }
.fleet__ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; background: var(--accent); color: #fff; }
.fleet__ico .ico { width: 22px; height: 22px; }
.fleet__stats { display: grid; gap: 8px; margin-top: 8px; }
.fleet__stats li { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.fleet__stats b { color: var(--ink); font-size: var(--t-meta); }
.sbx-dot { width: 12px; height: 12px; flex: none; }
.sbx-dot--work { background: color-mix(in srgb, var(--accent) 55%, var(--ink)); }
.sbx-dot--need { background: #fff; outline: 2px solid var(--ink); outline-offset: -2px; }
.sbx-dot--done { background: color-mix(in srgb, var(--bg) 9%, var(--ink)); }
.fleet__fan { align-self: stretch; }
.fleet__fan svg { display: block; width: 100%; height: 100%; }
.fleet__fan path { fill: none; stroke: color-mix(in srgb, var(--accent) 75%, var(--ink)); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fleet__zone { display: grid; gap: 14px; padding: 16px; outline: 2px dashed color-mix(in srgb, var(--accent) 70%, var(--ink)); outline-offset: -2px; }
.fleet__zone-label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: var(--t-small); }
.fleet__zone-label .ico { color: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
.fleet__zone-label b { color: #fff; font-size: var(--t-meta); }
.fleet__zone-label span { color: var(--muted); }
.fleet__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.sbx { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: color-mix(in srgb, var(--accent) 55%, var(--ink)); }
.sbx .logo { width: 34px; height: 34px; fill: #fff; }
.sbx--done { background: var(--raised); }
.sbx--done .logo { fill: var(--muted); opacity: 0.6; }
.sbx--need { background: #fff; }
.sbx--need .logo { fill: var(--ink); }
.sbx span { position: absolute; left: 0; right: 0; bottom: 6px; color: var(--ink); font-size: var(--t-small); font-weight: 700; line-height: 1; text-align: center; }
.sbx--need .logo { margin-bottom: 22px; }
.fleet__chips { grid-column: 1 / -1; }
.fleet__chips li { background: var(--raised); color: #fff; }
.fleet__chips .ico { color: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
@media (max-width: 1100px) {
  .fleet { grid-template-columns: 1fr; }
  .fleet__fan { display: none; }
  .fleet__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .fleet__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .sbx .logo { width: 22px; height: 22px; } .sbx span { display: none; } .sbx--need .logo { margin-bottom: 0; } }

/* Agentic loop on the live app: a four-step loop around the running preview, beside the iterations of one run. Deep Ink panel. */
.al { --muted: color-mix(in srgb, var(--bg) 62%, var(--ink)); --raised: color-mix(in srgb, var(--bg) 9%, var(--ink)); --line: color-mix(in srgb, var(--accent) 75%, var(--ink));
  margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px clamp(24px, 3vw, 48px); align-items: center; background: var(--ink); color: var(--track); padding: clamp(20px, 3.2vw, 48px); }
.al__loop { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); grid-template-rows: auto 28px auto 28px auto; align-items: center; }
.al__step { display: grid; gap: 4px; padding: 12px 14px; background: var(--raised); font-size: var(--t-small); color: var(--muted); }
.al__step b { display: flex; align-items: center; gap: 8px; color: #fff; font-size: var(--t-meta); }
.al__step .ico { color: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
.al__s1 { grid-area: 1 / 1; } .al__arr--r { grid-area: 1 / 2; } .al__s2 { grid-area: 1 / 3; }
.al__arr--d { grid-area: 2 / 3 / 5 / 4; } .al__arr--u { grid-area: 2 / 1 / 5 / 2; }
.al__s4 { grid-area: 5 / 1; } .al__arr--l { grid-area: 5 / 2; } .al__s3 { grid-area: 5 / 3; }
.al__s3 { background: var(--accent); color: #fff; } .al__s3 .ico { color: #fff; }
.al__app { grid-area: 3 / 1 / 4 / 4; justify-self: center; width: min(calc(100% - 96px), 380px); padding: 14px 0; }
.al__app .win { box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg) 18%, var(--ink)); }
.al__arr { position: relative; background: var(--line); }
.al__arr--r, .al__arr--l { height: 2px; margin: 0 6px; }
.al__arr--d, .al__arr--u { width: 2px; height: 100%; }
.al__arr--u { justify-self: start; margin-left: 22px; }
.al__arr--d { justify-self: end; margin-right: 22px; }
.al__arr::after { content: ""; position: absolute; background: var(--line); }
.al__arr--r::after { right: -2px; top: -5px; width: 8px; height: 12px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.al__arr--l::after { left: -2px; top: -5px; width: 8px; height: 12px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.al__arr--d::after { bottom: -2px; left: -5px; width: 12px; height: 8px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.al__arr--u::after { top: -2px; left: -5px; width: 12px; height: 8px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.al__run { display: grid; gap: 16px; }
.al__head { display: grid; gap: 2px; font-size: var(--t-small); color: var(--muted); }
.al__head b { color: #fff; font-size: var(--t-h3l); line-height: 1.2; }
.al__chips .ico { color: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
.lf { position: relative; display: grid; gap: 8px; }
.lf::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: 13px; width: 2px; background: var(--line); }
.lf__s { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.lf__n { z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; background: var(--raised); color: #fff; font-size: var(--t-small); font-weight: 700; outline: 2px solid var(--line); outline-offset: -2px; }
.lf__s--fail .lf__n { background: #fff; color: var(--ink); outline-color: #fff; }
.lf__s--pass .lf__n { background: var(--accent); outline-color: var(--accent); }
.lf__s > div { display: grid; gap: 6px; padding: 12px 14px; background: var(--raised); font-size: var(--t-small); }
.lf__s b { display: flex; align-items: center; gap: 8px; color: #fff; font-size: var(--t-meta); }
.lf__s b .ico { width: 16px; height: 16px; color: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
.lf__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; }
.lf__t { color: var(--track); }
.lf__st { font-weight: 700; color: #fff; }
.lf__s--fail .lf__st { padding: 0 8px; background: #fff; color: var(--ink); }
.lf__s--pass .lf__st { padding: 0 8px; background: var(--accent); }
.lf__sub { color: var(--muted); }
.lf__ev { display: flex; flex-wrap: wrap; gap: 6px; }
.lf__ev span { padding: 2px 8px; background: color-mix(in srgb, var(--bg) 16%, var(--ink)); color: #fff; font-weight: 600; }
.lf__code, .lf__diff { display: grid; padding: 8px 10px; background: var(--ink); color: var(--track); font-family: var(--mono); font-size: var(--t-small); white-space: pre-wrap; }
.lf__del { color: var(--muted); }
.lf__add { color: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
@media (max-width: 1100px) { .al { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .al__loop { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); } .al__app { width: calc(100% - 72px); } .al__arr--u { margin-left: 14px; } .al__arr--d { margin-right: 14px; } }

/* Analytics board: a Deep Ink dashboard of trend cards, a quality scorecard and the cost tile. */
.ab { --muted: color-mix(in srgb, var(--bg) 62%, var(--ink)); --raised: color-mix(in srgb, var(--bg) 9%, var(--ink)); --soft: color-mix(in srgb, var(--accent) 45%, var(--bg));
  margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 14px; background: var(--ink); color: var(--track); padding: clamp(20px, 3vw, 40px); }
.ab .ico { width: 18px; height: 18px; color: var(--soft); }
.ab__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; font-size: var(--t-small); color: var(--muted); }
.ab__bar b { color: #fff; font-size: var(--t-h3l); }
.ab__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ab__card, .ab__panel { display: grid; gap: 6px; align-content: start; background: var(--raised); padding: 18px; font-size: var(--t-small); }
.ab__name { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; font-size: var(--t-meta); }
.ab__val { display: grid; gap: 2px; color: var(--muted); }
.ab__panel .ab__val { display: flex; align-items: baseline; gap: 8px; }
.ab__val b { color: #fff; font-size: var(--t-claim); line-height: 1.1; letter-spacing: -0.02em; }
.ab__delta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--muted); }
.ab__spark { display: block; width: 100%; height: 64px; margin-top: 10px; overflow: visible; }
.ab__line { fill: none; stroke: var(--soft); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ab__area { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.ab__axis { display: flex; justify-content: space-between; color: var(--muted); }
.ab__row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; }
.ab__scores { display: grid; gap: 12px; margin-top: 8px; }
.ab__scores li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; color: var(--track); }
.ab__scores b { color: #fff; }
.ab__scores i { grid-column: 1 / -1; height: 8px; background: color-mix(in srgb, var(--bg) 16%, var(--ink)); position: relative; }
.ab__scores i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--accent); }
.ab__scores li:last-child i::after { background: var(--soft); }
.ab__hint { color: var(--muted); }
.ab__bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 4px; height: 64px; margin-top: 10px; border-bottom: 2px solid color-mix(in srgb, var(--accent) 75%, var(--ink)); }
.ab__bars i { height: var(--h); background: color-mix(in srgb, var(--accent) 45%, var(--ink)); }
.ab__bars i:last-child { background: var(--accent); }
@media (max-width: 1100px) { .ab__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ab__row { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ab__cards { grid-template-columns: 1fr; } }
/* Engineering intelligence and FinOps illustrations */
.attr { display: flex; height: 52px; }
.attr span { display: flex; flex-direction: column; justify-content: center; width: var(--w); padding: 0 14px; font-size: var(--t-small); line-height: 1.2; }
.attr b { font-size: var(--t-h3); }
.attr__a { background: var(--accent); color: #fff; }
.attr__p { background: var(--ink); color: var(--track); }
.ei__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ei__tiles li { display: grid; gap: 2px; background: var(--bg); padding: 12px; color: var(--ink-2); font-size: var(--t-small); line-height: 1.3; }
.ei__tiles b { color: var(--ink); font-size: var(--t-h3); }
.teams { display: grid; gap: 8px; }
.teams li { display: grid; grid-template-columns: 130px minmax(0, 1fr) 44px; align-items: center; gap: 12px; color: var(--ink); font-size: var(--t-small); font-weight: 600; }
.teams i { height: 14px; background: var(--bg); position: relative; }
.teams i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--accent); }
.teams b { text-align: right; }
.tok__k--in { background: var(--accent); } .tok__k--out { background: var(--ink); } .allow { position: relative; height: 18px; margin: 8px 0 24px; background: var(--bg); }
.allow > i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--accent); }
.allow__m { position: absolute; left: var(--x); top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.allow__m em { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); color: var(--ink-2); font-size: var(--t-small); font-style: normal; font-weight: 600; white-space: nowrap; }
.allow__m--stop em { left: auto; right: 0; transform: none; }
.allow__m--stop { left: calc(var(--x) - 2px); }
.allow__txt { color: var(--ink-2); font-size: var(--t-small); }
.allow__txt b { color: var(--ink); }
@media (max-width: 560px) { .ei__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .teams li { grid-template-columns: 100px minmax(0, 1fr) 40px; } }

.att__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--ink-2); font-size: var(--t-small); }
.att__top b { color: var(--ink); font-size: var(--t-h3l); }
.att { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.att__g { display: grid; gap: 10px; align-content: start; background: var(--bg); padding: 14px; }
.att__h { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: var(--t-small); font-weight: 700; }
.att__h .ico { width: 16px; height: 16px; color: var(--accent); }
.att ul { display: grid; gap: 8px; }
.att li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: var(--t-small); color: var(--ink-2); }
.att__lab { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att li b { color: var(--ink); }
.att li i { grid-column: 1 / -1; grid-row: 2; height: 6px; background: var(--surface); position: relative; }
.att li i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--accent); }
.att__tag { flex: none; padding: 1px 6px; background: var(--ink); color: #fff; font-size: var(--t-small); font-weight: 600; line-height: 1.4; }
.att__av { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-right: 2px; background: var(--accent); color: #fff; font-size: var(--t-small); font-weight: 700; }
@media (max-width: 560px) { .att { grid-template-columns: 1fr; } }

/* Traceability map: five columns on a Deep Ink panel, joined by drawn links, with one path lit end to end. */
.tm { --muted: color-mix(in srgb, var(--bg) 62%, var(--ink)); --raised: color-mix(in srgb, var(--bg) 9%, var(--ink)); --soft: color-mix(in srgb, var(--accent) 45%, var(--bg));
  margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 20px; background: var(--ink); color: var(--track); padding: clamp(20px, 3vw, 40px); }
.tm .ico { width: 18px; height: 18px; color: var(--soft); }
.tm__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: var(--t-small); color: var(--muted); }
.tm__bar b { color: #fff; font-size: var(--t-h3l); }
.tm__bar .pill:first-of-type { margin-left: auto; }
.tm__cols { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr); align-items: start; }
.tm__h { display: flex; align-items: center; gap: 8px; height: 40px; color: #fff; font-size: var(--t-small); font-weight: 700; line-height: 1.2; }
.tm__col ul { display: grid; grid-auto-rows: 48px; gap: 10px; }
.tm__n { display: grid; align-content: center; gap: 1px; padding: 0 12px; background: var(--raised); font-size: var(--t-small); line-height: 1.25; overflow: hidden; }
.tm__n b { color: var(--track); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm__n span { color: var(--muted); }
.tm__n.is-on { background: var(--accent); } .tm__n.is-on b { color: #fff; } .tm__n.is-on span { color: color-mix(in srgb, var(--bg) 80%, var(--accent)); }
.tm__n.is-sus { background: #fff; } .tm__n.is-sus b { color: var(--ink); } .tm__n.is-sus span { color: var(--ink-3); font-weight: 600; }
.tm__link { width: 48px; height: 222px; margin-top: 40px; overflow: visible; }
.tm__link path { fill: none; stroke-width: 2; }
.tm__link .off { stroke: color-mix(in srgb, var(--bg) 22%, var(--ink)); }
.tm__link .on { stroke: var(--soft); }
.tm__link .sus { stroke: #fff; stroke-dasharray: 4 3; }
.tm__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: var(--t-small); }
.tm__legend li { display: inline-flex; align-items: center; gap: 8px; }
.tm__k { width: 14px; height: 14px; background: color-mix(in srgb, var(--bg) 22%, var(--ink)); }
.tm__k--on { background: var(--accent); } .tm__k--sus { background: #fff; }
@media (max-width: 1100px) {
  .tm__cols { grid-template-columns: 1fr; gap: 16px; }
  .tm__link { display: none; }
  .tm__col ul { grid-auto-rows: auto; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
  .tm__n { padding: 10px 12px; }
  .tm__h { height: auto; margin-bottom: 8px; }
}
/* Architecture rows */
.vc::before { content: ""; position: absolute; top: 18px; bottom: 18px; left: 17px; width: 2px; background: var(--ink); }
.kg { display: block; width: 100%; height: auto; }
.kg line { stroke-width: 2; }
.kg line.off { stroke: var(--track); } .kg line.on { stroke: var(--accent); }
.kg rect { stroke-width: 0; }
.kg .off rect { fill: var(--bg); } .kg .on rect { fill: var(--accent); }
.kg text { font-family: inherit; font-size: 12px; font-weight: 600; }
.kg .off text { fill: var(--ink-2); } .kg .on text { fill: #fff; }
.mx__wrap { overflow-x: auto; }
.mx { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.mx caption { padding-bottom: 10px; color: var(--ink-3); font-weight: 700; text-align: left; }
.mx th, .mx td { padding: 10px 12px; background: var(--bg); border-bottom: 4px solid var(--surface); text-align: center; }
.mx th[scope="col"] { color: var(--ink-3); font-weight: 700; }
.mx th:first-child, .mx tbody th { text-align: left; }
.mx tbody th { color: var(--ink); font-weight: 600; }
.mx__c { display: inline-block; width: 16px; height: 16px; vertical-align: middle; background: var(--surface); outline: 2px solid var(--track); outline-offset: -2px; }
.mx__c--y { background: var(--accent); outline: 0; }
.mx__c--s { background: var(--ink); outline: 0; }
.legend .mx__c { width: 14px; height: 14px; }
.legend .pill { margin-left: auto; background: var(--bg); }
.im__change { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; background: var(--ink); color: var(--track); font-size: var(--t-small); }
.im__change b { color: #fff; }
.im__change .ico { color: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
.im { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.im__t { display: grid; gap: 2px; align-content: start; background: var(--bg); padding: 14px; color: var(--ink); font-size: var(--t-small); line-height: 1.3; }
.im__t b { font-size: var(--t-claim); line-height: 1; }
.im__t span { font-weight: 700; }
.im__t em { color: var(--ink-3); font-style: normal; }
.im__t--on { background: var(--accent); color: #fff; } .im__t--on em { color: color-mix(in srgb, var(--bg) 80%, var(--accent)); }
@media (max-width: 560px) { .mx th, .mx td { padding: 8px 6px; } .mx tbody th { font-weight: 600; } .im { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Security rows */
.ent .zz { grid-column: 1 / -1; margin-top: clamp(32px, 4vw, 64px); }
.sx__arr { position: relative; display: block; width: 28px; height: 2px; background: var(--ink); flex: none; }
.sx__arr::after { content: ""; position: absolute; right: -2px; top: -5px; width: 8px; height: 12px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sx { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr); gap: 14px; align-items: center; }
.sx__col { display: grid; gap: 10px; align-content: start; }
.sx__mid { display: grid; justify-items: center; gap: 8px; }
.sx__map { display: grid; gap: 6px; align-content: start; }
.sx__map li { display: grid; grid-template-columns: minmax(0, 1fr) 16px auto; align-items: center; gap: 10px; background: var(--bg); padding: 12px 14px; color: var(--ink-2); font-size: var(--t-small); }
.sx__map .ico { width: 14px; height: 14px; color: var(--ink-3); }
.sx__map b { padding: 2px 8px; background: var(--accent); color: #fff; font-size: var(--t-small); white-space: nowrap; }
.sx__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sx__tags .pill:not(.pill--on) { background: var(--bg); }
.vx { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.vx .ig-node { align-self: stretch; }
.vx__code, .ax code, .tx code { font-family: var(--mono); font-size: var(--t-small); }
.vx__code { justify-self: start; padding: 2px 6px; background: var(--surface); color: var(--ink); }
.vx__vault { display: grid; gap: 10px; }
.vx__vault .ig-label { display: flex; align-items: center; gap: 6px; }
.vx__vault .ico { width: 16px; height: 16px; color: var(--accent); }
.vx__log { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--ink); color: var(--track); font-size: var(--t-small); }
.vx__log .ico { width: 16px; height: 16px; flex: none; color: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
.vx__log b { color: #fff; }
.ax { display: grid; gap: 4px; }
.ax li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: 12px; background: var(--bg); padding: 10px 12px; color: var(--ink-3); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.ax code { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax b { color: var(--ink-2); font-weight: 600; }
.ax__out, .tx__flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ax__out .pill { background: var(--ink); color: #fff; }
.tx { display: grid; gap: 6px; }
.tx li { display: grid; grid-template-columns: minmax(0, 1fr) 120px; align-items: center; gap: 14px; background: var(--bg); padding: 12px 14px; }
.tx__m { display: grid; gap: 2px; color: var(--ink-3); font-size: var(--t-small); }
.tx__m code { color: var(--ink); }
.tx__spark { display: flex; align-items: end; gap: 3px; height: 32px; }
.tx__spark i { flex: 1; height: var(--h); background: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
.tx__spark i:last-child { background: var(--accent); }
@media (max-width: 1100px) { .vx { grid-template-columns: 1fr; } .vx .sx__arr { transform: rotate(90deg); margin: 6px 0 6px 18px; } }
@media (max-width: 560px) { .sx { grid-template-columns: 1fr; } .sx__mid { justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; } .ax li { grid-template-columns: 1fr; gap: 2px; } .tx li { grid-template-columns: 1fr; } }

/* Pipeline canvas, modeled on the factory configuration canvas: stage groups of node cards on a dotted canvas. */
.zz__row--wide .zz__text { grid-column: 1 / 9; }
.zz__row--wide .zz__viz { grid-column: 1 / -1; grid-row: 2; }
.zz__row--wide > .zz__list { grid-column: 1 / -1; grid-row: 3; margin-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
.pc { gap: 14px; }
.pc__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pc__crumb { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: var(--t-small); }
.pc__crumb .ico { width: 14px; height: 14px; }
.pc__crumb b { color: var(--ink); font-size: var(--t-h3); }
.pc__ver { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg); color: var(--ink-2); font-size: var(--t-small); font-weight: 600; }
.pc__ver .ico { width: 14px; height: 14px; }
.pc__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--t-small); color: var(--ink-3); }
.pc__tabs > span:not(.pc__route) { padding: 4px 12px; }
.pc__tabs .is-on { background: var(--bg); color: var(--ink); font-weight: 600; }
.pc__route { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; color: var(--ink-2); font-weight: 600; }
.pc__route .pill { background: var(--bg); }
.pc__canvas { position: relative; padding: 28px 24px 64px; background-color: var(--bg); background-image: radial-gradient(color-mix(in srgb, var(--ink) 16%, transparent) 1px, transparent 1.2px); background-size: 16px 16px; overflow: hidden; }
.pc__stages { display: flex; align-items: flex-start; gap: 0; }
.pc__stage { flex: 1 1 0; min-width: 0; display: grid; gap: 10px; padding: 12px; background: var(--surface); outline: 1px solid var(--track); outline-offset: -1px; }
.pc__sh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink-3); font-size: var(--t-small); }
.pc__sh .ico { width: 14px; height: 14px; }
.pc__sh b { color: var(--ink); font-size: var(--t-meta); }
.pc__sh .pill { margin-left: auto; padding: 1px 8px; }
.pc__stage ul { display: grid; gap: 8px; }
.pc__node { display: grid; gap: 6px; background: var(--bg); padding: 10px 12px; outline: 1px solid var(--track); outline-offset: -1px; font-size: var(--t-small); line-height: 1.3; }
.pc__node b { color: var(--ink); }
.pc__mode { justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; font-size: var(--t-small); font-weight: 600; }
.pc__mode .ico { width: 13px; height: 13px; }
.pc__mode--m { background: var(--ink); color: #fff; }
.pc__mode--a { background: var(--accent); color: #fff; }
.pc__mode--n { background: var(--bg); color: var(--ink-2); outline: 1px solid var(--track); outline-offset: -1px; }
.pc__agent { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); }
.pc__agent .ico { width: 13px; height: 13px; }
.pc__arr { position: relative; flex: none; align-self: center; width: 32px; height: 2px; background: var(--ink-3); }
.pc__arr::after { content: ""; position: absolute; right: 0; top: -4px; width: 7px; height: 10px; background: var(--ink-3); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pc__zoom { position: absolute; left: 16px; bottom: 12px; display: grid; gap: 2px; padding: 4px; background: var(--bg); outline: 1px solid var(--track); outline-offset: -1px; color: var(--ink-3); }
.pc__zoom .ico { width: 14px; height: 14px; }
.pc__zoom { grid-auto-flow: column; }
.pc__mini { position: absolute; right: 16px; bottom: 12px; display: flex; gap: 4px; align-items: center; padding: 8px; background: var(--surface); outline: 1px solid var(--accent); outline-offset: -1px; }
.pc__mini i { width: 18px; height: 12px; background: var(--ink-3); }
.pc__legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; color: var(--ink-3); font-size: var(--t-small); font-weight: 600; }
@media (max-width: 1000px) {
  .zz__row--wide .zz__text { grid-column: 1 / -1; }
  .zz__row--wide > .zz__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc__stages { flex-direction: column; align-items: stretch; }
  .pc__arr { width: 2px; height: 22px; margin-left: 24px; align-self: flex-start; }
  .pc__arr::after { right: auto; left: -4px; top: auto; bottom: 0; width: 10px; height: 7px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
}

/* Pipe: stages left to right with arrows between them. */
.pipe { display: flex; align-items: stretch; gap: 16px; }
.pipe__stage { flex: 1 1 0; min-width: 0; display: grid; gap: 10px; align-content: start; }
.pipe__arrow { align-self: center; width: 28px; }
/* Design to code: three equal stages, then the design system tokens that apply to all of them. */
.dz__steps { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr); align-items: stretch; }
.dz__stage { display: grid; grid-template-rows: auto 1fr; gap: 10px; min-width: 0; }
.dz__arr { position: relative; align-self: center; justify-self: center; width: 20px; height: 2px; margin-top: 24px; background: var(--ink); }
.dz__arr::after { content: ""; position: absolute; right: -2px; top: -5px; width: 8px; height: 12px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.dz__card { display: grid; grid-template-rows: auto 1fr auto; background: var(--bg); }
.dz__bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface); color: var(--ink); font-size: var(--t-small); font-weight: 600; outline: 1px solid var(--bg); }
.dz__bar .ico, .dz__bar .logo { width: 15px; height: 15px; color: var(--accent); }
.dz__bar em { margin-left: auto; padding: 0 8px; background: var(--accent); color: #fff; font-style: normal; }
.dz__note { display: flex; align-items: center; gap: 6px; padding: 10px 12px; color: var(--ink-3); font-size: var(--t-small); }
.dz__note .ico { width: 14px; height: 14px; }
.dz__frame { display: grid; gap: 8px; align-content: start; margin: 14px; padding: 14px; outline: 1px dashed color-mix(in srgb, var(--accent) 60%, var(--bg)); outline-offset: -1px; }
.dz__frame i { display: block; height: 22px; background: var(--surface); }
.dz__frame .dz__h { width: 45%; height: 12px; background: var(--ink); }
.dz__frame .dz__r--on { outline: 2px solid var(--accent); outline-offset: -2px; }
.dz__frame .dz__b { height: 26px; margin-top: 4px; background: var(--accent); }
.dz__spec { background: var(--ink); }
.dz__spec .dz__bar { background: color-mix(in srgb, var(--bg) 9%, var(--ink)); color: #fff; outline: 0; }
.dz__spec .dz__bar .ico { color: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
.dz__code { display: grid; gap: 4px; align-content: start; padding: 14px; color: var(--track); font-family: var(--mono); font-size: var(--t-small); line-height: 1.4; }
.dz__code em { color: color-mix(in srgb, var(--bg) 62%, var(--ink)); font-style: normal; }
.dz__code b { color: color-mix(in srgb, var(--accent) 45%, var(--bg)); font-weight: 400; }
.dz__spec .dz__note { color: color-mix(in srgb, var(--bg) 62%, var(--ink)); }
.dz__app { display: grid; gap: 8px; align-content: start; padding: 14px; font-size: var(--t-small); }
.dz__app b { color: var(--ink); font-size: var(--t-meta); }
.dz__row { padding: 7px 10px; color: var(--ink); outline: 1px solid var(--track); outline-offset: -1px; }
.dz__row--on { outline: 2px solid var(--accent); outline-offset: -2px; }
.dz__pay { margin-top: 2px; padding: 8px; background: var(--accent); color: #fff; font-weight: 600; text-align: center; border-radius: var(--pill); }
.dz__libs { display: grid; gap: 1px; background: var(--surface); }
.dz__libs li { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--bg); color: var(--ink); font-size: var(--t-small); font-weight: 600; }
.dz__libs .ico, .dz__libs .logo { width: 15px; height: 15px; color: var(--accent); }
.dz__tokens { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px 28px; padding: 14px 16px; background: var(--bg); }
.dz__tokens .ig-label { grid-column: 1 / -1; }
.dz__sw { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.dz__sw li { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-family: var(--mono); font-size: var(--t-small); }
.dz__sw i { width: 18px; height: 18px; background: var(--c); outline: 1px solid var(--track); outline-offset: -1px; }
.dz__type { display: flex; align-items: baseline; gap: 10px; color: var(--ink); font-weight: 700; line-height: 1; }
.dz__type span:nth-child(1) { font-size: 1.75rem; } .dz__type span:nth-child(2) { font-size: 1.25rem; } .dz__type span:nth-child(3) { font-size: var(--t-small); font-weight: 400; }
.dz__type em, .dz__space em { color: var(--ink-3); font-family: var(--mono); font-size: var(--t-small); font-style: normal; font-weight: 400; }
.dz__space { display: flex; align-items: end; gap: 4px; }
.dz__space i { width: 8px; background: var(--accent); }
.dz__space i:nth-child(1) { height: 8px; } .dz__space i:nth-child(2) { height: 14px; } .dz__space i:nth-child(3) { height: 20px; }
.dz__space em { margin-left: 6px; }
.dz__tokens { grid-template-columns: minmax(0, 1fr) auto auto; }
.dz__sw { grid-column: 1; }
@media (max-width: 1000px) {
  .pipe { flex-direction: column; }
  .dz__steps { grid-template-columns: 1fr; gap: 0; }
  .dz__arr { width: 2px; height: 22px; margin: 8px 0 8px 24px; justify-self: start; }
  .dz__arr::after { right: auto; left: -5px; top: auto; bottom: -2px; width: 12px; height: 8px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .dz__tokens { grid-template-columns: 1fr; }
}

/* Zigzag feature rows: text on one side, an illustration on the other, alternating. */
.zz { margin-top: clamp(64px, 8vw, 120px); display: grid; gap: clamp(64px, 8vw, 120px); }
.zz__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--gap); align-items: center; }
.zz__text { grid-column: 1 / 6; }
.zz__viz { grid-column: 6 / 13; display: grid; gap: 18px; background: var(--surface); padding: clamp(20px, 3vw, 40px); }
.zz__row:nth-child(even) .zz__text { grid-column: 8 / 13; grid-row: 1; }
.zz__row:nth-child(even) .zz__viz { grid-column: 1 / 8; grid-row: 1; }
.zz__text h3 { font-size: var(--t-claim); line-height: 1.1; letter-spacing: -0.02em; }
.zz__intro { margin-top: 16px; color: var(--ink-2); font-size: var(--big); line-height: 1.4; }
.zz__list { margin-top: 28px; display: grid; gap: 16px; }
.zz__list li { display: grid; gap: 2px; padding-left: 22px; position: relative; color: var(--ink-2); font-size: var(--t-meta); line-height: 1.5; }
.zz__list li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 10px; height: 10px; background: var(--accent); }
.zz__list strong { color: var(--ink); }
.modes .legend { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--ink-2); font-size: var(--t-small); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; color: var(--ink-2); font-size: var(--t-small); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.versions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.versions .pill:not(.pill--on):not(.pill--ink) { background: var(--bg); }
/* agents */
.compose { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.2fr); align-items: center; }
.compose__in { display: grid; gap: 6px; }
.compose__plus { justify-self: center; color: var(--ink); font-size: var(--t-h3l); font-weight: 700; line-height: 1; }
.compose__out .pill { margin-top: 8px; }
.spec-list { display: grid; gap: 6px; margin-top: 6px; }
.spec-list div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px; }
.spec-list dt { color: var(--fv-muted, var(--ink-3)); color: color-mix(in srgb, var(--bg) 62%, var(--ink)); }
.spec-list dd { margin: 0; color: #fff; }
/* verifications */
.diffbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--ink-2); font-size: var(--t-small); }
.diffbar b { color: var(--ink); }
.diffbar .ico { color: var(--accent); }
.checks { display: grid; gap: 6px; }
.check { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; background: var(--bg); padding: 12px 14px; color: var(--ink); font-size: var(--t-small); font-weight: 600; }
.check > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.check > span:first-child .ico { color: var(--accent); }
.check--fixed { outline: 2px solid var(--accent); outline-offset: -2px; }
.check .pills { margin: 0; }
/* learning loop */
.loop3 { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); grid-template-rows: auto 24px auto 24px auto; align-items: center; }
.loop3__n1 { grid-area: 1 / 1; } .loop3__arrow--r { grid-area: 1 / 2; } .loop3__n2 { grid-area: 1 / 3; }
.loop3__core { grid-area: 2 / 2 / 5 / 3; }
.loop3__n4 { grid-area: 5 / 1; } .loop3__arrow--l { grid-area: 5 / 2; } .loop3__n3 { grid-area: 5 / 3; }
.loop3__arrow--d { grid-area: 2 / 3 / 5 / 4; } .loop3__arrow--u { grid-area: 2 / 1 / 5 / 2; }
.loop3__arrow { position: relative; background: var(--ink); }
.loop3__arrow--r, .loop3__arrow--l { height: 2px; margin: 0 8px; }
.loop3__arrow--d, .loop3__arrow--u { width: 2px; height: 100%; margin: 8px 0; justify-self: center; }
.loop3__arrow::after { content: ""; position: absolute; background: var(--ink); }
.loop3__arrow--r::after { right: -2px; top: -5px; width: 8px; height: 12px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.loop3__arrow--l::after { left: -2px; top: -5px; width: 8px; height: 12px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.loop3__arrow--d::after { bottom: -2px; left: -5px; width: 12px; height: 8px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.loop3__arrow--u::after { top: -2px; left: -5px; width: 12px; height: 8px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.loop3__core { grid-column: 1 / 4; justify-self: center; display: grid; justify-items: center; gap: 8px; padding: 16px 0; text-align: center; }
.loop3__core b { color: var(--ink); font-size: var(--t-h3l); }
.loop3__bars { display: flex; align-items: end; gap: 5px; height: 56px; }
.loop3__bars i { width: 14px; height: var(--h); background: color-mix(in srgb, var(--accent) 35%, var(--bg)); }
.loop3__bars i:last-child { background: var(--accent); }
@media (max-width: 1000px) {
  .zz__text, .zz__viz, .zz__row:nth-child(even) .zz__text, .zz__row:nth-child(even) .zz__viz { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 560px) {
  .zz__row--wide > .zz__list { grid-template-columns: 1fr; }
  .route, .compose { grid-template-columns: 1fr; gap: 8px; }
      .loop3 { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); }
}

/* Use cases */
/* The cards share one row grid (subgrid), so number, title, sub-label, outcome and results line up across cards. */
.uses { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.use { background: var(--surface); padding: clamp(24px, 2.6vw, 40px); color: var(--ink-2); font-size: var(--t-meta); display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 14px; align-content: start; }
.use__num { color: var(--accent); font-size: var(--t-claim); font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.use h3 { color: var(--ink); font-size: var(--t-h3l); }
.use__kind { margin-top: -8px; color: var(--ink-3); font-size: var(--t-small); font-weight: 600; }
.use__outcome { margin: 10px 0 6px; padding: clamp(18px, 2vw, 24px); background: var(--ink); color: #fff; font-size: var(--t-h3l); font-weight: 700; line-height: 1.22; letter-spacing: -0.015em; text-wrap: balance; }
.use__outcome em { font-style: normal; color: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
.use__results { display: grid; gap: 18px; align-content: start; margin-top: 6px; }
.use__results li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: start; color: var(--ink-2); font-size: var(--t-small); line-height: 1.5; }
.use__results strong { grid-column: 2; color: var(--ink); font-size: var(--t-body); font-weight: 700; line-height: 1.3; }
.use__results li > :not(.use__ico):not(strong) { grid-column: 2; }
.use__ico { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; background: var(--accent); color: #fff; }
.use__ico .ico { width: 20px; height: 20px; }
/* Organization use cases: a Deep Ink band with three cards, each led by a small visual. */
.uc2 { margin-top: var(--gap); background: var(--ink); color: var(--track); padding: clamp(24px, 3.4vw, 48px); }
.uc2__lead { margin-bottom: clamp(20px, 2.4vw, 32px); color: #fff; font-size: var(--t-h3l); font-weight: 700; letter-spacing: -0.01em; }
.uc2__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.uc2__card { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 14px; align-content: start; }
.uc2__card h3 { color: #fff; font-size: var(--t-h3l); }
.uc2__ico { display: grid; place-items: center; width: 40px; height: 40px; background: var(--accent); color: #fff; }
.uc2__ico .ico { width: 20px; height: 20px; }
.uc2__out { color: #fff; font-size: var(--t-body); font-weight: 700; line-height: 1.35; }
.uc2__out em { font-style: normal; color: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
.uc2__pts { display: grid; gap: 10px; align-content: start; font-size: var(--t-small); line-height: 1.5; }
.uc2__pts li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.uc2__pts .ico { width: 16px; height: 16px; margin-top: 2px; color: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
.uc2__viz { display: grid; grid-template-rows: 66px 84px auto; align-content: start; padding: 18px; background: color-mix(in srgb, var(--bg) 9%, var(--ink)); }
.uc2__top { grid-row: 1; }
.uc2__kpi { display: flex; align-items: center; gap: 10px; }
.uc2__kpi b { color: #fff; font-size: var(--t-h3l); line-height: 1.1; }
.uc2__cap { margin-top: 2px; color: color-mix(in srgb, var(--bg) 62%, var(--ink)); font-size: var(--t-small); }
.uc2__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.uc2__tags .pill:not(.pill--on) { background: color-mix(in srgb, var(--bg) 16%, var(--ink)); color: #fff; }
.uc2__bars { grid-row: 2; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: end; gap: 6px; border-bottom: 2px solid color-mix(in srgb, var(--accent) 75%, var(--ink)); }
.uc2__bars i { height: var(--h); background: color-mix(in srgb, var(--accent) 45%, var(--ink)); }
.uc2__bars i:last-child { background: var(--accent); }
.uc2__axis span { display: grid; gap: 2px; } .uc2__axis span:last-child { text-align: right; } .uc2__axis b { color: #fff; font-size: var(--t-meta); }
.uc2__axis { grid-row: 3; display: flex; justify-content: space-between; margin-top: 14px; line-height: 1.4; color: color-mix(in srgb, var(--bg) 62%, var(--ink)); font-size: var(--t-small); }
/* Gates and steps stand on the same 84px baseline as the cost bars. */
.uc2__gates, .uc2__time { grid-row: 2 / 4; position: relative; display: grid; align-items: start; gap: 10px; }
.uc2__gates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.uc2__time { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uc2__gates::before, .uc2__time::before { content: ""; position: absolute; top: 84px; left: 0; right: 0; height: 2px; background: color-mix(in srgb, var(--accent) 75%, var(--ink)); }
.uc2__gates li, .uc2__time li { display: grid; grid-template-rows: 84px auto auto; gap: 2px; font-size: var(--t-small); line-height: 1.4; color: color-mix(in srgb, var(--bg) 62%, var(--ink)); }
.uc2__gates b, .uc2__time b { margin-top: 14px; color: #fff; font-size: var(--t-meta); }
.uc2__gate { align-self: end; display: grid; place-items: center; width: 36px; height: 36px; background: #fff; color: var(--ink); }
.uc2__gates .is-on .uc2__gate { background: var(--accent); color: #fff; }
.uc2__gate .ico { width: 18px; height: 18px; }
.uc2__step { align-self: end; display: flex; align-items: flex-start; height: 34px; padding: 8px; background: color-mix(in srgb, var(--accent) 38%, var(--ink)); color: #fff; }
.uc2__time li:nth-child(2) .uc2__step { height: 56px; background: color-mix(in srgb, var(--accent) 62%, var(--ink)); }
.uc2__time li:nth-child(3) .uc2__step { height: 84px; background: var(--accent); }
.uc2__step .ico { width: 18px; height: 18px; }
.uc2__card { min-width: 0; }
@media (max-width: 1000px) { .uc2__grid { grid-template-columns: 1fr; } .uc2__card { grid-row: auto; grid-template-rows: none; } }

/* Stack infographic: four layers as rows of brand logos, with a bracket that spans them all. */

/* Cards: four square cards in one row, each with its items as square tags. Integrations and deployment use them. */
.ent .cards, .ent .measure, .ent .ent__controls { grid-column: 1 / -1; }
.ent .measure { margin-top: 0; }
@media (min-width: 1101px) { .ent .measure { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.head + .cards { margin-top: clamp(48px, 6vw, 80px); }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.cards > li { background: var(--surface); padding: clamp(20px, 2.4vw, 32px); }
.cards h3 { font-size: var(--t-body); font-weight: 700; }
.cards p { margin-top: 8px; color: var(--ink-2); font-size: var(--t-small); line-height: 1.5; }
.tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; background: var(--bg); color: var(--ink); font-size: var(--t-small); font-weight: 600; }
.tags .logo { width: 14px; height: 14px; }
.ig-node b .logo { width: 18px; height: 18px; }
@media (max-width: 1000px) { .cards, .ent__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }

/* Enterprise */
/* Security: two-tone heading on the left; drawn compliance badges and a two-column list of controls on the right. */
.ent { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; align-items: start; }
.ent__title { grid-column: 1 / 7; }
.ent__title span { display: block; color: var(--ink-3); }
.ent__body { grid-column: 7 / 13; display: grid; gap: clamp(40px, 4vw, 56px); }
.ent__badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.badge { display: grid; justify-items: center; gap: 14px; background: var(--surface); padding: clamp(24px, 3vw, 40px) 16px; }
.badge p { color: var(--ink-2); font-size: var(--t-small); font-weight: 600; }
.badge__mark { width: clamp(88px, 8vw, 120px); height: auto; }
.badge__ring { fill: none; stroke: var(--ink-3); stroke-width: 2; }
.badge__plate { fill: var(--surface); }
.badge__big { fill: var(--ink-2); font-weight: 700; font-size: 22px; font-family: inherit; }
.badge__mid { fill: var(--ink-2); font-weight: 700; font-size: 18px; font-family: inherit; }
.badge__small { fill: var(--ink-3); font-weight: 600; font-size: 12px; font-family: inherit; letter-spacing: 0.04em; }
.ent__controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px var(--gap); color: var(--ink-2); font-size: var(--t-meta); }
.ent__controls li { position: relative; padding-left: 20px; line-height: 1.45; }
.ent__controls li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; background: var(--ink); }
@media (max-width: 1100px) { .ent__title, .ent__body { grid-column: 1 / -1; } }

.measure { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px var(--gap); align-items: start; }
.measure--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.measure__col > p { margin-top: 12px; color: var(--ink-2); font-size: var(--t-meta); }
.measure__title { font-size: var(--t-h3l); }
.metrics, .loop { margin-top: 28px; display: grid; gap: 8px; }
.metrics div, .loop li { background: var(--surface); padding: 16px 20px; font-size: var(--t-small); color: var(--ink-2); line-height: 1.45; }
.metrics dt, .loop strong { display: block; color: var(--ink); font-weight: 700; font-size: var(--t-meta); margin-bottom: 4px; }
.metrics dd { margin: 0; }

/* CTA */
.cta { background: var(--surface); padding: clamp(80px, 10vw, 144px) 0; }
.cta__grid { align-items: start; }
.cta__grid > div { grid-column: 1 / 9; }
.cta__lead { margin-top: 24px; font-size: var(--big); line-height: 1.4; color: var(--ink-2); max-width: 40ch; }
.cta__actions { margin-top: clamp(32px, 3.5vw, 48px); }
.cta__legal { grid-column: 10 / 13; display: grid; gap: 12px; align-content: start; justify-items: start; padding-top: 12px; font-size: var(--t-meta); }
.cta__legal a { color: var(--ink-2); text-underline-offset: 4px; text-decoration-color: var(--accent); }
.cta__legal a:hover { color: var(--accent); }
.page-index .foot__legal { display: none; }
@media (max-width: 1000px) { .cta__legal { grid-column: 1 / -1; padding-top: 0; margin-top: 32px; } }

/* Inner pages */
.page__title { font-size: var(--h2); max-width: 20ch; }
.prose h2 { font-size: var(--t-h3l); max-width: none; margin-top: 48px; }
.prose p { margin-top: 12px; max-width: 65ch; color: var(--ink-2); }
.prose p, .prose li { overflow-wrap: break-word; }
.prose { padding-bottom: 24px; }
.prose .page__title { margin-bottom: 8px; }
.prose h3 { margin-top: 32px; font-size: var(--t-h3); }
.prose h4 { margin-top: 24px; color: var(--ink); font-size: var(--t-meta); font-weight: 700; }
.prose ul, .prose ol { margin-top: 10px; max-width: 65ch; display: grid; gap: 6px; color: var(--ink-2); }
.prose ul li { position: relative; padding-left: 20px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; background: var(--accent); }
.prose a { color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--accent); overflow-wrap: anywhere; }
.prose a:hover { color: var(--accent); }
.prose h2, .prose h3 { scroll-margin-top: 96px; }
.toc { margin-top: 32px; max-width: 65ch; padding: 20px 24px; background: var(--surface); }
.toc__h { margin: 0 0 10px; color: var(--ink); font-weight: 700; }
.prose .toc ol { margin-top: 0; gap: 4px; font-size: var(--t-small); }
.toc li.toc__sub { padding-left: 20px; }
.legal-table { margin-top: 16px; overflow-x: auto; }
.legal-table table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--t-small); }
.legal-table th, .legal-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--track); color: var(--ink-2); }
.legal-table thead th { border-bottom: 3px solid var(--ink); color: var(--ink); font-weight: 700; }
.legal-table tbody th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.legal-table code { font-family: var(--mono); font-size: var(--t-small); }

/* Footer */
.foot { padding: 40px 0; background: var(--surface); }
.foot__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; color: var(--ink-3); font-size: var(--t-small); }
.foot__bar a { color: var(--ink-2); text-underline-offset: 4px; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot__bar p:last-child { margin-left: auto; }

/* Tablet */
@media (max-width: 1100px) {
        .rail__title, .rail ul { grid-column: 1 / -1; }
  .rail ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .measure { grid-template-columns: 1fr; max-width: 760px; }
}
@media (max-width: 1000px) {
  .ent__title, .ent__body, .cta__grid > div,
  .head h2, .head .intro, .hero .wrap > .hero__lead { grid-column: 1 / -1; }
  .uses { grid-template-columns: 1fr; }
}

/* Phone */
@media (max-width: 760px) {
  .foot__bar p:last-child { margin-left: 0; }
}
@media (max-width: 560px) {
  .rail ul, .ent__controls { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}