:root {
  --bg: #0A0A0C;
  --bg-soft: #101014;
  --ink: #F2F1EE;
  --muted: #9C978F;
  --hairline: rgba(255,255,255,.10);
  --glass: rgba(255,255,255,.045);
  --glass-border: rgba(255,255,255,.10);
  --accent: #E4A244;
  --accent-ink: #1A1206;
  --good: #30D158;
  --cost: #D2755C;
  --glow-a: rgba(228,162,68,.15);
  --glow-b: rgba(150,90,30,.11);
  --term-bg: #131317;
  --term-ink: #E6E3DD;
  --term-dim: #7E7A73;
  --shadow: 0 24px 60px -24px rgba(0,0,0,.8);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--body); line-height: 1.55; font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1020px; margin: 0 auto; padding: 0 24px; position: relative; }

/* ambient glow behind the glass */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient i { position: absolute; border-radius: 50%; filter: blur(90px); }
.ambient .a { width: 640px; height: 640px; top: -220px; left: 50%; transform: translateX(-70%); background: var(--glow-a); }
.ambient .b { width: 520px; height: 520px; top: 60px; left: 55%; background: var(--glow-b); }

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
}

/* ---------- masthead ---------- */
nav { display: flex; align-items: center; padding: 32px 0 20px; position: relative; }
nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg,
    rgba(228,162,68,.65) 0%,
    rgba(228,162,68,.22) 18%,
    rgba(255,255,255,.10) 42%,
    rgba(255,255,255,.045) 72%,
    transparent 100%);
}
.mark {
  display: inline-flex; align-items: center; gap: clamp(12px, 1.6vw, 17px);
  text-decoration: none; color: inherit;
}
.mark img {
  width: clamp(34px, 4.4vw, 44px); height: clamp(34px, 4.4vw, 44px);
  border-radius: 10px; display: block;
}
.mark .name {
  font-size: clamp(21px, 2.9vw, 30px); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; line-height: 1; color: var(--ink);
}

/* ---------- hero ---------- */
.hero { text-align: center; padding: 66px 0 28px; }
.eyebrow {
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
  color: var(--accent); margin: 0 0 14px;
}
h1 {
  font-size: clamp(38px, 6.4vw, 64px); font-weight: 700;
  letter-spacing: -.028em; line-height: 1.06; margin: 0 auto 20px;
  max-width: 17ch; text-wrap: balance;
}
.sub {
  color: var(--muted); font-size: clamp(18px, 2.4vw, 21px);
  margin: 0 auto 32px; max-width: 44ch; text-wrap: balance;
}
.hero-terms {
  font-size: 14px; color: var(--muted); letter-spacing: .04em;
  margin: 0; text-wrap: balance;
}
.demo-dl {
  margin: 26px auto 0; max-width: 52ch;
  padding: 16px 20px; border-radius: 14px;
  border: 1px solid var(--glass-border); background: var(--glass);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.demo-dl a {
  color: var(--accent); font-weight: 600; font-size: 16px;
  text-decoration: none; border-bottom: 1px solid rgba(228,162,68,.4);
}
.demo-dl a:hover { border-bottom-color: var(--accent); }
.demo-dl p { margin: 0; font-size: 13.5px; color: var(--muted); text-wrap: balance; }
.demo-dl code { font-family: var(--mono); font-size: 12.5px; color: var(--term-dim); }
.cta {
  display: inline-block; background: var(--accent); color: var(--accent-ink);
  font-size: 17px; font-weight: 600; padding: 13px 28px; border-radius: 980px;
  text-decoration: none; cursor: pointer;
}
.cta:hover { filter: brightness(1.07); }
.cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* A CTA inside a .prose block loses its text. `.prose a` (one class + one
   element) outranks `.cta` (one class), so the label is repainted --accent —
   the button's own background — and the pill goes blank. Measured on
   /pricing, where it was the last thing a buyer saw before the footer.
   Fixed here rather than on the one anchor, so the next CTA dropped into
   prose does not have to rediscover it. */
.prose .cta { color: var(--accent-ink); }

/* ---------- video player ---------- */
.player { position: relative; width: 100%; max-width: 900px; margin: 0 auto; }
.tour {
  display: block; width: 100%;
  border-radius: 16px; border: 1px solid var(--hairline);
  box-shadow: var(--shadow); background: #000;
}
.playbtn {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: radial-gradient(ellipse at center, rgba(10,10,12,.52), rgba(10,10,12,.78));
  border: 1px solid var(--hairline); border-radius: 16px;
  color: var(--ink); font-family: inherit; cursor: pointer;
  transition: background .2s ease;
}
.playbtn:hover { background: radial-gradient(ellipse at center, rgba(10,10,12,.38), rgba(10,10,12,.68)); }
.playbtn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.playbtn .disc {
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center;
  box-shadow: 0 14px 40px -12px rgba(0,0,0,.85);
  transition: transform .2s ease;
}
.playbtn:hover .disc { transform: scale(1.06); }
.playbtn .disc svg { margin-left: 4px; display: block; }
.playbtn .label {
  font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink); text-shadow: 0 1px 12px rgba(0,0,0,.9);
}
.player.playing .playbtn { display: none; }
@media (prefers-reduced-motion: reduce) {
  .playbtn, .playbtn .disc { transition: none; }
  .playbtn:hover .disc { transform: none; }
}

