/* headroom.css: page-specific presentation for /headroom (RUN, the full
   system), loaded after site.css. Owns: light-band tokens (new names, no
   collision with site.css's own --ink); the hero (image far-plane, two SVG
   depth planes, scrim, the engineer-override doc mock as real foreground
   content); the chapter-rail device (11 sections, sticky list >=1100px,
   single current-chapter chip below that); every section's own layout
   (bonuses, guarantees timeline, price cards, ROI calculator, comparator
   matrix, qualifier grid, proof cards, FAQ accordion, closing); the three
   light bands (Method, Guarantees, FAQ). Depth and elevation come from
   surface colour and borders, not drop shadows; motion comes from
   transitions and the shared scroll-driven primitives, never a frame
   animation; the one allowed background glow is left unspent here. */

:root {
  /* Light-band palette: distinct names from site.css's tokens (which
     already uses --ink for lime-button text) so nothing collides. Values
     are the brief's approved set plus the supporting inks/borders, carried
     over unchanged from the pre-Phase-3 page (already contrast-checked at
     the glyph pixels against these exact bands). */
  --paper: #f7f8f5;
  --paper-card: #ffffff;
  --paper-ink: #1a2030;
  --paper-ink-2: #414c63;
  --paper-ink-3: #5f6884;
  --olive: #4d680d;
  --cyan-lt: #07686a;
  --cyan-lt-h: #04494b;
  --brand-lt: #3f7a22;
  --paper-border: rgba(26, 32, 48, .12);
  --paper-border-soft: rgba(26, 32, 48, .07);
  --paper-faint: rgba(26, 32, 48, .035);
  --olive-faint: rgba(74, 102, 10, .08);
}

/* --------------------------------------------------------------- layout */
.narrow { max-width: 780px; margin: 0 auto; padding: 0 40px; }
section { padding: 96px 0; border-bottom: 1px solid var(--border); }
section:last-of-type { border-bottom: none; }
@media (max-width: 780px) { section { padding: 64px 0; } .narrow { padding: 0 22px; } }

.backhome { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); margin-bottom: 28px; }
.backhome:hover { text-decoration: none; color: var(--text); }
.backhome:before { content: "\2190"; font-size: 13px; }

.deck { color: var(--text-dim); font-size: 18px; line-height: 1.6; margin: 0 0 32px; max-width: 660px; }
/* site.css's base h2 is capped at 30ch, tuned for the homepage's shorter
   headings. Several of this page's own H2s (already-locked wording, not
   rewritten here) run to 40+ characters and orphaned their trailing
   punctuation onto its own line at that width -- widen the column instead
   of touching a single word of copy. */
.ch-content h2 { max-width: 46ch; }
/* .brandword: the product name, wherever it appears inline in running copy
   (eyebrows, body paragraphs, the ROI frame, FAQ answers). Identity accent,
   not a control -- matches the existing site-wide convention. Deliberately
   NOT named .brand: site.css already owns that class for the navbar's
   icon+wordmark lockup (display:flex, for aligning the mark with "Greycell"),
   and reusing the name here inherited that flex/block behaviour into running
   text -- an inline anchor stretched to the full column width and orphaned
   its own trailing punctuation onto the next line (caught in the FAQ H2 at
   1440px: "Headroom" then a lone "." on the line below). */
