/*
 * Built from site/brand.json. The palette is inherited verbatim from
 * apps/admin/public/styles.css so the site and the product it ships look like the
 * same thing — a landing page in a different visual language than the software is
 * a small lie told before the first paragraph.
 *
 * Dark values are derived here rather than in brand.json: they are a rendering
 * concern, not a brand decision.
 */

/* The two faces the art direction is written in, vendored under assets/fonts.
 * `font-display: swap` is the honest setting for a site whose whole argument is
 * that nothing is hidden while you wait: the fallback stack renders immediately
 * and the display face replaces it, rather than holding a blank headline. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-grotesque-latin-var.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Spline Sans Mono';
  src: url('fonts/spline-sans-mono-latin-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #18211c;
  --muted: #647067;
  --line: #dce1da;
  --surface: #ffffff;
  --paper: #f3f5f1;
  --accent: #1f6f50;
  --accent-soft: #e4f2eb;
  --warning: #9b5c0a;
  --warning-soft: #fff0d8;
  --danger: #a23636;
  --danger-soft: #fbe7e7;
  --shadow: 0 18px 50px rgba(27, 44, 34, 0.08);
  --sans: 'Bricolage Grotesque', 'Avenir Next', Avenir, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root:not([data-theme='light']) {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ink: #edf2ee;
    --muted: #8f9d94;
    --line: #232b26;
    --surface: #101512;
    --paper: #0a0d0b;
    --accent: #34d399;
    --accent-soft: #10231b;
    --warning: #e0a856;
    --warning-soft: #33270f;
    --danger: #e08585;
    --danger-soft: #331c1c;
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --ink: #edf2ee;
  --muted: #8f9d94;
  --line: #232b26;
  --surface: #101512;
  --paper: #0a0d0b;
  --accent: #34d399;
  --accent-soft: #10231b;
  --warning: #e0a856;
  --warning-soft: #33270f;
  --danger: #e08585;
  --danger-soft: #331c1c;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(52rem 26rem at 82% -6rem, color-mix(in srgb, var(--accent) 9%, transparent), transparent 68%),
    radial-gradient(40rem 22rem at 8% -4rem, color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%),
    var(--paper);
  background-repeat: no-repeat;
  background-attachment: scroll;
  color: var(--ink);
  font-family: var(--sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell { width: min(1140px, calc(100% - 44px)); margin: 0 auto; }
.narrow { width: min(820px, calc(100% - 44px)); margin: 0 auto; }

/* ---------------------------------------------------------------- skip link */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- nav */

body > .shell:has(> .nav) {
  position: sticky; top: 0; z-index: 40;
  width: 100%; max-width: none; margin: 0; padding: 0;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
body > .shell:has(> .nav) > .nav {
  width: min(1140px, calc(100% - 44px)); margin: 0 auto; border-bottom: 0;
}
.nav {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; text-decoration: none; font-size: 16px; }
.wordmark svg { width: 24px; height: 24px; flex-shrink: 0; }
.nav-links { display: flex; gap: 18px; align-items: center; font-size: 13.5px; flex-wrap: wrap; justify-content: flex-end; }
.nav-links a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current] { color: var(--ink); font-weight: 700; }
/* Retained: pages other than this partial still mark optional links with it. */
@media (max-width: 720px) { .nav-links .hide-sm { display: none; } }

/* The phone half of the navigation. No script runs on this site, so the disclosure is the
   element itself rather than a menu a button opens. Above the breakpoint it is removed
   outright, which is also what takes it out of the accessibility tree — the bar and the
   disclosure hold the same eight links and only one of them is ever present. */

.nav-menu { display: none; position: relative; border: 0; background: none; border-radius: 0; margin: 0; overflow: visible; }
.nav-menu > summary {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px; font-size: 13.5px; font-weight: 650; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  cursor: pointer; list-style: none;
}
.nav-menu > summary::after { content: none; }
.nav-menu[open] > summary::after { content: none; }
.nav-menu[open] > summary { border-color: var(--accent); color: var(--accent); }
.nav-menu-bars {
  width: 15px; height: 9px; flex-shrink: 0;
  border-top: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  position: relative;
}
.nav-menu-bars::after {
  content: ''; position: absolute; left: 0; top: 50%; width: 100%;
  border-top: 1.6px solid currentColor; transform: translateY(-50%);
}
.nav-menu-panel {
  position: absolute; right: 0; top: calc(100% + 9px); z-index: 30;
  display: grid; width: max(190px, min(260px, calc(100vw - 44px)));
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 6px; box-shadow: var(--shadow);
}
.nav-menu-panel a {
  padding: 10px 12px; border-radius: 8px;
  font-size: 14.5px; color: var(--ink); text-decoration: none;
}
.nav-menu-panel a:hover { background: var(--paper); }
.nav-menu-panel a + a { border-top: 1px solid var(--line); }

@media (max-width: 860px) {
  .nav { gap: 14px; }
  .nav-links { display: none; }
  .nav-menu { display: block; }
}

/* ---------------------------------------------------------------- status banner */

