/* ══════════════════════════════════════════════════════════════════
   v13 — Google Ad Grant for churches
   Warm paper, deep ink-navy, one wheat highlight. One typeface: Inter.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --paper:#FBF8F2;
  --paper-alt:#F4EDE0;
  --surface:#FFFFFF;

  --ink:#17191C;
  --body:#45484D;
  --muted:#666A71;
  --line:#E4DCCC;
  --line-soft:#EDE7DA;

  --navy:#16293F;
  --navy-d:#0D1B2B;
  --navy-soft:#EAEFF5;

  --gold:#8A6413;
  --gold-d:#E3C271;
  --band:#F6E3A8;
  --bar-gold:#B4862F;
  --alarm:#8E2A16;
  --alarm-d:#F0A08A;   /* the same alarm, for dark grounds */

  --cream:#F1EBDF;
  --cream-mute:#AEBAC8;

  --serif:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;

  --sp:clamp(5.25rem,9.5vw,9.5rem);
  --r:10px;
}

*, *::before, *::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:1.045rem;
  line-height:1.68;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img, svg, video{max-width:100%}
a{color:var(--navy)}
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--navy);outline-offset:3px;border-radius:3px}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--navy);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--r) 0;font-size:.9rem;font-weight:600;text-decoration:none}
.skip:focus{left:0}

/* ── layout ─────────────────────────────────────────────────── */
.wrap{width:100%;max-width:1120px;margin:0 auto;padding-inline:clamp(1.25rem,4.4vw,2.25rem)}

.sec{padding-block:var(--sp)}
.sec-alt{background:var(--paper-alt)}

/* ── type ───────────────────────────────────────────────────── */
.eyebrow{
  font-size:.715rem;font-weight:700;letter-spacing:.145em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1.1rem;line-height:1.4}

h1, h2, h3{font-family:var(--serif);color:var(--ink);font-weight:700;
  font-feature-settings:'cv05','ss01'}

h1{
  font-size:clamp(1.98rem,5.2vw,4.1rem);
  line-height:1.05;letter-spacing:-.033em;margin:0;
}
.h1-sub{
  display:block;font-size:.6em;font-weight:400;color:var(--muted);
  letter-spacing:-.022em;margin-top:.36em;line-height:1.2}

.hl{
  background-image:linear-gradient(to top,
    transparent 0, transparent 10%, var(--band) 10%, var(--band) 59%, transparent 59%);
  padding:0 .05em .03em;
  white-space:nowrap;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

.h2{font-size:clamp(1.72rem,3.6vw,2.7rem);line-height:1.13;letter-spacing:-.028em;
  margin:0 0 1.15rem;text-wrap:balance;max-width:20ch}

.lead{font-size:clamp(1.03rem,1.35vw,1.2rem);line-height:1.6;color:var(--body);
  margin:0 0 1rem;max-width:63ch}
.lead em, .serp em{font-style:italic}

/* ── buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-block;font:inherit;font-weight:600;font-size:1.02rem;line-height:1.2;
  text-decoration:none;color:#fff;background:var(--navy);
  padding:1rem 1.6rem;border-radius:var(--r);border:0;cursor:pointer;
  transition:background .15s ease,transform .12s ease}
.btn:hover{background:var(--navy-d);transform:translateY(-1px)}

/* ── sticky bar ─────────────────────────────────────────────── */
.bar.show{transform:none;visibility:visible}
@media (max-width:620px){.bar-sub{display:none}}
@media (prefers-reduced-motion:reduce){.bar{transition:none}}

/* ── hero ───────────────────────────────────────────────────── */
.hero{padding-block:clamp(3.5rem,7.5vw,7rem) clamp(4rem,8vw,7.5rem)}
.hero-grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
@media (min-width:960px){
  .hero-grid{grid-template-columns:1.25fr .95fr;align-items:start}
  .hero-do{padding-top:2.3rem}
}

.hero-lead{font-size:clamp(1.06rem,1.35vw,1.18rem);line-height:1.6;color:var(--body);
  margin:1.7rem 0 0;max-width:46ch}
.ck{flex:0 0 auto;width:19px;height:19px;margin-top:.22em;
  fill:none;stroke:var(--bar-gold);stroke-width:2.3;
  stroke-linecap:round;stroke-linejoin:round}

/* ── cards ──────────────────────────────────────────────────── */
@media (min-width:720px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:860px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── split (what it does) ───────────────────────────────────── */
.split{display:grid;gap:clamp(2.25rem,4.5vw,3.75rem);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}}

/* ── SERP illustration ─────────────────────────────────────── */
.serp{margin:0;min-width:0}
.serp-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:clamp(.9rem,1.8vw,1.15rem);box-shadow:0 14px 34px -22px rgba(22,41,63,.4)}
.serp-q{display:flex;align-items:center;gap:.6rem;border:1px solid var(--line);
  border-radius:999px;padding:.65rem 1rem;color:var(--ink);font-size:.96rem;min-width:0}
