:root {
  color-scheme: light;
  --canvas: #f7f9fc;
  --canvas-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #f0f4fa;
  --surface-3: #e6ebf3;
  --ink: #0b1220;
  --ink-soft: #354258;
  --muted: #6b778c;
  --line: rgba(11,18,32,.1);
  --line-strong: rgba(11,18,32,.18);
  --accent: #56e0ff;
  --accent-rgb: 86,224,255;
  --accent-text: #087c96;
  --accent-ink: #041015;
  --good: #62e6a7;
  --warn: #ffcf70;
  --bad: #ff7e92;
  --max: 1240px;
  --edge: max(24px, calc((100vw - var(--max)) / 2));
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 30px;
  --shadow: 0 32px 80px rgba(27,39,66,.12);
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.tone-acid { --accent:#a8ff78; --accent-rgb:168,255,120; --accent-ink:#0c1707; --accent-text:#34770e; }
.tone-cyan { --accent:#56e0ff; --accent-rgb:86,224,255; --accent-ink:#041015; --accent-text:#087c96; }
.tone-blue { --accent:#7da4ff; --accent-rgb:125,164,255; --accent-ink:#071020; --accent-text:#315fbf; }
.tone-red { --accent:#ff7e92; --accent-rgb:255,126,146; --accent-ink:#1d070b; --accent-text:#bb3048; }
.tone-violet { --accent:#b99aff; --accent-rgb:185,154,255; --accent-ink:#10091e; --accent-text:#7046c4; }
.tone-orange { --accent:#ffb86b; --accent-rgb:255,184,107; --accent-ink:#1c0e03; --accent-text:#a95508; }

* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--canvas); }
body {
  margin:0;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 12% 3%, rgba(var(--accent-rgb),.14), transparent 27rem),
    radial-gradient(circle at 92% 24%, rgba(125,164,255,.11), transparent 35rem),
    var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.24;
  background-image:
    linear-gradient(rgba(11,18,32,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,18,32,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom, #000, transparent 72%);
}
a { color:inherit; }
button, input, textarea { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
code, time { font-family:var(--mono); }
mark { padding:.15em .38em; border-radius:5px; background:rgba(var(--accent-rgb),.16); color:var(--accent); }
h1,h2,h3,p { text-wrap:pretty; }
h1,h2 { font-family:var(--display); text-wrap:balance; }
h1 {
  max-width:800px;
  margin:26px 0 0;
  font-size:clamp(2.9rem,4.8vw,5.15rem);
  font-weight:740;
  line-height:.98;
  letter-spacing:-.06em;
}
h2 {
  max-width:900px;
  margin:15px 0 0;
  font-size:clamp(2.25rem,4.2vw,4.5rem);
  font-weight:680;
  line-height:1;
  letter-spacing:-.055em;
}
h3 { margin:0; font-size:1.05rem; line-height:1.3; letter-spacing:-.02em; }
::selection { background:var(--accent); color:var(--accent-ink); }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.skip { position:fixed; top:12px; left:-9999px; z-index:100; padding:10px 14px; border-radius:10px; background:var(--accent); color:var(--accent-ink); }
.skip:focus { left:12px; }

/* Navigation */
.site-header {
  position:relative;
  z-index:20;
  width:min(calc(100% - 32px), 1320px);
  min-height:72px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:28px;
  margin:16px auto 0;
  padding:0 14px 0 18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.82);
  box-shadow:0 16px 50px rgba(27,39,66,.1);
  backdrop-filter:blur(22px) saturate(140%);
}
.brand { display:inline-flex; align-items:center; justify-self:start; gap:11px; text-decoration:none; }
.brand-mark { width:34px; height:34px; flex:0 0 34px; display:block; object-fit:contain; border-radius:10px; box-shadow:0 0 28px rgba(var(--accent-rgb),.18); }
.brand-name { font-size:.77rem; font-weight:850; letter-spacing:.12em; }
.site-header nav { display:flex; align-items:center; gap:6px; }
.site-header nav a { padding:9px 12px; border-radius:10px; color:var(--muted); font-size:.77rem; font-weight:680; text-decoration:none; transition:background .2s,color .2s; }
.site-header nav a:hover { background:rgba(11,18,32,.05); color:var(--ink); }
.header-cta,.button { transition:transform .2s ease, border-color .2s, background .2s, box-shadow .2s; }
.header-cta {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-self:end;
  gap:16px;
  padding:8px 10px 8px 16px;
  border:1px solid rgba(var(--accent-rgb),.35);
  border-radius:12px;
  background:rgba(var(--accent-rgb),.1);
  color:var(--ink);
  font-size:.78rem;
  font-weight:750;
  text-decoration:none;
}
.header-cta span:last-child { width:25px; height:25px; display:grid; place-items:center; border-radius:8px; background:var(--accent); color:var(--accent-ink); }
.header-cta:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:0 10px 28px rgba(var(--accent-rgb),.13); }

/* Shared labels and actions */
.chapter,.section-label {
  margin:0;
  color:var(--accent-text);
  font-family:var(--mono);
  font-size:.69rem;
  font-weight:780;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.chapter { display:inline-flex; align-items:center; gap:9px; padding:7px 10px; border:1px solid rgba(var(--accent-rgb),.26); border-radius:999px; background:rgba(var(--accent-rgb),.08); }
.chapter::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(var(--accent-rgb),.08); }
.lede { max-width:700px; margin:28px 0 0; color:var(--ink-soft); font-size:clamp(1.08rem,1.7vw,1.34rem); line-height:1.55; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
.button {
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  padding:11px 12px 11px 17px;
  border:1px solid var(--line-strong);
  border-radius:13px;
  font-size:.8rem;
  font-weight:760;
  text-decoration:none;
}
.button span:last-child { width:27px; height:27px; display:grid; place-items:center; border-radius:8px; }
.button.primary { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); box-shadow:0 12px 35px rgba(var(--accent-rgb),.14); }
.button.primary span:last-child { background:rgba(0,0,0,.13); }
.button.secondary { background:rgba(255,255,255,.72); color:var(--ink); }
.button.secondary span:last-child { background:rgba(11,18,32,.055); color:var(--accent); }
.button:hover { transform:translateY(-3px); box-shadow:0 16px 38px rgba(0,0,0,.24); }

/* Hero */
.hero {
  position:relative;
  width:min(calc(100% - 32px), 1320px);
  min-height:690px;
  margin:14px auto 0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:
    radial-gradient(circle at 80% 10%, rgba(var(--accent-rgb),.13), transparent 24rem),
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(245,248,252,.9));
  box-shadow:var(--shadow);
}
.hero::after { content:""; position:absolute; inset:auto -10% -42% 38%; height:480px; border-radius:50%; background:rgba(var(--accent-rgb),.07); filter:blur(80px); pointer-events:none; }
.hero-copy,.hero-visual,.guide-aside { position:relative; z-index:1; min-width:0; }
.hero-split,.hero-home,.hero-directory,.hero-company,.hero-contact {
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);
  gap:clamp(48px,7vw,108px);
  align-items:center;
  padding:clamp(74px,8vw,118px) clamp(28px,6vw,82px);
}
.hero-home { padding-bottom:108px; }
.hero-home h1 { max-width:950px; }
.hero-guide { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.36fr); gap:50px; padding:clamp(74px,8vw,112px) clamp(28px,6vw,82px); }
.hero-guide .hero-visual { grid-column:1 / -1; max-width:720px; }
.guide-aside { align-self:start; padding:24px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.82); box-shadow:0 14px 38px rgba(27,39,66,.045); }
.guide-aside > span { color:var(--accent); font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; }
.guide-aside ol { margin:22px 0 0; padding-left:21px; color:var(--ink-soft); }
.guide-aside li + li { margin-top:12px; }
.hero-directory,.hero-company,.hero-contact { grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr); }
.hero-typing {
  width:min(100%,730px);
  min-height:46px;
  display:flex;
  align-items:center;
  gap:11px;
  margin:24px 0 0;
  padding:10px 14px;
  border:1px solid rgba(var(--accent-rgb),.22);
  border-radius:12px;
  background:rgba(var(--accent-rgb),.06);
  color:var(--ink-soft);
  font-size:clamp(1rem,1.4vw,1.22rem);
}
.hero-typing-prefix { flex:0 0 auto; color:var(--muted); }
.hero-typing-text { min-width:0; overflow:hidden; color:var(--accent-text); font-family:var(--mono); font-size:.88em; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.hero-index { position:absolute; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); background:rgba(255,255,255,.74); backdrop-filter:blur(18px); }
.hero-index span { padding:17px 20px; border-right:1px solid var(--line); color:var(--muted); font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-align:center; }
.hero-index span:last-child { border-right:0; }