.status-banner {
  background: transparent; color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-size: 12px; padding: 7px 0; font-weight: 500;
}
.status-banner .shell { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.status-banner strong { font-weight: 700; color: var(--ink); }

/* ---------------------------------------------------------------- hero */

.hero { padding: 56px 0 12px; }
.eyebrow, .kicker {
  margin: 0 0 14px; font-size: 11px; font-weight: 850;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
h1 {
  margin: 0; max-width: 19ch;
  font-size: clamp(36px, 5.4vw, 64px); line-height: 1.04; letter-spacing: -.04em; font-weight: 800;
  background: linear-gradient(135deg, var(--ink) 55%, color-mix(in srgb, var(--ink) 45%, var(--accent)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { max-width: 62ch; margin: 22px 0 0; color: var(--muted); font-size: clamp(17px, 2.2vw, 20px); }
.lede strong { color: var(--ink); font-weight: 650; }

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; align-items: center; }
.button {
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: 12px; padding: 13px 20px; font-weight: 750; font-size: 15px;
  text-decoration: none; border: 1px solid transparent; transition: transform .15s ease;
}
.button:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .button:hover { transform: none; } }
.button.primary {
  background: var(--accent); color: var(--paper);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 8px 24px color-mix(in srgb, var(--accent) 28%, transparent);
}
.button.primary:hover { box-shadow: 0 0 0 1px var(--accent), 0 10px 32px color-mix(in srgb, var(--accent) 40%, transparent); }
.button.secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.button.secondary:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.cta-note { font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------- code */

.code {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px; overflow-x: auto; box-shadow: var(--shadow);
  font-family: var(--mono); font-size: 13.5px; line-height: 1.75;
}
.code pre { margin: 0; }
.code .c { color: var(--muted); }
.code .k { color: var(--accent); font-weight: 700; }
.code .s { color: var(--warning); }

/* ---------------------------------------------------------------- sections */

section { padding: 76px 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; }
h2 { margin: 0 0 16px; font-size: clamp(27px, 4vw, 40px); letter-spacing: -.035em; line-height: 1.08; font-weight: 800; max-width: 20ch; }
h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.015em; font-weight: 750; }
.section-lede { max-width: 60ch; color: var(--muted); margin: 0 0 40px; font-size: 17px; }

/* Human product journey. Retrieval pages keep the compact components below; these layouts give
   the product pages a slower rhythm and make the lifecycle readable without knowing the CLI. */
.hero-product { padding-top: clamp(62px, 7vw, 96px); padding-bottom: 64px; }
.hero-product h1 { max-width: 18ch; font-size: clamp(44px, 6vw, 72px); }
.hero-proof { margin-top: 48px; padding: 18px 22px; border-left: 3px solid var(--accent); background: var(--surface); display: grid; gap: 2px; max-width: 620px; font-size: 18px; }
.hero-proof strong { font-size: 24px; }
.choice-grid,.feature-grid,.proof-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.choice-grid article,.feature-grid article,.proof-strip article { padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.choice-grid .choice-accent { border-color:var(--accent); box-shadow:var(--shadow); }
.lifecycle { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; padding:1px; margin:34px 0; list-style:none; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.lifecycle li { min-width:0; min-height:76px; padding:18px 14px; background:var(--surface); font-weight:700; position:relative; }
.lifecycle li:not(:last-child)::after { content:'→'; position:absolute; right:8px; bottom:7px; color:var(--accent); z-index:2; }
.system-rails { display:flex; gap:10px; flex-wrap:wrap; padding:16px; border:1px solid var(--accent); border-radius:14px; background:var(--accent-soft); }
.system-rails span { flex:1; min-width:150px; text-align:center; font-size:13px; font-weight:750; }
.boundary-note { margin-top:28px; padding:18px 20px; border:1px solid var(--line); border-radius:12px; color:var(--muted); background:var(--paper); }
.feature-grid { grid-template-columns:repeat(2,1fr); }
.feature-grid article a,.section-link a { color:var(--accent); font-weight:700; text-underline-offset:3px; }
.agent-loop { list-style:none; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.agent-loop li { padding:20px 16px; border-top:3px solid var(--accent); background:var(--surface); }
.agent-loop strong,.agent-loop span { display:block; }.agent-loop span { margin-top:8px; color:var(--muted); font-size:14px; }
.solution-grid,.resource-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.solution-grid a,.resource-grid a { padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--surface); text-decoration:none; }
.solution-grid a:hover,.resource-grid a:hover { border-color:var(--accent); }.solution-grid strong,.solution-grid span { display:block; }.solution-grid span { color:var(--muted); margin-top:6px; }
.proof-strip article { display:grid; gap:8px; }.proof-strip span { color:var(--muted); }
.final-cta { text-align:center; padding-block:110px; }.final-cta h2 { margin-inline:auto; max-width:24ch; }.final-cta .cta { justify-content:center; }
.outcome-chain { display:flex; gap:8px; flex-wrap:wrap; }.outcome-chain span { padding:10px 14px; border-radius:999px; background:var(--accent-soft); font-weight:700; font-size:13px; }
.journey-detail { margin-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.journey-detail p,.benchmark-note,.proof-note { margin:0; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.benchmark-note { max-width:720px; }
.benchmark-note strong,.benchmark-note span,.proof-dimension { display:block; }
.benchmark-note p { margin:6px 0; color:var(--ink); }
.benchmark-note span,.proof-dimension { color:var(--muted); font-size:13px; }
.feature-grid .limit { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
@media (max-width:760px){.choice-grid,.feature-grid,.proof-strip,.agent-loop,.solution-grid,.resource-grid{grid-template-columns:1fr}.hero-product{padding-top:58px}.hero-product h1{font-size:clamp(40px,12vw,58px)}section{padding:58px 0}.lifecycle{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.journey-detail{grid-template-columns:1fr}.nav-menu-panel{max-height:calc(100vh - 100px);overflow:auto}.hero-proof{margin-top:32px}.final-cta{padding-block:76px}}

/* ---------------------------------------------------------------- cards */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 26px; box-shadow: var(--shadow);
  transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.card .limit {
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line);
  font-size: 13.5px; color: var(--muted);
}
.card .limit b { color: var(--warning); font-weight: 800; letter-spacing: .04em; font-size: 11px; text-transform: uppercase; display: block; margin-bottom: 5px; }
.evidence { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.evidence code {
  font-family: var(--mono); font-size: 11.5px; background: var(--accent-soft); color: var(--accent);
  border-radius: 7px; padding: 4px 8px; font-weight: 600;
}

/* ---------------------------------------------------------------- flow */

.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 8px; }
.flow > div { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; box-shadow: var(--shadow); }
.flow span {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 850; margin-bottom: 14px;
}
.flow strong { display: block; font-size: 15px; }
.flow small { display: block; color: var(--muted); margin-top: 6px; line-height: 1.45; }

/* ---------------------------------------------------------------- comparison table */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; min-width: 620px; }
th, td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14.5px; }
thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 800; }
tbody tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 700; }

/* ---------------------------------------------------------------- limits */

.limits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.limit-card {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--warning);
  border-radius: 14px; padding: 20px 22px;
}
.limit-card h3 { margin: 0 0 6px; font-size: 15.5px; }
.limit-card p { margin: 0; color: var(--muted); font-size: 14px; }

/* ---------------------------------------------------------------- quote / callout */

.callout {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  border-radius: 0 16px 16px 0; padding: 24px 28px; margin: 0;
}
.callout p { margin: 0; font-size: 17px; }
.callout p + p { margin-top: 12px; }

/* ---------------------------------------------------------------- faq */

details {
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  padding: 0; margin-bottom: 10px; overflow: hidden;
}
summary { cursor: pointer; padding: 18px 22px; font-weight: 700; font-size: 15.5px; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; float: right; color: var(--muted); font-weight: 400; font-size: 20px; line-height: 1; }
details[open] summary::after { content: '−'; }
details > p { margin: 0; padding: 0 22px 20px; color: var(--muted); font-size: 15px; }

/* ---------------------------------------------------------------- footer */

footer { border-top: 1px solid var(--line); padding: 44px 0 60px; color: var(--muted); font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 28px; margin-bottom: 32px; }
.footer-grid h4 { margin: 0 0 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); }
.footer-grid a { display: block; margin-bottom: 8px; text-decoration: none; }
.footer-grid a:hover { color: var(--ink); }
.colophon { padding-top: 26px; border-top: 1px solid var(--line); font-size: 13px; }

/* ---------------------------------------------------------------- utilities */

.stack-lg > * + * { margin-top: 44px; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }

/* ==================================================================
 * Hub-and-spoke: the pillar and spoke pages generated by
 * scripts/site-clusters.js, and the rails they hang evidence from.
 * docs/marketing/SITE_ARCHITECTURE.md is the contract these render.
 *
 * Typography here is quieter and denser than the landing page above:
 * these are documentation pages read by developers and by machines,
 * and a spoke page is judged on how fast its boundary can be found.
 * ================================================================== */

/* ---------------------------------------------------------------- breadcrumbs */

.breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  margin: 0 0 16px; padding: 0; list-style: none;
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.breadcrumbs li { display: flex; align-items: baseline; gap: 8px; margin: 0; }
/* Direct children only, and one rule per plausible markup: a list of <li>, or bare <a>
   siblings. An explicit separator element between two links stops both from matching, so a
   generator that writes its own separators does not get a second one from here. */
.breadcrumbs > li + li::before,
.breadcrumbs > a + a::before { content: '/'; color: var(--line); margin-right: 8px; }
.breadcrumbs a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.breadcrumbs a:hover { color: var(--ink); border-bottom-color: var(--line); }
.breadcrumbs [aria-current='page'], .breadcrumbs strong { color: var(--ink); font-weight: 650; }

/* ---------------------------------------------------------------- pillar page */

.cluster-hero {
  padding: 40px 0 6px; border-top: 0;
}
.cluster-hero h1 {
  max-width: 22ch; font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.05; letter-spacing: -.035em;
}
.cluster-hero > p { max-width: 66ch; margin: 18px 0 0; color: var(--muted); font-size: 17px; }
.cluster-hero > p strong { color: var(--ink); font-weight: 650; }

.cluster-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; margin: 0; padding: 0; list-style: none;
}

.cluster-card {
  display: flex; flex-direction: column; gap: 6px; margin: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 22px; color: inherit; text-decoration: none;
}
.cluster-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.cluster-card h2, .cluster-card h3 {
  margin: 0; max-width: none;
  font-size: 16px; line-height: 1.3; letter-spacing: -.015em; font-weight: 750; color: var(--ink);
}
.cluster-card a { color: inherit; text-decoration: none; }
.cluster-card:hover h2, .cluster-card:hover h3, .cluster-card a:hover { color: var(--accent); }
.cluster-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.cluster-card .evidence { margin-top: 10px; }

/* The plain-English second name. Inside a card it is a caption under the title; beside an
   h1 it is a subtitle. Same idea, two weights, because the surrounding type differs. */
.card-plain,
.cluster-card .card-plain {
  margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .005em; color: var(--accent);
}
.plain-name,
.cluster-hero .plain-name,
.spoke-hero .plain-name {
  margin: 12px 0 0; max-width: 48ch;
  font-size: clamp(15px, 1.8vw, 17px); font-weight: 600; line-height: 1.4;
  letter-spacing: -.005em; color: var(--accent);
}

/* ---------------------------------------------------------------- spoke page */

.spoke-hero { padding: 36px 0 4px; border-top: 0; }
.spoke-hero h1 {
  max-width: 24ch; font-size: clamp(27px, 3.6vw, 40px);
  line-height: 1.08; letter-spacing: -.03em;
}
.spoke-hero > p { max-width: 68ch; margin: 16px 0 0; color: var(--muted); font-size: 16.5px; }
.spoke-hero > p strong { color: var(--ink); font-weight: 650; }

/* "People ask this as:" — the search intent, printed rather than hidden in a meta tag. */
.intent-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 9px;
  margin: 18px 0 0; font-size: 13px; color: var(--muted);
}
.intent-line b, .intent-line strong, .intent-line .intent-label {
  font-size: 10.5px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
.intent-line q, .intent-line em, .intent-line code {
  font-style: normal; font-family: var(--mono); font-size: 12.5px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px;
}
.intent-line q::before, .intent-line q::after { content: none; }

.section-block {
  margin-top: 34px; padding: 0; border-top: 0;
}
.section-block h2 {
  margin: 0 0 10px; max-width: 32ch;
  font-size: clamp(20px, 2.6vw, 26px); line-height: 1.18; letter-spacing: -.022em; font-weight: 750;
}
.section-block h3 { margin: 22px 0 6px; font-size: 15.5px; font-weight: 700; }
.section-block p { margin: 0 0 12px; max-width: 72ch; font-size: 15.5px; line-height: 1.62; color: var(--ink); }
.section-block p:last-child { margin-bottom: 0; }
/* Direct children: a .boundary-list or an .evidence-group list nested inside a section must keep
   its own reset rather than inherit a document indent from here. */
.section-block > ul, .section-block > ol { margin: 0 0 12px; padding-left: 20px; max-width: 72ch; font-size: 15.5px; }
.section-block > ul > li + li, .section-block > ol > li + li { margin-top: 6px; }
.section-block code { font-family: var(--mono); font-size: 13.5px; color: var(--ink); }
.section-block pre { max-width: 100%; overflow-x: auto; padding: 16px; border-radius: 8px; background: var(--paper); }
.section-block a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.section-block a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------------------------------------------------------------- the boundary block
 *
 * The one block on a spoke page that may not read as a footnote. Every page in this site
 * exists to say what a thing does *and where it stops*, and SITE_ARCHITECTURE.md requires
 * the boundary list above the fold rather than at the bottom. It gets the warning tokens,
 * a heavy rule, its own background and body type a step larger than the sections around
 * it — the visual weight of a callout, not of a caveat. */

.boundary-block {
  margin: 30px 0; padding: 24px 26px 26px;
  background: var(--warning-soft); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--warning) 38%, transparent);
  border-left: 5px solid var(--warning);
  border-radius: 4px 16px 16px 4px;
}
.boundary-block h2, .boundary-block h3, .boundary-block h4 {
  margin: 0 0 12px; max-width: 34ch;
  font-size: clamp(18px, 2.3vw, 22px); line-height: 1.2; letter-spacing: -.022em;
  font-weight: 800; color: var(--ink);
}
.boundary-block > p { margin: 0 0 14px; max-width: 70ch; font-size: 15px; color: var(--ink); }
.boundary-block > p:last-child { margin-bottom: 0; }
.boundary-block code { font-family: var(--mono); font-size: 13.5px; }
.boundary-block a { color: var(--ink); border-bottom: 1px solid color-mix(in srgb, var(--warning) 50%, transparent); text-decoration: none; }