.serp-q span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mag{flex:0 0 auto;width:17px;height:17px;fill:none;stroke:var(--muted);stroke-width:1.9;
  stroke-linecap:round}
.serp-ad{border:1px solid var(--line-soft);border-radius:10px;padding:.85rem .95rem;margin-top:.8rem}
.serp-ad p{margin:0}
.serp-tag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);border:1px solid var(--line);border-radius:4px;
  padding:.18rem .42rem;margin-bottom:.5rem!important}
.serp-url{font-size:.8rem;color:var(--muted);overflow-wrap:anywhere}
/* Google's own link blue, not --navy. These two rules imitate a real
   search result; matching the site palette here would break the mock. */
.serp-title{font-family:var(--serif);font-weight:700;font-size:1.08rem;line-height:1.25;color:#1B3A6B;margin:.12rem 0 .32rem!important}
.serp-desc{font-size:.875rem;line-height:1.5;color:var(--body)}
.serp-links{display:flex;flex-wrap:wrap;gap:.35rem 1.05rem;margin-top:.6rem!important;
  font-size:.83rem;color:#1B3A6B}
.serp-links span{border-bottom:1px solid rgba(27,58,107,.35);padding-bottom:1px}
.serp figcaption{font-size:.82rem;line-height:1.5;color:var(--muted);
  margin-top:.85rem;max-width:52ch}

/* ── bar chart ──────────────────────────────────────────────── */

/* ── policy quote ───────────────────────────────────────────── */

/* ── steps ──────────────────────────────────────────────────── */
@media (min-width:760px){.steps>li{grid-template-columns:minmax(0,168px) minmax(0,1fr)}}

/* ── who (dark) ─────────────────────────────────────────────── */
@media (min-width:900px){.who{grid-template-columns:1.25fr .95fr}}
.creds .ck{stroke:var(--gold-d)}

/* ── price tiles ────────────────────────────────────────────── */
@media (min-width:620px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── faq ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){.ic::before,.ic::after{transition:none}}

/* ── eligibility ────────────────────────────────────────────── */
.q-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:clamp(1.5rem,3.4vw,2.5rem);margin-top:clamp(2rem,3.5vw,2.75rem);
  box-shadow:0 26px 60px -34px rgba(22,41,63,.42)}
.q-noscript{margin:1.25rem 0 0;padding-top:1.25rem;border-top:1px solid var(--line);
  font-size:.95rem;line-height:1.6;color:var(--body)}

/* ── footer ─────────────────────────────────────────────────── */
.foot{background:var(--navy);color:var(--cream-mute);padding-block:clamp(2.75rem,5vw,4rem);
  font-size:.9rem;line-height:1.65}
.foot p{margin:0 0 .4rem;max-width:62ch}
.foot a{color:var(--gold-d);overflow-wrap:anywhere}
.foot-fine{margin-top:1.1rem;font-size:1rem;color:var(--cream-mute)}


/* ── hero: the qualifier now lives in the right column ── */
.hero-do{align-self:start}
.hero-do .q-card{margin:0}

/* ── the letter ──────────────────────────────────────────────────────
   The one place on the page where length is allowed. Short paragraphs,
   a few lines carrying the spine, and a signature so it reads as a person. */
.letter-head .eyebrow{margin-bottom:.55rem}

/* ── the field and its button as one unit, not a stacked form ── */
.q-join{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;background:#fff;transition:border-color .16s,box-shadow .16s;min-width:0}
.q-join .q-in{flex:1 1 auto;min-width:0;border:0;border-radius:0;background:transparent;
  padding:1rem 1.05rem;font-size:1.02rem}
.q-join .q-in:focus{outline:none;box-shadow:none;border:0}
.q-go{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;border:0;cursor:pointer;
  background:var(--ink);color:#fff;font-family:var(--sans);font-size:.94rem;font-weight:700;
  padding:0 1.15rem;transition:background .18s;white-space:nowrap}
.q-go:hover{background:var(--navy-d)}
.q-go:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.q-go[disabled]{opacity:.6;cursor:default}
.q-go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
@media (max-width:400px){
  .q-join{flex-direction:column;align-items:stretch}
  .q-go{justify-content:center;padding:.95rem 1rem}
}
.q-s .q-hint{margin:.85rem 0 0}

/* ── what's required from you ── */
.q-intro{font-size:.93rem;line-height:1.55;color:var(--body);margin:0 0 1.15rem}
.q-note{font-size:.93rem;line-height:1.55;color:var(--muted);margin:.7rem 0 0}

/* ── the rules, on dark: the volume is the argument ── */
@media (min-width:700px){.rulegrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.rulegrid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── what it's worth: the ratio, drawn ── */

/* ── v31: fewer words, more air ─────────────────────────────── */

/* six rules, stated not explained — the count is the argument */
.rulelist{list-style:none;margin:clamp(2.4rem,4.4vw,3.4rem) 0 0;padding:0}
.rulelist li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.4rem 1.5rem;padding:1.15rem 0;border-bottom:1px solid rgba(255,255,255,.14)}
.rulelist li:first-child{border-top:1px solid rgba(255,255,255,.14)}
.rulelist span{font-size:clamp(1rem,1.6vw,1.16rem);font-weight:500;color:var(--cream);
  letter-spacing:-.012em;min-width:0}
.rulelist b{font-size:.755rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--alarm-d);white-space:nowrap;flex:0 0 auto}

/* pricing terms as four scannable lines, not four boxes */

/* the cred list is the whole "who" section now, so let it breathe */

/* each cred rules itself, so the list works in one column or two */

/* last mile: no orphans, one shared measure under the chart */
.lead, .h2, h1{text-wrap:pretty}

/* ── v31.1: built to be re-entered, not read straight through ── */

/* the eyebrow was 4x smaller than the headline it sat on — give the
   jump a middle step so the eye has somewhere to land */
.eyebrow{font-size:.82rem;letter-spacing:.09em;font-weight:700;margin:0 0 .85rem}

/* the catch, as three statements a distracted person can take one at a
   time — each one whole on its own, none depending on the one above */
@media (max-width:420px){
  .catch li{padding-left:0}
  .catch li::before{position:static;margin-bottom:.9rem}
}

/* ── v32: the letter is back, set to survive interruption ───── */

/* three facts for the skimmer, so the letter never has to be read
   to get the credentials */
@media (min-width:720px){.facts{grid-template-columns:.8fr .95fr 1.35fr}}
@media (min-width:720px){.facts li{padding:1.35rem clamp(1rem,2vw,1.5rem)}
  .facts li:first-child{padding-left:0}}

/* a letter you can put down: short paragraphs, generous leading,
   and two pulled-out lines to find your place again by */

/* ── v33: four questions, four answers ──────────────────────── */

/* "1 of 4" tells you where you are the moment you look back */
.eyebrow{color:var(--gold)}

/* the section title is a question, so the answer has to sit right
   under it — this is what a cold reader lands on */

/* a heading between blocks inside one section */
.subhead{font-size:clamp(1.2rem,2.1vw,1.5rem);line-height:1.3;letter-spacing:-.022em;
  color:var(--ink);font-weight:700;margin:clamp(3.2rem,6vw,5rem) 0 0;max-width:30ch}

/* the rules keep their dark weight without owning a whole band */
.darkpanel{background:var(--navy);color:var(--cream);border-radius:12px;
  padding:clamp(1.75rem,3.6vw,3rem);margin:clamp(2.6rem,5vw,4rem) 0 0}
.darkpanel a{color:var(--gold-d)}
.dp-head{margin:0;font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-d)}
.darkpanel .rulelist{margin-top:1.6rem}
.darkpanel .rules-close{color:var(--cream-mute)}
.darkpanel .rules-close strong{color:var(--cream)}