.brandword { color: var(--text); font-weight: 700; }
a.brandword:hover { text-decoration: underline; }
.brand-em { color: var(--text); font-weight: 700; font-style: normal; }
.cta-alt { font-size: 14.5px; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.cta-alt:hover { color: var(--cyan); text-decoration: none; border-bottom-color: var(--cyan); }
.ctas { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
/* Round-C ruling: the lime cap. The full label ("Take the 90-Second
   Unlock ->") put this button's 390 first-view rect at 2.954% (9,623px^2)
   against the 2% cap -- the same mechanism the gate found on
   impact-assessment and four-differences, and the same fix agent-mot and
   first-agent already ship: keep every word in the markup (jury: nothing
   removed, see the HTML), hide the descriptive middle word under 600px so
   the label stays grammatical ("Take the Unlock ->"), same technique
   headroom's own homepage uses on its own hero CTA. Also matches the
   agent-mot convention on layout: agent-mot's own CTA row is never a flex
   container, so its .btn-lime is genuinely display:inline-block (shrink-
   to-fit) at every width. Here .ctas is display:flex for the desktop
   side-by-side row, which blockifies .btn-lime into a flex item (still
   shrink-to-fit in a row axis, but no longer literally inline-block) --
   at the same 600px breakpoint the two CTAs already stack on one column
   with room to spare, so drop flex there too: no flex gap, .btn-lime back
   to plain inline-block, exactly the agent-mot shape. */
@media (max-width: 600px) {
  .hero .btn-lime .long, .closing .btn-lime .long { display: none; }
  .hero .ctas, .closing .ctas { display: block; }
  .hero .ctas .cta-alt, .closing .ctas .cta-alt { display: block; margin-top: 14px; }
}

/* =========================================================== 1. hero === */
.hero { padding: 0; border-bottom: 1px solid var(--border); overflow: hidden; }
.hero .planes { min-height: 760px; display: block; }
.hero .plane-far { z-index: 0; top: 0; height: 100%; object-fit: cover; object-position: center 38%; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10, 14, 26, .95) 0%, rgba(10, 14, 26, .93) 42%,
    rgba(10, 14, 26, .78) 60%, rgba(10, 14, 26, .38) 76%,
    rgba(10, 14, 26, .08) 90%, rgba(10, 14, 26, 0) 100%);
}
.hero .plane-mid { z-index: 1; top: auto; bottom: 0; height: 220px; }
.hero .plane-mid svg, .hero .plane-near svg { display: block; width: 100%; height: 100%; }
.hero .plane-near { z-index: 2; top: auto; bottom: 0; height: 128px; }
@media (max-width: 780px) {
  .hero .plane-mid { height: 140px; }
  .hero .plane-near { height: 84px; }
  /* Round-B ruling: at mobile the hero image was invisible. Root cause,
     measured: .planes has no height of its own, it is exactly as tall as
     .hero-inner's normal-flow content -- on a 350px-wide phone column
     that includes the H1, tagline, package paragraph AND the full
     engineer-override doc mock, which stacks to ~1300px. Two things then
     compound: the far-plane image (object-fit: cover) was told height:
     100%, so it covered that whole 1300px box by zooming to ~4x, showing
     only a hairline vertical sliver of the scene; and the scrim's own
     gradient stops are percentages of that same 1300px, so its 93-95%-
     opaque top stop stretched over roughly the first 550px instead of
     the first couple of hundred -- the image was blacked out even before
     the crop problem. Giving both a real, fixed height (matched to each
     other) restores a sane crop and puts the scrim's existing curve back
     over a hero-sized band instead of the whole runaway column; below
     that band .planes is still just the page's own navy, which is the
     image's own "rest of the space in deep navy shadow" anyway. */
  .hero .plane-far { height: 480px; }
  /* Round-C ruling: check-contrast.js --width=375 --selector=".hero *"
     failed two real nodes -- p.package (2.2:1) and its own .brandword
     span (1.79:1) -- against raw image colour (#3e5360, #86c74c), not a
     measurement artefact. Root cause, measured: the scrim's own box only
     matched the 480px image, but at 375 the H1-to-CTAs text column runs
     to y=634 (.package's own bottom, 154px past the image/scrim's edge),
     and even inside that box the gradient was already faded to ~28%
     opacity by the point .package starts (its dark stops are tuned for
     desktop's much shorter hero). The image itself still crops at 480px
     (that framing is correct), but the scrim is given its own taller box
     and a curve that stays dark much longer, so it can keep darkening
     the plain navy .planes falls back to below the image's own bottom
     edge, all the way past .package -- below y=942 it sits under the
     hero-doc card's own opaque background (z-index 3), so the extra
     height is invisible there, never a visible seam. */
  .hero-scrim {
    bottom: auto; height: 850px;
    background: linear-gradient(180deg,
      rgba(10, 14, 26, .95) 0%, rgba(10, 14, 26, .93) 50%,
      rgba(10, 14, 26, .85) 65%, rgba(10, 14, 26, .6) 78%,
      rgba(10, 14, 26, .25) 90%, rgba(10, 14, 26, 0) 100%);
  }
}

.hero-inner { position: relative; z-index: 3; padding: 132px 0 88px; }
/* Round-C ruling: the hero eyebrow was the sole page-specific override,
   putting it in bright cyan while every other page's eyebrow (and this
   page's own non-band sections) render the site.css default, --text-dim.
   Removed so this page has one eyebrow treatment, like the rest of the
   estate: text --text-dim, dot --cyan (site.css default, unmodified). */
