/* ============================================================
   TYPE. IBM Plex, self-hosted. No third-party font host, so no
   visitor data leaves this site to load it. SIL Open Font Licence.
     Serif 600  headlines and the wordmark
     Sans       body, UI, navigation
     Mono       every money figure, every source line, the ledger
   The money is set in the mono on purpose: in an appraisal the
   figures are the argument, and they should read as a ledger.
   ============================================================ */
@font-face{font-family:"Plex Serif";src:url(fonts/ibm-plex-serif-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* Fraunces italic, the wordmark only (brand/BRAND.md). SIL OFL, self-hosted. */
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}

/* ============ tokens: civic cobalt ============ */
:root{
  color-scheme: light;
  /* The neutrals are desaturated cobalt, not warm ivory. The page is cool
     and institutional throughout, and the ONLY warm colour on it is the
     amber that marks something unverified. Warmth means unresolved. */
  --paper:#f2f5f9;
  --surface:#ffffff;
  --panel:#e8edf4;
  --ink:#12161c;
  --ink-2:#414a56;
  --muted:#5f6875;
  --rule:#dbe2ec;
  --rule-strong:#b3c0d1;
  --figure:#1c5cab;
  --cobalt:#1c5cab;
  --cobalt-deep:#164a8c;
  --cobalt-tint:#e3ecf9;
  --wordmark:#123f78;
  --on-cobalt:#f2f5f9;
  --on-cobalt-2:#cde2fb;
  --mark:#2a78d6;
  --neg:#b02f2f;
  --verify-ink:#7a5600;
  --verify-bg:#faf0d6;
  --verify-line:#dfc37e;
  --bar-gross:#5f9be6;
  --bar-net:#5598e7;
  --bar-pvb:#2a78d6;
  --bar-cost:#7d8898;
  --bar-npv:#1c5cab;
  --bar-neg:#e34948;
  --range-bar:#9ec5f4;
  --r-sm:3px;
  --r-md:8px;
  --shadow:none;

}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#0e1116;
    --surface:#161a21;
    --panel:#131820;
    --ink:#eef1f5;
    --ink-2:#b4bcc7;
    --muted:#838c99;
    --rule:#232a34;
    --rule-strong:#36404d;
    --figure:#7fb1f0;
    --cobalt:#1c5cab;
    --cobalt-deep:#164a8c;
    --cobalt-tint:#16202e;
    --wordmark:#a9c2e6;
    --on-cobalt:#f2f5f9;
    --on-cobalt-2:#cde2fb;
    --mark:#3987e5;
    --neg:#e66767;
    --verify-ink:#e5b84a;
    --verify-bg:#2a2415;
    --verify-line:#5c4c1d;
    --bar-gross:#1c5cab;
    --bar-net:#2a78d6;
    --bar-pvb:#5598e7;
    --bar-cost:#5d6672;
    --bar-npv:#86b6ef;
    --bar-neg:#e66767;
    --range-bar:#256abf;
    --r-sm:3px;
    --r-md:8px;
    --shadow:none;

  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#101216;
  --surface:#181c23;
  --panel:#14171d;
  --ink:#f0efe9;
  --ink-2:#b9bcc3;
  --muted:#8b8e95;
  --rule:#262a31;
  --rule-strong:#3a3f48;
  --figure:#7fb1f0;
  --cobalt:#1c5cab;
  --cobalt-deep:#164a8c;
  --cobalt-tint:#1a2636;
  --wordmark:#a9c2e6;
  --on-cobalt:#f2f5f9;
  --on-cobalt-2:#cde2fb;
  --mark:#3987e5;
  --neg:#e66767;
  --verify-ink:#e5b84a;
  --verify-bg:#2a2415;
  --verify-line:#5c4c1d;
  --bar-gross:#1c5cab;
  --bar-net:#2a78d6;
  --bar-pvb:#5598e7;
  --bar-cost:#6f6d66;
  --bar-npv:#86b6ef;
  --bar-neg:#e66767;
  --range-bar:#256abf;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -20px rgba(0,0,0,.6);
}

