/* ==========================================================================
   Brelford Solutions — brelford.com
   Self-hosted stylesheet for the static build.
   ========================================================================== */

:root{
  --ink:#1E293B;
  --muted:#64748B;
  --line:#CBD5E1;
  --line-soft:#E2E8F0;
  --green:#2F855A;
  --green-dark:#276749;
  --green-pale:#A7E3C4;
  --bg:#ffffff;
  --bg-alt:#F8FAFC;
  --wrap:1000px;
  --pad:22px;
  --cardpad:24px;      /* horizontal padding inside cards that sit within .wrap */
  --radius:12px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-dark)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* ---------- header ---------- */
.bf-head{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--line-soft);
}
.bf-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:74px}
.bf-logo{display:flex;align-items:center;gap:10px;flex:0 0 auto;font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.01em}
.bf-logo img{height:44px;width:auto;flex:0 0 auto;display:block}
.bf-logo span{color:var(--green)}
.bf-nav{display:flex;align-items:center;gap:26px}
.bf-nav a{color:var(--muted);font-size:15px;font-weight:600}
.bf-nav a:hover{color:var(--ink)}
.bf-head .btn{padding:11px 18px;font-size:15px;border-radius:9px}
@media(max-width:860px){
  .bf-nav{display:none}
  .bf-head .wrap{min-height:64px}
  .bf-logo{font-size:17px}
}

