/* ESF Companion — site-specific styles, layered on Coordia tokens.css */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-default);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ── Layout primitives ──────────────────────────────────────── */
.container {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 24px;
}
.section {
  padding: 96px 0;
  border-top: 1px solid var(--line);
}
.section--sunk { background: color-mix(in oklch, var(--bg-muted), transparent 70%); }
.section--ink { background: var(--ink); color: var(--brand-ink); border-top-color: var(--ink); }
.section--ink p { color: color-mix(in oklch, white, transparent 30%); }

/* ── Eyebrow / mono labels ─────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono-display);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-4);
}
.eyebrow .dot {
  width: 5px; height: 5px; border-radius: 999px;
  background: var(--agent);
}

/* ── Headings ───────────────────────────────────────────────── */
.h-display {
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.h-display em {
  font-style: normal;
  color: var(--agent);
}
.h-section {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.h-card {
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 640px;
  text-wrap: pretty;
}
.section--ink .lede { color: color-mix(in oklch, white, transparent 25%); }

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklch, var(--bg), transparent 8%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner {
  max-width: 1152px; margin: 0 auto;
  padding: 12px 24px;
  display: flex; align-items: center; gap: 24px;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
}
.brand__mark {
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--ink); color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; letter-spacing: -0.04em;
}
.brand__word {
  font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
  color: var(--ink);
}
.brand__sub {
  font-family: var(--font-mono-display); font-size: 10px;
  color: var(--ink-4); padding-left: 2px;
}
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a {
  padding: 6px 10px; font-size: 13px; color: var(--ink-3);
  border-radius: 6px;
  transition: background 120ms, color 120ms;
}
.nav a:hover { color: var(--ink); background: var(--bg-muted); }
.nav__divider { width: 1px; height: 16px; background: var(--line); margin: 0 6px; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; height: 32px; padding: 0 14px;
  border-radius: 10px; border: 1px solid var(--ink);
  background: var(--ink); color: white;
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: transform 80ms, background 120ms;
}
.btn:hover { background: var(--brand-hi); color: white; }
.btn:visited { color: white; }
.btn:active { transform: translateY(1px); }
.btn--outline { background: var(--bg); color: var(--ink); border-color: var(--line); }
.btn--outline:hover { background: var(--bg-muted); border-color: var(--line-strong); color: var(--ink); }
.btn--outline:visited { color: var(--ink); }
.btn--agent { background: var(--agent); color: white; border-color: var(--agent); box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px -4px color-mix(in oklch, var(--agent), transparent 60%); }
.btn--agent:hover { background: color-mix(in oklch, var(--agent), black 8%); color: white; }
.btn--lg { height: 40px; padding: 0 18px; font-size: 14px; border-radius: 10px; }
.btn--on-dark { background: white !important; color: oklch(0.21 0.005 270) !important; border-color: white !important; }
.btn--on-dark:hover { background: color-mix(in oklch, white, black 8%) !important; color: oklch(0.21 0.005 270) !important; }
.btn--on-dark-outline { background: transparent !important; color: white !important; border-color: color-mix(in oklch, white, transparent 70%) !important; }
.btn--on-dark-outline:hover { background: color-mix(in oklch, white, transparent 88%) !important; color: white !important; border-color: white !important; }
.btn--ghost { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn--ghost:hover { background: var(--bg-muted); color: var(--ink); }

.kbd {
  display: inline-flex; align-items: center; padding: 1px 5px;
  font-family: var(--font-mono-display); font-size: 10.5px;
  border: 1px solid var(--line); border-radius: 4px;
  color: var(--ink-4); background: var(--bg);
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
}
.card--sunk { background: var(--bg-sunk); }
.card--lift {
  transition: transform 200ms, box-shadow 200ms;
}
.card--lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

/* ── Pill / status chip ─────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 500;
  background: var(--bg); border: 1px solid var(--line);
  color: var(--ink-2);
}
.pill--agent { background: var(--agent-wash); border-color: var(--agent-line); color: var(--agent); }
.pill--ok { background: var(--ok-wash); border-color: var(--ok-line); color: var(--ok); }
.pill--warn { background: var(--warn-wash); border-color: var(--warn-line); color: var(--warn-ink); }
.pill--danger { background: var(--danger-wash); border-color: var(--danger-line); color: var(--danger); }
.pill .dot { width: 5px; height: 5px; border-radius: 999px; background: currentColor; }

/* ── Mono code ─────────────────────────────────────────────── */
.code {
  font-family: var(--font-mono-display);
  font-size: 12.5px;
  background: var(--ink);
  color: color-mix(in oklch, white, transparent 8%);
  border-radius: 10px;
  padding: 14px 16px;
  border: 1px solid var(--ink);
  overflow-x: auto;
  white-space: pre;
  line-height: 1.55;
}
.code .c { color: color-mix(in oklch, var(--ink-4), white 30%); }
.code .k { color: color-mix(in oklch, var(--agent), white 35%); }
.code .s { color: color-mix(in oklch, var(--ok), white 25%); }

/* ── Phase ladder (5-phase process) ─────────────────────────── */
.phases {
  display: grid; gap: 14px;
}
.phase {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: stretch;
  gap: 18px;
  padding: 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  position: relative;
}
.phase__num {
  font-family: var(--font-mono-display);
  font-size: 28px; font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink-4);
  line-height: 1;
}
.phase__title {
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink);
}
.phase__mode {
  margin-left: 8px;
  font-family: var(--font-mono-display);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
}
.phase__mode--ai { color: var(--agent); }
.phase__body {
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 56ch;
}