.boundary-list,
.boundary-block .boundary-list {
  margin: 0; padding: 0; list-style: none; display: grid; gap: 11px;
}
.boundary-list li,
.boundary-block .boundary-list li {
  position: relative; margin: 0; padding-left: 26px; max-width: 70ch;
  font-size: 15.5px; line-height: 1.5; color: var(--ink);
}
.boundary-list li::before {
  content: '\00d7'; position: absolute; left: 4px; top: 0;
  color: var(--warning); font-weight: 850; font-size: 16px; line-height: 1.45;
}

/* ---------------------------------------------------------------- record chain
 *
 * A customer hub is a relationship between owned records, not a generic dashboard. The chain is
 * therefore the one visual signature on this page family: a real ordered list whose connectors
 * show provenance moving forward, while the state label says how much of each domain is proven.
 */

.record-chain { margin: 34px 0 44px; padding: 0; }
.record-chain figcaption {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
  max-width: 72ch; margin-bottom: 18px;
}
.record-chain figcaption .kicker { margin: 0; }
.record-chain figcaption strong {
  font-size: clamp(21px, 2.8vw, 29px); line-height: 1.15; letter-spacing: -.025em;
}
.record-chain figcaption > span:last-child { color: var(--muted); font-size: 14.5px; }
.record-chain ol {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; margin: 0; padding: 1px; overflow: hidden;
  background: var(--line); border: 1px solid var(--line); border-radius: 14px;
}
.record-chain li {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 142px;
  gap: 7px; padding: 20px 22px; background: var(--surface);
}
.record-chain li::after {
  content: '→'; position: absolute; z-index: 1; right: -11px; top: 50%;
  display: grid; place-items: center; width: 22px; height: 22px; transform: translateY(-50%);
  border: 1px solid var(--line); border-radius: 50%; background: var(--paper);
  color: var(--accent); font: 650 12px/1 var(--mono);
}
.record-chain li:nth-child(3n)::after,
.record-chain li:last-child::after { content: none; }
.record-chain .record-state {
  align-self: flex-start; padding: 3px 7px; border-radius: 5px;
  font: 700 10px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
}
.record-chain li[data-state='partial'] .record-state {
  color: var(--warning); background: var(--warning-soft);
}
.record-chain li > strong { font-size: 15.5px; line-height: 1.3; }
.record-chain li > small { color: var(--muted); font-size: 13px; line-height: 1.45; }

/* ---------------------------------------------------------- responsibility map
 *
 * CDP + CRM is a division of responsibility, not a feature checklist. Two fixed
 * semantic articles keep the profile and process questions distinct; the bridge
 * is prose below them because a connector line would falsely imply an integration. */

.responsibility-map { margin: 34px 0 44px; padding: 0; }
.responsibility-map figcaption {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
  max-width: 72ch; margin-bottom: 18px;
}
.responsibility-map figcaption .kicker { margin: 0; }
.responsibility-map figcaption strong {
  font-size: clamp(21px, 2.8vw, 29px); line-height: 1.15; letter-spacing: -.025em;
}
.responsibility-map figcaption > span:last-child { color: var(--muted); font-size: 14.5px; }
.responsibility-layers {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; padding: 1px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px 14px 0 0; background: var(--line);
}
.responsibility-layer {
  min-width: 0; padding: 24px; background: var(--surface);
}
.responsibility-layer:nth-child(2) {
  background: color-mix(in srgb, var(--accent-soft) 38%, var(--surface));
}
.responsibility-label {
  display: inline-flex; margin-bottom: 11px; padding: 4px 8px;
  border-radius: 5px; background: var(--paper);
  color: var(--muted); font: 750 10px/1.3 var(--mono);
  letter-spacing: .08em; text-transform: uppercase;
}
.responsibility-layer h3 {
  margin: 0 0 22px; max-width: 22ch;
  font-size: clamp(19px, 2.4vw, 25px); line-height: 1.15; letter-spacing: -.025em;
}
.responsibility-subhead {
  display: block; margin-bottom: 9px;
  color: var(--muted); font: 800 10px/1.3 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
}
.responsibility-layer ul {
  display: grid; gap: 8px; margin: 0; padding: 0; list-style: none;
}
.responsibility-layer li {
  position: relative; margin: 0; padding-left: 20px;
  color: var(--ink); font-size: 14px; line-height: 1.45;
}
.responsibility-layer li::before {
  content: '+'; position: absolute; left: 2px; top: 0;
  color: var(--accent); font: 750 13px/1.55 var(--mono);
}
.responsibility-layer p {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 13px; line-height: 1.5;
}
.responsibility-layer p strong { color: var(--ink); }
.responsibility-bridge {
  margin: 0; padding: 14px 18px;
  border: 1px dashed color-mix(in srgb, var(--warning) 52%, var(--line)); border-top: 0;
  border-radius: 0 0 14px 14px; background: var(--warning-soft);
  color: var(--muted); font-size: 13px; line-height: 1.5;
}
.responsibility-bridge strong { color: var(--warning); }

/* ---------------------------------------------------------------- refusal proof
 *
 * A refusal is useful only as a receipt: the request, the asserted actor and the
 * status that stopped it. The content contract fixes those three fields and this
 * block gives the result visual weight without turning it into an AI illustration. */

.refusal-proof { margin: 34px 0 44px; padding: 0; max-width: 72ch; }
.refusal-proof figcaption {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 18px;
}
.refusal-proof figcaption .kicker { margin: 0; }
.refusal-proof figcaption strong {
  font-size: clamp(21px, 2.8vw, 29px); line-height: 1.15; letter-spacing: -.025em;
}
.refusal-proof figcaption > span:last-child { color: var(--muted); font-size: 14.5px; }
.refusal-proof .code { box-shadow: none; }
.refusal-proof pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Dark rendering is not a token swap here. --warning-soft is a deep brown at that end of the
   palette, and against the near-black page it loses the "stop and read this" contrast the block
   is for; mixing a little surface back in and strengthening the border restores it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .boundary-block {
    background: color-mix(in srgb, var(--warning-soft) 84%, var(--surface));
    border-color: color-mix(in srgb, var(--warning) 48%, transparent);
  }
}
:root[data-theme='dark'] .boundary-block {
  background: color-mix(in srgb, var(--warning-soft) 84%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 48%, transparent);
}

/* ---------------------------------------------------------------- evidence rail */

