/* ═══════════════════════════════════════════════════════════════════════════
   sections.css — every section of site/index.html, in one file.
   LOAD AFTER styles/carbon.css. It reads carbon.css's tokens and defines none
   of its own: one token file for the whole site is the point, and a second
   copy is a second thing to drift.

   ── WHERE THIS CAME FROM ─────────────────────────────────────────────────
   Assembled 2026-08-02 from eight partial stylesheets that were authored
   separately and never wired into a page. Folded here in the page's own
   order, deduped, and the partials deleted in the same change so there is one
   copy of each rule:

     s2-problem.css            → §2  the problem
     fold-artefact.html <style>→ §2.5 the hero's fold artefact
     s3-text-in-booking-out.css→ §3  the loop
     s3b-what-it-does.css      → §4  what's in it / what isn't
     s5-proof.css              → §5  the honest proof
     s7-objections.css         → §6  the frightening questions
     s8-faq.css                → §7  how it actually works
     pricing-card.css          → §8  the price
     close-cta.css             → §9  the ask
     pricing-page.css (2 of 3 blocks only) → §10 footer cross-links

   ── WHAT IS DELIBERATELY NOT HERE ────────────────────────────────────────
   · s4-demo-band.css. Its section is not mounted: the button points at
     demo.crewdocket.com, which does not resolve. The partial and its
     stylesheet are kept, unmounted, under site/sections/. Fold this file's
     §3.5 slot when the demo host answers.
   · close-cta.css's `.close-demo` block, for the same reason — index.html
     carries the ask without the demo door, so those rules would be dead CSS.
     They remain in site/sections/close-cta.css, which pricing.html and
     faq.html still load and which still shows the door.

   ── WHAT IS LEFT IN site/sections/ AFTER THE FOLD, AND WHY ───────────────
   Every partial whose content now lives in index.html was DELETED on
   2026-08-02 — all seven section .html files, their seven .css files,
   pricing-card.html, close-cta.html, and the _preview.html harness that
   mounted them. Six files remain, none of them redundant:

     pricing-card.css   ┐ linked DIRECTLY by site/pricing.html and/or
     close-cta.css      │ site/faq.html. Deleting them breaks two live pages
     pricing-page.css   │ that this change did not own. Their rules therefore
     close-cta.js       ┘ exist twice — once there, once here (close-cta.js's
                          twin is now block 2 of scripts/site.js).
     s4-demo-band.html  ┐ never mounted anywhere: the demo host does not
     s4-demo-band.css   ┘ resolve. Held, not redundant.

   ⚠ THE REMAINING DRIFT HAZARD, NAMED SO IT CANNOT HIDE. No page loads both
     a partial and this file, so there is no cascade collision — but there are
     two copies of those rules to edit. The fix is to repoint pricing.html and
     faq.html at styles/sections.css and scripts/site.js and delete the last
     four; it needs an owner for those two pages, which this change did not
     have.

   ── COLLISIONS FOUND WHILE FOLDING ───────────────────────────────────────
   `.why` is defined by two partials — pricing-card.css as `.pricing-row .why`
   and close-cta.css as `.close-field .why`. Both are descendant-scoped, the
   selectors never match the same element, and both are kept verbatim. That is
   the only name that appears twice in the whole fold. Every other class
   carries its section's prefix. Nothing was renamed and nothing was dropped
   on account of a collision.

   ── THE LAW, INHERITED WITHOUT EXCEPTION ─────────────────────────────────
   Flat surfaces: separation is fill-step + hairline, never a gradient, never
   a glow, never a shadow on a resting surface. ONE cobalt accent, and in this
   whole file it appears on exactly three things: the form's focus border, the
   checked crew-size chip, and nothing else — every button's cobalt comes from
   carbon.css's .btn-primary. Zero charts. Sentence case. Weight never above
   650. Figures tabular. Three breakpoints, 0 / 768 / 1100, and no fourth.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   §1 · SHARED
   ═══════════════════════════════════════════════════════════════════════════ */

/* Visually-hidden heading. §2 needs a labelled landmark for screen readers,
   but printing "The problem" above the buyer's own life would break the effect
   the copy depends on. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §2 · THE PROBLEM  (was s2-problem.css)

   This is the only section on the page that runs its lead line above body
   size without being a heading: it is the buyer's own Sunday night read back
   to him, and it has to land before he decides whether to keep reading.
   ═══════════════════════════════════════════════════════════════════════════ */

.problem-lead {
  font-size: var(--t-xl);          /* 23px */
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ink-0);
  /* Held tighter than --measure-max on purpose: short lines make this read as
     spoken rather than written. */
  max-width: 21em;
  text-wrap: pretty;
}

.problem-body {
  margin-top: var(--s-5);
  color: var(--ink-2);
  max-width: var(--measure-max);
  text-wrap: pretty;
}

/* The turn. A hairline above it does the work a heading would otherwise do. */
.problem-turn {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--ink-0);
  font-size: var(--t-md);
  font-weight: 500;
  max-width: var(--measure-max);
}


/* ═══════════════════════════════════════════════════════════════════════════
   §2.4 · THE HERO — the fold, budgeted in pixels

   carbon.css owns the hero's type and controls. This block owns only its
   VERTICAL BUDGET and its 1100px composition, because those are decisions
   about this page and no other: `.hero` exists on index.html alone (404.html
   uses .nf-*, the other four use .section--open), so nothing else on the site
   can see these rules.

   ── WHY IT WAS REORDERED, MEASURED NOT GUESSED ───────────────────────────
   Measured 2026-08-03 at 375×812, the fold the buyer actually got was:

     69      header
     105–505 headline, lede, proof rail, and BOTH actions   ← 456px, 56%
     525–812 the top 287px of a 614px artefact              ← cut mid-read-out

   The panel's payoff — the chip that turns the message into a booking — sat
   at 912px. The covenant sat at 968px. The honesty caption at 1056px. So the
   one thing on this page that shows the software working was, on a phone,
   entirely below the fold, and what a skeptic saw instead was two buttons
   asking for a decision he had been given no reason to make.

   The order is now: claim → consequence → the whole artefact → who built it
   → the action. A button above the argument is asking for the sale before
   the pitch; the artefact IS the pitch, so it goes first and it goes whole.

   ── WHY THESE NUMBERS AND NOT carbon.css's ───────────────────────────────
   The budget is 812px and it does not stretch. --s-6 top padding and --s-4
   stack gaps (against carbon's --s-7 / --s-5) buy 24px, which is the
   difference between the proof rail landing inside the fold and being sliced
   at its first line. Every pixel taken here was taken from air, not from
   type: no font size, weight, measure or touch target moved.
   ═══════════════════════════════════════════════════════════════════════════ */

.hero { padding-top: var(--s-6); }
.hero-stack { gap: var(--s-4); }