/* ---------- terminal as product shot ---------- */
.stage { padding: 40px 0 66px; position: relative; }
.term {
  max-width: 720px; margin: 0 auto;
  background: var(--term-bg);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px; overflow: hidden; box-shadow: var(--shadow);
}
.term-bar { display: flex; gap: 8px; padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.term-bar span { width: 12px; height: 12px; border-radius: 50%; }
.term-bar span:nth-child(1) { background: #FF5F57; }
.term-bar span:nth-child(2) { background: #FEBC2E; }
.term-bar span:nth-child(3) { background: #28C840; }
.term-body {
  font-family: var(--mono); font-size: 13px; line-height: 1.75;
  color: var(--term-ink); padding: 18px 22px 24px; margin: 0;
  overflow-x: auto; min-height: 22em; white-space: pre; text-align: left;
}
.term-body .d { color: var(--term-dim); }
.term-body .g { color: #32D74B; }
.term-body .o { color: #E4A244; font-weight: 700; }
.cursor {
  display: inline-block; width: .6em; height: 1.1em; background: var(--term-ink);
  vertical-align: text-bottom; animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }
.stage-caption { text-align: center; color: var(--muted); font-size: 13px; margin-top: 16px; }

/* ---------- sections ---------- */
section { padding: 54px 0; }
h2 {
  font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -.022em;
  line-height: 1.12; margin: 0 0 10px; text-wrap: balance;
}
.kicker { color: var(--muted); font-size: 18px; margin: 0 0 40px; max-width: 60ch; }
.center h2, .center .kicker { margin-left: auto; margin-right: auto; text-align: center; }

/* five jobs table */
.table-card { padding: 8px 26px; overflow-x: auto; }
.pain { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 640px; }
.pain th, .pain td { text-align: left; padding: 15px 16px 15px 0; vertical-align: top; }
.pain th {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--hairline);
}
.pain td { border-bottom: 1px solid var(--hairline); }
.pain tr:last-child td { border-bottom: none; }
.pain td:first-child { font-weight: 600; white-space: nowrap; }
.pain .no { color: var(--muted); }
.pain .yes { color: var(--good); font-weight: 600; }

/* inside */
.inside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: start; }
@media (max-width: 880px) { .inside { grid-template-columns: 1fr; } }
.tree {
  font-family: var(--mono); font-size: 13px; line-height: 1.8;
  padding: 22px 24px; margin: 0; overflow-x: auto; white-space: pre;
}
.tree .c { color: var(--muted); }
.tree .hl { color: var(--accent); font-weight: 700; }
.inside-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.inside-list strong { font-size: 16px; display: block; margin-bottom: 3px; letter-spacing: -.01em; }
.inside-list strong code { font-family: var(--mono); font-size: 14.5px; }
.inside-list span { color: var(--muted); font-size: 15.5px; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.stat { padding: 28px 26px; }
.stat b {
  font-size: 40px; font-weight: 700; letter-spacing: -.03em;
  display: block; margin-bottom: 8px; font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, #F2B45C, #C07E2A);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { color: var(--muted); font-size: 14.5px; line-height: 1.5; display: block; }
.measured { text-align: center; color: var(--muted); font-size: 13px; margin-top: 22px; }

/* cost ledger: what it cost us vs. what it costs you */
.ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; text-align: left; }
@media (max-width: 820px) { .ledger { grid-template-columns: 1fr; } }
.led { padding: 30px 28px; display: flex; flex-direction: column; }
.led h3 {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 0 0 16px;
}
.led .lead {
  font-size: clamp(36px, 5vw, 46px); font-weight: 700; letter-spacing: -.03em; line-height: 1;
  display: block; font-variant-numeric: tabular-nums; margin-bottom: 8px;
}
.led.cost .lead { color: var(--cost); }
.led.kit .lead {
  background: linear-gradient(120deg, #F2B45C, #C07E2A);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.led .lead-note { color: var(--muted); font-size: 14.5px; display: block; margin-bottom: 20px; }
.led ul {
  list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 14px;
}
.led li { display: flex; gap: 13px; align-items: baseline; font-size: 15px; color: var(--muted); }
.led li b {
  font-family: var(--mono); font-size: 14px; font-weight: 700; white-space: nowrap;
  min-width: 2.6em; font-variant-numeric: tabular-nums;
}
.led.cost li b { color: var(--cost); }
.led.kit li b { color: var(--good); }

/* maintenance: the part you can't build once */
.maint { padding: 34px 32px; max-width: 730px; margin: 0 auto; text-align: left; }
.maint p { margin: 0 0 14px; font-size: 16.5px; color: var(--muted); }
.maint .vs {
  font-size: clamp(17px, 2.2vw, 20px); color: var(--ink); font-weight: 600; letter-spacing: -.012em;
  border-left: 2px solid var(--cost); padding-left: 17px; margin: 20px 0; line-height: 1.4;
}
.maint .note { font-size: 14px; margin: 0; }

/* traps */
.traps { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.trap { padding: 26px; }
.trap h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 10px; line-height: 1.35; }
.trap p { margin: 0; color: var(--muted); font-size: 15px; }
.trap code {
  font-family: var(--mono); font-size: 12.5px;
  background: rgba(120, 120, 128, .16); border-radius: 5px; padding: 2px 6px;
}

/* pricing */
.price-box {
  max-width: 640px; margin: 0 auto; padding: 44px 40px; text-align: center;
}
.price-big { font-size: 56px; font-weight: 700; letter-spacing: -.03em; margin: 0 0 2px; }
.price-big small { font-size: 17px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.price-points {
  list-style: none; margin: 18px auto 30px; padding: 0;
  color: var(--muted); font-size: 15.5px; max-width: 40ch; text-align: left;
}
.price-points li { padding-left: 26px; position: relative; margin-bottom: 8px; }
.price-points li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 700; }

/* faq */
.faq { max-width: 680px; margin: 0 auto; }
.faq details { border-top: 1px solid var(--hairline); }
.faq details:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: 16px; padding: 18px 4px; font-weight: 600; font-size: 16.5px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 22px; font-weight: 400; color: var(--muted);
  transition: transform .18s ease; line-height: 1;
}
.faq details[open] summary::after { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }
.faq .a { color: var(--muted); font-size: 15.5px; padding: 0 4px 20px; max-width: 60ch; }
.faq .a code { font-family: var(--mono); font-size: 13px; background: rgba(120,120,128,.16); border-radius: 5px; padding: 1px 5px; }

.price-diff { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 18px; }
.price-note { font-size: 13px; color: var(--muted); margin: 18px auto 0; max-width: 44ch; }

footer {
  padding: 40px 0 56px; text-align: center; color: var(--muted); font-size: 14px;
  display: flex; flex-direction: column; gap: 6px;
}

/* ==========================================================================
   Multi-page chrome. Added 2026-09-04, when the site stopped being one page.
   Everything above this line came from the original index.html unchanged.
   ========================================================================== */

/* ---------- masthead with navigation ----------
   nav was a bare logo row while the site was a single page. It now has to
   carry the route list and, more importantly, the price: the measured leak
   was that 94% of visitors who downloaded the sample never reached the buy
   button at the bottom of the page. A CTA in the masthead makes the price
   reachable from every screenful instead of only the last one. */
nav { gap: 24px; flex-wrap: wrap; }
.nav-links {
  display: flex; align-items: center; gap: clamp(14px, 2.2vw, 26px);
  margin-left: auto; list-style: none; padding: 0;
}
.nav-links a {
  color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500;
  white-space: nowrap; padding: 4px 0; border-bottom: 1px solid transparent;
}
.nav-links a:hover { color: var(--ink); }
/* aria-current marks the page you are on; the underline is the only styling
   that depends on it, so a missing attribute degrades to a normal link. */
.nav-links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.nav-cta {
  background: var(--accent); color: var(--accent-ink) !important;
  padding: 8px 17px !important; border-radius: 980px; font-weight: 600;
  border-bottom: none !important;
}
.nav-cta:hover { filter: brightness(1.07); }
@media (max-width: 720px) {
  nav { padding-bottom: 16px; }
  .nav-links { width: 100%; margin-left: 0; justify-content: space-between; gap: 12px; }
  .nav-links a { font-size: 14px; }
}

/* ---------- page header, for every page that is not the home page ---------- */
.page-head { padding: 54px 0 8px; max-width: 62ch; }
.page-head h1 {
  font-size: clamp(32px, 5vw, 48px); margin: 0 0 14px; max-width: none; text-align: left;
}
.page-head .lede { color: var(--muted); font-size: clamp(17px, 2.2vw, 20px); margin: 0; }
.page-head .eyebrow { text-align: left; }

/* ---------- long-form prose: docs, legal, about, changelog ---------- */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(22px, 3vw, 28px); margin: 44px 0 12px; }
.prose h3 { font-size: 18px; font-weight: 600; margin: 30px 0 8px; letter-spacing: -.01em; }
.prose p, .prose li { color: var(--muted); font-size: 16.5px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 9px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent); }
.prose code {
  font-family: var(--mono); font-size: 13.5px;
  background: rgba(120,120,128,.16); border-radius: 5px; padding: 2px 6px;
}
.prose pre {
  font-family: var(--mono); font-size: 13px; line-height: 1.7;
  background: var(--term-bg); border: 1px solid var(--hairline);
  border-radius: 12px; padding: 18px 20px; overflow-x: auto; margin: 0 0 18px;
}
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose hr { border: none; border-top: 1px solid var(--hairline); margin: 40px 0; }

/* ---------- changelog ----------
   The site claims the pipeline is kept current as Apple moves. That claim was
   asserted and never evidenced. A dated list is the evidence, so it gets a
   layout that makes the dates scannable rather than burying them in prose. */
.release { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 26px; padding: 26px 0; border-top: 1px solid var(--hairline); }
.release:last-child { border-bottom: 1px solid var(--hairline); }
@media (max-width: 700px) { .release { grid-template-columns: 1fr; gap: 10px; } }
.release .when { color: var(--muted); font-size: 14px; font-family: var(--mono); padding-top: 3px; }
.release .when b { display: block; color: var(--ink); font-size: 16px; font-family: var(--body); letter-spacing: -.01em; margin-bottom: 3px; }
.release ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.release li { color: var(--muted); font-size: 15.5px; padding-left: 18px; position: relative; }
.release li::before { content: "·"; position: absolute; left: 4px; color: var(--accent); font-weight: 700; }

/* ---------- footer with a route list ---------- */
footer { border-top: 1px solid var(--hairline); margin-top: 20px; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-bottom: 10px; }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }

/* ---------- hero: two doors ----------
   The primary button is the price and the secondary is the free sample. Both
   are above the fold; neither is hidden behind the other. */
.hero-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 22px; margin: 30px 0 0;
}
.cta-ghost {
  color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 600;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.22);
}
.cta-ghost:hover { border-bottom-color: var(--accent); color: var(--accent); }
.cta-ghost:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hero-note {
  color: var(--muted); font-size: 14px; margin: 18px auto 0;
  max-width: 50ch; text-wrap: balance;
}

/* ---------- reading column alignment ----------
   .prose sits on the same element as .wrap, and .wrap centres a 1020px column.
   Two wrong fixes were tried before this one and both are worth naming:
   narrowing the container lets .wrap's margin:0 auto centre the whole text
   block, sliding it ~145px right of the page head above it; pinning the
   container left with margin-left:0 slams it against the viewport edge while
   the nav and head stay in the centred column. The column is not the thing to
   change. Keep .wrap's geometry so every page shares one left edge, and put
   the reading measure on the children instead. */
.wrap.prose { max-width: 1020px; }
.wrap.prose > * { max-width: 68ch; }
.wrap.prose .faq { margin-left: 0; max-width: 68ch; }

/* ---------- fit block: who this is for, and who it is not ----------
   Added 2026-09-04 from the 2026-09-01 cold reading, whose heaviest finding was
   that a visitor could read the whole page and still not know whether the kit
   applied to them: the four hard constraints (Swift/SwiftUI, macOS 13+, the
   licence provider, no sandboxed variant) were reachable only by scrolling into
   the FAQ. A reader who does not fit should find that out here rather than
   after paying, and a reader who does fit should get the sentence that says so. */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; }
