/* ============================================================
   FONTS — self-hosted, latin subset
   Three families off fonts.googleapis.com meant a render-blocking
   stylesheet and two extra connections on the one page whose whole
   argument is that page speed costs you calls. Same files, served
   from here, subset to the characters this page and a form can
   produce. IBM Plex Sans is one variable file covering every weight
   — Google was serving the same bytes three times under three URLs.
   font-display: swap, so the copy is readable before the faces land.
   ============================================================ */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/ibm-plex-sans.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/newsreader-400.woff2') format('woff2');
}

/* ============================================================
   ROOFING CONVERSION — FINAL
   Base: V1 (structure, colour tokens, honesty).
   Copy specificity, before/after mockup, video offer and
   commercial/residential routing carried over from V3.
   Grid, spacing and type built to DESIGN-DIRECTION.md.

   HARD RULES ENFORCED BY check.sh
     · padding / margin / gap use tokens only — no raw px
     · exactly 8 font sizes
     · every block starts on a 12-column boundary
     · no shadows, no radius above 8px
     · colour is functional: teal = measured, clay = leaking
   ============================================================ */

:root {
  /* ---- ground + ink ---- */
  --paper:   #FBFAF8;
  --paper-2: #F2F1EE;
  --paper-3: #FFFFFF;
  --ink:     #14171A;
  --ink-2:   #1D2226;
  --ink-3:   #262C31;

  /* ---- text ---- */
  --text:        #14171A;
  --text-muted:  #55595E;   /* 6.8:1 on paper */
  --on-ink:      #FBFAF8;
  --on-ink-muted:#A2A8AD;   /* 7.5:1 on ink   */

  /* ---- functional colour, never decorative ---- */
  --signal:     #0E4F4A;    /* 9.0:1 on paper — measured, verified */
  --signal-ink: #4FBFAE;    /* 8.0:1 on ink */
  --loss:       #9C3A24;    /* 6.6:1 on paper — leaking, lost */
  --loss-ink:   #E08A6E;    /* 6.0:1 on ink */

  --line:      rgba(20, 23, 26, 0.12);
  --line-firm: rgba(20, 23, 26, 0.26);
  --line-ink:      rgba(251, 250, 248, 0.13);
  --line-ink-firm: rgba(251, 250, 248, 0.28);

  /* ---- spacing scale: 4px base, ten steps, nothing else ---- */
  --s1:   4px;
  --s2:   8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  24px;   /* gutter */
  --s6:  32px;   /* card padding, outer margin */
  --s7:  48px;
  --s8:  64px;   /* section head -> content */
  --s9:  96px;
  --s10:128px;   /* section padding, desktop */

  /* ---- type scale: eight steps ----
     Step ratios tighten downward (UI needs fine gradations) and
     widen upward (display needs contrast). A single modulus would
     give either indistinguishable UI or weak headings. */
  --t1: 11px;   /* mono label, table head, chips     */
  --t2: 13px;   /* caption, footnote, form label     */
  --t3: 15px;   /* list, table cell, button, input   */
  --t4: 17px;   /* body                              */
  --t5: 21px;   /* lede, h3, pull quote              */
  --t6: 30px;   /* h2 mobile, h1 mobile              */
  --t7: 42px;   /* h2 desktop, h1 tablet             */
  --t8: 60px;   /* h1 desktop                        */
  --t9: 48px;   /* hero display: the only size at which each sentence
                   of the H1 fits one line beside the figure column */

  --wrap: 1200px;
  --r1: 3px;
  --r2: 6px;
  --r3: 8px;    /* ceiling — anything larger reads as a SaaS card */

  --serif: 'Newsreader', ui-serif, Georgia, serif;
  --sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { background: var(--paper); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
/* the deep teal is 1.9:1 on the ink ground — invisible exactly where the
   form is. The light variant reads 8:1. */
.band-ink :focus-visible { outline-color: var(--signal-ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a.sr:focus {
  position: fixed; top: var(--s3); left: var(--s3); z-index: 99;
  width: auto; height: auto; clip-path: none; overflow: visible;
  min-height: 48px; display: inline-flex; align-items: center;
  padding: var(--s3) var(--s5); background: var(--ink); color: var(--paper);
  border-radius: var(--r2); font-size: var(--t3); font-weight: 500;
}

/* ============================================================
   GRID — 12 columns, gutter 24, content 1200.
   Blocks start on column 1 or column 7 only, so the page keeps
   a small, repeating set of left edges instead of a staircase.
   ============================================================ */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--s6); padding-right: var(--s6); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s7); row-gap: var(--s8); }
.c6  { grid-column: span 6; }
.c7  { grid-column: span 7; }
.c12 { grid-column: span 12; }
.start7 { grid-column: 7 / span 6; }
.start8 { grid-column: 8 / span 5; }

.band     { padding-top: var(--s10); padding-bottom: var(--s10); }
.band-ink { background: var(--ink); color: var(--on-ink); }
.band-tint{ background: var(--paper-2); }

/* ---------- type ---------- */
.label {
  display: block; line-height: 1.4; font-family: var(--mono); font-size: var(--t1); font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-muted);
  margin-bottom: var(--s5);
}
.band-ink .label { color: var(--signal-ink); }

