:root {
  color-scheme: light;
  --paper: #f2f0e7;
  --paper-deep: #e7e3d5;
  --ink: #11201f;
  --ink-soft: #384643;
  --muted: #64706c;
  --line: #b9b9ad;
  --line-dark: #75807b;
  --signal: #b8f34b;
  --signal-ink: #1c2a0b;
  --danger: #f25b3d;
  --cyan: #31c6c8;
  --blue: #4f78ff;
  --violet: #9768f4;
  --orange: #f49a3f;
  --max: 1240px;
  --edge: max(22px, calc((100vw - var(--max)) / 2));
  --display: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.tone-acid { --accent: var(--signal); --accent-ink: var(--signal-ink); }
.tone-cyan { --accent: var(--cyan); --accent-ink: #062827; }
.tone-blue { --accent: var(--blue); --accent-ink: #fff; }
.tone-red { --accent: var(--danger); --accent-ink: #2c0b05; }
.tone-violet { --accent: var(--violet); --accent-ink: #190a31; }
.tone-orange { --accent: var(--orange); --accent-ink: #301806; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(17, 32, 31, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 32, 31, .026) 1px, transparent 1px);
  background-size: 32px 32px;
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
code, time { font-family: var(--mono); }
mark { padding: .12em .35em; background: var(--accent); color: var(--accent-ink); }
.skip {
  position: fixed;
  left: -9999px;
  top: 10px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--ink);
  color: #fff;
}
.skip:focus { left: 10px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* Header */
.site-header {
  width: 100%;
  min-height: 78px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 26px;
  padding: 0 var(--edge);
  border-bottom: 1px solid var(--ink);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(12px);
}
.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 11px;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  background: var(--ink);
  color: var(--signal);
  font-family: var(--mono);
  font-size: .88rem;
  font-weight: 900;
  letter-spacing: -.08em;
}
.brand-name {
  font-family: var(--display);
  font-size: .9rem;
  font-stretch: condensed;
  font-weight: 900;
  letter-spacing: .08em;
}
.site-header nav { display: flex; align-items: center; gap: 29px; }
.site-header nav a {
  position: relative;
  padding: 27px 0 25px;
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}
.site-header nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.site-header nav a:hover::after { transform: scaleX(1); }
.header-cta {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-self: end;
  gap: 18px;
  padding: 8px 13px 8px 16px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
}
.header-cta span:last-child { color: var(--signal); }

/* Type and actions */
.chapter, .section-label {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.chapter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 9px;
  background: var(--accent);
  color: var(--accent-ink);
}
h1, h2, h3, p { text-wrap: pretty; }
h1, h2 {
  font-family: var(--display);
  font-stretch: condensed;
  font-weight: 900;
}
h1 {
  max-width: 840px;
  margin: 27px 0 0;
  font-size: clamp(3.35rem, 6.45vw, 6.55rem);
  line-height: .89;
  letter-spacing: -.071em;
  text-wrap: balance;
}
h2 {
  max-width: 930px;
  margin: 16px 0 0;
  font-size: clamp(2.25rem, 4.3vw, 4.5rem);
  line-height: .96;
  letter-spacing: -.055em;
  text-wrap: balance;
}
h3 { margin: 0; font-size: 1.13rem; line-height: 1.25; }
.lede {
  max-width: 690px;
  margin: 27px 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.08rem, 1.8vw, 1.35rem);
  line-height: 1.48;
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.button {
  display: inline-flex;
  min-height: 49px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 11px 14px 11px 17px;
  border: 1px solid var(--ink);
  font-size: .84rem;
  font-weight: 850;
  text-decoration: none;
}
.button.primary { background: var(--ink); color: #fff; }
.button.primary span:last-child { color: var(--accent); }
.button.secondary { background: transparent; color: var(--ink); }
.button:hover { box-shadow: 5px 5px 0 var(--accent); transform: translate(-2px, -2px); }

/* Hero archetypes */
.hero {
  position: relative;
  width: 100%;
  min-height: 690px;
  border-bottom: 1px solid var(--ink);
}
.hero-copy { min-width: 0; }
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(440px, .97fr);
  gap: clamp(45px, 7vw, 112px);
  align-items: center;
  padding: 82px var(--edge) 88px;
}
.hero-split:nth-child(even) { direction: rtl; }
.hero-split > * { direction: ltr; }
.hero-visual { min-width: 0; }
.hero-home {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(460px, .92fr);
  gap: 70px;
  align-items: center;
  padding: 94px var(--edge) 125px;
  background:
    linear-gradient(90deg, transparent 0 68%, color-mix(in srgb, var(--accent) 14%, transparent) 68% 100%);
}
.hero-home h1 { font-size: clamp(4rem, 7.8vw, 8rem); }
.hero-home .lede { max-width: 720px; }
.hero-index {
  position: absolute;
  right: var(--edge);
  bottom: 0;
  left: var(--edge);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ink);
  border-bottom: 0;
  background: var(--paper);
}
.hero-index span {
  padding: 13px 16px;
  border-right: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.hero-index span:last-child { border-right: 0; }
.hero-guide {
  display: grid;
  grid-template-columns: 1.2fr .5fr;
  gap: 55px 90px;
  align-items: start;
  padding: 84px var(--edge) 92px;
}
.hero-guide .hero-copy { max-width: 860px; }
.hero-guide h1, .hero-company h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: -.06em;
}
.guide-aside {
  margin-top: 42px;
  padding: 19px 21px;
  border-top: 6px solid var(--accent);
  border-bottom: 1px solid var(--ink);
  background: #fffdf5;
}
.guide-aside > span { font-family: var(--mono); font-size: .69rem; font-weight: 800; letter-spacing: .09em; }
.guide-aside ol { padding-left: 22px; margin: 18px 0 0; color: var(--ink-soft); }
.guide-aside li { margin: 9px 0; }
.hero-guide .hero-visual { grid-column: 1 / -1; }
.hero-guide .artifact-frame { max-width: 890px; margin-left: auto; }
.hero-directory {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 80px;
  align-items: end;
  padding: 98px var(--edge);
  background: var(--ink);
  color: #fff;
}
.hero-directory .chapter { background: var(--signal); color: var(--signal-ink); }
.hero-directory .lede { color: #bdc7c3; }
.hero-directory .button.secondary { border-color: #fff; color: #fff; }
.hero-company {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(390px, .8fr);
  gap: 80px;
  align-items: center;
  padding: 98px var(--edge);
}
.hero-company h1 { max-width: 900px; }
.hero-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 100px var(--edge);
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
}

/* Artifact system */
.artifact-frame {
  width: 100%;
  border: 1px solid var(--ink);
  background: #fcfbf4;
  box-shadow: 12px 12px 0 color-mix(in srgb, var(--accent) 74%, transparent);
}
.artifact-bar {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 13px;
  border-bottom: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: .7rem;
}
.artifact-bar::before {
  content: "●  ●  ●";
  margin-right: auto;
  color: var(--accent);
  letter-spacing: .1em;
}
.artifact-bar > span:first-child { margin-left: 14px; color: #cbd3cf; }
.artifact-status {
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 65%, #fff);
  color: var(--accent);
  text-transform: uppercase;
}
.artifact-body { min-height: 330px; padding: clamp(22px, 4vw, 39px); }
.artifact-caption { margin: 22px 0 0; color: var(--muted); font-family: var(--mono); font-size: .72rem; }
.system-input { padding: 16px; border: 1px solid var(--ink); background: var(--paper); }
.system-input span { display: block; margin-bottom: 5px; color: var(--muted); font-family: var(--mono); font-size: .65rem; }
.system-input strong { font-size: .95rem; }
.system-spine { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 13px; margin: 32px 0; }
.system-spine i { height: 1px; background: var(--ink); }
.system-spine b { padding: 9px 12px; background: var(--accent); font-family: var(--mono); font-size: .75rem; }
.system-output { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--ink); }
.system-output span { padding: 14px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: .72rem; font-weight: 800; }
.system-output span:nth-child(2n) { border-right: 0; }
.system-output span:nth-child(n+3) { border-bottom: 0; }
.endpoint { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.endpoint > span { padding: 3px 7px; background: var(--signal); font-family: var(--mono); font-size: .72rem; font-weight: 900; }
.method { padding: 5px 7px; color: #fff; font-family: var(--mono); font-size: .67rem; }
.method.post { background: var(--violet); }
.code-lines { display: grid; gap: 5px; margin: 23px 0; padding: 18px; background: var(--ink); color: #dce6e1; font-size: .77rem; }
.code-lines code:nth-child(2) { color: var(--accent); }
.scenario-row, .input-stack, .output-stack, .pipeline, .log-filter, .agent-score {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.scenario-row span, .input-stack span, .output-stack span, .log-filter span, .agent-score span {
  padding: 6px 8px;
  border: 1px solid var(--ink);
  background: var(--paper);
  font-family: var(--mono);
  font-size: .65rem;
}
.scenario-row span:nth-child(2) { background: color-mix(in srgb, var(--danger) 25%, #fff); }
.mcp-chain { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; }
.mcp-chain > div { padding: 17px 10px; border: 1px solid var(--ink); text-align: center; }
.mcp-chain small, .exchange small, .analysis-split small, .debug-finding small, .message-fields small { display: block; color: var(--muted); font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; }
.mcp-chain b { display: block; margin-top: 5px; font-size: .82rem; }
.tool-call { display: flex; justify-content: space-between; margin-top: 13px; padding: 12px; border-bottom: 1px solid var(--line); font-size: .75rem; }
.tool-call span { color: #176c4f; font-weight: 800; }
.flow-list, .test-list, .agent-trace { padding: 0; margin: 0; list-style: none; }
.flow-list li, .agent-trace li { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.flow-list b, .agent-trace b { font-family: var(--mono); font-size: .68rem; }
.flow-list span, .agent-trace span { font-family: var(--mono); font-size: .76rem; }
.flow-list em, .agent-trace em { padding: 3px 6px; background: var(--signal); font-family: var(--mono); font-size: .62rem; font-style: normal; }
.flow-result { display: flex; justify-content: space-between; margin-top: 22px; padding: 13px; background: var(--ink); color: #fff; font-size: .78rem; }
.flow-result span { color: var(--signal); }
.chaos-chart { height: 190px; display: flex; align-items: end; gap: 11px; padding: 12px; border-bottom: 1px solid var(--ink); background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 38px; }
.chaos-chart span { width: 100%; height: var(--h); background: var(--ink); }
.chaos-chart .fault { background: var(--danger); }
.chaos-legend { display: flex; justify-content: space-between; gap: 10px; margin-top: 17px; font-family: var(--mono); font-size: .65rem; }
.chaos-legend code { padding: 4px 7px; background: var(--danger); color: #fff; }
.api-code { margin-top: 0; }
.pipeline { align-items: center; justify-content: space-between; padding-top: 15px; border-top: 1px solid var(--ink); font-family: var(--mono); font-size: .68rem; font-weight: 800; }
.pipeline i { font-style: normal; }
.risk-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: .72rem; }
.signal { padding: 3px 6px; font-size: .63rem; text-transform: uppercase; }
.signal.good { background: var(--signal); }
.signal.warn { background: var(--orange); }
.signal.bad { background: var(--danger); color: #fff; }
.test-head { display: flex; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid var(--ink); }
.test-head span { font-family: var(--mono); font-size: .72rem; }
.test-list li { display: grid; grid-template-columns: 26px 1fr; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .78rem; }
.test-list i { color: #25794f; font-style: normal; font-weight: 900; }
.exchange { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 14px; }
.exchange > div { display: grid; align-content: start; gap: 17px; padding: 18px; border: 1px solid var(--ink); background: var(--paper); }
.exchange > i { align-self: center; font-size: 1.3rem; font-style: normal; }
.exchange b, .exchange code { font-size: .72rem; }
.diff-line { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .72rem; }
.diff-line b { font-family: var(--mono); }
.diff-line span { padding: 3px 6px; font-family: var(--mono); font-size: .61rem; }
.diff-line.neutral span { background: var(--signal); }
.diff-line.removed { color: #a62f1d; }
.diff-line.removed span { background: var(--danger); color: #fff; }
.diff-line.changed span { background: var(--orange); }
.release-call { display: flex; justify-content: space-between; margin-top: 22px; padding: 13px; background: var(--ink); color: #fff; font-size: .76rem; }
.release-call strong { color: var(--accent); }
.detect-arrow { margin: 26px 0; padding: 15px; border: 1px dashed var(--line-dark); font-family: var(--mono); font-size: .69rem; text-align: center; }
.output-stack span { background: var(--accent); color: var(--accent-ink); }
.intercept-path, .debug-path { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 11px; font-family: var(--mono); font-size: .69rem; font-weight: 800; }
.intercept-path i { height: 1px; background: var(--ink); }
.intercept-path b { padding: 10px; background: var(--accent); }
.header-lines { display: grid; gap: 8px; margin-top: 35px; padding: 17px; background: var(--ink); color: #dce6e1; font-size: .69rem; }
.ledger, .workspace-map { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--ink); }
.ledger > div, .workspace-map > div { padding: 16px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.ledger > div:nth-child(2n), .workspace-map > div:nth-child(2n) { border-right: 0; }
.ledger > div:nth-child(n+3), .workspace-map > div:nth-child(n+3) { border-bottom: 0; }
.ledger b, .workspace-map small { display: block; margin-bottom: 5px; color: var(--muted); font-family: var(--mono); font-size: .61rem; }
.ledger span, .workspace-map b { font-size: .8rem; }
.evidence-stamp { width: max-content; margin: 27px 0 0 auto; padding: 7px 9px; border: 3px double var(--danger); color: var(--danger); font-family: var(--mono); font-size: .72rem; font-weight: 900; transform: rotate(-2deg); }
.lint-code { display: grid; margin-bottom: 18px; padding: 14px 0; background: var(--ink); color: #dce6e1; font-size: .7rem; }
.lint-code code { padding: 4px 13px; }
.lint-code code span { display: inline-block; width: 31px; color: #7c8c86; }
.lint-code .focus { background: #243633; }
.lint-code .warning { border-left: 4px solid var(--orange); color: var(--orange); }
.lint-note { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; font-size: .7rem; }
.lint-note b { padding: 4px 6px; background: var(--orange); }
.lint-note em { color: var(--muted); font-family: var(--mono); font-style: normal; }
.debug-path { margin-top: 20px; }
.debug-path i { font-style: normal; }
.debug-path b { padding: 6px; background: var(--danger); color: #fff; }
.debug-finding { margin-top: 36px; padding: 18px; border-left: 5px solid var(--danger); background: var(--paper); }
.debug-finding code, .debug-finding strong { display: block; margin-top: 8px; font-size: .76rem; }
.workspace-event { display: grid; grid-template-columns: 1fr 1fr auto; gap: 9px; margin-top: 19px; padding-top: 13px; border-top: 1px solid var(--line); font-size: .68rem; }
.workspace-event time { color: var(--muted); }
.docs-index { display: grid; grid-template-columns: auto 1fr; border-top: 1px solid var(--ink); }
.docs-index b, .docs-index span { padding: 10px; border-bottom: 1px solid var(--ink); }
.docs-index b { border-right: 1px solid var(--ink); background: var(--accent); font-family: var(--mono); font-size: .68rem; }
.docs-index span { font-size: .76rem; }
.docs-path { margin-top: 20px; color: var(--muted); text-align: center; }
.trace-grid { display: grid; grid-template-columns: 88px 1fr; gap: 8px 12px; align-items: center; }
.trace-grid code { color: var(--muted); font-size: .64rem; }
.trace-grid i { position: relative; height: 16px; background: var(--paper-deep); }
.trace-grid i::after { content: ""; position: absolute; top: 2px; bottom: 2px; left: var(--x); width: var(--w); background: var(--ink); }
.trace-grid i.slow::after { background: var(--danger); }
.trace-note, .next-check { display: flex; justify-content: space-between; gap: 12px; margin-top: 27px; padding: 12px; border: 1px solid var(--ink); font-size: .68rem; }
.analysis-split { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.analysis-split > div { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--ink); }
.analysis-split b { font-size: .82rem; }
.analysis-split code { color: var(--muted); font-size: .65rem; }
.next-check { display: grid; color: var(--muted); font-family: var(--mono); }
.next-check strong { color: var(--ink); }
.agent-trace em { background: var(--signal); }
.agent-trace li:last-child em { background: var(--danger); color: #fff; }
.agent-score { margin-top: 21px; }
.log-lines { display: grid; gap: 2px; padding: 12px; background: var(--ink); color: #dce6e1; font-size: .63rem; }
.log-lines code { padding: 7px; }
.log-lines time { display: inline-block; width: 68px; color: #8ca099; }
.log-lines .warn { color: var(--orange); }
.log-lines .error { background: #4b211a; color: #ff8f78; }
.log-filter { margin-top: 17px; }
.recipe { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--ink); }
.recipe > div { display: grid; grid-template-columns: auto 1fr; gap: 11px; padding: 15px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.recipe > div:nth-child(2n) { border-right: 0; }
.recipe > div:nth-child(n+3) { border-bottom: 0; }
.recipe b { font-family: var(--mono); }
.recipe span { font-size: .75rem; }
.directory-list { display: grid; }
.directory-list span { display: grid; grid-template-columns: 45px 1fr; gap: 10px; padding: 16px 0; border-bottom: 1px solid #75807b; color: #fff; font-size: .82rem; }
.directory-list b { color: var(--signal); font-family: var(--mono); }
.principle-stack { display: grid; gap: 8px; }
.principle-stack strong { padding: 13px 0; border-bottom: 1px solid var(--ink); font-family: var(--display); font-size: clamp(1.45rem, 3vw, 2.5rem); line-height: 1; letter-spacing: -.04em; }
.message-fields { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--ink); }
.message-fields > div { min-height: 100px; padding: 15px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.message-fields > div:nth-child(2n) { border-right: 0; }
.message-fields > div:nth-child(n+3) { border-bottom: 0; }
.message-fields code, .message-fields span { display: block; margin-top: 14px; font-size: .73rem; }

/* Main content sections */
.section {
  width: 100%;
  padding: clamp(80px, 9vw, 130px) var(--edge);
  border-bottom: 1px solid var(--ink);
}
.outcome-section {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(390px, .8fr);
  gap: clamp(55px, 8vw, 120px);
  align-items: start;
}
.section-intro h2 { max-width: 780px; font-size: clamp(2.4rem, 4.3vw, 4.5rem); }
.outcome-list { padding: 0; margin: 2px 0 0; border-top: 1px solid var(--ink); list-style: none; }
.outcome-list li { display: grid; grid-template-columns: 48px 1fr; gap: 15px; padding: 23px 0; border-bottom: 1px solid var(--ink); }
.outcome-list b { color: var(--muted); font-family: var(--mono); font-size: .7rem; }
.outcome-list span { font-size: 1.02rem; font-weight: 650; }
.workflow-section { background: var(--paper-deep); }
.workflow-section > h2 { max-width: 850px; }
.workflow-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 0;
  margin: 58px 0 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  list-style: none;
}
.workflow-list li { min-height: 290px; display: grid; grid-template-rows: auto 1fr; padding: 21px 25px 28px; border-right: 1px solid var(--ink); }
.workflow-list li:last-child { border-right: 0; }
.workflow-number { margin-bottom: 67px; font-family: var(--mono); font-size: .72rem; }
.workflow-list h3 { max-width: 260px; font-size: 1.3rem; }
.workflow-list p { max-width: 310px; margin: 13px 0 0; color: var(--ink-soft); font-size: .91rem; }
.principle-section {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 90px;
  align-items: end;
  background: var(--ink);
  color: #fff;
}
.principle-section .section-label { color: var(--accent); }
.principle-section h2 { font-size: clamp(2rem, 3.6vw, 3.8rem); }
.principle-copy { margin: 0; color: #c3ceca; font-size: clamp(1.25rem, 2.2vw, 1.72rem); line-height: 1.45; }
.notes-section h2 { max-width: 760px; }
.details-list, .note-list { max-width: 980px; margin: 51px 0 0 auto; }
.details-list details { border-top: 1px solid var(--ink); }
.details-list details:last-child { border-bottom: 1px solid var(--ink); }
.details-list summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  font-size: 1.08rem;
  font-weight: 800;
  list-style: none;
}
.details-list summary::-webkit-details-marker { display: none; }
.details-list summary span { font-family: var(--mono); }
.details-list details[open] summary span { transform: rotate(45deg); }
.details-list details p { max-width: 760px; margin: 0 0 25px; color: var(--ink-soft); }
.note-list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.note-list > div { padding: 23px 24px 25px 0; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.note-list > div + div { padding-left: 24px; }
.note-list > div:last-child { border-right: 0; }
.note-list dt { font-weight: 850; line-height: 1.3; }
.note-list dd { margin: 13px 0 0; color: var(--ink-soft); font-size: .9rem; }
.manifesto { display: grid; grid-template-columns: 1.45fr .55fr; gap: 90px; align-items: end; }
.manifesto .section-label { grid-column: 1 / -1; }
.manifesto blockquote {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 5.1vw, 5.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.05em;
}
.manifesto > p { margin: 0; color: var(--ink-soft); font-size: 1.1rem; }
.directory-section { background: var(--paper-deep); }
.directory-entries { margin-top: 60px; border-top: 1px solid var(--ink); }
.directory-entries a {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--ink);
  text-decoration: none;
}
.directory-entries a:hover { background: var(--accent); }
.directory-entries b { font-family: var(--mono); font-size: .72rem; }
.directory-entries span { display: grid; grid-template-columns: minmax(230px, .55fr) 1fr; gap: 30px; align-items: center; }
.directory-entries strong { font-size: 1.18rem; }
.directory-entries small { color: var(--ink-soft); font-size: .88rem; }
.directory-entries i { font-style: normal; }
.final-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 80px;
  align-items: end;
  padding: 90px var(--edge);
  background: var(--accent);
  color: var(--accent-ink);
}
.final-cta h2 { max-width: 780px; font-size: clamp(2.65rem, 5.2vw, 5.3rem); }
.final-cta p { max-width: 690px; margin: 21px 0 0; font-size: 1.02rem; }
.final-cta .actions { justify-content: end; margin: 0; }
.final-cta .button.secondary { background: color-mix(in srgb, var(--paper) 35%, transparent); }

/* Footer */
.site-footer {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr);
  gap: 55px;
  padding: 72px var(--edge) 80px;
  background: #091413;
  color: #fff;
}
.site-footer > div { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-brand { color: #fff; }
.footer-lead p { max-width: 410px; margin: 22px 0; color: #aebbb6; }
.footer-signal { display: inline-flex; align-items: center; gap: 8px; color: #aebbb6; font-family: var(--mono); font-size: .63rem; }
.footer-signal i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(184, 243, 75, .14); }
.site-footer h2 { margin: 5px 0 13px; color: var(--signal); font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.site-footer a:not(.brand) { color: #ced6d2; font-size: .83rem; text-decoration: none; }
.site-footer a:not(.brand):hover { color: var(--signal); }

/* Archetype variations */
.archetype-editorial .hero-split {
  grid-template-columns: minmax(0, 1.23fr) minmax(400px, .77fr);
  align-items: end;
}
.archetype-editorial .hero-split h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: -.065em; }
.archetype-editorial .hero-visual { transform: translateY(35px); }
.archetype-product .hero-split:nth-of-type(odd) .hero-visual { order: -1; }
.archetype-product .artifact-frame { transform: rotate(-.35deg); }
.archetype-flagship .artifact-frame { transform: rotate(.25deg); }
.archetype-guide .workflow-list { grid-template-columns: 1fr; max-width: 920px; margin-left: auto; }
.archetype-guide .workflow-list li { min-height: 0; grid-template-columns: 80px 1fr; grid-template-rows: 1fr; align-items: start; padding: 29px 0; border-right: 0; border-bottom: 1px solid var(--ink); }
.archetype-guide .workflow-list li:last-child { border-bottom: 0; }
.archetype-guide .workflow-number { margin: 0; }
.archetype-guide .workflow-list h3 { max-width: none; }
.archetype-contact .outcome-section { background: #fffdf5; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; border-top: 1px solid var(--line); }
  .site-header nav a { padding: 13px 0; }
  .hero-split, .hero-home, .hero-directory, .hero-company, .hero-contact { grid-template-columns: 1fr; gap: 58px; }
  .hero-split { padding-top: 70px; }
  .hero-home { padding-bottom: 125px; background: none; }
  .hero-guide { grid-template-columns: 1fr; gap: 30px; }
  .guide-aside { max-width: 520px; margin: 0; }
  .hero-guide .hero-visual { grid-column: auto; }
  .hero-directory { align-items: start; }
  .hero-directory .artifact-frame { max-width: 680px; }
  .outcome-section { grid-template-columns: 1fr; }
  .outcome-list { max-width: 760px; margin-left: auto; }
  .principle-section { grid-template-columns: 1fr; }
  .note-list { grid-template-columns: 1fr; }
  .note-list > div, .note-list > div + div { padding: 22px 0; border-right: 0; }
  .manifesto { grid-template-columns: 1fr; }
  .manifesto > p { max-width: 650px; }
  .final-cta { grid-template-columns: 1fr; }
  .final-cta .actions { justify-content: start; }
  .site-footer { grid-template-columns: 1.4fr repeat(2, 1fr); }
  .site-footer > div:last-child { grid-column: 2 / -1; }
}

@media (max-width: 700px) {
  :root { --edge: 19px; }
  body { font-size: 16px; }
  body::before { background-size: 24px 24px; }
  .site-header { gap: 13px; padding-top: 13px; }
  .brand-mark { width: 35px; height: 35px; }
  .brand-name { font-size: .78rem; }
  .header-cta { min-height: 39px; padding: 7px 10px 7px 12px; }
  .header-cta span:first-child { font-size: 0; }
  .header-cta span:first-child::after { content: "Open app"; font-size: .77rem; }
  .site-header nav { width: calc(100vw - (2 * var(--edge))); overflow-x: auto; gap: 24px; justify-content: start; scrollbar-width: none; }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav a { flex: 0 0 auto; font-size: .67rem; }
  h1 { font-size: clamp(3.2rem, 15vw, 5rem); line-height: .9; }
  h2 { font-size: clamp(2.25rem, 11.5vw, 3.4rem); }
  .hero { min-height: 0; }
  .hero-split, .hero-home, .hero-directory, .hero-company, .hero-contact { gap: 44px; padding: 62px var(--edge) 70px; }
  .hero-home { padding-bottom: 118px; }
  .hero-home h1 { font-size: clamp(3.45rem, 16vw, 5.3rem); }
  .hero-guide { padding: 62px var(--edge) 70px; }
  .hero-index { grid-template-columns: repeat(2, 1fr); }
  .hero-index span { border-bottom: 1px solid var(--ink); }
  .hero-index span:nth-child(2n) { border-right: 0; }
  .hero-index span:nth-child(n+3) { border-bottom: 0; }
  .artifact-frame { box-shadow: 7px 7px 0 color-mix(in srgb, var(--accent) 74%, transparent); }
  .artifact-body { min-height: 0; padding: 21px 17px; }
  .mcp-chain { grid-template-columns: 1fr; }
  .mcp-chain > i { transform: rotate(90deg); text-align: center; }
  .exchange { grid-template-columns: 1fr; }
  .exchange > i { transform: rotate(90deg); text-align: center; }
  .intercept-path, .debug-path { grid-template-columns: 1fr; text-align: center; }
  .intercept-path i { height: 15px; width: 1px; justify-self: center; }
  .analysis-split { grid-template-columns: 1fr; }
  .chaos-legend { flex-wrap: wrap; }
  .workspace-event { grid-template-columns: 1fr; }
  .section { padding: 72px var(--edge); }
  .workflow-list { grid-template-columns: 1fr; margin-top: 42px; }
  .workflow-list li { min-height: 0; padding: 22px 0 27px; border-right: 0; border-bottom: 1px solid var(--ink); }
  .workflow-list li:last-child { border-bottom: 0; }
  .workflow-number { margin-bottom: 36px; }
  .principle-section { gap: 46px; }
  .details-list, .note-list { margin-top: 38px; }
  .directory-entries a { grid-template-columns: 39px 1fr auto; gap: 8px; }
  .directory-entries span { grid-template-columns: 1fr; gap: 4px; }
  .directory-entries small { font-size: .77rem; }
  .final-cta { padding: 66px var(--edge); gap: 45px; }
  .final-cta .actions { display: grid; }
  .site-footer { grid-template-columns: 1fr 1fr; gap: 45px 28px; padding: 60px var(--edge); }
  .footer-lead { grid-column: 1 / -1; }
  .site-footer > div:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}