@media (min-width: 768px) {
  .hero { padding-top: var(--s-8); }
  .hero-stack { gap: var(--s-6); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §2.5 · THE FOLD ARTEFACT  (was sections/fold-artefact.html's <style>)

   The hero's one visual, and it is TYPE rather than a picture. Folded in
   2026-08-02; the partial was deleted in the same change. Requires
   carbon.css for every token and for .num — it defines neither.

   Design law observed, point by point:
     · Not one literal colour except #ffffff on the accent-solid chip. Every
       fill, ink and hairline is a var() reaching carbon.css, so this block
       cannot drift from the token sheet and inverts correctly under
       carbon.css's @media print.
     · Flat. Fill step + hairline does the separating. No gradient, no glow,
       no shadow — a resting surface gets a hairline.
     · ONE accent, on three things: the mark underline, the read-out's left
       rail, and the solid fill under the white chip label. Nothing else.
     · Sentence case. No uppercase, no letter-spaced labels. Weight tops at
       600. Tabular figures via carbon.css's .num.
     · Radii --r-xl / --r-lg / --r-md. No --r-pill: that is for tag and
       status chips, and an action chip is neither.
     · Zero charts, zero JS, zero images, zero network requests.
   ═══════════════════════════════════════════════════════════════════════════ */

.fold-art {
  margin: 0;
  width: 100%;
  /* The hero column is align-items:flex-start, so this must claim its width
     explicitly. Capped so the panel keeps a sane measure on a wide desktop
     rather than stretching one text message across 1080px. */
  max-width: 30rem;
}

.fa-panel {
  background: var(--bg-1);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-xl);
  overflow: hidden;
}

/* Each block is a hairline-separated band. No inner cards: card chrome is
   rationed, and the panel already spent it. */
.fa-block {
  padding: 14px;
  border-top: 1px solid var(--line);
}
.fa-block:first-child { border-top: 0; }

/* --- what came in -------------------------------------------------------- */

.fa-who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-1) var(--s-3);
  margin-bottom: var(--s-2);
  font-size: var(--t-base);
  line-height: 1.4;
}
.fa-name { color: var(--ink-0); font-weight: 500; }
.fa-time { color: var(--ink-3); font-variant-numeric: tabular-nums; }

.fa-msg {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-3);
  border-radius: var(--r-lg);
  color: var(--ink-1);
  font-size: var(--t-md);
  line-height: 1.5;
  /* An SMS is short. Keeping it off the full width of a desktop panel is what
     makes it read as a message and not as body copy. */
  max-width: 26em;
  text-wrap: pretty;
}

/* The scheduling phrase the parser found. <mark>'s user-agent style is a
   yellow highlight, which is both off-palette and a second accent — so it is
   fully overridden. The signal is ink weight plus a cobalt underline, which
   is sanctioned accent vocabulary (rails, dots, seams, underlines). */
.fa-hit {
  background: none;
  color: var(--ink-0);
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 1px;
}

/* --- what the app read out of it ----------------------------------------- */

/* The one rail in the artefact, and it marks the one thing this whole page is
   about: the structured read the software got out of an unstructured text. */
.fa-read {
  background: var(--bg-2);
  border-left: 2px solid var(--accent);
}

.fa-read-h {
  margin-bottom: var(--s-2);
  color: var(--ink-3);
  font-size: var(--t-base);
  font-weight: 500;
}

.fa-rows { margin: 0; }

.fa-row {
  display: grid;
  /* A fixed first column keeps the three values on one optical axis. It
     survives 320px: at --t-base the column is ~5.5rem and the value still
     gets the majority of a 280px panel. */
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: baseline;
  padding-block: 6px;
  border-top: 1px solid var(--line);
}
.fa-row:first-child { border-top: 0; padding-top: 0; }
.fa-row:last-child  { padding-bottom: 0; }

.fa-rows dt {
  color: var(--ink-2);
  font-size: var(--t-base);
}
.fa-rows dd {
  margin: 0;
  min-width: 0;
  color: var(--ink-0);
  font-size: var(--t-md);
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* --- the action row ------------------------------------------------------ */

/* MEASURED 2026-08-03, 375×812. The band that carries the payoff — the chip
   that turns the message into a booking — used to sit at 912px, a hundred
   pixels below the fold, and the covenant sat in a fourth band below that at
   968px. Both are now one band, because the two sentences are one idea: here
   is the booking, and it has not gone anywhere without you. Folding them cost
   the reader nothing and bought 58px of fold budget. The line this deleted —
   "Wendy mentioned a time —" — was a caption for a chip that already reads
   "Book Thu, Aug 6 · 9am", so it narrated what was underneath it. */
.fa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* Drawn as controls, declared as text. Deliberately NOT interactive: no
   cursor:pointer, no hover, no focus style, no tabindex — see the markup. */
.fa-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--accent-solid);   /* white label measures 5.17:1 ✓ AA */
  color: #ffffff;
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.2;
}
.fa-chip-quiet {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink-1);
}

/* --- the covenant, and the honesty caption ------------------------------- */

/* Inside the action band now, not a band of its own: it is the sentence that
   answers the chip beside it. No border and no padding of its own — the band
   already supplies both. */
.fa-foot {
  margin-top: var(--s-3);
  color: var(--ink-2);
  font-size: var(--t-base);
  line-height: 1.5;
  text-wrap: pretty;
}

/* Load-bearing honesty, not decoration: this is the visible statement that
   the panel above is typography and not a screen capture. It never drops
   below --t-base and it is never removed. */
.fa-cap {
  margin-top: var(--s-2);
  color: var(--ink-3);
  font-size: var(--t-base);
  line-height: 1.5;
  max-width: var(--measure-max);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .fa-block { padding: var(--s-5); }
  .fa-msg  { font-size: var(--t-body); }
  .fa-rows dd { font-size: var(--t-body); }
}

/* Not a fourth breakpoint — a floor. On a 320px screen .wrap leaves 280px and
   the read-out's fixed label column starts eating the value. Collapsing it to
   a stack costs one line each and keeps every value on one line. */