h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; }
h1 { font-size: var(--t8); line-height: 1.04; text-wrap: balance; }
h2 { font-size: var(--t7); line-height: 1.10; text-wrap: balance; }
h3 { font-family: var(--sans); font-size: var(--t5); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }

.lede { font-size: var(--t5); line-height: 1.45; color: var(--text-muted); font-weight: 400; text-wrap: pretty; }
.band-ink .lede { color: var(--on-ink-muted); }
.p    { font-size: var(--t4); line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }
.band-ink .p { color: var(--on-ink-muted); }
.mono { font-family: var(--mono); font-size: var(--t2); line-height: 1.45; color: var(--text-muted); }
.band-ink .mono { color: var(--on-ink-muted); }

.head { margin-bottom: var(--s8); }
.head-inline { margin-bottom: var(--s7); }
.head h2 { margin-bottom: var(--s4); }
h2 + .lede { margin-top: var(--s4); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  min-height: 48px; padding: var(--s3) var(--s6);
  border: 1px solid transparent; border-radius: var(--r2);
  font-size: var(--t3); font-weight: 500; cursor: pointer;
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--ink-3); }
.band-ink .btn-solid { background: var(--paper); color: var(--ink); }
.band-ink .btn-solid:hover { background: #E8E6E1; }
.btn-sm { min-height: 40px; padding: var(--s2) var(--s4); }
.tlink {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 32px;
  font-size: var(--t3); font-weight: 500;
  border-bottom: 1px solid var(--line-firm); padding-bottom: 1px;
}
.tlink:hover { border-bottom-color: var(--ink); }
.band-ink .tlink { border-bottom-color: var(--line-ink-firm); }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251, 250, 248, 0.88);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--ease);
}
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 64px; }
/* the number sits where this page tells roofers to put theirs */
.hdr-act { display: flex; align-items: center; gap: var(--s5); }
.tel {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px;
  font-family: var(--mono); font-size: var(--t2); color: var(--text);
}
.tel:hover { color: var(--signal); }
.tel .ic { color: var(--signal); vertical-align: baseline; margin-right: 0; }
.tel-sig { margin-top: var(--s2); color: var(--signal-ink); min-height: 32px; }
.tel-sig:hover { color: var(--on-ink); }
.mark {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 32px;
  font-family: var(--mono); font-size: var(--t2); font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
}
.mark::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--signal); }

/* ---------- 01 hero ---------- */
.hero { padding-top: var(--s9); padding-bottom: var(--s10); }
.hero-grid { align-items: center; row-gap: var(--s8); }
.hero h1 { font-size: var(--t9); margin-bottom: var(--s5); max-width: none; }
/* each sentence owns a line: the break is editorial, not accidental */
.hero h1 .hl { display: block; }

.hero .lede { margin-bottom: var(--s7); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); }
.hero-note { margin-top: var(--s7); padding-top: var(--s5); }

/* ---------- figures ---------- */

/* funnel */

/* ---------- 02 problem ---------- */
.causal p + p { margin-top: var(--s3); }
.pull { margin-top: var(--s7); padding-left: var(--s5); border-left: 2px solid var(--loss-ink); }
.pull p { font-family: var(--serif); font-size: var(--t5); line-height: 1.35; color: var(--on-ink); text-wrap: balance; }
.sym { list-style: none; }
.sym li {
  display: grid; grid-template-columns: var(--s5) 1fr; column-gap: var(--s4);
  padding-top: var(--s5); padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line-ink);
  font-size: var(--t3); line-height: 1.5;
}
.sym li:last-child { border-bottom: 0; padding-bottom: 0; }
.sym .k { font-family: var(--mono); font-size: var(--t1); color: var(--loss-ink); line-height: 1; padding-top: 0.42em; }
.sym b { font-weight: 600; color: var(--on-ink); }