/* ── Install paths comparison ───────────────────────────────── */
.paths {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 920px) { .paths { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .paths { grid-template-columns: 1fr; } }
.path {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
}
.path--featured { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ink), transparent 92%); }
.path__num {
  font-family: var(--font-mono-display);
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 500;
}
.path__title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.path__sub { font-size: 13px; color: var(--ink-3); line-height: 1.5; flex: 1; }
.path__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.path__list li { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.path__list li::before {
  content: ''; width: 4px; height: 4px; border-radius: 999px;
  background: var(--ink-4);
}

/* ── Use case grid ──────────────────────────────────────────── */
.use-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 880px) { .use-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .use-grid { grid-template-columns: 1fr; } }
.use {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
}
.use__icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--bg-sunk); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.use__title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.use__copy { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.use__pos { display: block; margin-top: 12px; padding: 10px 12px; background: var(--bg-sunk); border: 1px dashed var(--line); border-radius: 8px; font-size: 12px; color: var(--ink-2); font-style: italic; line-height: 1.45; }

/* ── Hero specifics ─────────────────────────────────────────── */
.hero { padding: 96px 0 80px; position: relative; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
@media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; gap: 40px; } }
.hero__cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.hero__bullets {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 20px;
  font-size: 12.5px; color: var(--ink-3);
}
.hero__bullets span { display: inline-flex; align-items: center; gap: 6px; }
.hero__bullets span::before { content: ''; width: 4px; height: 4px; border-radius: 999px; background: var(--ink-4); }