@media (max-width: 359px) {
  .fa-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .fa-chip { width: 100%; justify-content: center; }

  /* Same floor, same reason, for §12.2's read-out. MEASURED at 320: the
     4.25rem send-time rail left the customer's sentence 170px, which broke
     "friday morning would be perfect" across three lines and made the panel
     read as a paragraph rather than as a table. Stacking the stamp costs one
     line per row and gives the sentence the full 252px. */
  .res-row {
    grid-template-areas:
      "stamp"
      "in"
      "out"
      "why";
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §3 · THE LOOP  (was s3-text-in-booking-out.css)

   Design law observed here:
     - Open section. The only boxed thing is the covenant, and it earns it by
       being the one sentence that has to survive being skimmed.
     - The diagrams sit on --bg-1 with a hairline. No shadow: a resting
       surface gets a hairline, shadows live on overlays.
     - The step figure is deliberately NOT full-bleed on a phone. A 360px
       drawing blown to 100% of a 375px screen renders its 10.5px labels
       illegibly; capping it keeps the type at its designed size.
     - Alternating sides at 1100+ only. On a phone every step is image-then-
       text, in reading order, because a thumb scrolls one column.
   ═══════════════════════════════════════════════════════════════════════════ */

.flow-sub { margin-top: var(--s-3); color: var(--ink-2); }

/* --- the step list ------------------------------------------------------- */
.flow { margin-top: var(--s-8); }

/* --s-6, not --s-7. Two gaps of 36+36 between three steps spent 144px of a
   phone screen on air inside a section that measured 2,702px — and the
   hairline is what separates these, not the distance. */
.flow-step {
  padding-top: var(--s-6);
  margin-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.flow-step:first-child { padding-top: 0; margin-top: 0; border-top: 0; }

/* --- the diagram --------------------------------------------------------- */
.flow-shot { margin: 0 0 var(--s-5); }

.flow-shot img {
  width: 100%;
  max-width: 360px;          /* the drawing's own design size — see header */
  border: 1px solid var(--panel-line);
  border-radius: var(--r-xl);
  background: var(--bg-1);
}

/* The caption is load-bearing honesty, not decoration: it is the visible
   statement that this is a drawing and not a screenshot. It never drops
   below ink-3 and it is never removed. */
.flow-cap {
  margin-top: var(--s-3);
  max-width: 360px;
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.45;
}

/* --- the text ------------------------------------------------------------ */
.flow-n { display: block; margin-bottom: var(--s-2); color: var(--ink-3); }

.flow-text .h3 { max-width: 24ch; }

.flow-p {
  margin-top: var(--s-4);
  color: var(--ink-2);
  max-width: var(--measure-max);
  text-wrap: pretty;
}
/* Emphasis carries as colour, never as italic or extra weight. */
.flow-p em { font-style: normal; color: var(--ink-0); }

/* The one number in this section, on the shell's cobalt proof rail. */
.flow-proof { margin-top: var(--s-5); font-size: var(--t-md); }

/* --- the covenant: DELETED 2026-08-03, and why ---------------------------
   `.flow-covenant` was a boxed sentence at the foot of this section reading
   "Nothing in there goes out on its own. CrewDocket drafts — you press send."
   The same rule is now stated three times on one page: SHOWN in the hero
   artefact (".fa-foot", inside the panel, beside the booking it did not
   send), and PROVED under §6's first question, which names the deleted
   scheduler. This was the middle statement — the one that only told. Show
   then prove is stronger than show, tell, prove, and dropping the box
   returned 186px of a section that measured 2,702px on a phone.
   The rules went with the markup so this file carries no dead selector; the
   768 breakpoint's `.flow-covenant` line was removed in the same edit. */


/* ═══════════════════════════════════════════════════════════════════════════
   §3.5 · THE DEMO BAND — SLOT, INTENTIONALLY EMPTY

   site/sections/s4-demo-band.css belongs here, and its section belongs
   between §3 and §4 of index.html. Both are held back because
   demo.crewdocket.com does not resolve (ownership items #6 and #7). Fold the
   file in at this point and mount the partial in the same change — not one
   without the other.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   §4 · WHAT'S IN IT, AND WHAT ISN'T  (was s3b-what-it-does.css)

   WHY NOT THE SHELL'S .rows: carbon.css's .rows is a flex key/value line with
   space-between, built for short right-aligned values. The rows here carry a
   sentence, which needs a two-column grid on wide screens and a stacked block
   on a phone. Same hairline, same ink steps, same rhythm — a different shape
   for a different payload, not a second design language.

   The gap list drops BOTH ink steps (ink-1 / ink-3) so it reads as quieter
   without ever becoming unreadable — ink-3 measures 5.0:1 on canvas, still
   AA. It carries no colour, no warning tint and no icon. It is a list of
   facts, not an alert.
   ═══════════════════════════════════════════════════════════════════════════ */

.spec-sub { margin-top: var(--s-3); color: var(--ink-2); }

.spec { margin-top: var(--s-6); }

/* --s-3, not --s-4 and certainly not --s-5. Eighteen rows at 20px top and
   bottom spend 720px on padding alone, and on a phone that is a whole screen
   of nothing; at 16px it is still 576px. The hairline is what separates
   these, not the air. Measured 2026-08-03: dropping to 12px took 144px out of
   a section that ran 2,741px at 375. Nothing here is a touch target — it is a
   read-only spec sheet — so the 44px floor does not apply. */
.spec-row {
  padding-block: var(--s-3);
  border-top: 1px solid var(--line);
}
.spec-row:last-child { border-bottom: 1px solid var(--line); }

.spec-k {
  color: var(--ink-0);
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1.35;
}

/* margin-inline: 0 IS LOAD-BEARING — see the note on .ledger-v below. */
.spec-v {
  margin-top: var(--s-2);
  margin-inline: 0;
  color: var(--ink-2);
  font-size: var(--t-md);
  line-height: 1.5;
  max-width: var(--measure-max);
  text-wrap: pretty;
}

/* --- the gap list -------------------------------------------------------- */
.spec-gaps-h { margin-top: var(--s-8); }

.spec-gaps-sub {
  margin-top: var(--s-2);
  color: var(--ink-3);
  font-size: var(--t-md);
  max-width: var(--measure-max);
}

.spec--gaps { margin-top: var(--s-5); }
.spec--gaps .spec-k { color: var(--ink-1); font-weight: 450; }
.spec--gaps .spec-v { color: var(--ink-3); }


/* ═══════════════════════════════════════════════════════════════════════════
   §5 · THE HONEST PROOF  (was s5-proof.css)

   The reasoning that matters here:
     - THE FIGURES ARE INK, NOT ACCENT. Same rule as the price. A number
       rendered in cobalt reads as a marketing number; a number rendered in
       ink-0 reads as a fact. The only cobalt in this section is the closing
       proof rail, which carbon.css owns.
     - NO COUNT-UP ANIMATION, ever: "a count-up animation on a real number
       still reads as a fake number." There is no JS in this section at all.
     - Tabular figures on every numeral (.num), so 2,799 and 249 align and
       neither wobbles against the other.
     - The row that admits a gap ("None yet") drops to ink-3 rather than
       gaining a colour. Nothing on this site signals with red or amber.
     - No chart. Nothing here is plotted, and this is the section where the
       temptation would be.
   ═══════════════════════════════════════════════════════════════════════════ */

.proof-story { margin-top: var(--s-5); }

.proof-p {
  margin-top: var(--s-4);
  color: var(--ink-1);
  max-width: var(--measure-max);
  text-wrap: pretty;
}
.proof-p:first-child { margin-top: 0; }

.proof-h3 { margin-top: var(--s-8); }

/* --- the ledger ---------------------------------------------------------- */
.ledger { margin-top: var(--s-6); }

.ledger-row {
  padding-block: var(--s-4);
  border-top: 1px solid var(--line);
}
.ledger-row:last-child { border-bottom: 1px solid var(--line); }

.ledger-k {
  color: var(--ink-2);
  font-size: var(--t-base);
  line-height: 1.4;
}

/* ═══ THE USER-AGENT dd INDENT, KILLED ═══════════════════════════════════
   carbon.css's reset covers `ul, ol` but not `dl`, so every <dd> on this
   page inherited the user agent's `margin-inline-start: 40px`. This element
   had no rule at all, which is how it went unseen.

   MEASURED 2026-08-03 at 375px, before the fix: .ledger-v and .spec-v both
   rendered at x=60 while their <dt> sat at x=20 — a second, ragged left edge
   running down the two longest sections on the page — and each value was
   handed 295px of measure instead of 335px. That missing 40px is what was
   pushing two-line values onto a third line, so this one declaration is also
   worth ~24px per affected row.

   Kept as its own rule rather than folded into a `dd { margin: 0 }` reset:
   sections.css is loaded by all six pages, and a bare element reset here
   would reach markup this change does not own. */
.ledger-v { margin-inline: 0; }

.ledger-fig {
  display: block;
  margin-top: var(--s-3);
  color: var(--ink-0);
  font-size: var(--t-2xl);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
}

.ledger-note {
  display: block;
  margin-top: var(--s-2);
  color: var(--ink-2);
  font-size: var(--t-md);
  line-height: 1.5;
  max-width: var(--measure-max);
  text-wrap: pretty;
}

/* The thing we cannot prove. Quieter, never coloured, never hidden. */
.ledger-row--cant .ledger-fig  { color: var(--ink-3); }
.ledger-row--cant .ledger-note { color: var(--ink-3); }

.proof-close { margin-top: var(--s-7); color: var(--ink-0); }


/* ═══════════════════════════════════════════════════════════════════════════
   §6 · THE FRIGHTENING QUESTIONS  (was s7-objections.css)

   Open section, hairline-ruled questions. No cards, no accordion, no
   expand-collapse: every answer here is short enough to read, and hiding an
   objection behind a tap is the opposite of what this section is for.
   Emphasis is a colour step (ink-2 → ink-0), never italic, never bold.
   ═══════════════════════════════════════════════════════════════════════════ */

.qs { margin-top: var(--s-6); }

.q {
  padding-block: var(--s-5);
  border-top: 1px solid var(--line);
}
.q:last-child { border-bottom: 1px solid var(--line); }

.q-h { max-width: 30ch; }

.q-a {
  margin-top: var(--s-4);
  color: var(--ink-2);
  max-width: var(--measure-max);
  text-wrap: pretty;
}
.q-a em { font-style: normal; color: var(--ink-0); }

/* The hand-off link carries .link-lg — carbon.css's opt-in for a STANDALONE
   prose link — so it clears the 44px touch floor on a phone. Bare `a` is
   deliberately excluded from that floor because inline links in running text
   would blow up paragraph leading; this one is its own block, so it opts in.
   The margin is small because .link-lg's own 44px box supplies the gap. */
.q-more { margin-top: var(--s-1); }
.q-more .link-lg { font-size: var(--t-base); }

.qs-all { margin-top: var(--s-5); }


/* ═══════════════════════════════════════════════════════════════════════════
   §7 · HOW IT ACTUALLY WORKS  (was s8-faq.css)

   WHY <details> AND NOT A JS ACCORDION: it opens with JavaScript disabled, it
   is keyboard-operable for free, screen readers announce the expanded state
   without any ARIA from us, and the closed content is still in the DOM for a
   crawler.

   The disclosure mark is a CSS chevron built from two borders. No icon font,
   no inline SVG per row, no emoji. It rotates on open; under
   prefers-reduced-motion carbon.css already flattens the transition.

   The summary clears the 44px touch floor by itself (min-height 52px), not
   only under the (hover: none) rule, because a question is the most tapped
   thing in this section.
   ═══════════════════════════════════════════════════════════════════════════ */

.faq-sub { margin-top: var(--s-3); color: var(--ink-2); }

.faq { margin-top: var(--s-6); }

.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 52px;
  padding-block: var(--s-3);
  cursor: pointer;
  color: var(--ink-0);
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.008em;
  /* Kill the native disclosure triangle in both engine families. */
  list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }

/* The mark: a hairline chevron, drawn from two borders. */
.faq-q::after {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 3px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out);
}
.faq-item[open] .faq-q::after {
  transform: rotate(225deg) translate(-2px, -2px);
  border-color: var(--ink-1);
}

.faq-a { padding-bottom: var(--s-5); }

.faq-a p {
  color: var(--ink-2);
  font-size: var(--t-md);
  line-height: 1.5;
  max-width: var(--measure-max);
  text-wrap: pretty;
}
.faq-a em { font-style: normal; color: var(--ink-0); }


/* ═══════════════════════════════════════════════════════════════════════════
   §8 · THE PRICE  (was pricing-card.css)

   Every class is prefixed `pricing-` so it cannot collide with the shell
   vocabulary (.wrap .section .btn .rows .cta-card …) or with any other
   section.

     · ONE card. Not three columns, not a tier ladder, not a toggle.
     · The number is INK, not accent. The only cobalt in this section is the
       button fill, which comes from .btn-primary in carbon.css.
     · No strikethrough comparison price. No ghost "$180". No "save 60%".
     · Hairline-separated rows. No check icons, no green ticks, no emoji.
     · What is honestly NOT included yet prints in --ink-3, in the same list.
   ═══════════════════════════════════════════════════════════════════════════ */

.pricing-sub { margin-top: var(--s-3); color: var(--ink-2); }

.pricing-card {
  background: var(--bg-1);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-5);
  margin-top: var(--s-6);
}