.hero h1 { max-width: none; margin: 0 0 20px; }
.hero .tier-line { font: 500 13px/1.5 'JetBrains Mono', monospace; color: var(--text-dim); letter-spacing: .04em; text-transform: uppercase; max-width: 640px; margin: 0 0 26px; }
.hero .tier-line strong { color: var(--text); font-weight: 600; }
.hero .tagline { font-size: clamp(20px, 2.6vw, 27px); line-height: 1.3; color: var(--text); max-width: 640px; margin: 0 0 20px; font-weight: 600; letter-spacing: -.01em; }
.hero .tagline em { color: var(--text); font-weight: 800; font-style: normal; }
.hero .package { font-size: 16.5px; line-height: 1.6; color: var(--text-dim); max-width: 620px; margin: 0 0 36px; }
@media (max-width: 780px) { .hero-inner { padding: 100px 0 64px; } }

/* The engineer-override doc mock: real foreground content, not a css
   parallax plane -- it sits in the normal flow of .hero-inner (z-index 3,
   above the image/scrim/arcs), so it naturally reads as the near-plane
   subject with the generated image behind it. */
.hero-doc { margin-top: 52px; max-width: 640px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; text-align: left; }
.dh-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface-elev); font: 500 10.5px/1.3 'JetBrains Mono', monospace; color: var(--text-dim); letter-spacing: .03em; flex-wrap: wrap; }
.dh-head .l { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dh-head .l span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); flex: none; }
.dh-stamp { font-size: 9px; color: var(--cyan); letter-spacing: .16em; text-transform: uppercase; border: 1px solid var(--border); padding: 3px 9px; border-radius: 4px; font-weight: 600; flex: none; }
.dh-body { padding: 20px 18px 14px; }
.dh-line { padding: 13px 0; border-bottom: 1px dashed var(--border); display: grid; gap: 8px; }
.dh-line:last-child { border-bottom: none; }
@media (min-width: 520px) { .dh-line { grid-template-columns: 1fr 1fr; gap: 18px; } }
.dh-section { font: 600 9.5px 'JetBrains Mono', monospace; color: var(--text-dim); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 5px; }
.dh-ai { color: var(--text-dim); font-size: 12.5px; line-height: 1.6; margin: 0; }
.dh-ai s { color: var(--text-faint); text-decoration-color: var(--text-faint); }
.dh-override { background: var(--surface-elev); border-left: 2px solid var(--border); padding: 9px 11px; border-radius: 0 6px 6px 0; font-size: 12px; line-height: 1.5; color: var(--text); }
.dh-tag { display: block; font: 700 9px 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--text); margin-bottom: 4px; }
.dh-override strong { color: var(--text); }
.dh-foot { padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface-elev); display: flex; align-items: center; justify-content: space-between; font: 500 9px/1.3 'JetBrains Mono', monospace; color: var(--text-dim); letter-spacing: .06em; text-transform: uppercase; flex-wrap: wrap; gap: 8px; }
.dh-caption { padding: 8px 18px; background: var(--navy); border-top: 1px solid var(--border); font: 500 8.5px/1.3 'JetBrains Mono', monospace; color: var(--text-faint); letter-spacing: .1em; text-transform: uppercase; text-align: center; }

/* =========================================================== 2. chapter rail == */
/* The page device: the eleven sections become a sticky rail. >=1100px it is
   a vertical list, sticky beside the content in the two-column grid
   (containing-block = the whole .ch-layout box, which is what lets a
   short sticky item stay glued for the full height of a much taller
   sibling -- the standard sticky-sidebar mechanism), current chapter lit.
   Below 1100px the rail and content stack in the SAME column instead of
   side by side, so that identical sticky mechanism pins the rail directly
   on top of whatever section has scrolled underneath it: a fixed-geometry
   "current chapter" chip tried that and still sliced through a card
   (confirmed by direct measurement: the rail's sticky range spans the
   entire .ch-layout box, ~12,000px, not just its own ~50px row, because a
   sticky item's containing block is its parent's full box, not its own
   grid row). There is no reserved lane for it to sit in at that width, so
   the rail is dropped below 1100px rather than shipped broken: the five-
   link nav and normal scrolling remain the way through the page. */