/* ---------- 03 sprint ---------- */
.phase { padding-top: var(--s6); padding-bottom: var(--s6); border-top: 1px solid var(--line); }
.phase:first-of-type { padding-top: 0; border-top: 0; }
.phase-h { display: flex; align-items: baseline; gap: var(--s4); margin-bottom: var(--s4); }
.phase-h .mono { color: var(--signal); font-size: var(--t1); }
.phase p { font-size: var(--t3); line-height: 1.55; color: var(--text-muted); max-width: min(60ch, 100%); }
.phase p b { color: var(--text); font-weight: 500; }

/* closes the four phases: the calendar, and when to spend it */
.when { margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--line); }

.quote { position: sticky; top: var(--s9); align-self: start; border: 1px solid var(--line-firm); border-radius: var(--r3); background: var(--paper-3); }
.quote-top { padding: var(--s6); }
.quote-top .mono:first-child { margin-bottom: var(--s5); }
.qprice { font-family: var(--serif); font-size: var(--t7); line-height: 1; letter-spacing: -0.02em; margin-bottom: var(--s4); }
.qlist { list-style: none; padding: var(--s6); border-top: 1px solid var(--line); }
.qlist li { display: grid; grid-template-columns: var(--s4) 1fr; column-gap: var(--s3); font-size: var(--t3); line-height: 1.5; margin-bottom: var(--s4); color: var(--text-muted); }
.qlist li:last-child { margin-bottom: 0; }
/* where the list turns from what you get to what you are not signing
   up for — space, not a rule, because space is what separates here */
.qlist .in + .out { margin-top: var(--s5); }
.qlist .m { font-weight: 600; line-height: 1.5; }
.qlist .in  .m { color: var(--signal); }
.qlist .out .m { color: var(--text-muted); }
.quote-foot {
  padding: var(--s6); padding-top: var(--s5);
  display: flex; flex-direction: column; gap: var(--s4);
}
.quote-foot .btn { width: 100%; }

.vs { margin-top: 0; }
.vs-cta { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5); }
.vs-cta .p { max-width: 52ch; }
.vs table { width: 100%; border-collapse: collapse; font-size: var(--t3); }
.vs caption {
  text-align: left; font-family: var(--mono); font-size: var(--t1);
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-muted);
  padding-bottom: var(--s4);
}
.vs th, .vs td { text-align: left; padding-top: var(--s5); padding-bottom: var(--s5); padding-right: var(--s5); vertical-align: top; line-height: 1.45; border-bottom: 1px solid var(--line); }
.vs thead th { font-family: var(--mono); font-size: var(--t1); font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--line-firm); }
.vs thead th:last-child { color: var(--signal); }
.vs tbody th { font-weight: 500; width: 22%; }
.vs tbody td { color: var(--text-muted); width: 39%; }
.vs tbody td:last-child { color: var(--text); font-weight: 500; }
.vs tbody tr:last-child th, .vs tbody tr:last-child td { border-bottom: 0; }
.tag { display: none; font-family: var(--mono); font-size: var(--t1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-right: var(--s2); }
.tag-b { color: var(--signal); }

/* ---------- schematics ----------
   Redrawn from the raster illustrations: the same story at ~7KB
   instead of 320KB, with real text and colour taken from the tokens,
   so the drawing obeys the page rule — teal is measured, clay is lost.
   Everything below styles shapes drawn in the document; anything
   inside a <symbol> carries its own presentation attributes, because
   a stylesheet does not cross the <use> shadow boundary. */
.dia {
  display: block; width: 100%; height: auto; color: var(--ink);
  font-family: var(--mono); font-weight: 500; letter-spacing: 0.08em;
}
.dia .ln { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.dia .fl { fill: currentColor; stroke: none; }
.dia .bar { fill: var(--line-firm); stroke: none; }
.dia .field { fill: none; stroke: var(--line-firm); stroke-width: 1.5; }
.dia .knock { fill: var(--paper); }
/* a <use> cannot be given a fill from outside — the symbol sets its own.
   `color` does inherit through the shadow boundary, so knock it out here. */
.dia .knock-c { color: var(--paper); }
.dia .lbl { fill: var(--text-muted); }
.dia .is-loss { color: var(--loss); }
.dia .is-signal { color: var(--signal); }
.dia-hero { max-width: 440px; margin-inline: auto; }

/* The three marks in the qualifier line. They are here to make
   "is this me?" resolve faster, which is the one job that line has.
   Nowhere else on the page does an icon earn its place. */
/* Inline, not inline-flex: a flex box has no baseline of its own, and
   the words after it drop half a line. Same colour as the label, so the
   marks read as part of the line rather than as three coloured blips. */
.src { white-space: nowrap; }
.ic { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.24em; margin-right: var(--s1); color: inherit; }

/* ---------- 04 method: before / after ---------- */
/* .ba removed — the two screens now sit in the page grid so their
   edges match the text row underneath */
.row-gap { margin-bottom: var(--s5); }

.check { list-style: none; }
.check li { padding-top: var(--s3); padding-bottom: var(--s3); padding-left: var(--s5); position: relative; font-size: var(--t3); line-height: 1.5; color: var(--text-muted); }
.check li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--s3) + 0.75em);
  width: 12px; height: 1px; background: var(--signal);
}
/* Item padding is rhythm *between* rows. At the two ends of the list it is
   stray space that stops the column lining up with the one beside it. */