/* ─── the number ────────────────────────────────────────────────────────── */
.pricing-lead {
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s-5);
}

.pricing-figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.pricing-amount {
  color: var(--ink-0);
  font-size: 52px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
/* An UNSET price renders quiet and un-numberlike, never as a figure. A
   placeholder that looks like a price is the exact failure this site exists
   to remove: a published price is a promise. Removing data-token is the same
   edit as substituting the real number, so the two cannot separate. */
.pricing-amount[data-token] {
  color: var(--ink-3);
  letter-spacing: 0;
  font-size: var(--t-2xl);
  font-weight: 500;
}
.pricing-period { color: var(--ink-2); font-size: var(--t-lg); }

.pricing-terms {
  margin-top: var(--s-3);
  color: var(--ink-0);
  font-size: var(--t-md);
  max-width: var(--measure-max);
}
.pricing-currency {
  margin-top: var(--s-1);
  color: var(--ink-2);
  font-size: var(--t-base);
  line-height: 1.5;
  max-width: var(--measure-max);
}

/* ─── what the price buys ───────────────────────────────────────────────── */
/* index.html carries NO feature list inside this card. It used to carry two —
   twelve things you get and five you don't — and the section immediately
   below the card is a full spec sheet of the same eighteen rows. A buyer who
   reads the same list twice in one scroll stops trusting the page. So the
   card states the scope in one sentence and hands off; #whats-in-it is the
   single authoritative list. Keep it that way.
   The .pricing-list rules below stay because site/pricing.html renders the
   long card and loads this same stylesheet. */
.pricing-scope {
  margin-top: var(--s-5);
  color: var(--ink-1);
  font-size: var(--t-md);
  line-height: 1.55;
  max-width: var(--measure-max);
  text-wrap: pretty;
}

/* ─── the lists ─────────────────────────────────────────────────────────── */
.pricing-list { margin-top: var(--s-5); }
.pricing-list h3 {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0;          /* sentence case, never letter-spaced open */
}
.pricing-list ul { margin-top: var(--s-2); }

.pricing-row {
  padding-block: var(--s-3);
  border-top: 1px solid var(--line);
  color: var(--ink-0);
  font-size: var(--t-md);
  line-height: 1.45;
  max-width: var(--measure-max);
}
.pricing-row:first-child { border-top: 0; }
/* COLLISION NOTE: `.why` also exists under §9 as `.close-field .why`. Both
   are descendant-scoped and never match the same element. Kept verbatim. */
.pricing-row .why {
  display: block;
  margin-top: 2px;
  color: var(--ink-2);
  font-size: var(--t-base);
  line-height: 1.5;
}

/* The honest gaps. Same list, same hairlines, one step quieter. "Printing
   your own gaps next to your price is the most persuasive thing on the page,
   because nobody fakes that." */
.pricing-gaps {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.pricing-gaps .pricing-row,
.pricing-gaps .pricing-row .why { color: var(--ink-3); }
.pricing-gaps .pricing-state { color: var(--ink-2); }

/* ─── the close ─────────────────────────────────────────────────────────── */
.pricing-act { margin-top: var(--s-6); }
.pricing-act .btn { width: 100%; min-height: 52px; }
.pricing-note {
  margin-top: var(--s-3);
  color: var(--ink-2);
  font-size: var(--t-base);
  max-width: var(--measure-max);
}

/* The one in-body link out to pricing.html. It sits under the button rather
   than beside it: two things that look like actions on one row makes the
   reader choose, and there is exactly one action here. */
.pricing-more { margin-top: var(--s-4); }

/* ─── how the money actually moves, stated plainly ──────────────────────── */
.pricing-billing {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--t-base);
  line-height: 1.55;
  max-width: var(--measure-max);
}
.pricing-billing strong { color: var(--ink-1); font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════════════════
   §9 · THE ASK  (was close-cta.css, minus the demo door)

   Every class is prefixed `close-`. ONE accent colour, and in this block it
   lands on exactly two things: the input's focus border and the checked
   crew-size chip. The button's cobalt is carbon.css's .btn-primary.

   The discipline this encodes: the ask explains what every field is for,
   there is no countdown, no interrupt, no exit modal, no "how did you hear
   about us", no revenue question. Nothing here collects anything for
   CrewDocket's benefit before the visitor has had something for theirs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The demo door normally sits above the ask and supplies this margin's
   reason. index.html holds the door back until the demo host resolves, so on
   this page the ask is the first child and takes no top margin. Both states
   are correct; the selector decides which applies. */
.close-ask { margin-top: var(--s-8); }
.close-ask:first-child { margin-top: 0; }
.close-ask .lede { margin-top: var(--s-3); }

.close-mailto { margin-top: var(--s-5); }
.close-mailto .btn { width: 100%; min-height: 52px; }
.close-fine {
  margin-top: var(--s-3);
  color: var(--ink-2);
  font-size: var(--t-base);
  max-width: var(--measure-max);
}

/* The structured form. Hidden in the source and revealed by scripts/site.js
   only once the lead endpoint is real — see the file header there. */
.close-form { margin-top: var(--s-5); max-width: 32rem; }
.close-form[hidden] { display: none; }

.close-field { margin-bottom: var(--s-5); }
.close-field > label,
.close-field > fieldset > legend {
  display: block;
  padding: 0;
  color: var(--ink-1);
  font-size: var(--t-md);
  font-weight: 600;
}
/* COLLISION NOTE: see the matching note under §8. */
.close-field .why {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: var(--t-base);
  line-height: 1.45;
  max-width: var(--measure-max);
}
.close-field input[type="text"] {
  display: block;
  width: 100%;
  margin-top: var(--s-2);
  min-height: 48px;
  padding: 10px 14px;
  /* 16px is the iOS zoom-on-focus threshold for inputs. Never go under it —
     Safari zooms the whole page on tap. */
  font-size: var(--t-md);
  color: var(--ink-0);
  background: var(--bg-3);
  border: 1px solid var(--line-3);
  border-radius: var(--r-md);
}
.close-field input::placeholder { color: var(--ink-3); }
.close-field input:focus-visible { border-color: var(--accent); }

.close-form fieldset { border: 0; margin: 0; padding: 0; }

/* Crew size — four targets, each ≥44px tall, ≥8px apart. */
.close-choices { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.close-choice { position: relative; display: inline-flex; }
.close-choice input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.close-choice span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; min-width: 62px;
  padding-inline: var(--s-4);
  background: var(--bg-3);
  border: 1px solid var(--line-3);
  border-radius: var(--r-md);
  color: var(--ink-1);
  font-size: var(--t-md);
  font-variant-numeric: tabular-nums;
}
.close-choice input:checked + span {
  border-color: var(--accent-edge);
  background: var(--accent-fill);
  color: var(--ink-0);
}
.close-choice input:focus-visible + span {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Honeypot. Off-screen rather than display:none, which some bots skip.
   No CAPTCHA: a crew owner in a driveway should not have to identify a fire
   hydrant to talk to somebody. */
.close-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.close-submit { margin-top: var(--s-6); }
.close-submit .btn { width: 100%; min-height: 52px; }

/* ─── result states ─────────────────────────────────────────────────────── */
/* Success renders ONLY after a resolved 2xx. The page this replaces showed it
   BEFORE the fetch and swallowed the failure in an empty .catch(). */
.close-result {
  margin-top: var(--s-5);
  padding: var(--s-5);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  color: var(--ink-1);
  font-size: var(--t-md);
  line-height: 1.55;
  max-width: var(--measure-max);
}
.close-result[hidden] { display: none; }
.close-result .close-sig {
  display: block;
  margin-top: var(--s-3);
  color: var(--ink-2);
  font-size: var(--t-base);
}

/* ─── what we do NOT ask for ────────────────────────────────────────────── */
.close-notask {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.close-notask h3 {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0;
}
.close-notask ul { margin-top: var(--s-2); }
.close-notask li {
  position: relative;
  padding: 5px 0 5px var(--s-4);
  color: var(--ink-3);
  font-size: var(--t-base);
  line-height: 1.5;
  max-width: var(--measure-max);
}
.close-notask li::before {
  content: "";
  position: absolute; left: 0; top: 13px;
  width: 4px; height: 4px;
  border-radius: var(--r-pill);
  background: var(--ink-3);
}

/* ─── the sign-off ──────────────────────────────────────────────────────── */
/* The last thing on the page before the footer. It is a person, not a pitch,
   so it takes ink-1 and a hairline above it rather than a card. */
.close-sign {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--ink-1);
  font-size: var(--t-md);
  line-height: 1.55;
  max-width: var(--measure-max);
  text-wrap: pretty;
}
.close-sign-name {
  display: block;
  margin-top: var(--s-3);
  color: var(--ink-2);
  font-size: var(--t-base);
}


/* ═══════════════════════════════════════════════════════════════════════════
   §10 · FOOTER CROSS-LINKS  (two blocks lifted from pricing-page.css)

   Only `.pc-foot-links` is needed here — index.html's header carries a CTA
   rather than a nav, which is right for the page the funnel starts on, so
   `.pc-nav` is not folded. The draft band and the question layout in
   pricing-page.css belong to pricing.html and faq.html and are not folded
   either.

   Standalone links, not prose links, so they take the 44px touch floor
   unconditionally rather than through carbon.css's @media (hover: none) — a
   measured pass at 375px caught these at 22px tall. The -12px inline margin
   keeps them optically flush with the footer's left edge while the tap target
   stays full size.
   ═══════════════════════════════════════════════════════════════════════════ */

.pc-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-inline-start: -12px;
}
.pc-foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px;
  border-radius: var(--r-md);
  color: var(--ink-2);
  font-size: var(--t-base);
}
.pc-foot-links a:hover { color: var(--ink-0); background: var(--bg-1); text-decoration: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   §12 · THE ARTEFACTS — the sections that were paragraphs, built as objects
   Added 2026-08-03.

   WHY THIS BLOCK EXISTS. Before it, the page carried a visual in two of its
   nine sections: the hero's fold artefact and the two SVG drawings in the
   loop. The other seven were a heading and prose on the same slab, and the
   whole document ran on two background fills. Nothing here removes a word to
   make room — every rule below adds a surface, a rail or a rhythm to markup
   that was already there, or dresses markup added in the same change.

   HOW DEPTH IS MADE HERE, given there is no gradient and no glow to reach
   for. Exactly the three things carbon.css's token header names:
     · THE FILL STEP. bg-0 canvas → bg-1 object → bg-2 header band, and bg-0
       again INSIDE an object to make a well. A recessed thing at bg-0 sitting
       in a bg-1 card reads as sunk; the same fill on the canvas reads as
       nothing. That inversion is the whole trick and it costs no colour.
     · THE BEVEL. --e-catch / --e-seat / --e-sunk from carbon.css. 1px insets,
       zero blur, zero spread. A raised object catches light on its top edge
       and seats on its bottom; a well is the exact inverse. Read this file's
       panels at arm's length and the bevel is what you are seeing.
     · THE AIR. A raised object gets more margin than a flush one, because at
       ten feet a 1px line is invisible and space is not.

   MOTION IS NOT DEFINED HERE. carbon.css owns the entrance system — the
   tokens (--d-enter, --d-stagger, --enter-lift, --ease-enter), the
   prefers-reduced-motion belt, and the [data-reveal] / [data-reveal-seq]
   contract. This file only STAMPS those attributes onto the objects it
   builds, so there is one motion system on the site and not two. Every
   artefact below is fully legible with the attribute doing nothing, which is
   the state the page is in whenever a visitor has asked for less motion.

   THE HONESTY RULES, unchanged. Every artefact is CSS and type in the site's
   own tokens — no screenshots, no mock-ups, no invented statistic. Anything
   illustrative carries a caption saying so, in the voice the hero already
   uses. The one place figures appear that a reader might take for data (the
   invoice) says in its caption which numbers are imagined and which is the
   real tax rate. Zero charts, and no plot was drawn to dodge that.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── the artefact shell, shared by every drawn panel in this file ────────
   Same construction as §2.5's .fa-panel, which is the standard this whole
   block is trying to match: bg-1 surface, one hairline, --r-xl, and bands
   inside it separated by hairlines rather than by nested cards. The bevel is
   the only thing added — .fa-panel predates the tokens and can take it in a
   later pass without any other change. */
.art-panel {
  background: var(--bg-1);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-xl);
  box-shadow: var(--e-catch), var(--e-seat);
  overflow: hidden;
}

/* The header band steps UP to bg-2 — a raised strip on a raised surface. It
   carries what the object is on the left and when it happened on the right,
   which is the same two-part header the app puts on every drill. */
.art-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-3) 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-base);
  line-height: 1.4;
}
.art-head-k { color: var(--ink-0); font-weight: 500; }
.art-head-v { color: var(--ink-3); }