/* one measure per section: the chart runs full width, so the caption
   and the terms beneath it must line up with it, not stop short */
.darkpanel .rules-close{max-width:56ch}

/* ── v33.1: who am I — a person, not a document ─────────────── */

/* plain text on the page — the white card made it read as a document */

/* ── v33.2: who am I — portrait left, words right ───────────── */
@media (min-width:760px){.whogrid{grid-template-columns:auto minmax(0,1fr)}}

/* the form states its payoff before it asks for anything */
.q-hook{margin:0 0 .6rem;font-size:clamp(1.14rem,1.7vw,1.32rem);line-height:1.28;
  letter-spacing:-.022em;font-weight:700;color:var(--ink);text-wrap:pretty}
.q-intro b{color:var(--ink);font-weight:700}

/* ── logo ───────────────────────────────────────────────────── */
.topbar{padding-block:clamp(1.5rem,3vw,2.1rem) 0}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:block;width:auto;height:clamp(26px,3.4vw,36px);flex:0 0 auto}
/* the header now holds the top of the page, so the hero starts closer */
.hero{padding-block:clamp(2.25rem,4.6vw,4rem) clamp(4rem,8vw,7.5rem)}

/* quiet text, deliberately not a button — the form is the only button
   above the fold, and a second one there would compete with it */
.topbar-link{flex:0 0 auto;display:inline-flex;align-items:center;border:0;cursor:pointer;
  background:var(--ink);color:#fff;font-family:var(--sans);font-size:.94rem;font-weight:700;
  line-height:1;padding:.72rem 1.15rem;border-radius:8px;text-decoration:none;
  transition:background .18s;white-space:nowrap}
.topbar-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:360px){.topbar-link{font-size:.86rem;padding:.62rem .9rem}}