.check li:first-child { padding-top: 0; }
.check li:first-child::before { top: 0.75em; }
.check li:last-child { padding-bottom: 0; }
/* the note now opens its column instead of following a list */
.honest:first-child { margin-top: 0; }
.honest { margin-top: var(--s7); padding: var(--s5); border: 1px solid var(--line); border-left: 2px solid var(--signal); border-radius: var(--r2); font-size: var(--t3); line-height: 1.6; }

/* ---------- 05 next ---------- */
.faq { margin-bottom: 0; }
.faq summary .q { max-width: min(60ch, 100%); }
.faq details { border-bottom: 1px solid var(--line-ink); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5);
  padding-top: var(--s6); padding-bottom: var(--s6); min-height: 48px; cursor: pointer; list-style: none;
  font-size: var(--t4); font-weight: 500; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--mono); font-size: var(--t5); line-height: 1.2; color: var(--signal-ink); transition: transform 240ms var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding-bottom: var(--s5); font-size: var(--t3); line-height: 1.6; color: var(--on-ink-muted); max-width: min(60ch, 100%); }
.faq .a p + p { margin-top: var(--s3); }

/* the FAQ moved to its own section on the paper ground — these must come
   after the dark-band rules above, not before, or they lose the cascade */
.faq.faq-light details { border-bottom-color: var(--line); }
.faq.faq-light summary::after { color: var(--signal); }
.faq.faq-light .a { color: var(--text-muted); }

.reel { margin-top: var(--s7); }
.list-label { margin-bottom: var(--s4); }
.reel-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--line-ink-firm); }
.reel-h .mono { color: var(--on-ink); }
.reel ol { list-style: none; counter-reset: none; }
.reel li {
  display: grid; grid-template-columns: var(--s7) 1fr; column-gap: var(--s4);
  padding-top: var(--s4); padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line-ink);
  font-size: var(--t3); line-height: 1.45; color: var(--on-ink-muted);
}
.reel li:last-child { border-bottom: 0; }
.reel .t { font-family: var(--mono); font-size: var(--t1); color: var(--signal-ink); line-height: 1; padding-top: 0.42em; }

.gate { margin-top: var(--s5); font-size: var(--t3); line-height: 1.55; color: var(--on-ink-muted); }
.sig { display: flex; align-items: center; gap: var(--s5); margin-top: var(--s7); margin-bottom: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line-ink); }
.sig img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex: none; }
.sig .n { font-size: var(--t3); font-weight: 500; }
.sig .r { font-size: var(--t2); color: var(--on-ink-muted); }