.ch-layout { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 900px; margin: 0 auto; padding: 0 22px; }
.rail { display: none; position: sticky; top: 84px; z-index: 8; height: 46px; background: var(--navy); border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.rail-item { position: absolute; left: 0; right: 0; top: 12px; display: flex; align-items: baseline; gap: 8px; color: var(--text-dim); font: 500 12.5px/1.3 Inter, sans-serif; visibility: hidden; }
.rail-item .n { font: 600 11px 'JetBrains Mono', monospace; color: var(--text-faint); letter-spacing: .04em; }
.rail-item.is-current { visibility: visible; color: var(--cyan); }
.rail-item.is-current .n { color: var(--cyan); }
.rail-item:hover { text-decoration: none; color: var(--text); }
.rail-item.is-current:hover { color: var(--cyan); }
.ch-content { min-width: 0; }
.ch-content > section { padding: 72px 0; border-bottom: 1px solid var(--border); }
.ch-content > section:last-child { border-bottom: none; }
@media (max-width: 780px) { .ch-content > section { padding: 56px 0; } }

@media (min-width: 1100px) {
  /* Round-C ruling: the rail's own lane (176 + 56 gap) was pushing the
     content column, and with it every section below the hero, 192px off
     the site's spine -- the hero's own .wrap sits at x=80 (width:
     min(1280px, 92%), centred), but .ch-layout's separate 1480px/40px-pad
     formula put the rail first and content second, landing content at
     40 (page pad) + 176 (rail) + 56 (gap) = 272. Fix: put content in the
     FIRST column and the rail in the SECOND, on the right, and give
     .ch-layout the exact same width formula as .wrap so the content
     column's left edge is the hero's left edge at every width, not just
     1440. Rail stays sticky and still tracks chapters (grid-column, not
     DOM order, does the flip -- headroom.js queries .rail-item by class
     and does not care where the nav sits in the markup or the grid). */
  .ch-layout { grid-template-columns: 1fr 176px; gap: 56px; width: min(1280px, 92%); max-width: none; margin: 0 auto; padding: 0; align-items: start; }
  .ch-content { grid-column: 1; }
  .rail { grid-column: 2; position: sticky; top: 140px; z-index: 3; height: auto; background: none; border-bottom: none; margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2px; border-left: 1px solid var(--border); }
  .rail-item { position: static; visibility: visible; display: flex; padding: 9px 0 9px 18px; margin-left: -1px; border-left: 2px solid transparent; transition: color .2s, border-color .2s; }
  .rail-item.is-current { border-left-color: var(--cyan); }
  .ch-content > section { padding: 96px 0; }
  /* The old max-width: 980px cap on .ch-content, and the band's own
     compensating max-width formula (a fix for the 980px cap leaving
     unused space in a wider-than-980 1fr track), both depended on the
     old geometry above and are gone with it: .ch-content is now exactly
     as wide as its own grid track, so a band section's full-width paper
     box is already flush with the column, symmetric, no formula needed. */
}

/* =========================================================== 3. method === */
.wf-diagram { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
@media (min-width: 760px) { .wf-diagram { grid-template-columns: 1fr 32px 1fr 32px 1fr; gap: 0; align-items: stretch; } }
.wf-step { background: var(--paper-card); border: 1px solid var(--paper-border); border-radius: 16px; padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; min-height: 220px; }
.wf-step.ov { border-color: rgba(77, 104, 13, .5); background: #f7f8f5; }
.wf-step .badge { font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-ink-3); display: flex; align-items: center; gap: 8px; }
.wf-step.ov .badge { color: var(--olive); }
.wf-step .badge:before { content: ""; width: 16px; height: 1px; background: currentColor; }
.wf-step h3 { font: 600 20px/1.3 Inter, sans-serif; color: var(--paper-ink); margin: 0; letter-spacing: -.01em; }
.wf-step p { font-size: 14.5px; line-height: 1.6; color: var(--paper-ink-2); margin: 0; }
.wf-step .meta { font: 500 10.5px 'JetBrains Mono', monospace; color: var(--paper-ink-3); letter-spacing: .05em; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--paper-border-soft); }
.wf-arrow { display: none; }
@media (min-width: 760px) {
  .wf-arrow { display: flex; align-items: center; justify-content: center; position: relative; }
  .wf-arrow:after { content: ""; width: 100%; height: 1px; background: rgba(77, 104, 13, .4); }
  .wf-arrow:before { content: "\2192"; position: absolute; color: var(--olive); font: 600 13px 'JetBrains Mono', monospace; background: var(--paper); padding: 4px 5px; border-radius: 50%; }
}

/* =========================================================== 4. bonuses == */
.bonus-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
@media (min-width: 700px) { .bonus-grid { grid-template-columns: 1fr 1fr; } }
.bonus { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px; }
.bonus .tag { display: inline-block; font: 700 10px 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--text); background: var(--surface-elev); border: 1px solid var(--border); padding: 5px 10px; border-radius: 5px; margin-bottom: 16px; }
.bonus h3 { font: 600 19px/1.3 Inter, sans-serif; margin: 0 0 10px; letter-spacing: -.01em; color: var(--text); }
.bonus p { color: var(--text-dim); font-size: 14.5px; line-height: 1.6; margin: 0; }