/* the header button and the form button are one family: same width,
   and the form button's visible right corners already take the 8px
   from .q-join's clip, so both read at the same radius */
:root{--btn-w:126px}
.q-go{min-width:var(--btn-w);justify-content:center}
.topbar-link{min-width:var(--btn-w);justify-content:center}

/* the fixed bar must not sit on top of the heading it just jumped to */
#how, #catch, #who, #yourwork, #faq{scroll-margin-top:24px}

/* the step label is a sentence now, not "1 of 3" — heavy tracking that
   suited three words makes this one wrap on small screens */
.q-step{letter-spacing:.085em!important}
@media (max-width:400px){.q-step{font-size:10.5px!important;letter-spacing:.03em!important}}

/* nav sits with the button as one right-hand group, so the gap between
   them reads wider than the gap between the links */
.topbar-in{gap:clamp(1.4rem,2.6vw,2.4rem)}

/* ── v33.3: one left edge, one design language ──────────────── */

/* the byline is a rule-bounded row, like every other list on the page,
   instead of a floating disc in a column of its own */

/* the old two-column bio is gone */

/* the FAQ and section 4 now share the page's single measure */

.split{align-items:center}

/* section 1 is one column like every other section; the search mock sits
   under the words at its own measure rather than beside them */
#how .split{margin-bottom:clamp(3rem,5.5vw,4.5rem)}
#how .split-say .lead{max-width:46ch}
#how .split-say .deck{margin-bottom:1.6rem}
#how .serp{margin:0;max-width:none}

/* the joined input+button killed its own focus ring, so focus was nearly
   invisible — the ring belongs on the unit, not the bare input */
.q-join{transition:border-color .18s,box-shadow .18s}
/* one ring only: the border stays put, so nothing reads as a second line
   where the dark button meets the edge */
/* no halo at all: focus just firms up the border */
/* focus firms the border and nothing else — the wheat is spent once,
   on the headline, and the field is already autofocused with a caret */
.q-join:focus-within{border-color:rgba(22,41,63,.55);box-shadow:none}

.hero-sig{margin:1.15rem 0 0;font-size:.98rem;font-weight:400;color:var(--body);
  letter-spacing:-.005em}

/* outline, not solid: the header button shouldn't compete with the form
   button a few inches below it. Square-ish corners, not a pill. */
.topbar-link{background:transparent;color:var(--navy);border:1px solid rgba(22,41,63,.34);
  font-weight:600;border-radius:8px;padding:.68rem 1.1rem}
.topbar-link:hover{background:transparent;border-color:rgba(22,41,63,.34);color:var(--navy)}
.topbar-link:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* the nav is gone; a plain line of what this is sits before the button */
.topbar-right{display:flex;align-items:center;gap:clamp(1rem,2vw,1.4rem);margin-left:auto}
.topbar-note{font-size:.94rem;color:var(--body);white-space:nowrap;display:none}
@media (min-width:900px){.topbar-note{display:block}}

/* .q-body clips to animate step height, which was cutting the focus glow
   on left, right and bottom. Pad the clip box out and pull it back with
   a matching negative margin so nothing moves but the shadow has room. */
.q-body{padding:0 8px 8px;margin:0 -8px -8px}

/* ── v33.5: close the gap between the hero and the first section ── */
.hero{padding-bottom:clamp(2.25rem,4.5vw,3.75rem)}
#how{padding-top:clamp(1.75rem,3.5vw,3rem)}

/* ── credentials strip, directly below the fold ─────────────── */
.strip{background:var(--navy);color:var(--cream);
  padding-block:clamp(2rem,3.6vw,2.9rem)}
.creds4{list-style:none;margin:0;padding:0;display:grid;
  gap:clamp(1.15rem,2.4vw,2.2rem);grid-template-columns:1fr}