.card { background: var(--ink-2); border: 1px solid var(--line-ink); border-radius: var(--r3); padding: var(--s6); }
.f { margin-bottom: var(--s4); }
.f label { display: block; font-family: var(--mono); font-size: var(--t1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-muted); margin-bottom: var(--s2); }
.f input {
  width: 100%; min-height: 46px; padding: var(--s3) var(--s4);
  background: var(--ink-3); border: 1px solid var(--line-ink); border-radius: var(--r1);
  color: var(--on-ink); font-size: var(--t3);
}
.f select {
  width: 100%; min-height: 46px;
  padding: var(--s3) var(--s7) var(--s3) var(--s4);
  background-color: var(--ink-3);
  border: 1px solid var(--line-ink);
  border-radius: var(--r1);
  color: var(--on-ink);
  font-size: var(--t3);
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23A2A8AD' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s4) center;
}
.f select option { color: var(--ink); background-color: #FFFFFF; }
/* The one-off #7E858A read 3.77:1 on --ink-3, under the 4.5 floor. The
   system already owns a muted-on-dark value; on this field ground it is
   5.9:1, and still clearly dimmer than an entered value (--on-ink). */
.f input::placeholder { color: var(--on-ink-muted); }
.f2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s5); }
.card .btn { width: 100%; }
.card form > .btn { margin-top: var(--s3); }
.fnote { margin-top: var(--s3); font-size: var(--t2); line-height: 1.5; color: var(--on-ink-muted); }
/* Clipped rather than display:none or moved off-screen: a bot reading the
   DOM still sees a normal field, a screen reader skips it via aria-hidden,
   and unlike a negative offset it never reports as a horizontal overflow. */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the input keeps its own box even inside a clipped parent — pin it too,
   or an overflow sweep reports a field nobody can see */
.hp input, .hp label { width: 1px; height: 1px; min-height: 0; }
.f input[aria-invalid="true"], .f select[aria-invalid="true"] { border-color: var(--loss-ink); }
.fmsg { margin-top: var(--s1); font-size: var(--t2); line-height: 1.4; color: var(--loss-ink); }
.ferr { margin-top: var(--s3); padding: var(--s3); border: 1px solid var(--loss-ink); border-radius: var(--r1); background: rgba(224,138,110,0.12); color: #F2C8B8; font-size: var(--t2); line-height: 1.5; }
.done { border: 1px solid var(--line-ink); border-radius: var(--r2); background: var(--ink-3); padding: var(--s5); }
.done h3 { margin-bottom: var(--s2); }
.done p { font-size: var(--t3); line-height: 1.6; color: var(--on-ink-muted); }

/* ---------- footer ---------- */
.ftr { border-top: 1px solid var(--line); padding-top: var(--s7); padding-bottom: var(--s7); }
.ftr-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s6); }
.ftr-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.ftr-in a { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--t3); color: var(--text-muted); }
.ftr-in a:hover { color: var(--text); }


/* ============================================================
   RESPONSIVE — sizes stay on the eight-step scale at every width,
   so h1 > h2 > h3 always holds.
     desktop   60 / 42 / 21
     tablet    42 / 30 / 21
     mobile    30 / 21 / 17
   ============================================================ */