/* =========================================================== 5. guarantees */
.timeline { position: relative; margin-top: 40px; padding-left: 30px; }
.timeline:before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 1px; background: var(--olive); }
.tl-row { position: relative; padding: 0 0 28px 22px; }
.tl-row:last-child { padding-bottom: 0; }
.tl-row:before { content: ""; position: absolute; left: -26px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2px solid var(--olive); }
.tl-row .window { font: 600 11px 'JetBrains Mono', monospace; color: var(--olive); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
.tl-row h3 { font: 600 20px/1.3 Inter, sans-serif; margin: 0 0 10px; letter-spacing: -.01em; color: var(--paper-ink); }
.tl-row p { color: var(--paper-ink-2); margin: 0 0 12px; font-size: 15px; line-height: 1.6; }
.tl-row ul { margin: 14px 0 0; padding: 0; list-style: none; }
.tl-row li { padding: 8px 0; font-size: 14px; color: var(--paper-ink-2); display: grid; grid-template-columns: 84px 1fr; gap: 14px; }
.tl-row li strong { font: 600 10.5px 'JetBrains Mono', monospace; color: var(--olive); letter-spacing: .05em; text-transform: uppercase; }
.smallprint { margin-top: 18px; padding: 12px 16px; background: var(--paper-faint); border-left: 2px solid var(--paper-ink-3); font-size: 13px; color: var(--paper-ink-2); font-style: italic; border-radius: 0 6px 6px 0; line-height: 1.6; }

.g-detail { margin: 30px 0 0; max-width: 780px; border: 1px solid var(--paper-border); border-radius: 12px; background: var(--paper-card); }
.g-detail summary { padding: 16px 20px; cursor: pointer; list-style: none; font: 600 11.5px 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--olive); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.g-detail summary::-webkit-details-marker { display: none; }
.g-detail summary:after { content: "+"; font: 400 18px/1 Inter, sans-serif; color: var(--olive); }
.g-detail[open] summary:after { content: "\2212"; }
.g-detail-body { padding: 0 20px 18px; }
.g-detail-body h3 { color: var(--paper-ink); margin: 12px 0 6px; font-size: 15px; line-height: 1.35; }
.g-detail-body p { color: var(--paper-ink-2); font-size: 14px; line-height: 1.6; margin: 0 0 10px; }
.g-detail-body li { color: var(--paper-ink-2); font-size: 14px; line-height: 1.6; padding: 5px 0; }
.g-detail-body ul { margin: 0; padding-left: 18px; }

.howwework { margin: 36px 0 0; max-width: 780px; }
.howwework h3 { font: 600 11px 'JetBrains Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--olive); margin: 0 0 12px; }
.howwework ul { margin: 0; padding: 0; list-style: none; }
.howwework li { position: relative; padding: 8px 0 8px 22px; color: var(--paper-ink-2); font-size: 14px; line-height: 1.6; border-bottom: 1px solid var(--paper-border-soft); }
.howwework li:last-child { border-bottom: none; }
.howwework li:before { content: ""; position: absolute; left: 0; top: 17px; width: 10px; height: 1px; background: var(--olive); }

/* =========================================================== 6. pricing == */
.price-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
@media (min-width: 760px) { .price-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
.price-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 36px 32px; display: flex; flex-direction: column; }
.price-card.featured { background: var(--surface-elev); }
.price-card .tier { font: 600 11px 'JetBrains Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 8px; }
.price-card.featured .tier { color: var(--text); font-weight: 700; }
.price-card h3 { font: 600 21px/1.3 Inter, sans-serif; margin: 0 0 20px; letter-spacing: -.01em; }
.price-card .figure { font: 700 clamp(30px, 6vw, 46px)/1 'JetBrains Mono', monospace; color: var(--text); margin: 6px 0; letter-spacing: -.01em; }
.price-card.featured .figure { color: var(--lime-read); }
.price-card .figure span { font: 500 16px Inter, sans-serif; color: var(--text-faint); margin-left: 6px; }
.price-card .figure-sub { font-size: 13px; color: var(--text-dim); margin-bottom: 22px; line-height: 1.55; }
.price-card .annual { margin: 0 0 20px; font: 500 11px/1.5 'JetBrains Mono', monospace; color: var(--cyan); letter-spacing: .02em; }
.price-card ul { list-style: none; margin: 0 0 26px; padding: 0; }
.price-card li { padding: 8px 0 8px 24px; position: relative; font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.price-card li:before { content: "+"; position: absolute; left: 2px; top: 8px; color: var(--cyan); font: 700 13px 'JetBrains Mono', monospace; }
.card-guarantee { margin: auto 0 0; padding: 12px 15px; border-left: 3px solid var(--border); background: var(--surface-elev); border-radius: 0 8px 8px 0; font-size: 13px; line-height: 1.5; color: var(--text); font-weight: 600; }
.price-cta-row { margin-top: 32px; text-align: center; }
.anchor-note { margin-top: 16px; text-align: center; font-size: 13px; color: var(--text-faint); font-style: italic; }
.scarcity-row { margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 12px; font: 600 11px 'JetBrains Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.scarcity-row .meter { display: flex; gap: 5px; }
.scarcity-row .slot { width: 28px; height: 5px; border-radius: 3px; background: rgba(0, 227, 228, .1); border: 1px solid rgba(0, 227, 228, .35); }

/* =========================================================== 7. ROI ===== */
.roi-card { margin-top: 40px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 40px; display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 860px) { .roi-card { grid-template-columns: 1fr 1fr; gap: 52px; padding: 48px; } }
@media (max-width: 780px) { .roi-card { padding: 26px 22px; border-radius: 14px; } }
.roi-inputs h3 { font: 600 11px 'JetBrains Mono', monospace; color: var(--text-faint); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 26px; }
.roi-input { margin-bottom: 28px; }
.roi-input:last-child { margin-bottom: 0; }
.roi-input .label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; gap: 12px; }
.roi-input .label-text { font-size: 14px; color: var(--text); font-weight: 500; line-height: 1.4; }
.roi-input .label-val { font: 700 17px 'JetBrains Mono', monospace; color: var(--cyan); font-variant-numeric: tabular-nums; background: rgba(0, 227, 228, .08); padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(0, 227, 228, .3); min-width: 56px; text-align: center; flex-shrink: 0; }
.roi-input input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  background: linear-gradient(to right, var(--cyan) 0%, var(--cyan) var(--p, 50%), var(--surface-elev) var(--p, 50%), var(--surface-elev) 100%);
  border-radius: 3px; cursor: pointer; border: 1px solid var(--border);
}
.roi-input input[type="range"]:focus { outline: none; }
.roi-input input[type="range"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.roi-input input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--cyan); cursor: pointer; border: 4px solid var(--navy); }
.roi-input input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--cyan); cursor: pointer; border: 4px solid var(--navy); }
.roi-input .tick-row { display: flex; justify-content: space-between; font: 500 10px 'JetBrains Mono', monospace; color: var(--text-faint); margin-top: 9px; }

