/* Kaddiya marketing site — pure white ground, drawn imagery, dark product
   surfaces reusing the product palette verbatim. Source of truth for the
   redesign: design/process/Hero.dc.html and design/process/Vocabulary.dc.html.

   Two rules this file exists to keep:

   1. Colour is state, never decoration. Each signal has a light-ground and a
      dark-surface value, because the same green cannot carry a headline on
      white and a commit button on #121924. Nothing else is coloured.
   2. There are no boxes. The beige ground used to separate white cards by
      fill; on pure white that job goes to whitespace, with a short rule above
      an item where a group needs a visible start. Borders survive only where a
      surface genuinely has an edge — the dark product cards and the nav pill. */

:root {
  --ground: #ffffff;
  --ink: #1c2128;
  --body: #4a505a;
  --muted: #8a8f97;

  --rule: #efefef;      /* section + item rules */
  --hairline: #e6e6e6;  /* the few real edges on the light ground */

  /* signal · light ground */
  --green: #136c43;         /* happened */
  --green-hover: #0e5433;
  --amber: #b07a1e;         /* pending */

  /* grounds · the two full-bleed bands on /site/compare. Not signals: a band
     marks what kind of section it is, and nothing else may take a tint to
     look nice. See the .band block at the foot of this file. */
  --warm: #fbf1e8;          /* the section that argues for the other product */
  --warm-rule: #f0e1d2;     /* the item rule, on that ground */

  /* signal · dark surface (the product palette, unchanged) */
  --green-dark: #4cc38a;
  --amber-dark: #d9a13b;

  --grotesque: 'Schibsted Grotesk', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The hero cycle, in one place because two things run on it: the word in the
     headline and the card under it. A beat is --nc-step; three beats make
     --nc-cycle. Changing the step means changing the cycle to match — they are
     written out rather than calculated so a reader can see both numbers. */
  --nc-step: 4s;
  --nc-cycle: 12s;
}

* { box-sizing: border-box; margin: 0; }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--grotesque);
  min-height: 100vh;
}
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-hover); }
::selection { background: rgba(19, 108, 67, 0.15); }

/* Motion is three things: pending pulse 2.4s, running pulse 1.4s, and the hero
   cycle at --nc-cycle (12s, three 4s beats) — which is one mechanism driving
   two elements, the word in the headline and the card that names it, off the
   same keyframe percentages. Nothing else on this page moves. */
@keyframes ncpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes kdcycle {
  0%   { opacity: 0; transform: translateY(12px); }
  4%   { opacity: 1; transform: none; }
  29%  { opacity: 1; transform: none; }
  33%  { opacity: 0; transform: translateY(-12px); }
  100% { opacity: 0; transform: translateY(-12px); }
}