@media (max-width: 820px) { .fit { grid-template-columns: 1fr; } }
.fit-card { padding: 30px 28px; }
.fit-card h3 {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; margin: 0 0 18px;
}
.fit-card.yes h3 { color: var(--good); }
.fit-card.no h3 { color: var(--cost); }
.fit-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.fit-card li {
  color: var(--muted); font-size: 15.5px; line-height: 1.5;
  padding-left: 26px; position: relative;
}
.fit-card li::before { position: absolute; left: 0; font-weight: 700; }
.fit-card.yes li::before { content: "✓"; color: var(--good); }
.fit-card.no li::before { content: "✕"; color: var(--cost); }
.fit-card li b { color: var(--ink); font-weight: 600; }
.fit-note {
  color: var(--muted); font-size: 14.5px; margin: 24px auto 0;
  max-width: 68ch; text-align: left;
}
.fit-note code { font-family: var(--mono); font-size: 13px; background: rgba(120,120,128,.16); border-radius: 5px; padding: 2px 6px; }

/* ---------- named checks ----------
   Added 2026-09-04 from the 2026-09-01 cold reading, third finding: the page
   sold "35 checks" as its most valuable asset and presented it as a bare
   number. The reader's words were that being shown even one would make the
   claim concrete, and that as written they were being asked to trust a count.
   Deliberately not the .traps three-card grid, which sits directly above it:
   the traps are what we walked into, these are what the scripts do about it,
   and two identical grids in a row would read as one repeated section. */