/* Hero "before/after AI" diagram */
.before-after {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  display: grid; gap: 12px;
  box-shadow: var(--sh-md);
}
.ba-row {
  display: grid; grid-template-columns: 80px 1fr; gap: 14px; align-items: center;
}
.ba-label {
  font-family: var(--font-mono-display);
  font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 500;
}
.ba-cell {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
  background: var(--bg-sunk);
}
.ba-cell strong { color: var(--ink); font-weight: 600; }
.ba-cell--ok { border-color: var(--ok-line); background: var(--ok-wash); color: var(--ok); }
.ba-cell--ok strong { color: color-mix(in oklch, var(--ok), black 25%); }
.ba-cell--danger { border-color: var(--danger-line); background: var(--danger-wash); color: var(--danger); }
.ba-cell--danger strong { color: color-mix(in oklch, var(--danger), black 20%); }
.ba-divider {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono-display); font-size: 10.5px;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-4);
}
.ba-divider::before, .ba-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ── Demo shell (chat) ──────────────────────────────────────── */
.demo {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.demo__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--bg-sunk);
  border-bottom: 1px solid var(--line);
}
.demo__title {
  font-size: 12px; font-weight: 500; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 8px;
}
.demo__title .mark {
  width: 18px; height: 18px; border-radius: 5px;
  background: var(--ink); color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.demo__bar .pill { margin-left: auto; }
.demo__body { padding: 22px; min-height: 420px; }

/* Chat */
.chat { display: flex; flex-direction: column; gap: 14px; }
.msg {
  display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: flex-start;
}
.msg__avatar {
  width: 28px; height: 28px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700;
  background: var(--bg-sunk); border: 1px solid var(--line);
  color: var(--ink-3);
}
.msg--ai .msg__avatar { background: color-mix(in oklch, var(--agent), white 82%); border-color: color-mix(in oklch, var(--agent), transparent 60%); color: var(--agent); }
.msg--you .msg__avatar { background: var(--ink); color: white; border-color: var(--ink); }
.msg__bubble {
  font-size: 13.5px; color: var(--ink-2); line-height: 1.55;
  padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg);
}
.msg--ai .msg__bubble { background: var(--bg-sunk); }
.msg--you .msg__bubble { background: var(--bg); }
.msg--drift .msg__bubble {
  background: var(--agent-wash);
  border-color: var(--agent-line);
  color: color-mix(in oklch, var(--agent), black 18%);
}
.msg__bubble strong { color: var(--ink); font-weight: 600; }
.msg__bubble em { color: var(--ink); font-style: normal; background: color-mix(in oklch, var(--agent), white 90%); padding: 1px 4px; border-radius: 3px; }
.msg__meta { font-family: var(--font-mono-display); font-size: 10.5px; color: var(--ink-4); margin-top: 4px; letter-spacing: 0.03em; }

/* Drift card inside chat */
.drift-card {
  margin-top: 8px;
  border: 1px solid var(--agent-line);
  background: var(--agent-wash);
  border-radius: 10px;
  padding: 14px 16px;
}
.drift-card__head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono-display);
  font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--agent);
  margin-bottom: 8px;
  font-weight: 500;
}
.drift-card__quote {
  font-size: 13px; color: color-mix(in oklch, var(--agent), black 18%);
  padding-left: 10px; border-left: 2px solid var(--agent-line);
  font-style: italic; margin-bottom: 10px;
}
.drift-card__opts { display: grid; gap: 6px; }
.drift-opt {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 9px 12px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 12.5px; color: var(--ink); cursor: pointer;
  text-align: left;
}
.drift-opt:hover { border-color: var(--ink-4); background: var(--bg); }
.drift-opt--selected { border-color: var(--ink); background: var(--bg); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ink), transparent 92%); }
.drift-opt__key {
  font-family: var(--font-mono-display); font-size: 10px;
  padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px;
  color: var(--ink-4);
}

/* ── Position Statement Builder ─────────────────────────────── */
.pb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 880px) { .pb-grid { grid-template-columns: 1fr; } }
.pb-step {
  display: flex; flex-direction: column; gap: 8px;
}
.pb-step__head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono-display);
  font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-4);
}
.pb-step__head .num {
  width: 18px; height: 18px; border-radius: 5px;
  background: var(--bg-sunk); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-weight: 600;
}
.pb-step__head .num--done { background: var(--ink); color: white; border-color: var(--ink); }
.pb-step__q { font-size: 14px; font-weight: 500; color: var(--ink); margin: 2px 0 0; }
.pb-input {
  width: 100%; min-height: 64px; resize: vertical;
  padding: 10px 12px; font: inherit; font-size: 13.5px;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px;
  line-height: 1.5;
  transition: border-color 120ms, box-shadow 120ms;
}
.pb-input:focus { outline: none; border-color: var(--ink-3); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ink), transparent 92%); }
.pb-hint { font-size: 11.5px; color: var(--ink-4); }