@media (min-width:640px){.creds4{grid-template-columns:1fr 1fr}}
@media (min-width:1020px){.creds4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.creds4 li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  align-content:start;column-gap:.7rem;row-gap:.2rem;min-width:0}
.creds4 .ck{grid-row:1;grid-column:1;width:19px;height:19px;margin-top:.25em;
  fill:none;stroke:var(--gold-d);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.creds4 b{grid-column:2;font-size:1.02rem;font-weight:700;color:var(--cream);
  line-height:1.32;letter-spacing:-.014em}
.creds4 span{grid-column:2;font-size:.93rem;line-height:1.55;color:var(--cream-mute)}

/* marker underline — a thick wheat stroke sitting under the words, not a
   hairline rule. Same colour as the headline highlight; it sits low so it
   reads as a stroke over the text rather than a highlighted block. */
.mark{
  background-image:linear-gradient(to top,
    transparent 0, transparent 4%, var(--band) 4%, var(--band) 27%, transparent 27%);
  padding:0 .06em .04em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* two alternating rows: the search, then the church that answers it */
.split-a{margin-bottom:0}
.split-b{margin-top:clamp(3rem,6vw,5.5rem)}
.split-b .h2 .mark{white-space:nowrap}
@media (min-width:900px){
  .split-a .split-say,.split-b .split-say{align-self:center}
}

/* the tick was nudged down .25em, so it sat below the headline it marks.
   Centre it on the headline's FIRST line — centring on the whole block
   drops it between the lines when a headline wraps to two. */
.creds4 .ck{align-self:start;margin-top:calc((1.02rem * 1.32 - 19px) / 2)}

/* the week labels are gone, so the first column only holds the numeral —
   168px was sized for "WEEKS 2–3" and left a 170px gap */
@media (min-width:760px){.steps>li{grid-template-columns:auto minmax(0,1fr)}}

/* ── the process, as a track ─────────────────────────────────
   A vertical list of four reads as a list. A horizontal track with a
   connector reads as a sequence — which is what a process is. The
   headlines carry who does what, so the division of labour is visible
   from the headline row alone. */
.track{list-style:none;margin:clamp(2.4rem,4.4vw,3.4rem) 0 0;padding:0;
  display:grid;gap:clamp(2rem,3.4vw,2.6rem)}
@media (min-width:900px){
  .track{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(1.6rem,2.6vw,2.4rem)}
}
.track li{position:relative;padding-top:3.1rem;min-width:0}
.tnum{position:absolute;top:0;left:0;width:34px;height:34px;border-radius:50%;
  background:var(--navy);color:#fff;display:grid;place-items:center;
  font-size:.92rem;font-weight:700;letter-spacing:-.01em}
/* one continuous rule behind the whole track; the numbered discs sit on
   top of it, so the line never breaks and never floats away from a node */
@media (min-width:900px){
  .track{position:relative}
  .track::before{content:'';position:absolute;top:17px;left:0;right:0;height:1px;
    background:var(--line);z-index:0}
  .track li{position:relative;z-index:1}
  .tnum{position:absolute;z-index:2}
}
.track h3{font-size:1.12rem;line-height:1.28;letter-spacing:-.018em;margin:0 0 .55rem;
  color:var(--ink);text-wrap:pretty}
.track p{margin:0;font-size:.985rem;line-height:1.62;color:var(--body)}
.track strong{color:var(--ink);font-weight:700}

/* the rules: name, plain-English detail, and the verdict in the margin.
   Four identical verdicts build the pattern; the last two break it, so the
   list ends by explaining what the $500 actually buys. */
.rulelist li{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:.5rem 1.5rem;padding:1.25rem 0;border-bottom:1px solid rgba(255,255,255,.14)}
.rulelist li:first-child{border-top:1px solid rgba(255,255,255,.14)}
.rulelist li>div{min-width:0;flex:1 1 22rem}
.rulelist b{display:block;font-size:clamp(1rem,1.5vw,1.1rem);font-weight:700;color:var(--cream);
  letter-spacing:-.014em;line-height:1.3}
.rulelist span{display:block;font-size:.94rem;line-height:1.55;color:var(--cream-mute);
  margin-top:.22rem;max-width:56ch}
.rulelist em{flex:0 0 auto;font-style:normal;font-size:.755rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--alarm-d);white-space:nowrap;padding-top:.2rem}
@media (max-width:620px){
  .rulelist em{white-space:normal;padding-top:.45rem}
}

/* the panel now opens with a statement, not a label, so it needs
   headline weight rather than eyebrow weight */

/* ── the rules, light and explicit ──────────────────────────── */
.h2-wide{max-width:24ch}
@media (max-width:640px){
  .rules6 li{display:block}
  .r-say{flex:none}
  .rules6 em{display:block;padding-top:.5rem}
}

/* ── accurate rules, light band ─────────────────────────────── */
.h2-wide{max-width:24ch}
@media (max-width:620px){
  .rules6 li{display:block}
  .r-say{flex:none}
  .rules6 em{display:block;padding-top:.5rem}
}

/* .rules-close was toned for the dark band; this section is light now */

/* "The whole process." heads a block as substantial as the rules section,
   so it takes the same scale rather than reading as a minor label */
#how .subhead{font-size:clamp(1.72rem,3.6vw,2.7rem);line-height:1.13;letter-spacing:-.028em;
  font-weight:700;max-width:20ch}

/* comparison scaffolding */
#rules .darkpanel{background:var(--navy);color:var(--cream);border-radius:12px;
  padding:clamp(1.75rem,3.4vw,2.75rem);margin:clamp(2.4rem,4.4vw,3.4rem) 0 0;max-width:900px}
#rules .dp-head{margin:0 0 1.4rem;font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-d)}
#rules .darkpanel .rulelist{list-style:none;margin:0;padding:0}
#rules .darkpanel .rulelist li{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:.4rem 1.5rem;padding:1.15rem 0;
  border-bottom:1px solid rgba(255,255,255,.15)}