.evidence-rail {
  margin-top: 44px; padding: 22px 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px 26px;
}
.evidence-rail > h2, .evidence-rail > h3, .evidence-rail > p {
  grid-column: 1 / -1; margin: 0; max-width: 68ch;
}
.evidence-rail > h2, .evidence-rail > h3 {
  font-size: 11px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.evidence-rail > p { font-size: 13px; color: var(--muted); }

.evidence-group { min-width: 0; }
.evidence-group h3, .evidence-group h4, .evidence-group > strong {
  display: block; margin: 0 0 8px;
  font-size: 10.5px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.evidence-group ul, .evidence-group ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.evidence-group li { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.evidence-group code {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  overflow-wrap: anywhere; word-break: break-word;
}
.evidence-group a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.evidence-group a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.evidence-group a code { color: inherit; }

/* ---------------------------------------------------------------- related rail */

.related-rail {
  margin-top: 40px; padding: 20px 0 0; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
}
.related-rail > h2, .related-rail > h3, .related-rail > strong {
  flex-basis: 100%; margin: 0 0 2px; max-width: none;
  font-size: 11px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.related-rail ul { display: contents; margin: 0; padding: 0; list-style: none; }
.related-rail li { margin: 0; }
.related-rail a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.related-rail a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------------------------------------------------------- narrow screens */

@media (max-width: 520px) {
  .boundary-block { padding: 20px 18px 22px; border-radius: 3px 12px 12px 3px; }
  .boundary-list li { padding-left: 22px; font-size: 15px; }
  .cluster-card { padding: 18px; }
  .evidence-rail { gap: 18px; }
  .record-chain ol { grid-template-columns: 1fr; }
  .record-chain li { min-height: 0; padding: 18px; }
  .record-chain li::after {
    content: '↓'; right: auto; left: 22px; top: auto; bottom: -11px; transform: none;
  }
  .record-chain li:nth-child(3n)::after { content: '↓'; }
  .record-chain li:last-child::after { content: none; }
  .responsibility-layers { grid-template-columns: 1fr; }
  .responsibility-layer { padding: 20px 18px; }
}

/* ---------------------------------------------------------------- the loop
   The five things an agent does here, as the hero's structural element rather
   than a paragraph. It is an <ol> because the order is the argument: you cannot
   check what you did not plan, or prove what you did not build. Numbers come
   from the counter, so the markup stays a plain ordered list for a reader that
   ignores CSS entirely. */
.loop {
  list-style: none;
  counter-reset: loop;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 1px;
  margin: 30px 0 0;
  padding: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.loop li {
  counter-increment: loop;
  background: var(--surface);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.loop li::before {
  content: counter(loop);
  font: 600 11px/1 var(--mono);
  color: var(--accent);
  letter-spacing: .06em;
}
.loop-step {
  font-weight: 620;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -.01em;
}
.loop code {
  font: 500 12.5px/1.5 var(--mono);
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 5px;
  padding: 2px 6px;
  align-self: flex-start;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.loop-note {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* The refusal block. The 403 is the single most differentiated thing on the
   site, so it is typeset as evidence rather than as decoration: no gradient,
   no glow, just the request, the actor that made it, and the status. */
.code.refusal { border-color: var(--accent); }
.code .s { color: var(--warning); }
.code .bad {
  color: var(--warning);
  font-weight: 650;
  letter-spacing: .01em;
}


/* ==================================================================
 * 2026-08 visual refresh — reference points: modern developer-tool
 * sites (single accent, 1px borders, depth from light not shadow).
 * Everything here overrides by order, not by specificity.
 * ================================================================== */

.cluster-card {
  transition: border-color .18s ease, transform .18s ease;
}
.cluster-card:hover { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .cluster-card:hover { transform: none; } }
.cluster-card h2 a { text-decoration: none; }
.cluster-card h2 a:hover { color: var(--accent); }

.faq-item summary { font-size: 15px; }
.faq-item > p { line-height: 1.6; }

/* Section headings get a hairline accent tick, the cheapest possible wayfinding. */
.section-block > h2 { position: relative; padding-top: 14px; }
.section-block > h2::before {
  content: ''; position: absolute; top: 0; left: 0; width: 34px; height: 3px;
  border-radius: 2px; background: var(--accent);
}

/* Code blocks read as terminal panes: a top hairline and slightly deeper ground. */
.code { background: color-mix(in srgb, var(--surface) 86%, var(--paper)); }

/* Selection in brand color, both themes. */
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }

/* Tables: row hover for scanability. */
tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }

/* ==================================================================
 * The Flow — public art direction
 *
 * One idea, drawn: a business process is a line, and the interesting
 * thing about Accordo happens where that line is stopped. Semantic
 * color is product language, not decoration — violet is the agent,
 * yellow the policy that refuses it, coral the human who decides,
 * cyan the evidence left behind, green the valid flow and the accord
 * the four of them reach. A color appears when its actor enters the
 * story and not before.
 *
 * Two rules this layer keeps:
 *
 *   1. Motion only reveals a relationship the HTML already states. The
 *      choreography below animates an ordered list that reads correctly
 *      with no CSS at all, and `prefers-reduced-motion` renders the
 *      finished story — approved, gate open, audit recorded — rather
 *      than an empty stage.
 *   2. Containers are earned. The page is built from rules, spines,
 *      floating labels and type; the two panels that remain — the
 *      source pane and the generated CRM screen — are boxes because
 *      the things they depict are boxes on a screen.
 * ================================================================== */

:root {
  --paper: #f7f3e9;
  --surface: #fffdf7;
  --ink: #171912;
  --muted: #62655b;
  --line: #d9d5c8;
  --rule: #ddd8c8;
  /* The quietest ink on the page — stop labels, field labels, the seal's caption. It was
     #8f8a78 in the prototype, which is 3.1:1 on paper: fine for a mock-up viewed at 100%, not
     fine for 10px mono a customer has to read. Darkened until it clears AA with a margin, and
     it is still visibly a step quieter than --muted. */
  --dim: #6f6a5a;
  /* Two greens, because one green cannot do both jobs. `--accord` is the vivid green of the
     rail, the marquee ground and the seal's centre — a fill, read as a shape. `--accent` is the
     green of *words*: links, kickers, evidence ticks. The base stylesheet above uses --accent
     for both, and a fill green set as 15px text on warm paper fails contrast every time. Making
     --accent the readable one fixes about twenty inherited rules at once, and the handful of
     places that genuinely wanted the fill now say --accord. */
  --accent: #176b2a;
  --accent-soft: #dcfbdc;
  --agent: #7457ff;
  --agent-soft: #ebe6ff;
  --human: #ff6b69;
  --human-soft: #ffe6e1;
  --pending: #f2c84b;
  --pending-soft: #fff3bd;
  --data: #20b8d8;
  --data-soft: #dff8fd;
  --accord: #27b64a;
  --flow-ink: #176b2a;
  --agent-ink: #4c2fc5;
  --human-ink: #9b292d;
  --pending-ink: #665000;
  --data-ink: #00677a;
  --display: 'Bricolage Grotesque', 'Avenir Next', Avenir, ui-sans-serif, system-ui, sans-serif;
  --shadow: 0 22px 60px rgba(23, 25, 18, .09);
  --stamp: 8px 8px 0 rgba(23, 25, 18, .10);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #10120e; --surface: #171a14; --ink: #f7f3e9; --muted: #afb3a7;
    --line: #34382e; --rule: #2b2f26; --dim: #7f8377; --accent: #8cf39a; --accent-soft: #17351d;
    --agent: #9a88ff; --agent-soft: #292342; --human: #ff8580; --human-soft: #402321;
    --pending: #f2cd5d; --pending-soft: #3a3219; --data: #54cee7; --data-soft: #17343a;
    --accord: #58e36d;
    --flow-ink: #8cf39a; --agent-ink: #c8bcff; --human-ink: #ffb5b0;
    --pending-ink: #ffe080; --data-ink: #9eeafa;
    --shadow: 0 22px 60px rgba(0, 0, 0, .45);
    --stamp: 8px 8px 0 rgba(0, 0, 0, .38);
  }
}

/* Warm paper, and nothing else. The two ambient washes the previous direction used were the
   last thing on the page pretending to be depth; the composition carries itself now. */
body { background: var(--paper); }

/* ---------------------------------------------------------------- type */

h1, h2, h3 { font-family: var(--display); text-wrap: balance; }
h1 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); }
h1 em, h2 em { color: var(--agent); font-style: normal; }
/* Tracking is set by the typeface, not by taste. Bricolage Grotesque draws `f` with a crossbar
   that reaches well past the stem; below about -.024em the two crossbars in "different" merge
   into the `i` beside them and the word renders as though struck through — on the one headline
   this whole site is built around. -.022em is the tightest setting that stays legible here. */
.hero h1 { font-size: clamp(3.4rem, 7.4vw, 7.25rem); line-height: .94; letter-spacing: -.022em; max-width: 14ch; }
.hero:not(.hero-product) h1 { font-size: clamp(2.9rem, 5.6vw, 5.2rem); max-width: 17ch; }
.hero .lede { font-size: clamp(1.06rem, 1.6vw, 1.31rem); max-width: 44ch; color: var(--muted); }
.eyebrow, .kicker {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; color: var(--flow-ink);
}
h2 { font-size: clamp(2.1rem, 3.8vw, 3.6rem); letter-spacing: -.024em; line-height: 1.02; max-width: 22ch; }
h3 { font-size: 1.3rem; letter-spacing: -.014em; font-weight: 700; }
.section-lede { max-width: 56ch; font-size: 17px; }
.mono { font-family: var(--mono); }

/* ---------------------------------------------------------------- the seal
 *
 * Four arcs, one per authority, closing around a green centre. It is the logo, the section
 * grammar and the thing the choreography mints when a decision is finished — the same object
 * at three sizes rather than three marks. */

/* One mark, drawn once in site/partials/seal.html and sized here. Stroke weight is a matter of
   optics rather than geometry: the arcs need to be heavy at 20px to read as a ring at all, and
   heavy at 260px would read as a pie chart, so the weight comes down as the mark grows. */
/* `stroke-width` and `stroke-dasharray` are ordinary presentation attributes and set everywhere.
   `r` is an SVG2 geometry property (Chrome 45+, Firefox 69+, Safari 16+); where it is not
   honoured the circle keeps the r="15" in the markup — a slightly heavier centre at the two
   largest sizes, which is a difference in weight rather than a broken mark. */
.seal { display: block; flex-shrink: 0; }
.seal circle { stroke-width: 14; stroke-dasharray: 54 222.5; }
.seal .seal-core { stroke: none; }
.seal-open circle { stroke-width: 9; stroke-dasharray: 56 220.5; }
.seal-open .seal-core { r: 12; }
.wordmark .seal { width: 26px; height: 26px; }
.hero { position: relative; }
.hero-seal {
  position: absolute; right: 0; top: clamp(4px, 2vw, 30px);
  width: clamp(150px, 18vw, 290px); text-align: center; pointer-events: none;
}
/* Large on the landing page, where it is the first thing seen and has a viewport to itself.
   Smaller on every other page, where it is a signature rather than the subject. */
.hero:not(.flow-hero) .hero-seal { width: clamp(88px, 10vw, 132px); top: clamp(2px, 1vw, 14px); }
.hero:not(.flow-hero) .hero-seal p { display: none; }
.hero-seal .seal { width: 100%; height: auto; animation: seal-turn 80s linear infinite; }
.hero-seal .seal circle { stroke-width: 7; stroke-dasharray: 58 218.5; }
.hero-seal .seal .seal-core { r: 11; }
.hero-seal p {
  margin: 14px 0 0; font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--dim);
}
@keyframes seal-turn { to { transform: rotate(360deg); } }

.footer-seal { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; }
.footer-seal .seal { width: 40px; height: 40px; }
.footer-seal p {
  margin: 0; font-size: 9.5px; font-weight: 600; line-height: 1.5;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}

/* The implementation boundary, relocated here from the banner that used to sit above the
   wordmark. Moving it is only defensible while it still reads as a statement rather than as
   small print, so it keeps the pending rule and the page's ink — it is the one paragraph in the
   colophon that is not a footnote. */
.colophon-boundary {
  margin: 0 0 14px; padding: 2px 0 2px 16px;
  border-left: 3px solid var(--pending);
  font-size: 14px; color: var(--ink);
}
.colophon-boundary strong { font-weight: 800; }

/* ---------------------------------------------------------------- nav */

body > .shell:has(> .nav) { background: color-mix(in srgb, var(--paper) 86%, transparent); }
.nav { padding: 20px 0; border-bottom: 0; gap: 26px; }
.wordmark { font-size: 18px; font-weight: 800; letter-spacing: -.02em; gap: 11px; }
.nav-links { gap: 22px; }
.nav-links a {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
}
.nav-links a[aria-current] { color: var(--ink); font-weight: 700; }
/* Eight destinations, a wordmark and a command in one row. The bar is allowed to get tighter
   rather than wrap: a primary navigation on two lines reads as an overflow, not a design. */
.nav-links { flex-wrap: nowrap; }
.nav-start {
  font-family: var(--mono); font-size: 12px; font-weight: 600; white-space: nowrap;
  text-decoration: none; color: var(--ink);
  padding: 10px 18px; border: 1.5px solid var(--ink); border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
.nav-start:hover { background: var(--ink); color: var(--paper); }
.nav-menu > summary { border-radius: 999px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }
.nav-menu-panel { border-radius: 14px; }

@media (max-width: 1320px) { .nav { gap: 18px; } .nav-links { gap: 15px; } .nav-links a { font-size: 10px; letter-spacing: .09em; } }
@media (max-width: 1100px) { .nav-links { gap: 12px; } .nav-start { padding: 9px 14px; font-size: 11px; } }
@media (max-width: 980px) { .nav-start { display: none; } }

/* ---------------------------------------------------------------- buttons */

.button { border-radius: 999px; border-width: 1.5px; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 color-mix(in srgb, var(--ink) 16%, transparent); }
.button:active { transform: translateY(0); box-shadow: none; }
.button.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: none; }
.button.primary:hover { background: var(--agent); border-color: var(--agent); color: #fff; box-shadow: 0 6px 0 color-mix(in srgb, var(--ink) 16%, transparent); }
.button.secondary { background: transparent; border-color: color-mix(in srgb, var(--ink) 28%, transparent); }
.button.secondary:hover { border-color: var(--ink); }

/* ---------------------------------------------------------------- hero */

.flow-hero { position: relative; display: block; padding-bottom: clamp(28px, 4vw, 52px); }
.flow-hero .hero-tail {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap; margin-top: 34px;
}
.flow-hero .hero-tail .lede { margin: 0; }
.flow-hero .hero-tail .cta { margin: 0; }

@media (max-width: 900px) {
  .hero-seal { position: static; width: 96px; margin: 0 0 26px; text-align: left; }
  .hero-seal p { display: none; }
}

/* ==================================================================
 * The signature scene
 *
 * A deal travels a line; at Approval the agent's discount request
 * reaches a gate the policy closes; a human arrives from a different
 * layer and decides; the gate opens and the flow leaves evidence
 * behind. The ordered list underneath is the whole story in text —
 * everything below moves it, none of it says anything the list does
 * not already say.
 * ================================================================== */

/* Full-bleed without a single `vw`, and that is the whole point of it.
 *
 * The obvious spelling — `width: 100vw` with `margin-inline: calc(50% - 50vw)` — is wrong on any
 * desktop that draws a classic scrollbar: `100vw` is the viewport *including* the scrollbar, the
 * negative margin is computed from a parent that excludes it, and the two no longer cancel. The
 * element ends up half a scrollbar too wide and puts a horizontal scrollbar on every page. It is
 * invisible in a headless capture taken with --hide-scrollbars, which is exactly how it survived
 * into review: measured at 1280px it overflowed by 7.5px.
 *
 * This element is a direct child of <main>, which carries no width, padding or border, so its
 * containing block is already the full content width the viewport actually has. `width: 100%`
 * bleeds edge to edge by construction and cannot disagree with the scrollbar. */
.flow-scene {
  position: relative; width: 100%; margin: clamp(26px, 4vw, 52px) 0 0;
  height: 340px; overflow: hidden;
  --line-y: 210px;
  --gate-x: 61.5%;
}

.flow-rail { position: absolute; left: 0; right: 0; top: var(--line-y); height: 2px; background: var(--rule); }
.flow-rail-live {
  position: absolute; left: 0; right: 0; top: calc(var(--line-y) - .5px); height: 3px;
  background: var(--accord); transform-origin: left center; transform: scaleX(.75);
  animation: flow-travel 16s linear infinite;
}

/* The lifecycle, as stops rather than a pipeline diagram. Each stop is placed by its own
   `--at`, so the copy and the geometry stay in one place — the template. */
.flow-stops { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.flow-stops li { position: absolute; left: var(--at); top: calc(var(--line-y) + 16px); transform: translateX(-50%); }
.flow-stops li::before {
  content: ''; position: absolute; left: 50%; top: -18px; width: 7px; height: 7px;
  border-radius: 50%; background: color-mix(in srgb, var(--ink) 32%, var(--paper)); transform: translate(-50%, -50%);
}
.flow-stops span {
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); white-space: nowrap;
}
.flow-stops .is-gate span { color: var(--ink); font-weight: 600; }
.flow-stops .is-gate::before { content: none; }

/* Annotation of the gate, set beside it rather than above: the coral line the human arrives on
   comes straight down through the centre, and a label centred on the same axis is a collision. */
.flow-gate-label {
  position: absolute; left: calc(var(--gate-x) + 24px); top: calc(var(--line-y) - 52px);
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim); white-space: nowrap;
}

/* The gate: two bars the line has to pass through. Closed they are ink, refusing they are
   yellow, open they swing back and turn green. It is the recurring motif of the whole brand. */
.flow-gate { position: absolute; left: var(--gate-x); top: calc(var(--line-y) - 38px); width: 0; height: 38px; }
.flow-gate i {
  position: absolute; bottom: 0; width: 5px; height: 38px; border-radius: 3px;
  background: var(--accord); transform-origin: bottom center;
}
.flow-gate i:first-child { left: -13px; transform: rotate(-30deg); animation: gate-left 16s linear infinite; }
.flow-gate i:last-child { left: 8px; transform: rotate(30deg); animation: gate-right 16s linear infinite; }

.flow-dot {
  position: absolute; left: 75%; top: var(--line-y); width: 18px; height: 18px; border-radius: 50%;
  background: var(--accord); border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--accord);
  transform: translate(-50%, -50%); animation: flow-dot 16s linear infinite;
}

/* The four states. Absolutely placed, but each is a real list item with a label, a state and a
   sentence — turn the stylesheet off and the story is still in reading order. */
.flow-scene .approval-flow { position: static; display: block; margin: 0; padding: 0; list-style: none; }
.flow-scene .approval-flow li {
  position: absolute; display: block; min-height: 0; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; opacity: 0;
  transform: none; white-space: nowrap; animation-duration: 16s; animation-timing-function: linear;
  animation-iteration-count: infinite; animation-fill-mode: none; animation-delay: 0s;
}
.flow-scene .approval-flow li::before { content: none; }
.flow-scene .approval-flow span {
  display: block; font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
}
.flow-scene .approval-flow strong {
  display: block; margin-top: 2px; font-family: var(--display); font-size: 1.05rem;
  font-weight: 800; letter-spacing: -.01em; text-transform: none;
}
/* The sentence under each state stays in the document — it is what a reader with no stylesheet
   gets, and what the generated Markdown peer carries — but it does not compete for space on the
   stage. Four states, four gate positions and a travelling dot is already a lot to hold in
   340px; the sentences themselves are said again, at length, in "Who gets to say yes?" below.
   Not `display: none`, because that would take them out of the document's text entirely. */
.flow-scene .approval-flow small {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* 1 — the agent's request enters the flow from above, on a violet stem. */
.flow-scene .state-agent {
  left: 47%; top: 100px; transform: translateX(-50%) !important; text-align: center;
  color: var(--agent-ink); background: none !important; animation-name: state-agent;
}
.flow-scene .state-agent::after {
  content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 58px;
  margin-top: 8px; background: var(--agent); transform: translateX(-50%);
}
.flow-scene .state-agent small { margin-inline: auto; }

/* 2 — the policy refuses, under the gate. */
.flow-scene .state-policy { left: var(--gate-x); top: calc(var(--line-y) + 54px); transform: translateX(-50%) !important; text-align: center; color: var(--pending-ink); background: none !important; animation-name: state-policy; }
.flow-scene .state-policy small { margin-inline: auto; }

/* 3 — human authority arrives from a different layer: a coral line dropping from the top of
   the scene, then the stamp. Deliberately not from along the rail, because that is the point. */
.flow-scene .state-human { left: var(--gate-x); top: 6px; transform: translateX(-50%) !important; text-align: center; color: var(--human-ink); background: none !important; animation-name: state-human; }
.flow-scene .state-human::after {
  content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 118px;
  margin-top: 8px; background: var(--human); transform: translateX(-50%) scaleY(1);
  transform-origin: top center; animation: human-descend 16s linear infinite;
}
.flow-scene .state-human strong {
  display: inline-block; margin-top: 8px; padding: 5px 12px;
  font-family: var(--mono); font-size: .92rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; border: 2.5px solid var(--human); border-radius: 6px;
  transform: rotate(-8deg); animation: stamp-land 16s linear infinite;
}
.flow-scene .state-human small { margin-inline: auto; }

/* 4 — the evidence the flow leaves behind, and the seal a finished decision mints. Placed to the
   right of the refusal rather than under it: the two are consecutive moments in one story, and
   in reduced motion both are on screen at once. */
.flow-scene .state-evidence { left: 75%; top: calc(var(--line-y) + 44px); color: var(--data-ink); background: none !important; animation-name: state-evidence; }
.flow-scene .state-evidence span::before { content: '\2713 '; }

.flow-mint {
  position: absolute; left: calc(75% - 28px); top: calc(var(--line-y) + 44px);
  width: 20px; height: 20px; animation: seal-mint 16s linear infinite;
}
.flow-mint .seal { width: 20px; height: 20px; }
.flow-mint .seal circle { stroke-width: 15; }
/* The closing mark, and the receipt's: open enough to read the four arcs at their own size. */
.final-cta .seal { width: 54px; height: 54px; margin: 0 auto 26px; }
.final-cta .seal circle { stroke-width: 9; stroke-dasharray: 56 220.5; }
.final-cta .seal .seal-core { r: 12; }
.ledger-receipt .seal circle { stroke-width: 15; }
.one-system .sealed .seal circle { stroke-width: 14; }

@keyframes flow-travel {
  0% { transform: scaleX(.04); opacity: 1; }
  20%, 60% { transform: scaleX(.615); }
  82%, 90% { transform: scaleX(.95); opacity: 1; }
  96%, 100% { opacity: 0; }
  100% { transform: scaleX(.04); }
}
@keyframes flow-dot {
  0% { left: 4%; background: var(--accord); transform: translate(-50%, -50%) scale(1); opacity: 1; }
  20% { left: 61.5%; background: var(--accord); transform: translate(-50%, -50%) scale(1); }
  24% { background: var(--pending); }
  30% { transform: translate(-50%, -50%) scale(1.3); }
  36% { transform: translate(-50%, -50%) scale(1); }
  42% { transform: translate(-50%, -50%) scale(1.3); }
  48%, 54% { left: 61.5%; background: var(--pending); transform: translate(-50%, -50%) scale(1); }
  60% { left: 61.5%; background: var(--accord); }
  82% { left: 95%; opacity: 1; }
  88%, 100% { left: 95%; opacity: 0; }
}
@keyframes gate-left {
  0%, 22% { transform: rotate(0deg); background: var(--ink); }
  24%, 56% { transform: rotate(0deg); background: var(--pending); }
  60%, 88% { transform: rotate(-30deg); background: var(--accord); }
  94%, 100% { transform: rotate(0deg); background: var(--ink); }
}
@keyframes gate-right {
  0%, 22% { transform: rotate(0deg); background: var(--ink); }
  24%, 56% { transform: rotate(0deg); background: var(--pending); }
  60%, 88% { transform: rotate(30deg); background: var(--accord); }
  94%, 100% { transform: rotate(0deg); background: var(--ink); }
}
@keyframes state-agent { 0%, 7% { opacity: 0; } 10%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes state-policy { 0%, 21% { opacity: 0; } 24%, 56% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes state-human { 0%, 40% { opacity: 0; } 44%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes state-evidence { 0%, 62% { opacity: 0; } 66%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes human-descend {
  0%, 34% { transform: translateX(-50%) scaleY(0); }
  40%, 88% { transform: translateX(-50%) scaleY(1); }
  93%, 100% { transform: translateX(-50%) scaleY(0); }
}
@keyframes stamp-land {
  0%, 48% { opacity: 0; transform: rotate(-8deg) scale(1.4); }
  52%, 88% { opacity: 1; transform: rotate(-8deg) scale(1); }
  93%, 100% { opacity: 0; transform: rotate(-8deg) scale(1); }
}
@keyframes seal-mint {
  0%, 66% { opacity: 0; transform: scale(.4); }
  71%, 90% { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(1); }
}

@media (max-width: 1100px) {
  .flow-scene { height: 320px; --line-y: 198px; }
  .flow-scene .approval-flow small { display: none; }
}

/* Below the breakpoint the scene rotates: the same line, the same gate, the same order,
   read downwards. The desktop composition is not stacked — it is turned. */
@media (max-width: 760px) {
  .flow-scene {
    margin-top: 34px; height: 620px;
    --line-y: 0; --rail-x: 40px; --gate-y: 56%;
  }
  .flow-rail { left: var(--rail-x); right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .flow-rail-live {
    left: var(--rail-x); right: auto; top: 0; bottom: 0; width: 3px; height: auto;
    transform-origin: center top; transform: scaleY(.7); animation-name: flow-travel-y;
  }
  .flow-stops li { left: calc(var(--rail-x) + 22px); top: var(--at-y); transform: translateY(-50%); }
  .flow-stops li::before { left: -22px; top: 50%; }
  .flow-gate-label { left: calc(var(--rail-x) + 22px); top: calc(var(--gate-y) - 30px); font-size: 9px; }
  .flow-gate { left: var(--rail-x); top: var(--gate-y); width: 0; height: 0; }
  .flow-gate i { bottom: auto; top: 0; width: 16px; height: 5px; }
  .flow-gate i:first-child { left: -22px; transform-origin: left center; transform: rotate(30deg); animation-name: gate-top; }
  .flow-gate i:last-child { left: 5px; transform-origin: right center; transform: rotate(-30deg); animation-name: gate-bottom; }
  .flow-dot { left: var(--rail-x); top: 72%; animation-name: flow-dot-y; }
  .flow-scene .approval-flow li { white-space: normal; }
  .flow-scene .state-agent { left: calc(var(--rail-x) + 22px); top: 41%; transform: none !important; text-align: left; }
  .flow-scene .state-agent::after { left: 0; top: auto; bottom: -14px; width: 84px; height: 2px; margin: 0; transform: none; }
  .flow-scene .state-policy { left: calc(var(--rail-x) + 22px); top: calc(var(--gate-y) + 24px); transform: none !important; text-align: left; }
  .flow-scene .state-human { left: auto; right: 20px; top: calc(var(--gate-y) - 150px); transform: none !important; text-align: right; }
  .flow-scene .state-human::after { left: auto; right: 0; top: 100%; width: 92px; height: 2px; margin-top: 10px; transform: scaleX(1); transform-origin: right center; animation-name: human-descend-x; }
  .flow-scene .state-human strong { transform: rotate(-6deg); font-size: .82rem; letter-spacing: .12em; }
  .flow-scene .state-evidence { left: calc(var(--rail-x) + 22px); top: 70%; }
  .flow-mint { left: 208px; top: calc(70% + 1px); }
  @keyframes flow-travel-y {
    0% { transform: scaleY(.04); opacity: 1; }
    20%, 60% { transform: scaleY(.56); }
    82%, 90% { transform: scaleY(.94); opacity: 1; }
    96%, 100% { opacity: 0; }
    100% { transform: scaleY(.04); }
  }
  @keyframes flow-dot-y {
    0% { top: 4%; background: var(--accord); transform: translate(-50%, -50%) scale(1); opacity: 1; }
    20% { top: 56%; background: var(--accord); }
    24% { background: var(--pending); }
    32% { transform: translate(-50%, -50%) scale(1.3); }
    40%, 54% { top: 56%; background: var(--pending); transform: translate(-50%, -50%) scale(1); }
    60% { top: 56%; background: var(--accord); }
    82% { top: 94%; opacity: 1; }
    88%, 100% { top: 94%; opacity: 0; }
  }
  @keyframes gate-top {
    0%, 22% { transform: rotate(0deg); background: var(--ink); }
    24%, 56% { transform: rotate(0deg); background: var(--pending); }
    60%, 88% { transform: rotate(30deg); background: var(--accord); }
    94%, 100% { transform: rotate(0deg); background: var(--ink); }
  }
  @keyframes gate-bottom {
    0%, 22% { transform: rotate(0deg); background: var(--ink); }
    24%, 56% { transform: rotate(0deg); background: var(--pending); }
    60%, 88% { transform: rotate(-30deg); background: var(--accord); }
    94%, 100% { transform: rotate(0deg); background: var(--ink); }
  }
  @keyframes human-descend-x {
    0%, 34% { transform: scaleX(0); }
    42%, 88% { transform: scaleX(1); }
    93%, 100% { transform: scaleX(0); }
  }
}

/* ---------------------------------------------------------------- marquee */

.flow-marquee { overflow: hidden; padding: 13px 0; border-block: 1.5px solid var(--ink); background: var(--accord); color: #10120e; }
.flow-marquee-track { display: flex; width: max-content; animation: flow-rail 28s linear infinite; }
.flow-marquee-set { display: flex; flex: none; justify-content: space-around; gap: 34px; min-width: 100vw; padding-inline: 17px; }
.flow-marquee span { display: inline-flex; align-items: center; gap: 34px; font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.flow-marquee span::after { content: '→'; }
@keyframes flow-rail { to { transform: translateX(-50%); } }

/* ==================================================================
 * The spine
 *
 * The line does not stop at the first viewport. Below the hero it
 * turns vertical and becomes the page's left margin; every section is
 * a stop on it, with a node in the color of whichever actor that
 * section is about. It is the same object as the rail above — that is
 * the entire point of it — so the page reads as one continuous system
 * rather than a stack of unrelated blocks.
 * ================================================================== */

main > .shell > section {
  position: relative; padding-block: clamp(64px, 8vw, 116px); padding-left: 76px; border-top: 0;
  --node: var(--accord);
}
main > .shell > section::before {
  content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background: var(--rule);
}
main > .shell > section::after {
  content: ''; position: absolute; left: 14px; top: clamp(66px, 8.2vw, 118px);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--node); border: 3px solid var(--paper);
}
main > .shell > section.final-cta { padding-left: 0; text-align: center; }
main > .shell > section.final-cta::before { bottom: auto; height: clamp(64px, 8vw, 116px); left: 50%; }
main > .shell > section.final-cta::after { content: none; }

/* Written at the same depth as the rule that sets the default, or the default wins on
   specificity and every node on the page comes out green. */
main > .shell > section.spine-agent { --node: var(--agent); }
main > .shell > section.spine-policy { --node: var(--pending); }
main > .shell > section.spine-human { --node: var(--human); }
main > .shell > section.spine-evidence { --node: var(--data); }
main > .shell > section.spine-ink { --node: var(--ink); }

@media (max-width: 760px) {
  main > .shell > section { padding-left: 44px; }
  main > .shell > section::before { left: 8px; }
  main > .shell > section::after { left: 2px; }
}

/* ==================================================================
 * In practice — intent becomes code becomes the screen a team uses
 *
 * The one section that answers "what does my coding agent actually
 * build?" with an artefact instead of a principle. Cause and effect is
 * literal: a colored mark on a line of policy and the same colored
 * mark on the behavior that line governs, pulsing together on one
 * twelve-second cycle. Threshold ↔ the status chip. Approver role ↔
 * the named human. Audit ↔ the trace line.
 * ================================================================== */

.practice-grid {
  display: grid; grid-template-columns: minmax(0, .62fr) 16px minmax(0, 1.32fr) 16px minmax(0, 1.06fr);
  gap: 16px; align-items: start; margin-top: 44px;
}
/* A grid item's automatic minimum size is its min-content, so a column narrower than the source
   pane's longest unbroken line does not clip it — the item simply overflows the track and the
   page grows sideways. The tracks are already minmax(0, …); this is the other half of that. */
.practice-grid > * { min-width: 0; }
.practice-trace span, .practice-meta { overflow-wrap: anywhere; }
.practice-grid > .practice-arrow {
  align-self: center; text-align: center; font-family: var(--mono);
  font-size: 17px; color: var(--dim);
}
.practice-label {
  margin: 0 0 14px; font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.practice-intent {
  margin: 0 0 22px; font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 700; letter-spacing: -.014em; line-height: 1.3;
}
.practice-cli { display: grid; gap: 7px; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; margin: 0; }
.practice-cli span { color: var(--agent-ink); }
.practice-cli span:first-child { color: var(--ink); overflow-wrap: anywhere; }

/* One of the two boxes this direction keeps: a source pane looks like a source pane. */
.practice-source {
  background: #171912; border-radius: 12px; padding: 16px 18px; overflow-x: auto;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.85; color: #d8dcd0;
}
.practice-source div { white-space: pre; }
.practice-source .k { color: #8f9d94; }
.practice-source .s { color: #8cf39a; }
.practice-source .n { color: #f2cd5d; }
.practice-source .pair { display: block; padding: 0 8px; margin: 0 -8px; border-radius: 5px; }
.practice-source .mark { font-style: normal; }

/* The other: a running admin screen. Ink border and a hard offset shadow rather than a soft
   one — this is a window onto a real application, not a floating card. */
.practice-screen {
  background: var(--surface); border: 1.5px solid var(--ink); border-radius: 14px;
  overflow: hidden; box-shadow: var(--stamp);
}
.practice-screen-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 18px; border-bottom: 1.5px solid var(--rule);
  font-family: var(--mono); font-size: 10px; color: var(--dim);
}
.practice-screen-bar b { color: var(--flow-ink); font-weight: 700; }
.practice-screen-body { padding: 18px; }
.practice-record { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.practice-record strong { font-family: var(--display); font-size: 1.25rem; letter-spacing: -.014em; }
.practice-record span { font-family: var(--mono); font-size: 15px; font-weight: 700; }
.practice-meta { margin: 5px 0 0; font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
.practice-chip {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  background: var(--pending-soft); color: var(--pending-ink);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 6px 10px; border-radius: 6px;
}
.practice-approver {
  display: flex; align-items: baseline; gap: 8px; margin: 12px -8px 0;
  padding: 6px 8px; border-radius: 6px; font-size: 14px;
}
.practice-approver::before {
  content: ''; align-self: center; width: 8px; height: 8px; border-radius: 50%;
  background: var(--human); flex-shrink: 0;
}
.practice-approver span { min-width: 0; }
.practice-actions { display: flex; gap: 10px; margin-top: 14px; }
.practice-actions .button { padding: 10px 18px; font-size: 13.5px; }
.practice-actions .button.primary { background: var(--human); border-color: var(--human); color: #fff; }
.practice-actions .button.primary:hover { background: var(--human-ink); border-color: var(--human-ink); }
.practice-trace {
  margin-top: 16px; padding-top: 12px; border-top: 1.5px solid var(--rule);
  display: grid; gap: 6px; font-family: var(--mono); font-size: 10.5px;
}
.practice-trace .refused { color: var(--pending-ink); }
.practice-trace .decided { color: var(--human-ink); }
.practice-trace .recorded { color: var(--data-ink); margin: 0 -8px; padding: 2px 8px; border-radius: 5px; }
.practice-note {
  margin: 20px 0 0; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dim);
}

/* The pairing. Twelve seconds, three beats: policy line lights, the behavior it governs lights
   with it. Colors are the actors' own, so the pairing needs no legend. */
.pair-policy { animation: pair-policy-code 12s linear infinite; }
.pair-human { animation: pair-human-code 12s linear infinite; }
.pair-evidence { animation: pair-evidence-code 12s linear infinite; }
.practice-chip { animation: pair-policy-ui 12s linear infinite; }
.practice-approver { animation: pair-human-ui 12s linear infinite; }
.practice-trace .recorded { animation: pair-evidence-ui 12s linear infinite; }

@keyframes pair-policy-code { 0%, 5% { background: transparent; } 9%, 26% { background: color-mix(in srgb, var(--pending) 30%, transparent); } 30%, 100% { background: transparent; } }
@keyframes pair-policy-ui { 0%, 5% { box-shadow: 0 0 0 0 transparent; } 9%, 26% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pending) 65%, transparent); } 30%, 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes pair-human-code { 0%, 38% { background: transparent; } 42%, 59% { background: color-mix(in srgb, var(--human) 28%, transparent); } 63%, 100% { background: transparent; } }
@keyframes pair-human-ui { 0%, 38% { box-shadow: 0 0 0 0 transparent; } 42%, 59% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--human) 55%, transparent); } 63%, 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes pair-evidence-code { 0%, 71% { background: transparent; } 75%, 92% { background: color-mix(in srgb, var(--data) 28%, transparent); } 96%, 100% { background: transparent; } }
@keyframes pair-evidence-ui { 0%, 71% { box-shadow: 0 0 0 0 transparent; } 75%, 92% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--data) 55%, transparent); } 96%, 100% { box-shadow: 0 0 0 0 transparent; } }

/* The one-system line: UI, model, services, workflows, policy and audit are one application. */
.one-system {
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  margin-top: 44px; padding: 18px 0; border-block: 1.5px solid var(--rule);
}
.one-system > strong { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.one-system > span { font-size: 15px; color: var(--muted); max-width: 52ch; }
.one-system .sealed { display: inline-flex; align-items: center; gap: 10px; }
.one-system .sealed .seal { width: 22px; height: 22px; }
.one-system .sealed b {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--flow-ink);
}

@media (max-width: 1000px) {
  .practice-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .practice-grid > .practice-arrow { text-align: left; transform: rotate(90deg); width: 17px; }
}

/* ==================================================================
 * De-carding the rest of the page
 *
 * Everything below was a grid of bordered rectangles. It is now rules,
 * numbers and type. Nothing lost but the borders.
 * ================================================================== */

.choice-grid, .feature-grid, .proof-strip { border: 0; border-radius: 0; overflow: visible; }
.choice-grid article, .feature-grid article, .proof-strip article {
  padding: 20px 0 0; border: 0; border-top: 2px solid var(--rule);
  border-radius: 0; background: none; box-shadow: none; cursor: default;
}
.editorial-choices { gap: 48px; border-block: 0; }
.editorial-choices article + article { border-left: 0; }
/* The third choice is marked by a heavier rule and its kicker, not by a tinted panel behind it.
   The `.choice-grid .choice-accent` rule above is two classes deep, so this has to be too. */
.choice-grid .choice-accent { background: none !important; border-top-color: var(--ink); box-shadow: none; }
.choice-number { color: var(--dim); font: 600 12px/1 var(--mono); letter-spacing: .06em; }
.choice-accent .choice-number { color: var(--flow-ink); font-weight: 700; }

.feature-grid { gap: 20px 48px; }
.feature-grid article a, .section-link a { color: var(--agent-ink); font-weight: 700; }
.feature-grid .limit { border-top-style: solid; border-top-color: var(--rule); }

.proof-strip { display: grid; grid-template-columns: 1fr; gap: 0; }
.proof-strip article {
  display: grid; grid-template-columns: minmax(0, 24ch) 1fr; gap: 8px 24px;
  align-items: baseline; padding: 16px 0; border-top: 1.5px solid var(--rule);
}
.proof-strip article:last-child { border-bottom: 1.5px solid var(--rule); }
.proof-strip article + article { border-left: 0; }
.proof-strip strong { font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.proof-strip strong::before { content: none; }
.proof-strip span { color: var(--ink); font-size: 14.5px; }

/* Solution and resource cards become editorial rows: a rule, a title, a hover that steps in. */
.solution-grid, .resource-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.solution-grid a, .resource-grid a {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: 24px; row-gap: 2px;
  padding: 26px 8px 26px 0; border: 0; border-top: 1.5px solid var(--rule);
  border-radius: 0; background: none; box-shadow: none;
  transition: padding-left .18s ease, color .18s ease;
}
.solution-grid a:last-child, .resource-grid a:last-child { border-bottom: 1.5px solid var(--rule); }
/* Title and description stack in the first column; the arrow takes the second and spans both
   rows. Without the explicit placement the description lands in the arrow's column and the
   arrow wraps onto a third row of its own. */
.solution-grid a > strong, .resource-grid a > strong,
.solution-grid a > span, .resource-grid a > span { grid-column: 1; }
.solution-grid strong, .resource-grid strong {
  font-family: var(--display); font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  font-weight: 700; letter-spacing: -.018em; text-decoration: none;
}
.solution-grid span, .resource-grid span { color: var(--muted); font-size: 15.5px; margin-top: 5px; max-width: 62ch; }
.solution-grid a::after, .resource-grid a::after {
  content: '↗'; position: static; grid-column: 2; grid-row: 1 / span 2;
  align-self: center; color: var(--agent); font-size: 1.35rem;
}
.solution-grid a:hover, .resource-grid a:hover,
.solution-grid a:focus-visible, .resource-grid a:focus-visible {
  padding-left: 16px; transform: none; box-shadow: none;
  border-color: var(--rule); color: var(--agent-ink);
}

/* Who says yes — the three authorities as an editorial ledger, colored by actor. */
.authority-rows { display: grid; gap: 0; max-width: 860px; margin-top: 48px; }
.authority-rows > div {
  display: grid; grid-template-columns: 190px 1fr; gap: 24px; align-items: baseline;
  padding: 22px 0; border-top: 1.5px solid var(--rule);
}
.authority-rows > div:last-child { border-bottom: 1.5px solid var(--rule); }
.authority-rows dt, .authority-rows > div > span:first-child {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--node, var(--ink));
}
.authority-rows > div > span:first-child::before {
  content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--dot, currentColor); margin-right: 9px;
}
.authority-rows p { margin: 0; font-size: 18px; line-height: 1.55; }
.row-agent { --node: var(--agent-ink); --dot: var(--agent); }
.row-policy { --node: var(--pending-ink); --dot: var(--pending); }
.row-human { --node: var(--human-ink); --dot: var(--human); }
.trace-line {
  margin: 26px 0 0; font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--data-ink);
}

/* The claims ledger on the homepage: id, sentence, the test that proves it. */
.ledger-rows { max-width: 880px; font-family: var(--mono); }
.ledger-rows > div {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 18px; align-items: baseline;
  padding: 15px 0; border-top: 1.5px solid var(--rule);
}
.ledger-rows > div:last-of-type { border-bottom: 1.5px solid var(--rule); }
.ledger-rows b { font-size: 12px; font-weight: 700; color: var(--dim); }
.ledger-rows span { font-family: var(--sans); font-size: 14.5px; color: var(--ink); }
.ledger-rows em { font-style: normal; font-size: 12px; color: var(--data-ink); white-space: nowrap; }
.ledger-receipt {
  display: flex; align-items: center; gap: 9px; margin: 18px 0 0;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}
.ledger-receipt .seal { width: 16px; height: 16px; }
.ledger-receipt strong { color: var(--ink); }
/* The boundary sits inside the ledger because that is where it belongs — beside the receipt it
   qualifies — but it is prose, and the ledger's mono is for identifiers and counts. */
.ledger-rows .boundary-note { font-family: var(--sans); font-size: 15px; margin-top: 22px; }

/* Lifecycle and story flow: the same rail as the hero, not a row of pills.
 *
 * The rail is drawn per stop rather than once across the list, because both of these wrap onto
 * several rows at most widths and a single absolute line can only ever be right on one of them.
 * `::before` is the segment and `::after` is the node, in that order, so the node paints over
 * the line it sits on. */
.lifecycle, .story-flow { border: 0; border-radius: 0; background: none; gap: 0; padding: 0; overflow: visible; list-style: none; }
.lifecycle::before, .story-flow::before { content: none; }
/* `position: relative` is load-bearing, not tidiness: both connectors below are absolutely
   positioned children, and without it they resolve against the nearest positioned ancestor —
   which on a solution page is the hero, so every dot piles up in one corner of the page. */
.lifecycle li, .story-flow li {
  position: relative; z-index: 1; min-height: 0; border: 0; border-radius: 0; background: none;
  display: block; text-align: left;
}
.story-hero { padding-bottom: 64px; }
.story-flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 44px 0 0; }
.lifecycle {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 40px 0; row-gap: 30px;
}
.lifecycle li {
  padding: 24px 14px 0 0;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.lifecycle li::before {
  content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--rule);
}
.lifecycle li::after {
  content: ''; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 32%, var(--paper)); transform: translate(0, -50%);
  color: inherit; right: auto; bottom: auto; z-index: 1;
}
.story-flow { row-gap: 26px; }
.story-flow li {
  padding: 26px 14px 0 0;
  font: 600 11px/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.story-flow li::before {
  content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: var(--rule);
}
.story-flow li::after {
  content: ''; position: absolute; left: 0; top: 5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--node, var(--accord)); transform: translate(0, -50%); z-index: 1;
}
/* The solution pages walk the same four actors through a specific commercial story, so the four
   state classes mean here what they mean everywhere: the node takes the actor's colour and the
   label takes its ink. No tinted pill — the colour is the information. */
.story-flow .state-agent { --node: var(--agent); color: var(--agent-ink); background: none !important; }
.story-flow .state-policy { --node: var(--pending); color: var(--pending-ink); background: none !important; }
.story-flow .state-human { --node: var(--human); color: var(--human-ink); background: none !important; }
.story-flow .state-evidence { --node: var(--data); color: var(--data-ink); background: none !important; }
.story-flow .state-agent, .story-flow .state-policy,
.story-flow .state-human, .story-flow .state-evidence { font-weight: 700; }

.agent-loop { gap: 36px; }
.agent-loop li { padding: 20px 0 0; border-top: 2px solid var(--rule); background: none; }
.agent-loop li strong { font-family: var(--display); font-size: 1.2rem; }

.system-rails { border: 0; border-radius: 0; background: none; padding: 18px 0; border-block: 1.5px solid var(--rule); gap: 24px; }
.system-rails span { text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.boundary-note {
  background: none; border: 0; border-left: 3px solid var(--pending);
  border-radius: 0; padding: 4px 0 4px 18px;
}

/* Job → outcome → workflow → capability → proof, as a chain rather than five capsules. */
.outcome-chain { gap: 0; align-items: baseline; }
.outcome-chain span {
  padding: 0; border-radius: 0; background: none;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.outcome-chain span + span::before { content: '→'; margin: 0 10px; color: var(--dim); }

.hero-proof { border-left-color: var(--accord); background: none; padding-left: 18px; }

/* Remaining shared components, brought onto paper. */
.card, .cards > .card, .cluster-card, .table-wrap, .limit-card, details, .journey-detail p, .benchmark-note, .proof-note {
  box-shadow: none; background: none;
}
.card, .cluster-card, .journey-detail p, .benchmark-note, .proof-note {
  border: 0; border-top: 2px solid var(--rule); border-radius: 0; padding: 20px 0 0;
}
.card:hover, .cluster-card:hover { transform: none; border-color: var(--ink); }
.card .limit { border-top-style: solid; }
.limit-card { border: 0; border-left: 3px solid var(--pending); border-radius: 0; padding: 4px 0 4px 18px; }
.table-wrap { border: 0; border-radius: 0; border-block: 1.5px solid var(--ink); }
/* `table { min-width: 620px }` exists so a wide table scrolls inside .table-wrap instead of
   crushing its columns. A table the generator emits *without* that wrapper has nothing to scroll
   in, so the same rule pushes the whole document sideways on a phone — jobs.html has done this
   since before the redesign, and a wider mono makes it worse. Unwrapped tables may shrink. */
:not(.table-wrap) > table { min-width: 0; }
:not(.table-wrap) > table th, :not(.table-wrap) > table td { overflow-wrap: anywhere; }
th, td { border-bottom-color: var(--rule); }
thead th { font-family: var(--mono); letter-spacing: .12em; }
details { border: 0; border-top: 1.5px solid var(--rule); border-radius: 0; }
summary { padding: 18px 0; }
summary::after { color: var(--dim); }
details > p { padding: 0 0 20px; }
.callout { background: none; border-left: 3px solid var(--accord); border-radius: 0; padding: 4px 0 4px 22px; }
.evidence code { background: none; border: 1px solid var(--data); color: var(--data-ink); }
/* Inline code on these pages is mostly file paths, and a path has no break opportunity a
   browser will take on its own — so on a phone it pushes the whole document sideways. This was
   already true before the redesign and got worse with it, because Spline Sans Mono sets wider
   than the system mono it replaced. Scoped to inline code: a <pre> block still scrolls in its
   own box rather than reflowing, which is what a code sample wants. */
:not(pre) > code { overflow-wrap: anywhere; }
/* Code panes are now a dark terminal ground in *both* themes rather than a tinted surface, so
   every colour inside them has to be re-checked against that ground rather than against paper.
   Measured on #171912: --warning is 3.32:1 and --accent 2.68:1, so the two rules written for a
   light pane are restated here in the pane's own palette. */
.code { background: #171912; color: #d8dcd0; border: 0; border-radius: 12px; box-shadow: none; }
.code .c { color: #8f9d94; }
.code .k { color: #8cf39a; }
.code .s { color: #f2cd5d; }
.code .bad { color: #ff9d7a; }

/* The refusal receipt is called the single most differentiated thing on this site, and it was
   marked by a border colour on a rule that no longer has a border width to paint. It keeps its
   mark, in the colour of the policy that did the refusing. */
.code.refusal { border: 0; border-left: 4px solid var(--pending); border-radius: 4px 12px 12px 4px; }
.boundary-block { border-radius: 0 12px 12px 0; }
.section-block > h2::before { background: var(--accord); }
::selection { background: color-mix(in srgb, var(--agent) 24%, transparent); }
tbody tr:hover td { background: color-mix(in srgb, var(--accord) 5%, transparent); }

.final-cta h2 { max-width: 18ch; font-size: clamp(2.4rem, 4.6vw, 4.5rem); }

/* ---------------------------------------------------------------- narrow */

@media (max-width: 960px) { .flow-hero { display: block; } }

@media (max-width: 760px) {
  .shell { width: min(100% - 28px, 1140px); }
  .hero { padding-top: 42px; }
  .hero h1, .hero:not(.hero-product) h1 { font-size: clamp(2.85rem, 12.5vw, 4.6rem); line-height: .95; letter-spacing: -.022em; }
  .choice-grid, .feature-grid, .agent-loop { grid-template-columns: 1fr; gap: 32px; }
  .editorial-choices { gap: 32px; }
  .lifecycle, .story-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lifecycle::before, .story-flow::before { content: none; }
  .proof-strip article { grid-template-columns: 1fr; gap: 4px; }
  .authority-rows > div { grid-template-columns: 1fr; gap: 8px; }
  .ledger-rows > div { grid-template-columns: 48px 1fr; }
  .ledger-rows em { grid-column: 2; }
  .one-system { gap: 14px; }
  .footer-seal { margin-bottom: 26px; }
  .final-cta { padding-block: 76px; }
}

/* ==================================================================
 * Reduced motion
 *
 * Not "the animation, faster". The scene resolves to the end of its
 * own story — the request made, the gate open and green, the stamp
 * landed, the audit recorded and the seal minted — because that
 * ending is the argument the section exists to make. A visitor who
 * asks for stillness gets the conclusion, not an empty rail.
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important; animation-delay: 0ms !important;
    animation-iteration-count: 1 !important; transition-duration: .001ms !important;
  }
  .button:hover, .solution-grid a:hover, .resource-grid a:hover { transform: none; }
  .flow-marquee-track { transform: none; }
  .hero-seal .seal { animation: none; }

  .flow-rail-live { animation: none; transform: scaleX(.95); }
  .flow-dot { animation: none; left: 95%; opacity: 1; background: var(--accord); }
  .flow-gate i { animation: none; background: var(--accord); }
  .flow-gate i:first-child { transform: rotate(-30deg); }
  .flow-gate i:last-child { transform: rotate(30deg); }
  .flow-scene .approval-flow li { animation: none; opacity: 1; }
  .flow-scene .state-human::after { animation: none; transform: translateX(-50%) scaleY(1); }
  .flow-scene .state-human strong { animation: none; opacity: 1; transform: rotate(-8deg) scale(1); }
  .flow-mint { animation: none; opacity: 1; transform: none; }
  .flow-scene .state-policy { opacity: .55; }

  .pair-policy, .pair-human, .pair-evidence { animation: none; background: transparent; }
  .practice-chip, .practice-approver, .practice-trace .recorded { animation: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .flow-rail-live { transform: scaleY(.94); }
  .flow-dot { left: var(--rail-x); top: 94%; }
  .flow-gate i:first-child { transform: rotate(30deg); }
  .flow-gate i:last-child { transform: rotate(-30deg); }
  .flow-scene .state-human::after { transform: scaleX(1); }
}