/* Step 4: Refine with Companion */
.pb-refine {
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  padding: 14px;
  background: color-mix(in oklch, var(--agent-wash, var(--bg-muted)), transparent 40%);
}
.pb-refine--active { border-style: solid; border-color: var(--agent, var(--ink-3)); }
.pb-refine--done { border-style: solid; border-color: color-mix(in oklch, var(--ok, #2a8a4a), transparent 40%); background: color-mix(in oklch, var(--ok, #2a8a4a), transparent 92%); }

.pb-refine__thinking {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink-2);
  padding: 8px 0;
}
.pb-refine__pulse {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--agent, var(--ink));
  animation: pb-pulse 1.1s ease-in-out infinite;
}
@keyframes pb-pulse {
  0%, 100% { transform: scale(0.7); opacity: 0.45; }
  50%      { transform: scale(1.0); opacity: 1; }
}

.pb-diff { display: grid; gap: 10px; }
.pb-diff__row {
  display: grid;
  grid-template-columns: 110px 1fr 1fr;
  gap: 10px;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
}
@media (max-width: 880px) { .pb-diff__row { grid-template-columns: 1fr; } }
.pb-diff__label {
  font-family: var(--font-mono-display);
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-4); padding-top: 2px;
}
.pb-diff__before { color: var(--ink-3); text-decoration: line-through; text-decoration-color: color-mix(in oklch, var(--ink-4), transparent 50%); }
.pb-diff__after { color: var(--ink); font-weight: 500; }
.pb-diff__after--same { color: var(--ink-3); font-weight: 400; text-decoration: none; }

/* Result panel */
.pb-result {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  font-size: 13px; line-height: 1.55;
  color: var(--ink-2);
  height: 100%;
}
.pb-result__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.pb-result__title { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.pb-result__field { display: grid; gap: 4px; }
.pb-result__label {
  font-family: var(--font-mono-display);
  font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 500;
}
.pb-result__value { color: var(--ink); font-weight: 500; }
.pb-result__value--empty { color: var(--ink-4); font-style: italic; font-weight: 400; }

/* ── Record of Resistance ───────────────────────────────────── */
.ror-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 880px) { .ror-grid { grid-template-columns: 1fr; } }

.ror-suggestion {
  position: relative;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 18px; background: var(--bg);
}
.ror-suggestion__head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--ink-3); margin-bottom: 8px;
}
.ror-suggestion__body { font-size: 13.5px; color: var(--ink); line-height: 1.55; }
.ror-suggestion__actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.ror-log {
  background: var(--ink); color: var(--brand-ink);
  border-radius: 12px; padding: 18px;
  font-family: var(--font-mono-display);
  font-size: 12.5px; line-height: 1.6;
}
.ror-log .key { color: color-mix(in oklch, var(--agent), white 35%); }
.ror-log .str { color: color-mix(in oklch, var(--ok), white 25%); }
.ror-log .c { color: color-mix(in oklch, var(--ink-4), white 20%); }
.ror-log__head {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600; color: white;
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid color-mix(in oklch, white, transparent 88%);
}
.ror-log__count {
  margin-left: auto;
  font-family: var(--font-mono-display); font-size: 11px;
  color: color-mix(in oklch, white, transparent 40%);
}