#rules .darkpanel .rulelist li:first-child{border-top:1px solid rgba(255,255,255,.15)}
#rules .darkpanel .rulelist span{font-size:clamp(1rem,1.6vw,1.16rem);font-weight:500;
  color:var(--cream);letter-spacing:-.012em;min-width:0;text-transform:none}
#rules .darkpanel .rulelist b{font-size:.755rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--alarm-d);white-space:nowrap;flex:0 0 auto}
@media (max-width:620px){
  #rules .darkpanel .rulelist li{display:block}
  #rules .darkpanel .rulelist b{display:block;white-space:normal;margin-top:.35rem}
}

/* the source link belongs inside the card, so the claim and its citation
   stay one object */
/* the citation is a credibility signal, not fine print: same size and
   tone as the line above it, so it reads as 'check me', not 'small print' */
/* matches the 41px gap between rule rows: row padding (18.4) + border (1)
   + this margin */
#rules .dp-cite{color:var(--cream-mute);margin:1.35rem 0 0;font-size:1.06rem;
  line-height:1.4}
#rules .dp-cite a{color:var(--gold-d)}

/* two lines from tablet up, balanced so neither line is a stub */
#rules .h2-wide{max-width:19ch;text-wrap:balance}

/* the section centres as a block: headline centred, card centred, but the
   card's internals keep their left/right split so the verdict column holds */
#rules .h2{text-align:center;margin-left:auto;margin-right:auto}
#rules .darkpanel{margin-left:auto;margin-right:auto}

/* back to the page's single left edge: headline at 196 like everything
   above it, and the card widened to the container so nothing is lopsided */
#rules .h2{text-align:left;margin-left:0;margin-right:0;max-width:24ch}
#rules .darkpanel{margin-left:0;margin-right:0;max-width:none}

/* two balanced lines: "The rules that keep" / "the grant alive." — the
   headline reads as a block against the card rather than a single long rule */
#rules .h2, #rules .h2-wide{max-width:20ch;text-wrap:balance}

/* the ledger rows read as pairs, so the eye should not have to travel the
   full container to connect a rule to its cadence: card back to a reading
   width, but flush to the page's left edge rather than centred */
#rules .darkpanel{max-width:900px}

/* stacked, the sentence has to land before the ad it describes — desktop
   puts the first ad on the left, which would otherwise lead on mobile */
@media (max-width:899px){
  #how .split-a .split-say{order:-1}
}

/* headline back to one line, with the plain-language line beneath it doing
   the explaining the six rows deliberately don't */
#rules .h2, #rules .h2-wide{max-width:none}
#rules .rules-lead{max-width:56ch;margin:1.1rem 0 0}

/* one column of six reads better than two of three; the card keeps the
   tighter measure, and the line under the headline sits with it as a pair */
#rules .darkpanel{max-width:900px}
#rules .h2{margin-bottom:.45rem}
#rules .rules-lead{max-width:56ch;margin:0}

/* ── the cost ─────────────────────────────────────────────────
   the two bars are the whole argument: what Google puts in against
   what it costs, drawn to the same scale so the 5% is seen, not read */
#cost .h2{margin-bottom:.45rem}
#cost .cost-lead{margin:0}
@media (max-width:640px){
  .ratio-row{grid-template-columns:1fr;gap:.7rem}
}

/* the process heading pairs with its line the same way the rules and cost
   headings do: tight beneath, full space down to what it introduces */
#how .subhead{margin-bottom:.45rem}
#how .process-lead{max-width:56ch;margin:0}
#how .track{margin-top:clamp(2.2rem,4vw,3rem)}

/* ── comparison scaffolding: delete with the losing option ──── */

/* rules card and the stakes side by side: two thirds and one third, the
   card keeps a tight reading measure and the stakes stop being a footnote */
#rules .darkpanel{max-width:none;margin:clamp(2.4rem,4.4vw,3.4rem) 0 0}
.rulesgrid{display:grid;gap:1.25rem;align-items:start}
@media (min-width:900px){
  .rulesgrid{grid-template-columns:2fr 1fr}
  #rules .darkpanel{margin-top:0}
}
.rulesgrid{margin:clamp(2.4rem,4.4vw,3.4rem) 0 0}
.sidepanel{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:clamp(1.6rem,2.6vw,2rem);display:flex;flex-direction:column}
.sp-head{margin:0 0 1.1rem;font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--alarm)}
.sidepanel .rules-quote{margin:0;border:0;padding:0}
.sidepanel .rules-quote p{margin:0;font-size:clamp(1.12rem,1.6vw,1.32rem);line-height:1.38;
  letter-spacing:-.016em;font-weight:600;color:var(--ink);text-wrap:pretty}