.checks { border-top: 1px solid var(--hairline); text-align: left; }
.check {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px;
  padding: 26px 0; border-bottom: 1px solid var(--hairline);
}
@media (max-width: 760px) { .check { grid-template-columns: 1fr; gap: 10px; } }
.check .what {
  font-family: var(--mono); font-size: 13px; line-height: 1.6;
  color: var(--accent); padding-top: 2px;
}
.check .what b { display: block; color: var(--ink); font-size: 15px; font-family: var(--body); font-weight: 600; letter-spacing: -.01em; margin-bottom: 6px; }
.check p { margin: 0 0 10px; color: var(--muted); font-size: 15.5px; }
.check p:last-child { margin-bottom: 0; }
.check .cost { color: var(--cost); font-weight: 600; }
.check code { font-family: var(--mono); font-size: 12.5px; background: rgba(120,120,128,.16); border-radius: 5px; padding: 2px 6px; }

/* ---------- /check page layout ----------
   Rebuilt 2026-09-04 (second pass). The first version put three different left
   edges on one page: the heading at the .wrap padding edge, the steps ~190px
   inside it, and the transcript somewhere between. Cause was the same trap
   .prose hit earlier, .wrap's margin:0 auto centring a narrower max-width
   inside it. One left edge for everything now, and the only element allowed a
   different width is the transcript, which is monospace and needs the columns. */