/* ── Ladder pre/post AI status row ──────────────────────────── */
.flow {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
@media (max-width: 880px) { .flow { grid-template-columns: repeat(2, 1fr); } }
.flow__step {
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.flow__step--ai { background: var(--agent-wash); border-color: var(--agent-line); }
.flow__step--ai .flow__title { color: color-mix(in oklch, var(--agent), black 18%); }
.flow__num {
  font-family: var(--font-mono-display);
  font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-4);
}
.flow__title { font-size: 13px; font-weight: 600; color: var(--ink); }
.flow__mode { font-family: var(--font-mono-display); font-size: 10px; color: var(--ink-4); letter-spacing: 0.05em; }

/* ── Footer ─────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--line);
  padding: 32px 0 48px;
  font-size: 12.5px; color: var(--ink-3);
}
.footer__inner {
  max-width: 1152px; margin: 0 auto; padding: 0 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}
.footer__inner .links { display: flex; gap: 14px; margin-left: auto; }
.footer__inner a:hover { color: var(--ink); }

/* ── Utility ─────────────────────────────────────────────────── */
.stack { display: grid; gap: 16px; }
.stack--lg { gap: 28px; }
.stack--xl { gap: 40px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.divider { height: 1px; background: var(--line); width: 100%; margin: 8px 0; }
.muted { color: var(--ink-3); }
.mono { font-family: var(--font-mono-display); }

/* ── Dark mode ──────────────────────────────────────────────── */
body.dark {
  --bg:        oklch(0.16 0.005 270);
  --bg-sunk:   oklch(0.135 0.005 270);
  --bg-elev:   oklch(0.20 0.006 270);
  --bg-muted:  oklch(0.205 0.006 270);
  --line:      oklch(0.27 0.006 270);
  --line-soft: oklch(0.22 0.005 270);
  --line-strong: oklch(0.34 0.007 270);
  --ink:   oklch(0.97 0.003 270);
  --ink-2: oklch(0.85 0.005 270);
  --ink-3: oklch(0.68 0.005 270);
  --ink-4: oklch(0.52 0.005 270);
  --ink-5: oklch(0.38 0.005 270);
  --brand: oklch(0.97 0.003 270);
  --brand-hi: oklch(0.88 0.005 270);
  --brand-ink: oklch(0.16 0.005 270);
  --brand-wash: oklch(0.20 0.006 270);
  --agent-wash: oklch(0.24 0.04 262);
  --agent-line: oklch(0.36 0.07 262);
  --ok-wash: oklch(0.24 0.03 150);
  --ok-line: oklch(0.34 0.06 150);
  --warn-wash: oklch(0.26 0.04 65);
  --warn-line: oklch(0.36 0.08 65);
  --danger-wash: oklch(0.26 0.04 27);
  --danger-line: oklch(0.36 0.08 27);
}
body.dark .btn { background: white; color: var(--brand-ink); border-color: white; }
body.dark .btn:hover { background: color-mix(in oklch, white, black 6%); }
body.dark .btn--outline { background: var(--bg); color: var(--ink); border-color: var(--line); }
body.dark .btn--outline:hover { background: var(--bg-elev); }
body.dark .btn--agent { background: var(--agent); color: white; border-color: var(--agent); }
body.dark .topbar { background: color-mix(in oklch, var(--bg), transparent 12%); }
body.dark .code, body.dark .ror-log { background: oklch(0.10 0.005 270); color: color-mix(in oklch, white, transparent 8%); border-color: var(--line); }
body.dark .brand__mark { background: white; color: var(--brand-ink); }
body.dark .path--featured { box-shadow: 0 0 0 3px color-mix(in oklch, white, transparent 88%); border-color: white; }
body.dark .section--ink { background: oklch(0.11 0.005 270); border-top-color: var(--line); }
body.dark .pb-step__head .num--done { background: white; color: var(--brand-ink); border-color: white; }

/* ── Worked example ─────────────────────────────────────────── */
.we-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1000px) { .we-grid { grid-template-columns: 1fr; } }
.we-card {
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.we-card__head {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.we-card__step {
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--agent-wash); color: var(--agent);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono-display); font-size: 11px; font-weight: 700;
  border: 1px solid var(--agent-line);
}
.we-card__file { margin-left: auto; font-size: 11px; color: var(--ink-3); }
.we-field { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: start; padding: 6px 0; }
.we-field__label {
  font-family: var(--font-mono-display); text-transform: uppercase;
  font-size: 10px; letter-spacing: 0.06em; color: var(--ink-4);
  padding-top: 3px;
}
.we-field span:nth-child(2) { font-size: 13.5px; color: var(--ink); line-height: 1.55; }
.we-rorbox {
  background: oklch(0.18 0.005 270); color: white; border-radius: 10px;
  padding: 14px 16px; font-family: var(--font-mono-display); font-size: 12px;
  line-height: 1.7; flex: 1;
}
.we-rorbox .key { color: oklch(0.78 0.10 262); }
.we-rorbox .str { color: oklch(0.85 0.12 130); }
.we-discl {
  background: var(--bg-muted); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 16px;
  font-family: var(--font-mono-display); font-size: 12px;
  line-height: 1.7; color: var(--ink); white-space: pre-wrap; flex: 1;
}

/* ── Effort strip ───────────────────────────────────────────── */
.effort {
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 1000px) { .effort { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .effort { grid-template-columns: 1fr; } }
.effort__cell {
  padding: 22px 20px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.effort__cell:last-child { border-right: none; }
.effort__time {
  font-size: 22px; font-weight: 700; color: var(--agent); letter-spacing: -0.02em;
}
.effort__label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.effort__sub { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }

/* ── When not ───────────────────────────────────────────────── */
.wn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 800px) { .wn-grid { grid-template-columns: 1fr; } }
.wn-cell {
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 8px;
}
.wn-cell__title { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.wn-cell__body { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.wn-rule {
  background: color-mix(in oklch, var(--agent), white 92%);
  border: 1px solid var(--agent-line); border-radius: 12px;
  padding: 14px 18px; font-size: 14px; color: var(--ink); line-height: 1.6;
}
.wn-rule strong { color: var(--agent); }

/* ── Compare table ──────────────────────────────────────────── */
.cmp {
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden;
}
.cmp table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cmp th, .cmp td {
  padding: 14px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: none; }
.cmp thead th { background: var(--bg-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-4); padding-top: 12px; padding-bottom: 12px; font-weight: 600; }
.cmp__col--us { color: var(--agent) !important; }
.cmp__row { font-weight: 600; color: var(--ink); width: 22%; }
.cmp__cell { color: var(--ink-2); width: 19.5%; }
.cmp__cell--us { background: color-mix(in oklch, var(--agent), white 95%); color: var(--ink); font-weight: 500; }

/* ── Author ─────────────────────────────────────────────────── */
.author {
  background: var(--bg); border: 1px solid var(--line); border-radius: 18px;
  padding: 36px 38px; display: grid; grid-template-columns: 96px 1fr; gap: 28px;
  align-items: start;
}
@media (max-width: 700px) { .author { grid-template-columns: 1fr; padding: 28px; } }
.author__avatar {
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(135deg, var(--agent), oklch(0.65 0.16 220));
  color: white; display: inline-flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700; letter-spacing: -0.02em;
  box-shadow: 0 4px 18px -8px color-mix(in oklch, var(--agent), transparent 30%);
}
.author__cred { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.author__pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px; border-radius: 999px;
  background: var(--bg-muted); border: 1px solid var(--line);
  font-size: 12px; color: var(--ink-2); font-weight: 500;
}
.author__pill--link { color: var(--agent); border-color: var(--agent-line); background: var(--agent-wash); }
.author__pill--link:hover { background: color-mix(in oklch, var(--agent), white 86%); }

/* ── Roadmap teaser ─────────────────────────────────────────── */
.rm {
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden;
}
.rm__row {
  display: grid; grid-template-columns: 130px 1fr auto;
  gap: 18px; align-items: center;
  padding: 16px 22px; border-bottom: 1px solid var(--line);
}
.rm__row:last-child { border-bottom: none; }
.rm__tag {
  font-family: var(--font-mono-display); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 4px 8px; border-radius: 6px;
  background: var(--ok-wash); color: var(--ok); border: 1px solid var(--ok-line);
  display: inline-flex; align-items: center; justify-content: center; width: fit-content;
}
.rm__row--in .rm__tag { background: var(--agent-wash); color: var(--agent); border-color: var(--agent-line); }
.rm__row--planned .rm__tag { background: var(--bg-muted); color: var(--ink-3); border-color: var(--line); }
.rm__title { font-size: 14.5px; color: var(--ink); font-weight: 500; }
.rm__meta { font-size: 11.5px; color: var(--ink-4); }
@media (max-width: 700px) {
  .rm__row { grid-template-columns: 1fr; gap: 6px; padding: 14px 18px; }
}

/* Dark-mode patches for new sections */
body.dark .we-rorbox { background: oklch(0.08 0.005 270); }
body.dark .cmp__cell--us { background: color-mix(in oklch, var(--agent), black 60%); color: white; }
body.dark .wn-rule { background: color-mix(in oklch, var(--agent), black 78%); color: var(--ink); }
body.dark .rm__row--planned .rm__tag { background: var(--bg-elev); }