/* ---------- buttons ---------- */
.btn{
  display:block;width:100%;text-align:center;
  background:var(--green);color:#fff;
  font-size:17px;font-weight:800;
  padding:15px 20px;border-radius:11px;border:0;
  cursor:pointer;transition:background .15s ease,transform .15s ease;
  font-family:inherit;
}
.btn:hover{background:var(--green-dark);color:#fff;transform:translateY(-1px)}
.btn.ghost{background:#fff;color:var(--green);border:1.5px solid var(--green)}
.btn.ghost:hover{background:var(--green);color:#fff}
a.btn{text-decoration:none;color:#fff}

/* ---------- type ---------- */
h1,h2,h3{color:var(--ink);margin:0}
h1{font-size:56px;font-weight:850;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
h2.sec{font-size:36px;font-weight:800;line-height:1.15;letter-spacing:-.01em;margin-bottom:8px;text-wrap:balance}
.bf-stack h3{font-size:20px;font-weight:750;margin:26px 0 6px}
.bf-stack h3:first-child{margin-top:0}
.eyebrow{
  font-size:13px;font-weight:700;color:var(--green);
  letter-spacing:.6px;text-transform:uppercase;margin-bottom:14px;
}
.sub{font-size:20px;line-height:1.5;color:var(--ink);margin:0 0 22px}
.bf-lead{font-size:22px;font-weight:700;color:var(--ink);margin:0 0 18px}
.bf-stack p{margin:0 0 15px}
.bf-micro{font-size:13px;color:var(--muted);margin:10px 0 0}
.bf-cap{font-size:15px;color:var(--muted);margin:20px 0 0;text-align:center}
.bf-inline-cta{font-weight:700}
.bf-callout{
  margin:22px 0 0;padding:16px 18px;background:var(--bg-alt);
  border-left:4px solid var(--green);border-radius:8px;font-size:17px;
}
.bf-disq{font-size:15px;color:var(--muted);margin:16px 0 0}

/* ---------- sections ---------- */
.blk{padding:60px 0}
.hero{padding:52px 0 16px}
.bf-hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:start}
@media(max-width:900px){.bf-hero-grid{grid-template-columns:1fr;gap:28px}}

/* ---------- stat strip ---------- */
.strip{background:var(--bg-alt);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);margin-top:30px}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding-top:28px;padding-bottom:28px}
.stat .n{font-size:36px;font-weight:800;color:var(--green);line-height:1.1}
.stat .l{font-size:13px;color:var(--muted);line-height:1.45;margin-top:5px}
@media(max-width:820px){.strip .wrap{grid-template-columns:repeat(2,1fr);gap:20px}}

/* ---------- pricing ---------- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
@media(max-width:900px){.pricing{grid-template-columns:1fr}}
.plan{
  border:1px solid var(--line);border-radius:18px;padding:28px var(--cardpad);
  display:flex;flex-direction:column;position:relative;background:#fff;
}
.plan.feat{border-color:var(--green);box-shadow:0 16px 34px -24px rgba(47,133,90,.5)}
.plan h3{font-size:20px;font-weight:800;margin:0 0 6px}
.rib{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--green);color:#fff;font-size:12px;font-weight:700;
  padding:4px 12px;border-radius:20px;letter-spacing:.4px;white-space:nowrap;
}
.price{font-size:36px;font-weight:800;color:var(--ink);margin:0 0 4px}
.price small{font-size:15px;font-weight:600;color:var(--muted)}
.plan ul{list-style:none;margin:14px 0 20px;padding:0}
.plan ul li{position:relative;padding-left:24px;margin-bottom:9px;font-size:15px}
.plan ul li::before{
  content:"";position:absolute;left:0;top:8px;width:13px;height:7px;
  border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);
  transform:rotate(-45deg);
}
.plan .btn{margin-top:auto}
.plan .bf-micro{margin-top:0;margin-bottom:4px}
.bf-buy{margin-top:10px;text-align:center;font-size:13px}
.bf-buy a{color:var(--green);font-weight:600;text-decoration:underline}

/* payfast forms sit inside the plan card and must not add layout */
.pf-form{margin:0;padding:0;display:block}
.pf-link{
  background:none;border:0;padding:0;margin:0;font-family:inherit;font-size:13px;
  color:var(--green);font-weight:600;text-decoration:underline;cursor:pointer;
}
.pf-link:hover{color:var(--green-dark)}
.plan .pf-form .bf-buy{margin-top:10px}

/* ---------- definition lists ---------- */
.bf-facts{margin:22px 0 0}
.bf-facts dt{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:20px}
.bf-facts dd{font-size:17px;color:var(--ink);margin:5px 0 0}

/* ---------- ordered steps ---------- */
.bf-steps{counter-reset:s;list-style:none;margin:24px 0 0;padding:0}
.bf-steps li{counter-increment:s;position:relative;padding-left:48px;margin-bottom:20px}
.bf-steps li::before{
  content:counter(s);position:absolute;left:0;top:-2px;
  width:32px;height:32px;border-radius:50%;background:var(--green);color:#fff;
  font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;
}

/* ---------- forms ---------- */
.bf-formwrap{margin-top:22px}
.bf-form{
  background:#fff;border-radius:12px;padding:20px var(--cardpad);
  box-shadow:0 22px 48px -26px rgba(15,23,42,.45);
  border:1px solid var(--line-soft);
}
.bf-f{margin-bottom:14px}
.bf-form label{display:block;font-size:13px;font-weight:750;color:var(--ink);margin-bottom:6px}
.bf-form input{
  width:100%;border:1px solid var(--line);border-radius:9px;
  padding:13px 14px;font-size:17px;font-family:inherit;color:var(--ink);background:#fff;
}
.bf-form input:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.bf-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.bf-err{display:none;font-size:13px;color:#B91C1C;margin-top:5px}
.bf-err.is-shown{display:block}
.bf-step2.is-collapsed{display:none}
.bf-form.is-busy{opacity:.65;pointer-events:none}
.bf-thanks{
  background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:24px;
  box-shadow:0 22px 48px -26px rgba(15,23,42,.45);
}
.bf-thanks h3{font-size:20px;font-weight:800;margin:0 0 8px}
.bf-thanks p{margin:0;color:var(--muted)}

/* ---------- final CTA (dark) ---------- */
/* .blk.final, not .final: the responsive `.blk{padding:44px 0}` further down
   the sheet has the same specificity and would win on source order, stripping
   this card's side padding on every screen under 900px. */
.blk.final{
  background:linear-gradient(135deg,#1E293B,#276749);
  border-radius:22px;color:#fff;padding:60px 34px;margin:20px 0 60px;
  overflow-wrap:break-word;
}
.final h2.sec,.final h1{color:#fff}
.final .eyebrow{color:var(--green-pale)}
.final .sub{color:#CBD5E1}
.final > .bf-micro{color:var(--green-pale)}
.final > .bf-micro a{color:#fff;text-decoration:underline}
@media(max-width:700px){.blk.final{padding:44px 20px;border-radius:16px}}

/* ---------- sticky bar ---------- */
.bf-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:9980;
  display:none;gap:10px;padding:10px 14px;
  background:rgba(255,255,255,.97);border-top:1px solid var(--line-soft);
  box-shadow:0 -6px 20px -10px rgba(15,23,42,.3);
}
.bf-sticky.is-visible{display:flex}
/* without the flex basis the primary CTA wrapped to two lines and the bar
   grew to 93px */
.bf-sticky .btn{flex:1 1 68%;padding:12px 14px;font-size:15px;border-radius:9px;white-space:nowrap}
.bf-sticky .btn.ghost{flex:0 0 30%}
@media(min-width:861px){.bf-sticky{display:none!important}}

/* ---------- region gate ---------- */
/* align-items:center replaced by margin:auto on the box, plus overflow-y
   on the gate. Adding the close button made the box taller than a landscape
   phone (375x667 rotated), and a centred flex child that overflows loses its
   TOP edge with no way to scroll to it. margin:auto still centres when it
   fits, and scrolls instead of clipping when it does not. */
.region-gate{
  position:fixed;inset:0;z-index:10000;background:rgba(15,23,42,.6);
  display:flex;justify-content:center;overflow-y:auto;padding:20px;
}
.region-gate[hidden]{display:none}
.region-gate-box{background:#fff;border-radius:16px;padding:28px;max-width:420px;width:100%;margin:auto;text-align:center}
.region-gate-logo{margin-bottom:14px}
.region-gate-logo img{height:56px;width:auto;margin:0 auto;display:block}
@media(max-width:380px){.region-gate-logo img{height:46px}}
.region-gate-box h2{font-size:22px;font-weight:800;margin:0 0 6px}
.region-gate-box p{color:var(--muted);font-size:15px;margin:0 0 18px}
.region-gate-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.region-opt,.region-opt-other{
  border:1px solid var(--line);background:#fff;border-radius:10px;
  padding:12px;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;
}
.region-opt:hover,.region-opt-other:hover{border-color:var(--green);color:var(--green)}
.region-opt-other{width:100%;color:var(--muted);font-weight:500}
/* Keyboard users need a visible way out that is not the backdrop. Named
   region-gate-close, NOT region-opt-close: the click delegate substring
   matches "region-opt" and would treat it as a country choice. */
.region-gate-close{display:block;width:100%;margin-top:10px;background:none;border:0;padding:10px;font-family:inherit;font-size:13px;color:var(--muted);text-decoration:underline;cursor:pointer}
html:not(.bf-region) .price,html:not(.bf-region) .bf-cap span[id^="p-"]{visibility:hidden}

/* The floating WhatsApp bubble was removed on 2026-08-05. WhatsApp is still
   offered in the header-adjacent copy, the footer and every contact block —
   it just no longer sits on top of the page covering content. */

/* ---------- footer ---------- */
.bfgf{background:#1E293B;color:#CBD5E1;padding:52px 0 30px;margin-top:0;font-size:15px}
.bfgf a{color:#CBD5E1}
.bfgf a:hover{color:#fff}
.bfgf-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:34px}
@media(max-width:860px){.bfgf-grid{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:520px){.bfgf-grid{grid-template-columns:1fr}}
.bfnm{font-size:22px;font-weight:800;color:#fff;margin-bottom:8px}
.bfnm span{color:#68D391}
.bftag{color:#94A3B8;font-size:15px;line-height:1.55;margin:0}
.bfgf h3,.bfgf h4{font-size:13px;font-weight:800;color:#68D391;text-transform:uppercase;letter-spacing:.7px;margin:0 0 12px}
.bfgf ul{list-style:none;margin:0;padding:0}
.bfgf ul li{margin-bottom:8px}
.bfgf-base{
  border-top:1px solid #334155;margin-top:34px;padding-top:20px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  color:#94A3B8;font-size:13px;
}
.bfgf-base i{font-style:normal;color:#68D391;font-weight:600}

/* ---------- legal / article pages ---------- */
.doc{max-width:760px;margin:0 auto;padding:64px 24px 90px;line-height:1.7}
.doc a.back{display:inline-block;color:var(--green);font-weight:700;font-size:15px;margin-bottom:28px}
.doc .eyebrow{margin-bottom:10px}
.doc h1{font-size:36px;font-weight:800;letter-spacing:-.01em;margin:0 0 10px;line-height:1.2}
.doc .updated{color:var(--muted);font-size:15px;margin:0 0 34px}
.doc h2{font-size:20px;font-weight:700;margin:34px 0 10px}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 16px;padding-left:22px}
.doc li{margin:0 0 8px}
.doc .num{color:var(--green);font-weight:800;font-size:13px;letter-spacing:.5px;margin:34px 0 4px}
.doc .cta-box{margin:38px 0 0;padding:22px 24px;background:var(--bg-alt);border-left:4px solid var(--green);border-radius:6px}
.doc .cta-box p{margin:0 0 12px}
.doc .cta-box .btn{display:inline-block;width:auto}

/* ---------- responsive type ---------- */
@media(max-width:900px){
  h1{font-size:36px}
  h2.sec{font-size:22px}
  .sub{font-size:17px}
  .bf-lead{font-size:20px}
  .blk{padding:44px 0}
  .hero{padding:34px 0 8px}
  .doc h1{font-size:22px}
}

/* ---------- add-on bundle card ---------- */
.bf-bundle{
  position:relative;margin:30px 0 10px;padding:30px var(--cardpad);
  border:2px solid var(--green);border-radius:18px;background:var(--bg-alt);
}
.bf-bundle h3{font-size:22px;font-weight:800;margin:4px 0 6px}
.bf-bundle-lead{color:var(--muted);font-size:17px;margin:0 0 16px}
.bf-bundle-list{list-style:none;margin:0 0 20px;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:8px 22px}
@media(max-width:700px){.bf-bundle-list{grid-template-columns:1fr}}
.bf-bundle-list li{position:relative;padding-left:24px;font-size:15px}
.bf-bundle-list li::before{
  content:"";position:absolute;left:0;top:8px;width:13px;height:7px;
  border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);
  transform:rotate(-45deg);
}
.bf-bundle .price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.bf-bundle .price s{font-size:20px;font-weight:600;color:var(--muted);text-decoration-thickness:2px}
.bf-bundle .pf-form{margin-top:16px}
.bf-bundle .pf-form .bf-buy{text-align:left;margin-top:0}
.bf-subh{font-size:15px;font-weight:800;color:var(--muted);text-transform:uppercase;
  letter-spacing:.6px;margin:38px 0 0}
/* a sub-section heading with no lead-in reads as an orphan dropped on the page */
.bf-subh-lead{font-size:15px;color:var(--muted);margin:8px 0 0;line-height:1.55;max-width:52ch}
/* The saving lives in a chip beside the price, not in a sentence explaining the
   arithmetic. The old price sits underneath, struck, with nothing else on the line. */
.bf-chip{display:inline-block;vertical-align:middle;margin-left:12px;
  background:var(--green-pale);color:var(--green-dark);
  font-size:13px;font-weight:800;font-style:normal;letter-spacing:.02em;
  padding:5px 11px;border-radius:999px;white-space:nowrap}
.bf-was{font-size:15px;color:var(--muted);margin:6px 0 0;line-height:1.5}
.bf-was s{text-decoration-thickness:2px}
@media(max-width:600px){
  .bf-chip{margin-left:0;margin-top:8px;display:block;width:max-content}
}
.bf-bundle-buy{margin:18px 0 0;text-align:left}
.bf-bundle .bf-micro{margin-top:10px}

/* hero: h1 has margin:0, so the sub needs its own top gap */
.bf-hero-copy h1 + .sub{margin-top:18px}
.doc h1 + .updated{margin-top:0}

/* pricing card order: features, then BUY (primary), then the free-design line */
.plan .pf-form{order:2;margin-top:auto}
.plan .pf-form .btn{width:100%}
/* The free-design offer, promoted from a grey link to a ghost button.
   NO `order` here — the buy CTA on a build card is .bf-buy at the default
   order:0, so any positive order would push this BELOW it. .bf-free is
   already first in DOM order, which is exactly what we want.
   (.pf-form/order:2 is the CARE cards' Payfast markup, a different thing.)
   The bottom group can hold only ONE margin-top:auto, or the free space
   splits between them and the buttons drift apart — so it lives here and
   is cancelled on the buy button underneath. */
.plan .bf-free{margin:auto 0 8px;text-align:center}
.plan .bf-free .btn{margin-top:0}
.plan .bf-free ~ .bf-buy{margin-top:0}
.plan .bf-free ~ .bf-buy .btn{margin-top:0}
.plan .bf-alt{order:3;margin:10px 0 0;text-align:center;font-size:13px}
.plan .bf-alt a{color:var(--muted);text-decoration:underline;font-weight:600}
.plan .bf-alt a:hover{color:var(--green)}
.bf-bundle-btn{width:auto;display:inline-block;padding:13px 22px}

/* Payfast bills in rand; note only shown outside South Africa */
.bf-fx{display:none}
html.bf-intl .bf-fx{display:block;margin:8px 0 0;font-size:12px;line-height:1.45;color:var(--muted);text-align:center}
html.bf-intl .plan .bf-fx{order:4}

/* ==================== checkout ==================== */
/* padding-longhands, never the shorthand: .co-wrap is a second class on the
   same element as .wrap, so `padding:28px 0 60px` used to reset .wrap's
   `padding:0 var(--pad)` and run the whole checkout edge-to-edge. */
.co-wrap{padding-top:28px;padding-bottom:60px}
.co-steps{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px;font-size:12px;font-weight:700;letter-spacing:.02em}
.co-step{padding:6px 12px;border-radius:999px;background:var(--bg-alt);color:var(--muted);border:1px solid var(--line)}
.co-step.done{background:var(--green-pale);color:var(--green-dark);border-color:var(--green-pale)}
.co-step.now{background:var(--green);color:#fff;border-color:var(--green)}
.co-grid{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start}
.co-sec{margin:0 0 34px}
.co-sec h2{font-size:22px;line-height:1.25;margin:0 0 6px}
.co-lead{margin:0 0 14px;color:var(--muted);font-size:15px;line-height:1.55}
.co-list,.co-picks{display:flex;flex-direction:column;gap:10px}

.co-row{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--line);
  border-radius:12px;cursor:pointer;background:#fff;transition:border-color .12s,box-shadow .12s}
.co-row:hover{border-color:var(--green-pale)}
.co-row.on{border-color:var(--green);box-shadow:0 0 0 2px var(--green-pale) inset}
.co-row input{position:absolute;opacity:0;width:0;height:0}
.co-row.co-locked{opacity:.62;cursor:default}
.co-rowtext{flex:1;min-width:0}
.co-rowtext b{display:block;font-size:15px;line-height:1.35}
.co-rowtext small{display:block;color:var(--muted);font-size:13px;line-height:1.5;margin-top:2px}
.co-price{font-weight:800;font-size:15px;white-space:nowrap;padding-left:6px}
.co-price small{font-weight:600;color:var(--muted);font-size:12px}

/* toggle switch */
.co-sw{flex:0 0 auto;width:40px;height:23px;border-radius:999px;background:var(--line);position:relative;
  transition:background .15s;margin-top:2px}
.co-sw:after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;
  background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.28)}
.co-row.on .co-sw{background:var(--green)}
.co-row.on .co-sw:after{transform:translateX(17px)}
/* The order bump keys off the CARD's .on, which paint() sets directly. Every other
   row is re-rendered wholesale so it gets .on from the fresh markup; the bump row
   is static, and relying on the row class alone left the slider dead. */
.co-bump.on .co-sw{background:var(--green)}
.co-bump.on .co-sw:after{transform:translateX(17px)}
/* radio */
.co-radio{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);position:relative;margin-top:3px}
.co-row.on .co-radio{border-color:var(--green)}
.co-row.on .co-radio:after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--green)}

/* order bump */
/* margin flipped top-side: the bump now sits BELOW the add-on list as the
   payoff, so it needs separation above it, not beneath it. */
.co-bump{border:2px dashed var(--green);border-radius:14px;padding:12px;margin:24px 0 0;background:#F3FBF6}
.co-bump.on{background:var(--green-pale);border-style:solid}
.co-bump-tag{display:inline-block;background:var(--green);color:#fff;font-size:12px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin:0 0 10px}
.co-row-bump{border:0;background:transparent;padding:4px 4px 6px}
.co-row-bump:hover{border-color:transparent}
.co-save{color:var(--green-dark)!important;font-weight:700;margin-top:6px!important}

/* summary */
.co-side{position:sticky;top:20px;display:flex;flex-direction:column;gap:14px}
.co-card{border:1px solid var(--line);border-radius:14px;padding:20px var(--cardpad);background:#fff}
.co-card h3{margin:0 0 12px;font-size:17px}
.co-lines{display:flex;flex-direction:column;gap:7px;margin:0 0 12px}
.co-line{display:flex;justify-content:space-between;gap:12px;font-size:13px;line-height:1.45;color:var(--muted)}
.co-line span:last-child{color:var(--ink);font-weight:700;white-space:nowrap}
[hidden]{display:none!important}
.co-tot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-top:1px solid var(--line);padding-top:12px;font-size:15px}
.co-tot b{font-size:17px}
.co-tot-sub{border-top:0;padding-top:4px;color:var(--muted)}
.co-tot-sub b{font-size:15px}
.co-due{background:var(--bg-alt);border-radius:11px;padding:14px;margin:14px 0}
.co-due-lbl{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.co-due-amt{font-size:36px;font-weight:800;line-height:1.15;margin:2px 0 6px;color:var(--green-dark)}
.co-due-note{font-size:12px;line-height:1.5;color:var(--muted)}
/* ---- checkout: who the site is for ---- */
.co-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.co-f{display:flex;flex-direction:column;min-width:0}
.co-f:nth-child(5){grid-column:1 / -1}
.co-f label{font-size:13px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px}
.co-opt{text-transform:none;letter-spacing:0;font-weight:600;color:var(--muted);opacity:.8}
.co-f input{width:100%;border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:12px 13px;font-size:17px;font-family:inherit;color:var(--ink);background:var(--surface)}
.co-f input:focus{outline:2px solid var(--green-link);outline-offset:1px;border-color:var(--green-link)}
.co-f input.is-bad{border-color:#B91C1C;background:#FEF6F6}
.co-err{display:none;font-size:13px;color:#B91C1C;margin-top:5px;line-height:1.4}
.co-err.is-shown{display:block}
.co-agree{display:flex;align-items:flex-start;gap:10px;margin:16px 0 0;cursor:pointer;
  font-size:15px;line-height:1.5;color:var(--ink)}
.co-agree input{flex:0 0 auto;width:19px;height:19px;margin:2px 0 0;accent-color:var(--green)}
@media(max-width:600px){.co-fields{grid-template-columns:1fr}.co-f:nth-child(5){grid-column:auto}}

.co-form .btn{width:100%}
.co-fx{margin:10px 0 0;font-size:12px;line-height:1.45;color:var(--muted);text-align:center}
.co-micro{margin:12px 0 0;font-size:12px;text-align:center;color:var(--muted)}
.co-micro a{color:var(--muted);text-decoration:underline}
.co-assure{font-size:13px;line-height:1.6;color:var(--muted)}
.co-assure p{margin:0 0 9px}

@media (max-width:900px){
  .co-grid{grid-template-columns:1fr;gap:22px}
  .co-side{position:static}
  /* was position:sticky;bottom:0 — 405px of card pinned over 63% of a phone
     screen for 132px of scroll travel. Not worth it. */
  .co-card{position:static}
}
@media (max-width:520px){
  /* the rows are the things you actually read and tap on this page; 12px
     left the text almost against its own border */
  .co-row{padding:14px 16px}
  .co-row-bump{padding:4px 4px 6px}   /* keep the bump toggle aligned with the add-on rows */
  .co-price{font-size:15px}
  .co-due-amt{font-size:22px}
  /* 13px descriptions in a 172px column read at 26 characters a line; drop the
     text to its own row so it gets the full width */
  .co-row{flex-wrap:wrap}
  .co-sw,.co-radio{order:0}
  .co-price{order:1;margin-left:auto}
  .co-rowtext{flex:1 1 100%;order:2}
}

/* the real radio/checkbox is 0x0 and transparent, so nothing showed keyboard focus */
.co-row input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.co-row:focus-within{outline:2px solid var(--green);outline-offset:2px}

/* secondary CTAs were 15-24px tall — below the 44px minimum tap target */
.plan .bf-alt a,.co-micro a,.doc a.back,.final > .bf-micro a{display:inline-block;padding:12px 4px;margin:-12px 0}

/* footer links were the same colour as footer body text with no underline */
.bfgf a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(203,213,225,.45)}

/* buttons always win the link colour, whatever wraps them */
a.btn,.bf-buy a.btn,.plan a.btn,.co-card a.btn{color:#fff;text-decoration:none}
a.btn.ghost{color:var(--green)}

/* ==========================================================================
   PHONES
   The old build lost 46px a side inside a pricing card (22px .wrap + 24px
   .plan) and a different amount inside every other card — 24px in .plan,
   28px in .bf-bundle, 20px in .bf-form, 34px in .final. Four different text
   columns stacked down one page, so nothing lined up.
   Below, --pad and --cardpad shrink together, so every card shares one inset.
   ========================================================================== */
@media(max-width:600px){
  /* --pad is the PAGE gutter (card edge to screen edge). --cardpad is the
     inset INSIDE a card. Tying them to the same value lined the cards up but
     left text only 14-16px off its own border — and the v3 cards carry 2-3px
     borders that crowd it further. The outer gutter stays tight; the inner
     one gets the room it needs to read. */
  :root{--pad:16px;--cardpad:20px}
  .blk.final{padding:48px var(--cardpad);border-radius:0}
  .doc{padding:44px var(--pad) 64px}
  .bf-callout{padding:14px 16px}
  .co-bump{padding:14px}
  /* header CTA was wrapping to 2-3 lines and growing taller than the 64px
     sticky header, clipping its own top off the top of the screen */
  .bf-head .btn{font-size:13px;padding:9px 12px;white-space:nowrap}
  /* four 12.5px sentences in 148px columns is 24 characters a line */
  .strip .wrap{grid-template-columns:1fr;gap:16px}
  .stat .l{font-size:15px}
  .bfgf ul li{margin-bottom:0}
  .bfgf ul li a{display:inline-block;padding:11px 0}
  /* sections were 44px apart with 34px hero padding — too airy on a phone */
  .blk{padding:34px 0}
  .hero{padding:24px 0 4px}
  .strip{margin-top:22px}
  .strip .wrap{padding-top:22px;padding-bottom:22px}
  .bf-bundle{margin:22px 0 8px}
  .pricing{gap:16px;margin-top:20px}
  .bfgf{padding:40px 0 24px}
}
@media(max-width:380px){
  :root{--pad:14px;--cardpad:18px}
  h1{font-size:36px}
  h2.sec{font-size:22px}
  .price{font-size:36px}
  .stat .n{font-size:22px}
}

/* Anchor targets were landing underneath the sticky header (74px desktop,
   64px phone), so "Pricing" in the nav scrolled the heading out of sight. */
[id]{scroll-margin-top:88px}
@media(max-width:860px){[id]{scroll-margin-top:78px}}

/* The mobile CTA bar is position:fixed at bottom:0 and nothing reserved room
   for it, so it sat on top of the last section. Clear it only while it shows. */
.bf-sticky{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
body:has(.bf-sticky.is-visible){padding-bottom:84px}

/* Long unbreakable strings — emails, +27 numbers, URLs — must wrap rather
   than push the page sideways on a 320px screen. */
body{overflow-wrap:break-word}
.bfgf ul li,.bf-facts dd,.co-line,.bf-micro{overflow-wrap:anywhere}


/* ==========================================================================
   THE BROADSHEET — editorial re-skin. APPEND ONLY; source order is load-bearing.
   Every rule here beats its equivalent above at equal specificity. Do not move
   this block and do not reorder the file.

   1. Do NOT declare --pad or --cardpad below. Both are re-declared inside the
      (max-width:600px) and (380px) blocks above; a later :root wins over both
      and undoes the "every card shares one inset" fix.
   2. NUMERALS stay in the SANS. Georgia ships old-style figures (4 and 9
      descend) while Sitka, Iowan and Noto Serif ship lining figures — a price
      in var(--font-display) would look different per OS. Never set .price,
      .stat .n, .co-price, .co-due-amt or .co-tot b in the display face.
   3. --green is a FILL. #2F855A as text on #F4F6F4 is 4.18:1 and fails AA.
      Green text is --green-link (5.90:1 on paper, 6.40:1 on white).
   ========================================================================== */

/* Self-hosted so the headline is the SAME on every OS. The old stack was three
   different serifs by platform (Iowan / Sitka / Georgia), which meant the brand
   rendered differently for almost every visitor and fell to Georgia — whose
   old-style figures make a price look weak — for most of them. One variable
   file, latin subset, 77KB, preloaded in the head. No CDN, no third party.
   Bricolage ships no italic: see the .bf-lead rule at the end of this file,
   because font-synthesis:none on body would silently drop a synthetic one. */
@font-face{
  font-family:"Bricolage Grotesque";
  src:url(/assets/bricolage.woff2) format("woff2");
  font-weight:400 700;
  font-stretch:normal;
  font-display:swap;
}

:root{
  --font-display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font:var(--font-body);
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono","Roboto Mono",Menlo,monospace;
  /* v3 palette. Warmer ground, same green.
     --green is a FILL ONLY. Measured on the v3 page: #2F855A on #FAF9F5 is
     4.31:1 and on the #F4F2EA band 4.05:1 — both under AA's 4.5. White ON
     #2F855A is 4.54:1 and passes, so it stays the button/rule colour.
     Green TEXT is --green-link (#256B48 = 6.09:1 on paper). */
  --paper:#FAF9F5; --paper-deep:#F4F2EA; --paper-deeper:#F1EEE3; --surface:#fff;
  --ink:#1C1B17; --ink-deep:#121110; --second:#44423A; --muted:#5D5A4E; --placeholder:#6A675B;
  --rule:#E5E2D8; --rule-faint:#EDEBE3; --card-border:#DCD8CB; --line-strong:#8A8578;
  --line:#E5E2D8; --line-soft:#EDEBE3; --bg:#FAF9F5; --bg-alt:#F4F2EA;
  --green:#2F855A; --green-link:#256B48; --green-dark:#1C4D36;
  --green-deep:#26543E; --green-pale:#7FBF9E; --green-wash:#EFF4F0;
  --foot-bg:#1C1B17; --foot-text:#C9C4B4; --foot-muted:#8A8578;
  --glow:radial-gradient(60% 55% at 22% 8%,rgba(47,133,90,.07),transparent 70%);
  --wrap:1120px; --rail:148px; --gutter:40px; --measure:33em; --radius:3px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.035'/%3E%3C/svg%3E");
  --ease:cubic-bezier(.2,.7,.2,1); --ease-rule:cubic-bezier(.22,.61,.36,1);
}

/* ---------- page ---------- */
html{background:var(--paper)}
body{font-family:var(--font-body);font-size:17px;line-height:1.62;color:var(--ink);
  background-color:var(--paper);background-image:var(--grain);font-synthesis:none}
/* grain is a scrolling background on body, never position:fixed — it can't get
   its own composited layer and can't repaint during iOS momentum scroll.
   Kill switch if it ever misbehaves: body{background-image:none} */
a{color:var(--green-link)}
::placeholder{color:var(--placeholder);opacity:1}
:focus-visible{outline:2px solid var(--green-link);outline-offset:2px}

/* ---------- type ---------- */
h1,h2.sec,h3,.bf-lead,.doc h1,.doc h2{font-family:var(--font-display);font-weight:400;-webkit-font-smoothing:auto}
/* v3 SCALE — 12 / 13 / 15 / 17 / 20 / 22 / h2 clamp / h1 clamp / 36 / 44.
   Every clamp keeps a px term. A viewport-only clamp such as
   clamp(38px,4.6vw,56px) ignores the reader's browser font-size setting,
   which is a WCAG 1.4.4 resize failure; 3.4vw+22px lands on the identical
   38 and 56 at 375px and 1265px. */
h1{font-size:clamp(38px,3.4vw + 22px,56px);line-height:1.12;letter-spacing:-.016em;max-width:12.2em}
h2.sec{font-size:clamp(28px,1.4vw + 20px,36px);line-height:1.2;letter-spacing:-.008em;max-width:15.5em;margin-bottom:10px}
.doc h1{font-size:clamp(32px,2.2vw + 22px,44px);letter-spacing:-.014em;line-height:1.12}
.bf-stack h3,.plan h3,.bf-bundle h3,.bf-thanks h3{font-size:22px;font-weight:400;letter-spacing:-.004em}
.bf-stack h3{margin:30px 0 6px;padding-top:16px;border-top:1px solid var(--rule-faint)}
.bf-stack h3:first-child{margin-top:0;padding-top:0;border-top:0}
.sub{font-size:20px;line-height:1.55;color:var(--second);max-width:28em;
  margin:0 0 22px;padding-top:22px;position:relative}
.sub::before{content:"";position:absolute;top:0;left:0;width:44px;height:2px;background:var(--green)}
/* the one italic on the page, reserved for the one sentence that is a pull-quote */
.bf-lead{font-style:italic;font-size:clamp(20px,.6vw + 17px,22px);line-height:1.34;
  max-width:26em;margin:26px 0 22px;padding-top:20px;border-top:2px solid var(--ink)}
.eyebrow,.bf-dateline,.bf-facts dt,.bfgf h3,.bfgf h4,.bf-subh,.co-due-lbl,.bf-echo-k{
  font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.16em}
.eyebrow{font-size:13px;font-family:var(--mono);letter-spacing:.12em;color:var(--green-link);margin-bottom:16px}
.bf-facts dt{font-size:13px;font-family:var(--mono);color:var(--muted);margin-top:26px;padding-top:16px;border-top:1px solid var(--rule-faint)}
.bf-facts dt:first-of-type{margin-top:18px}
.bf-subh{font-size:13px;font-family:var(--mono);color:var(--muted);margin:44px 0 0}
/* measure cap — these paragraphs ran ~100 characters across the old wrap */
.bf-stack p,.blk > p,.bf-facts dd,.bf-steps li,.doc p,.doc li{max-width:var(--measure)}
.bf-cap{text-align:left;font-size:15px;margin-top:26px}
.price,.stat .n,.co-price,.co-due-amt,.co-tot b,.bf-chip,.bf-was{
  font-family:var(--font-body);font-variant-numeric:tabular-nums lining-nums}
.price{font-size:36px;font-family:var(--font-display);font-weight:400;letter-spacing:-.02em;margin:2px 0 6px}
.bf-callout{background:var(--surface);border:1px solid var(--card-border);border-left:3px solid var(--green);
  border-radius:0;font-size:17px;max-width:var(--measure)}
.bf-inline-cta{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:var(--rule);transition:text-decoration-color .18s ease}

/* ---------- masthead ---------- */
.bf-masthead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  position:relative;padding-bottom:12px;margin-bottom:26px}
.bf-masthead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink)}
.bf-masthead .eyebrow{margin-bottom:0}
.bf-dateline{font-size:12px;color:var(--muted);white-space:nowrap}
/* --rule is a hairline colour; as a glyph it measured 1.23:1. It is only a
   separator, so it does not need 4.5, but it should at least be visible. */
.bf-dateline i{font-style:normal;color:var(--line-strong);padding:0 4px}

/* ---------- hero ---------- */
.hero{padding:40px 0 8px}
.hero > h1{margin:0 0 30px}
.bf-hero-grid{grid-template-columns:1fr 392px;gap:var(--gutter);align-items:start}
.bf-hero-copy .sub{margin-bottom:0}
.bf-disq{font-size:15px;max-width:var(--measure);margin-top:20px}

/* ---------- figures band ---------- */
.strip{background:var(--surface);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:36px}
.strip .wrap{gap:0}
.stat{padding:4px 26px;border-left:1px solid var(--rule-faint)}
.stat:first-child{border-left:0;padding-left:0}
.stat::before{content:"";display:block;width:26px;height:2px;background:var(--green);margin-bottom:14px}
.stat .n{font-size:clamp(32px,1.6vw + 24px,44px);font-family:var(--font-display);font-weight:400;color:var(--ink);line-height:1;letter-spacing:-.02em}
.stat .l{font-size:13px;color:var(--muted);line-height:1.5;margin-top:8px;max-width:24ch}

/* ---------- sections + the eyebrow rail ---------- */
.blk{padding:66px 0 60px;position:relative}
.blk:not(.final)::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--rule)}
@media(min-width:1040px){
  .blk:not(.final){display:grid;grid-template-columns:var(--rail) 1fr;column-gap:var(--gutter)}
  .blk:not(.final) > *{grid-column:2;min-width:0}
  .blk:not(.final) > .eyebrow{grid-column:1;grid-row:1;text-align:right;margin:0;line-height:1.5;
    padding-right:var(--gutter);border-right:1px solid var(--rule-faint);align-self:start}
  /* the money objects break the rail and keep the full measure */
  .blk:not(.final) > .pricing,.blk:not(.final) > .bf-bundle{grid-column:1/-1}
}

/* ---------- cards ---------- */
.plan{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:26px var(--cardpad) 24px}
.plan.feat{border-color:var(--rule);box-shadow:none}
.plan.feat::before,.bf-bundle::before,.bf-form::before,.bf-thanks::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--green)}
.plan h3{margin:0 0 2px}
.plan ul li{font-size:15px}
.plan ul li::before{border-color:var(--green-link)}
.rib{top:-12px;border-radius:2px;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;font-size:12px}
.bf-bundle{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:32px var(--cardpad) 28px;margin:34px 0 10px}
.bf-bundle-lead{max-width:var(--measure)}
.bf-chip{border-radius:2px;letter-spacing:.06em}
.bf-buy a,.pf-link{color:var(--green-link)}

/* ---------- pricing wireframes: what "five pages" actually means ---------- */
.bf-wf{display:block;width:118px;height:40px;margin:0 0 18px}
.bf-wf .p{fill:none;stroke:var(--rule);stroke-width:1}
.bf-wf .l{fill:var(--rule)}
.bf-wf .b{fill:var(--ink)}
.plan.feat .bf-wf .b{fill:var(--green)}   /* the recommended one is printed in colour */

/* ---------- the form as a subscription coupon ---------- */
.bf-form,.bf-thanks{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:none;padding:24px var(--cardpad) 22px;position:relative}
.bf-form label{font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
/* Ruled coupon field. Keeps a full 1px box so it still reads as tappable on a
   phone and clears WCAG 1.4.11 — the old #CBD5E1 border was 1.48:1 on white —
   but the bottom rule is 2px ink, so it reads as a ruled line, not a widget. */
.bf-form input{border:1px solid var(--line-strong);border-bottom:2px solid var(--ink);border-radius:0;
  background:var(--green-wash);padding:13px 12px;font-size:17px;min-height:48px}
.bf-form input:focus{outline:2px solid var(--green-link);outline-offset:1px;
  border-color:var(--green-link);background:var(--surface)}
.bf-thanks h3{font-size:22px;font-weight:400}
.bf-err{color:#A21C1C}

/* ---------- the name echo: their business, set, before they pay ---------- */
/* Three fixed-height nowrap lines, so a text write can never change the box's
   height. contain:layout paint is belt and braces on top of that. */
.bf-echo{margin:-2px 0 16px;padding:11px 13px;background:var(--paper-deep);
  border-left:2px solid var(--green);contain:layout paint}
.bf-echo-k{display:block;font-size:12px;color:var(--muted)}
.bf-echo-n,.bf-echo-u{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bf-echo-n{font-family:var(--font-display);font-weight:400;font-size:20px;line-height:1.25;
  letter-spacing:-.006em;color:var(--ink);margin-top:4px}
.bf-echo-u{font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--muted);margin-top:1px}
.bf-echo:not(.is-live) :is(.bf-echo-n,.bf-echo-u){color:var(--muted);opacity:.62}

/* ---------- steps ---------- */
.bf-steps li{padding-left:56px;margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--rule-faint)}
.bf-steps li:last-child{border-bottom:0;padding-bottom:0}
/* the one deliberate exception to the numerals rule: one per row, nothing aligns */
.bf-steps li::before{width:auto;height:auto;background:none;border-radius:0;display:block;top:-4px;
  font-family:var(--font-display);font-weight:400;font-size:22px;color:var(--green-link);letter-spacing:0}

/* ---------- final CTA: the 135deg slate-to-green gradient is deleted ---------- */
.blk.final{background:var(--ink-deep);border-radius:var(--radius);padding:60px 34px;margin:26px 0 66px;
  border-top:3px solid var(--green)}
.blk.final .eyebrow,.blk.final > .bf-micro{color:var(--green-pale)}
.blk.final .sub{color:#C9D4CC}
.blk.final .sub::before{background:var(--green-pale)}

/* ---------- header / footer / sticky ---------- */
.bf-head{background:rgba(244,246,244,.96);border-bottom:1px solid var(--rule)}
.bf-nav a{color:var(--muted)}
.bfgf{background:var(--ink-deep);color:#C9D4CC}
.bfgf a{color:#C9D4CC;text-decoration-color:rgba(201,212,204,.4)}
.bfgf h3,.bfgf h4{font-size:12px;color:var(--green-pale)}
.bfgf-base{border-top-color:#2A3830;color:#93A399}
.bftag{color:#93A399;max-width:30em}
.bf-sticky{background:rgba(244,246,244,.98);border-top:1px solid var(--rule);
  box-shadow:0 -1px 0 var(--rule),0 -10px 24px -18px rgba(16,26,21,.35)}
.btn{border-radius:var(--radius);font-weight:700}
.btn.ghost{background:var(--surface);color:var(--green-link);border-color:var(--green-link)}

/* ---------- hover, gated ---------- */
/* :hover latches after a tap on a touch screen, and that IS what "broken on my
   phone" looks like. Neutralise the rules above, re-state inside the gate. */
.btn:hover{background:var(--green);transform:none}
.btn.ghost:hover{background:var(--surface);color:var(--green-link)}
.co-row:hover{border-color:var(--line)}
.region-opt:hover{border-color:var(--line);color:var(--ink)}
.region-opt-other:hover{border-color:var(--line);color:var(--muted)}
@media (hover:hover) and (pointer:fine){
  a:hover{color:var(--green-dark)}
  .btn:hover{background:var(--green-dark);color:#fff}
  .btn.ghost:hover{background:var(--green);color:#fff;border-color:var(--green)}
  .co-row:hover{border-color:var(--green-pale)}
  .region-opt:hover,.region-opt-other:hover{border-color:var(--green);color:var(--green-link)}
  .bf-inline-cta:hover{text-decoration-color:var(--green-link)}
  .bf-nav a:hover{color:var(--ink)}
}

/* ==========================================================================
   MOTION. Everything is transform + opacity. No scroll listener, no rAF loop,
   no parallax, no canvas, no vh. One IntersectionObserver that unobserves each
   target on fire, so ongoing cost after the first scroll is zero.
   .bf-motion lands on <html> synchronously in <head>, and only when reduced
   motion is off AND IntersectionObserver exists. With JS off, on an old engine,
   or under reduced motion the class never lands and no hidden state applies.
   The reveal selectors use :is() deliberately: an engine that cannot parse it
   drops the whole rule, which fails to VISIBLE.
   ========================================================================== */
@keyframes bf-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bf-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.bf-motion .bf-masthead::after{transform-origin:0 50%;animation:bf-draw .8s var(--ease-rule) .1s both}
.bf-motion :is(.hero > h1,.bf-hero-copy,.bf-hero-form,.hero > .bf-callout){animation:bf-rise .58s var(--ease) both}
.bf-motion .bf-hero-copy{animation-delay:.12s}
.bf-motion .bf-hero-form{animation-delay:.2s}
.bf-motion .hero > .bf-callout{animation-delay:.26s}
.bf-motion .blk:not(.final)::before{transform:scaleX(0);transform-origin:0 50%;transition:transform .62s var(--ease-rule)}
.bf-motion .blk.is-in:not(.final)::before{transform:scaleX(1)}
.bf-motion :is(.blk > .eyebrow,.blk > h2.sec,.blk > .sub,.plan,.bf-bundle,.strip .stat){
  opacity:0;transform:translateY(11px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.bf-motion :is(.is-in > .eyebrow,.is-in > h2.sec,.is-in > .sub,.is-in .plan,.is-in .bf-bundle,.strip.is-in .stat){
  opacity:1;transform:none}
.bf-motion .blk > h2.sec{transition-delay:.06s}
.bf-motion .blk > .sub{transition-delay:.13s}
.bf-motion :is(.pricing .plan:nth-child(2),.strip .stat:nth-child(3)){transition-delay:.09s}
.bf-motion :is(.pricing .plan:nth-child(3),.strip .stat:nth-child(4)){transition-delay:.18s}
.bf-motion .strip .stat:nth-child(2){transition-delay:.045s}

/* second, independent kill — covers toggling the OS setting after load */
@media (prefers-reduced-motion:reduce){
  .bf-motion *,.bf-motion *::before,.bf-motion *::after{
    animation-duration:1ms!important;animation-delay:0ms!important;
    transition-duration:1ms!important;transition-delay:0ms!important}
  .bf-motion :is(.blk::before,.blk > .eyebrow,.blk > h2.sec,.blk > .sub,.plan,.bf-bundle,.stat){
    transform:none!important;opacity:1!important}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   PHONES — re-assert what this block would otherwise have overridden.
   --pad and --cardpad are deliberately untouched.
   ========================================================================== */
@media(max-width:1039px){.blk:not(.final) > .eyebrow{text-align:left;border-right:0;padding-right:0}}
/* backdrop-filter on a sticky element is a blur recomputed against the scrolling
   backdrop every frame — the likeliest single source of the stutter the owner is
   describing. On a 64px opaque bar it buys nothing visually. */
@media(max-width:860px){.bf-head{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(244,246,244,.985)}}
@media(max-width:900px){
  .blk{padding:48px 0 44px}
  .hero{padding:30px 0 4px}
  .bf-hero-grid{grid-template-columns:1fr}
  .hero > h1{margin-bottom:22px}
  .pricing{gap:22px}
}
@media(max-width:820px){
  .stat{border-left:0;border-top:1px solid var(--rule-faint);padding:20px 26px 4px 0}
  .stat:first-child,.stat:nth-child(2){border-top:0;padding-top:4px}
}
@media(max-width:600px){
  .blk{padding:36px 0 34px}
  .hero{padding:20px 0 4px}
  .blk.final{padding:40px var(--cardpad);border-radius:var(--radius);margin-bottom:44px}
  .bf-dateline{display:none}   /* verbatim repeat of the standfirst below it */
  .bf-masthead{padding-bottom:10px;margin-bottom:20px}
  .stat{padding:18px 0 4px}
  .stat:nth-child(2){border-top:1px solid var(--rule-faint);padding-top:18px}
  .stat .l{font-size:15px;max-width:none}
  .pricing{gap:16px}
  .bf-steps li{padding-left:44px}
  .bf-form,.bf-thanks{padding:20px var(--cardpad) 18px}
  .plan{padding:24px var(--cardpad) 22px}
  .bf-bundle{padding:28px var(--cardpad) 24px}
  .bf-lead{margin:20px 0 18px}
}
@media(max-width:380px){.bf-wf{width:100px;height:34px}}

/* ============================================================
   2026-08-09 — design pass. Appended deliberately: these must
   beat the mobile block at :488 and the broadsheet block, both
   of which carry equal specificity and earlier source order.
   ============================================================ */

/* The header CTA is the only persistent conversion control on a phone —
   .bf-nav is display:none under 860px. It measured 164 x 39px, under the
   44px iOS / 48dp Android floor. 13px font x 1.62 leading = 21.06px, so
   13px of vertical padding lands it at 47px. Font-size and width are
   untouched, so nothing reflows or wraps. */
@media(max-width:600px){
  .bf-head .btn{padding:13px 12px}
}

/* Pre-existing overflow, same row: at 320px the logo (134) + gap (16) +
   button (164, white-space:nowrap so it cannot shrink) = 314 in a 292px
   box. The img carries width=134 height=44 against width:auto, so the
   ratio holds at 109.5x36 and there is no layout shift. */
@media(max-width:360px){
  .bf-logo img{height:36px}
}

/* Display tier was inheriting body's 1.62 leading: the ladder ran
   h1 1.06 -> h2 1.16 -> .bf-lead 1.34 -> h3 1.62 -> .price 1.62, so the
   serif h3s and the prices read as slightly-large body text.
   Weight stays 400 — h1 and h2.sec are both 400, and bolding the
   SMALLEST display heading would invert the hierarchy. */
.bf-stack h3,.plan h3,.bf-bundle h3,.bf-thanks h3{line-height:1.24}
.bf-stack h3{margin-bottom:10px}
.price{line-height:1.05;margin:8px 0 12px}
/* mandatory, not cosmetic: .bf-chip is an <em> inside .bf-bundle .price,
   which is display:flex, so it inherits the unitless 1.05 and the
   "Save R5,200" pill would collapse 31px -> 24px without this. */
.bf-chip{line-height:1.25}
.bfnm{line-height:1.2}

/* ---------- the specimen (#deliverable) ----------
   A page that sells websites showed no website: two images, both our own
   logo. This is an SVG anatomy diagram, deliberately NOT a mocked-up
   client site — there are no clients yet and inventing one in a frame
   would be a lie the rest of the page would have to carry.
   Labels live in HTML, not inside the SVG, so they stay readable and
   reflow instead of scaling down to 5px on a phone. */
.bf-spec{
  display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:center;
  margin:34px 0 40px;padding:30px 32px;
  background:var(--paper-deep);border:1px solid var(--line);border-radius:14px;
}
.bf-spec-art{display:flex;justify-content:center}
.bf-spec-art svg{width:240px;height:auto;max-width:100%;display:block}
.bf-spec-kicker{
  font-family:var(--font-body);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:12px;color:var(--muted);margin:0 0 14px;
}
.bf-spec-notes ul{list-style:none;margin:0;padding:0}
.bf-spec-notes li{
  position:relative;padding-left:18px;margin:0 0 14px;
  font-size:15px;line-height:1.55;color:var(--muted);
}
.bf-spec-notes li:last-child{margin-bottom:0}
.bf-spec-notes li:before{
  content:"";position:absolute;left:0;top:9px;
  width:7px;height:7px;border-radius:50%;background:var(--green);
}
.bf-spec-notes li b{color:var(--ink);font-weight:700}
.bf-spec-foot{margin:18px 0 0;font-size:13px;color:var(--muted);opacity:.85}

@media(max-width:820px){
  .bf-spec{grid-template-columns:1fr;gap:26px;padding:24px var(--cardpad)}
  .bf-spec-art svg{width:210px}
}
@media(max-width:420px){
  .bf-spec{padding:20px var(--cardpad)}
  .bf-spec-art svg{width:180px}
  .bf-spec-notes li{font-size:15px}
}

/* Visually hidden but still read aloud. Not display:none and not the
   honeypot's left:-9999px — a clip-path rect keeps the element in the
   accessibility tree and, unlike a huge negative offset, does not create a
   scrollable overflow area on some mobile browsers. */
.bf-vh{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ==========================================================================
   V3 — 2026-08-09. Bands, texture, motion.
   Appended once, deliberately: these must win over both the original sheet
   and the broadsheet block. Every animation is gated on prefers-reduced-motion
   at the bottom of this section — nothing here is required to read the page.
   ========================================================================== */

/* ---------- section rhythm + alternating bands ---------- */
.blk{padding:88px 0;border-top:1px solid var(--rule-faint)}
.blk:first-of-type{border-top:0}
/* The banded sections live INSIDE .wrap, which supplies the page gutter, and
   .blk sets `padding:88px 0` — no horizontal padding at all. While every
   section shared one background that was invisible. Give them a colour and
   the band edge appears exactly where the text starts: 0px of breathing room,
   text welded to a visible edge.
   Fix: the band breaks out to the wrap's edges and carries its own inset, so
   the colour runs wider than the words instead of touching them. */
#deliverable,#pricing,#addons,#wont,#writing{
  background-image:linear-gradient(180deg,var(--paper-deep),var(--paper-deeper));
}
#deliverable,#pricing,#addons,#wont,#writing,#capture-mid,#capture-final{
  margin-left:calc(-1 * var(--pad));
  margin-right:calc(-1 * var(--pad));
  padding-left:calc(var(--pad) + 20px);
  padding-right:calc(var(--pad) + 20px);
}
@media(max-width:820px){
  /* on a phone .wrap IS the viewport, so the negative margin takes the band
     edge-to-edge — which is what a full-width section should look like — and
     the text keeps a real inset from it. */
  #deliverable,#pricing,#addons,#wont,#writing,#capture-mid,#capture-final{
    padding-left:var(--cardpad);
    padding-right:var(--cardpad);
  }
}
.hero{padding:72px 0 20px;background-image:var(--glow)}
#capture-mid,#capture-final{background-image:var(--glow)}

/* ---------- header: shadow on scroll + scroll-progress rule ---------- */
.bf-head{transition:box-shadow .25s ease}
.bf-head.is-stuck{box-shadow:0 10px 30px -22px rgba(28,27,23,.5)}
.bf-progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--green);transition:width .1s linear;pointer-events:none}

/* ---------- ticker ---------- */
.bf-ticker{background:var(--ink);overflow:hidden;position:relative}
.bf-ticker-track{display:flex;width:max-content;will-change:transform}
.bf-ticker span{
  font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--foot-text);padding:11px 0;white-space:nowrap;
}
.bf-ticker span i{color:var(--green-pale);font-style:normal;padding:0 14px}

/* "Contact" in the header used to point at #contact, the top of the
   "Practical details" block, where the actual phone/email/WhatsApp sat six
   items down and off-screen. It now points at #reach, the term itself, so
   that anchor needs the same header clearance the sections get. */
.bf-facts dt[id]{scroll-margin-top:88px}

/* ---------- scroll reveal (JS adds .bf-r, then .is-in) ---------- */
.bf-r{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.bf-r.is-in{opacity:1;transform:none}

/* ---------- hero entrance ---------- */
.bf-enter{opacity:0;transform:translateY(22px)}
.bf-enter.is-on{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
h1 .bf-uline{
  background:linear-gradient(var(--green),var(--green)) 0 88%/0% 3px no-repeat;
  transition:background-size .8s var(--ease-rule);
}
h1 .bf-uline.is-drawn{background-size:100% 3px}

/* ---------- launch pack ----------
   Was a dark textured card. Dropped for two reasons. It passed AA only
   barely where it mattered most — the "Save R5,200" pill at 4.54 and the
   struck-through "Separately R18,100" at 4.68, the two numbers the card
   exists to sell. And the same pack rendered dark here and light on
   /checkout, one scroll apart, which reads as two different offers.
   The dark treatment now appears once, on the closing CTA band, where
   there is no fine print or figure to lose. */
.bf-bundle{
  background:var(--green-wash);border:2px solid var(--green);color:var(--ink);
  background-image:none;
}
.bf-bundle h3,.bf-bundle .price{color:var(--ink)}
.bf-bundle .bf-bundle-lead{color:var(--second)}
.bf-bundle .bf-micro,.bf-bundle .bf-was{color:var(--muted)}
.bf-bundle .bf-bundle-list li{color:var(--ink)}
/* the pill and the ribbon are 12-13px reversed out of green. White on
   --green is 4.54:1 — over the line but with no headroom at that size, and
   the pill carries the saving. --green-link takes it to ~6.2. */
.bf-bundle .rib{background:var(--green-link);color:#fff}
.bf-bundle .bf-chip{background:var(--green-link);color:#fff}
.co-bump .co-bump-tag{background:var(--green-link);color:#fff}

/* ---------- final CTA band ---------- */
.blk.final{
  background:var(--green-deep);color:#F4F2EA;border-top:0;position:relative;overflow:hidden;
  background-image:radial-gradient(70% 60% at 50% 0%,rgba(127,191,158,.12),transparent 70%);
}
.blk.final::before{
  content:"B";position:absolute;right:-.06em;bottom:-.34em;
  font-family:var(--font-display);font-size:clamp(220px,26vw,420px);line-height:1;
  color:rgba(244,242,234,.04);pointer-events:none;user-select:none;
}
.blk.final .eyebrow{color:var(--green-pale)}
.blk.final h2.sec,.blk.final .sub,.blk.final p{color:#F4F2EA;position:relative}
.blk.final .sub::before{background:var(--green-pale)}
/* The final band also CONTAINS a cloned capture form on a white card. Without
   this, the rule above painted that card's text #F4F2EA on #fff — invisible.
   Re-assert normal ink inside anything white sitting on the dark band. */
.blk.final .bf-form,.blk.final .bf-form *,
.blk.final .bf-thanks,.blk.final .bf-thanks *{color:var(--ink)}
.blk.final .bf-form .bf-micro,.blk.final .bf-form .bf-err{color:var(--muted)}
.blk.final .bf-form label{color:var(--ink)}
.blk.final .bf-form .btn{color:#fff}

/* ---------- hovers ---------- */
.plan,.bf-spec,.co-card{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.plan:hover{transform:translateY(-4px);box-shadow:0 22px 40px -30px rgba(28,27,23,.55)}
.btn{transition:background .18s ease,transform .18s var(--ease),box-shadow .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(47,133,90,.6)}
.bf-form input:focus{box-shadow:0 0 0 3px rgba(47,133,90,.15)}
.bf-facts dd{transition:background .2s ease}
.bf-stack h3{border-left:2px solid var(--rule);padding-left:14px;transition:border-color .25s ease}
.bf-stack h3:hover{border-left-color:var(--green)}

/* ---------- specimen motion ---------- */
.bf-spec-art svg{animation:bfFloat 7s ease-in-out infinite}
@keyframes bfFloat{0%,100%{transform:translateY(-7px)}50%{transform:translateY(7px)}}

/* ---------- reduced motion: everything above stops ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .bf-r,.bf-enter{opacity:1!important;transform:none!important}
  h1 .bf-uline{background-size:100% 3px!important}
  .bf-ticker-track{transform:none!important}
  .bf-spec-art svg{animation:none!important}
}

/* specimen highlight cycle + typing caret (JS-driven) */
/* The notes are now a NUMBERED key that matches the numerals drawn on the
   phone, so each line points at something. The old green dot sat at left:16px
   with padding-left:16px — i.e. exactly on top of the first letter. */
.bf-spec-notes ol{list-style:none;margin:0;padding:0;counter-reset:sp}
.bf-spec-notes li{counter-increment:sp;position:relative;padding-left:38px;margin:0 0 15px;
  font-size:17px;line-height:1.5;color:var(--second);
  border-left:0;transition:background .3s ease}
.bf-spec-notes li:last-child{margin-bottom:0}
.bf-spec-notes li:before{
  content:counter(sp);position:absolute;left:0;top:1px;width:23px;height:23px;
  border-radius:50%;background:var(--green);color:#fff;
  font-family:var(--font-body);font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.bf-spec-notes li.is-lit{background:rgba(47,133,90,.07);border-radius:4px}
.bf-spec-notes li b{color:var(--ink);font-weight:700}
.bf-caret{display:inline-block;width:1px;height:1em;margin-left:2px;vertical-align:-2px;
  background:var(--green);animation:bfBlink 1.05s step-end infinite}
@keyframes bfBlink{0%,100%{opacity:1}50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.bf-caret{display:none}}

/* ---------- /website-check (v3) ---------- */
.doc-checks .chk-n{
  font-family:var(--font-display);font-size:clamp(40px,3vw + 24px,56px);line-height:1;
  color:var(--green);opacity:.9;margin:56px 0 -4px;letter-spacing:-.03em;
}
.doc-checks .chk-n:before{content:attr(data-n);display:block}
.doc-checks .chk-n{font-size:0}          /* hide the "Check n" words, keep them for SR */
.doc-checks .chk-n:before{font-size:clamp(40px,3vw + 24px,56px)}
.doc-checks h2{margin:6px 0 12px;font-family:var(--font-display);font-weight:400;
  font-size:clamp(24px,1vw + 20px,30px);letter-spacing:-.006em;padding-top:0;border-top:0}
.doc-checks h2 + p strong{color:var(--ink)}
.doc-checks .chk-mean-h{margin-top:64px}
.chk-mean{background:var(--paper-deep);border:1px solid var(--rule);padding:26px 28px;margin:18px 0 0}
.chk-mean p{border-left:3px solid var(--rule);padding-left:16px;margin:0 0 14px;max-width:none}
.chk-mean p:last-child{margin-bottom:0}
.chk-mean .is-ok{border-left-color:#2F855A}
.chk-mean .is-warn{border-left-color:#C9A23F}
.chk-mean .is-bad{border-left-color:#B0533B}
.chk-cta{
  background:var(--green-deep);color:#F4F2EA;padding:40px 34px;margin:56px 0 0;
  position:relative;overflow:hidden;
  background-image:radial-gradient(70% 60% at 50% 0%,rgba(127,191,158,.12),transparent 70%);
}
.chk-cta::before{
  content:"B";position:absolute;right:-.06em;bottom:-.36em;font-family:var(--font-display);
  font-size:clamp(180px,20vw,300px);line-height:1;color:rgba(244,242,234,.05);pointer-events:none;
}
.chk-cta p{color:#F4F2EA;position:relative;max-width:34em}
.chk-cta .chk-cta-h{font-family:var(--font-display);font-size:clamp(24px,1.4vw + 18px,32px);
  line-height:1.2;margin:0 0 12px}
.chk-cta .btn{max-width:340px;margin-top:20px;position:relative}

/* ---------- /checkout (v3) ---------- */
.co-card{border:1px solid var(--card-border);border-radius:10px;padding:24px var(--cardpad);
  background:var(--surface);box-shadow:0 26px 50px -34px rgba(28,27,23,.5)}
.co-tot b,.co-due-amt{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em}
.co-due-amt{font-size:32px;line-height:1.05}
.co-steps .co-step{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.co-sec h2{font-family:var(--font-display);font-weight:400}
.co-row{border-color:var(--card-border)}
.co-row:hover{background:var(--paper-deep)}
/* the pack stays BELOW the add-on list; only the surface changes */
.co-bump{
  border:2px dashed var(--green);background:var(--ink);color:var(--foot-text);
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 1px,transparent 1px 7px);
}
.co-bump b,.co-bump .co-price{color:#fff}
.co-bump small{color:var(--foot-muted)}
.co-bump .co-bump-tag{background:var(--green-pale);color:var(--ink)}
.co-bump.on{background:var(--green-deep);border-style:solid;border-color:var(--green-pale)}
.co-bump.on small{color:#D7E7DE}

/* 88px is the DESKTOP rhythm. Left unchecked it added ~2,400px to the phone
   page, where the same air reads as dead space rather than composure. */
@media(max-width:820px){
  .blk{padding:56px 0}
  .hero{padding:44px 0 16px}
  .chk-cta{padding:32px 24px}
  .doc-checks .chk-n{margin-top:44px}
}
@media(max-width:420px){
  .blk{padding:48px 0}
}


/* ---------- specimen: real words, drawn to scale ---------- */
.bf-spec-art svg text{font-family:var(--font-body)}
.bf-spec-art .sp-name{font-family:var(--font-display);font-size:17px;fill:var(--ink)}
.bf-spec-art .sp-sub{font-size:10px;fill:var(--muted)}
.bf-spec-art .sp-town{font-family:var(--mono);font-size:9px;letter-spacing:.1em;fill:var(--green-link)}
.bf-spec-art .sp-cta{font-size:13px;font-weight:700;fill:#fff;text-anchor:middle}
.bf-spec-art .sp-h{font-size:11px;font-weight:700;fill:var(--ink)}
.bf-spec-art .sp-card{font-size:10px;font-weight:700;fill:var(--ink)}
.bf-spec-art .sp-cardl{font-size:9px;fill:var(--muted)}
.bf-spec-art .sp-ph{font-size:9.5px;fill:var(--placeholder)}
.bf-spec-art .sp-send{font-size:11px;font-weight:700;fill:#fff;text-anchor:middle}
.bf-spec-art .sp-key{fill:var(--green)}
.bf-spec-art .sp-keyn{font-size:11px;font-weight:700;fill:#fff;text-anchor:middle}

/* the claim is the selling point, not a footnote */
.bf-spec{grid-template-areas:"art notes" "claim claim"}
.bf-spec-art{grid-area:art}
.bf-spec-notes{grid-area:notes}
.bf-spec-claim{
  grid-area:claim;margin:28px 0 0;padding:20px 22px;
  background:var(--surface);border:1px solid var(--card-border);border-left:3px solid var(--green);
  font-size:17px;line-height:1.55;color:var(--second);max-width:none;
}
.bf-spec-claim b{color:var(--ink)}
@media(max-width:820px){
  .bf-spec{grid-template-areas:"art" "notes" "claim"}
  .bf-spec-claim{margin-top:22px;padding:20px var(--cardpad)}
}

/* ---------- checkout pack: legible beats textured ----------
   The dark card was a v3 idea that does not survive contact with a payment
   screen. Measured on the shipped page, the "Separately / You save" line was
   1.78:1 with the pack off and 1.12:1 with it on — invisible, on the one
   element whose whole job is to show the saving. Light, green, high contrast. */
.co-bump{
  border:2px solid var(--green);background:var(--green-wash);background-image:none;
  color:var(--ink);
}
.co-bump b,.co-bump .co-price{color:var(--ink)}
.co-bump small{color:var(--muted)}
.co-bump .co-save{color:var(--green-link);font-weight:700}
.co-bump .co-bump-tag{background:var(--green);color:#fff}
.co-bump.on{background:#DCEDE3;border-color:var(--green-link);border-style:solid}
.co-bump.on b,.co-bump.on .co-price{color:var(--ink)}
.co-bump.on small{color:var(--second)}
.co-bump.on .co-save{color:var(--green-dark)}

/* ==========================================================================
   v4 — REAL DISPLAY FACE + HERO REFLOW.  Append-only, same rule as above.

   Why the hero markup moved: the h1 used to be a full-width sibling ABOVE
   .bf-hero-grid, so at desktop width the top-right of the page was empty
   while the form card below it made the grid row tall enough to leave a
   matching hole under the .sub on the left. h1, .sub and .bf-callout now all
   sit inside .bf-hero-copy, so the left column fills the height the form card
   sets and both holes close. The old .hero > h1 / .hero > .bf-callout
   selectors no longer match anything by design — .bf-hero-copy animates and
   spaces them as one column now.
   ========================================================================== */

/* optical sizing is the whole point of a variable display face: tighter
   fitting and thinner joins as the size climbs. */
h1,h2.sec,h3,.doc h1,.doc h2{font-optical-sizing:auto;font-synthesis:none}

/* A grotesk at 400 reads lighter than the serif it replaced at the same
   weight, so the headline steps up to 500 and pulls its tracking in. */
h1{font-weight:500;letter-spacing:-.022em}
h2.sec{font-weight:500;letter-spacing:-.014em}
.bf-stack h3,.plan h3,.bf-bundle h3,.bf-thanks h3{font-weight:500;letter-spacing:-.01em}

/* The pull-quote was the one italic on the page. Bricolage ships no italic and
   body sets font-synthesis:none, so left alone it would have rendered upright
   and silently lost the distinction. It keeps a real serif italic instead —
   which now also reads as deliberate contrast against the grotesk headings. */
.bf-lead{font-family:"Iowan Old Style","Sitka Banner",Charter,Georgia,"Noto Serif",serif;
  font-synthesis:style}

/* hero column rhythm after the reflow */
.bf-hero-copy h1{margin:0 0 22px}
.bf-hero-copy .sub{margin-bottom:26px}
.bf-hero-copy .bf-callout{margin:0}
@media(max-width:900px){
  .bf-hero-copy h1{margin-bottom:18px}
  .bf-hero-copy .sub{margin-bottom:22px}
}

/* Mobile had no route to the price. .bf-nav is display:none under 861px and the
   sticky bar only carried the CTA and WhatsApp, so on a phone the only way to
   reach "What a website costs" was to scroll ~5,000px of an 18,600px page —
   and price is the first thing this buyer looks for. A third button fixes that.
   The old 68%/30% bases only added up for two buttons, so the row is re-fitted:
   the CTA takes the slack and the two ghosts size to their own text. */
.bf-sticky{gap:8px}
.bf-sticky .btn{flex:1 1 auto;min-width:0;padding:12px 10px;font-size:14px;
  overflow:hidden;text-overflow:ellipsis}
.bf-sticky .btn.ghost{flex:0 0 auto;padding:12px 13px}
/* .btn carries width:100%, so flex-basis:auto above resolved to the full bar
   width and squeezed the CTA to 20px. Basis comes off width entirely instead:
   the CTA takes what is left (flex:1 1 0), the ghosts size to their own label. */
.bf-sticky .btn{width:auto;flex:1 1 0;min-width:0;padding:12px 8px}
.bf-sticky .btn.ghost{flex:0 1 auto;padding:12px 12px}


/* AA fix — measured on the live page. --green-pale (#7FBF9E) on the dark-green
   final CTA block (--green-deep #26543E) is 4.07:1 and fails AA for 13px text.
   #A7E3C4 is the v1 brand pale and lands 5.96:1 on the same ground. Scoped to
   .blk.final: the same pale on the near-black footer already passes comfortably
   and is left alone. */
.blk.final .eyebrow,
.blk.final .bf-micro,
.blk.final .bf-micro a{color:#A7E3C4}

/* ==========================================================================
   v6 — MOBILE PRICE CAROUSEL
   Stacked cards make the one thing a buyer needs to do at this moment
   impossible: compare. Three ~680px cards means Starter is long gone off the
   top by the time Pro arrives. On phones the row becomes a scroll-snap
   carousel — cards hold the SAME screen position so the differences are what
   move, they equalise in height, and a live indicator tracks the scroll
   under your finger rather than only snapping between states.

   CSS-first on purpose: with no JS at all this is still a working swipeable
   carousel. The tab bar is generated by script as an enhancement, and is
   display:none until the script marks the row ready. Desktop is untouched.
   ========================================================================== */
@media(max-width:900px){
  .pricing{
    display:flex;
    grid-template-columns:none;          /* beat the 1fr grid rule above */
    gap:14px;
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* bleed to the screen edges so a card can centre, and give the shadows
       vertical room the overflow would otherwise clip */
    margin-left:calc(var(--pad) * -1);
    margin-right:calc(var(--pad) * -1);
    padding:8px var(--pad) 14px;
    scroll-padding-left:var(--pad);
  }
  .pricing::-webkit-scrollbar{display:none}
  .pricing > .plan{
    flex:0 0 86%;                        /* the 14% peek IS the swipe affordance */
    scroll-snap-align:center;
    margin:0;
  }
  /* one tap target per card, never a hover-only cue */
  .pricing > .plan .btn{width:100%}

  /* ---- generated tab bar ---- */
  .bf-ptabs{display:none}
  .bf-ptabs.is-ready{
    display:block;position:relative;margin:18px 0 4px;
    border-bottom:1px solid var(--rule-faint);
  }
  .bf-ptabs-row{display:flex;gap:0}
  .bf-ptab{
    flex:1 1 0;min-width:0;appearance:none;background:none;border:0;
    padding:10px 4px 12px;cursor:pointer;font-family:var(--font-body);
    font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--muted);
    text-align:center;line-height:1.25;
    transition:color .22s var(--ease);
  }
  .bf-ptab b{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;margin-bottom:3px}
  .bf-ptab i{display:block;font-style:normal;font-size:15px;font-weight:700;
    font-variant-numeric:tabular-nums lining-nums;color:var(--ink);
    transition:color .22s var(--ease)}
  .bf-ptab[aria-current="true"]{color:var(--green-link)}
  .bf-ptab[aria-current="true"] i{color:var(--green-link)}
  .bf-ptab:focus-visible{outline:2px solid var(--green-link);outline-offset:-3px;border-radius:3px}
  /* the indicator is driven by transform from scrollLeft, so it moves WITH the
     finger instead of jumping after the snap lands */
  .bf-ptab-ink{
    position:absolute;left:0;bottom:-1px;height:2px;background:var(--green);
    transform-origin:0 50%;will-change:transform;
  }
  .bf-swipe-hint{
    margin:8px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);text-align:center;
  }
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  .pricing{scroll-behavior:auto}
  .bf-ptab,.bf-ptab i,.bf-ptab-ink{transition:none}
}