.doc { max-width: 1020px; }
.doc > * { max-width: 70ch; }
.doc > .wide { max-width: 860px; }

/* ---------- run steps ----------
   Was a two-column grid with the number alone in a 26px gutter, which read as
   an empty margin with a stray digit in it. The number now sits on the step's
   own title line, so each step is one block with a scannable heading. */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps > li { counter-increment: step; padding: 26px 0; border-top: 1px solid var(--hairline); }
.steps > li:last-child { border-bottom: 1px solid var(--hairline); }
.steps h3 {
  display: flex; align-items: center; gap: 12px;
  font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 10px;
}
.steps h3::before {
  content: counter(step);
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--accent-ink); background: var(--accent);
}
.steps p { margin: 0 0 14px; color: var(--muted); font-size: 15.5px; max-width: 66ch; }
.steps p:last-child { margin-bottom: 0; }
.steps pre {
  font-family: var(--mono); font-size: 13px; line-height: 1.75; margin: 0;
  background: var(--term-bg); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 14px 17px; overflow-x: auto; color: var(--term-ink);
}
.steps pre .c { color: var(--term-dim); }
.steps code { font-family: var(--mono); font-size: 13px; background: rgba(120,120,128,.16); border-radius: 5px; padding: 2px 6px; }

/* ---------- sample output ----------
   The tool's real output, shown as the terminal it came from. Fixed line
   colours rather than semantic ones: this is a transcript, not a live state. */