.roi-output { background: var(--surface-elev); border: 1px solid var(--border); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.roi-output h3 { font: 600 11px 'JetBrains Mono', monospace; color: var(--cyan); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 2px; }
.roi-row { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; border-bottom: 1px dashed var(--border); gap: 12px; }
.roi-row:last-of-type { border-bottom: none; }
.roi-row .k { font-size: 13.5px; color: var(--text-dim); }
.roi-row .v { font: 600 16px 'JetBrains Mono', monospace; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.roi-row.assumption .k, .roi-row.noted .k { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.roi-row.assumption .k em, .roi-row.noted .k em { font-style: normal; color: var(--text-faint); }
.roi-row.assumption .v { color: var(--text-dim); font-weight: 500; }
.assume-tag { font: 600 8.5px 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); border: 1px solid var(--border); padding: 2px 6px; border-radius: 4px; }
.roi-row.total { border-top: 1px solid var(--border); border-bottom: none; padding-top: 18px; margin-top: 6px; }
.roi-row.total .k { font-size: 14px; font-weight: 600; color: var(--text); }
.roi-row.total .v { color: var(--cyan); font-size: 22px; font-family: 'JetBrains Mono', monospace; }
.roi-frame { margin-top: 16px; padding: 20px 22px; background: rgba(0, 227, 228, .06); border: 1px solid rgba(0, 227, 228, .3); border-radius: 10px; text-align: center; font-size: 14.5px; color: var(--text); line-height: 1.5; }
.roi-frame strong { font: 700 21px 'JetBrains Mono', monospace; color: var(--cyan); display: block; margin-top: 8px; }

/* =========================================================== 8. comparator */
.matrix { margin-top: 40px; display: grid; grid-template-columns: 1fr; gap: 12px; }
.mx-row { display: grid; grid-template-columns: 1fr; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px 26px; }
@media (min-width: 760px) { .mx-row { grid-template-columns: 1.4fr 1fr 1fr 1.6fr; gap: 22px; align-items: center; } }
.mx-row .opt { font-size: 15.5px; font-weight: 600; color: var(--text); line-height: 1.35; letter-spacing: -.005em; }
.mx-row .got { font-size: 13.5px; color: var(--text-dim); font-style: italic; }
.mx-row .cost { font: 400 12.5px 'JetBrains Mono', monospace; color: var(--text-dim); }
/* --lime-read is reserved for large stat values (DESIGN.md sec 3); this is
   13.5px running text, so the "why we're different" column reads in cyan,
   the law's read-accent colour, not the stat colour. */
.mx-row .diff { font-size: 13.5px; color: var(--cyan); line-height: 1.45; }
@media (max-width: 759px) {
  .mx-row > * { padding: 7px 0; border-top: 1px dashed var(--border); }
  .mx-row > *:first-child { border-top: none; padding-top: 0; }
  .mx-row .got:before, .mx-row .cost:before, .mx-row .diff:before {
    content: attr(data-l); display: block; font: 600 9px 'JetBrains Mono', monospace; color: var(--text-faint); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px;
  }
}
.mx-row.status-quo { border: 1.5px solid var(--border); background: var(--surface-elev); position: relative; margin-top: 26px; }
.mx-row.status-quo:before {
  content: "The silent meta-competitor"; position: absolute; top: -11px; left: 22px;
  font: 700 9.5px 'JetBrains Mono', monospace; color: var(--navy); letter-spacing: .14em; text-transform: uppercase;
  background: var(--cyan); padding: 3px 11px; border-radius: 3px;
}
.mx-row.status-quo .opt { font-weight: 700; font-size: 16px; }
.mx-row.status-quo .diff { color: var(--text); font-weight: 700; font-style: normal; }
.mx-headers { display: none; }
@media (min-width: 760px) {
  .mx-headers { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.6fr; gap: 22px; padding: 0 26px 8px; font: 600 10px 'JetBrains Mono', monospace; color: var(--text-faint); letter-spacing: .16em; text-transform: uppercase; }
}

/* =========================================================== 9. fit ===== */
.qualifier-grid { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 40px; }
@media (min-width: 700px) { .qualifier-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.qual-col { border-top: 1px solid var(--border); padding: 26px 2px 0; position: relative; }
.qual-col h3 { margin: 0 0 18px; font: 600 11.5px 'JetBrains Mono', monospace; letter-spacing: .16em; text-transform: uppercase; }
.qual-col.yes h3 { color: var(--text); font-weight: 700; }
.qual-col.no h3 { color: var(--text-dim); }
.qual-col:before { content: ""; position: absolute; top: -1px; left: 0; width: 44px; height: 2px; }
.qual-col.yes:before { background: var(--cyan); }
.qual-col.no:before { background: var(--text-dim); }
.qual-col ul { margin: 0; padding-left: 0; list-style: none; }
.qual-col li { padding: 12px 0 12px 26px; position: relative; border-bottom: 1px solid var(--border); font-size: 14.5px; line-height: 1.5; color: var(--text-dim); }
.qual-col li:last-child { border-bottom: none; }
.qual-col.yes li:before { content: "+"; position: absolute; left: 2px; top: 11px; color: var(--cyan); font: 700 15px 'JetBrains Mono', monospace; }
.qual-col.no li:before { content: "\2013"; position: absolute; left: 2px; top: 11px; color: var(--text-faint); font: 600 15px 'JetBrains Mono', monospace; }
.qual-filter { margin: 32px 0 0; padding: 16px 20px; background: var(--surface); border-left: 2px solid var(--cyan); border-radius: 0 8px 8px 0; font-size: 14px; line-height: 1.6; color: var(--text-dim); max-width: 780px; }
.qual-filter strong { color: var(--text); }

/* =========================================================== 10. proof == */
.auth-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
@media (min-width: 860px) { .auth-grid { grid-template-columns: repeat(3, 1fr); } }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 30px 26px; display: flex; flex-direction: column; }
.auth-card .proof-label { font: 700 10px 'JetBrains Mono', monospace; color: var(--text); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.auth-card .proof-label:before { content: ""; width: 14px; height: 1px; background: var(--cyan); }
.auth-card .proof-stat { font-size: 18.5px; line-height: 1.32; color: var(--text); font-weight: 600; letter-spacing: -.01em; margin: 0 0 12px; }
.auth-card .proof-body { font-size: 14px; line-height: 1.6; color: var(--text-dim); margin: 0; }

/* =========================================================== 11. faq === */
.faq { margin-top: 32px; border-top: 1px solid var(--paper-border-soft); }
.faq details { border-bottom: 1px solid var(--paper-border-soft); }
.faq summary { padding: 22px 0; cursor: pointer; list-style: none; font: 600 17px/1.4 Inter, sans-serif; color: var(--paper-ink); display: flex; justify-content: space-between; align-items: center; gap: 20px; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:after { content: "+"; font: 400 20px/1 Inter, sans-serif; color: var(--olive); flex-shrink: 0; }
.faq details[open] summary:after { content: "\2212"; }
.faq summary:hover { color: var(--olive); }
.faq .answer { padding: 0 0 24px; color: var(--paper-ink-2); font-size: 14.5px; line-height: 1.65; max-width: 740px; }

/* =========================================================== 12. closing */
.closing { background: var(--navy); text-align: center; padding: 108px 24px; }
.closing h2 { max-width: none; font-size: clamp(30px, 4.6vw, 46px); margin: 0 auto 22px; line-height: 1.1; letter-spacing: -.015em; }
.closing h2 em { color: var(--text); font-weight: 800; font-style: normal; }
.closing .package { font-size: 16.5px; line-height: 1.6; color: var(--text-dim); max-width: 700px; margin: 0 auto 30px; }
.closing .ctas { justify-content: center; }
.closing .subtext { margin-top: 22px; color: var(--text-faint); font-size: 13.5px; font-style: italic; }
@media (max-width: 780px) { .closing { padding: 72px 22px; } }

/* =========================================================== 13. bands == */
/* Method, Guarantees, FAQ: the dark/light rhythm. Coordinator ruling
   (round B): the three light-band tokens (--cyan-lt, --olive, --brand-lt)
   are the brand law's own approved paper palette and stay -- cyan-lt is
   the read accent on paper (the eyebrow lives here, not olive, which
   stays reserved for the page's other paper markers: step badges, the
   accordion +, the timeline). --brand-lt is the mark on paper; this page
   has no mark rendered inside a light band, so it is unused here but not
   removed. The brandword no longer takes a light-band-only accent colour
   at all -- see the rule below. */
section.band { background: var(--paper); color: var(--paper-ink); }
/* The band's own box was the same width as its text (zero horizontal
   padding), so the paper edge and the eyebrow/h2/row text shared one x --
   flush, with no breathing room. Give the band the same left/right gutter
   the dark sections already get from .ch-layout's own padding, so the
   band's edge and its text are no longer the same line. */
.ch-content > section.band { padding-left: 22px; padding-right: 22px; }
@media (min-width: 1100px) { .ch-content > section.band { padding-left: 40px; padding-right: 40px; } }
/* Round-C ruling: the light-band eyebrow no longer takes its own ACCENT
   (--cyan-lt) -- checked with check-contrast.js first, though. Literally
   reusing --text-dim (the ruling's named colour, tuned for navy) here
   measures 3.43:1 against this band's #f7f8f5 paper -- a real WCAG AA
   fail (need 4.5:1), not a false positive: two nodes on this exact rule
   failed at --width=1280 before this fix. Every other band-vs-dark pair
   on this page already carries its own paper-safe value for the same
   semantic role (h2: --paper-ink vs --text; deck: --paper-ink-2 vs
   --text-dim) rather than one literal hex reused on both backgrounds, so
   the eyebrow follows that existing pattern: --paper-ink-3, the page's
   own quiet paper ink (5.18:1, verified), stands in for --text-dim here.
   Same move for the dot: --cyan-lt (6.16:1, this page's own paper-safe
   accent, already used below for links/badges/the accordion) stands in
   for --cyan, which is close to invisible on this paper (measured
   ~1.5:1) despite never being a text-contrast failure itself. Net effect
   is what the ruling asked for -- one QUIET eyebrow treatment, no
   stray accent colour -- translated per background like every other
   ink pair on the page, not one hex value that fails half the time. */
section.band .eyebrow { color: var(--paper-ink-3); }
section.band .eyebrow:before { background: var(--cyan-lt); }
section.band h2 { color: var(--paper-ink); }
section.band h2 em { color: var(--paper-ink); }
section.band .deck { color: var(--paper-ink-2); }
section.band a:not(.rail-item):not(.brandword) { color: var(--cyan-lt); }
section.band a:not(.rail-item):not(.brandword):hover { color: var(--cyan-lt-h); }
/* Brandword: one colour throughout the page, the ink colour at weight 700
   (already set by the base .brandword rule) -- never a second, brand-lt
   accent tint in light bands only. Before this fix the word "Headroom"
   read white in five places and green in two; now it is always whatever
   this section's own ink is (--text dark sections, --paper-ink here). */
section.band .brandword, section.band .brand-em { color: var(--paper-ink); }