/* type primitives */
.mono { font-family: var(--mono); }
.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}
.wrap { max-width: 1120px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.section-head { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; text-wrap: balance; }

/* A short rule above an item, in place of a border around it. */
.ruled { border-top: 1px solid var(--rule); padding-top: 20px; }

.mark { position: relative; display: inline-block; flex-shrink: 0; }
.mark-nav { width: 16px; height: 16px; }
.mark-nav::before { content: ''; position: absolute; left: 0; top: 0; width: 10px; height: 10px; border: 1.5px solid #6b6f76; border-radius: 3px; }
.mark-nav::after { content: ''; position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; background: var(--ink); border-radius: 3px; }
.mark-foot { width: 13px; height: 13px; }
.mark-foot::before { content: ''; position: absolute; left: 0; top: 0; width: 8px; height: 8px; border: 1.5px solid var(--muted); border-radius: 2px; }
.mark-foot::after { content: ''; position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; background: #4a505a; border-radius: 2px; }

/* buttons — the vocabulary in design/process/Vocabulary.dc.html */
.btn-green {
  display: inline-flex; align-items: center;
  font-size: 15px; font-weight: 600;
  color: #ffffff; background: var(--green);
  border-radius: 9px; padding: 14px 26px;
}
.btn-green:hover { background: var(--green-hover); color: #ffffff; }
.textlink { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 500; color: var(--green); }
.textlink .arrow { font-size: 16px; transition: transform 0.15s ease; }
.textlink:hover .arrow { transform: translateX(3px); }

/* nav */
.nav { padding-top: 26px; padding-bottom: 26px; display: flex; align-items: center; gap: 28px; }
.nav-brand { display: flex; align-items: center; gap: 9px; }
.nav-wordmark { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
/* every nav item is its own page, so the row is uniform: no anchors to treat
   differently, and the links wrap as a group rather than being hidden. */
.nav-links { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 22px; flex-wrap: wrap; }
.nav a.link { font-size: 13.5px; color: var(--body); white-space: nowrap; }
.nav a.link:hover { color: var(--ink); }
.nav-signin {
  font-size: 13.5px; font-weight: 500;
  color: var(--ink); background: var(--ground);
  border: 1px solid var(--hairline);
  border-radius: 99px; padding: 9px 18px;
}
.nav-signin:hover { border-color: var(--ink); color: var(--ink); }

/* 1 · hero — left-aligned two-column. The headline stays left-aligned and the
   cycling word ends its line: a centred cycle has to reserve the widest word's
   width, which leaves a hole after short words like "reply." */
.hero {
  padding-top: 56px; padding-bottom: 72px;
  /* even columns, not the canvas's 5:6 — at this page's width 5fr left the copy
     column too narrow for the two calls to action to sit on one line, and the
     draft card is anchored to the wrap edge, so widening the copy costs nothing. */
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.hero-copy .kicker { display: block; }
.hero h1 {
  /* 50px, not the canvas's 56px: the design was drawn on a 1440 artboard with
     72px padding, where the longest cycling word cleared the draft card. This
     page is 1120 wide, so the same type ran 25px under it. Scaled to the real
     container the word clears with ~45px to spare, which is also the slack a
     future, longer action name gets. */
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.06;
}
.hero h1 .approve { color: var(--green); }
.hero-sub { font-size: 19px; line-height: 1.55; color: var(--body); max-width: 470px; text-wrap: pretty; }
.hero-ctas { display: flex; align-items: center; gap: 16px; margin-top: 6px; flex-wrap: wrap; }

/* the cycling word · --nc-cycle. The sizer is one character — just enough to
   give the box a baseline. No measured widths, so editing the copy can't break
   it. */
.cyc { position: relative; display: inline-block; vertical-align: baseline; }
.cyc .sizer { visibility: hidden; }
.cyc .word {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  opacity: 0; color: var(--amber);
  animation: kdcycle var(--nc-cycle) ease-in-out infinite;
}
/* The beat is on a class, not on :nth-child — child 1 is the sizer, so the
   words are children 2–4, and the same three beats have to line up with three
   cards that have no sizer. In reading order: reply → business rule →
   update set, which is the whole action catalog, moving. */
.cyc .word.beat-2, .hero-card.beat-2 { animation-delay: var(--nc-step); }
.cyc .word.beat-3, .hero-card.beat-3 { animation-delay: calc(var(--nc-step) * 2); }

/* hero art — a photograph with the proposal cards laid over it. The photo is
   3:2 and sits at the top of the column; the card stack is pinned to the
   bottom of the column and the column carries enough padding underneath the
   photo that the stack overlaps only the desk — the bottom ~90px of the
   picture — and never a face. The vignette in the file is transparent, so
   there is no frame, radius or shadow to draw: the photo fades into the
   ground on its own. */
.hero-art { position: relative; padding-bottom: 210px; }
.hero-photo { display: block; width: 100%; height: auto; }
/* The three cards share one grid cell, so the stack is always as tall as the
   tallest of them and nothing reflows when the beat changes. Card chrome and
   the cross-fade are appended at the end of this file (.hero-card). */
.hero-stack {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  /* 412px, unchanged from the single draft card this replaced: the h1 comment
     above measures the cycling word's clearance against this exact number, and
     a wider card walks into "business rule." at 1120. The proposed-change card
     is fitted to the width; the width is not fitted to the card. */
  width: 412px; max-width: 100%;
  display: grid;
}
.draft-head { display: flex; align-items: center; gap: 9px; padding: 13px 15px; }
.draft-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber-dark); flex-shrink: 0; animation: ncpulse 2.4s ease-in-out infinite; }
.draft-title { font-size: 13px; font-weight: 600; color: #dde5ee; }
.draft-badge { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: #8b98a9; border: 1px solid #263041; border-radius: 99px; padding: 2px 8px; }
.draft-state { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--amber-dark); }
.draft-body { padding: 0 15px 14px; font-size: 13px; line-height: 1.65; color: #cfd9e4; }
.draft-foot { background: #0f151d; padding: 12px 15px; display: flex; align-items: center; gap: 10px; }
.draft-note { font-size: 10.5px; line-height: 1.4; color: #49535f; }
.draft-discard { margin-left: auto; font-size: 11.5px; color: #8b98a9; }
.draft-send { font-size: 11.5px; font-weight: 600; color: #08110c; background: var(--green-dark); padding: 6px 14px; border-radius: 7px; }

/* 2 · the inversion */
.inversion { padding-top: 104px; }
.inversion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.inversion .kicker { margin-bottom: 16px; display: block; }
.inversion .kicker.us { color: var(--green); }
.inversion-col { display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.6; }
.inversion-col.them { color: var(--body); }
.inversion-col.us { color: var(--ink); }
.inversion-col.us .soft { color: var(--body); }
.depth { margin-top: 56px; border-top: 1px solid var(--rule); padding-top: 40px; max-width: 820px; }
.depth .section-head { margin-bottom: 14px; }
.depth p { font-size: 16px; line-height: 1.65; color: var(--body); text-wrap: pretty; }
.depth .mono { font-size: 14px; color: var(--ink); }

/* 3 · for every seat */
.seats { padding-top: 104px; }
.seats .kicker { margin-bottom: 10px; display: block; }
.seats .section-head { margin-bottom: 32px; max-width: 640px; }
.seat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.seat-card { display: flex; flex-direction: column; }
.seat-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 12px; text-transform: uppercase; }
.seat-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.01em; }
.seat-card p { font-size: 14.5px; line-height: 1.6; color: var(--body); }
.card-foot { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 16px; }
.seat-card .card-foot { margin-top: auto; padding-top: 16px; }

/* 4 · how it works */
.how { padding-top: 104px; }
.how .kicker { margin-bottom: 32px; display: block; }
.how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.how-card { display: flex; flex-direction: column; }
.how-num { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-bottom: 12px; }
.how-title { font-size: 18px; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.01em; }
.how-body { font-size: 14.5px; line-height: 1.6; color: var(--body); }
.how-card .how-foot { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: auto; padding-top: 16px; }

/* 5 · receipts */
.receipts { padding-top: 104px; }
.receipts .kicker { margin-bottom: 10px; display: block; }
.receipts .section-head { margin-bottom: 32px; max-width: 640px; }
.receipts-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; }
/* the dark card keeps its border — it is a real surface with a real edge */
.receipt-dark {
  background: #0d1117; border: 1px solid #1c2530; border-radius: 12px;
  padding: 20px; display: flex; flex-direction: column; gap: 12px;
}
.receipt-dark .dark-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: #5c6875; text-transform: uppercase; }
.receipt-dark .note { font-size: 13px; line-height: 1.55; color: #8b98a9; }
.receipt-col { display: flex; flex-direction: column; gap: 32px; }
.receipt-card .kicker { margin-bottom: 12px; display: block; }
.audit-line { font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--ink); word-break: break-word; }
.cost-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cost-fig { font-family: var(--mono); font-size: 32px; font-weight: 600; letter-spacing: -0.02em; }
.cost-note { font-size: 13.5px; color: var(--body); }
.cost-breakdown { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 8px; }

/* dark product card — the product palette, verbatim */
.frag-card { border: 1px solid #223041; background: #10161d; border-radius: 9px; }
.frag-card-head { display: flex; align-items: center; gap: 10px; padding: 9px 13px; }
.frag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-dark); flex-shrink: 0; }
.frag-dot.running { background: var(--amber-dark); animation: ncpulse 1.4s ease-in-out infinite; }
.frag-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em; color: #8b98a9; }
.frag-meta { font-family: var(--mono); font-size: 11px; color: #5c6875; margin-left: auto; }
.frag-meta.running { color: var(--amber-dark); }
.frag-query { padding: 0 13px 11px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: #a8b8c8; word-break: break-all; }

/* 6 · cost */
.cost-section { padding-top: 104px; }
.cost-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; border-top: 1px solid var(--rule); padding-top: 56px; }
.cost-grid .kicker { margin-bottom: 16px; display: block; }
.cost-facts { display: flex; flex-direction: column; gap: 18px; font-size: 15.5px; line-height: 1.65; color: var(--body); }
.cost-fact { display: flex; gap: 14px; }
.cost-fact .num { font-family: var(--mono); font-size: 13px; color: var(--green); flex-shrink: 0; width: 20px; }

/* 7 · security */
.security { padding-top: 104px; }
.security .kicker { margin-bottom: 10px; display: block; }
.security .section-head { margin-bottom: 32px; max-width: 640px; }
.security-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.security-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; }
.security-card p { font-size: 14.5px; line-height: 1.6; color: var(--body); }

/* 8 · close + footer */
.close { padding-top: 120px; padding-bottom: 48px; }
.close-grid { display: grid; grid-template-columns: 7fr 4fr; gap: 56px; align-items: center; }
.close h2 { font-size: clamp(30px, 3.4vw, 42px); font-weight: 700; letter-spacing: -0.028em; line-height: 1.06; margin-bottom: 18px; text-wrap: balance; }
.close-sub { font-size: 17px; line-height: 1.55; color: var(--body); margin-bottom: 26px; max-width: 460px; text-wrap: pretty; }
.close-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.close-meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.after-click { max-width: 300px; margin-left: auto; width: 100%; }
.after-click .kicker { display: block; font-size: 9.5px; margin-bottom: 10px; }
.after-row { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--body); }
.after-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.after-val { margin-left: auto; color: var(--ink); }
.footer {
  border-top: 1px solid var(--rule); margin-top: 96px; padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; gap: 8px; }
.footer-wordmark { font-size: 13px; color: var(--body); font-weight: 600; }
.footer-legal { font-size: 12px; color: var(--muted); }
.footer-links { display: flex; gap: 18px; font-size: 12.5px; }
.footer-links a { color: var(--body); }
.footer-links a:hover { color: var(--ink); }

/* responsive */
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; gap: 48px; padding-bottom: 56px; }
  /* stacked: the people first, then the card they are looking at */
  .hero-art { padding-bottom: 0; display: flex; flex-direction: column; gap: 24px; }
  .hero-photo { order: 1; width: 100%; max-width: 480px; }
  .hero-stack { position: static; order: 2; width: 100%; max-width: 440px; }
  .close-grid { grid-template-columns: 1fr; gap: 40px; }
  .after-click { margin-left: 0; }
}
@media (max-width: 900px) {
  .inversion-grid, .cost-grid { grid-template-columns: 1fr; gap: 40px; }
  .how-grid, .seat-grid { grid-template-columns: 1fr; gap: 28px; }
  .receipts-grid, .security-grid { grid-template-columns: 1fr; gap: 28px; }
  /* nothing is hidden any more — there is no "just an anchor" item left to
     drop. The brand and the sign-in button hold the first row and the six
     page links wrap onto the second. */
  .nav { flex-wrap: wrap; gap: 14px 20px; }
  .nav-brand { margin-right: auto; }
  .nav-links { order: 3; flex-basis: 100%; justify-content: flex-start; gap: 12px 18px; }
}
@media (max-width: 620px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .hero { padding-top: 32px; }
  /* the cycling word takes its own line rather than overflowing the viewport,
     and the manual break after it is no longer needed */
  .cyc { display: block; }
  .hero h1 br { display: none; }
  .hero-sub { font-size: 17px; }
  .btn-green { padding: 13px 22px; }
  .inversion, .seats, .how, .receipts, .cost-section, .security { padding-top: 72px; }
  .close { padding-top: 80px; }
  .footer { margin-top: 64px; }
  .cost-fig { font-size: 28px; }
}

/* 9 · setup teaser — the homepage keeps the claim; /site/setup carries the
   argument. The strip is the one place a number is coloured: the single
   record that exists is green because it happened, and the zeros stay muted
   because nothing did. */
.setup { padding-top: 104px; }
.setup .kicker { display: block; margin-bottom: 10px; }
.setup .section-head { margin-bottom: 28px; max-width: 660px; }
.setup-lead { font-size: 16px; line-height: 1.65; color: var(--body); max-width: 720px; margin-bottom: 32px; text-wrap: pretty; }
.setup .strip { margin-bottom: 28px; }

@media (prefers-reduced-motion: reduce) {
  /* the headline must still say something, so the first word holds — and with
     it the card that names it. The other two cards leave the layout entirely
     rather than stacking invisibly, so the stack collapses to card 1's height
     and the reader gets one complete, static proposal. */
  .cyc .word { animation: none; }
  .cyc .word.beat-1 { opacity: 1; }
  .hero-card { animation: none; }
  .hero-card.beat-1 { opacity: 1; transform: none; }
  .hero-card.beat-2, .hero-card.beat-3 { display: none; }
  .draft-dot, .frag-dot.running { animation: none; }
  .textlink .arrow { transition: none; }
}

/* ---------------------------------------------------------------------------
   /site/compare — the comparison page.

   Multipage, not an SPA: this is a second HTML file sharing this stylesheet,
   so the nav links across pages are absolute (/site#how, not #how) and the
   wordmark is a link home. Everything below is used only by that page. */

.nav-brand { color: var(--ink); }
.nav-brand:hover { color: var(--ink); }
.nav a.link.current { color: var(--ink); font-weight: 600; }

.page-head { padding-top: 40px; }
.page-head .kicker { display: block; margin-bottom: 18px; }
.page-head h1 {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.08;
  margin-bottom: 20px;
}
.page-sub { font-size: 18px; line-height: 1.6; color: var(--body); max-width: 660px; text-wrap: pretty; }

/* the chart itself — a real table, because it is real tabular data. On a
   phone it becomes one block per row, with the column name carried by the
   .cell-tag in each cell rather than a header the reader has scrolled past. */
.chart-section { padding-top: 104px; }
.chart-section .kicker, .boundary .kicker { display: block; margin-bottom: 10px; }
.chart-section .section-head, .boundary .section-head { margin-bottom: 28px; max-width: 640px; }
.table-scroll { overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 18px 24px 22px 0; }
.cmp thead th {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
  padding-top: 0; padding-bottom: 12px;
}
.cmp thead th.cmp-us { color: var(--ink); }
.cmp tbody tr > * { border-top: 1px solid var(--rule); }
.cmp th[scope="row"] { width: 18%; min-width: 150px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; padding-right: 28px; }
.cmp td { width: 41%; font-size: 14.5px; line-height: 1.6; color: var(--body); }
.cmp td.cmp-us { color: var(--ink); padding-right: 0; }
.cell-tag { display: none; }
.cite {
  font-family: var(--mono); font-size: 10px; vertical-align: super;
  color: var(--green); padding-left: 2px;
}
.cite:hover { color: var(--green-hover); text-decoration: underline; }


/* where the other one wins */
.honest { padding-top: 104px; }
.honest .kicker { display: block; margin-bottom: 16px; }
.honest .section-head { margin-bottom: 14px; }
.honest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.honest-note { font-size: 15.5px; line-height: 1.6; color: var(--body); max-width: 420px; text-wrap: pretty; }
.honest-list { display: flex; flex-direction: column; gap: 18px; font-size: 15.5px; line-height: 1.65; color: var(--body); }
.honest-item { display: flex; gap: 14px; }
.honest-item .num { font-family: var(--mono); font-size: 13px; color: var(--green); flex-shrink: 0; width: 20px; }

/* sources */
.sources { padding-top: 104px; }
.sources .kicker { display: block; margin-bottom: 10px; }
.sources .section-head { margin-bottom: 20px; max-width: 640px; }
.sources-note { font-size: 14px; line-height: 1.65; color: var(--muted); max-width: 780px; }
.sources-list {
  margin: 20px 0; padding-left: 24px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 14.5px; line-height: 1.55; color: var(--body);
}
.sources-list li::marker { font-family: var(--mono); font-size: 12px; color: var(--muted); }

@media (max-width: 900px) {
  .honest-grid { grid-template-columns: 1fr; gap: 28px; }
  /* the header row is kept for screen readers and replaced visually by the
     per-cell tag, so a cell still says which side it is describing */
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp tbody tr > * { border-top: 0; }
  .cmp tbody tr { border-top: 1px solid var(--rule); padding-top: 20px; margin-bottom: 12px; }
  /* width too: the desktop 18% is on the same selector, so the block rule
     above cannot reach it and the heading would wrap to four lines. */
  .cmp th[scope="row"] { width: auto; min-width: 0; font-size: 17px; padding: 0 0 12px; }
  .cmp td { padding: 0 0 16px; }
  .cell-tag {
    display: block; font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
  }
}
@media (max-width: 620px) {
  .chart-section, .honest, .sources { padding-top: 72px; }
}

/* bring your own model — the status column is the colour rule doing its
   literal job: green is a thing that happened (it is built and it runs),
   amber is a thing still pending (designed, not written). Nothing else on
   this page is coloured, which is what makes those two readable at a glance. */
.models { padding-top: 104px; }
.models .kicker { display: block; margin-bottom: 10px; }
.models .section-head { margin-bottom: 18px; max-width: 640px; }
.models-lead { font-size: 16px; line-height: 1.65; color: var(--body); max-width: 780px; margin-bottom: 32px; text-wrap: pretty; }
.status {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11.5px; white-space: nowrap;
}
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.status.on { color: var(--green); }
.status.on::before { background: var(--green); }
.status.pending { color: var(--amber); }
.status.pending::before { background: var(--amber); }
.status-caveat { display: block; margin-top: 6px; font-family: var(--mono); font-size: 10.5px; line-height: 1.4; color: var(--muted); }


@media (max-width: 620px) {
  .models { padding-top: 72px; }
}

/* ---------------------------------------------------------------------------
   /site/setup — the setup page.

   This page adds a fourth kind of motion to the site's inventory, and it is
   worth being explicit about why, because "nothing else moves" is otherwise
   the rule. The topology diagram animates one leg at a time: a packet travels
   the connection currently being explained, and the other legs dim. That is
   the diagram reading itself out loud — the same job the caption does in
   words — not a scroll reveal or a flourish. It stops dead under
   prefers-reduced-motion, where every leg shows at full strength at once and
   the page still explains itself. Nothing else here moves.

   Colour discipline is unchanged and does more work than usual: the write leg
   and the one record that exists are green because they happened; the CAB
   wait and the unshipped hosting shape are amber because they are pending;
   every other line in every diagram is ink or grey. */

/* --- the topology --------------------------------------------------------- */
.topo { padding-top: 96px; }
.topo .kicker { display: block; margin-bottom: 10px; }
.topo .section-head { margin-bottom: 32px; max-width: 700px; }
.topo-stage { display: grid; grid-template-columns: 1fr 330px; gap: 48px; align-items: start; }
.topo-svg { width: 100%; height: auto; overflow: visible; }

/* zone chrome */
.zone-box { fill: #ffffff; stroke: var(--hairline); stroke-width: 1; }
.console-box { fill: #0d1117; }
.zone-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.09em;
  fill: var(--muted); text-transform: uppercase;
}
.zone-sub { font-size: 11.5px; fill: var(--muted); font-family: var(--grotesque); }
.console-sub { font-size: 11.5px; fill: #5c6875; font-family: var(--grotesque); }
.hair { stroke: var(--rule); stroke-width: 1; }
.mono-row { font-family: var(--mono); font-size: 11.5px; fill: var(--ink); }

.chip-box { fill: #ffffff; stroke: var(--green); stroke-width: 1; }
.chip-title { font-family: var(--mono); font-size: 11px; fill: var(--green); font-weight: 600; }
.chip-sub { font-size: 10px; fill: var(--muted); font-family: var(--grotesque); }
.dot-green { fill: var(--green); }
.dot-amber { fill: var(--amber-dark); }
.acl-box { fill: none; stroke: var(--rule); stroke-width: 1; }
.acl-text { font-family: var(--mono); font-size: 10px; fill: var(--muted); letter-spacing: 0.04em; }

/* the product surfaces inside the console keep the product palette verbatim */
.mini-card { fill: #10161d; stroke: #223041; stroke-width: 1; }
.mini-card.draft { fill: #121924; stroke: #33415a; }
.mini-label { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.09em; fill: #8b98a9; }
.mini-query { font-family: var(--mono); font-size: 9px; fill: #a8b8c8; }
.mini-line { stroke: #2b3644; stroke-width: 4; stroke-linecap: round; }
.send-box { fill: var(--green-dark); }
.send-text { font-size: 12px; font-weight: 600; fill: #08110c; text-anchor: middle; font-family: var(--grotesque); }

/* the figure — back view, anonymous, same language as the hero illustration */
.fig-ink { fill: var(--ink); }
.fig-arm { fill: none; stroke: var(--ink); stroke-width: 13; stroke-linecap: round; }
.fig-label { font-size: 13px; font-weight: 600; fill: var(--ink); font-family: var(--grotesque); }
.fig-sub { font-size: 11.5px; fill: var(--muted); font-family: var(--grotesque); }

/* legs */
.wire { stroke: var(--ink); stroke-width: 1.5; }
.wire-green { stroke: var(--green); fill: none; stroke-width: 1.5; }
.ah { fill: var(--ink); }
.ah-green { fill: var(--green); }
.lane-tag rect { fill: #ffffff; stroke: var(--rule); stroke-width: 1; }
.lane-tag text {
  font-family: var(--mono); font-size: 10px; fill: var(--muted);
  text-anchor: middle; letter-spacing: 0.04em;
}
.lane-tag.tag-green rect { stroke: var(--green); }
.lane-tag.tag-green text { fill: var(--green); }
.pkt { fill: var(--ink); opacity: 0; }
.pkt-commit { fill: var(--green); }

/* one leg at a time: the others recede so the eye has one thing to follow */
.leg { transition: opacity 0.35s ease; }
.topo-svg[data-beat="1"] .leg:not(.leg-1),
.topo-svg[data-beat="2"] .leg:not(.leg-2),
.topo-svg[data-beat="3"] .leg:not(.leg-3),
.topo-svg[data-beat="4"] .leg:not(.leg-4) { opacity: 0.22; }
/* The button lights only on the beat that starts there. Both ends of the
   transition are written as an explicit filter list — animating to `none`
   does not interpolate, and the button stays grey. */
.send-box { transition: filter 0.35s ease; filter: saturate(0.15) brightness(0.7); }
.topo-svg[data-beat="4"] .send-box { filter: saturate(1) brightness(1); }

@keyframes ncpktL {
  0%   { transform: translateX(0); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(-106px); opacity: 0; }
}
@keyframes ncpktR {
  0%   { transform: translateX(0); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(106px); opacity: 0; }
}
/* the commit packet travels the horizontal run out of the button and fades
   at the bend — the bend itself is routing, not information */
@keyframes ncpktCommit {
  0%   { transform: translateX(0); opacity: 0; }
  12%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateX(-174px); opacity: 0; }
}
.topo-svg[data-beat="1"] .leg-1 .pkt-left,
.topo-svg[data-beat="2"] .leg-2 .pkt-left { animation: ncpktL 1.5s linear infinite; }
.topo-svg[data-beat="2"] .leg-2 .pkt-right { animation: ncpktR 1.5s linear infinite 0.55s; }
.topo-svg[data-beat="3"] .leg-3 .pkt-right-far { animation: ncpktR 1.5s linear infinite; }
.topo-svg[data-beat="3"] .leg-3 .pkt-left-far { animation: ncpktL 1.5s linear infinite 0.55s; }
.topo-svg[data-beat="4"] .leg-4 .pkt-commit { animation: ncpktCommit 1.9s linear infinite; }
.pulse-slow { animation: ncpulse 2.4s ease-in-out infinite; }

/* captions — buttons, because a reader driving the diagram beats watching it */
.topo-captions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.topo-captions li { margin: 0; }
.cap {
  display: grid; grid-template-columns: 34px 1fr; gap: 12px; width: 100%;
  text-align: left; background: none; border: 0; border-top: 1px solid var(--rule);
  padding: 16px 0; cursor: pointer; font-family: inherit;
}
.topo-captions li:last-child .cap { border-bottom: 1px solid var(--rule); }
.cap-num { font-family: var(--mono); font-size: 11px; color: var(--muted); padding-top: 3px; transition: color 0.2s ease; }
.cap-body { display: block; }
.cap-title { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--muted); transition: color 0.2s ease; }
.cap-text {
  display: block; font-size: 13.5px; line-height: 1.6; color: var(--body);
  margin-top: 6px; max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease;
  margin-top: 0;
}
.cap-meta {
  display: block; font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease;
}
.cap[aria-pressed="true"] .cap-num { color: var(--green); }
.cap[aria-pressed="true"] .cap-title { color: var(--ink); }
.cap[aria-pressed="true"] .cap-text { max-height: 200px; opacity: 1; margin-top: 6px; }
.cap[aria-pressed="true"] .cap-meta { max-height: 40px; opacity: 1; margin-top: 10px; }
.cap:hover .cap-title { color: var(--ink); }
.cap:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
/* without the script every caption is open, so the page explains itself */
.topo-captions.no-js .cap-text, .topo-captions.no-js .cap-meta { max-height: none; opacity: 1; margin-top: 6px; }
.topo-captions.no-js .cap-title { color: var(--ink); }

/* --- footprint strip ------------------------------------------------------ */
.footprint { padding-top: 104px; }
.footprint .kicker { display: block; margin-bottom: 10px; }
.footprint .section-head { margin-bottom: 32px; max-width: 640px; }
.strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.cell {
  border: 1px dashed var(--hairline); border-radius: 10px; padding: 20px 14px 16px;
  display: flex; flex-direction: column; gap: 8px; min-height: 108px; justify-content: center;
}
.cell.filled { border: 1px solid var(--green); background: rgba(19, 108, 67, 0.03); }
.cell-num { font-family: var(--mono); font-size: 26px; font-weight: 500; color: var(--muted); line-height: 1; }
.cell.filled .cell-num { color: var(--green); font-weight: 600; }
.cell-name {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); line-height: 1.4;
}
.cell.filled .cell-name { color: var(--ink); }
.footprint-note-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 44px; }
.fp-note h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; }
.fp-note p { font-size: 14.5px; line-height: 1.6; color: var(--body); text-wrap: pretty; }

/* --- the three steps ------------------------------------------------------ */
.steps { padding-top: 104px; }
.steps .kicker { display: block; margin-bottom: 10px; }
.steps .section-head { margin-bottom: 8px; max-width: 640px; }
.step {
  display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: start;
  border-top: 1px solid var(--rule); padding-top: 32px; margin-top: 40px;
}
.step-num { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-bottom: 14px; }
.step-copy h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 12px; }
.step-copy p { font-size: 15.5px; line-height: 1.65; color: var(--body); text-wrap: pretty; }
.step-copy .step-p2 { margin-top: 14px; }
.step-copy .card-foot { margin-top: 18px; }
.art-note { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* 01 · the OAuth form, drawn */
.form-card { border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; }
.form-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--rule);
}
.form-title { font-size: 14px; font-weight: 600; }
.form-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--muted);
  border: 1px solid var(--rule); border-radius: 99px; padding: 3px 9px;
}
.form-row {
  display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: baseline;
  padding: 11px 18px; border-bottom: 1px solid var(--rule);
}
.form-row:last-child { border-bottom: 0; }
.fk { font-size: 12.5px; color: var(--muted); }
.fv { font-family: var(--mono); font-size: 12.5px; color: var(--ink); word-break: break-all; }
.fv.on { color: var(--green); display: inline-flex; align-items: center; gap: 7px; }
.tick { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

/* 02 · the config, drawn as the dark thing it actually is */
.env-card { background: #0d1117; border-radius: 12px; padding: 16px 18px 18px; }
.env-head { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid #1a212b; }
.env-dot { width: 6px; height: 6px; border-radius: 50%; background: #4a505a; }
.env-name { font-family: var(--mono); font-size: 11px; color: #8b98a9; }
.env-line { display: flex; gap: 0; padding: 7px 0; font-family: var(--mono); font-size: 12px; flex-wrap: wrap; }
.ek { color: #8b98a9; }
.eq { color: #49535f; padding: 0 2px; }
.ev { color: #a8b8c8; word-break: break-all; }
.ev.muted { color: #49535f; }

/* 03 · the identity, read back not granted */
.ident-card { border: 1px solid var(--hairline); border-radius: 12px; padding: 20px; }
.ident-head { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); margin-bottom: 16px; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; background: #f2f2f2; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; color: var(--body);
}
.ident-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ident-name { font-size: 14.5px; font-weight: 600; }
.ident-host { font-family: var(--mono); font-size: 10.5px; color: var(--muted); word-break: break-all; }
.ident-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.09em;
  color: var(--muted); margin-bottom: 10px;
}
.ident-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.rchip {
  font-family: var(--mono); font-size: 11px; color: var(--body);
  border: 1px solid var(--hairline); border-radius: 99px; padding: 4px 10px;
}
.ident-foot { font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 14px; }

/* --- the honest clock ----------------------------------------------------- */
.clock { padding-top: 104px; }
.clock .kicker { display: block; margin-bottom: 10px; }
.clock .section-head { margin-bottom: 40px; max-width: 720px; }
.track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; position: relative; }
.track-line { position: absolute; left: 5px; right: 5px; top: 5px; height: 1px; background: var(--rule); }
.tick-item { display: flex; flex-direction: column; gap: 8px; position: relative; }
.tick-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ground); border: 3px solid var(--green); margin-bottom: 8px; }
.tick-dot.wait { border-color: var(--amber); }
.tick-when { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--green); }
.tick-item:nth-child(3) .tick-when { color: var(--amber); }
.tick-what { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.tick-note { font-size: 13.5px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.clock-note { margin-top: 40px; font-size: 14.5px; line-height: 1.65; color: var(--body); max-width: 760px; text-wrap: pretty; }

/* --- where it runs -------------------------------------------------------- */
.where { padding-top: 104px; }
.where .kicker { display: block; margin-bottom: 10px; }
.where .section-head { margin-bottom: 32px; max-width: 640px; }
.where-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.where-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-head .close-ctas { margin-top: 28px; }
.where-art { width: 100%; height: auto; max-width: 240px; margin-bottom: 18px; display: block; }
.wz { fill: #ffffff; stroke: var(--hairline); stroke-width: 1.2; }
.wz.dashed { stroke-dasharray: 4 4; }
.wz-outer { fill: none; stroke: var(--rule); stroke-width: 1.2; }
.wz-t { font-family: var(--mono); font-size: 9px; fill: var(--ink); text-anchor: middle; }
.wz-o { font-family: var(--mono); font-size: 8px; fill: var(--muted); letter-spacing: 0.06em; }
.ww { stroke: var(--ink); stroke-width: 1.2; }
.ww.dashed { stroke-dasharray: 4 4; }
.where-card h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 10px; }
.where-card .status { margin-bottom: 12px; }
.where-card .status-caveat { margin-top: -6px; margin-bottom: 12px; }
.where-card p { font-size: 14.5px; line-height: 1.6; color: var(--body); text-wrap: pretty; }

/* --- the road not taken --------------------------------------------------- */
.notaken { padding-top: 104px; }
.notaken .kicker { display: block; margin-bottom: 10px; }
.notaken .section-head { margin-bottom: 32px; }
.notaken-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.na-art svg { width: 100%; height: auto; }
.na-cap { font-family: var(--mono); font-size: 9px; letter-spacing: 0.09em; fill: var(--muted); }
.na-cap.on { fill: var(--green); }
.na-outer { fill: none; stroke: var(--rule); stroke-width: 1.2; }
.na-box { fill: #ffffff; stroke: var(--hairline); stroke-width: 1.2; }
.na-box.dark { fill: #0d1117; stroke: none; }
.na-box.faint { opacity: 0.4; }
.na-o { font-family: var(--mono); font-size: 8.5px; fill: var(--muted); letter-spacing: 0.06em; }
.na-t { font-family: var(--mono); font-size: 10px; fill: var(--ink); text-anchor: middle; }
.na-t.light { fill: #dde5ee; }
.na-t.faint { opacity: 0.5; }
.na-t2 { font-family: var(--mono); font-size: 8.5px; fill: var(--muted); }
.na-wire { stroke: var(--ink); stroke-width: 1.2; }
.na-wire.dashed { stroke: var(--muted); stroke-dasharray: 4 4; }
.na-x line { stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.na-note { font-family: var(--mono); font-size: 8.5px; fill: var(--muted); }
.na-note.on { fill: var(--green); }
.na-block.rejected { opacity: 0.55; }
.na-copy p { font-size: 16px; line-height: 1.65; color: var(--body); text-wrap: pretty; margin-bottom: 16px; }
.na-copy .na-kicker { color: var(--ink); font-weight: 600; margin-bottom: 0; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1000px) {
  .topo-stage { grid-template-columns: 1fr; gap: 32px; }
  .step { grid-template-columns: 1fr; gap: 32px; }
  .step-art { max-width: 460px; }
}
@media (max-width: 900px) {
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footprint-note-grid, .where-grid { grid-template-columns: 1fr; gap: 28px; }
  .track { grid-template-columns: 1fr; gap: 26px; }
  /* the rail only makes sense while the ticks sit side by side */
  .track-line { display: none; }
  .tick-item { border-left: 1px solid var(--rule); padding-left: 18px; }
  .tick-dot { position: absolute; left: -6px; top: 2px; margin: 0; }
  .tick-item { padding-top: 0; }
  .notaken-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 620px) {
  .topo, .footprint, .steps, .clock, .where, .notaken { padding-top: 72px; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cell-num { font-size: 22px; }
  .form-row { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  /* every leg at full strength, nothing travelling: the captions and the
     numbered lane tags carry the same information the motion did */
  .topo-svg[data-beat] .leg { opacity: 1 !important; }
  .pkt { animation: none !important; opacity: 0 !important; }
  .send-box { filter: saturate(1) brightness(1) !important; }
  .pulse-slow { animation: none; }
  .leg, .cap-num, .cap-title, .cap-text, .cap-meta, .send-box { transition: none; }
  .cap-text, .cap-meta { max-height: none; opacity: 1; margin-top: 6px; }
  .cap-title { color: var(--ink); }
}

/* ---------------------------------------------------------------------------
   The four remaining nav pages: /site/who, /site/how, /site/receipts,
   /site/security. Every nav item is now its own page, so these share the
   page-head, .step, .cmp table and .status primitives above rather than
   inventing a second vocabulary. Nothing below animates. */

/* a homepage section handing off to the page that carries the argument */
.section-more { margin-top: 32px; }

/* --- shared: the honest boundary block ------------------------------------ */
.bound { margin-top: 20px; border-left: 2px solid var(--rule); padding: 2px 0 2px 16px; }
.bound-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em;
  color: var(--muted); margin-bottom: 6px;
}
.bound p { font-size: 14px; line-height: 1.6; color: var(--body); }

/* --- shared: a dark draft/reply fragment ---------------------------------- */
.frag-card.draftish { background: #121924; border-color: #33415a; }
.frag-body { padding: 0 13px 12px; font-size: 13px; line-height: 1.65; color: #cfd9e4; }
.frag-foot {
  background: #0f151d; padding: 10px 13px; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap;
}
.frag-foot-note { font-size: 10.5px; line-height: 1.4; color: #49535f; }
.frag-send {
  margin-left: auto; font-size: 11.5px; font-weight: 600;
  color: #08110c; background: var(--green-dark); padding: 6px 14px; border-radius: 7px;
}
.ask, .ask-bubble {
  font-size: 14px; line-height: 1.6; border-radius: 10px; padding: 12px 14px;
}
.ask { background: #161d27; color: #dde5ee; }
.ask-bubble { background: #f4f4f4; color: var(--ink); display: inline-block; max-width: 560px; }

/* --- /site/who ------------------------------------------------------------ */
.queue { display: flex; flex-direction: column; gap: 14px; }
.queue-rows { display: flex; flex-direction: column; }
.qrow {
  display: flex; gap: 14px; align-items: baseline; padding: 9px 0;
  border-bottom: 1px solid var(--rule); font-size: 13px;
}
.qrow.dim { opacity: 0.45; }
.qnum { font-family: var(--mono); font-size: 11.5px; color: var(--muted); flex-shrink: 0; }
.qtxt { color: var(--body); }
.queue-arrow { display: flex; flex-direction: column; gap: 5px; }
.queue-arrow svg { width: 100%; max-width: 220px; height: auto; }
.queue-arrow line { stroke: var(--muted); stroke-width: 1.2; }
.queue-arrow path { fill: var(--muted); }
.queue-arrow-label { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.04em; }
.rchip.off { color: var(--muted); border-style: dashed; text-decoration: line-through; }

/* --- /site/how · the anatomy of one turn ---------------------------------- */
.turnsec { padding-top: 96px; }
.turnsec .kicker { display: block; margin-bottom: 10px; }
.turnsec .section-head { margin-bottom: 40px; max-width: 660px; }
.turn { --turn-col: 116px; --turn-gap: 28px; list-style: none; margin: 0; padding: 0; }
.turn-step {
  position: relative;
  display: grid; grid-template-columns: var(--turn-col) 1fr; gap: var(--turn-gap);
}
.turn-who {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.09em;
  color: var(--muted); text-align: right; padding-top: 3px;
}
.turn-who.amber { color: var(--amber); }
.turn-who.green { color: var(--green); }
/* the rail is the dot on the spine; the spine itself is the body's left edge */
.turn-rail {
  position: absolute; top: 5px;
  left: calc(var(--turn-col) + var(--turn-gap) / 2 - 4.5px);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--muted); box-shadow: 0 0 0 3px var(--ground);
}
.turn-step.pending .turn-rail { background: var(--amber); }
.turn-step.done .turn-rail { background: var(--green); }
.turn-body {
  border-left: 1px solid var(--rule);
  padding-left: calc(var(--turn-gap) / 2); padding-bottom: 40px;
  margin-left: calc(var(--turn-gap) / -2);
  display: flex; flex-direction: column; gap: 12px;
}
.turn-step:last-child .turn-body { padding-bottom: 0; border-left-color: transparent; }
.turn-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.turn-note { font-size: 14.5px; line-height: 1.65; color: var(--body); text-wrap: pretty; max-width: 660px; }
.turn-body .receipt-dark { max-width: 560px; display: flex; flex-direction: column; gap: 10px; }
.turn-body .frag-card { max-width: 560px; }
.turn-body .cost-row { align-items: baseline; }

/* --- /site/how · the catalog ---------------------------------------------- */
.catalog { padding-top: 104px; }
.catalog .kicker { display: block; margin-bottom: 10px; }
.catalog .section-head { margin-bottom: 18px; max-width: 640px; }
.cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cat-head.second { margin-top: 28px; }
.cat-n { font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--muted); }
.cat-col.hot .cat-n { color: var(--amber); }
.cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cat-list li {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 0; border-bottom: 1px solid var(--rule);
}
.cat-list li:last-child { border-bottom: 0; }
.cat-list .mono { font-size: 12.5px; color: var(--ink); }
.cat-list li > span:last-child { font-size: 13px; line-height: 1.5; color: var(--body); }
.cat-note { font-size: 13.5px; line-height: 1.6; color: var(--body); margin-top: 14px; text-wrap: pretty; }
.endpoints { margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.endpoint { display: flex; flex-direction: column; gap: 2px; }
.endpoint .mono { font-size: 11.5px; color: var(--amber); word-break: break-all; }
.endpoint > span:last-child { font-size: 12px; color: var(--muted); }

/* --- /site/receipts · annotated artifacts --------------------------------- */
.anno-sec { padding-top: 96px; }
.anno-sec .kicker { display: block; margin-bottom: 10px; }
.anno-sec .section-head { margin-bottom: 28px; }
.anno { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.anno-art .receipt-dark { display: flex; flex-direction: column; gap: 10px; }
.pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--hairline); font-family: var(--mono); font-size: 9.5px;
  color: var(--muted); margin-left: 6px; vertical-align: middle;
}
.receipt-dark .pin, .frag-card .pin { border-color: #33415a; color: #8b98a9; }
.anno-legend { list-style: none; margin: 0; padding: 0; }
.anno-legend li {
  display: grid; grid-template-columns: 16px 1fr; gap: 14px;
  padding: 14px 0; border-top: 1px solid var(--rule);
}
.anno-legend .pin { margin-left: 0; border-color: var(--green); color: var(--green); }
/* the legend quotes the fragment it annotates, so the artifact above can stay
   byte-for-byte what the product prints — no pins injected into it. That also
   keeps the cost line readable by the build-time check in site-claims.test.js,
   which needs the token counts contiguous. */
.anno-frag {
  display: block; font-family: var(--mono); font-size: 11px; color: var(--muted);
  margin-bottom: 6px; word-break: break-all;
}
.anno-legend strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 5px; }
.anno-legend p { font-size: 13.5px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.anno-note { margin-top: 28px; font-size: 14.5px; line-height: 1.65; color: var(--body); max-width: 780px; text-wrap: pretty; }
.kept { padding-top: 104px; }
.kept .kicker { display: block; margin-bottom: 10px; }
.kept .section-head { margin-bottom: 28px; max-width: 640px; }

/* --- /site/security ------------------------------------------------------- */
.fourclaims { padding-top: 96px; }
.fourclaims .kicker { display: block; margin-bottom: 10px; }
.fourclaims .section-head { margin-bottom: 32px; max-width: 700px; }
.footprint-note-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; margin-top: 0; }

.blast { padding-top: 104px; }
.blast .kicker { display: block; margin-bottom: 10px; }
.blast .section-head { margin-bottom: 18px; max-width: 700px; }
.blast-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.blast-art { width: 100%; height: auto; max-width: 220px; margin-bottom: 16px; display: block; }
.wz.dark { fill: #0d1117; stroke: none; }
.wz-t.light { fill: #dde5ee; }
.wz-t.faintish { fill: var(--muted); font-size: 8px; }
.wz-t.faintlight { fill: #5c6875; font-size: 8px; }
.blast-card h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 10px; }
.blast-holds { font-size: 14px; line-height: 1.6; color: var(--body); margin-bottom: 16px; text-wrap: pretty; }
.blast-row { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-top: 1px solid var(--rule); }
.blast-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.09em; color: var(--muted); text-transform: uppercase; }
.blast-v { font-size: 13.5px; line-height: 1.55; color: var(--body); }
.blast-card.hot .blast-k { color: var(--amber); }

.residual { padding-top: 104px; }
.residual .kicker { display: block; margin-bottom: 10px; }
.residual .section-head { margin-bottom: 18px; max-width: 640px; }
.risk-list { display: flex; flex-direction: column; gap: 28px; }
.risk-head { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: baseline; margin-bottom: 8px; }
.risk-n { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.risk-head h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.risk p { font-size: 14.5px; line-height: 1.65; color: var(--body); text-wrap: pretty; padding-left: 48px; }
.risk p .status { vertical-align: baseline; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1000px) {
  .anno { grid-template-columns: 1fr; gap: 28px; }
  .anno-art { max-width: 560px; }
}
@media (max-width: 900px) {
  .cat-grid, .blast-grid { grid-template-columns: 1fr; gap: 32px; }
  .footprint-note-grid.four { grid-template-columns: 1fr; gap: 28px; }
  /* one column: the label sits above its own body and the spine moves to the
     step itself, so the rail stays continuous down the page */
  .turn-step {
    grid-template-columns: 1fr; gap: 0;
    padding-left: 22px; border-left: 1px solid var(--rule);
  }
  .turn-step:last-child { border-left-color: transparent; }
  .turn-who { text-align: left; padding-top: 0; margin-bottom: 8px; }
  .turn-body { border-left: 0; padding-left: 0; margin-left: 0; padding-bottom: 34px; }
  .turn-rail { left: -4.5px; top: 3px; }
  .risk p { padding-left: 0; }
  .risk-head { grid-template-columns: 26px 1fr; gap: 10px; }
}
@media (max-width: 620px) {
  .turnsec, .catalog, .anno-sec, .kept, .fourclaims, .blast, .residual { padding-top: 72px; }
}

/* ---------------------------------------------------------------------------
   Scenes — photographic composites, fenced.

   The site's diagrams and product fragments stay drawn; a scene is admitted
   only inside this component, which is the same mechanism .receipt-dark uses
   to import a foreign palette without contaminating the page. Three rules:
   no border, background, shadow or radius on the figure (the image brings its
   own soft shadows; chrome would make it the card the redesign removed); never
   render above the intrinsic width — these are 1× assets with 11px labels
   baked in, so 440px is the ceiling before the baked type goes soft beside
   crisp DOM text; and the alt text says "Illustration:" so what the page
   can't say in a caption is still said to anyone reading the markup.
   Placement and exclusions are recorded in
   docs/brand/design_handoff_kaddiya/README.md § Scenes. */
.scene { margin: 0; }
.scene img { display: block; width: 100%; height: auto; max-width: 440px; }
/* a page head that opens with a scene: copy left, scene right, baselines aligned */
.page-head.with-scene { display: grid; grid-template-columns: 1fr 440px; gap: 56px; align-items: end; }
.page-head.with-scene .scene { justify-self: end; }
@media (max-width: 1000px) {
  .page-head.with-scene { grid-template-columns: 1fr; gap: 32px; }
  .page-head.with-scene .scene { justify-self: start; }
}

/* ---------------------------------------------------------------------------
   Scenes, placed — /site/who, /site/how, /site/receipts.

   Appended, not merged into the .scene block above: three pages took their one
   scene at the same time as the homepage hero was being reworked, and two
   edits to one region of this file is how a stylesheet loses a rule.

   Only two things are needed beyond the component itself. A page head that
   carries a scene runs its headline a size down: the copy column is ~560px
   wide once the 440px figure is out of it, and the 46px h1 was drawn against
   the full 1120. And the catalog section opens with the same two-column row
   the page heads use — copy left, scene right — because "many proposals, one
   human" is the sentence the list underneath is making. */

.page-head.with-scene h1 { font-size: clamp(28px, 3.2vw, 40px); }

/* /site/how · the catalog's intro row */
.cat-intro {
  display: grid; grid-template-columns: 1fr 440px; gap: 56px;
  align-items: end; margin-bottom: 48px;
}
.cat-intro .scene { justify-self: end; }
.cat-intro .models-lead { margin-bottom: 0; }

@media (max-width: 1000px) {
  .cat-intro { grid-template-columns: 1fr; gap: 32px; margin-bottom: 40px; }
  .cat-intro .scene { justify-self: start; }
}

/* ---------------------------------------------------------------------------
   Homepage · the hero card stack, the two scenes, and the two beats lifted
   from the interior pages.

   The homepage used to be the whole site behind anchor links. It isn't any
   more: every nav item is its own page, nothing links into this page by
   anchor, and what survives here is a flavour of each argument with a
   .section-more link to the page that carries it. */

/* --- the hero stack ------------------------------------------------------- */

/* Same percentages as kdcycle, on the same --nc-cycle clock: the word and the
   card under it are one mechanism, not two things that happen to agree. The
   travel is shorter than the word's because a 412px card moving 12px reads as
   a lurch where a single word reads as a lift. */
@keyframes nccard {
  0%   { opacity: 0; transform: translateY(10px); }
  4%   { opacity: 1; transform: none; }
  29%  { opacity: 1; transform: none; }
  33%  { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 0; transform: translateY(-10px); }
}

.hero-card {
  /* All three in the one cell, so the stack is the tallest card's height and
     the beat change costs no layout. align-self keeps each card its own
     height inside that cell — stretched, the short draft-reply card would
     render 90px of empty dark surface under its own footer, and the head
     stays pinned at the same y across all three beats. */
  grid-area: 1 / 1; align-self: start;
  background: #121924; border: 1px solid #33415a; border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); overflow: hidden;
  opacity: 0;
  animation: nccard var(--nc-cycle) ease-in-out infinite;
  /* drawn product chrome, not controls: nothing here is focusable, and the
     two hidden cards must not intercept the pointer from the visible one */
  pointer-events: none;
}

/* the proposed-change and proposed-update-set cards · console §04, at hero
   scale. Labels are human words, every value is machine-measured, so every
   value is mono. */
.draft-fields {
  padding: 2px 15px 12px;
  display: grid; grid-template-columns: 74px minmax(0, 1fr);
  gap: 7px 14px; align-items: baseline;
}
.dfk { font-size: 11.5px; color: #5c6875; }
.dfv { font-family: var(--mono); font-size: 11.5px; color: #9fb0c3; }
.dscript {
  margin: 0 13px 13px; padding: 10px 11px;
  background: #0d131a; border-radius: 7px;
  /* 10px, not the console's 11.5px: this card is 412px against the console's
     560px, and every other value in it is reduced by roughly that ratio (badge
     9.5px, body 13px). At 11.5px the widest line of a real business rule runs
     past the card and the block starts scrolling sideways inside the hero. */
  font-family: var(--mono); font-size: 10px; line-height: 1.75; color: #a8b8c8;
  /* a script is not prose: it keeps its own line breaks and indentation, and
     scrolls rather than reflowing when the card is narrower than the code */
  white-space: pre; overflow-x: auto;
}
.dlist { margin: 0 13px 13px; padding: 4px 11px; background: #0d131a; border-radius: 7px; }
.dlrow {
  display: flex; gap: 7px; align-items: baseline; padding: 6px 0;
  font-family: var(--mono); font-size: 11px; line-height: 1.5;
}
.dlrow + .dlrow { border-top: 1px solid #161d27; }
.dlt { color: #8b98a9; flex-shrink: 0; }
.dlsep { color: #49535f; flex-shrink: 0; }
.dln { color: #a8b8c8; }

/* --- how it works · the scene beside the three steps ---------------------- */
.how-stage {
  display: grid; grid-template-columns: 440px minmax(0, 1fr);
  gap: 56px; align-items: start;
}
/* stacked, the three steps read as one list rather than three columns */
.how-stage .how-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }

/* --- what it doesn't do · lifted from /site/how --------------------------- */
.notdo {
  border-top: 1px solid var(--rule); margin-top: 56px; padding-top: 40px;
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px; align-items: start;
}
.notdo .kicker { display: block; margin-bottom: 10px; }
.notdo .section-head { margin-bottom: 14px; max-width: 560px; }
.notdo p { font-size: 15.5px; line-height: 1.65; color: var(--body); text-wrap: pretty; max-width: 620px; }
.notdo p + p { margin-top: 14px; }

/* --- three questionnaire answers · lifted from /site/security ------------- */
.qa { margin-top: 48px; }
.qa .kicker { display: block; margin-bottom: 14px; }
.qa-row {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px;
  border-top: 1px solid var(--rule); padding: 16px 0;
}
.qa-q { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.qa-a { font-size: 14.5px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.qa-a .status { vertical-align: baseline; }

/* --- the close · the scene, then the receipt it produces ------------------ */
.close-art { display: flex; flex-direction: column; }
.close-art .after-click { max-width: none; margin-left: 0; margin-top: 28px; }
@media (min-width: 1001px) {
  /* the right column is the scene's ceiling width, not a fraction — a 4fr
     column would have rendered the 708px asset at 364px for no reason */
  .close-grid { grid-template-columns: minmax(0, 1fr) 440px; }
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1000px) {
  .how-stage { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .how-stage .how-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .notdo { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .notdo .form-card { max-width: 420px; }
}
@media (max-width: 900px) {
  .how-stage .how-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .qa-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 620px) {
  /* the head is three chips and a state on a 335px card; let it wrap rather
     than push the state off the edge */
  .hero-card .draft-head { flex-wrap: wrap; }
  /* at this width the script can no longer scroll to be read — the card is
     not interactive — so it wraps instead, keeping its indentation. pre-wrap
     alone only breaks at spaces, and the longest line of real code has none
     after its indent, so it breaks mid-token like every other machine string
     on this site (.frag-query, .fv, .audit-line). */
  .dscript { white-space: pre-wrap; word-break: break-all; }
}

/* ---------------------------------------------------------------------------
   /site/compare — the redesign.

   The page used to open on a nine-row chart of paragraphs. It is still nine
   rows, but every cell is a phrase, not a sentence: a reader should never
   have to think to see which side they are on.

   Two primitives arrive with it:

   .lede-grid   a section head with its own standfirst beside it, so a section
                can say what it is for without a paragraph under the heading
                pushing the content another 80px down the page.
   .disclose    the source list, folded into the native element.

   Colour stays state: the only coloured things added here are the amber on the
   step that is pending and the green on the step that happened. */

/* --- a section head with its standfirst beside it ------------------------- */
.lede-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px; align-items: start; margin-bottom: 36px;
}
.lede-grid .kicker { display: block; margin-bottom: 10px; }
.lede-grid .section-head { max-width: 460px; margin-bottom: 0; }
.lede-note { font-size: 15.5px; line-height: 1.65; color: var(--body); max-width: 460px; text-wrap: pretty; }

/* --- nine questions · numbered rows, one line each ------------------------ */
.glance th[scope="row"] { width: 26%; font-size: 15px; }
.glance td { font-size: 16.5px; line-height: 1.5; padding-top: 16px; padding-bottom: 18px; }
.glance td.cmp-us { font-weight: 500; }
.glance .q-n { display: inline; margin-right: 12px; }
.glance th[scope="row"] { padding-top: 16px; padding-bottom: 18px; }
.q-n {
  display: block; font-family: var(--mono); font-size: 11px;
  font-weight: 400; color: var(--muted); margin-bottom: 6px;
}
/* --- the boundary, drawn -------------------------------------------------- */
.boundary { padding-top: 104px; }
.bound-panel { border: 1px solid var(--hairline); border-radius: 12px; padding: 28px 28px 8px; }
.bflow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.bstep {
  position: relative; border: 1px solid var(--rule); border-radius: 10px;
  padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 7px;
}
/* the arrow lives in the gap, not in the box */
.bstep + .bstep::before {
  content: '→'; position: absolute; left: -28px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono); font-size: 14px; color: var(--muted);
}
.bstep-n { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.bstep.pend .bstep-n { color: var(--amber); }
.bstep.done .bstep-n { color: var(--green); }
.bstep.done { border-color: rgba(19, 108, 67, 0.35); }
.bstep-t { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.bstep-b { font-size: 13.5px; line-height: 1.55; color: var(--body); text-wrap: pretty; }
.bstep-ctl { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.bctl-approve {
  font-size: 11.5px; font-weight: 600; color: #ffffff;
  background: var(--green); padding: 5px 12px; border-radius: 7px;
}
.bctl-discard { font-size: 11.5px; color: var(--muted); }

.surface { border-top: 1px solid var(--rule); margin-top: 36px; padding-top: 24px; }
.surface-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 20px;
}
.surface-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.surface-t { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.surface-b { font-size: 13.5px; line-height: 1.55; color: var(--body); text-wrap: pretty; }
.surface-e { font-size: 11.5px; color: var(--muted); margin-top: 10px; word-break: break-all; }
.surface-note {
  font-size: 14px; line-height: 1.65; color: var(--body);
  max-width: 780px; margin: 28px 0 20px; text-wrap: pretty;
}

/* --- bring your own model · three statuses, one line each ------------------ */
.chips {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px; margin-bottom: 40px;
}
.chip-item { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--rule); padding-top: 14px; }
.chip-t { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-wrap: pretty; }
.chip-b { font-size: 13.5px; line-height: 1.6; color: var(--body); text-wrap: pretty; }


/* --- seat by seat · the outcome, then one line a side --------------------- */
.seat-outcome { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 14px; text-wrap: balance; }
.seat-card .side { font-size: 14px; line-height: 1.55; color: var(--body); }
.seat-card .side + .side { margin-top: 10px; }
.seat-card .side.ours { color: var(--ink); }
.side-k { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }

/* --- the honest answer ---------------------------------------------------- */
.honest-item strong { color: var(--ink); font-weight: 600; }
/* drawn rather than a glyph, so it is the same green as .tick elsewhere and
   never a font's idea of a checkmark */
.honest-tick {
  width: 13px; height: 8px; flex-shrink: 0; margin-top: 7px;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

/* --- receipts · the source list, folded ----------------------------------- */
.disclose { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.disclose-sum {
  display: flex; align-items: center; gap: 9px; padding: 18px 0;
  font-size: 15px; font-weight: 500; color: var(--green); cursor: pointer;
  list-style: none;
}
.disclose-sum::-webkit-details-marker { display: none; }
.disclose-sum:hover { color: var(--green-hover); }
.disclose-count { font-family: var(--mono); font-size: 11px; color: var(--muted); font-weight: 400; }
.disclose-sign {
  width: 18px; height: 18px; border: 1px solid var(--rule); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; line-height: 1; color: var(--green);
}
.disclose-sign::before { content: '+'; }
.disclose[open] .disclose-sign::before { content: '–'; }
.disclose .sources-list { margin-top: 4px; margin-bottom: 24px; }
.sources .sources-note { margin-top: 24px; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1000px) {
  .bflow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
}
@media (max-width: 900px) {
  .lede-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .glance th[scope="row"] { width: auto; }
  .lede-grid .section-head, .lede-note { max-width: 620px; }
  /* the block layout the chart takes on small screens has to win over the
     table-row-group the toggle sets */
  .bflow { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* stacked, the arrow points down and sits in the gap above its own box */
  .bstep + .bstep::before { content: '↓'; left: 18px; top: -24px; transform: none; }
  .surface-grid, .chips { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 620px) {
  .boundary { padding-top: 72px; }
  .bound-panel { padding: 22px 20px 8px; }
}

/* ---------------------------------------------------------------------------
   Bands — the two non-white grounds, and the only two.

   The site was pure white on one ground, with dark used only inside product
   fragments. /site/compare adds two full-bleed sections, each because the
   ground is carrying meaning rather than decorating a section:

   .band-dark  BRING YOUR OWN MODEL. The model layer is machine plumbing —
               endpoints, keys, gateways — so it takes the product ground and,
               with it, the product palette verbatim: #4cc38a and #d9a13b, not
               the site's #136c43 and #b07a1e. That swap is the handoff rule
               ("never use a dark-surface value on the site, or a site value on
               a product surface") applied honestly, not an exception to it.
   .band-warm  THE HONEST ANSWER. The one section on the site that argues for
               the other product. It is set apart because it is a different
               kind of claim, and the ground says so before the heading does.
               It is a ground, not a signal: green and amber keep their jobs
               inside it, and no other section may take a tint to look nice.

   A band is a full-bleed wrapper around a .wrap section, so the section keeps
   its own max-width and gutters. Section top padding moves to the band. */

.band { padding: 96px 0; }
.band > .wrap { padding-top: 0; }
.band-dark { background: #0d1117; margin-top: 104px; }
.band-warm { background: var(--warm); margin-top: 104px; }

/* --- inside the dark band: the product palette, verbatim ------------------ */
.band-dark .section-head, .band-dark .chip-t { color: #dde5ee; }
.band-dark .kicker, .band-dark .surface-label { color: #8b98a9; }
.band-dark .lede-note, .band-dark .chip-b { color: #b7c2d0; }
.band-dark .chip-item, .band-dark .ruled { border-top-color: #223041; }
.band-dark .cmp tbody tr > * { border-top-color: #1a212b; }
.band-dark .cmp thead th { color: #5c6875; }
.band-dark .cmp thead th.cmp-us { color: #dde5ee; }
.band-dark .cmp th[scope="row"] { color: #dde5ee; }
.band-dark .cmp td { color: #b7c2d0; }
.band-dark .cmp td.cmp-us { color: #cfd9e4; }
.band-dark .mono { color: #a8b8c8; }
.band-dark a { color: var(--green-dark); }
.band-dark a:hover { color: #5fd29b; }
.band-dark .cite { color: var(--green-dark); }
.band-dark .status.on { color: var(--green-dark); }
.band-dark .status.on::before { background: var(--green-dark); }
.band-dark .status.pending { color: var(--amber-dark); }
.band-dark .status.pending::before { background: var(--amber-dark); }
.band-dark .status-caveat { color: #5c6875; }
/* the mobile cell tag is a label on a dark surface like any other */
.band-dark .cell-tag { color: #5c6875; }

/* --- inside the warm band: ink and body unchanged, rules warmed ----------- */
.band-warm .ruled, .band-warm .depth { border-top-color: var(--warm-rule); }
.band-warm .honest-note { color: var(--body); }

@media (max-width: 620px) {
  .band { padding: 72px 0; }
  .band-dark, .band-warm { margin-top: 72px; }
}

/* ===========================================================================
   /site/try — the developer-instance path. Reuses the setup page's step,
   form, env and identity artifacts; only the pieces below are new.
   ========================================================================= */
.where-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.paths .where-card p { font-size: 15px; }
.textlink.inline { display: inline; font-size: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.textlink.inline:hover { text-decoration-color: var(--green); }
.step-copy .mono { font-size: 13.5px; color: var(--ink); }

/* 03 · the commands, under the .env */
.cmd-card { background: #0d1117; border-radius: 12px; padding: 12px 18px 14px; margin-top: 10px; }
.cmd-line { display: flex; gap: 10px; padding: 5px 0; font-family: var(--mono); font-size: 12px; }
.cmd-prompt { color: #49535f; flex-shrink: 0; width: 10px; }
.cmd { color: #a8b8c8; }
.cmd.muted { color: #8b98a9; }

.trial .honest-item strong { color: var(--ink); font-weight: 600; }
.buy .cost-grid { padding-top: 56px; }
.after-row + .after-row { margin-top: 8px; }

@media (max-width: 900px) {
  .where-grid.two { grid-template-columns: 1fr; gap: 28px; }
}