/* Product artifact */
.hero-visual { perspective:1200px; }
.artifact-frame {
  --ink:#f7f9fc;
  --ink-soft:#c4ccda;
  --muted:#8994a8;
  --line:rgba(255,255,255,.1);
  --line-strong:rgba(255,255,255,.18);
  position:relative;
  overflow:hidden;
  border:1px solid rgba(var(--accent-rgb),.28);
  border-radius:22px;
  background:linear-gradient(150deg,rgba(26,34,50,.96),rgba(10,14,24,.96));
  color:var(--ink);
  box-shadow:0 34px 80px rgba(0,0,0,.42),0 0 70px rgba(var(--accent-rgb),.08);
  transform:rotateY(-3deg) rotateX(1deg);
}
.artifact-frame::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,rgba(255,255,255,.05),transparent 28%); }
.artifact-bar { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 17px 0 55px; border-bottom:1px solid var(--line); color:var(--muted); font-family:var(--mono); font-size:.65rem; }
.artifact-bar::before { content:""; position:absolute; top:19px; left:18px; width:8px; height:8px; border-radius:50%; background:#ff7e92; box-shadow:15px 0 #ffcf70,30px 0 #62e6a7; }
.artifact-status { padding:5px 8px; border-radius:7px; background:rgba(var(--accent-rgb),.1); color:var(--accent); }
.artifact-body { position:relative; min-height:330px; display:flex; flex-direction:column; justify-content:center; gap:18px; padding:30px; }
.artifact-caption { margin:0; color:var(--muted); font-size:.78rem; }
.endpoint,.test-head,.scenario-row,.chaos-legend,.flow-result,.trace-note,.next-check,.release-call,.workspace-event,.log-filter,.status-code-note { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.endpoint { padding:13px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.035); }
.endpoint code { flex:1; color:var(--ink-soft); font-size:.78rem; }
.endpoint > span { color:var(--good); font-family:var(--mono); font-size:.7rem; }
.method { padding:4px 7px; border-radius:6px; color:var(--accent-ink); font-family:var(--mono); font-size:.64rem; font-style:normal; }
.method.post { background:var(--accent); }
.code-lines,.header-lines,.log-lines { display:grid; gap:7px; padding:15px; border:1px solid var(--line); border-radius:11px; background:rgba(0,0,0,.2); }
.code-lines code,.header-lines code,.log-lines code { color:#cbd5e1; font-size:.72rem; }
.scenario-row,.chaos-legend,.agent-score,.log-filter,.status-code-note { flex-wrap:wrap; color:var(--muted); font-family:var(--mono); font-size:.62rem; }
.scenario-row span,.chaos-legend span,.agent-score span,.log-filter span { padding:6px 8px; border:1px solid var(--line); border-radius:8px; }
.system-input { padding:16px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.03); }
.system-input span { display:block; color:var(--accent); font-family:var(--mono); font-size:.62rem; }
.system-input strong { display:block; margin-top:7px; font-size:.95rem; }
.system-spine { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; color:var(--accent); font-size:.72rem; letter-spacing:.13em; }
.system-spine i { height:1px; background:linear-gradient(90deg,transparent,var(--accent)); }
.system-spine i:last-child { background:linear-gradient(90deg,var(--accent),transparent); }
.system-output { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.system-output span { padding:12px 5px; border:1px solid var(--line); border-radius:9px; color:var(--ink-soft); font-family:var(--mono); font-size:.58rem; text-align:center; }
.mcp-chain,.exchange,.analysis-split { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; }
.mcp-chain > div,.exchange > div,.analysis-split > div { padding:14px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.03); }
.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:.58rem; }
.mcp-chain b,.exchange b,.analysis-split b { display:block; margin-top:5px; font-size:.82rem; }
.mcp-chain i,.exchange > i { color:var(--accent); font-style:normal; }
.tool-call,.risk-row,.lint-note,.diff-line { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; padding:11px 13px; border:1px solid var(--line); border-radius:9px; }
.tool-call code,.risk-row span,.lint-note b,.diff-line code { font-size:.7rem; }
.tool-call span,.risk-row b,.lint-note em,.diff-line span { color:var(--muted); font-family:var(--mono); font-size:.6rem; font-style:normal; }
.flow-list,.test-list,.agent-trace,.docs-index { list-style:none; display:grid; gap:8px; margin:0; padding:0; }
.flow-list li,.agent-trace li { display:grid; grid-template-columns:32px 1fr auto; gap:12px; align-items:center; padding:11px 12px; border:1px solid var(--line); border-radius:10px; }
.flow-list b,.agent-trace b { color:var(--accent); font-family:var(--mono); font-size:.62rem; }
.flow-list span,.agent-trace span { font-family:var(--mono); font-size:.7rem; }
.flow-list em,.agent-trace em { color:var(--good); font-family:var(--mono); font-size:.6rem; font-style:normal; }
.flow-result,.next-check,.release-call,.trace-note { padding:12px 13px; border-radius:10px; background:rgba(var(--accent-rgb),.08); color:var(--muted); font-family:var(--mono); font-size:.65rem; }
.flow-result span,.next-check strong,.release-call strong,.trace-note strong { color:var(--accent); }
.chaos-chart { height:150px; display:flex; align-items:end; justify-content:space-between; gap:8px; padding:16px; border:1px solid var(--line); border-radius:12px; }
.chaos-chart span { width:100%; height:var(--h); border-radius:6px 6px 2px 2px; background:rgba(var(--accent-rgb),.32); }
.chaos-chart span.fault { background:var(--accent); box-shadow:0 0 22px rgba(var(--accent-rgb),.2); }
.pipeline,.intercept-path,.debug-path { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:7px; color:var(--muted); font-family:var(--mono); font-size:.6rem; text-align:center; }
.pipeline { grid-template-columns:1fr auto 1fr auto 1fr; }
.pipeline span,.intercept-path span,.debug-path span,.debug-path b { padding:10px 6px; border:1px solid var(--line); border-radius:8px; }
.pipeline i,.intercept-path i,.debug-path i { color:var(--accent); font-style:normal; }
.signal.good,.test-list i { color:var(--good); }
.signal.warn,.log-lines .warn { color:var(--warn); }
.signal.bad,.log-lines .error { color:var(--bad); }
.test-head strong { color:var(--good); }
.test-head span { color:var(--muted); font-family:var(--mono); font-size:.65rem; }
.test-list li { padding:10px 12px; border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:.76rem; }
.test-list i { margin-right:9px; font-style:normal; }
.input-stack,.output-stack { display:flex; flex-wrap:wrap; gap:7px; }
.input-stack span,.output-stack span { flex:1; min-width:70px; padding:11px 7px; border:1px solid var(--line); border-radius:9px; color:var(--ink-soft); font-family:var(--mono); font-size:.62rem; text-align:center; }
.output-stack span { border-color:rgba(var(--accent-rgb),.28); color:var(--accent); }
.detect-arrow { color:var(--muted); font-family:var(--mono); font-size:.67rem; text-align:center; }
.evidence-stamp,.lint-code { display:grid; place-items:center; min-height:130px; border:1px solid rgba(var(--accent-rgb),.26); border-radius:16px; color:var(--accent); font-family:var(--mono); font-size:1.4rem; }
.ledger,.message-fields,.workspace-map { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.ledger div,.message-fields div,.workspace-map div { padding:13px; border:1px solid var(--line); border-radius:10px; }
.ledger small,.workspace-map small { display:block; color:var(--muted); font-size:.58rem; }
.ledger b,.workspace-map b,.message-fields span,.message-fields code { display:block; margin-top:5px; font-size:.75rem; }
.diff-line { grid-template-columns:20px 1fr auto; }
.diff-line > b { color:var(--muted); }
.diff-line.removed > b,.diff-line.removed span { color:var(--bad); }
.diff-line.changed > b,.diff-line.changed span { color:var(--warn); }
.debug-finding { padding:17px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.18); }
.debug-finding code,.debug-finding strong { display:block; margin-top:8px; }
.debug-finding code { color:var(--ink-soft); font-size:.7rem; }
.debug-finding strong { color:var(--bad); }
.docs-index { grid-template-columns:30px 1fr; align-items:center; }
.docs-index b { color:var(--accent); font-family:var(--mono); font-size:.65rem; }
.docs-index span { padding:8px 0; border-bottom:1px solid var(--line); font-size:.76rem; }
.docs-path { padding:12px; border-radius:10px; background:rgba(var(--accent-rgb),.08); text-align:center; }
.docs-path code { color:var(--accent); font-size:.66rem; }
.trace-grid { display:grid; grid-template-columns:72px 1fr; gap:11px 8px; align-items:center; }
.trace-grid code { color:var(--muted); font-size:.62rem; }
.trace-grid i { position:relative; width:var(--w); height:10px; margin-left:var(--x); border-radius:4px; background:rgba(var(--accent-rgb),.32); }
.trace-grid i.slow { background:var(--accent); box-shadow:0 0 18px rgba(var(--accent-rgb),.2); }
.agent-score { display:flex; }
.log-lines time { color:var(--muted); }
.log-lines code { font-size:.64rem; }
.recipe { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.recipe div { display:flex; align-items:center; gap:11px; padding:13px; border:1px solid var(--line); border-radius:10px; }
.recipe b { width:25px; height:25px; display:grid; place-items:center; border-radius:8px; background:rgba(var(--accent-rgb),.12); color:var(--accent); font-family:var(--mono); font-size:.62rem; }
.recipe span { font-size:.72rem; }
.status-code-board { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.status-code-board a { display:flex; align-items:center; gap:10px; padding:11px; border:1px solid var(--line); border-radius:10px; text-decoration:none; }
.status-code-board b { color:var(--accent); font-family:var(--mono); }
.status-code-board span { color:var(--ink-soft); font-size:.69rem; }
.directory-list,.principle-stack { display:grid; gap:8px; }
.directory-list span,.principle-stack strong { padding:12px; border:1px solid var(--line); border-radius:10px; color:var(--ink-soft); font-size:.72rem; }
.directory-list b { margin-right:10px; color:var(--accent); font-family:var(--mono); }

/* Content sections */
.section { position:relative; padding:clamp(64px,7vw,96px) var(--edge); }
.section:nth-of-type(even) { background:rgba(255,255,255,.6); }
.section-intro { max-width:940px; }
.section-intro.narrow { max-width:760px; }
.section-copy { max-width:670px; color:var(--muted); }
.outcome-section,.principle-section,.checklist-section,.manifesto,.depth-kicker,.public-mock-creator,.home-mock-widget {
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(420px,1.05fr);
  gap:clamp(34px,5vw,72px);
  align-items:start;
}
.outcome-list,.evidence-list,.checklist,.workflow-list { list-style:none; margin:0; padding:0; }
.outcome-section h2 { font-size:clamp(2.15rem,3.5vw,3.65rem); line-height:1.04; }
.outcome-list { display:grid; gap:10px; }
.outcome-list li,.evidence-list li { display:flex; align-items:flex-start; gap:20px; padding:19px 20px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.78); box-shadow:0 12px 32px rgba(27,39,66,.045); }
.outcome-list b,.evidence-list b { color:var(--accent); font-family:var(--mono); font-size:.65rem; }
.outcome-list span,.evidence-list span { color:var(--ink-soft); }
.workflow-section { overflow:hidden; }
.workflow-list { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:38px; }
.workflow-list li { min-height:220px; display:flex; flex-direction:column; justify-content:space-between; padding:24px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,#fff,rgba(255,255,255,.62)); box-shadow:0 14px 38px rgba(27,39,66,.05); }
.workflow-number { color:var(--accent); font-family:var(--mono); font-size:.72rem; }
.workflow-list h3 { margin-top:44px; font-size:1.25rem; }
.workflow-list p { margin:12px 0 0; color:var(--muted); font-size:.9rem; }
.principle-section { align-items:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(110deg,rgba(var(--accent-rgb),.08),transparent 45%); }
.principle-copy { margin:0; color:var(--ink-soft); font-size:clamp(1.25rem,2.3vw,2rem); line-height:1.45; letter-spacing:-.025em; }
.depth-section { background:var(--canvas-2); }
.depth-kicker { margin-bottom:42px; }
.depth-kicker > p { margin:0; color:var(--muted); font-size:.83rem; }
.depth-copy { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.depth-copy p { margin:0; padding:24px; border:1px solid var(--line); border-radius:16px; color:var(--ink-soft); background:#fff; }
.depth-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:14px; margin-top:14px; }
.depth-grid > * { padding:24px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.usecase-grid,.code-class-grid,.evidence-list,.related-grid,.decision-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:36px; }
.usecase-grid article,.code-class-card,.decision-grid article { min-height:180px; padding:22px; border:1px solid var(--line); border-radius:17px; background:#fff; box-shadow:0 14px 38px rgba(27,39,66,.045); }
.usecase-grid article > span { display:block; margin-bottom:44px; color:var(--accent); font-family:var(--mono); font-size:.64rem; }
.usecase-grid p,.code-class-card p,.decision-grid p { margin:12px 0 0; color:var(--muted); font-size:.84rem; }
.evidence-list { grid-template-columns:repeat(5,1fr); }
.evidence-list li { min-height:170px; flex-direction:column; justify-content:space-between; }
.checklist-section { align-items:center; }
.checklist { counter-reset:check; display:grid; gap:10px; }
.checklist li { counter-increment:check; display:grid; grid-template-columns:35px 1fr; gap:14px; align-items:start; padding:16px 18px; border:1px solid var(--line); border-radius:13px; color:var(--ink-soft); }
.checklist li::before { content:"✓"; width:26px; height:26px; display:grid; place-items:center; border-radius:8px; background:rgba(var(--accent-rgb),.1); color:var(--accent); font-weight:800; }
.decision-grid { grid-template-columns:repeat(4,1fr); }
.decision-grid article.wide { grid-column:1 / -1; min-height:0; display:grid; grid-template-columns:.35fr 1fr; gap:40px; align-items:center; background:rgba(var(--accent-rgb),.07); }
.decision-grid article.wide strong { color:var(--accent); }
.notes-section { background:var(--canvas-2); }
.details-list,.note-list { max-width:980px; margin:36px auto 0; border-top:1px solid var(--line); }
.details-list details,.note-list > div { border-bottom:1px solid var(--line); }
.details-list summary { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; cursor:pointer; font-weight:650; list-style:none; }
.details-list summary::-webkit-details-marker { display:none; }
.details-list summary span { color:var(--accent); font-size:1.4rem; font-weight:300; }
.details-list details[open] summary span { transform:rotate(45deg); }
.details-list details p { max-width:780px; margin:0; padding:0 0 26px; color:var(--muted); }
.note-list { display:grid; grid-template-columns:repeat(3,1fr); }
.note-list > div { padding:22px; border-right:1px solid var(--line); }
.note-list dt { font-weight:700; }
.note-list dd { margin:12px 0 0; color:var(--muted); font-size:.86rem; }
.related-grid a { position:relative; min-height:160px; display:flex; flex-direction:column; padding:22px; border:1px solid var(--line); border-radius:17px; background:#fff; box-shadow:0 14px 38px rgba(27,39,66,.045); text-decoration:none; transition:transform .2s,border-color .2s,background .2s; }
.related-grid a:hover { transform:translateY(-4px); border-color:rgba(var(--accent-rgb),.4); background:rgba(var(--accent-rgb),.06); }
.related-grid strong { font-size:1.05rem; }
.related-grid span { margin-top:11px; color:var(--muted); font-size:.82rem; }
.related-grid i { margin-top:auto; align-self:flex-end; color:var(--accent); font-style:normal; }

/* Specialized sections */
.home-mock-widget-section,.public-mock-creator-section,.mcp-connect-section,.codes-reference-section { background:var(--canvas-2); }
.home-mock-widget,.public-mock-creator { padding:clamp(24px,4vw,46px); border:1px solid rgba(var(--accent-rgb),.22); border-radius:24px; background:linear-gradient(145deg,rgba(var(--accent-rgb),.1),rgba(255,255,255,.92)); box-shadow:var(--shadow); }
.home-mock-widget h2,.public-mock-creator h2 { font-size:clamp(2rem,3.6vw,3.5rem); }
.home-mock-form,.public-mock-form { padding:20px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.84); }
.home-mock-form label,.public-mock-form label { display:block; margin-bottom:9px; color:var(--muted); font-family:var(--mono); font-size:.65rem; text-transform:uppercase; }
.home-mock-form textarea,.public-mock-form textarea,.public-mock-form input { width:100%; min-height:112px; resize:vertical; padding:14px; border:1px solid var(--line); border-radius:11px; outline:0; background:#fff; color:var(--ink); }
.home-mock-form textarea:focus,.public-mock-form textarea:focus,.public-mock-form input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08); }
.home-mock-actions,.public-mock-actions { display:flex; align-items:center; gap:10px; margin-top:11px; }
.home-mock-actions button,.public-mock-actions button { min-height:42px; padding:8px 14px; border:0; border-radius:10px; background:var(--accent); color:var(--accent-ink); font-weight:750; cursor:pointer; }
.home-mock-actions a,.public-mock-actions a { color:var(--muted); font-size:.74rem; text-decoration:none; }
.home-mock-status,.public-mock-status { margin:12px 0 0; color:var(--muted); font-size:.72rem; }
.public-mock-examples { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.public-mock-examples button { padding:6px 9px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--muted); font-size:.68rem; cursor:pointer; }
.mcp-connect-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:48px; }
.mcp-connect-grid article { min-height:260px; padding:22px; border:1px solid var(--line); border-radius:17px; background:#fff; }
.mcp-connect-grid article > span { display:block; margin-bottom:40px; color:var(--accent); font-family:var(--mono); font-size:.63rem; }
.mcp-connect-grid pre { overflow:auto; padding:14px; border-radius:10px; background:#111725; color:#c4ccda; font-size:.66rem; }
.mcp-endpoint-card,.mcp-connect-note,.popular-codes { margin-top:14px; padding:24px; border:1px solid var(--line); border-radius:17px; background:#fff; }
.mcp-endpoint-card { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.mcp-connect-note { display:grid; grid-template-columns:.5fr 1fr; gap:30px; }
.code-class-grid { grid-template-columns:repeat(5,1fr); }
.code-class-card { min-height:240px; }
.code-class-head { display:flex; align-items:center; justify-content:space-between; }
.code-class-head b { color:var(--accent); font-family:var(--mono); font-size:1.3rem; }
.code-links { display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }
.code-links a { padding:5px 7px; border:1px solid var(--line); border-radius:7px; color:var(--ink-soft); font-family:var(--mono); font-size:.63rem; text-decoration:none; }

/* MCP engineering reference */
.mcp-doc-heading { max-width:900px; }
.mcp-doc-heading > p:last-child { max-width:720px; color:var(--muted); }
.mcp-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:38px; }
.mcp-facts div { min-height:118px; display:flex; flex-direction:column; justify-content:space-between; gap:18px; padding:20px; border:1px solid var(--line); border-radius:15px; background:#fff; }
.mcp-facts span,.mcp-auth-grid article > span { color:var(--accent-text); font-family:var(--mono); font-size:.62rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.mcp-facts code,.mcp-facts strong { color:var(--ink); font-size:.84rem; overflow-wrap:anywhere; }
.mcp-auth-docs,.mcp-tools-docs { background:var(--canvas-2); }
.mcp-auth-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:36px; }
.mcp-auth-grid article,.mcp-code-stack article,.mcp-schema,.mcp-production-check { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; }
.mcp-auth-grid article { padding:22px; }
.mcp-auth-grid h3 { margin:9px 0 18px; font-size:1.12rem; }
.mcp-auth-grid pre,.mcp-code-stack pre,.mcp-schema pre { margin:0; overflow:auto; border-radius:12px; background:#0b1220; color:#c9d5e7; }
.mcp-auth-grid pre { padding:18px; font-size:.7rem; line-height:1.65; }
.mcp-auth-note { margin-top:12px; padding:20px 22px; display:grid; grid-template-columns:220px 1fr; gap:28px; border:1px solid rgba(var(--accent-rgb),.28); border-radius:15px; background:rgba(var(--accent-rgb),.07); }
.mcp-auth-note p { margin:0; color:var(--ink-soft); }
.mcp-auth-note a { color:var(--accent-text); font-weight:750; }
.mcp-code-stack { display:grid; gap:12px; margin-top:36px; }
.mcp-code-stack article { display:grid; grid-template-columns:280px minmax(0,1fr); }
.mcp-code-stack article > div { padding:24px; }
.mcp-code-stack article > div span { width:28px; height:28px; display:grid; place-items:center; margin-bottom:38px; border-radius:8px; background:rgba(var(--accent-rgb),.13); color:var(--accent-text); font-family:var(--mono); font-size:.68rem; }
.mcp-code-stack article > p { grid-column:1 / -1; margin:0; padding:15px 22px; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; }
.mcp-code-stack pre { padding:22px; border-radius:0; font-size:.72rem; line-height:1.6; }
.mcp-tool-groups { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:36px; }
.mcp-tool-groups article { min-height:155px; padding:20px; border:1px solid var(--line); border-radius:15px; background:#fff; }
.mcp-tool-groups code { display:block; margin-top:24px; color:var(--ink-soft); font-size:.7rem; line-height:1.7; overflow-wrap:anywhere; }
.mcp-schema { margin-top:12px; }
.mcp-schema summary { padding:20px 22px; display:flex; justify-content:space-between; cursor:pointer; }
.mcp-schema summary span { color:var(--muted); }
.mcp-schema summary strong { color:var(--accent-text); font-family:var(--mono); }
.mcp-schema pre { padding:24px; border-radius:0; font-size:.72rem; line-height:1.6; }
.mcp-error-table { margin-top:36px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; }
.mcp-error-table > div { display:grid; grid-template-columns:minmax(240px,.85fr) 1fr 1fr; gap:22px; padding:18px 20px; border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:.78rem; }
.mcp-error-table > div:last-child { border-bottom:0; }
.mcp-error-table .mcp-error-head { background:#eef3f8; color:var(--muted); font-family:var(--mono); font-size:.62rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.mcp-error-table code { color:#b32e46; font-size:.7rem; overflow-wrap:anywhere; }
.mcp-production-check { margin-top:12px; padding:24px; }
.mcp-production-check ul { display:grid; grid-template-columns:1fr 1fr; gap:12px 40px; margin:22px 0 0; padding-left:20px; color:var(--ink-soft); }
.mcp-production-check li { padding-left:5px; }

/* Mock engineering reference */
.mock-lifecycle-docs,.mock-schema-docs,.mock-errors-docs { background:var(--canvas-2); }
.mock-match-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:36px; }
.mock-match-grid article { min-height:210px; padding:21px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.mock-match-grid article > span { display:block; margin-bottom:30px; color:var(--accent-text); font-family:var(--mono); font-size:.64rem; font-weight:800; letter-spacing:.1em; }
.mock-match-grid article > code { display:block; min-height:44px; color:var(--ink); font-size:.72rem; overflow-wrap:anywhere; }
.mock-match-grid article > p { margin:16px 0 0; color:var(--muted); font-size:.8rem; }
.mock-priority-note { display:grid; grid-template-columns:260px 1fr; gap:30px; margin-top:12px; padding:20px 22px; border:1px solid rgba(var(--accent-rgb),.28); border-radius:15px; background:rgba(var(--accent-rgb),.07); }
.mock-priority-note p { margin:0; color:var(--ink-soft); }
.mock-field-table { margin-top:36px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; }
.mock-field-table > div { display:grid; grid-template-columns:170px 260px 1fr; gap:22px; padding:16px 20px; border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:.79rem; }
.mock-field-table > div:last-child { border-bottom:0; }
.mock-field-table > div > code:first-child { color:var(--accent-text); font-weight:750; }
.mock-security-docs .mcp-auth-grid article > p { min-height:76px; color:var(--ink-soft); }
.mock-mcp-example { margin-top:36px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:end; }
.mock-mcp-example pre { margin:0; overflow:auto; padding:24px; border-radius:18px; background:#0b1220; color:#c9d5e7; font-size:.72rem; line-height:1.6; }

/* Page-specific engineering profiles */
.profile-reference,.profile-review { background:var(--canvas-2); }
.profile-interface { display:grid; grid-template-columns:1fr auto 1fr; gap:22px; align-items:center; margin-top:38px; }
.profile-interface article { min-height:150px; display:flex; flex-direction:column; justify-content:space-between; padding:24px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 14px 38px rgba(27,39,66,.045); }
.profile-interface article span { color:var(--accent-text); font-family:var(--mono); font-size:.64rem; font-weight:800; letter-spacing:.1em; }
.profile-interface article strong { max-width:520px; font-size:1.08rem; line-height:1.45; }
.profile-interface > i { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--accent); color:var(--accent-ink); font-style:normal; font-weight:900; }
.profile-example { display:grid; grid-template-columns:minmax(300px,.75fr) minmax(0,1.25fr); gap:clamp(36px,6vw,88px); align-items:center; }
.profile-example h2 { font-size:clamp(2.2rem,3.8vw,4rem); }
.profile-example pre { margin:0; overflow:auto; padding:28px; border:1px solid #202b3e; border-radius:20px; background:#0b1220; color:#c9d5e7; box-shadow:0 24px 50px rgba(11,18,32,.16); font-size:.76rem; line-height:1.75; }
.profile-checks { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:36px; }
.profile-checks article { min-height:210px; padding:22px; border:1px solid var(--line); border-radius:17px; background:#fff; }
.profile-checks article > span { display:block; margin-bottom:44px; color:var(--accent-text); font-family:var(--mono); font-size:.64rem; font-weight:800; }
.profile-checks p { margin:12px 0 0; color:var(--muted); font-size:.84rem; }
.profile-limits { display:grid; grid-template-columns:minmax(0,.8fr) minmax(420px,1.2fr); gap:clamp(34px,5vw,72px); align-items:start; }
.profile-limits h2 { font-size:clamp(2.2rem,3.8vw,4rem); }
.profile-limits ul { list-style:none; display:grid; gap:10px; margin:0; padding:0; }
.profile-limits li { padding:18px 20px 18px 52px; position:relative; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink-soft); }
.profile-limits li::before { content:"×"; position:absolute; left:18px; top:17px; width:22px; height:22px; display:grid; place-items:center; border-radius:7px; background:rgba(255,126,146,.13); color:#b32e46; font-weight:900; }
.popular-codes { display:flex; flex-wrap:wrap; gap:8px; }
.popular-codes a { padding:7px 10px; border-radius:8px; background:rgba(var(--accent-rgb),.08); color:var(--accent); font-family:var(--mono); font-size:.66rem; text-decoration:none; }
.directory-entries { margin-top:48px; border-top:1px solid var(--line); }
.directory-entries a { display:grid; grid-template-columns:46px .9fr 1fr auto; gap:20px; align-items:center; padding:23px 0; border-bottom:1px solid var(--line); text-decoration:none; }
.directory-entries > a > b { color:var(--accent); font-family:var(--mono); font-size:.66rem; }
.directory-entries span { display:contents; }
.directory-entries strong { font-size:1.05rem; }
.directory-entries small { color:var(--muted); }
.directory-entries i { color:var(--accent); font-style:normal; }
.manifesto { align-items:center; }
.manifesto blockquote { margin:0; color:var(--ink); font-size:clamp(2rem,4.6vw,4.4rem); font-weight:650; line-height:1.08; letter-spacing:-.055em; }
.manifesto > p { margin:0; color:var(--muted); }

/* Closing and footer */
.final-cta { width:min(calc(100% - 32px),1320px); display:grid; grid-template-columns:1fr auto; gap:70px; align-items:end; margin:0 auto 14px; padding:clamp(52px,7vw,92px); overflow:hidden; border:1px solid rgba(var(--accent-rgb),.28); border-radius:var(--radius-lg); background:radial-gradient(circle at 85% 15%,rgba(var(--accent-rgb),.2),transparent 26rem),linear-gradient(140deg,rgba(var(--accent-rgb),.11),#fff); box-shadow:var(--shadow); }
.final-cta h2 { max-width:780px; }
.final-cta p { max-width:670px; margin:20px 0 0; color:var(--ink-soft); }
.final-cta .actions { justify-content:flex-end; margin:0; }
.site-footer { --ink:#f7f9fc; --ink-soft:#c4ccda; --muted:#8994a8; --line:rgba(255,255,255,.1); display:grid; grid-template-columns:1.7fr repeat(3,1fr); gap:50px; padding:70px var(--edge) 78px; border-top:1px solid var(--line); background:#05070c; color:var(--ink); }
.footer-brand { color:#f7f9fc; }
.site-footer > div { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.footer-lead p { max-width:390px; margin:20px 0; color:var(--muted); }
.footer-signal { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-family:var(--mono); font-size:.6rem; }
.footer-signal i { width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 0 4px rgba(98,230,167,.1); }
.site-footer h2 { margin:4px 0 13px; color:var(--muted); font-family:var(--mono); font-size:.63rem; letter-spacing:.1em; text-transform:uppercase; }
.site-footer a:not(.brand) { color:var(--ink-soft); font-size:.8rem; text-decoration:none; }
.site-footer a:not(.brand):hover { color:var(--accent); }

/* Archetype variation */
.archetype-editorial .hero h1 { font-weight:620; }
.archetype-editorial .hero-split { grid-template-columns:minmax(0,1.18fr) minmax(380px,.82fr); }
.archetype-product .hero-visual { transform:translateY(24px); }
.archetype-guide .workflow-list { grid-template-columns:1fr; max-width:900px; margin-left:auto; }
.archetype-guide .workflow-list li { min-height:0; display:grid; grid-template-columns:70px 1fr; gap:20px; }
.archetype-guide .workflow-list h3 { margin-top:0; }

/* Homepage crawl and workflow architecture */
.home-architecture { background:var(--canvas-2); }
.home-architecture-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:40px; }
.home-architecture-groups > section { padding:25px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--canvas); box-shadow:0 14px 34px rgba(15,32,67,.05); }
.home-architecture-groups h3 { margin:0 0 8px; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.home-architecture-groups section > div { display:grid; }
.home-architecture-groups a { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 18px; align-items:center; padding:16px 0; border-top:1px solid var(--line); color:var(--ink); text-decoration:none; }
.home-architecture-groups strong { font-size:1rem; line-height:1.3; }
.home-architecture-groups span { grid-column:1; color:var(--muted); font-size:.84rem; line-height:1.55; }
.home-architecture-groups i { grid-column:2; grid-row:1 / span 2; font-style:normal; color:var(--accent); transition:transform .18s ease; }
.home-architecture-groups a:hover strong,.home-architecture-groups a:focus-visible strong { color:var(--accent); }
.home-architecture-groups a:hover i,.home-architecture-groups a:focus-visible i { transform:translate(3px,-3px); }

/* Consent is shared with the React app through the cookie_consent preference. */
.cookie-consent[hidden] { display:none; }
.cookie-consent { position:fixed; z-index:100; right:20px; bottom:20px; left:20px; width:min(calc(100% - 40px),900px); display:flex; align-items:center; justify-content:space-between; gap:24px; margin:auto; padding:18px 20px; border:1px solid var(--line-strong); border-radius:16px; background:rgba(255,255,255,.96); box-shadow:0 20px 60px rgba(15,32,67,.2); backdrop-filter:blur(18px); }
.cookie-consent p { max-width:560px; margin:0; color:var(--ink-soft); font-size:.86rem; }
.cookie-consent p a,.cookie-consent > div > a { color:var(--accent-text); font-weight:700; }
.cookie-consent > div { flex:0 0 auto; display:flex; align-items:center; gap:9px; }
.cookie-consent button { min-height:40px; padding:8px 13px; border:1px solid var(--accent); border-radius:10px; background:var(--accent); color:var(--accent-ink); font-size:.76rem; font-weight:780; cursor:pointer; }
.cookie-consent button.secondary { border-color:var(--line-strong); background:#fff; color:var(--ink); }
.cookie-consent > div > a { padding:8px 5px; font-size:.74rem; }

@media (max-width:1050px) {
  .site-header { grid-template-columns:1fr auto; }
  .site-header nav { grid-column:1 / -1; grid-row:2; width:100%; overflow:auto; padding:5px 0 10px; border-top:1px solid var(--line); }
  .hero-split,.hero-home,.hero-directory,.hero-company,.hero-contact,.hero-guide { grid-template-columns:1fr; }
  .hero { min-height:0; }
  .hero-guide .hero-visual { grid-column:auto; }
  .hero-visual { width:min(100%,720px); }
  .outcome-section,.principle-section,.checklist-section,.manifesto,.depth-kicker,.public-mock-creator,.home-mock-widget { grid-template-columns:1fr; }
  .usecase-grid,.decision-grid,.related-grid { grid-template-columns:repeat(2,1fr); }
  .evidence-list { grid-template-columns:repeat(3,1fr); }
  .code-class-grid { grid-template-columns:repeat(2,1fr); }
  .depth-grid { grid-template-columns:1fr; }
  .mcp-connect-grid { grid-template-columns:1fr; }
  .home-architecture-groups { grid-template-columns:1fr; }
  .decision-grid article.wide { grid-column:span 2; }
  .final-cta { grid-template-columns:1fr; }
  .final-cta .actions { justify-content:flex-start; }
  .site-footer { grid-template-columns:1.5fr repeat(2,1fr); }
  .site-footer > div:last-child { grid-column:2 / -1; }
}

@media (max-width:720px) {
  :root { --edge:20px; --radius-lg:22px; }
  body { font-size:15px; }
  body::before { background-size:38px 38px; }
  h1 { font-size:clamp(3rem,14vw,4.6rem); line-height:.96; }
  h2 { font-size:clamp(2.15rem,10.5vw,3.25rem); }
  .site-header { width:calc(100% - 20px); margin-top:10px; gap:12px; padding:10px 10px 0 12px; }
  .brand-name { font-size:.7rem; }
  .header-cta { min-height:39px; padding:6px 7px 6px 10px; }
  .header-cta span:first-child { font-size:0; }
  .header-cta span:first-child::after { content:"Open app"; font-size:.72rem; }
  .site-header nav { gap:2px; }
  .site-header nav a { flex:0 0 auto; padding:8px 10px; font-size:.7rem; }
  .hero { width:calc(100% - 20px); margin-top:10px; }
  .hero-split,.hero-home,.hero-directory,.hero-company,.hero-contact,.hero-guide { gap:42px; padding:58px 22px 74px; }
  .hero-home { padding-bottom:112px; }
  .hero-typing { align-items:flex-start; flex-direction:column; }
  .hero-typing-text { white-space:normal; }
  .hero-index { grid-template-columns:repeat(2,1fr); }
  .hero-index span { padding:12px 7px; border-bottom:1px solid var(--line); font-size:.55rem; }
  .artifact-frame { transform:none; }
  .artifact-body { min-height:270px; padding:20px 16px; }
  .system-output { grid-template-columns:repeat(2,1fr); }
  .mcp-chain,.exchange,.analysis-split { grid-template-columns:1fr; }
  .mcp-chain > i,.exchange > i { transform:rotate(90deg); text-align:center; }
  .pipeline,.intercept-path,.debug-path { grid-template-columns:1fr; }
  .pipeline i,.intercept-path i,.debug-path i { transform:rotate(90deg); }
  .ledger,.message-fields,.workspace-map,.recipe { grid-template-columns:1fr; }
  .section { padding:56px var(--edge); }
  .depth-copy,.workflow-list,.usecase-grid,.code-class-grid,.evidence-list,.decision-grid,.related-grid { grid-template-columns:1fr; }
  .workflow-list li { min-height:220px; }
  .evidence-list li { min-height:130px; }
  .decision-grid article.wide { grid-column:auto; grid-template-columns:1fr; gap:12px; }
  .note-list { grid-template-columns:1fr; }
  .note-list > div { border-right:0; }
  .home-mock-widget,.public-mock-creator { padding:21px; }
  .home-mock-actions,.public-mock-actions { align-items:stretch; flex-direction:column; }
  .mcp-endpoint-card,.mcp-connect-note { grid-template-columns:1fr; }
  .mcp-facts,.mcp-tool-groups { grid-template-columns:repeat(2,1fr); }
  .mock-match-grid { grid-template-columns:repeat(2,1fr); }
  .profile-example,.profile-limits { grid-template-columns:1fr; }
  .mock-field-table > div { grid-template-columns:130px 200px 1fr; }
  .mcp-code-stack article { grid-template-columns:220px minmax(0,1fr); }
  .mcp-error-table > div { grid-template-columns:1fr; gap:7px; }
  .directory-entries a { grid-template-columns:34px 1fr auto; gap:10px; }
  .directory-entries span { display:block; }
  .directory-entries small { display:block; margin-top:5px; }
  .final-cta { width:calc(100% - 20px); padding:54px 22px; }
  .final-cta .actions { display:grid; }
  .site-footer { grid-template-columns:1fr 1fr; gap:42px 22px; padding:58px var(--edge); }
  .footer-lead { grid-column:1 / -1; }
  .site-footer > div:last-child { grid-column:auto; }
  .archetype-guide .workflow-list li { grid-template-columns:1fr; }
  .cookie-consent { align-items:stretch; flex-direction:column; gap:14px; }
  .cookie-consent > div { flex-wrap:wrap; }
}

@media (max-width:600px) {
  .mcp-facts,.mcp-auth-grid,.mcp-tool-groups,.mcp-production-check ul { grid-template-columns:1fr; }
  .mcp-auth-note,.mcp-code-stack article { grid-template-columns:1fr; }
  .mock-match-grid,.mock-production-check ul { grid-template-columns:1fr; }
  .mock-priority-note,.mock-mcp-example { grid-template-columns:1fr; }
  .mock-field-table > div { grid-template-columns:1fr; gap:6px; }
  .profile-interface,.profile-checks { grid-template-columns:1fr; }
  .profile-interface > i { transform:rotate(90deg); justify-self:center; }
  .mcp-code-stack article > div span { margin-bottom:18px; }
  .mcp-auth-grid pre,.mcp-code-stack pre,.mcp-schema pre { font-size:.64rem; }
}

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