/* ─────────────────────────────────────────────────────────────────────────────────────
   good-spring.com — the shared chassis.

   One design template across the apex and every sibling page (/diagnostic,
   /reconciliation, /about, /faq): the D-32 scale-led system, ruled 2026-08-23 and applied
   to the apex as Home v4. Lifted out of index.html verbatim on 2026-09-10 (owner: "it has
   to be the same design template") so a page is a link tag rather than a copy-paste, and
   so a token edited here reaches every page at once — D-26's one experience, enforced by
   the file rather than by remembering.

   Page-specific CSS stays inline in its own page. Rules for elements a page does not have
   (the cover's crawl canvas, the readout card, the document figure) simply never match.

   Budget, carried from D-32: transforms and opacity only (CLS 0), prefers-reduced-motion
   honored everywhere, one font file, no libraries, no external requests.
   ───────────────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Manrope';
  src: url('Manrope-var.ttf') format('truetype');
  font-weight: 200 800; font-display: swap;
}



  /* ── Tokens: byte-identical to the sibling pages (D-26 one-experience), plus the cover's
     committed dark-green world and a few values derived from them. Every color on the page
     resolves through these. ─────────────────────────────────────────────────────────── */
  :root {
    color-scheme: light;
    --ink: #16181d; --muted: #4f5762; --faint: #6f757f; --line: #e4e7eb;
    --paper: #ffffff; --plane: #f7f8f7; --accent: #0d5c4d; --accent-ink: #ffffff;
    --code-bg: #f2f4f3;
    --accent-soft: rgba(13, 92, 77, .09);
    --accent-line: rgba(13, 92, 77, .28);
    --bar-bg: rgba(255, 255, 255, .94); --bar-line: #d9dde2;
    /* The cover is the same world in both themes: deep green ground, mint light. */
    --cover-bg: #10221c; --cover-bg-2: #163229; --cover-ink: #f2f3f2; --cover-muted: #aeb6c0;
    --cover-faint: #7d858f; --cover-line: rgba(242, 243, 242, .14); --mint: #4fbf9f;
    --mint-soft: rgba(79, 191, 159, .16); --closed: #6e8078;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --pad: clamp(20px, 5vw, 72px);
  }
  @media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
      color-scheme: dark;
      --ink: #f2f3f2; --muted: #aeb6c0; --faint: #7d858f; --line: #2a2e33;
      --paper: #16181a; --plane: #0f1112; --accent: #4fbf9f; --accent-ink: #0b1a16;
      --code-bg: #1d2124;
      --accent-soft: rgba(79, 191, 159, .12); --accent-line: rgba(79, 191, 159, .32);
      --bar-bg: rgba(38, 43, 47, .94); --bar-line: #3d444b;
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #f2f3f2; --muted: #aeb6c0; --faint: #7d858f; --line: #2a2e33;
    --paper: #16181a; --plane: #0f1112; --accent: #4fbf9f; --accent-ink: #0b1a16;
    --code-bg: #1d2124;
    --accent-soft: rgba(79, 191, 159, .12); --accent-line: rgba(79, 191, 159, .32);
    --bar-bg: rgba(38, 43, 47, .94); --bar-line: #3d444b;
  }

  * { box-sizing: border-box; margin: 0; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    font-family: 'Manrope', -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    color: var(--ink); background: var(--paper);
    line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  a { color: var(--accent); }
  a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  code { font-family: var(--mono); font-size: .86em; background: var(--code-bg); padding: 2px 6px; border-radius: 4px; }
  ::selection { background: var(--accent); color: var(--accent-ink); }

  /* ── Type scale ───────────────────────────────────────────────────────────────────── */
  .eyebrow {
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--accent);
  }
  .lead-in {
    font-size: clamp(21px, 2.3vw, 30px); font-weight: 640; line-height: 1.18; letter-spacing: -0.02em;
    color: var(--ink); max-width: 24ch; text-wrap: balance;
  }
  p { color: var(--muted); font-size: 16.5px; }
  p + p { margin-top: 14px; }
  strong { color: var(--ink); font-weight: 680; }
  .prose { max-width: 60ch; }

  /* ── The cover ────────────────────────────────────────────────────────────────────── */
  .cover {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--cover-bg);
    background-image: radial-gradient(120% 90% at 78% 40%, var(--cover-bg-2) 0%, var(--cover-bg) 62%);
    color: var(--cover-ink);
    min-height: clamp(640px, 94svh, 940px);
    display: flex; flex-direction: column;
  }
  .cover canvas#field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

  /* The wing, at scale, as three layers of the same mark drifting in and out of register —
     the misregistration motif applied to the mark itself. Transform/opacity only. */
  /* The wing at full scale, behind the copy, 30%, cut darker than the ground. A soft banded mask travels along the feather
     lines so the wing's stripes reveal and hide (mask-position only; no layout). */
  .cover-wing {
    position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: .3;
    -webkit-mask-image: repeating-linear-gradient(-34deg, rgba(0,0,0,.38) 0 3%, #000 7% 12%, rgba(0,0,0,.38) 16% 19%);
            mask-image: repeating-linear-gradient(-34deg, rgba(0,0,0,.38) 0 3%, #000 7% 12%, rgba(0,0,0,.38) 16% 19%);
    -webkit-mask-size: 200% 200%; mask-size: 200% 200%;
  }
  .cover-wing svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #03100b; }
  @media (prefers-reduced-motion: no-preference) {
    .cover-wing { animation: wingmask 16s linear infinite alternate; }
    @keyframes wingmask { from { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; } to { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; } }
  }

  .top { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 26px var(--pad) 0; }
  .brand a { display: block; color: var(--cover-ink); text-decoration: none; line-height: 0; }
  .brand .wordmark { display: block; height: 46px; width: auto; fill: currentColor; }
  @media (max-width: 720px) { .brand .wordmark { height: 38px; } }
  /* Masthead mark: the wing draws itself on with a diagonal sweep, the letters follow. On hover
     an accent ghost of the mark slips out of register and snaps back. */
  .brand .wm { position: relative; display: block; line-height: 0; }
  .brand .wm .ghost { position: absolute; inset: 0; fill: var(--mint); opacity: 0; pointer-events: none; transition: transform .38s cubic-bezier(.2,.9,.25,1), opacity .38s ease; }
  .brand a:hover .wm .ghost, .brand a:focus-visible .wm .ghost { opacity: .55; transform: translate(-3px, -2px); }
  @media (prefers-reduced-motion: no-preference) {
    .brand .wm .wing { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); animation: wingdraw 1.05s cubic-bezier(.3,.8,.2,1) .1s forwards; }
    @keyframes wingdraw { to { clip-path: polygon(0 0, 130% 0, 100% 100%, -30% 100%); } }
    @keyframes fadein { to { opacity: 1; } }
    /* The letters arrive one at a time, left to right, all in by 300ms. The symbol's paths run
       right to left in the DOM (last g first), so the delays count down. */
    #gs-letters path { opacity: 0; animation: letterin .12s ease-out forwards; }
    #gs-letters path:nth-child(10) { animation-delay: 0ms; }   #gs-letters path:nth-child(9) { animation-delay: 20ms; }
    #gs-letters path:nth-child(8) { animation-delay: 40ms; }   #gs-letters path:nth-child(7) { animation-delay: 60ms; }
    #gs-letters path:nth-child(6) { animation-delay: 80ms; }   #gs-letters path:nth-child(5) { animation-delay: 100ms; }
    #gs-letters path:nth-child(4) { animation-delay: 120ms; }  #gs-letters path:nth-child(3) { animation-delay: 140ms; }
    #gs-letters path:nth-child(2) { animation-delay: 160ms; }  #gs-letters path:nth-child(1) { animation-delay: 180ms; }
    @keyframes letterin { to { opacity: 1; } }
  }
  nav.pages { display: flex; align-items: center; gap: 4px 20px; flex-wrap: wrap; font-size: 14px; font-weight: 520; }
  nav.pages a { color: var(--cover-muted); text-decoration: none; }
  nav.pages a:hover { color: var(--cover-ink); }
  nav.pages .navcta {
    color: var(--cover-ink); border: 1px solid var(--cover-line); padding: 8px 14px; border-radius: 6px;
    transition: border-color .2s ease, background .2s ease;
  }
  nav.pages .navcta:hover { border-color: var(--mint); background: var(--mint-soft); }

  .cover-grid {
    position: relative; z-index: 2; flex: 1; display: grid; align-content: center;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px;
    padding: clamp(40px, 7vh, 88px) var(--pad) clamp(36px, 6vh, 72px);
    max-width: 1440px; width: 100%; margin: 0 auto;
  }
  .cover-copy { max-width: 700px; }
  .cover h1 {
    font-size: clamp(30px, 4.2vw, 62px); font-weight: 800; line-height: 1.04;
    letter-spacing: -0.03em; max-width: 20ch; text-wrap: balance; margin-bottom: clamp(22px, 3vw, 34px);
  }
  /* The misregistration motif (D-32): two ghost layers of the same words, out of register,
     settling into register on load — two systems printing one fact, reconciled. */
  .misreg { position: relative; display: block; }
  .misreg .ghost { position: absolute; inset: 0; color: var(--mint); pointer-events: none; user-select: none; }
  @media (prefers-reduced-motion: no-preference) {
    .misreg .g1 { animation: reg1 1.5s cubic-bezier(.22,.8,.24,1) .25s both; }
    .misreg .g2 { animation: reg2 1.5s cubic-bezier(.22,.8,.24,1) .25s both; }
    @keyframes reg1 { from { transform: translate(-.06em, -.045em); opacity: .6; } to { transform: translate(0,0); opacity: 0; } }
    @keyframes reg2 { from { transform: translate(.05em, .04em); opacity: .3; } to { transform: translate(0,0); opacity: 0; } }
  }
  @media (prefers-reduced-motion: reduce) { .misreg .ghost { display: none; } }
  .cover .lede { font-size: clamp(16.5px, 1.5vw, 19.5px); color: var(--cover-muted); max-width: 58ch; }
  .cover .lede + .lede { margin-top: 14px; }
  .cover .lede.firm { color: var(--cover-ink); font-weight: 620; }
  .cta-row { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
  .btn {
    display: inline-block; background: var(--mint); color: var(--cover-bg);
    text-decoration: none; font-size: 15.5px; font-weight: 700; letter-spacing: -0.005em;
    padding: 14px 24px; border-radius: 6px; border: none; cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(79, 191, 159, .25); }
  .btn.ghost { background: transparent; color: var(--cover-ink); border: 1px solid var(--cover-line); padding: 13px 22px; }
  .btn.ghost:hover { border-color: var(--mint); background: var(--mint-soft); box-shadow: none; }
  .cta-alt { flex-basis: 100%; font-size: 14.5px; color: var(--cover-muted); text-decoration-color: var(--cover-line); text-underline-offset: 3px; }
  .cta-alt:hover { color: var(--cover-ink); }
  .btn-note { font-size: 13.5px; color: var(--cover-faint); max-width: 30ch; }

  /* Staged entrance for the copy: transform/opacity only. Reduced motion: everything at rest. */
  @media (prefers-reduced-motion: no-preference) {
    .rise { opacity: 0; transform: translateY(10px); animation: rise .8s cubic-bezier(.2,.8,.2,1) forwards; }
    .rise.d1 { animation-delay: .55s; } .rise.d2 { animation-delay: .7s; } .rise.d3 { animation-delay: .85s; } .rise.d4 { animation-delay: 1s; }
    @keyframes rise { to { opacity: 1; transform: none; } }
  }

  /* The readout: the crawl's rules, in the instrument's own register. It narrates the field. */
  .readout {
    align-self: center; justify-self: end; width: min(100%, 420px);
    border: 1px solid var(--cover-line); border-radius: 8px; padding: 18px 20px;
    background: rgba(16, 34, 28, .78);
    font-family: var(--mono); font-size: 12.5px; color: var(--cover-faint); line-height: 1.6;
  }
  .readout .row { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 5px 0; border-top: 1px dashed var(--cover-line); }
  .readout .row:first-of-type { border-top: none; }
  .readout .k { color: var(--cover-faint); }
  .readout .v { color: var(--cover-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .readout .v.mint { color: var(--mint); opacity: .85; }
  /* What was found, where: rows arrive as the crawler reaches the page that shows them. */
  .readout .row.found { border-top: 1px solid var(--cover-line); margin-top: 6px; padding-top: 10px; }
  .readout .finds { list-style: none; margin: 4px 0 0; padding: 0; }
  .readout .finds li { display: grid; grid-template-columns: 108px 1fr; gap: 12px; padding: 4px 0; color: var(--cover-muted); }
  .readout .finds .at { color: var(--cover-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .readout .finds .what { color: var(--cover-ink); opacity: .82; }
  .readout .finds .what::before { content: '↳ '; color: var(--mint); }
  @media (prefers-reduced-motion: no-preference) {
    .readout .finds li { animation: findin .6s cubic-bezier(.2,.8,.2,1) both; }
    @keyframes findin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  }

  @media (max-width: 900px) {
    /* Mobile: the copy alone. The crawl field, its readout card, and the wing are desktop-only. */
    .cover { min-height: 0; }
    .cover-grid { grid-template-columns: 1fr; gap: 0; padding-bottom: 44px; }
    .cover canvas#field, .readout, .cover-wing { display: none; }
    .cover-copy { max-width: 100%; }
  }
  @media (max-width: 720px) {
    .top { padding-top: 18px; gap: 12px; }
    .brand, nav.pages { flex-basis: 100%; }
    nav.pages { gap: 4px 14px; font-size: 13.5px; }
    .cta-row { margin-top: 22px; }
    .cta-row .btn { width: 100%; text-align: center; }
    .btn-note { max-width: none; }
  }

  /* ── Slim bar: arrives once the cover has scrolled away. Transform only. ─────────────── */
  .topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 20;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 10px var(--pad); background: var(--bar-bg);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bar-line); box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
    transform: translateY(-110%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .topbar.on { transform: none; }
  .topbar .wordmark { height: 30px; width: auto; fill: var(--ink); display: block; }
  .topbar a.home { line-height: 0; }
  .topbar nav { display: flex; align-items: center; gap: 4px 18px; font-size: 13.5px; font-weight: 520; }
  .topbar nav a { color: var(--ink); text-decoration: none; }
  .topbar nav a:hover { color: var(--ink); }
  .topbar nav .navcta { color: var(--accent-ink); background: var(--accent); padding: 8px 14px; border-radius: 6px; font-weight: 680; }
  @media (max-width: 720px) { .topbar nav a:not(.navcta) { display: none; } }

  /* ── The shell: rail + content ────────────────────────────────────────────────────── */
  .shell {
    display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px);
    max-width: 1440px; margin: 0 auto; padding: 0 var(--pad);
  }
  .rail { position: sticky; top: 72px; align-self: start; padding-top: clamp(56px, 8vw, 96px); }
  .rail ol { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); }
  .rail a {
    display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 1px solid transparent;
    color: var(--faint); text-decoration: none; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
    font-weight: 500; font-variation-settings: 'wght' 500;
    transition: color .3s ease, font-variation-settings .45s ease, border-color .3s ease;
  }
  .rail a:hover { color: var(--muted); }
  .rail a.on { color: var(--accent); border-left-color: var(--accent); font-variation-settings: 'wght' 720; }
  @media (max-width: 1000px) { .shell { grid-template-columns: 1fr; } .rail { display: none; } }

  .sec { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--line); scroll-margin-top: 64px; }
  .sec:first-child { border-top: none; }
  .sec .eyebrow { margin-bottom: 18px; }
  .sec .lead-in { margin-bottom: 20px; }
  .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(28px, 4vw, 64px); align-items: start; }
  @media (max-width: 760px) { .two { grid-template-columns: 1fr; } }

  /* Scroll reveal: opacity + a small transform; the lead-ins also morph in weight — their
     questions get scale (D-32). Never layout. */
  @media (prefers-reduced-motion: no-preference) {
    /* Resting state stays readable (a thumbnail, a print, a failed observer all get the words);
       the reveal is a lift in opacity and position, not an appearance. */
    .rv { opacity: .55; transform: translateY(12px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
    .rv.in { opacity: 1; transform: none; }
    .lead-in.rv { font-variation-settings: 'wght' 380; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1), font-variation-settings 1.1s ease; }
    .lead-in.rv.in { font-variation-settings: 'wght' 640; }
  }

  ul.plain { list-style: none; padding: 0; }
  ul.plain li { padding: 12px 0 12px 26px; position: relative; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 16px; }
  ul.plain li:last-child { border-bottom: none; }
  ul.plain li::before { content: ''; position: absolute; left: 3px; top: 22px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

  /* Deliverables: a grid of named items, one object repeated. */
  /* Who you'd work with: the headshot in a circle, a mint stroke with a soft glow. */
  .person .headshot { width: clamp(112px, 12vw, 148px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin-bottom: 22px; background: var(--code-bg);
    box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px var(--accent-soft), 0 0 28px rgba(79, 191, 159, .35); }
  .person .headshot img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transform: scale(1.04); }
  .person .lead-in { margin-bottom: 8px; }
  .person .roles { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--faint); max-width: 30ch; line-height: 1.7; }
  @media (max-width: 760px) { .person .roles { max-width: none; } }
  /* The readout illustration: two pages of the document, in the page's own tokens. */
  .doc { margin: 8px 0 22px; }
  .doc-pages { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2.5vw, 32px); align-items: start; }
  .doc .page {
    background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 22px 24px 26px;
    box-shadow: 0 1px 0 var(--line), 0 18px 40px -24px rgba(0, 0, 0, .35); font-size: 12.5px; color: var(--muted);
  }
  .doc .ph { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); letter-spacing: .04em; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .doc .ph .wm svg { height: 14px; width: auto; fill: var(--ink); display: block; }
  .doc .pt { margin: 14px 0 10px; font-size: 16px; font-weight: 720; color: var(--ink); letter-spacing: -0.015em; }
  .doc .lab { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
  .doc .block { padding: 12px 0; border-top: 1px dashed var(--line); }
  .doc .ln { display: block; height: 8px; border-radius: 4px; background: var(--code-bg); margin: 6px 0; }
  .doc .ln.tall { height: 18px; }
  .doc .w35 { width: 35%; } .doc .w40 { width: 40%; } .doc .w45 { width: 45%; } .doc .w50 { width: 50%; } .doc .w55 { width: 55%; }
  .doc .w60 { width: 60%; } .doc .w65 { width: 65%; } .doc .w70 { width: 70%; } .doc .w75 { width: 75%; } .doc .w80 { width: 80%; }
  .doc .w85 { width: 85%; } .doc .w90 { width: 90%; }
  .doc .verdict { display: flex; align-items: center; gap: 10px; padding: 4px 0 12px; }
  .doc .verdict .lab { margin: 0; }
  .doc .verdict .ln { flex: 1; margin: 0; }
  .doc .pill { display: inline-block; font-family: var(--mono); font-size: 10.5px; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
  .doc .pill.dim { background: var(--code-bg); color: var(--muted); border-color: var(--line); }
  .doc .fig { display: flex; align-items: center; gap: 12px; }
  .doc .fig .lab { margin: 0; text-transform: none; letter-spacing: .02em; }
  .doc .leaks { list-style: none; padding: 0; margin: 4px 0 0; }
  .doc .leaks li { display: grid; grid-template-columns: 18px minmax(0, 1fr) 30%; align-items: center; gap: 10px; padding: 5px 0; }
  .doc .leaks .rk { font-family: var(--mono); font-size: 11px; color: var(--accent); font-weight: 700; }
  .doc .leaks .ln { margin: 0; }
  .doc .bar { display: block; height: 8px; background: var(--code-bg); border-radius: 4px; overflow: hidden; }
  .doc .bar i { display: block; height: 100%; background: var(--accent); opacity: .75; border-radius: 4px; }
  .doc .rhythm { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 14px; margin: 0; }
  .doc .rhythm dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); padding: 11px 0; border-top: 1px dashed var(--line); }
  .doc .rhythm dd { margin: 0; padding: 8px 0; border-top: 1px dashed var(--line); }
  .doc .rhythm dt:first-of-type, .doc .rhythm dd:first-of-type { border-top: none; }
  .doc .fn { display: block; font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 4px; }
  .doc figcaption { margin-top: 12px; font-size: 13px; color: var(--faint); }
  .doc-link { margin-bottom: 22px; font-size: 16px; }
  .doc-link a { font-weight: 640; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  @media (max-width: 720px) { .doc-pages { grid-template-columns: 1fr; } .doc .page.spread { display: none; } }
  .deliv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 clamp(28px, 4vw, 56px); }
  .deliv { padding: 20px 0 22px; border-top: 1px solid var(--line); }
  .deliv .name { font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -0.015em; margin-bottom: 8px; }
  .deliv p { font-size: 15.5px; }

  /* The method: a ledger. Each rule is a row; the arithmetic figure sits beside it. */
  .ledger { border-top: 1px solid var(--line); }
  .ledger .row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .ledger .idx { font-family: var(--mono); font-size: 12px; color: var(--faint); padding-top: 5px; }
  .ledger dt { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.012em; margin-bottom: 6px; }
  .ledger dd { margin: 0; font-size: 15.5px; color: var(--muted); }
  figure.arith { margin: 0; padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--plane); }
  figure.arith svg { display: block; width: 100%; height: auto; color: var(--ink); }
  figure.arith .bar { transform-box: fill-box; transform-origin: left center; fill: currentColor; opacity: .18; }
  figure.arith .bar.final { fill: var(--accent); opacity: 1; }
  figure.arith .lbl { font-family: var(--mono); font-size: 11.5px; fill: currentColor; opacity: .72; }
  figure.arith .lbl.final { fill: var(--accent); opacity: 1; font-weight: 700; }
  @media (prefers-reduced-motion: no-preference) {
    figure.arith .bar { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
    figure.arith .bar.b2 { transition-delay: .15s; } figure.arith .bar.b3 { transition-delay: .3s; }
    figure.arith .bar.b4 { transition-delay: .45s; } figure.arith .bar.b5 { transition-delay: .6s; }
    figure.arith.in .bar.b2 { transform: scaleX(.78); } figure.arith.in .bar.b3 { transform: scaleX(.61); }
    figure.arith.in .bar.b4 { transform: scaleX(.55); } figure.arith.in .bar.b5 { transform: scaleX(.47); }
  }
  @media (prefers-reduced-motion: reduce) {
    figure.arith .bar.b2 { transform: scaleX(.78); } figure.arith .bar.b3 { transform: scaleX(.61); }
    figure.arith .bar.b4 { transform: scaleX(.55); } figure.arith .bar.b5 { transform: scaleX(.47); }
  }
  figure.arith figcaption { margin-top: 10px; font-size: 13.5px; color: var(--faint); }

  /* The closed zone: the cover's dimmed checkout, reprised as the section that names it. */
  .closed {
    background: var(--cover-bg); color: var(--cover-ink); border: 1px dashed var(--closed); border-radius: 10px;
    padding: clamp(24px, 3vw, 40px);
  }
  .closed .eyebrow { color: var(--closed); }
  .closed .lead-in { color: var(--cover-ink); }
  .closed p { color: var(--cover-muted); }
  .closed code { background: rgba(242, 243, 242, .08); color: var(--cover-ink); }
  .closed ul.plain li { color: var(--cover-muted); border-color: var(--cover-line); }
  .closed ul.plain li::before { background: transparent; border: 1.5px solid var(--closed); box-sizing: border-box; }
  .closed .after { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cover-line); }

  /* The engagement: four steps that actually are a sequence. */
  ol.steps { list-style: none; padding: 0; counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px clamp(20px, 3vw, 40px); }
  ol.steps li { counter-increment: s; padding-top: 16px; border-top: 2px solid var(--line); position: relative; }
  ol.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .1em; display: block; margin-bottom: 10px; }
  ol.steps li strong { display: block; font-size: 18px; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.012em; }
  ol.steps li { color: var(--muted); font-size: 15.5px; }

  /* Price: two doors and the stated price, numerals at scale. */
  .price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
  .price { border: 1px solid var(--line); border-radius: 8px; padding: 22px 24px; background: var(--plane); }
  .price .band { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
  .price .amount { font-size: clamp(38px, 4vw, 52px); font-weight: 780; letter-spacing: -0.03em; margin: 8px 0 6px; font-variant-numeric: tabular-nums; color: var(--ink); }
  .price .terms { font-size: 14.5px; color: var(--muted); }
  .stated { margin-top: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px clamp(22px, 3vw, 44px); align-items: start; }
  .stated .big { font-size: clamp(56px, 7vw, 104px); font-weight: 800; letter-spacing: -0.045em; line-height: .95; font-variant-numeric: tabular-nums; color: var(--ink); }
  .stated .big small { display: block; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-top: 10px; }
  .stated + .price-grid { margin-top: 30px; }
  .price-grid.one { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  /* D-57: four service cards sit two by two, never three and an orphan. */
  .price-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 640px) { .price-grid.four { grid-template-columns: 1fr; } }
  @media (max-width: 640px) { .stated { grid-template-columns: 1fr; } }

  .callout { border-left: 3px solid var(--accent); background: var(--plane); padding: 26px 30px; border-radius: 0 8px 8px 0; max-width: 780px; position: relative; overflow: hidden; }
  .callout h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 720; letter-spacing: -0.02em; margin-bottom: 10px; }
  .callout .cta-row { margin-top: 22px; }
  .callout .btn { background: var(--accent); color: var(--accent-ink); }
  .callout .btn:hover { box-shadow: 0 8px 24px var(--accent-soft); }
  .callout .btn-note { color: var(--faint); }
  .callout .mark { position: absolute; right: -40px; bottom: -48px; width: 260px; height: auto; fill: var(--accent); opacity: .07; pointer-events: none; }

  /* D-58 (2026-09-21): the home page in three acts. New components, same tokens and type. */
  /* An act band: a dark panel inside the page that opens an act the way the cover opens the page. */
  .act { background: var(--cover-bg); color: var(--cover-ink); border-radius: 12px; padding: clamp(34px, 6vw, 84px) clamp(24px, 5vw, 72px); position: relative; overflow: hidden; }
  .act h2 { font-size: clamp(34px, 5.2vw, 72px); font-weight: 800; letter-spacing: -0.04em; line-height: .98; max-width: 16ch; }
  .act .lede { font-size: clamp(17px, 1.6vw, 21px); color: var(--cover-muted); max-width: 58ch; margin-top: 22px; line-height: 1.5; }
  .act .lede strong { color: var(--cover-ink); }
  .act .btn-note { color: var(--cover-faint); }
  .act .btn.ghost { color: var(--cover-ink); }
  .act .wing { position: absolute; right: -60px; top: -40px; width: 380px; height: auto; fill: var(--mint); opacity: .08; pointer-events: none; }
  .pill { display: inline-block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); border: 1px solid var(--cover-line); border-radius: 999px; padding: 6px 12px; margin-bottom: 22px; }
  /* The creed strip: merchandise shown, not a mantra placed (messages-v1 rule 1 carve-out). */
  .creed { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  @media (max-width: 860px) { .creed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 420px) { .creed { grid-template-columns: 1fr; } }
  .creed a { display: block; border: 1px solid var(--line); border-radius: 8px; padding: 26px 22px; background: var(--plane); color: var(--ink); text-decoration: none; font-size: clamp(22px, 2.4vw, 30px); font-weight: 780; letter-spacing: -0.025em; line-height: 1.05; }
  .creed a:hover { border-color: var(--accent-line); }
  .creed-note { margin-top: 12px; font-size: 13.5px; color: var(--faint); }
  /* Card grids for tenets and checks. */
  .grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
  .card { border: 1px solid var(--line); border-radius: 8px; padding: 22px 24px; background: var(--plane); }
  .card h4 { font-size: 17px; font-weight: 720; letter-spacing: -0.01em; margin-bottom: 8px; color: var(--ink); }
  .card p { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
  .card .k { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
  /* Three statements: what Keel represents. */
  .rep { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(18px, 3vw, 40px); }
  .rep h3 { font-size: clamp(22px, 2.6vw, 34px); font-weight: 780; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 12px; color: var(--ink); }
  .rep p { font-size: 15px; color: var(--muted); line-height: 1.55; }
  /* The diff between surfaces: one product, four surfaces, illustrative. */
  .surfaces { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--plane); }
  .surfaces .head, .surfaces .row { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); }
  .surfaces .head > div { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .surfaces .row > div { padding: 14px 16px; font-size: 14px; color: var(--ink); border-bottom: 1px solid var(--line); font-family: var(--mono); }
  .surfaces .row > div:first-child { font-family: inherit; color: var(--muted); }
  .surfaces .row:last-child > div { border-bottom: none; }
  .surfaces .ok { color: var(--accent); }
  .surfaces .miss { color: #b3402e; }
  .surfaces .unk { color: var(--faint); font-style: italic; }
  .surfaces-note { margin-top: 10px; font-size: 13px; color: var(--faint); }
  @media (max-width: 720px) { .surfaces .head, .surfaces .row { grid-template-columns: 1fr 1fr; } .surfaces .head > div:first-child, .surfaces .row > div:first-child { grid-column: 1 / -1; } }
  /* The merchant's jobs, in the merchant's words. */
  .jobs { border-left: 3px solid var(--accent); padding: 6px 0 6px 22px; }
  .jobs p { font-size: clamp(19px, 2vw, 24px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; color: var(--ink); }
  .jobs .who { font-size: 13.5px; color: var(--faint); margin-top: 8px; font-weight: 400; }


  footer { border-top: 1px solid var(--line); padding: 32px var(--pad) 64px; font-size: 13.5px; color: var(--faint); }
  footer .foot-line { max-width: 1440px; margin: 0 auto 16px; color: var(--muted); font-size: 14px; max-width: 60ch; }
  footer .row { max-width: 1440px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; }
  footer a { color: var(--muted); }

  /* ── The slim cover: the same world, sized for a page that is an argument rather than a
     front door. The apex keeps the full cover with the crawl; every sibling page opens with
     this. Same ground, same nav, same misregistered headline, no instrument. ───────────── */
  .cover.slim { min-height: 0; }
  .cover.slim .cover-grid { grid-template-columns: minmax(0, 1fr); max-width: 1180px; padding-top: clamp(34px, 6vh, 66px); padding-bottom: clamp(34px, 6vh, 62px); }
  .cover.slim .cover-copy { max-width: 780px; }
  .cover.slim h1 { font-size: clamp(29px, 3.5vw, 50px); max-width: 22ch; }
  .cover.slim .lede { max-width: 62ch; }


  /* A section's own prose keeps the measure even when it is not inside .two — otherwise a list
     or a paragraph that sits directly in a section runs the full grid width and stops being
     readable. .lead-in and .eyebrow carry their own measures and are left alone. */
  .sec > ul.plain, .sec > ol.steps + p, .sec > p:not(.eyebrow):not(.lead-in) { max-width: 68ch; }
  .sec > .deliv-grid + p, .sec > ul.plain + p { max-width: 68ch; }