/* ============ base ============ */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
section[id]{ scroll-margin-top:4.6rem; }
@media (max-width:560px){ section[id]{ scroll-margin-top:8.4rem; } }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.02rem; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{
  font-family:"Plex Serif",Georgia,serif;
  font-weight:600; line-height:1.08; margin:0 0 .55em;
  text-wrap:balance; letter-spacing:-.012em;
}
h1{ font-size:clamp(2.6rem,6vw,4.2rem); }
h2{ font-size:clamp(1.9rem,4.2vw,2.9rem); }
h3{ font-size:1.18rem; line-height:1.25; }
p{ margin:0 0 1em; }
a{ color:var(--figure); text-underline-offset:2px; }
:focus-visible{ outline:2px solid var(--figure); outline-offset:2px; border-radius:var(--r-sm); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none!important; transition:none!important; }
}

.wrap{ max-width:72rem; margin-inline:auto; padding-inline:clamp(1.2rem,4vw,2.6rem); }
.measure{ max-width:46rem; }
section{ padding-block:clamp(3.6rem,8vw,6.5rem); }
.eyebrow{
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--figure); margin:0 0 1.15rem; padding-bottom:.5rem;border-bottom:1px solid var(--rule-strong); display:inline-block;
}

.lead{ font-size:1.16rem; line-height:1.65; }
.small{ font-size:.87rem; color:var(--ink-2); }
.mono{ font-family:"Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; }
.srcline{ font-family:"Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.72rem; color:var(--ink-2); line-height:1.5; }
.srcline a{ color:var(--ink-2); }
.fig{ color:var(--figure); font-variant-numeric:tabular-nums; }
.tnum{ font-variant-numeric:tabular-nums; }

.chip{
  display:inline-block; font-family:"Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.66rem; letter-spacing:.02em; padding:.12em .5em;
  color:var(--verify-ink); background:var(--verify-bg);
  border:1px solid var(--verify-line); border-radius:var(--r-sm); vertical-align:.12em;
  white-space:nowrap;
}

.btn{
  display:inline-block; border:1px solid var(--cobalt); background:var(--cobalt); color:#fff;
  font:inherit; font-weight:600; font-size:.98rem; padding:.72em 1.5em; border-radius:var(--r-md);
  cursor:pointer; text-decoration:none; box-shadow:var(--shadow);
}
.btn:hover{ background:var(--cobalt-deep); border-color:var(--cobalt-deep); }
.btn-ghost{
  display:inline-block; border:1.5px solid var(--ink-2); background:transparent; color:var(--ink); text-decoration:none;
  font:inherit; font-weight:600; font-size:.87rem; padding:.5em 1.1em; border-radius:var(--r-md); cursor:pointer;
}
.btn-ghost:hover{ border-color:var(--figure); color:var(--figure); }

/* ============ masthead ============ */
header.masthead{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 84%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
  padding-block:.35rem;
}
@supports not (background:color-mix(in srgb, red 50%, blue)){
  header.masthead{ background:var(--paper); }
}
.masthead .wrap{ display:flex; flex-wrap:wrap; gap:.75rem 1.6rem; align-items:center; justify-content:space-between; }
/* Wordmark: "Set, Not Drawn" (brand/BRAND.md). The word in Fraunces italic,
   two rules beneath it, the second set slightly proud of the first. */
.wordmark{
  display:inline-flex; align-items:center; gap:.42em;
  font-family:"Fraunces",Georgia,"Times New Roman",serif; font-style:italic; font-weight:500;
  font-size:1.5rem; line-height:1; color:var(--wordmark); text-decoration:none; letter-spacing:-.005em;
}
.wordmark .mark{ width:1.05em; height:1.05em; flex:none; display:block; }
.wordmark .wm{ position:relative; display:inline-block; padding:0 .12em .38em 0; }
.wordmark .wm::before,.wordmark .wm::after{ content:""; position:absolute; left:.04em; height:1px; background:currentColor; }
.wordmark .wm::before{ right:.14em; bottom:.2em; }
.wordmark .wm::after{ right:0; bottom:.08em; opacity:.55; }
nav.top{ display:flex; gap:0 1.4rem; flex-wrap:wrap; }
nav.top a{ font-size:.85rem; font-weight:600; color:var(--ink-2); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }
nav.top a:hover{ color:var(--figure); }
.mission{ font-size:.85rem; color:var(--muted); font-style:italic; font-family:"Plex Serif",Georgia,serif; }

/* ============ hero: the cobalt front door ============ */
.hero{
  background:var(--cobalt);
  color:var(--on-cobalt);
  padding-block:clamp(3.6rem,8vw,6.5rem);
  overflow:hidden;
}
.herogrid{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:880px){ .herogrid{ grid-template-columns:1fr; } }
.hero-eyebrow{
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-cobalt-2); margin:0 0 1.2rem;
}
.hero h1{ color:var(--on-cobalt); margin-bottom:.5em; }
.hero .support{ font-size:1.16rem; line-height:1.65; color:var(--on-cobalt-2); max-width:34rem; }
.hero .ctarow{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:1.8rem; }
.btn-hero{ background:var(--on-cobalt); border-color:var(--on-cobalt); color:var(--cobalt-deep); }
.btn-hero:hover{ background:#fff; border-color:#fff; color:var(--cobalt-deep); }
.btn-hero2{ background:transparent; border:1.5px solid var(--on-cobalt-2); color:var(--on-cobalt); box-shadow:none; }
.btn-hero2:hover{ background:rgba(255,255,255,.12); border-color:var(--on-cobalt); }
.smallnote{ font-size:.85rem; color:var(--on-cobalt-2); max-width:16rem; line-height:1.5; }
.hero-price{ font-family:"Plex Serif",Georgia,serif; font-size:1.08rem; line-height:1.5; color:var(--on-cobalt); max-width:34rem; margin-top:1.1rem; }
.hero .reply-line{ max-width:none; margin:.7rem 0 0; }
.hero-alt{ margin:1.1rem 0 0; font-size:.95rem; color:var(--on-cobalt-2); }
.hero-alt a{ color:var(--on-cobalt); font-weight:600; text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px; }
.hero-alt a:hover{ color:#fff; }
.btn-wa{ display:inline-flex; align-items:center; gap:.6rem; }
.btn-wa svg{ width:20px; height:20px; fill:currentColor; flex:none; }
/* Fixed WhatsApp button. The one place the WhatsApp green is used. */
.wa-fab{
  position:fixed; right:max(1rem, env(safe-area-inset-right)); bottom:max(1rem, env(safe-area-inset-bottom)); z-index:60;
  display:inline-flex; align-items:center; gap:.55rem; min-height:48px; padding:.6rem 1.15rem .6rem .95rem;
  background:#25D366; color:#fff; font-weight:600; font-size:.95rem; border-radius:999px; text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.25), 0 10px 28px -14px rgba(0,0,0,.5);
}
.wa-fab svg{ width:22px; height:22px; fill:currentColor; flex:none; }
.wa-fab:hover{ background:#1ebe5b; color:#fff; }
.wa-fab.away{ opacity:0; pointer-events:none; transform:translateY(8px); }
.wa-fab{ transition:opacity .25s, transform .25s; }
@media print{ .wa-fab{ display:none; } }
/* Two states, one switch (the wa-number meta tag). Off: WhatsApp elements hidden, the consultation is primary. */
.wa-only{ display:none !important; }
html.has-wa .wa-only{ display:revert !important; }
html.has-wa .btn-wa.wa-only, html.has-wa .wa-fab.wa-only{ display:inline-flex !important; }
html.has-wa .no-wa-only{ display:none !important; }
html.has-wa .contact-row .btn-book{ background:transparent; color:var(--ink); border:1.5px solid var(--rule-strong); box-shadow:none; font-weight:600; }
html.has-wa .contact-row .btn-book:hover{ border-color:var(--figure); color:var(--figure); }
/* Phones: the button must sit above the fold. Compress the masthead, tighten the hero. */
@media (max-width:560px){
  .masthead .mission{ display:none; }
  nav.top{ gap:.55rem .9rem; }
  nav.top a{ font-size:.8rem; }
  .hero{ padding-block:2.2rem 2.6rem; }
  .hero h1{ font-size:clamp(1.9rem,8.6vw,2.4rem); }
  .hero .support{ font-size:1.04rem; line-height:1.55; }
  .hero-price{ font-size:1rem; }
}
/* ============ tool ============ */
#tool{ background:var(--panel); }
#tool .toolgrid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(1.5rem,4vw,3rem); margin-top:2.2rem; }
@media (max-width:920px){ #tool .toolgrid{ grid-template-columns:1fr; } }
.card{ background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-md); padding:clamp(1.2rem,2.6vw,1.8rem); box-shadow:var(--shadow); }
.field{ margin-bottom:1.1rem; }
.field label, .field .lab{ display:block; font-size:.78rem; font-weight:600; letter-spacing:.03em; margin-bottom:.32rem; color:var(--ink); }
.field input[type=number], .field input[type=text], .field select{
  width:100%; font:inherit; font-size:.96rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--rule-strong); border-radius:var(--r-md); padding:.55em .7em;
}
.field input:focus-visible, .field select:focus-visible{ outline:2px solid var(--figure); outline-offset:0; border-color:var(--figure); }
.field input[type=number]{ text-align:right; font-variant-numeric:tabular-nums; }
.field .note{ font-size:.75rem; color:var(--ink-2); margin-top:.32rem; line-height:1.5; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:.95rem; }
@media (max-width:480px){ .two-col{ grid-template-columns:1fr; } }

fieldset.cf{ border:1.5px solid var(--verify-line); background:var(--verify-bg); border-radius:var(--r-md); padding:.95rem 1.05rem .65rem; margin:0 0 1.1rem; }
fieldset.cf.chosen{ border-color:var(--rule-strong); background:var(--surface); }
fieldset.cf legend{ font-size:.78rem; font-weight:600; padding-inline:.35em; }
fieldset.cf .cf-note{ font-size:.76rem; color:var(--verify-ink); margin:.1rem 0 .55rem; line-height:1.5; }
fieldset.cf.chosen .cf-note{ color:var(--muted); }
.cf label{ display:flex; gap:.6rem; align-items:flex-start; font-size:.86rem; padding:.34rem 0; cursor:pointer; line-height:1.5; }
.cf input{ margin-top:.3em; accent-color:var(--figure); }

details.adv{ border-top:1px solid var(--rule); padding-top:.95rem; margin-top:.4rem; }
details.adv summary{ cursor:pointer; font-size:.84rem; font-weight:600; color:var(--ink-2); }
details.adv summary:hover{ color:var(--figure); }
.slider{ display:grid; grid-template-columns:1fr auto; gap:.2rem .8rem; align-items:center; margin:.8rem 0; }
.slider label{ font-size:.78rem; font-weight:600; grid-column:1 / -1; margin:0; }
.slider input[type=range]{ width:100%; accent-color:var(--figure); }
.slider output{ font-size:.86rem; font-variant-numeric:tabular-nums; color:var(--figure); font-weight:600; min-width:3.2em; text-align:right; }

/* ledger */
.ledger{ margin:0; }
.ledger .lrow{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem; align-items:baseline; padding:.36rem 0; }
.ledger .lrow .l{ font-size:.9rem; color:var(--ink-2); }
.ledger .lrow .l .pct{ color:var(--muted); font-variant-numeric:tabular-nums; }
.ledger .lrow .v{ font-size:.97rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ledger .deduct .v{ color:var(--neg); }
.ledger .subtotal{ border-top:1px solid var(--rule-strong); margin-top:.15rem; padding-top:.52rem; }
.ledger .subtotal .l, .ledger .subtotal .v{ font-weight:600; color:var(--ink); font-size:.97rem; }
.ledger .grand{ border-top:3px double var(--rule-strong); margin-top:.3rem; padding-top:.6rem; }
.ledger .grand .l{ font-weight:600; color:var(--ink); font-size:1.02rem; }
.ledger .grand .v{ font-weight:600; font-size:1.5rem; color:var(--figure); }
.ledger .grand.negative .v{ color:var(--neg); }
.ledger .barrow{ padding:.05rem 0 .5rem; }
.ledger .bar{ height:10px; border-radius:0 var(--r-sm) var(--r-sm) 0; background:var(--mark); min-width:2px; }
.ledger .note-l{ font-size:.76rem; color:var(--muted); padding:.15rem 0 .3rem; font-style:italic; font-family:"Plex Serif",Georgia,serif; }
.reveal{ opacity:0; transform:translateY(5px); animation:rise .45s ease forwards; animation-delay:calc(var(--i)*90ms); }
@keyframes rise{ to{ opacity:1; transform:none; } }

.statrow{ display:flex; gap:2.4rem; flex-wrap:wrap; margin:1.5rem 0 .4rem; }
.stat .k{ font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.stat .n{ font-size:2.1rem; font-weight:600; font-variant-numeric:tabular-nums; color:var(--figure); line-height:1.2; letter-spacing:-.02em; }
.stat .n.negative{ color:var(--neg); }
.stat .sub{ font-size:.78rem; color:var(--ink-2); }

.awaiting{
  border:1.5px dashed var(--verify-line); background:var(--verify-bg); color:var(--verify-ink);
  border-radius:var(--r-md); padding:.85rem 1.05rem; font-size:.86rem; margin:.6rem 0; line-height:1.55;
}
.awaiting b{ font-weight:600; }

.outblock{ border-top:1px solid var(--rule); margin-top:1.6rem; padding-top:1.3rem; }
.outblock h3{ font-size:1.05rem; margin-bottom:.6rem; }
table.sens{ border-collapse:collapse; width:100%; font-size:.86rem; }
table.sens th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-2); font-weight:600; padding:.35rem .6rem .35rem 0; border-bottom:2px solid var(--ink); }
table.sens td{ padding:.42rem .6rem .42rem 0; border-bottom:1px solid var(--rule); font-variant-numeric:tabular-nums; }
table.sens td.r{ text-align:right; }
table.sens .neg{ color:var(--neg); }
.senschart{ margin-top:1rem; max-width:34rem; }
.senschart svg{ width:100%; height:auto; display:block; }

details.method{ border:1.5px solid var(--rule-strong); border-radius:var(--r-md); margin-top:1.3rem; background:var(--surface); }
details.method summary{ cursor:pointer; padding:.85rem 1.15rem; font-weight:600; font-size:.94rem; }
details.method summary:hover{ color:var(--figure); }
details.method .body{ padding:0 1.35rem 1.15rem; font-family:"Plex Serif",Georgia,serif; font-size:1rem; max-width:44rem; line-height:1.6; }
details.method .body p{ margin:0 0 .85em; }
.copyrow{ padding:0 1.35rem 1.05rem; }

.limitation{
  border:1px solid var(--rule-strong); border-radius:var(--r-md); padding:1.05rem 1.25rem; margin-top:1.3rem;
  font-size:.86rem; color:var(--ink-2); background:var(--paper); line-height:1.6;
}
.limitation b{ color:var(--ink); }
.toolcta{border:1px solid var(--rule-strong); margin-top:1.5rem; padding:1.35rem 1.5rem; background:var(--cobalt); color:var(--on-cobalt); border-radius:var(--r-md); box-shadow:var(--shadow); }
.toolcta p{ margin:0 0 .9rem; line-height:1.6; }
.toolcta b{ color:#fff; }
.toolcta .btn{ background:var(--on-cobalt); color:var(--cobalt-deep); border-color:var(--on-cobalt); box-shadow:none; }
.toolcta .btn:hover{ background:#fff; border-color:#fff; }

/* ============ five wrongs ============ */
table.wrongs{ border-collapse:collapse; width:100%; margin-top:1.8rem; font-size:.93rem; }
table.wrongs th{ font-family:"Plex Serif",Georgia,serif; font-size:1.06rem; text-align:left; padding:.65rem 1rem .65rem 0; border-bottom:3px solid var(--cobalt); vertical-align:bottom; }
table.wrongs td{ padding:.85rem 1rem .85rem 0; border-bottom:1px solid var(--rule); vertical-align:top; line-height:1.55; }
table.wrongs td:first-child{ color:var(--neg); }
table.wrongs td:last-child{ color:var(--ink); }
.own-line{ font-family:"Plex Serif",Georgia,serif; font-style:italic; color:var(--ink-2); margin-top:1.5rem; font-size:1.05rem; }
/* ============ how it works ============ */
#what, #contact{ background:var(--panel); }
footer{ margin-top:0 !important; }
ol.steps{ list-style:none; counter-reset:step; margin:2.2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:820px){ ol.steps{ grid-template-columns:1fr; } }
ol.steps li{ counter-increment:step; border-top:2px solid var(--cobalt); padding-top:.9rem; }
ol.steps li::before{
  content:counter(step); display:block; font-family:"Plex Serif",Georgia,serif;
  font-size:1.6rem; font-weight:600; color:var(--figure); line-height:1; margin-bottom:.45rem;
  font-variant-numeric:tabular-nums;
}
ol.steps h4{ font-family:"Plex Serif",Georgia,serif; font-weight:600; font-size:1.08rem; line-height:1.3; margin:0 0 .4rem; }
ol.steps p{ font-size:.92rem; color:var(--ink-2); margin:0; line-height:1.55; }

/* ============ team / contact / footer ============ */
.contact-row{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; margin-top:1.5rem; }
footer{ background:var(--cobalt); color:var(--on-cobalt-2); padding-block:2.6rem 3.2rem; margin-top:1rem; }
footer .wrap{ display:flex; flex-wrap:wrap; gap:1.2rem 3rem; justify-content:space-between; font-size:.82rem; line-height:1.6; }
footer b{ color:var(--on-cobalt); }
footer .fm{ font-family:"Plex Serif",Georgia,serif; font-style:italic; color:var(--on-cobalt); }
footer .mono{ color:var(--on-cobalt); }
footer a{ color:var(--on-cobalt); }
footer .wordmark{ color:var(--on-cobalt); font-size:1.35rem; margin-right:.6em; }

/* email capture */
.capture{ border:1.5px solid var(--rule-strong); border-radius:var(--r-md); padding:1.1rem 1.3rem; margin-top:1.3rem; background:var(--cobalt-tint); }
.capture form{ display:block; margin:.7rem 0 .5rem; }
.capture input[type=email]{ font:inherit; padding:.55em .75em; border:1px solid var(--rule-strong); border-radius:var(--r-md); background:var(--surface); color:var(--ink); }
.capture .consent{ display:flex; gap:.5rem; align-items:flex-start; cursor:pointer; }
.capture .consent input{ margin-top:.3em; accent-color:var(--figure); }

/* polish */
::selection{ background:var(--cobalt-tint); color:var(--ink); }
.hero ::selection{ background:rgba(255,255,255,.25); color:#fff; }
.btn, .btn-ghost{ transition:background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.btn:active{ transform:translateY(1px); }

/* tooltip */
#tip{
  position:fixed; z-index:50; pointer-events:none; display:none;
  background:var(--ink); color:var(--paper); font-size:.75rem; padding:.32em .65em;
  border-radius:var(--r-sm); font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* SIGNATURE: every figure is set in the mono, tabular. In an appraisal
   the numbers are the argument, so they read as a ledger and align in a
   column wherever they are stacked. This is the one deliberate move. */
.fig,.tnum,.stat .n,
.ledger .lrow .v,.ledger .lrow .l .pct,
table.sens td,.price-fig .num,.bar-val,
.slider output,.field input[type=number]{
  font-family:"Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:-.01em;
  font-weight:500;
}

/* ============================================================
   MARGINALIA. The page carries a reviewer's annotations in the
   left margin, in the mono, challenging its own claims. This is
   the practice applying its method to itself in public, and it
   is the reason the annotated sections do not sit in the same
   centred column as everything else. Asymmetry on purpose.
   ============================================================ */
.wrap.annotated{
  max-width:82rem;
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,50rem);
  gap:clamp(1.4rem,4vw,3.4rem);
  align-items:start;
}
.wrap.annotated > .col{grid-column:2;min-width:0}
.wrap.annotated > .marg{grid-column:1;position:sticky;top:5.5rem}
.marg{
  font-family:"Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.735rem; line-height:1.62; color:var(--muted);
  border-left:2px solid var(--rule-strong);
  padding:.1rem 0 .1rem .85rem; margin:0;
}
.marg b{color:var(--ink-2);font-weight:500;display:block;margin-bottom:.28rem;
  letter-spacing:.06em;text-transform:uppercase;font-size:.66rem}
.marg + .marg{margin-top:1.5rem}
@media (max-width:1040px){
  .wrap.annotated{grid-template-columns:1fr;max-width:72rem}
  .wrap.annotated > .col,.wrap.annotated > .marg{grid-column:1}
  .wrap.annotated > .marg{position:static;margin-bottom:.4rem;max-width:44rem}
}

/* the send form in the tool's keep-your-appraisal block */
.sendform .hp{ position:absolute; left:-9999px; }
.sendform .field{ margin-top:.6rem; }
.sendform .consent{ display:flex; gap:.5rem; align-items:flex-start; margin-top:.7rem; cursor:pointer; }
.sendform .consent input{ margin-top:.3em; accent-color:var(--figure); }
.sendform .consent a{ color:inherit; }
.sendform input[type=text],.sendform input[type=email]{ width:100%; font:inherit; padding:.55em .75em; border:1px solid var(--rule-strong); border-radius:var(--r-md); background:var(--surface); color:var(--ink); }
.toolcta h3{ color:inherit; }
.toolcta .btn-ghost{ color:var(--on-cobalt); border-color:rgba(255,255,255,.5); }
.toolcta .btn-ghost:hover{ color:#fff; border-color:#fff; }

/* ============ additions, 12 Sep 2026: marketing and support surfaces ============ */
/* skip link: off-screen until focused */
.skip{ position:absolute; left:-999px; top:.6rem; z-index:100; background:var(--cobalt); color:#fff; padding:.55em 1em; border-radius:var(--r-md); font-weight:600; text-decoration:none; }
.skip:focus{ left:.6rem; }
/* focus rings on cobalt grounds, where the default cobalt ring disappears into the background */
.hero :focus-visible, footer :focus-visible, .toolcta :focus-visible, .wa-fab:focus-visible{ outline-color:var(--on-cobalt); }
/* tool page headline: promoted to h1, held at the h2 size so nothing moves */
#tool h1{ font-size:clamp(1.9rem,4.2vw,2.9rem); }

/* FAQ: ruled list of details, no cards */
.faq{ margin-top:1.4rem; max-width:46rem; border-top:1px solid var(--rule-strong); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{ cursor:pointer; padding:.95rem 0; font-weight:600; font-size:1rem; line-height:1.4; }
.faq summary:hover, .faq details[open] summary{ color:var(--figure); }
.faq details p{ font-size:.95rem; color:var(--ink-2); line-height:1.6; margin:0 0 1rem; max-width:42rem; }

/* What happens next: three numbered steps */
.after-steps{ list-style:none; counter-reset:after; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; max-width:64rem; }
@media (max-width:820px){ .after-steps{ grid-template-columns:1fr; } }
.after-steps li{ counter-increment:after; font-size:.92rem; color:var(--ink-2); line-height:1.55; padding-top:.7rem; border-top:2px solid var(--cobalt); }
.after-steps li::before{ content:counter(after); display:block; font-family:"Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.78rem; font-weight:500; color:var(--figure); margin-bottom:.35rem; }
.after-steps b{ display:block; color:var(--ink); font-weight:600; margin-bottom:.2rem; }

/* ============ 24 Sep 2026: the six-section front page ============ */
/* Hero: copy left, the one-minute film right. On phones the film follows the button. */
.hero .hero-copy{ min-width:0; }
.hero-film{ margin:0; min-width:0; }
.hero-film video{ display:block; width:100%; height:auto; aspect-ratio:16/9; border-radius:var(--r-md); background:#0e2c55;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 18px 40px -24px rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.28); }
.hero-film figcaption{ margin-top:.7rem; font-size:.85rem; color:var(--on-cobalt-2); }
.hero-film figcaption a{ color:var(--on-cobalt); }
.transcript{ margin-top:.35rem; }
.transcript summary{ cursor:pointer; color:var(--on-cobalt); font-weight:600; text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px; }
.transcript p{ margin:.6rem 0 0; line-height:1.55; }
.transcript .src{ font-size:.78rem; opacity:.9; }
@media (max-width:880px){ .hero-film{ margin-top:.6rem; } }

/* Gap: bars as HTML so the words stay readable on a phone. Same scale; the cobalt bar is the budget. */
.bars{ margin:2rem 0 .6rem; max-width:46rem; display:grid; gap:1.1rem; }
.bar-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.3rem 1rem; align-items:center; }
.bar-lbl{ grid-column:1 / -1; font-size:.9rem; color:var(--ink-2); }
.bar-track{ display:block; height:14px; }
.bar-fill{ display:block; height:100%; width:var(--w); background:var(--bar-cost); border-radius:0 var(--r-sm) var(--r-sm) 0; }
.bar-fill.budget{ background:var(--cobalt); }
.bar-val{ font-size:1.05rem; min-width:4.5em; text-align:right; }
.gap-more{ margin-top:1.8rem; }

/* What we do: six topics as a ruled two-column list, not cards */
.topics{ list-style:none; margin:2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 2.4rem; max-width:62rem; }
@media (max-width:720px){ .topics{ grid-template-columns:1fr; } }
.topics li{ border-top:1px solid var(--rule-strong); padding:.85rem 0 .95rem; color:var(--ink-2); font-size:.95rem; line-height:1.55; }
.topics b{ display:block; font-family:"Plex Serif",Georgia,serif; font-weight:600; color:var(--ink); font-size:1.12rem; margin-bottom:.15rem; }
.steps-head{ margin-top:3rem; }
.tool-line{ margin-top:2rem; }

/* The signed appraisal */
.pricebox{ margin:1.8rem 0 2rem; padding:1.4rem 1.6rem; background:var(--cobalt-tint); border-left:4px solid var(--cobalt); border-radius:0 var(--r-md) var(--r-md) 0; max-width:46rem; }
.price-fig{ margin:0 0 .5rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem 1rem; }
.price-fig .num{ font-size:clamp(1.9rem,5vw,2.6rem); color:var(--figure); line-height:1.1; letter-spacing:-.02em; }
.price-fig .or{ font-family:"Plex Serif",Georgia,serif; font-size:1.1rem; color:var(--ink); }
.pricebox .founding{ margin:1rem 0 0; color:var(--ink); }
.covers{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem 2.4rem; max-width:50rem; margin-bottom:1.4rem; }
@media (max-width:720px){ .covers{ grid-template-columns:1fr; } }
.covers ul{ margin:0; padding-left:1.1rem; color:var(--ink-2); }
.covers li{ margin:.3rem 0; line-height:1.5; }
#price h3{ margin-top:.4rem; }
#price .ctarow{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; margin-top:1.6rem; }
a.quiet{ font-weight:600; }

/* Questions and contact */
.next-head{ margin-top:2.6rem; }
#contact h2, #faq h2{ margin-bottom:.8rem; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn:disabled:hover{ background:var(--cobalt); border-color:var(--cobalt); }
/* tool page: the card headings are h2 for the outline, held at the h3 size */
h2.card-h{ font-size:1.18rem; line-height:1.25; }
.outblock h2.card-h{ font-size:1.05rem; margin-bottom:.6rem; }
.toolcta h2.card-h{ color:inherit; }

/* ============ 29 Sep 2026: the trailer page ============ */
/* One column on cobalt: the heading, the film at full width, then the one action. */
.trailer .wrap{ max-width:62rem; }
.trailer h1{ max-width:40rem; }
.trailer .hero-film{ margin:1.6rem 0 2rem; }
.trailer .support{ margin-top:0; }

/* ============ 29 Sep 2026: for external use ============ */
/* The free tool's waiting list, where the signed appraisal section was. A tinted band, so it reads as its own ask. */
#tool{ background:var(--cobalt-tint); }
.waitlist{ max-width:52rem; margin-top:1.8rem; }
.wl-fields{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 1.1rem; }
@media (max-width:720px){ .wl-fields{ grid-template-columns:1fr; } }
.field input[type=email]{
  width:100%; font:inherit; font-size:.96rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--rule-strong); border-radius:var(--r-md); padding:.55em .7em;
}
.field .opt{ font-weight:400; letter-spacing:0; color:var(--muted); }
.wl-note{ margin:.9rem 0 0; max-width:40rem; }
/* The company's registered details, on every page (Companies Act trading disclosures). */
footer .legal{ flex-basis:100%; margin:.2rem 0 0; font-size:.76rem; color:var(--on-cobalt-2); }
/* A link inside the hero copy (the thank-you page) reads on cobalt. */
.hero .support a{ color:var(--on-cobalt); }