/* The foot band steps DOWN to bg-0 and takes the inverted bevel, so it reads
   as a well cut into the panel rather than another band stacked on it. This
   is the one move in the file that produces depth in both directions off a
   single surface. */
.art-foot {
  padding: var(--s-3) 14px;
  border-top: 1px solid var(--line);
  background: var(--bg-0);
  box-shadow: var(--e-sunk);
}
.art-foot-p {
  color: var(--ink-2);
  font-size: var(--t-base);
  line-height: 1.5;
  text-wrap: pretty;
}

/* The figure wrapper. Mirrors .flow-shot's role but sizes to the panel rather
   than to a 360px drawing, so on a phone the artefact gets the column and on
   a desktop it caps where a text message stops looking like a text message. */
.flow-art {
  margin: 0 0 var(--s-5);
  max-width: 30rem;
}
.flow-art .flow-cap { max-width: none; }


/* ═══ §12.1 · THE PROBLEM'S THREE LOOSE ENDS ══════════════════════════════
   The lead sentence names three things and the sentence under it names the
   three places they live. Prose is the wrong shape for a list of three, so
   the same six facts are also the objects: what it is, and — under a hairline
   — where it currently is. Nothing is claimed here that the copy above does
   not already say; this is the paragraph drawn instead of read.

   They are SLIPS, deliberately: bg-1 with the raised bevel, sitting loose on
   the canvas with nothing joining them. That is the point of the section. */