.transcript {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.75;
  background: var(--term-bg); border: 1px solid var(--hairline);
  border-radius: 14px; padding: 22px 24px; overflow-x: auto;
  white-space: pre; color: var(--term-ink); margin: 0;
  box-shadow: var(--shadow);
}
.transcript .ok   { color: var(--good); }
.transcript .bad  { color: #FF6B5A; font-weight: 700; }
.transcript .dim  { color: var(--term-dim); }
.transcript .head { color: var(--ink); font-weight: 700; }
.caption { color: var(--muted); font-size: 13px; margin: 14px 0 0; }

/* ---------- what it checks ----------
   Was three <ul>s of long disc-bulleted sentences, which is the shape the
   reader has to work hardest to scan. Each item now leads with the thing being
   checked, and the marker is a rule in the gutter rather than a dot. */
.checklist { list-style: none; margin: 0 0 6px; padding: 0; }
.checklist li {
  position: relative; padding: 0 0 0 22px; margin-bottom: 14px;
  color: var(--muted); font-size: 15.5px; line-height: 1.55;
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .66em;
  width: 9px; height: 1px; background: var(--accent); opacity: .8;
}
.checklist li b, .checklist li strong { color: var(--ink); font-weight: 600; }
.group { margin: 0 0 34px; }
.group:last-child { margin-bottom: 0; }
.group h3 {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 0 0 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--hairline);
}

/* ---------- confession: the bug the tool found in our own app ----------
   Deliberately the loudest block on the page. It is the only evidence here
   that cost us something, which is exactly what makes it worth more than the
   feature list above it. */
.confess {
  max-width: 68ch; padding: 32px 34px; border-radius: 18px;
  background: rgba(210, 117, 92, .07);
  border: 1px solid rgba(210, 117, 92, .34);
}
.confess h2 { margin: 0 0 14px; font-size: clamp(22px, 3vw, 28px); }
.confess p { color: var(--muted); font-size: 16px; margin: 0 0 14px; }
.confess p:last-child { margin-bottom: 0; }
.confess strong { color: var(--ink); }
.confess code { font-family: var(--mono); font-size: 13px; background: rgba(120,120,128,.2); border-radius: 5px; padding: 2px 6px; }

/* Label over the sample output. The transcript is what step 3 produces, so it
   needs to read as that step's result rather than as a new section. */
.out-label {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 0 0 14px;
}

/* A flag or filename broken across two lines stops being copyable by eye.
   These tokens are short, so nowrap costs no horizontal overflow. */
.steps code, .checklist code { white-space: nowrap; }