@media (max-width: 1000px) {
  h1, .hero h1 { font-size: var(--t7); }
  h2 { font-size: var(--t6); }
  .grid { grid-template-columns: 1fr; column-gap: 0; }
  .c6, .c7, .c12, .start7, .start8 { grid-column: auto; }
  .dia-hero { max-width: 360px; }
  #method .dia { max-width: 520px; margin-inline: auto; }
  .quote { position: static; }
  .band { padding-top: var(--s9); padding-bottom: var(--s9); }
  .hero { padding-top: var(--s8); padding-bottom: var(--s9); }
}
@media (max-width: 700px) {
  h1, .hero h1 { font-size: var(--t6); }
  h2 { font-size: var(--t5); }
  h3 { font-size: var(--t4); }
  .lede { font-size: var(--t4); }
  .wrap { padding-left: var(--s5); padding-right: var(--s5); }
  .band { padding-top: var(--s8); padding-bottom: var(--s8); }
  .hero { padding-top: var(--s7); padding-bottom: var(--s8); }
  .head { margin-bottom: var(--s7); }
  /* The header cannot hold the mark, the number and a 189px button in the
     327px a 375 phone gives it — the label wrapped to two lines and the bar
     grew to 66px. At 320 the button did not fit even before the number was
     added. Below 700 the header keeps identity and one action, and that
     action is the tap-to-call this page argues for. The form CTA is 200px
     further down and appears four times in the page. */
  .hdr .tel-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hdr .tel { min-width: 44px; justify-content: center; }
  .hdr-act { gap: var(--s3); }
  .hdr .btn { display: none; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }
  .hero-cta .tlink { align-self: center; }

  .f2 { grid-template-columns: 1fr; }
  .card, .quote-top, .qlist, .quote-foot { padding: var(--s5); }
  .quote-foot { padding-top: 0; }
  /* table stacks; row labels are real elements, not CSS content */
  .vs table, .vs tbody, .vs tr, .vs th, .vs td { display: block; width: auto; }
  .vs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .vs tbody tr { padding-top: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
  .vs tbody tr:last-child { border-bottom: 0; }
  .vs tbody th, .vs tbody td { width: auto; }
  .vs tbody th { padding: 0 0 var(--s2); border-bottom: 0; }
  .vs tbody td { padding-top: var(--s1); padding-bottom: var(--s1); border-bottom: 0; }
  .tag { display: inline; }
}


/* ============================================================
   TYPOGRAPHIC POLISH — layout only, not a word changed
   ============================================================ */

/* six blocks ended on a two-word line: "the list.", "receive it.",
   "you that.", "submissions.", "everything else.", "ones you think".
   pretty pulls a word down rather than leaving a stub. */
/* balance equalises the lines inside a block. A heading wants that; body
   copy does not — it pulls every line in from the column edge and lands each
   block on a different width, so the right side of a list goes ragged.
   Measured over 29 blocks: fill 0.82 -> 0.95, worst case 0.55 -> 0.84 after
   switching to pretty, which only tidies the last lines. Balance now stays
   where the text really is a heading. */
.faq summary { text-wrap: balance; }

.faq .a p, .phase p, .sym li, .check li, .qlist li,
.gate, .honest, .fnote, .lede, .causal .p,
.reel li span:last-child, .quote-top .mono, .quote-foot .mono,
.hero-note .mono, .ftr-in .mono { text-wrap: pretty; }

/* one emphasis weight. It was 600 in two sections and 500 in a third,
   doing the same job in all three. */
.sym b, .phase p b { font-weight: 600; }

/* the middot rendered at full text strength, reading as a character
   instead of as punctuation between values */
/* Not opacity — any value quiet enough to read as punctuation dropped the
   glyph under 4.5:1, and a middot is still text. A fixed muted colour
   quiets it only where the surrounding text is full strength, and holds
   6.8:1 on paper and 7.5:1 on ink. */
.sep { color: var(--text-muted); padding-inline: 0.12em; }
.band-ink .sep { color: var(--on-ink-muted); }


/* ============================================================
   MEASURE CAP
   Below 1000px the grid collapses to one column and body copy
   stretched to the full 689px container — 92 to 113 characters
   a line. The caps are inert on desktop, where the columns are
   already narrower than the cap.
   ============================================================ */
.p, .lede, .gate, .honest, .fnote,
.sym li, .check li,
.phase p, .faq .a p,
.pull p, .vs-cta .p { max-width: min(60ch, 100%); }

/* mono runs narrower per character, so it takes a wider cap */
.reel li { max-width: min(74ch, 100%); }
.qlist li { max-width: min(46ch, 100%); }
/* the reel cap belongs on the text column, not on the row that also
   holds the timecode */
.reel li { max-width: none; }
.reel li span:last-child { max-width: min(56ch, 100%); }
/* the form messages only appear after a submit, but they follow the
   same measure as everything else */
.ferr, .fnote, .done p { max-width: min(56ch, 100%); }


/* ============================================================
   MISSING INTERACTION STATES
   Form fields, FAQ rows and the wordmark were clickable or
   editable with no hover response at all.
   ============================================================ */
.f input:hover, .f select:hover { border-color: var(--line-ink-firm); }
.f input:focus, .f select:focus { border-color: var(--signal-ink); }
.f input:focus-visible, .f select:focus-visible { outline: 0; }

.faq summary:hover { color: var(--signal); }
.faq summary:hover::after { color: var(--ink); }
.faq details[open] summary { color: var(--text); }

.mark:hover { color: var(--signal); }

/* the caret in a select is decorative, so it must not swallow the click */
.f select { cursor: pointer; }
.faq summary { -webkit-tap-highlight-color: transparent; }