.loose {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.loose-slip {
  padding: var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--e-catch), var(--e-seat);
}
.loose-what {
  color: var(--ink-0);
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
}
.loose-where {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--t-base);
  line-height: 1.4;
}


/* ═══ §12.2 · STEP ONE'S ARTEFACT — WHAT THE PARSER RETURNS ═══════════════
   The hero shows ONE message pulled apart. This shows the thing the hero
   cannot: that the answer depends on when the message arrived. Three inputs,
   three send-times, three answers.

   EVERY VALUE IN THIS PANEL IS REAL. The three sentences are inputs from
   v2/scripts/smartParse.test.mjs; the three answers are the labels
   parseMessage() actually returns for them at those moments, checked by
   running the engine on 2026-08-03 (249 passed, 0 failed). Nothing here was
   composed to look good — if the engine's answer changes, this panel is
   wrong and has to change with it. That is the deal the caption makes.

   The cobalt rail on the answer is the same rail §2.5 puts on .fa-read, and
   it means the same thing in both places: this side is what the software
   read, not what the customer typed. */
.res-row {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  grid-template-areas:
    "stamp in"
    ".     out"
    ".     why";
  column-gap: var(--s-3);
  row-gap: 5px;
  padding: var(--s-4) 14px;
  border-top: 1px solid var(--line);
}
.res-row:first-child { border-top: 0; }

.res-stamp {
  grid-area: stamp;
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.45;
}
.res-in {
  grid-area: in;
  color: var(--ink-1);
  font-size: var(--t-base);
  line-height: 1.45;
  text-wrap: pretty;
}
.res-out {
  grid-area: out;
  padding-left: var(--s-3);
  border-left: 2px solid var(--accent);
  color: var(--ink-0);
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1.35;
}
.res-why {
  grid-area: why;
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.45;
  text-wrap: pretty;
}


/* ═══ §12.3 · STEP THREE — THE QUOTE, THE SEAM, THE INVOICE ═══════════════
   Step three's copy carries two ideas and had one drawing. The quote drawing
   stays exactly as it was; the invoice it turns into is now drawn underneath
   it, and a labelled hairline seam says what happens in between. The three
   artefacts on this page are one imagined job travelling through the
   software: Wendy's message in the hero, her stop on the day sheet in step
   two, R. Caldwell's quote and then R. Caldwell's invoice here. The figures
   agree across both drawings on purpose — 310 + 95 = 405, and 405 at 13% is
   52.65, which is the 457.65 already printed on the quote.

   THE TAX IS NOT INVENTED. 13% is HST_RATE in v2/src/lib/format.js and the
   caption says so. The line items and the amounts are imagined and the
   caption says that too. */
.flow-media { min-width: 0; }
.flow-media .flow-shot { margin-bottom: 0; }

/* A label set into a hairline, which is the quietest way to say "and then"
   without drawing an arrow. Two rules, no glyph, no icon. */
.flow-seam {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-5) 0;
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.4;
}
.flow-seam::before {
  content: '';
  flex: none;
  width: 24px;
  height: 1px;
  background: var(--line-2);
}
.flow-seam::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.inv { padding-block: var(--s-2); }
.inv-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 6px 14px;
  font-size: var(--t-base);
  line-height: 1.4;
}
.inv-what { color: var(--ink-2); min-width: 0; }
.inv-amt  { color: var(--ink-1); flex: none; }

/* The ladder's first rung. Selected by relationship rather than by an nth-
   child count so re-ordering a line item cannot silently move the rule. */