.sidepanel .rules-quote cite{display:block;margin:.9rem 0 0;font-style:normal;
  font-size:.9rem;line-height:1.4;color:var(--muted)}
.sidepanel .rules-quote cite a{color:var(--gold)}
.sp-note{margin:1.6rem 0 0;font-size:.98rem;line-height:1.5;color:var(--body)}

/* the close: the page ends on the ask rather than on the price */
#close .h2{margin-bottom:.45rem;max-width:21ch;text-wrap:balance}
#close .close-lead{margin:0;max-width:54ch}
#close .close-cta{margin:clamp(1.9rem,3.2vw,2.5rem) 0 0}

/* ── footer contact form ──────────────────────────────────────
   the details on the left, a way to reach me on the right, so the
   page ends with two ways in rather than one */
.foot-grid{display:grid;gap:clamp(2.4rem,5vw,4rem)}
@media (min-width:860px){.foot-grid{grid-template-columns:1.15fr 1fr;align-items:start}}
.ff-in{display:block;width:100%;font:inherit;font-size:1.02rem;line-height:1.4;
  color:var(--cream);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.28);border-radius:10px;
  padding:.85rem .95rem;margin:0 0 .9rem;
  transition:border-color .15s ease,background .15s ease}
.ff-in:focus{outline:0;border-color:var(--gold-d);background:rgba(255,255,255,.11)}
.ff-in::placeholder{color:#C3CEDB;opacity:1}
.ff-ta{resize:vertical;min-height:104px}
.ff-pot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ff-btn{font:inherit;font-weight:600;font-size:1rem;line-height:1.2;cursor:pointer;
  color:var(--navy);background:var(--cream);border:0;border-radius:10px;
  padding:.78rem 1.5rem;transition:background .15s ease,transform .12s ease}
.ff-btn:hover{background:#fff;transform:translateY(-1px)}
.ff-btn[disabled]{opacity:.65;cursor:default;transform:none}
/* The footer sits on navy, so the confirmation is white rather than gold:
   a success message that is hard to read is a success message nobody
   trusts. Errors stay in the alarm colour. */
.ff-status{margin:.9rem 0 0;font-size:.95rem;line-height:1.45;color:#FFFFFF;font-weight:600}
.ff-status:empty{display:none}
/* The confirmation, shaped like the eligibility flow's: the word carries,
   the detail follows. */
.ff-status .ok-h,.cm-status .ok-h{display:block;font-size:1.35rem;font-weight:700;
  letter-spacing:-.02em;line-height:1.2;margin:0 0 .2rem}
.cm-status .ok-h{color:var(--navy)}
.cm-status span{color:var(--body)}
.ff-status.is-err{color:var(--alarm-d)}

/* ── the cost chart ──────────────────────────────────────────
   label first, then the bar: the frame is accepted before the number
   arrives, and $500 sits outside its own fill because it cannot fit */
#cost .chart{max-width:none;margin:clamp(2.4rem,4.4vw,3.4rem) 0 0}
.cbar + .cbar{margin-top:1.6rem}
.cbar-name{margin:0 0 .55rem;font-size:1.02rem;line-height:1.4;color:var(--body)}
.cbar-track{display:flex;align-items:center;height:36px;background:var(--line-soft);
  border-radius:0 4px 4px 0;border-left:2px solid var(--line)}
.cbar-fill{flex:none;height:100%;min-width:8px;background:var(--navy);
  border-radius:0 5px 5px 0;display:flex;align-items:center;justify-content:flex-end}
.cbar-fill.is-fee{background:var(--navy)}  /* both bars are the same money, so the same colour — only length differs */
.cbar-val{font-weight:700;font-size:1.14rem;line-height:1;letter-spacing:-.02em;white-space:nowrap}
.cbar-val.inside{color:var(--paper);padding-right:14px}
.cbar-val.outside{color:var(--ink);margin-left:14px}
.chart-note{margin:1.6rem 0 0;padding-top:1.3rem;border-top:1px solid var(--line);
  max-width:none;font-size:1rem;line-height:1.55;color:var(--muted)}

/* legal links, quiet at the bottom of the footer */
.foot-role{font-size:1rem;color:var(--cream-mute);margin:0 0 1rem}
.foot-legalbar .foot-fine{margin-top:0}
.foot-legal{margin:1.2rem 0 0;font-size:1rem;color:var(--cream-mute)}
.foot-about .foot-copy{margin:1rem 0 0;font-size:1rem;color:var(--cream-mute)}
.foot-legal a{color:var(--cream-mute);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
.foot-legal a:hover{color:var(--cream)}

/* the close, with a face beside the ask — the empty right side of this
   section was the natural place for it. The cap keeps the circle from ever
   standing taller than the headline-to-button block beside it, which is at
   its shortest (236px) around 1100px wide. */
.close-grid{display:grid;gap:clamp(2.2rem,4vw,3.5rem);align-items:center}
.close-face{margin:0}
.close-face img{display:block;width:clamp(150px,19vw,200px);height:auto;
  aspect-ratio:1/1;object-fit:cover;border-radius:50%}
@media (min-width:860px){
  .close-grid{grid-template-columns:1fr 1fr}
  .close-face{justify-self:center}
}
#cost .chart-note b{color:var(--ink);font-weight:600}

/* ── the letter ───────────────────────────────────────────────
   kept off the page and behind one link: the page stays terse, and
   anyone who wants the person behind it can have the long version */
/* Stacked, the figure fills the column while the portrait sits at the left
   edge — so a centred caption floats away from the image it belongs to.
   Left align it and the link hangs under the portrait, on the page's spine.
   Only from 860px, where the figure shrinks to the image, does centring
   actually centre it under anything. */
.close-face figcaption{margin:.85rem 0 0;text-align:left}
@media (min-width:860px){.close-face figcaption{margin-top:1rem;text-align:center}}
.letter-open{font:inherit;font-size:1rem;color:var(--body);
  background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(23,25,28,.3)}
.letter-open:hover{color:var(--ink);text-decoration-color:var(--ink)}

.letterbox{border:0;padding:0;background:var(--paper);color:var(--body);
  width:min(660px,calc(100vw - 2rem));max-height:min(86vh,900px);
  border-radius:14px;box-shadow:0 30px 80px -20px rgba(13,27,43,.45);overflow:hidden}
.letterbox::backdrop{background:rgba(13,27,43,.62)}
.lb-body{max-height:min(86vh,900px);overflow-y:auto;
  padding:clamp(1.9rem,4vw,3rem) clamp(1.5rem,4vw,3rem) clamp(2.2rem,4vw,3rem);
  -webkit-overflow-scrolling:touch}
.lb-close{position:absolute;top:.85rem;right:.85rem;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--paper-alt);border:1px solid var(--line);border-radius:50%;color:var(--ink)}
.lb-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
.lb-close:hover{background:var(--line-soft)}
.lb-title{margin:0 0 1.5rem;font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.12;
  letter-spacing:-.028em;font-weight:700;color:var(--ink)}
.lb-body p{margin:0 0 1.15rem;font-size:clamp(1.02rem,1.25vw,1.11rem);line-height:1.72;
  color:var(--body)}
.lb-body strong{color:var(--ink);font-weight:700}
.lb-body a{color:var(--gold)}
.lb-key{color:var(--ink)!important;font-weight:700;
  font-size:clamp(1.06rem,1.35vw,1.18rem)!important;line-height:1.5!important;
  margin:1.5rem 0 1.35rem!important}
.lb-body .lb-signoff{margin:1.6rem 0 0}
body.lb-open{overflow:hidden}

/* ── Get in touch, as an overlay ──────────────────────────────────────
   Same native <dialog> as the letter, so Esc, the focus trap and the
   backdrop are the browser's job. The topbar link stays a real mailto:
   underneath — the overlay is an enhancement, never the only route. */
.cbox{border:0;padding:0;background:var(--paper);color:var(--body);
  width:min(520px,calc(100vw - 2rem));border-radius:14px;
  box-shadow:0 30px 80px -20px rgba(13,27,43,.45);overflow:hidden}
.cbox::backdrop{background:rgba(13,27,43,.62)}
.cb-body{padding:clamp(1.9rem,4vw,2.6rem) clamp(1.5rem,4vw,2.4rem) clamp(1.9rem,4vw,2.4rem)}
.cb-title{margin:0 0 .5rem;font-size:clamp(1.5rem,2.6vw,1.9rem);line-height:1.12;
  letter-spacing:-.028em;font-weight:700;color:var(--ink)}
.cb-lede{margin:0 0 1.5rem;font-size:1rem;line-height:1.6;color:var(--body)}

/* the form on paper, where the footer's version sits on navy */
.cm-in{display:block;width:100%;font:inherit;font-size:1.02rem;line-height:1.4;
  color:var(--ink);background:var(--surface);border:1px solid var(--line);
  border-radius:9px;padding:.8rem .95rem;margin:0 0 .8rem}
.cm-in:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-soft)}
.cm-in::placeholder{color:#8E9299;opacity:1}
.cm-ta{resize:vertical;min-height:118px}
.cm-btn{font:inherit;font-weight:600;font-size:1rem;line-height:1.2;cursor:pointer;
  color:#fff;background:var(--navy);border:0;border-radius:9px;
  padding:.85rem 1.6rem;transition:background .15s}
.cm-btn:hover{background:var(--navy-d)}
.cm-btn[disabled]{opacity:.65;cursor:default}
.cm-status{margin:.9rem 0 0;font-size:.95rem;line-height:1.45;color:var(--gold)}
.cm-status:empty{display:none}
.cm-status.is-err{color:var(--alarm)}