.inv-line:not(.inv-line--sum):not(.inv-line--grand) + .inv-line--sum {
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

.inv-line--grand {
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
  border-top: 1px solid var(--line-2);
}
.inv-line--grand .inv-what { color: var(--ink-0); font-weight: 500; }
.inv-line--grand .inv-amt  {
  color: var(--ink-0);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
}


/* ═══ §12.4 · THE PROOF — THE LEDGER AS AN OBJECT ═════════════════════════
   This is the strongest writing on the page and it was set as five
   undifferentiated rows on the canvas. It is now a ledger: one card, rows
   inside it, and the claim it CANNOT make cut into the card as a well rather
   than printed at the bottom of the same flat list.

   The well is the whole argument of this section made structural. Four things
   sit on the surface; the fifth is recessed, at canvas fill, under the
   inverted bevel. Nothing about it is coloured, nothing is hidden, and it
   holds the same width and the same type as the rows above it — it is simply
   built into the object at a different level, which is what "and one I can't"
   means. */
.proof-story .proof-p:first-child {
  color: var(--ink-0);
  font-size: var(--t-lg);
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.ledger {
  margin-top: var(--s-6);
  background: var(--bg-1);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-xl);
  box-shadow: var(--e-catch), var(--e-seat);
  overflow: hidden;
}
/* Overrides §5's canvas-row geometry: inside a card the rows take the card's
   inline padding and the outer hairlines belong to the border, not to a row. */
.ledger-row {
  padding: var(--s-5);
  border-top: 1px solid var(--line);
}
.ledger-row:first-child { border-top: 0; }
.ledger-row:last-child  { border-bottom: 0; }

.ledger-row--cant {
  background: var(--bg-0);
  border-top-color: var(--line-2);
  box-shadow: var(--e-sunk);
}

/* Two of the five figures are phrases, not numbers, and at --t-3xl "All of
   it" is wider than the rail that holds 5,799. It steps down instead of
   shrinking the rail, because the rail is what makes the numbers a column. */
.ledger-fig--word {
  font-size: var(--t-xl);
  letter-spacing: -0.015em;
}


/* ═══ §12.5 · WHAT'S IN IT — A SPEC SHEET WITH A WAY IN ═══════════════════
   Eighteen key/value rows in two undifferentiated runs. A spec sheet is read
   by jumping, not by reading, and there was nothing to jump to.

   What was added: four named groups over the ten things that exist, a chip
   index that scrolls to any of them, and a state token on each of the eight
   things that do not. Not one row was removed and not one sentence changed.
   The rows moved only where a group demanded it — "Chasing money" now sits
   with quotes and invoicing instead of second in a flat list.

   EVERY STATE TOKEN IS QUOTED FROM ITS OWN ROW. "Not planned" appears only on
   crew tracking, whose sentence reads "Not built, not planned"; "Deliberate"
   appears only where the sentence ends in that word; "Partly" is the honest
   reading of a row that says the day loads offline and marking it done does
   not. The token is a compression of the sentence beside it and never a new
   claim, which is why it can be scanned without reading. */
.spec-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.spec-index a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--e-catch);
  color: var(--ink-1);
  font-size: var(--t-base);
  transition: background-color var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out);
}
.spec-index a:hover {
  background: var(--bg-2);
  border-color: var(--line-2);
  color: var(--ink-0);
  text-decoration: none;
}
.spec-index a:active { background: var(--bg-3); }

/* --line-2 rather than --line: the group rule has to out-rank the row rules
   underneath it or the grouping does not read at all. That one step is the
   entire visual difference between four groups and eighteen rows. */
.spec-group {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-2);
  /* The index chips scroll here, and a heading flush against the viewport top
     reads as a heading that got cut off. */
  scroll-margin-top: var(--s-6);
}
.spec-g-h {
  color: var(--ink-2);
  font-size: var(--t-base);
  font-weight: 500;
  letter-spacing: 0;          /* sentence case, never letter-spaced open */
}
.spec-group .spec { margin-top: var(--s-4); }

.spec-state {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 1px 7px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font-size: var(--t-sm);
  font-weight: 450;
  line-height: 1.5;
  white-space: nowrap;
}

/* The gaps get the only full panel in this section, because they are the part
   a buyer is most likely to skip and most likely to regret skipping. A fill
   step and a bevel is the whole treatment — no tint, no icon, no warning
   colour. It is a list of facts, not an alert. */
.spec-gaps-panel {
  margin-top: var(--s-5);
  padding-inline: var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-xl);
  box-shadow: var(--e-catch), var(--e-seat);
}
.spec-gaps-panel .spec { margin-top: 0; }
.spec-gaps-panel .spec-row:first-child { border-top: 0; padding-top: var(--s-5); }
.spec-gaps-panel .spec-row:last-child  { border-bottom: 0; padding-bottom: var(--s-5); }


/* ═══ §12.6 · THE QUESTIONS — AN INDEX, NOT A PILE ════════════════════════
   Four objections in a row with nothing to hold a reader's place. A tabular
   numeral and a 20px tick under it costs no chrome and gives the section a
   left edge that counts. aria-hidden in the markup: the numeral is
   typographic structure and a screen reader gets the heading. */
.q-n {
  color: var(--ink-3);
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: var(--s-3);
}
.q-n::after {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  margin-top: 6px;
  background: var(--line-2);
}


/* ═══ §12.7 · HOW IT ACTUALLY WORKS — THE OPEN ROW GETS A SURFACE ═════════
   A disclosure list where opening one changes nothing but height reads as a
   text file. The open row lifts to bg-1 with the raised bevel, so the answer
   you are reading is on a different plane from the four questions you are
   not. Closed rows take carbon.css's house hover fill and nothing moves —
   the fill arrives, the row does not. */
.faq-item {
  margin-inline: calc(var(--s-4) * -1);
  padding-inline: var(--s-4);
  transition: background-color var(--d-fast) var(--ease-out);
}
.faq-item:not([open]):hover {
  background: var(--fill-hover);
  border-radius: var(--r-md);
}
.faq-item[open] {
  background: var(--bg-1);
  border-radius: var(--r-md);
  box-shadow: var(--e-catch), var(--e-seat);
}


/* ═══ §12.8 · THE CLOSE — THE LAST SCREEN, COMPOSED ═══════════════════════
   It ended signed and it ended tired: two buttons on the canvas, a form, a
   bullet list, a sentence. Three things were added and nothing taken out.

   1. THE ASK BECOMES AN OBJECT. The two doors and their fine print sit in one
      panel instead of loose on the canvas, and the flex column guarantees the
      ≥8px between touch targets that the old inline-block pair only got by
      accident of line-wrapping.
   2. WHAT ACTUALLY HAPPENS NEXT, as a sequence. Every word of it is already
      on this page — the minute-long start and the trade price list from the
      fine print above, the setup call from the lede, the typing-in from
      §4's own gap list, the carrier queue from §7. Nothing new is promised;
      the three beats are the promises this page already made, put in order
      and given a rail so they read as a path rather than as reassurance.
   3. THE SIGNATURE TAKES THE BRAND MARK. The 3px cobalt bar beside "Sam,
      Collingwood" is the identical rule the wordmark draws in the header —
      the page opens and closes on the same 3px of accent. */
.close-mailto {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding: var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-xl);
  box-shadow: var(--e-catch), var(--e-seat);
}
.close-mailto .close-fine { margin-top: var(--s-1); }

.next { margin-top: var(--s-7); }

.next-step {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: var(--s-4);
  align-items: start;
  padding-block: var(--s-5);
  border-top: 1px solid var(--line);
}
.next-step:first-child { padding-top: 0; border-top: 0; }
.next-step:last-child  { padding-bottom: 0; }

/* The rail runs behind the numerals and the numerals punch through it,
   because they carry the panel fill. It is trimmed to the first and last
   numeral's centre so the sequence starts and ends on a step rather than in
   mid-air. 13.5px is the 28px numeral's centre less the 1px rule. */
.next-step::before {
  content: '';
  position: absolute;
  left: 13.5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.next-step:first-child::before { top: 14px; }
.next-step:last-child::before  { bottom: calc(100% - var(--s-5) - 14px); }

.next-n {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  box-shadow: var(--e-catch);
  color: var(--ink-1);
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1;
}
.next-h {
  color: var(--ink-0);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
}
.next-p {
  margin-top: var(--s-2);
  color: var(--ink-2);
  font-size: var(--t-md);
  line-height: 1.5;
  max-width: var(--measure-max);
  text-wrap: pretty;
}

.close-sign-name {
  position: relative;
  padding-left: var(--s-4);
}
.close-sign-name::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--accent);
}


/* ═══════════════════════════════════════════════════════════════════════════
   §11 · BREAKPOINTS — three, and only three: 0 · 768 · 1100

   Every section's responsive rules are collected here rather than scattered,
   so the page's behaviour at a width can be read in one place. Anything that
   needs a fourth breakpoint is a section that should be simpler.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {

  /* §2 — the problem. Three slips across, because three things you are
     holding at once is the point and a stack reads as a list. */
  .problem-lead { font-size: var(--t-2xl); max-width: 19em; }
  .loose { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
  .loose-slip { padding: var(--s-5); }

  /* §12 — the artefact shell. The bands take the panel's wider inline
     padding once there is room, the same step .fa-block makes at 768. */
  .art-head,
  .art-foot,
  .inv-line { padding-inline: var(--s-5); }
  .res-row  { padding: var(--s-4) var(--s-5); }

  /* §3 — the loop.
     Deliberately still STACKED here. Measured at 768: a 360px diagram beside
     the text leaves the prose column 281px, about 33 characters — half the
     measure this site holds everywhere else, and unreadable in the way that
     makes people stop scrolling. The image is not narrowed to buy the space
     because the drawing's labels are 10.5px at its design size. So the split
     waits for 1100, and 768 changes nothing in this section. */

  /* §4 — what's in it */
  .spec-row {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: var(--s-7);
    align-items: baseline;
  }
  .spec-v { margin-top: 0; }
  /* The gaps panel is the only boxed list in the section and takes the panel
     inline padding; its first and last rows keep the extra block padding so
     the rows sit inside the box rather than against it. */
  .spec-gaps-panel { padding-inline: var(--s-6); }

  /* §5 — the ledger */
  .ledger-row {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: var(--s-7);
    align-items: baseline;
    padding: var(--s-5) var(--s-6);
  }
  .ledger-fig { margin-top: 0; }

  /* §6 — the questions.
     16rem, not 20rem: at a 768 viewport a 20rem question column left the
     answer 321px, roughly 38 characters. The question is 4–8 words and wraps
     happily at 16rem; the answer is the thing that has to stay readable. */
  .q {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    /* Split, not one `gap`: the columns want 36px of separation and the
       numeral wants to sit 8px above the question it belongs to. */
    column-gap: var(--s-7);
    row-gap: var(--s-2);
    align-items: start;
  }
  /* EXPLICIT PLACEMENT, because the numeral made this a three-child grid and
     auto-placement would have put the question in column two and the answer
     back under the numeral. Rows: numeral, then question, in the left
     column; the answer spans both of those rows in the right one. */
  .q-n    { grid-area: 1 / 1; margin-bottom: 0; }
  .q-h    { grid-area: 2 / 1; max-width: none; }
  .q-a    { grid-area: 1 / 2 / 3 / 3; margin-top: 0; }
  /* The "longer answer" link belongs under the prose, not the heading. */
  .q-more { grid-area: 3 / 2; margin-top: var(--s-3); }

  /* §7 — how it works */
  .faq-q { font-size: var(--t-lg); }
  .faq-a { padding-right: var(--s-8); }

  /* §8 — the price */
  .pricing-card { padding: var(--s-7) var(--s-6); }
  .pricing-amount { font-size: 64px; }
  .pricing-amount[data-token] { font-size: var(--t-3xl); }
  .pricing-act .btn { width: auto; min-width: 18rem; }

  /* §9 — the ask */
  .close-mailto .btn,
  .close-submit .btn { width: auto; min-width: 18rem; }

  /* §12.8 — the ask panel. The two doors sit side by side once there is room
     for both without either wrapping; the fine print takes its own full-width
     line under them rather than becoming a third column. */
  .close-mailto {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-6);
  }
  .close-mailto .close-fine { flex: 1 0 100%; margin-top: 0; }

  /* Four short lines in one column left a column of nothing beside them. */
  .close-notask ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-7);
  }

  .next-step { column-gap: var(--s-5); }
  .next-h { font-size: var(--t-lg); }
}

@media (min-width: 1100px) {

  /* §2.4 — the hero. One column up to here, because a 480px artefact beside
     the text at 768 leaves the prose ~160px. At 1100 the argument and the
     evidence finally fit side by side, so the reader gets both without
     scrolling either. Placement is explicit rather than source-ordered: the
     phone wants the artefact between the promise and the proof, and a grid
     area is how one source order serves both. */
  /* Six rows for four items: the 1fr at each end are empty and exist only to
     split the leftover height, which optically centres the argument against
     the artefact. The artefact is the taller element and therefore sets the
     row track, so top-aligning the text left ~200px of dead canvas under the
     button — measured at 1120, text column 117→404 against a panel of
     117→601. Centring is why the spacers are here; they carry no content and
     collapse to nothing the moment this drops back to one column. */
  .hero-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30rem;
    grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: var(--s-9);
    row-gap: var(--s-5);
    align-items: start;
  }
  .hero-stack > h1            { grid-area: 2 / 1; }
  .hero-stack > .lede         { grid-area: 3 / 1; }
  .hero-stack > .proof        { grid-area: 4 / 1; }
  .hero-stack > .hero-actions { grid-area: 5 / 1; align-self: start; }
  .hero-stack > .fold-art     { grid-area: 1 / 2 / -1 / 3; }

  /* §2 — the problem */
  .problem-lead { font-size: var(--t-3xl); line-height: 1.28; max-width: 17em; }
  .problem-turn { font-size: var(--t-lg); }

  /* §3 — the loop. Alternate the side so the eye zig-zags down the page
     instead of running a gutter. */
  .flow-step {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: var(--s-9);
    align-items: start;
    padding-top: var(--s-8);
    margin-top: var(--s-8);
  }
  .flow-shot { margin-bottom: 0; }
  /* STEP ONE NOW CARRIES ITS OWN ARTEFACT, so `.flow-step--wide` — the rule
     that dropped that step out of the grid because it had no figure — is
     gone, along with the class in the markup. The reason it existed still
     stands: the hero's panel must not be drawn twice. Step one's panel shows
     the thing the hero cannot, which is that the answer moves with the moment
     the message arrived. Different evidence, so it earns the column.

     The media column is a hard 360px at this width and both artefact kinds
     cap to it — the SVG at its design size, the CSS panels down from 30rem —
     so the two never disagree about where the gutter is. */
  .flow-art,
  .flow-media { max-width: 360px; }
  .flow-step:nth-child(even) { grid-template-columns: minmax(0, 1fr) 360px; }
  .flow-step:nth-child(even) .flow-media { grid-column: 2; grid-row: 1; }
  .flow-step:nth-child(even) .flow-shot { grid-column: 2; grid-row: 1; }
  .flow-step:nth-child(even) .flow-text { grid-column: 1; grid-row: 1; }

  /* §4 — what's in it */
  .spec-row { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s-8); }

  /* §5 — the ledger. THE FIGURE GETS ITS OWN RAIL, and this is the width
     where it finally fits: 19rem of key, 48px, 9rem of figure, 28px, and the
     note still lands 552px of measure — about 68 characters, inside the band
     --measure-max was set to hold. Below 1100 there is not enough room for
     three columns without pushing the note to 30 characters, so the figure
     stays above the note and the card does the composing instead.

     Right-aligned, because the point of a rail is that 5,799 and 249 stack
     into a single column of numbers with one edge. Tabular figures (.num in
     the markup) are what make that edge straight. */
  .ledger-row { grid-template-columns: 19rem minmax(0, 1fr); gap: var(--s-8); }
  .ledger-fig { font-size: var(--t-3xl); }
  .ledger-v {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    column-gap: var(--s-6);
    align-items: baseline;
  }
  .ledger-fig  { text-align: right; }
  .ledger-note { margin-top: 0; }
  .ledger-fig--word { font-size: var(--t-lg); }

  /* §5 — the standfirst. The first paragraph of the story is the one that
     says who is behind this, and at this width it can carry the extra step
     without the measure running long. */
  .proof-story .proof-p:first-child { font-size: var(--t-xl); line-height: 1.4; }

  /* §6 — the questions */
  .q { grid-template-columns: 23rem minmax(0, 1fr); column-gap: var(--s-9); }
}