/* Young SEO — structural CSS. Themes only set tokens and small overrides (themes/<name>/theme.css). */
@font-face{font-family:'Questrial';src:url('/fonts/Questrial-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex';src:url('/fonts/IBMPlexSans-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex';src:url('/fonts/IBMPlexSans-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'PlexMono';src:url('/fonts/IBMPlexMono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'PlexMono';src:url('/fonts/IBMPlexMono-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --display:'Questrial',system-ui,sans-serif;
  --body:'Plex',system-ui,sans-serif;
  --mono:'PlexMono',ui-monospace,Menlo,monospace;
  --track:.2em;
  --radius:2px;
  --wrap:1200px;
  --gut:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
img,svg{max-width:100%;display:block}img{height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.2em}
/* Leading and rhythm opened up 17 Sep on the same instruction that moved v3's: "space out
   the rest of the site more top to bottom ... too crammed in." Changed HERE as well as in
   themes/v3/standalone.css, because v3 is a standalone renderer that does not load this
   file — a change in one leaves the sub-pages on the old rhythm. Rule 93. */
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.14;letter-spacing:-.01em;margin:0 0 .68em;text-wrap:balance}
h1{font-size:clamp(2rem,3.6vw,3.15rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.8rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.28}
b,strong{font-weight:500}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.narrow{max-width:760px}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:8px 12px}
.skip:focus{left:8px;top:8px;z-index:99}

/* type roles */
.label{font-family:var(--display);text-transform:uppercase;letter-spacing:var(--track);font-size:.72rem;color:var(--ink-2);display:block;margin-bottom:1.2rem;line-height:1.5}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.86rem;letter-spacing:.01em}
.lede{font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--ink-2);max-width:56ch}
.fine{font-size:.86rem;color:var(--ink-2);max-width:60ch}
.accent{color:var(--accent)}
.up{color:var(--ink-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-family:var(--display);text-transform:uppercase;letter-spacing:var(--track);font-size:.78rem;padding:.95em 1.5em .85em;border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink);transition:background .25s var(--ease),border-color .25s,color .25s,transform .25s var(--ease)}
.btn:hover{border-color:var(--ink)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-1px)}
.btn-head{padding:.8em 1.1em .7em;min-height:44px}   /* 38px at desktop was below the tap-target floor */
.link-mono{font-family:var(--mono);font-size:.86rem;color:var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:2px}
.link-mono:hover{color:var(--ink);border-color:var(--ink)}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;gap:32px;height:60px}   /* matches themes/v3 — the home and the sub-pages share this bar */
.logo svg{height:30px;width:auto}
.nav{display:flex;gap:28px;margin-left:auto}
.nav a{font-family:var(--display);text-transform:uppercase;letter-spacing:var(--track);font-size:.72rem;color:var(--ink-2)}
.nav a:hover{color:var(--ink)}
/* The header's filled CTA was removed 17 Sep (four simultaneous CTAs on the first screen);
   what replaces it is .nav-book, a nav link that still reaches the form. It has to be styled
   HERE as well as in themes/v3/standalone.css, because v3 is a standalone renderer and does not
   load this file — the first version lived only in v3 and every SUB-PAGE shipped with zero
   visible way to the form. Rule 93, paid again. */
.nav-book{color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:2px}
.nav-book:hover{color:var(--accent)}
@media (max-width:720px){
  .nav{display:flex;gap:0;margin-left:auto}
  .nav a:not(.nav-book){display:none}
  .nav-book{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;font-size:.66rem}
  .btn-head{margin-left:auto}
}

/* sections */
section{padding-block:clamp(68px,11vw,148px);border-bottom:1px solid var(--line);scroll-margin-top:76px}
section:last-of-type{border-bottom:0}

/* hero */
.hero{padding-top:clamp(40px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:6fr 6fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero-copy h1{margin-bottom:.6em}
.hero-cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:1.6rem}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

.hero-chart{margin:0;border:1px solid var(--line);background:var(--bg-2);border-radius:var(--radius)}
.chart-head,.chart-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line)}
.chart-head .label{margin:0}
.chart-head .mono,.chart-foot{color:var(--ink-2)}
.chart-foot{border-bottom:0;border-top:1px solid var(--line);font-size:.86rem}
.chart-body{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;padding:20px 18px;align-items:center}
@media (max-width:560px){.chart-body{grid-template-columns:1fr}}
.replay{background:none;border:1px solid var(--line);color:var(--ink-2);padding:6px 10px;border-radius:var(--radius);cursor:pointer;text-transform:uppercase;letter-spacing:var(--track);font-size:.68rem}
.replay:hover{color:var(--ink);border-color:var(--ink)}

/* the grid — the chart is the hero */
.grid{width:100%;height:auto}
.grid .d{fill:var(--red);transition:fill .5s var(--ease);transition-delay:calc(var(--i) * 18ms)}
.grid .d[data-b="a"]{fill:var(--amber)}
.grid .d[data-b="g"]{fill:var(--green)}
.grid[data-state="after"] .d[data-a="r"]{fill:var(--red)}
.grid[data-state="after"] .d[data-a="a"]{fill:var(--amber)}
.grid[data-state="after"] .d[data-a="g"]{fill:var(--green)}

.bignum{display:grid;gap:18px}
.num .label{margin-bottom:4px}
.val{font-family:var(--mono);font-weight:500;font-size:clamp(2.6rem,5vw,4.2rem);line-height:1;letter-spacing:-.03em;display:flex;align-items:baseline;gap:2px}
.val b{font-weight:500}
.num-before .val{color:var(--ink-3)}
.num-after .val{color:var(--ink)}
.delta{color:var(--green-ink);display:inline-block;margin-top:6px}
.rank1{color:var(--ink-2);padding-top:14px;border-top:1px solid var(--line)}
.rank1 b{color:var(--ink)}

/* proof */
.h-case span{display:block}
.disclosure{font-size:.92rem;color:var(--ink-2);border-left:2px solid var(--accent);padding-left:14px;max-width:70ch;margin:1.5rem 0 0}
.row{display:grid;grid-template-columns:4fr 8fr;gap:clamp(24px,4vw,64px);padding-top:clamp(40px,6vw,80px);margin-top:clamp(40px,6vw,80px);border-top:1px solid var(--line)}
.row-text h3{margin-bottom:.4em}
.row-text p{color:var(--ink-2);max-width:44ch}
@media (max-width:900px){.row{grid-template-columns:1fr}}

.panel{margin:0;border:1px solid var(--line);background:var(--bg-2);border-radius:var(--radius);padding:12px}
.panel figcaption{display:grid;gap:3px;margin-top:10px;color:var(--ink-2)}
.panel figcaption .solv{color:var(--ink);margin-top:4px}
.panel-big img{border-radius:var(--radius);filter:var(--map-filter)}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:560px){.strip{grid-template-columns:1fr 1fr}}
.pair{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
.arrow{font-size:1.6rem;color:var(--accent)}
@media (max-width:720px){
  /* Was 1fr (stacked). A before and an after that cannot be seen at the same time is
     not a before and after -- and stacking cost ~580px of phone scroll for the privilege. */
  .pair{grid-template-columns:1fr auto 1fr;gap:8px}
  .pair .panel{padding:8px}
  .kicker{padding:0 2px}
  .kicker b{font-size:.82rem;line-height:1.1}
  .kicker .label{font-size:.55rem;letter-spacing:.06em;line-height:1.2}
  /* Caption text was wrapping four deep inside a half-width panel. */
  .pair .panel figcaption,.pair .panel .mono,.pair .panel .label{font-size:.62rem;line-height:1.3}
  .pair .panel .solv{font-size:.66rem}
}
@media (max-width:420px){
  .pair{gap:4px}
  .pair .panel{padding:5px}
  .pair .panel figcaption,.pair .panel .mono,.pair .panel .label{font-size:.57rem}
}
.pair-small{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 14px}

.interventions{list-style:none;margin:0;padding:0;columns:2;column-gap:32px}
.interventions li{break-inside:avoid;display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:1rem}
.interventions .mono{color:var(--accent)}
@media (max-width:640px){.interventions{columns:1}}

.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-family:var(--display);text-transform:uppercase;letter-spacing:var(--track);font-size:.68rem;color:var(--ink-2);font-weight:400;padding:0 12px 10px 0;border-bottom:1px solid var(--line-strong)}
td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
td.mono,th.mono{text-align:right}
.kw td:not(:first-child),.kw th:not(:first-child){text-align:right}
.kw tr:first-child td{color:var(--ink)}
.kw td:first-child{white-space:nowrap}
.price td:not(:first-child),.price th:not(:first-child){text-align:right}
.price .list{color:var(--ink-3)}

.row-5{grid-template-columns:1fr 1fr 1fr;align-items:start}
@media (max-width:900px){.row-5{grid-template-columns:1fr}}
.stat-card{border:1px solid var(--line);background:var(--bg-2);padding:22px;border-radius:var(--radius);height:100%}
.stat-card p{margin:0;color:var(--ink-2);font-size:.95rem}
.stat-val{display:flex;align-items:baseline;gap:14px;margin-bottom:10px}
.stat-val b{font-size:clamp(2.6rem,4vw,3.6rem);font-weight:500;line-height:1;letter-spacing:-.03em}
.stat-val .delta{margin:0}
.gap{border-color:var(--accent)}
.gap .label{color:var(--accent)}

/* offer */
.offer-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,80px);align-items:start}
@media (max-width:900px){.offer-grid{grid-template-columns:1fr}}
.quote{margin:1.5rem 0 0;padding:0}
.quote p{font-family:var(--display);font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.35;color:var(--ink);text-wrap:pretty}
.quote cite{font-style:normal;color:var(--ink-2)}
.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:56px 1fr;gap:4px 16px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
.steps li strong{font-family:var(--display);font-weight:400;font-size:1.25rem;grid-column:2}
.steps li span:last-child{grid-column:2;color:var(--ink-2)}
.step-n{grid-row:1/3;color:var(--accent);font-size:1.1rem;font-weight:500}
.steps li:last-child strong{color:var(--accent)}

/* pricing */
.pricing-head{max-width:720px;margin-bottom:clamp(28px,4vw,48px)}
.pricing-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,5vw,64px);align-items:start}
@media (max-width:900px){.pricing-grid{grid-template-columns:1fr}}
.price th.label{margin:0;display:table-cell}
.price td:first-child{font-size:1rem}
.giveback{border:1px solid var(--line);background:var(--bg-2);padding:22px;border-radius:var(--radius)}
.giveback ul{margin:0 0 1.2rem;padding:0;list-style:none}
.giveback li{padding:10px 0;border-bottom:1px solid var(--line)}
.giveback li::before{content:"—";color:var(--accent);margin-right:10px}
.giveback .fine{margin:0}

/* also */
.also-grid{display:grid;grid-template-columns:3fr 4.5fr 4.5fr;gap:clamp(24px,4vw,56px)}
.also-item p{color:var(--ink-2);margin:0}
@media (max-width:900px){.also-grid{grid-template-columns:1fr}}

/* book */
.book-grid{display:grid;grid-template-columns:1fr;}.book-grid:has(.form){grid-template-columns:6fr 6fr;gap:clamp(32px,5vw,80px);align-items:start}
@media (max-width:900px){.book-grid{grid-template-columns:1fr}}
.btn-big{flex-direction:column;align-items:flex-start;gap:6px;padding:18px 24px;margin:8px 0 18px}
.btn-big .label{margin:0;color:inherit;opacity:.85}
.btn-big .phone{font-size:1.6rem;font-weight:500;letter-spacing:0}
.form{display:grid;gap:14px;border:1px solid var(--line);background:var(--bg-2);padding:22px;border-radius:var(--radius)}
.form label{display:grid;gap:6px;font-family:var(--display);text-transform:uppercase;letter-spacing:var(--track);font-size:.68rem;color:var(--ink-2)}
.form input{font:inherit;font-family:var(--body);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--ink);background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--radius);padding:12px}
.form input:focus{outline:2px solid var(--accent);outline-offset:1px}
.hp{position:absolute;left:-9999px}
.form-msg{margin:0;font-size:.92rem}

/* page (privacy, 404) */
.page p{max-width:70ch}
.page h2{font-size:1.3rem;margin-top:2rem}
.page a{border-bottom:1px solid var(--line-strong)}

/* footer */
.site-foot{border-top:1px solid var(--line);padding-top:clamp(40px,5vw,64px);background-color:var(--bg-2)}
.foot-grid{display:grid;grid-template-columns:6fr 3fr 3fr;gap:32px}
@media (max-width:720px){.foot-grid{grid-template-columns:1fr 1fr;gap:22px}.foot-grid>div:first-child{grid-column:1/3}}
.logo-foot svg{height:28px}
.foot-note{color:var(--ink-2);font-size:.9rem;max-width:44ch;margin-top:16px}
.foot-col{display:grid;gap:8px;align-content:start}
.foot-col a{color:var(--ink-2)}
.foot-col a:hover{color:var(--ink)}
.foot-col .label{margin-bottom:4px}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:24px;margin-top:32px;border-top:1px solid var(--line);color:var(--ink-3)}

/* reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ===== v2: packages, joe, illustration hero, fun ===== */
.hero-cta .btn+.btn{margin-left:0}
.state-word{position:relative;color:var(--ink-2);min-width:8ch;text-align:right}
.state-word span{transition:opacity .4s var(--ease)}
.state-word [data-word-after]{position:absolute;right:0;top:0;opacity:0;color:var(--green-ink)}
.hero-chart.after .state-word [data-word-before]{opacity:0}
.hero-chart.after .state-word [data-word-after]{opacity:1}
.grid-illus .d{transition-delay:calc(var(--i) * 14ms)}
.num-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.arrow-big{font-family:var(--mono);color:var(--accent);font-size:1.8rem}
.val-before{color:var(--ink-3)}
.stat-sub{color:var(--ink-2);display:block;margin:6px 0 14px}
.bignum .link-mono{justify-self:start}


/* packages */
.pkg-head{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}

/* ---- 13 Sep 2026: desktop dead-column fix + the restructured home page ----
   Section heads were capped at 760px inside a 1250px wrap, so every light block
   read as half-empty from about 1100px up. .sec-head puts the supporting text in
   the right-hand column instead of leaving it blank. */
.sec-head{display:grid;grid-template-columns:1fr;gap:clamp(14px,2vw,28px);margin-bottom:clamp(26px,4vw,44px)}
.sec-head>div{min-width:0}
@media (min-width:1000px){
  .sec-head{grid-template-columns:7fr 5fr;align-items:end;gap:clamp(32px,5vw,72px)}
  .sec-head .disclosure,.sec-head .offer-quote{margin-top:0}
}

/* A two-card row must not sit in a three-column grid. */
.row-5{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.row-cta{grid-template-columns:1fr}
@media (min-width:900px){.row-cta{grid-template-columns:5fr 7fr;align-items:center;gap:clamp(28px,4vw,64px)}}
.stat-wide{height:100%}
.proof-more .lede{margin:0 0 18px}

/* Lean hero dashboard: two cards, not five. */
.dash-grid-lean{grid-template-columns:1.55fr 1fr}
@media (max-width:900px){.dash-grid-lean{grid-template-columns:1fr}}
.card-share .link-mono{margin-top:14px;display:inline-block}

/* The CTA ladder. Three rungs, and they must not look like the same button. */
.ladder-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.gapband{padding-block:clamp(44px,6vw,76px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gap-grid{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,44px);align-items:center}
@media (min-width:900px){.gap-grid{grid-template-columns:7fr 4fr}}
.gapband h2{font-size:clamp(1.5rem,2.8vw,2.3rem);margin:.4rem 0 0}
.gap-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.gap-cta .btn-big{width:100%;justify-content:center;text-align:center}

/* How buying works — five steps, rendered for the first time. */
.offer{padding-block:clamp(48px,7vw,96px)}
.offer-quote{margin:0;border-left:2px solid var(--accent);padding-left:16px}
.offer-quote p{font-family:var(--display);font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.4;color:var(--ink);margin:0}
.offer-quote cite{display:block;margin-top:10px;font-style:normal;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.osteps{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:370px){.osteps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:759px){.ostep{padding:14px}.ostep span{font-size:.85rem}}
@media (min-width:760px){.osteps{grid-template-columns:repeat(5,1fr)}}
.ostep{background:var(--bg);padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;gap:10px}
.ostep-n{color:var(--accent);font-size:.95rem}
.ostep strong{display:block;font-size:1.02rem;line-height:1.25;margin-bottom:6px}
.ostep span{color:var(--ink-2);font-size:.9rem;line-height:1.45}
.offer-no{margin-top:18px;max-width:80ch}
.f30{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.f30 li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.f30 .f-when{color:var(--accent);white-space:nowrap;font-size:.85rem;padding-top:2px}
.f30 strong{display:block;margin-bottom:3px}
.f30 span{color:var(--ink-2);font-size:.92rem;line-height:1.45}
.pkg-foot-lean{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.kw-open{margin-top:clamp(32px,5vw,56px);border-top:1px solid var(--line);padding-top:18px}

/* Sub-page mastheads. Same system as the home page, one size down. */
.page-head{padding-block:clamp(40px,6vw,84px) clamp(24px,3vw,40px)}
.page-head h1{font-size:clamp(1.9rem,3.4vw,3rem);margin:.5rem 0 0;max-width:22ch}
.page-head .lede{margin-top:1rem;max-width:62ch}
.crumbs{margin-top:clamp(18px,2.5vw,30px);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.crumbs a{color:var(--accent)}
.page-head+.proof,.page-head+.offer,.page-head+.packages{padding-top:0}

/* ---- Price cards (home). The matrix is the reference doc and lives on /pricing. ---- */
.pcards{display:grid;gap:14px;margin-top:20px}
@media (min-width:820px){.pcards{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.pc{border:1px solid var(--line);background:var(--bg);padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;gap:7px;position:relative}
.pc-feat{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pc-badge{position:absolute;top:-1px;right:-1px;background:var(--accent);color:#fff;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px}
.pc-name{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.pc-price{font-family:var(--display);font-size:clamp(2.1rem,4vw,2.9rem);line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.pc-unit{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.pc-add{font-size:.78rem;color:var(--accent)}
.pc-blurb{margin:8px 0 0;font-size:.95rem;line-height:1.45}
@media (max-width:819px){
  .pc{padding:16px 16px 18px;gap:5px}
  .pc-blurb{font-size:.9rem;margin-top:6px}
  .pc-list{gap:6px}
  .pc-list li{font-size:.87rem}
}
.pc-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.pc-list li{display:grid;grid-template-columns:auto 1fr;gap:9px;font-size:.9rem;line-height:1.4}
.pc-list li::before{content:"\2713";color:var(--green-ink,var(--accent));line-height:1.4}
.pc-not{margin:4px 0 0;font-size:.85rem;color:var(--ink-2)}
.pc .btn{margin-top:auto;padding-top:10px}
@media (min-width:820px){.pc .btn{width:100%;justify-content:center;text-align:center;margin-top:18px}}
.vs-more{margin-top:14px}
.form-card{border:1px solid var(--line);background:var(--bg);padding:clamp(18px,2.4vw,26px)}
.form-card .label{display:block;margin-bottom:12px}
.sms-copy{margin:0 0 16px}
.sms-big{width:100%;justify-content:center;text-align:center}
.form-card .fine{margin-top:12px}

/* Section jump nav -- mobile only, scrolls horizontally, sticks under the header. */
.jumpnav{display:none}
@media (max-width:900px){
  .jumpnav{display:block;position:sticky;top:var(--head-h,56px);z-index:40;
    background:var(--bg);border-bottom:1px solid var(--line);overflow:hidden}
  .jn-row{display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .jn-row::-webkit-scrollbar{display:none}
  .jn-row a{flex:0 0 auto;padding:11px 14px;font-size:.72rem;letter-spacing:.13em;
    text-transform:uppercase;color:var(--ink-2);text-decoration:none;white-space:nowrap;
    border-right:1px solid var(--line)}
  .jn-row a:last-child{color:var(--accent);border-right:0}
}

/* A phone does not need the share card here -- the same number is 900px below. */
@media (max-width:820px){.dash-lean .card-share{display:none}}
.kw-open .label{display:block;margin-bottom:14px}
.pkg-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:16px;align-items:stretch}
@media (max-width:900px){.pkg-grid{grid-template-columns:1fr}}
.pkg{border:1px solid var(--line);background:var(--bg-2);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:10px;transition:transform .35s var(--ease),border-color .35s}
.pkg:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.pkg-featured{border-color:var(--accent);position:relative}
.pkg-featured::before{content:"See it before you pay";position:absolute;top:-1px;right:18px;transform:translateY(-50%);background:var(--accent);color:var(--accent-ink);font-family:var(--display);text-transform:uppercase;letter-spacing:var(--track);font-size:.62rem;padding:6px 10px 5px;border-radius:var(--radius)}
.pkg .label{margin-bottom:6px}
.pkg-price{display:flex;align-items:baseline;gap:12px}
.pkg-price b{font-size:clamp(2.2rem,4vw,3.2rem);font-weight:500;letter-spacing:-.03em;line-height:1}
.pkg-price s{color:var(--ink-3);font-size:1rem}
.pkg-unit{color:var(--ink-2)}
.pkg-blurb{font-family:var(--display);font-size:1.15rem;line-height:1.3;margin:10px 0 4px}
.pkg-points{list-style:none;margin:0 0 14px;padding:0;flex:1}
.pkg-points li{padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--ink-2)}
.pkg-points li::before{content:"—";color:var(--accent);margin-right:10px}
.pkg .btn{align-self:flex-start}
.pkg-foot{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px;align-items:start}
@media (max-width:720px){.pkg-foot{grid-template-columns:1fr}}
.pkg-foot .giveback{padding:18px 22px}
.pkg-foot .giveback ul{margin:0}

/* proof v2 */
.strip-2{grid-template-columns:repeat(2,1fr);max-width:640px}
.kicker{display:grid;justify-items:center;gap:2px;text-align:center;padding:0 8px}
.kicker b{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:500;color:var(--accent);letter-spacing:-.02em;line-height:1}
.kicker .label{margin:0}
.kicker .arrow{margin-top:6px}
@media (max-width:720px){.kicker{flex-direction:row}.kicker .arrow{transform:rotate(90deg)}}
.kw-details{margin-top:clamp(32px,5vw,56px);border-top:1px solid var(--line);padding-top:18px}
.kw-details summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px}
.kw-details summary::-webkit-details-marker{display:none}
.kw-details summary::before{content:"+";font-family:var(--mono);color:var(--accent);font-size:1.1rem}
.kw-details[open] summary::before{content:"–"}
.kw-details summary .label{margin:0}
.kw-details .table-wrap{margin-top:18px}

/* joe */
.joe-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,80px);align-items:center}
@media (max-width:900px){.joe-grid{grid-template-columns:1fr}}
.joe-photo{margin:0;max-width:440px}
.joe-photo img{border-radius:var(--radius);border:1px solid var(--line)}
.joe-photo figcaption{display:grid;gap:2px;margin-top:12px;color:var(--ink-2)}
.joe-photo figcaption span:first-child{color:var(--ink)}
.joe-copy p{max-width:58ch;color:var(--ink-2);font-size:1.05rem}
.joe-copy p:first-of-type{color:var(--ink)}
.joe-copy .btn{margin-top:8px}
.state-word{white-space:nowrap;min-width:11ch}
.num-row{flex-wrap:nowrap}
.num-row .val{font-size:clamp(2.2rem,4vw,3.6rem)}

/* ===== v3: dashboard hero, numbered grids, faq ===== */
.hero-top{max-width:820px;margin-bottom:clamp(32px,5vw,56px)}
.hero-copy h1{font-size:clamp(2.6rem,6vw,5rem);letter-spacing:-.02em}
.dash{border:1px solid var(--line);background:var(--bg-2);border-radius:var(--radius);padding:18px;position:relative}
.dash::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:40px 40px;opacity:.35;border-radius:inherit}
.dash>*{position:relative}
.dash-label{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:4px 6px 16px}
.dash-label .label{margin:0}.dash-label .mono{color:var(--ink-2)}
.dash-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;grid-template-rows:auto auto;gap:14px}
.card-map{grid-row:1/3}
.card-kws{grid-column:2/4}
@media (max-width:1000px){.dash-grid{grid-template-columns:1fr 1fr}.card-map{grid-column:1/3;grid-row:auto}.card-kws{grid-column:1/3}}
@media (max-width:560px){.dash-grid{grid-template-columns:1fr}.card-map,.card-kws{grid-column:auto}}
.card{margin:0;border:1px solid var(--line);background:var(--bg);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:10px;transition:border-color .3s}
.card:hover{border-color:var(--line-strong)}
.card .label{margin:0 0 4px}
.card .fine{margin:auto 0 0;font-size:.82rem}
.card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.toggle button{background:none;border:0;color:var(--ink-2);padding:6px 10px;cursor:pointer;font-size:.72rem}
.toggle button+button{border-left:1px solid var(--line)}
.toggle button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.card-map figcaption{display:grid;gap:8px;color:var(--ink-2)}
.state-cap{display:none}
.hero-chart:not(.after) [data-cap-before]{display:block}
.hero-chart.after [data-cap-after]{display:block;color:var(--green-ink)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:.74rem}
.lg{display:inline-flex;align-items:center;gap:6px}
.lg i{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--red)}
.lg i[data-b="g"]{background:var(--green)}.lg i[data-b="a"]{background:var(--amber)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}
.cap{color:var(--ink-3);display:block;margin-bottom:4px}
.big{font-family:var(--mono);font-weight:500;font-size:clamp(1.7rem,2.6vw,2.4rem);letter-spacing:-.03em;line-height:1;display:block}
.big.dim{color:var(--ink-3)}
.big small,.big-small{font-size:.9rem;color:var(--ink-3);font-family:var(--mono)}
.bar{display:block;height:6px;background:var(--line);border-radius:3px;margin-top:8px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--green-ink);border-radius:3px;transition:width 1.1s var(--ease)}
.bar.dim i{background:var(--ink-3)}
.in-view .bar i,.hero-chart.after .bar i{width:var(--w)}
.kwbars{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.kwbars li{display:grid;grid-template-columns:minmax(120px,1.2fr) 2fr auto;gap:12px;align-items:center;font-size:.9rem}
.kwbars .bar{margin:0}
.kwbars b{font-weight:500;font-size:.82rem}
.dash-note{margin:14px 6px 0;max-width:none}

/* numbered grid */
.grid-num .d{transition-delay:calc(var(--i) * 12ms)}
.grid-num .t{font-family:var(--mono);font-size:17px;font-weight:500;fill:#fff;text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:opacity .3s}
.grid-num .t-after{opacity:0}
.grid-num[data-state="after"] .t-before{opacity:0}
.grid-num[data-state="after"] .t-after{opacity:1}
.grid-num .d[data-b="a"]+.t,.grid-num[data-state="after"] .d[data-a="a"]~.t{fill:#1C1B1E}
.panel-num{padding:14px}
.raw{margin-top:18px}
.raw summary{cursor:pointer;list-style:none}.raw summary::-webkit-details-marker{display:none}
.raw summary .label{margin:0}.raw summary .label::before{content:"+ ";color:var(--accent)}
.raw[open] summary .label::before{content:"– "}
.raw .pair{margin-top:14px}

/* interventions with detail */
.interventions{columns:1}
.interventions li{align-items:flex-start;padding:16px 0}
.interventions li div{display:grid;gap:3px}
.interventions li strong{font-family:var(--display);font-weight:400;font-size:1.1rem}
.interventions li div span{color:var(--ink-2);font-size:.95rem}
@media (min-width:900px){.interventions{columns:2;column-gap:40px}}

/* faq */
.faq-grid{display:grid;grid-template-columns:4fr 8fr;gap:clamp(24px,4vw,64px)}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}}
.qas{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;padding:18px 0;display:flex;justify-content:space-between;gap:16px;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{margin:0;font-size:1.2rem}
.qa summary::after{content:"+";font-family:var(--mono);color:var(--accent);font-size:1.3rem}
.qa[open] summary::after{content:"–"}
.qa p{color:var(--ink-2);max-width:62ch;margin:0 0 20px}

/* ===== v4: punch, red vs green, quiz, motion ===== */
.punch{font-weight:500;color:var(--ink)}
h1 .punch,h2 .punch{font-weight:400;color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:.08em;text-underline-offset:.12em}
.punch-u{text-decoration:underline;text-decoration-color:var(--green-ink);text-decoration-thickness:.09em;text-underline-offset:.14em}
mark.hi{background:var(--green-mark);color:var(--green-deep);padding:0 .12em;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
s.lo{color:var(--red-ink);text-decoration:none;font-weight:500}
h1 mark.hi{background:linear-gradient(transparent 50%,var(--green-mark) 50%);color:var(--green-deep);font-weight:400}
h1 s.lo{font-weight:400}

/* progress bar red -> green */
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;display:block}
.progress i{display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,var(--red-ink),var(--amber),var(--green-ink));transition:width .15s linear}

/* red / green tinting of before/after */
.row-1 .panel,.card .val-before{--tint:var(--red-ink)}
.row-1 .label,.row-1 .panel figcaption .solv b{color:var(--red-ink)}
.row-2 .label,.row-2 .panel:last-of-type figcaption .solv b{color:var(--green-ink)}
.row-1 .panel{border-color:color-mix(in srgb,var(--red-ink) 40%,var(--line))}
.row-2 .panel:last-of-type{border-color:color-mix(in srgb,var(--green-ink) 50%,var(--line))}
.row-2 .panel:first-of-type{border-color:color-mix(in srgb,var(--red-ink) 40%,var(--line))}
.big.dim{color:var(--red-ink);opacity:.8}
.card .big:not(.dim){color:var(--green-ink)}
.cap{color:var(--ink-3)}
.kicker b{color:var(--green-ink)}
.kicker .arrow{color:var(--green-ink)}

/* clock under the map */
.clock{display:flex;align-items:center;gap:10px;color:var(--ink)}
.clock-bar{flex:1;height:2px;background:var(--line);overflow:hidden;border-radius:1px}
.clock-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red-ink),var(--green-ink));transition:width 1.4s linear}
.hero-chart.after .clock-bar i{width:100%}

/* cursor-reactive dots */
.grid-num .pt{transform-box:fill-box;transform-origin:center;transition:transform .25s var(--ease)}
.grid-num .pt.near{transform:scale(1.18)}

/* quiz */
.quiz{background:var(--bg-2)}
.quiz-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,80px);align-items:start}
@media (max-width:900px){.quiz-grid{grid-template-columns:1fr}}
.quiz-box{border:1px solid var(--line-strong);background:var(--bg);border-radius:var(--radius);padding:8px 22px 22px}
.qs{list-style:none;margin:0;padding:0}
.q{border-bottom:1px solid var(--line)}
.qbtn{display:grid;grid-template-columns:28px 1fr;gap:16px;align-items:start;width:100%;text-align:left;background:none;border:0;padding:18px 0;font:inherit;color:inherit;cursor:pointer}
.qbtn strong{display:block;font-weight:500;font-size:1.05rem;margin-bottom:4px}
.qsub{color:var(--ink-2);font-size:.9rem;display:block}
.chk{width:24px;height:24px;border:2px solid var(--red-ink);border-radius:50%;margin-top:2px;position:relative;transition:background .25s,border-color .25s,transform .25s var(--ease)}
.chk::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--red-ink);transition:background .25s}
.qbtn[aria-pressed="true"] .chk{border-color:var(--green-ink);transform:scale(1.1)}
.qbtn[aria-pressed="true"] .chk::after{background:var(--green-ink)}
.qbtn:hover .chk{transform:scale(1.1)}
.qout{padding:18px 0 14px}
.qres{display:grid;gap:4px}
.qres b{font-family:var(--display);font-weight:400;font-size:1.5rem}
.qres span{color:var(--ink-2)}
.qres[hidden]{display:none}
.qres b mark.hi{background:var(--green-mark)}

/* CTA pulse + card hover */
.btn-primary{position:relative}
.btn-primary::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--accent);opacity:0;transform:scale(1);pointer-events:none}
.btn-primary:hover::after{animation:ring .9s var(--ease) forwards}
@keyframes ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}
.kwbars li:hover .bar i{filter:brightness(1.15)}
.kwbars li{transition:transform .25s var(--ease)}
.kwbars li:hover{transform:translateX(4px)}
.interventions li{transition:transform .3s var(--ease)}
.interventions li:hover{transform:translateX(4px)}
.interventions li:hover .mono{color:var(--green-ink)}

/* ===== v5: texture, trust strip, stronger green ===== */
body{background-image:var(--grain);background-attachment:fixed}
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:auto -10% -30% auto;width:70%;height:80%;background:radial-gradient(closest-side,var(--green-glow),transparent 70%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:-20% auto auto -10%;width:50%;height:60%;background:radial-gradient(closest-side,var(--red-glow),transparent 70%);pointer-events:none}
.hero .wrap{position:relative}
.dash{box-shadow:0 30px 80px -40px rgba(0,0,0,.25)}
.trust{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);overflow:hidden}
.trust li{padding:18px 20px;border-right:1px solid var(--line);display:grid;gap:3px}
.trust li:last-child{border-right:0}
.trust b{font-family:var(--display);font-weight:400;font-size:1.15rem;color:var(--green-deep)}
.trust span{color:var(--ink-2);font-size:.88rem}
@media (max-width:900px){.trust{grid-template-columns:1fr 1fr}.trust li:nth-child(2){border-right:0}.trust li:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:480px){.trust{grid-template-columns:1fr}.trust li{border-right:0;border-bottom:1px solid var(--line)}}
.label{color:var(--ink-2)}
.row-2 .label,.card .big:not(.dim),.kicker b,.kicker .arrow,.delta,.hero-chart.after [data-cap-after]{color:var(--green-deep)}
.card .big:not(.dim){text-shadow:0 0 24px var(--green-glow)}
.btn-primary{box-shadow:0 8px 24px -12px var(--accent)}
.pkg-featured{box-shadow:0 20px 50px -30px rgba(0,0,0,.35)}
section:nth-of-type(even){background:var(--bg-2)}
.quiz{background:var(--bg)}

.manage{list-style:none;margin:6px 0 12px;padding:0}
.manage li{padding:8px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-size:1.05rem}
.manage li::before{content:"●";color:var(--green-deep);font-size:.6rem;vertical-align:middle;margin-right:10px}

/* photo in the hero */
.hero-top{max-width:none;display:grid;grid-template-columns:7fr 4fr;gap:clamp(28px,5vw,72px);align-items:end}
@media (max-width:900px){.hero-top{grid-template-columns:1fr}.hero-photo{max-width:360px}}
.hero-photo{margin:0;position:relative}
.hero-photo img{border-radius:var(--radius);border:1px solid var(--line);box-shadow:0 30px 60px -36px rgba(0,0,0,.45);aspect-ratio:4/5;object-fit:cover;object-position:top}
.hero-photo figcaption{display:grid;gap:3px;margin-top:12px;color:var(--ink-2)}
.hero-photo figcaption b{color:var(--ink);font-weight:500}
.hero-photo .link-mono{justify-self:start;margin-top:4px}

/* before-state: mid ranks read as red, not green */
.grid[data-state="before"] .d[data-b="a"]{fill:var(--amber-before)}
.grid-num[data-state="before"] .d[data-b="a"]+.t{fill:#fff}
.panel .grid[data-state="before"] .d[data-b="a"]{fill:var(--amber-before)}
.legend .lg i[data-b="a"]{background:var(--amber)}
.hero-chart:not(.after) .legend .lg i[data-b="a"]{background:var(--amber-before)}
.hero-chart:not(.after) .card .big:not(.dim){color:var(--ink-3);text-shadow:none}

.joe-grid{grid-template-columns:3fr 8fr}
.joe-side{border-left:2px solid var(--accent);padding-left:18px;align-self:start}
.joe-side p{margin:0 0 6px}

/* v7 */
.trust a{display:grid;gap:3px;color:inherit}
.trust a:hover b{text-decoration:underline}
.book-btns{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 18px}
.book-btns .btn-big{margin:0}
.coming-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,80px);align-items:start}
@media (max-width:900px){.coming-grid{grid-template-columns:1fr}}
.coming-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.coming-list li{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;padding:18px 0;border-bottom:1px solid var(--line)}
.coming-list .mono{grid-row:1/3;color:var(--ink-3);padding-top:4px}
.coming-list strong{font-family:var(--display);font-weight:400;font-size:1.25rem}
.coming-list li span:last-child{color:var(--ink-2)}
.joe-copy .quote{margin:1.2rem 0 .6rem;padding-left:16px;border-left:2px solid var(--green-deep)}
.joe-copy .quote p{font-size:1.15rem;color:var(--ink)}

/* ===== v8: background spice (static) ===== */
body{background-image:var(--grain),url('/img/topo.svg');background-size:auto,900px 900px;background-attachment:fixed,fixed}
.hero{background-image:url('/img/radar.svg');background-repeat:no-repeat;background-position:right 0 top 40px;background-size:1400px auto}
@media (max-width:900px){.hero{background-position:right -400px top -60px}}
.proof,.book{position:relative;overflow:hidden}
.proof::before,.book::before{content:"";position:absolute;right:-6%;bottom:-8%;width:min(46vw,560px);aspect-ratio:1;background:url('/img/mark-wm.svg') no-repeat center/contain;pointer-events:none;opacity:var(--wm,1)}
.book::before{right:-4%;top:-6%;bottom:auto;width:min(40vw,480px)}
.proof>.wrap,.book>.wrap{position:relative}
.packages,.faq{position:relative}
.packages::after,.faq::after{content:"49 POINTS · 5 MI · GOOGLE · 38.9617° N · 94.8543° W · SCANNED 9/4 · 9/5 · ";position:absolute;left:0;right:0;bottom:12px;white-space:nowrap;overflow:hidden;font-family:var(--mono);font-size:.68rem;letter-spacing:.3em;color:var(--ink);opacity:.14;pointer-events:none;text-align:center}
.card,.pkg,.stat-card,.panel,.quiz-box,.giveback{--gl:color-mix(in srgb,var(--line) 45%,transparent);background-image:linear-gradient(var(--gl) 1px,transparent 1px),linear-gradient(90deg,var(--gl) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px}
.card,.pkg,.stat-card,.panel,.quiz-box,.giveback{background-color:var(--bg)}
.dash::before{background-size:32px 32px;opacity:.5}
.site-foot{background-image:url('/img/topo.svg');background-size:700px;background-position:center}
.h-corner{position:absolute}
.dash{outline:1px solid var(--line);outline-offset:6px}

/* ===== v9: easter eggs ===== */
.proof{background-image:url('/img/arrow.svg');background-repeat:no-repeat;background-position:left -40px bottom 120px;background-size:1000px auto}
.hero .wrap{position:relative}
.egg{position:absolute;right:var(--gut);bottom:-6px;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--ink);opacity:.18;cursor:default;transition:opacity .3s}
.egg:hover{opacity:.9}
.egg span{display:none;margin-left:8px;color:var(--green-deep)}
.egg:hover span{display:inline}
.faq::after{content:"IF YOU CAN READ THIS, SO CAN GOOGLE · 49 POINTS · 5 MI · 38.9617° N · 94.8543° W · "}
.packages::after{content:"RED → GREEN · RED → GREEN · RED → GREEN · RED → GREEN · RED → GREEN · RED → GREEN · "}
.site-foot .foot-base .mono:last-child{position:relative}
.site-foot .foot-base .mono:last-child:hover::after{content:" · you scrolled all the way down. text Joe the word RADAR.";color:var(--green-deep)}

/* ============================================================
   v10 — ATMOSPHERE. Three stacked wallpapers, per-section
   backdrops, page-edge rulers, corner brackets, section stitches.
   All static. Nothing here changes a single number on the page.
   ============================================================ */

/* --- layer 1+2+3: grain, topo contours, data plate --- */
body{
  background-image:var(--grain),url('/img/plate.svg'),url('/img/topo.svg');
  background-size:auto,400px 400px,1100px 1100px;
  background-position:0 0,0 0,center top;
  background-attachment:fixed,fixed,fixed;
}

/* --- layer 4: fixed vignette + corner glows, sits under content --- */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(70% 50% at 22% -8%, var(--red-glow), transparent 70%),
    radial-gradient(60% 55% at 105% 18%, var(--green-glow), transparent 72%),
    radial-gradient(55% 45% at -8% 78%, var(--green-glow), transparent 72%),
    radial-gradient(140% 120% at 50% 50%, transparent 55%, var(--vig, rgba(28,27,30,.10)) 100%);
}
/* --- layer 5: page-edge instrument rulers --- */
body::after{
  content:"";position:fixed;top:0;bottom:0;left:0;right:0;z-index:-1;pointer-events:none;
  background:url('/img/ruler.svg') repeat-y left top,url('/img/ruler.svg') repeat-y right top;
  background-size:44px 1600px;
  opacity:.85;
}
@media (max-width:1100px){body::after{display:none}}

/* --- hero: radar + sweep wedge stacked --- */
.hero{
  background-image:url('/img/sweep.svg'),url('/img/radar.svg');
  background-repeat:no-repeat,no-repeat;
  background-position:right 0 top 40px,right 0 top 40px;
  background-size:1400px auto,1400px auto;
}
@media (max-width:900px){.hero{background-position:right -400px top -60px,right -400px top -60px}}

/* --- per-section backdrops --- */
.quiz{position:relative;overflow:hidden}
.quiz::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url('/img/serp.svg') no-repeat left -150px center/320px auto;opacity:.45;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 55%);mask-image:linear-gradient(90deg,#000,transparent 55%)}
.quiz>.wrap{position:relative}

.packages{position:relative;overflow:hidden}
.packages::before{content:"";position:absolute;right:-8%;top:-10%;width:min(52vw,760px);aspect-ratio:1;pointer-events:none;
  background:url('/img/nodes.svg') no-repeat center/contain;opacity:.9}
.packages>.wrap{position:relative}

.coming{position:relative;overflow:hidden}
.coming::before{content:"";position:absolute;left:-6%;bottom:-14%;width:min(44vw,640px);aspect-ratio:1;pointer-events:none;
  background:url('/img/nodes.svg') no-repeat center/contain;opacity:.75;transform:scaleX(-1)}
.coming>.wrap{position:relative}

.joe{position:relative;overflow:hidden}
.joe::before{content:"";position:absolute;right:-4%;top:8%;width:min(40vw,520px);aspect-ratio:1;pointer-events:none;
  background:url('/img/mark-wm.svg') no-repeat center/contain}
.joe::after{content:"";position:absolute;right:2%;bottom:6%;width:min(46vw,740px);height:190px;pointer-events:none;
  background:url('/img/band.svg') no-repeat right bottom/contain;opacity:.8}
.joe>.wrap{position:relative}

.faq{position:relative;overflow:hidden}
.faq::before{content:"";position:absolute;left:-6%;top:-10%;width:min(48vw,700px);aspect-ratio:1;pointer-events:none;
  background:url('/img/nodes.svg') no-repeat center/contain;opacity:.8}
.faq>.wrap{position:relative}

.also{position:relative;overflow:hidden}
.also::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url('/img/plate.svg') repeat 0 0/200px 200px;opacity:.55}
.also>.wrap{position:relative}

/* --- section stitch: a hairline + centre tick on every boundary --- */
section{position:relative}
section::first-line{}
.seam{position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--line-strong) 12%,var(--line-strong) 88%,transparent)}
.seam::before,.seam::after{content:"";position:absolute;top:-3px;width:1px;height:7px;background:var(--line-strong)}
.seam::before{left:12%}
.seam::after{right:12%}

/* --- cards: corner brackets, technical frame --- */
.card,.pkg,.stat-card,.panel,.quiz-box,.giveback,.dash{position:relative}
.card::after,.pkg::after,.stat-card::after,.quiz-box::after,.dash::after{
  content:"";position:absolute;inset:6px;pointer-events:none;
  background:
    linear-gradient(var(--brk,var(--line-strong)),var(--brk,var(--line-strong))) left top/10px 1px no-repeat,
    linear-gradient(var(--brk,var(--line-strong)),var(--brk,var(--line-strong))) left top/1px 10px no-repeat,
    linear-gradient(var(--brk,var(--line-strong)),var(--brk,var(--line-strong))) right top/10px 1px no-repeat,
    linear-gradient(var(--brk,var(--line-strong)),var(--brk,var(--line-strong))) right top/1px 10px no-repeat,
    linear-gradient(var(--brk,var(--line-strong)),var(--brk,var(--line-strong))) left bottom/10px 1px no-repeat,
    linear-gradient(var(--brk,var(--line-strong)),var(--brk,var(--line-strong))) left bottom/1px 10px no-repeat,
    linear-gradient(var(--brk,var(--line-strong)),var(--brk,var(--line-strong))) right bottom/10px 1px no-repeat,
    linear-gradient(var(--brk,var(--line-strong)),var(--brk,var(--line-strong))) right bottom/1px 10px no-repeat;
  opacity:.55;
}
.pkg-featured{--brk:var(--accent)}
.pkg-featured::after{opacity:.8}
.dash::after{inset:-6px}

/* --- header: rule + coordinate microcopy --- */
.site-head{background-image:url('/img/plate.svg');background-size:300px;background-position:center}
.site-foot{background-image:url('/img/topo.svg'),url('/img/plate.svg');background-size:700px,240px;background-position:center,left top}
.foot-base{position:relative}

/* --- keep every card legible over the new noise --- */
.card,.pkg,.stat-card,.panel,.quiz-box,.giveback,.form{background-color:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(2px)}
.dash{background-color:color-mix(in srgb,var(--bg-2) 88%,transparent);backdrop-filter:blur(3px)}
.trust{background-color:color-mix(in srgb,var(--bg-2) 90%,transparent);backdrop-filter:blur(2px)}

/* ============================================================
   v11 — READABILITY, CREDENTIALS, VS, FIRST 30, MOBILE
   ============================================================ */

/* --- text over texture: a soft scrim so nothing fights the wallpaper --- */
.hero-copy{position:relative}
.hero-copy::before{content:"";position:absolute;inset:-40px -60px -30px -48px;z-index:-1;
  background:var(--scrim-soft,rgba(247,244,236,.55));backdrop-filter:blur(6px) saturate(.85);
  -webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent 100%);mask-image:radial-gradient(closest-side,#000 45%,transparent 100%)}
.row-text,.pkg-head,.cred-head,.vs-head,.first-copy,.quiz-copy,.book-copy,.joe-copy,.coming-grid>div:first-child,.faq-grid>div:first-child{position:relative}
.row-text::before,.pkg-head::before,.cred-head::before,.vs-head::before,.first-copy::before,.quiz-copy::before,.book-copy::before,.joe-copy::before,.coming-grid>div:first-child::before,.faq-grid>div:first-child::before{
  content:"";position:absolute;inset:-26px -36px;z-index:-1;
  background:var(--scrim-soft,rgba(247,244,236,.5));backdrop-filter:blur(5px) saturate(.85);
  -webkit-mask-image:radial-gradient(closest-side,#000 48%,transparent 100%);mask-image:radial-gradient(closest-side,#000 48%,transparent 100%)}
.hero-copy>*,.row-text>*,.pkg-head>*,.cred-head>*,.vs-head>*,.first-copy>*,.quiz-copy>*,.book-copy>*,.joe-copy>*{position:relative}

/* --- contrast bump: body copy was too light over the new texture --- */
:root{--ink-2:var(--ink-2)}
.lede,.fine,p{color:var(--ink-body,var(--ink-2))}
.row-text p,.joe-copy p,.qa p,.cred-note,.pkg-blurb,.coming-list li span:last-child{color:var(--ink-body,var(--ink-2))}

/* --- CREDENTIALS ------------------------------------------------------- */
.cred{position:relative;overflow:hidden}
.cred::before{content:"";position:absolute;right:-8%;top:-14%;width:min(50vw,700px);aspect-ratio:1;pointer-events:none;
  background:url('/img/nodes.svg') no-repeat center/contain;opacity:.7}
.cred>.wrap{position:relative}
.cred-head{max-width:820px;margin-bottom:clamp(28px,4vw,48px)}
.cred-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden}
.cred-grid li{background:color-mix(in srgb,var(--bg) 94%,transparent);padding:24px;display:grid;gap:4px;align-content:start;position:relative;transition:background .3s}
.cred-grid li:hover{background:var(--bg)}
.cred-big{font-family:var(--mono);font-weight:500;font-size:clamp(2.2rem,4vw,3rem);line-height:1;letter-spacing:-.03em;color:var(--green-deep)}
.cred-small{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--ink)}
.cred-note{font-size:.92rem;margin-top:6px}
.cred-src{color:var(--accent);margin-top:8px;justify-self:start;border-bottom:1px solid currentColor;padding-bottom:1px}
.cred-foot{margin-top:20px}
@media (max-width:900px){.cred-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cred-grid{grid-template-columns:1fr}}
.certs{margin-top:24px;border:1px solid var(--line-strong);border-radius:var(--radius);padding:20px;background:color-mix(in srgb,var(--bg) 94%,transparent)}
.certs ul{list-style:none;margin:0;padding:0}
.certs li{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.certs li:last-child{border-bottom:0}
.certs strong{font-family:var(--display);font-weight:400;font-size:1.1rem}
.certs .mono{color:var(--ink-2)}

/* --- VS TABLE ---------------------------------------------------------- */
.vs{position:relative;overflow:hidden}
.vs::before{content:"";position:absolute;left:-6%;bottom:-16%;width:min(44vw,620px);aspect-ratio:1;pointer-events:none;
  background:url('/img/mark-wm.svg') no-repeat center/contain}
.vs>.wrap{position:relative}
.vs-head{max-width:820px;margin-bottom:clamp(24px,4vw,40px)}
.vstable{width:100%;border-collapse:separate;border-spacing:0}
@media (max-width:720px){.vstable td,.vstable th{padding:10px 10px;font-size:.87rem;line-height:1.35}}
.vstable thead th{padding:0 16px 12px;vertical-align:bottom}
.vstable .vs-mine{color:var(--green-deep)}
.vstable th[scope="row"]{text-align:left;font-family:var(--display);font-weight:400;font-size:1rem;color:var(--ink);padding:16px 16px 16px 0;border-bottom:1px solid var(--line);white-space:normal;letter-spacing:0;text-transform:none}
.vstable td{padding:16px;border-bottom:1px solid var(--line);vertical-align:top;font-size:.95rem}
.vs-them{color:var(--ink-3);text-align:left}
.vs-us{color:var(--ink);background:color-mix(in srgb,var(--green-mark) 40%,transparent);border-left:2px solid var(--green-deep);font-weight:500}
.vstable tbody tr:hover .vs-us{background:color-mix(in srgb,var(--green-mark) 70%,transparent)}
.vs-kicker{margin-top:22px;font-family:var(--display);font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:60ch;color:var(--ink)}
@media (max-width:720px){
  .vstable thead{display:none}
  .vstable,.vstable tbody,.vstable tr,.vstable th,.vstable td{display:block;width:100%}
  .vstable tr{border:1px solid var(--line-strong);border-radius:var(--radius);margin-bottom:14px;background:color-mix(in srgb,var(--bg) 94%,transparent);overflow:hidden}
  .vstable th[scope="row"]{padding:14px 16px 6px;border-bottom:0;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-2)}
  .vstable td{border-bottom:0;padding:8px 16px}
  .vs-them::before{content:"The usual: ";color:var(--ink-3);font-family:var(--mono);font-size:.78rem}
  .vs-us{margin:8px 0 0;border-left:0;border-top:1px solid var(--green-deep)}
  .vs-us::before{content:"Here: ";color:var(--green-deep);font-family:var(--mono);font-size:.78rem;font-weight:400}
}

/* --- FIRST 30 DAYS ----------------------------------------------------- */
.first30{position:relative;overflow:hidden}
.first30::before{content:"";position:absolute;inset:0;pointer-events:none;background:url('/img/plate.svg') repeat 0 0/260px 260px;opacity:.5}
.first30>.wrap{position:relative}
.first-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,80px);align-items:start}
@media (max-width:900px){.first-grid{grid-template-columns:1fr}}
.first-list{list-style:none;margin:0;padding:0;position:relative}
.first-list::before{content:"";position:absolute;left:calc(var(--w,86px) / 2);top:10px;bottom:10px;width:1px;
  background:linear-gradient(var(--red-ink),var(--amber),var(--green-deep))}
.first-list li{display:grid;grid-template-columns:var(--w,86px) 1fr;gap:6px 22px;padding:16px 0;position:relative}
.first-list li::before{content:"";position:absolute;left:calc(var(--w,86px) / 2 - 4px);top:24px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:2px solid var(--green-deep)}
.first-list .f-when{color:var(--ink-2);padding-top:18px}
.first-list strong{font-family:var(--display);font-weight:400;font-size:1.25rem;display:block;margin-bottom:3px}
.first-list li div span{color:var(--ink-body,var(--ink-2));font-size:.95rem}
.first-list li:last-child::before{background:var(--green-deep)}
@media (max-width:560px){.first-list{--w:64px}.first-list .f-when{font-size:.76rem}}

/* --- scarcity --- */
.scarcity{font-family:var(--display);font-size:1.05rem;color:var(--ink);border-left:2px solid var(--accent);padding-left:14px;margin-bottom:12px}

/* --- STICKY MOBILE CALL BAR — RETIRED 17 Sep 2026 ---------------------
   It was called "the biggest mobile conversion lever" and it may well have been, but it was
   also 56px of fixed furniture on the bottom of every screen of every page, carrying a second
   FREE SCAN that duplicated the header's. Joe counted four simultaneous calls to action on his
   phone's first screen; this was two of them. stickybar() in build.py now returns '' for every
   theme, so the rules below are dead — kept only so the class is documented as retired, with
   the body padding REMOVED, which is the part that was still costing every sub-page 56px. */
.stickybar{display:none}

/* --- MOBILE: let the text win over the wallpaper --------------------- */
@media (max-width:720px){
  body{background-size:auto,300px 300px,760px 760px}
  body::before{opacity:.6}
  .hero{background-size:1100px auto,1100px auto}
  .quiz::before,.packages::before,.coming::before,.joe::before,.joe::after,.faq::before,.also::before,.cred::before,.vs::before,.proof::before,.book::before,.first30::before{opacity:.35}
  .proof{background-size:640px auto}
  .card::after,.pkg::after,.stat-card::after,.quiz-box::after,.dash::after{display:none}
  section{padding-block:clamp(58px,11vw,84px)}
  .hero-copy::before,.row-text::before,.pkg-head::before,.cred-head::before,.vs-head::before,.first-copy::before,.quiz-copy::before,.book-copy::before,.joe-copy::before{inset:-16px -20px;background:var(--scrim-soft,rgba(247,244,236,.72));backdrop-filter:blur(7px)}
  .btn{min-height:48px}
  .qbtn{padding:20px 0}
  /* was .nav{display:none} — a second, LATER copy of the mobile nav hide, which silently beat
     the .nav-book rule 800 lines above it and left every sub-page with no visible way to the
     form. Hide the section links, keep the one that reaches #book. */
  .nav a:not(.nav-book){display:none}
  .kwbars li{grid-template-columns:1fr auto;row-gap:4px}
  .kwbars .bar{grid-column:1/3}
  .grid-num .t{font-size:19px}
}
/* fix: .label sets display:block which breaks table header cells */
.vstable thead th,.vstable thead td{display:table-cell;margin:0}
.vstable thead th{border-bottom:1px solid var(--line-strong)}

/* --- plain pages get the treatment too --- */
.page{position:relative;overflow:hidden}
.page::before{content:"";position:absolute;right:-8%;top:-12%;width:min(52vw,720px);aspect-ratio:1;pointer-events:none;
  background:url('/img/nodes.svg') no-repeat center/contain;opacity:.7}
.page::after{content:"";position:absolute;left:-8%;bottom:-14%;width:min(46vw,620px);aspect-ratio:1;pointer-events:none;
  background:url('/img/mark-wm.svg') no-repeat center/contain}
.page>.wrap{position:relative}
.page .narrow{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(4px);
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:clamp(24px,4vw,48px)}
.page h1{margin-bottom:.6em}
.page .lede{margin-bottom:1.2em}

/* ============================================================
   v12 — OWN THE AGENCY, SHORTER PAGE, MARK EVERYWHERE
   ============================================================ */

/* --- tighter vertical rhythm: the page was ~20 screens on a phone --- */
section{padding-block:clamp(40px,6vw,84px)}
.row{padding-top:clamp(28px,4vw,52px);margin-top:clamp(28px,4vw,52px)}
.hero{padding-top:clamp(28px,4vw,64px)}
.pkg-head,.cred-head,.vs-head{margin-bottom:clamp(20px,3vw,32px)}

/* --- the mark as a section eyebrow, everywhere --- */
.lbl-mk{display:flex;align-items:center;gap:9px}
.mk{width:13px;height:13px;flex:none;color:var(--accent)}
.lbl-mk .mk{transform:translateY(-1px)}

/* --- logo: bigger, and the wordmark reads stronger --- */
.logo svg{height:30px}
.logo-foot svg{height:38px}
@media (max-width:720px){.logo svg{height:30px}}
.head-row{height:60px}
@media (max-width:720px){.head-row{height:62px}}

/* --- watermarks: more visible --- */
.proof::before,.book::before,.joe::before,.vs::before,.page::after{opacity:.9;filter:none}

/* --- price teaser in the hero (price above the fold) --- */
.priceteaser{list-style:none;margin:26px 0 0;padding:0;display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.priceteaser li a{display:grid;gap:1px;padding:12px 16px;border:1px solid var(--line-strong);border-radius:var(--radius);
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(4px);transition:border-color .25s,transform .25s var(--ease)}
.priceteaser li a:hover{border-color:var(--accent);transform:translateY(-2px)}
.priceteaser b{font-size:1.5rem;font-weight:500;letter-spacing:-.02em;line-height:1;color:var(--green-deep)}
.priceteaser s{color:var(--ink-3);font-size:.78rem}
.priceteaser span{font-family:var(--display);text-transform:uppercase;letter-spacing:.13em;font-size:.62rem;color:var(--ink-2)}
.pt-note{flex:1 1 220px;display:flex;align-items:center}
.pt-note span{font-family:var(--body);text-transform:none;letter-spacing:0;font-size:.86rem;color:var(--ink-body,var(--ink-2));max-width:34ch}
@media (max-width:560px){.priceteaser li a{padding:10px 12px}.priceteaser b{font-size:1.25rem}}

/* --- merged before/after row --- */
.beforeafter{display:grid;gap:20px}

/* --- coming, inline in proof --- */
.coming-inline{margin-top:clamp(28px,4vw,48px);padding-top:22px;border-top:1px solid var(--line)}
.coming-inline .coming-list{border-top:1px solid var(--line);margin-top:12px}
.coming-inline .coming-list li{padding:14px 0}

/* --- also, inline in book --- */
.also-inline{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:18px}
.also-inline .label{grid-column:1/-1;margin:0}
.also-inline .also-item h3{font-size:1.15rem;margin-bottom:.25em}
.also-inline .also-item p{margin:0;font-size:.92rem}
@media (min-width:720px){.also-inline{grid-template-columns:1fr 1fr;gap:18px 32px}}

/* --- vs: logo in the column head --- */
.vs-logo{display:inline-flex;align-items:center;gap:8px}
.vs-logo .mk{width:12px;height:12px;color:var(--green-deep)}

/* --- sticky bar gets the mark --- */
@media (max-width:720px){
  .stickybar{grid-template-columns:auto 2fr 1fr}
  .sb-mk{display:flex;align-items:center;justify-content:center;background:var(--bg);padding:0 14px;color:var(--accent)}
  .sb-mk .mk{width:16px;height:16px}
}

/* ============================================================
   v12b — MOBILE LENGTH. Target: packages inside the first 12%,
   whole page under ~15 screens instead of 23.
   ============================================================ */
@media (max-width:720px){
  /* hero: keep the map + the one number that matters; the rest repeats later */
  .card-rank,.card-reviews,.card-kws{display:none}
  .dash-grid{grid-template-columns:1fr;gap:10px}
  .dash{padding:12px}
  .dash-label{padding:2px 4px 12px}
  .dash-note{font-size:.78rem;margin-top:10px}
  .hero-photo{max-width:210px}
  .hero-photo figcaption{font-size:.72rem}
  .hero-top{gap:20px}
  .hero-copy h1{font-size:clamp(1.9rem,8vw,2.5rem)}
  .lede{font-size:1rem}

  /* credentials: two up */
  .cred-grid{grid-template-columns:1fr 1fr}
  .cred-grid li{padding:16px 14px}
  .cred-big{font-size:1.9rem}
  .cred-small{font-size:.62rem;letter-spacing:.1em}
  .cred-note{font-size:.84rem}

  /* first 30 days: two up, compact */
  .first-list{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
  .first-list::before{display:none}
  .first-list li{grid-template-columns:1fr;padding:14px 0;gap:2px}
  .first-list li::before{display:none}
  .first-list .f-when{padding-top:0;color:var(--accent);font-size:.72rem}
  .first-list strong{font-size:1rem}
  .first-list li div span{font-size:.82rem}

  /* vs: tighter cards */
  .vstable tr{margin-bottom:10px}
  .vstable th[scope="row"]{padding:10px 14px 4px}
  .vstable td{padding:6px 14px;font-size:.88rem}

  /* proof: tighter */
  .row{padding-top:24px;margin-top:24px}
  .beforeafter{gap:14px}
  .pair{gap:10px}
  .kicker b{font-size:1.5rem}
  .interventions li{padding:12px 0}
  .interventions li strong{font-size:1rem}
  .interventions li div span{font-size:.85rem}
  .coming-inline .coming-list li{padding:11px 0}
  .coming-list strong{font-size:1.05rem}

  /* packages: tighter cards */
  .pkg{padding:18px}
  .pkg-price b{font-size:2.1rem}
  .pkg-blurb{font-size:1rem;margin:6px 0 2px}
  .pkg-points li{padding:7px 0;font-size:.88rem}
  .pkg-foot{margin-top:16px;gap:16px}

  /* quiz + faq + trust */
  .quiz-box{padding:4px 16px 16px}
  .qbtn strong{font-size:.98rem}
  .qsub{font-size:.82rem}
  .qa summary{padding:14px 0}
  .qa summary h3{font-size:1.05rem}
  .trust li{padding:14px 16px}
  .trust b{font-size:1.05rem}
  .trust span{font-size:.82rem}

  section{padding-block:clamp(32px,5vw,52px)}
  h2{font-size:clamp(1.5rem,6vw,2rem)}
  .stat-card{padding:16px}
  .also-inline{margin-top:20px}
}

/* v12c — mobile: proof and joe were 35% of the page between them */
@media (max-width:720px){
  .raw{display:none}                      /* raw exports: desktop only */
  .interventions li div span{display:none} /* keep the six titles, drop the paragraphs */
  .interventions li{padding:9px 0}
  .interventions{columns:1}
  .row-3 .row-text p{display:none}
  .joe-copy p:nth-of-type(4){display:none}
  .joe-copy .quote p{font-size:1rem}
  .joe-copy p{font-size:.95rem}
  .hero-photo{max-width:170px}
  .pkg-points li:nth-child(n+4){display:none}
  .priceteaser{margin-top:18px;gap:8px}
  .qa:nth-child(n+7){display:none}        /* 6 questions on a phone, 8 on desktop */
}

/* ============================================================
   v13 — READ IT IN THREE SECONDS
   Client, 10 Sep: "the pricing and info on it is too hard to
   understand and read and comprehend."
   Cause was not the words. It was ruled lines running behind body
   copy, prices set in a monospace that isolates the comma, the
   qualifier ("one time" / "per month") set smaller and greyer than
   everything around it, and bullets that lost their hang indent the
   moment they wrapped.
   ============================================================ */

/* --- 1. nothing patterned behind body copy. the grid stays on the
       dashboard cards, where it reads as instrumentation. --- */
.pkg,.giveback,.quiz-box,.stat-card,.form{background-image:none}

/* --- 2. the price: display face, not mono. mono gives every glyph the
       same advance width, which turns $1,000 into "$1 , 000". --- */
.pkg-name{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;
  color:var(--ink);font-weight:400;margin:0 0 10px}
.pkg-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.pkg-price b{font-family:var(--display);font-weight:400;font-variant-numeric:tabular-nums;
  font-size:clamp(2.4rem,4.2vw,3.4rem);letter-spacing:-.02em;line-height:1;color:var(--ink)}
.pkg-unit{font-family:var(--body);font-size:.95rem;color:var(--ink);letter-spacing:0;text-transform:none}
.pkg-was{font-size:.88rem;color:var(--ink-3);margin:0 0 12px}
.pkg-was s{color:inherit}

/* --- 3. bullets keep their hang indent when they wrap --- */
.pkg-points li,.giveback li{display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:start;color:var(--ink)}
.pkg-points li::before,.giveback li::before{content:"—";color:var(--accent);margin:0;line-height:1.55}
.pkg-blurb{color:var(--ink)}

/* --- 4. the one line that answers "so what do I actually pay" --- */
.pkg-plain{font-family:var(--display);font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.35;color:var(--ink);
  max-width:34ch;margin:0 0 clamp(22px,3vw,34px);padding-left:16px;border-left:3px solid var(--accent);text-wrap:pretty}

/* --- 5. them red, mine green. the comparison table was grey vs green,
       which reads as "neutral vs good" instead of "bad vs good". --- */
.vstable thead th.vs-theirs{color:var(--red-ink)}
.vstable thead th.vs-mine{color:var(--green-deep)}
.vs-them{color:var(--ink-body,var(--ink-2));background:color-mix(in srgb,var(--red-ink) 10%,transparent);
  border-left:2px solid var(--red-ink)}
.vstable tbody tr:hover .vs-them{background:color-mix(in srgb,var(--red-ink) 15%,transparent)}
.vs-us{color:var(--ink);background:color-mix(in srgb,var(--green-mark) 45%,transparent);
  border-left:2px solid var(--green-deep);font-weight:500}
.vstable tbody tr:hover .vs-us{background:color-mix(in srgb,var(--green-mark) 75%,transparent)}
@media (max-width:720px){
  .vs-them{border-left:0;border-top:1px solid var(--red-ink)}
  .vs-them::before{content:"The usual: ";color:var(--red-ink);font-family:var(--mono);font-size:.78rem}
  .vs-us::before{content:"Here: ";color:var(--green-deep)}
}

/* ============================================================
   v13b — THE PROBE. The map points now answer a finger.
   A soft ring follows the touch, the points nearest it lift, the
   ones just outside lift half as much. Falloff is what makes it
   feel physical instead of like a hover state bolted onto touch.
   ============================================================ */
.grid-num .pt{transition:transform .22s var(--ease),filter .22s var(--ease)}
.grid-num .pt.near{transform:scale(1.38)}
.grid-num .pt.near2{transform:scale(1.14)}
.grid-num .pt.near .d{filter:drop-shadow(0 0 6px currentColor)}
.grid-num .probe{fill:none;stroke:currentColor;color:var(--ink);stroke-width:1.6;stroke-dasharray:7 11;
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease),r .25s var(--ease)}
.grid-num .probe.on{opacity:.9;r:66}

.grid-num .probe-fill{fill:var(--ink);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.grid-num .probe-fill.on{opacity:.07}
@media (prefers-reduced-motion:reduce){.grid-num .pt{transition:none}.grid-num .probe,.grid-num .probe-fill{display:none}}

/* ============================================================
   v13c — THE SCAN BUTTON
   The before/after used to fire on its own when the card scrolled
   in, which meant the before state — the whole point — was gone
   before anyone read it. Now it waits. You press it.
   ============================================================ */
.scanbtn{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;margin:14px 0 4px;padding:17px 20px;border-radius:3px;cursor:pointer;
  border:1px solid var(--accent);background:var(--accent);color:#FFFFFF;text-align:left;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .16s var(--ease);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.scanbtn:hover{transform:translateY(-2px)}
.scanbtn:active{transform:translateY(1px)}
.scanbtn:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.sb-txt{display:grid;gap:3px;line-height:1.15;pointer-events:none}
.sb-txt i{font-style:normal;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.18em;font-size:.56rem;opacity:.85}
.sb-txt b{font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:.09em;font-size:1.05rem;line-height:1.1}
.sb-b{display:none}
.sb-arrow{flex:none;font-size:1.45rem;line-height:1;pointer-events:none;
  animation:sb-nudge 1.5s var(--ease) infinite}
@keyframes sb-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

.scanbtn[aria-pressed="true"]{
  background:var(--green);border-color:var(--green);color:#FFFFFF}
.scanbtn[aria-pressed="true"] .sb-a{display:none}
.scanbtn[aria-pressed="true"] .sb-b{display:grid}
.scanbtn[aria-pressed="true"] .sb-arrow{animation:none;transform:scaleX(-1)}

/* halo that matches the pill, not a circle — the invitation to press */
.sb-ring{position:absolute;inset:-1px;border-radius:3px;border:1px solid var(--accent);
  pointer-events:none;animation:sb-pulse 2.6s var(--ease) infinite}
@keyframes sb-pulse{0%{opacity:.65;transform:scale(1)}100%{opacity:0;transform:scale(1.045)}}
.scanbtn[aria-pressed="true"] .sb-ring{animation:none;opacity:0}

/* the line that says out loud what state you are looking at */
.scanhint{display:block;margin:12px 0 0;font-size:.86rem;color:var(--ink);opacity:.92}
.scanhint b{font-weight:600}
.sh-dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--accent);margin-right:9px;vertical-align:middle;
  animation:sh-blink 1.6s var(--ease) infinite}
@keyframes sh-blink{0%,100%{opacity:1}50%{opacity:.25}}
/* the hint sits BEFORE the button in the DOM, so a sibling combinator
   cannot reach it - match the card instead */
.card-map:has(.scanbtn[aria-pressed="true"]) .scanhint{display:none}

@media (prefers-reduced-motion:reduce){
  .sb-ring,.sb-arrow,.sh-dot{animation:none}
  .sb-ring{opacity:.45}
}
@media (max-width:720px){
  .scanbtn{padding:15px 16px;gap:12px}
  .sb-txt b{font-size:.95rem}
  .sb-arrow{font-size:1.3rem}
  .scanhint{font-size:.82rem}
}
.card-head{align-items:center}
.card-map .card-head{gap:16px;flex-wrap:nowrap;align-items:center}
.card-map .card-head .label{flex:1;min-width:0}
@media (prefers-reduced-motion:reduce){.sb-ring{animation:none;opacity:.4}}
@media (max-width:720px){
  .card-map .card-head{justify-content:space-between}
}

/* the expectation note — sits with the proof, not in the headline */
.expect{border-left:2px solid var(--accent);padding-left:14px;color:var(--ink);max-width:52ch;font-size:.98rem}

/* the hero price chips had the same monospace comma problem as the cards */
.priceteaser b{font-family:var(--display);font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.priceteaser s{font-family:var(--body)}

/* ============================================================
   v14 — DE-GENERIC
   Client: "feels a little ai still." Checked against his own ban
   list from the intake and three entries were still being broken:
   generic drop shadows, even feature-card grids, and a page where
   every section is assembled the same way.
   ============================================================ */

/* --- 1. no coloured glow. Glow on dark is the current generated-site
       signature — the same family as the purple gradient he rejected.
       The buy list says flat panels and hairline borders. --- */
.btn-primary,.hero .btn-primary,.book .btn-primary,.scanbtn,.dash,.pkg-featured,.hero-photo img{box-shadow:none}
.card .big:not(.dim){text-shadow:none}
.progress i{box-shadow:none}
.progress::after{box-shadow:none;width:6px;height:6px;margin-left:-3px}
.hero .grid-num[data-state="after"]{filter:none}
.grid-num .pt.near .d{filter:none;stroke:var(--ink);stroke-width:2}
.grid-num .pt.near2 .d{stroke:var(--ink);stroke-width:1;stroke-opacity:.45}
.hero::before,.hero::after{display:none}
body::before{background:radial-gradient(140% 120% at 50% 50%,transparent 60%,var(--vig,rgba(28,27,30,.10)) 100%)}

/* --- 2. corner brackets are a designer's accent, not a texture. One
       element gets them: the instrument. --- */
.card::after,.pkg::after,.stat-card::after,.quiz-box::after{display:none}

/* --- 3. section hierarchy. Eleven H2s at the same size is eleven
       sections of equal importance, which is nobody's real opinion. --- */
.proof h2,.book h2{font-size:clamp(2.1rem,4.6vw,3.7rem);letter-spacing:-.025em}
.cred h2,.first30 h2,.quiz h2,.faq h2,.vs h2{font-size:clamp(1.45rem,2.3vw,2.05rem)}
.packages h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}

/* --- 4. the comparison breaks the container. One deliberate break in a
       page of identical 1200px blocks reads as a decision. --- */
@media (min-width:1200px){.vs>.wrap{max-width:1460px}}

/* --- 5. CREDENTIALS: one number carries it, the rest is a list.
       Six identical boxes was the even feature grid off the ban list. --- */
.cred-h2{max-width:22ch;margin-bottom:clamp(24px,3vw,40px)}
.cred-split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.cred-split{grid-template-columns:1fr;gap:28px}}
.cred-feature{border-top:2px solid var(--accent);padding-top:14px}
.cred-huge{display:block;font-family:var(--display);font-weight:400;font-variant-numeric:tabular-nums;
  font-size:clamp(5.5rem,13vw,11rem);line-height:.82;letter-spacing:-.045em;color:var(--green-deep)}
.cred-feature .cred-small{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.15em;
  font-size:.76rem;color:var(--ink);margin-top:14px}
.cred-feature .cred-note{color:var(--ink-body,var(--ink-2));margin:10px 0 8px;max-width:34ch}
.cred-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.cred-list li{display:grid;grid-template-columns:minmax(84px,auto) 1fr;gap:6px 24px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--line)}
.cred-list .cred-big{font-family:var(--display);font-weight:400;font-variant-numeric:tabular-nums;
  font-size:clamp(1.7rem,3vw,2.3rem);line-height:1;letter-spacing:-.03em;color:var(--green-deep)}
.cred-list .cred-small{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;
  font-size:.7rem;color:var(--ink)}
.cred-list .cred-note{display:block;color:var(--ink-body,var(--ink-2));font-size:.92rem;margin-top:3px}
.cred-list .cred-src{margin-top:5px;display:inline-block}
.cred-foot{margin-top:26px;max-width:56ch}
@media (max-width:560px){
  .cred-list li{grid-template-columns:1fr;gap:2px;padding:14px 0}
  .cred-huge{font-size:clamp(4.5rem,26vw,7rem)}
}


/* ============================================================
   v15 — THE PACKAGE MATRIX
   Client: "more X's, very obvious and easy to read on what they
   get." Three separate cards could only ever show what you DO
   get. A matrix is the only shape that shows the absence.
   Columns are how people actually buy: the site, the map, both,
   or the free scan. Rows are ordered by what moves the map
   fastest, not by product category.
   ============================================================ */
.mx-note{margin:6px 0 18px;color:var(--ink-2);font-size:.95rem;max-width:60ch}
.mx-scroll{overflow-x:auto;border:1px solid var(--line);background:var(--bg)}
/* The featured column is the one to open at, and on a phone it starts off-screen.
   Without a label nobody discovers the sideways scroll -- same failure the scan
   button had. Desktop shows all three columns, so the hint is mobile-only. */
.mx-swipe{display:none}
@media (max-width:720px){
  .mx-swipe{display:flex;align-items:center;gap:8px;margin:0 0 10px;
    font-family:var(--mono,inherit);font-size:.78rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--accent)}
  .mx-swipe i{font-style:normal;animation:mxnudge 1.5s ease-in-out infinite}
}
@keyframes mxnudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.mx-swipe i{animation:none}}

.mx{border-collapse:separate;border-spacing:0;width:100%;min-width:780px}
.mx th,.mx td{text-align:left;vertical-align:middle}
.mx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.mx-lbl{position:sticky;left:0;z-index:3;background:var(--bg);
  border-right:1px solid var(--line);width:340px;min-width:260px;
  padding:12px 16px;font-size:.94rem;font-weight:400;color:var(--ink-body);
  font-family:var(--body);text-transform:none;letter-spacing:normal;line-height:1.45}
.mx-was{text-transform:none;letter-spacing:normal;font-family:var(--body)}
.mx-corner{font-family:var(--display)}
.mx thead .mx-lbl{z-index:5}
.mx-corner{background:var(--bg-2);border-bottom:1px solid var(--line);
  vertical-align:bottom;padding-bottom:16px;
  font-family:var(--display);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}

.mx-col{background:var(--bg-2);border-bottom:1px solid var(--line);
  border-left:1px solid var(--line);padding:20px 16px 18px;
  min-width:184px;vertical-align:top}
.mx-feat{box-shadow:inset 0 3px 0 var(--accent)}
/* the featured column reads as one vertical block, not 15 separate cells */
.mx tr>*:nth-child(4){border-left:1px solid var(--accent);border-right:1px solid var(--accent)}
.mx tbody tr>td:nth-child(4){background-color:color-mix(in srgb,var(--accent) 4%,transparent)}
.mx tbody tr.mx-row>td:nth-child(4).mx-y{
  background-color:color-mix(in srgb,var(--green-ink) 13%,transparent)}
.mx-badge{display:inline-block;margin-bottom:9px;padding:3px 8px;
  background:var(--accent);color:var(--accent-ink);white-space:nowrap;
  font-family:var(--display);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase}
.mx-name{display:block;font-family:var(--display);font-size:1rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.mx-price{display:block;font-family:var(--display);font-variant-numeric:tabular-nums;
  font-size:1.9rem;line-height:1;color:var(--ink);white-space:nowrap}
.mx-unit{display:block;margin-top:5px;font-size:.86rem;color:var(--ink)}
.mx-was{display:block;margin-top:5px;font-size:.8rem;color:var(--ink-3)}

.mx-band td{background:var(--bg-2);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:12px 16px}
.mx-band td.mx-lbl{position:sticky;left:0;z-index:3;background:var(--bg-2);
  border-right:1px solid var(--line)}
.mx-bn{display:block;font-family:var(--display);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink)}
.mx-bs{display:block;margin-top:3px;font-size:.82rem;color:var(--ink-3)}

.mx-row:not(:last-child) .mx-lbl,.mx-row:not(:last-child) .mx-cell{
  border-bottom:1px solid var(--line)}
.mx-cell{padding:13px 16px;text-align:center;
  font-family:var(--display);line-height:1}
.mx-cell span[aria-hidden]{font-size:1.5rem;font-weight:700;display:inline-block}
.mx-y{color:var(--green-ink);background:color-mix(in srgb,var(--green-ink) 9%,transparent)}
.mx-n{color:var(--red-ink);background:color-mix(in srgb,var(--red-ink) 9%,transparent)}

.mx-tally td{border-top:1px solid var(--line);background:var(--bg-2);padding:15px 16px}
.mx-tally .mx-lbl{position:sticky;left:0;z-index:3;background:var(--bg-2);
  border-right:1px solid var(--line);
  font-family:var(--display);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
.mx-t{display:block;font-family:var(--display);font-variant-numeric:tabular-nums;
  font-size:1.4rem;color:var(--red-ink);line-height:1.1;font-weight:400}
.mx-t.mx-none{color:var(--green-ink)}
.mx-tsub{display:block;margin-top:3px;font-size:.74rem;color:var(--ink-3);
  font-family:var(--body);letter-spacing:0;text-transform:none}

.mx-ctas td{background:var(--bg);border-top:1px solid var(--line);padding:16px}
.mx-ctas .mx-lbl{position:sticky;left:0;z-index:3;background:var(--bg);
  border-right:1px solid var(--line)}
.mx-cta .btn{width:100%;justify-content:center;text-align:center}

.mx-addon{margin:18px 0 0;padding:14px 16px;border:1px solid var(--line);
  border-left:2px solid var(--accent);color:var(--ink-body);font-size:.94rem;max-width:74ch}
.mx-addon .label{display:block;margin-bottom:5px}

@media (max-width:720px){
  .mx{min-width:640px}
  .mx-lbl{width:168px;min-width:168px;padding:12px 12px;font-size:.86rem;line-height:1.4}
  .mx-col{min-width:158px;padding:18px 12px 15px}
  .mx-price{font-size:1.55rem}
  .mx-name{font-size:.9rem}
  .mx-cell{padding:12px 12px}
  .mx-cell span[aria-hidden]{font-size:1.2rem}
}


/* ---- Cascade tail. These two exist because an EARLIER rule in this file set them for a
   layout that no longer exists (the stacked before/after). Equal specificity means the
   later rule wins, so the correction has to live here, at the bottom. ---- */
@media (max-width:720px){
  .pair .arrow,.kicker .arrow{transform:none}
  .kicker{flex-direction:column}
}


/* ============================================================
   v15 — CRO PASS (14 Sep 2026). Form + live map ARE the hero.
   ============================================================ */
.hero-v2{grid-template-columns:6fr 6fr;align-items:start;gap:clamp(28px,4vw,56px)}
@media (max-width:900px){.hero-v2{grid-template-columns:1fr}}
.hero-v2 .hero-copy h1{font-size:clamp(2rem,4.2vw,3.4rem);letter-spacing:-.015em;margin-bottom:.5em}
.hero-v2 .lede{max-width:none;margin-bottom:1.4rem}
.form-card{border-radius:var(--radius)}
.form-hero{background:var(--bg-2)}
.form-title{font-family:var(--display);font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.2;margin:0 0 14px;color:var(--ink)}
.gapform{border:0;background:transparent;padding:0;gap:12px}
.form-row{display:grid;gap:12px}
@media (min-width:480px){.form-row-2{grid-template-columns:1fr 1fr}}
.gapform input{font-size:16px;padding:13px 12px;min-height:48px}
.gapform input::placeholder{color:var(--ink-3,var(--ink-2));opacity:.7}
.btn-form{width:100%;min-height:52px;font-size:.84rem}
.form-fine{margin:2px 0 0;font-size:.82rem;max-width:none}
.form-msg:empty{display:none}
.form-msg{color:var(--accent)}
.hero-alt{margin-top:14px;max-width:none}
.hero-alt a{text-decoration:underline;text-underline-offset:3px}
.hero-map{padding:16px}
.hero-map .card-head{margin-bottom:6px}
.hero-map .card-set{color:var(--ink-2);font-size:.78rem;white-space:nowrap}
.hero-map .grid{width:100%;height:auto}
.cmp-hero{margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.cmp-hero .big{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.hero-map figcaption{display:grid;gap:8px;color:var(--ink-2);margin-top:6px}
.hero-map figcaption .fine{font-size:.78rem;max-width:none}
.hero-map figcaption .link-mono{display:inline}
.hero-chart:not(.after) .cmp-hero .big:not(.dim){color:var(--ink-3,var(--ink-2))}
.pc-term{font-size:.74rem;color:var(--ink-2);letter-spacing:0;text-transform:none}
.pkg-exit{margin:10px 0 14px;max-width:none}
.joe-photo{width:100%;max-width:260px;aspect-ratio:4/5;object-fit:cover;object-position:top;border-radius:var(--radius);border:1px solid var(--line);margin-bottom:14px}
.osteps-2{grid-template-columns:1fr!important;margin:22px 0}
.thanks-cta{margin:8px 0 18px}
@media (max-width:720px){
  .hero{padding-top:18px}
  .hero-v2 .hero-copy h1{font-size:clamp(1.65rem,6.4vw,2.2rem)}
  .hero-v2 .lede{margin-bottom:1rem}
  .hero-v2 .lede{font-size:1rem}
  .btn-head{padding:.7em .9em .6em;white-space:nowrap}
  .hero-map{padding:12px}
}
/* v15 fixes after first render: .card-map carries dash-grid placement rules; the hero grid must override them */
.hero-v2 .hero-copy{grid-column:1;grid-row:1}
.hero-v2 .hero-map{grid-column:2;grid-row:1}
@media (max-width:900px){.hero-v2 .hero-copy{grid-column:1;grid-row:1}.hero-v2 .hero-map{grid-column:1;grid-row:2}}
.hero-map .card-head{flex-wrap:wrap;gap:6px 16px;align-items:baseline}
.hero-map .card-head .label{flex:1 1 220px}
.hero-v2 .hero-copy h1{font-size:clamp(1.8rem,2.7vw,2.55rem)}
.hero-v2 .lede{font-size:clamp(1rem,1.2vw,1.12rem);margin-bottom:1.1rem}
.form-hero{padding:clamp(16px,2vw,22px)}
.form-hero .form-title{margin-bottom:10px}
.form-hero .label{margin-bottom:8px}
@media (min-width:901px){.hero{padding-top:clamp(28px,4vw,52px)}}
@media (max-width:720px){.hero-v2 .hero-copy h1{font-size:clamp(1.65rem,6.4vw,2.2rem)}}
@media (max-width:900px){.book-grid:has(.form){grid-template-columns:1fr;gap:28px}}
@media (max-width:900px){.joe-grid{grid-template-columns:1fr;gap:22px}.joe-side{border-left:0;padding-left:0;display:grid;grid-template-columns:120px 1fr;gap:4px 16px;align-items:start}.joe-side .joe-photo{grid-row:1/5;max-width:120px;margin:0}.joe-side .label{margin-bottom:2px}}

/* ============================================================
   v16 — TRUST, INFORMATION, AND A PHONE THAT IS PLEASANT
   Client, 14 Sep 2026: "more converting and trustworthy and
   informative. The pricing is shoved too far down. Need to be
   fully optimized for mobile pleasure."
   ============================================================ */

/* --- 1. The client bar. Three real businesses, named, with the
       family relationship disclosed in the same block. --- */
.cl-head{max-width:60ch;margin-bottom:clamp(18px,2.5vw,28px)}
.cl-head h2{font-size:clamp(1.5rem,2.8vw,2.2rem);margin:.35rem 0 0}
.cl-list{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media (min-width:760px){.cl-list{grid-template-columns:repeat(3,1fr)}}
.cl-list li{background:var(--bg);padding:clamp(16px,2vw,22px);display:grid;gap:5px;align-content:start}
.cl-list strong{font-family:var(--display);font-weight:400;font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.15}
.cl-trade{font-size:.78rem;color:var(--ink-2);letter-spacing:.06em}
.cl-note{font-size:.9rem;line-height:1.45;color:var(--ink-body,var(--ink-2))}
.cl-foot{margin:16px 0 0;max-width:70ch;border-left:2px solid var(--accent);padding-left:14px;
  font-size:.95rem;line-height:1.5;color:var(--ink-body,var(--ink-2))}

/* --- 2. The before/after pair stacked on a phone. It was three
       columns squeezed into 390px: two ~90px grids either side of
       the kicker, with five-line mono captions. The proof is the
       whole argument; it gets the full width. --- */
@media (max-width:720px){
  .pair{grid-template-columns:1fr;gap:14px}
  .pair .panel{padding:14px}
  .pair .grid{width:100%;height:auto}
  .kicker{flex-direction:row;display:flex;align-items:baseline;justify-content:center;gap:10px;
    padding:2px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .kicker b{font-size:1.6rem}
  .kicker .label{margin:0;font-size:.68rem}
  .kicker .arrow{display:none}
  .panel figcaption{gap:2px}
  .panel figcaption .mono{font-size:.74rem}
  .panel figcaption .solv{font-size:.86rem;margin-top:6px}
}

/* --- 3. Five buying steps in two columns leaves a dead cell.
       The last one spans the row instead. --- */
@media (min-width:370px) and (max-width:759px){
  .ostep:last-child{grid-column:1/-1}
}

/* --- 4. The trust strip stays two-up instead of four stacked rows.
       Four full-width rows cost most of a phone screen for 12 words. --- */
@media (max-width:480px){
  .trust{grid-template-columns:1fr 1fr}
  .trust li{border-right:1px solid var(--line);padding:14px 15px}
  .trust li:nth-child(2n){border-right:0}
  .trust li:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .trust b{font-size:1rem}
  .trust span{font-size:.8rem}
}

/* --- 5. Price cards: less air, so three tiers are two thumb-flicks
       apart instead of three full screens. --- */
@media (max-width:720px){
  .pc{padding:18px 16px;gap:5px}
  .pc-price{font-size:2.4rem}
  .pc-blurb{margin-top:6px;font-size:.92rem}
  .pc-list{gap:6px}
  .pc-list li{font-size:.88rem}
  .pkg-plain{font-size:.95rem}
}

/* --- 6. The 30-day schedule: the date rail is dead weight at 390px. --- */
@media (max-width:560px){
  .first-list{--w:58px}
  .first-list li{padding:12px 0;gap:4px 14px}
  .first-list .f-when{font-size:.72rem;padding-top:15px}
  .first-list strong{font-size:1.08rem}
  .first-list li div span{font-size:.9rem}
}

/* --- 7. Section rhythm on a phone. The page was 13.8 screens. --- */
@media (max-width:720px){
  section{padding-block:clamp(36px,6.5vw,52px)}
  .sec-head{margin-bottom:16px}
  h2{font-size:clamp(1.45rem,6vw,1.9rem)}
  .lede{font-size:1rem}
  .clients .cl-head h2{font-size:1.45rem}
}

/* --- v16.1: measured, not guessed. At 390px the sections came in at
   hero 1929 / trust 235 / clients 676 / proof 2119 / packages 2126, which
   put the price 4,959px down. Client bar moved below the price; the proof
   grids are capped so the section stops eating a screen and a half. --- */
@media (max-width:720px){
  .pair .panel .grid{max-width:268px;margin-inline:auto}
  .row-cta{gap:16px}
  .stat-card{padding:16px}
  .stat-card p{font-size:.88rem}
  .proof-more .lede{margin-bottom:14px;font-size:.95rem}
  .book-copy .fine:last-of-type{display:none}   /* the US/AI-training line is repeated in the footer */
  .book-btns{margin-bottom:4px}
  .btn-big{padding:14px 18px;margin:6px 0 12px}
  .btn-big .phone{font-size:1.35rem}
  .sms-copy{display:none}                        /* the button label already says what it does */
}

/* --- v16.2 ---------------------------------------------------------------
   Measured at 390px: .first-list was being forced to two 168px columns
   (base.css:979), so each of the six steps got a 168px-wide box and wrapped
   to 249px tall. One column is both shorter and readable. The --w timeline
   rail stays off on mobile; the day label becomes an accent eyebrow instead.
   Also restores two things mobile was hiding that the client asked for more
   of: the raw map exports, and the last two FAQ answers -- one of which
   ("Can you guarantee page one? No, and nobody honest can.") is the most
   trust-building sentence on the page. Both are collapsed, so they cost
   ~60px each and buy real credibility.
   ------------------------------------------------------------------------ */
@media (max-width:720px){
  .first-list{grid-template-columns:1fr;gap:0}
  .first-list li{grid-template-columns:1fr;padding:13px 0;gap:3px;border-bottom:1px solid var(--line)}
  .first-list li:last-child{border-bottom:0}
  .first-list .f-when{color:var(--accent);font-size:.7rem;letter-spacing:.14em;padding-top:0}
  .first-list strong{font-size:1.05rem;margin-bottom:2px}
  .first-list li div span{font-size:.89rem;line-height:1.45}

  .raw{display:block}                       /* was hidden on mobile; it is a <details>, it costs nothing closed */
  .raw .pair{grid-template-columns:1fr}
  .raw summary{padding:10px 0}
  .qa:nth-child(n+7){display:block}         /* all eight questions on a phone, not six */

  .first-copy .lede{margin-bottom:14px}
  .osteps{gap:1px}
  .ostep{padding:13px 14px;gap:6px}
  .ostep strong{font-size:.98rem;margin-bottom:4px}
  .ostep span{font-size:.86rem;line-height:1.4}
  .offer-quote{font-size:.98rem}
  .offer-no{font-size:.84rem}

  .pkg-foot-lean{gap:12px}
  .scarcity{font-size:.9rem}
  .pkg-exit{font-size:.85rem;margin:8px 0 12px}
  .pc-badge{font-size:.6rem;padding:4px 8px}

  .hero-map figcaption .fine{font-size:.76rem;line-height:1.4}
  .form-fine{font-size:.78rem}
  .hero-alt{margin-top:10px;font-size:.85rem}
}

/* v16.3 — the client bar is three facts, not three cards, on a phone */
@media (max-width:720px){
  .clients .cl-head{margin-bottom:14px}
  .cl-list li{padding:13px 15px;gap:3px}
  .cl-list strong{font-size:1.02rem}
  .cl-trade{font-size:.72rem}
  .cl-note{font-size:.86rem;line-height:1.4}
  .cl-foot{font-size:.87rem;margin-top:13px;padding-left:12px}
}

/* v16.4 — every tappable thing clears 44px on a phone (thumb, work glove, truck cab) */
@media (max-width:720px){
  summary,.raw summary{min-height:44px;display:flex;align-items:center}
  .qa summary{min-height:48px}
}

/* ============================================================
   v17 — SPACE. Client, 14 Sep: "more pleasing to the eye. Not
   enough space." v16 shortened the page by compressing it, which
   is the wrong lever — it made a long page into a cramped long
   page. The length now comes out of CONTENT (the hero form is
   gone, and two process sections merged into one) and the space
   that buys goes back into what is left.
   ============================================================ */

/* --- 1. Hero without the form: one claim, one proof, room to breathe --- */
.hero-v2{align-items:center;gap:clamp(32px,5vw,72px)}
.hero-v2 .hero-copy h1{font-size:clamp(2.1rem,3.4vw,3.3rem);line-height:1.04;margin-bottom:.55em}
.hero-v2 .lede{font-size:clamp(1.05rem,1.35vw,1.22rem);line-height:1.6;max-width:46ch;margin-bottom:1.9rem}
.hero-go{min-width:16rem}
.hero-v2 .hero-cta{margin-top:0;gap:14px}
.hero-alt{margin-top:20px}
.hero-map{padding:clamp(16px,1.6vw,22px)}

/* --- 2. Undo the v16 squeeze. Every one of these was me buying
       pixels at the cost of comfort. --- */
@media (max-width:720px){
  section{padding-block:clamp(48px,9vw,68px)}
  h2{font-size:clamp(1.6rem,6.6vw,2.1rem)}
  .lede{font-size:1.04rem;line-height:1.6}
  .sec-head{margin-bottom:22px}

  .hero{padding-top:26px}
  .hero-v2 .hero-copy h1{font-size:clamp(1.95rem,7.4vw,2.45rem)}
  .hero-v2 .lede{font-size:1.02rem;margin-bottom:1.5rem}
  .hero-go{width:100%}
  .hero-v2 .hero-cta{flex-direction:column;align-items:stretch;gap:10px}
  .hero-v2 .hero-cta .btn{width:100%}

  .pc{padding:22px 20px;gap:7px}
  .pc-blurb{margin-top:10px;font-size:.96rem;line-height:1.5}
  .pc-list{gap:10px;margin-top:10px}
  .pc-list li{font-size:.93rem;line-height:1.5}
  .pkg-plain{font-size:1rem;line-height:1.6}
  .pkg-exit{font-size:.9rem;margin:14px 0 16px}
  .scarcity{font-size:.95rem;line-height:1.55}

  .ostep{padding:18px 17px;gap:8px}
  .ostep strong{font-size:1.04rem;margin-bottom:6px}
  .ostep span{font-size:.92rem;line-height:1.5}

  .first-list li{padding:17px 0;gap:4px}
  .first-list strong{font-size:1.1rem}
  .first-list li div span{font-size:.93rem;line-height:1.5}

  .trust li{padding:17px 16px}
  .trust b{font-size:1.05rem}
  .trust span{font-size:.83rem;line-height:1.4}

  .panel figcaption .mono{font-size:.78rem}
  .hero-map figcaption .fine{font-size:.8rem;line-height:1.5}
  .form-fine{font-size:.82rem;line-height:1.5}
  .qa summary{min-height:54px}
  .qa p{font-size:.95rem;line-height:1.6}
}

/* --- 3. Client cards: the rating is the headline fact. --- */
.cl-list li{gap:7px;padding:clamp(20px,2.2vw,26px)}
.cl-name{font-family:var(--display);font-weight:400;font-size:clamp(1.15rem,1.6vw,1.32rem);
  line-height:1.15;color:var(--ink);display:inline-flex;align-items:baseline;gap:6px}
a.cl-name:hover{text-decoration:underline}
.cl-name i{font-style:normal;font-size:.72em;color:var(--ink-2)}
.cl-rating{font-family:var(--display);font-weight:400;font-size:1.28rem;color:var(--green-deep,var(--green-ink));
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin-top:2px}
.cl-note{font-size:.92rem;line-height:1.5;color:var(--ink-body,var(--ink-2))}
.cl-foot{margin:18px 0 0;max-width:78ch;border-left:0;padding-left:0;
  font-size:.82rem;line-height:1.55;color:var(--ink-2);opacity:.85}
@media (max-width:720px){
  .clients .cl-head{margin-bottom:18px}
  .cl-list li{padding:18px 17px;gap:5px}
  .cl-name{font-size:1.1rem}
  .cl-rating{font-size:1.2rem}
  .cl-note{font-size:.9rem}
  .cl-foot{font-size:.79rem;margin-top:15px}
}

/* v17.1 — proof CTA block lost its duplicate stat card; it is one column now */
.row-cta-lean{grid-template-columns:1fr!important}
.offer-more{margin:14px 0 0}
@media (min-width:900px){.row-cta-lean .proof-more{max-width:62ch}}


/* ============================================================ /intake (17 Sep 2026)
   Reuses the site's own type/colour language rather than a second design system:
   .label / .lede / .page-head from base.css, .form-card / .form-row / .btn-primary
   for text inputs, and a new radio/checkbox pattern built on the SAME circle-check
   shape as .chk (the quiz section) so a page that is 90% form still reads as this
   site, not a generic form builder. */
.isec{border-top:1px solid var(--line);padding:clamp(30px,4.5vw,52px) 0}
.isec:first-child{border-top:0;padding-top:clamp(10px,2vw,18px)}
.isec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.isec-n{font-family:var(--mono);color:var(--accent);font-size:.95rem;flex:none;padding-top:.15em}
.isec-head h2{margin:0;font-size:clamp(1.25rem,2vw,1.55rem)}
.isec-hint{color:var(--ink-2);font-size:.94rem;max-width:62ch;margin:.5rem 0 1.6rem 0}
.isec-note{border:1px solid var(--line);background:var(--bg-2);padding:14px 16px;font-size:.9rem;
  color:var(--ink-2);margin:0 0 1.6rem;max-width:62ch}

.ifields{display:grid;gap:22px}
.ifield{display:grid;gap:6px}
.ifield label{font-weight:500;font-size:1rem;color:var(--ink)}
.ifield .isub{display:block;font-weight:400;color:var(--ink-2);font-size:.86rem;margin-top:1px}
.ifield input[type=text],.ifield input[type=tel],.ifield input[type=email],.ifield textarea{
  font:inherit;font-size:1rem;color:var(--ink);background:var(--bg);
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:12px 13px;width:100%}
.ifield textarea{min-height:88px;resize:vertical;line-height:1.5;font-family:var(--body)}
.ifield input:focus,.ifield textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.igrid2{display:grid;gap:22px}
@media(min-width:640px){.igrid2{grid-template-columns:1fr 1fr}}

/* pick / checks — the .chk circle from the quiz section, reused for real form controls */
.ipicks{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.ipick{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;
  background:var(--bg);padding:15px 16px;cursor:pointer;position:relative}
.ipick:hover{background:var(--bg-2)}
.ipick input{position:absolute;opacity:0;width:1px;height:1px}
.ipick .imark{width:22px;height:22px;border:2px solid var(--line-strong);margin-top:1px;position:relative;
  transition:background .2s,border-color .2s,transform .2s var(--ease);flex:none}
.ipick input[type=radio]+.imark{border-radius:50%}
.ipick input[type=checkbox]+.imark{border-radius:4px}
.ipick .imark::after{content:"";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--accent-ink);font-size:13px;line-height:1;opacity:0;transition:opacity .15s}
.ipick input[type=checkbox]+.imark::after{content:"\2713"}
.ipick input:checked+.imark{border-color:var(--accent);background:var(--accent)}
.ipick input:checked+.imark::after{opacity:1}
.ipick input[type=radio]:checked+.imark{background:var(--bg)}
.ipick input[type=radio]:checked+.imark::after{content:"";inset:5px;border-radius:50%;background:var(--accent);opacity:1}
.ipick input:focus-visible+.imark{outline:2px solid var(--accent);outline-offset:2px}
.ipick span{display:block;font-size:.98rem;line-height:1.4;padding-top:1px}
.ipick i{display:block;font-style:normal;color:var(--ink-2);font-size:.85rem;margin-top:2px}

.isend{margin-top:8px;padding:22px;border:1px solid var(--line);background:var(--bg-2);border-radius:var(--radius)}
.itexttap{display:inline-flex;width:100%;margin:2px 0 4px}

/* trade picker (/intake). Checkboxes since 29 Sep 2026: tick every trade you do and each one opens; its service list, its own
   extra question and its photo brief in section 08 all appear. Pure CSS -- the per-trade
   reveal rules are generated by build.py trade_css() from data/site.py TRADES. */
.tgroup{background:var(--bg)}
.tradio{position:absolute;opacity:0;width:1px;height:1px}
.tgroup>input:checked+label{background:var(--bg-2)}
.tgroup>input:checked+label .imark{border-color:var(--accent);background:var(--accent)}
.tgroup>input:checked+label .imark::after{content:"\2713";opacity:1}
.tgroup>input:focus-visible+label .imark{outline:2px solid var(--accent);outline-offset:2px}
.tgroup>input:checked~.tpanel{display:block}
.tghead{background:var(--bg-2);font-family:var(--mono);font-size:.7rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--ink-2);padding:11px 16px}
.itrades label.tradelab{grid-template-columns:22px 1fr;gap:13px;padding:13px 16px;font-weight:500;background:var(--bg)}
.itrades label.tradelab .imark{border-radius:4px;width:20px;height:20px}
.tpanel{display:none;background:var(--bg-2);border-top:1px solid var(--line);padding:4px 16px 16px 51px}
.tpicks{display:grid;gap:2px}
.tpicks .ipick{background:transparent;padding:9px 0;grid-template-columns:21px 1fr;gap:11px}
.tpicks .ipick:hover{background:transparent}
.tpicks .ipick .imark{width:19px;height:19px}
.tpanel .ifield{padding-top:12px}
.task{margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.pnote{display:none}
@media(max-width:480px){.tpanel{padding-left:20px}}

@media(min-width:480px){.itexttap{width:auto}}
.isend .btn-form{width:100%}
@media(min-width:640px){.isend .btn-form{width:auto;min-width:300px}}

/* 8 Oct 2026 — /intake-hyatt plan + agreement block (CSP blocks inline <style>) */
.hy h2{margin:34px 0 10px}.hy h2:first-child{margin-top:0}.hy ul,.hy ol{padding-left:1.2em;margin:0 0 8px}.hy li{margin:0 0 8px;line-height:1.5}.hy p{margin:0 0 12px;line-height:1.55}.hy-t{border-collapse:collapse;width:100%;margin:4px 0 16px}.hy-t td{padding:9px 0;border-bottom:1px solid rgba(0,0,0,.12)}.hy-t td+td{text-align:right;font-weight:600;white-space:nowrap;padding-left:12px}.hy-ag{font-size:.9rem;border:1px solid rgba(0,0,0,.14);border-radius:18px;padding:18px 20px 8px}.hy-ag li{margin-bottom:10px}

/* 20 Oct 2026: one plan on /pricing, and the footer's NAP + Kansas City area column */
.pcards-one{grid-template-columns:1fr!important;max-width:760px}
@media (min-width:721px){.foot-grid{grid-template-columns:5fr 3fr 3fr 3fr}}
.foot-addr{font-style:normal;font-size:.88rem;line-height:1.5;color:var(--ink-2);margin-top:4px}
.area-also{margin-top:1.6rem}

/* ============================================================================
   INSTRUMENT — dark-anchored Paper.
   The page ground stays the brand light #F0ECE1. Four blocks flip to the brand
   dark ground #191A1E: the header, the hero (+trust rail), the proof, the
   comparison table, the booking block and the footer.
   Everything else is contrast discipline: fewer wallpapers, harder hairlines,
   one live instrument in the hero.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. tokens */
:root{
  --bg:#F0ECE1;--bg-2:#F6F3EA;
  --line:rgba(28,27,30,.14);--line-strong:rgba(28,27,30,.30);
  --ink:#1C1B1E;--ink-2:#6E6A77;--ink-3:#A9A6AE;--ink-body:#413E49;
  --accent:#AC1330;--accent-hover:#93102A;--accent-ink:#FFFFFF;
  --green:#2E8B3A;--amber:#8FBF45;--red:#C7434F;
  --green-ink:#237A31;--green-deep:#1E6B2B;--red-ink:#B8232F;
  --green-mark:#BFE8B5;--green-glow:transparent;--red-glow:transparent;
  --amber-before:#D9646E;
  --scrim:rgba(246,243,234,.93);--scrim-soft:rgba(246,243,234,.62);
  --map-filter:none;--vig:rgba(28,27,30,.09);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.18 0 0 0 0 0.12 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fx:on;
}

/* ------------------------------------------- 2. clear the mud on light blocks
   Six half-opacity beige wallpapers stacked on a beige ground read as haze, not
   as technology. Contrast is what reads expensive. Cut the stack, keep two. */
body{background-image:var(--grain),url('/img/topo.svg');background-size:auto,1100px 1100px;background-position:0 0,center top}
body::before{opacity:.75}
.also::before,.first30::before{opacity:.25}
.packages::before,.faq::before,.cred::before,.coming::before{opacity:.5}
.joe::after{opacity:.5}
section{background-color:transparent}
section:nth-of-type(even){background-color:transparent}
.quiz{background-color:transparent}
section.cred,section.first30,section.quiz{background-color:color-mix(in srgb,#FFFFFF 26%,transparent)}

/* ============================================================================
   3. THE DARK BLOCKS
   A local token swap. Every component inside inherits it — nothing is restyled
   twice, which is why this stays maintainable.
   ============================================================================ */
header.site-head,section.hero,section.proof,section.vs,section.book,footer.site-foot{
  --bg:#191A1E;--bg-2:#101114;
  --line:rgba(239,237,233,.11);--line-strong:rgba(239,237,233,.26);
  --ink:#EFEDE9;--ink-2:#9C99A4;--ink-3:#66636E;--ink-body:#C2BFC8;
  --accent:#C2163A;--accent-hover:#D9204A;--accent-ink:#FFFFFF;
  --green-ink:#63C671;--green-deep:#7BD489;--red-ink:#E6394F;
  --green-mark:rgba(99,198,113,.20);--amber:#8FBF45;--amber-before:#B0404E;
  --green-glow:transparent;--red-glow:transparent;
  --scrim:rgba(16,17,20,.88);--scrim-soft:rgba(16,17,20,.55);
  --map-filter:none;
  background-color:var(--bg);color:var(--ink);
}

/* a fine engineering grid, drawn in CSS so it reads correctly on dark */
section.hero,section.proof,section.vs,section.book,footer.site-foot{
  background-image:
    linear-gradient(rgba(239,237,233,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(239,237,233,.045) 1px,transparent 1px);
  background-size:46px 46px,46px 46px;
  background-position:center top,center top;
  background-attachment:scroll;
}
/* the beige SVG wallpapers are invisible on dark — turn them off, don't fight them */
.proof::before,.book::before,.vs::before{opacity:.10;filter:invert(1)}
section.proof{background-image:linear-gradient(rgba(239,237,233,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(239,237,233,.045) 1px,transparent 1px)}

/* header: brand rail on top, glowing scan progress on the bottom */
.site-head{background-image:none;box-shadow:inset 0 2px 0 var(--accent);backdrop-filter:blur(14px)}
.site-head{background-color:rgba(25,26,30,.92)}
.progress{height:3px;bottom:-1px}
.progress i{box-shadow:0 0 14px rgba(99,198,113,.55)}
.progress::after{content:"";position:absolute;left:var(--p,0%);top:50%;width:7px;height:7px;margin-left:-3.5px;
  transform:translateY(-50%);border-radius:50%;background:#7BD489;box-shadow:0 0 12px #63C671,0 0 3px #fff;opacity:var(--po,0);transition:opacity .3s}

/* the panels, cards and plates inside dark blocks */
.hero .card,.proof .panel,.vs .vstable tr,.book .form{background-color:#101114;backdrop-filter:none}
.hero .card,.proof .panel{--gl:rgba(239,237,233,.05)}
.hero .dash{background-color:rgba(16,17,20,.72);outline-color:rgba(239,237,233,.14)}
.hero .dash::before{opacity:.45}
.hero-copy::before,.book-copy::before,.row-text::before{background:transparent;backdrop-filter:none}
.hero-photo img{border-color:rgba(239,237,233,.18);box-shadow:0 30px 70px -30px #000}
.trust{background-color:#101114;border-color:rgba(239,237,233,.14);backdrop-filter:none;
  --line:rgba(239,237,233,.11);--ink:#EFEDE9;--ink-2:#94919A;color:#EFEDE9}
.trust b{color:#7BD489}
.trust span{color:#94919A}
.trust li{border-color:rgba(239,237,233,.11)}
.trust li:nth-child(-n+2){border-bottom-color:rgba(239,237,233,.11)}

/* the real Local Falcon exports stay on a light plate — a print pinned to the
   board. Never invert a map: the rank colours are the data. */
.proof .panel-big{background-color:#F2EEE4;border-color:rgba(239,237,233,.20)}
.proof .panel-big figcaption{color:#5D5966}
.proof .panel-big figcaption .solv{color:#1C1B1E}
.proof .panel-big img{border:1px solid rgba(28,27,30,.10)}

/* punch words carry more weight on dark */
.hero mark.hi,.proof mark.hi,.book mark.hi,.vs mark.hi{background:none;color:#8FE29C}
.hero h1 mark.hi,.proof h2 mark.hi,.book h2 mark.hi{background:linear-gradient(transparent 62%,rgba(99,198,113,.34) 62%,rgba(99,198,113,.34) 92%,transparent 92%);color:#93E7A0;padding:0 .06em}
.hero s.lo,.proof s.lo,.book s.lo{color:#EF5568}
.hero .punch,.proof .punch,.book .punch{color:#FFFFFF}
.hero h1 .punch,.proof h2 .punch,.book h2 .punch{text-decoration-color:#E6394F}

/* dark-block detail */
.vs .vs-us{background:rgba(99,198,113,.13);border-left-color:#63C671;color:#EFEDE9}
.vs .vstable tbody tr:hover .vs-us{background:rgba(99,198,113,.22)}
.vs .vs-them{color:#7E7A88}
.book .btn:not(.btn-primary){border-color:rgba(239,237,233,.30)}
.book .btn:not(.btn-primary):hover{border-color:#EFEDE9}
.site-foot{background-image:linear-gradient(rgba(239,237,233,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(239,237,233,.03) 1px,transparent 1px);background-size:46px 46px,46px 46px}
.egg{opacity:.30}
.egg:hover{opacity:1}
.hero .label,.proof .label,.vs .label,.book .label{color:#94919A}
.hero .lede,.proof .lede,.book .lede{color:#C4C1CA}

/* ============================================================================
   4. THE INSTRUMENT — the hero map card becomes a live scanner.
   Radar rings + a rotating sweep + a pulsing live light. All GPU compositing,
   no layout, ~0 bytes of JS. This is the "techy" the brief asked for and it is
   the one thing on the page that is still moving when you stop scrolling.
   ============================================================================ */
.hero .card-map{
  background-image:
    repeating-radial-gradient(circle at 50% 54%,transparent 0 48px,rgba(239,237,233,.075) 48px 49px),
    linear-gradient(rgba(239,237,233,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(239,237,233,.045) 1px,transparent 1px);
  background-size:auto,26px 26px,26px 26px;
  overflow:hidden;
}
.hero .card-map::before{
  content:"";position:absolute;left:50%;top:54%;width:min(150%,600px);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;z-index:0;
  background:conic-gradient(from 0deg,rgba(99,198,113,.26),rgba(99,198,113,.07) 14%,rgba(99,198,113,0) 30%);
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,rgba(0,0,0,.5) 62%,transparent 80%);
  mask-image:radial-gradient(closest-side,#000 30%,rgba(0,0,0,.5) 62%,transparent 80%);
  animation:yss-sweep 6s linear infinite;
}
@keyframes yss-sweep{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hero .card-map::after{inset:6px;z-index:2}
.hero .card-map>*{position:relative;z-index:1}
/* before the flip the sweep hunts in red; after, it confirms in green */
.hero-chart:not(.after) .card-map::before{background:conic-gradient(from 0deg,rgba(232,85,106,.24),rgba(232,85,106,.06) 14%,rgba(232,85,106,0) 30%)}

/* the dots get a little light behind them once they turn */
.hero .grid-num[data-state="after"]{filter:drop-shadow(0 0 7px rgba(99,198,113,.30))}
.hero .grid-num .d{transition:fill .5s var(--ease),r .4s var(--ease);transition-delay:calc(var(--i) * 16ms)}

/* live light on the scan settings readout */
.hero .dash-label .mono::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#63C671;margin-right:9px;vertical-align:middle;animation:yss-blip 2.4s ease-out infinite;
  transition:background .5s var(--ease)}
.hero-chart:not(.after) .dash-label .mono::before{background:#E6394F;animation-name:yss-blip-red}
@keyframes yss-blip{
  0%{box-shadow:0 0 0 0 rgba(99,198,113,.55)}
  70%{box-shadow:0 0 0 9px rgba(99,198,113,0)}
  100%{box-shadow:0 0 0 0 rgba(99,198,113,0)}}
@keyframes yss-blip-red{
  0%{box-shadow:0 0 0 0 rgba(230,57,79,.6)}
  70%{box-shadow:0 0 0 9px rgba(230,57,79,0)}
  100%{box-shadow:0 0 0 0 rgba(230,57,79,0)}}

/* the toggle reads like a hardware switch */
.hero .toggle{border-color:rgba(239,237,233,.22)}
.hero .toggle button[aria-selected="true"]{background:#EFEDE9;color:#101114}
.hero .clock-bar{background:rgba(239,237,233,.14)}

/* ============================================================================
   5. BRAND — the mark stops being a sticker in the corner
   ============================================================================ */
.lbl-mk .mk{width:15px;height:15px;color:var(--accent)}
.hero .lbl-mk .mk,.proof .lbl-mk .mk,.book .lbl-mk .mk{color:#E6394F}
.logo svg{height:44px}
@media (max-width:720px){.logo svg{height:36px}}
.pkg-points li::before,.giveback li::before,.interventions .mono{color:var(--accent)}
.btn-primary{box-shadow:0 10px 30px -14px var(--accent)}


/* the seam between a dark block and a light one becomes a brand edge */
.hero+.wrap,.proof,.vs,.book{position:relative}
.proof::after,.vs::after,.book::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent) 18%,var(--accent) 82%,transparent);opacity:.55;pointer-events:none}
.hero .seam,.proof .seam,.vs .seam,.book .seam{display:none}

/* ============================================================================
   6. MOBILE — this is where it has to land. Dark blocks read better on a phone
   than beige-on-beige ever will; the job here is size, spacing and one moving
   thing, not more decoration.
   ============================================================================ */
@media (max-width:720px){
  body{background-size:auto,760px 760px}
  .hero,.proof,.vs,.book,.site-foot{background-size:38px 38px,38px 38px}
  .hero{padding-top:22px}
  .hero-copy h1{font-size:clamp(2.05rem,8.6vw,2.7rem);letter-spacing:-.025em}
  .hero .card-map{padding:14px}
  .hero .card-map::before{width:210%;animation-duration:4.5s;
    background:conic-gradient(from 0deg,rgba(99,198,113,.34),rgba(99,198,113,.10) 14%,rgba(99,198,113,0) 32%)}
  .hero-chart:not(.after) .card-map::before{background:conic-gradient(from 0deg,rgba(230,57,79,.32),rgba(230,57,79,.09) 14%,rgba(230,57,79,0) 32%)}
  .hero .card-map{background-size:auto,22px 22px,22px 22px}
  .hero .dash{padding:10px;background-color:rgba(16,17,20,.82)}
  .hero .grid-num .t{font-size:20px}
  .hero-photo{max-width:150px}
  .trust{grid-template-columns:1fr 1fr}
  .trust li{padding:12px 14px;border-bottom:1px solid rgba(239,237,233,.11)}
  .trust li:nth-child(2){border-right:0}
  .trust b{font-size:1rem}
  .trust span{font-size:.78rem}
  .stickybar{box-shadow:0 -10px 30px -10px rgba(0,0,0,.55)}
  .sb-mk{background:#191A1E;color:#E6394F}
  .sb-text{background:#191A1E;color:#EFEDE9}
  .proof::after,.vs::after,.book::after{opacity:.75}
  .egg{display:none}
}

/* ---------------------------------------------------------------- 7. respect */
@media (prefers-reduced-motion:reduce){
  .hero .card-map::before{animation:none;opacity:.5}
  .hero .dash-label .mono::before{animation:none}
}

/* The home is themes/v3 and its footer sits on #101114. The sub-pages share footer(),
   so the plate under it has to be the same colour or the footer changes shade on a click.
   `footer.site-foot`, not `.site-foot`: the dark-block token swap above is (0,1,1) and a
   bare class loses to it. Rule 17, again. */
footer.site-foot{background-color:#101114}

/* generated from data/site.py TRADES -- do not hand-edit */
form:has(#tr-bath:checked) .pn-bath{display:block}
form:has(#tr-kitchen:checked) .pn-kitchen{display:block}
form:has(#tr-gc:checked) .pn-gc{display:block}
form:has(#tr-flooring:checked) .pn-flooring{display:block}
form:has(#tr-handyman:checked) .pn-handyman{display:block}
form:has(#tr-roofing:checked) .pn-roofing{display:block}
form:has(#tr-siding:checked) .pn-siding{display:block}
form:has(#tr-gutters:checked) .pn-gutters{display:block}
form:has(#tr-masonry:checked) .pn-masonry{display:block}
form:has(#tr-concrete:checked) .pn-concrete{display:block}
form:has(#tr-excavation:checked) .pn-excavation{display:block}
form:has(#tr-fence:checked) .pn-fence{display:block}
form:has(#tr-garage:checked) .pn-garage{display:block}
form:has(#tr-plumbing:checked) .pn-plumbing{display:block}
form:has(#tr-hvac:checked) .pn-hvac{display:block}
form:has(#tr-electrical:checked) .pn-electrical{display:block}
form:has(#tr-lawn:checked) .pn-lawn{display:block}
form:has(#tr-tree:checked) .pn-tree{display:block}
form:has(#tr-wash:checked) .pn-wash{display:block}
form:has(#tr-lights:checked) .pn-lights{display:block}
form:has(#tr-pool:checked) .pn-pool{display:block}
form:has(#tr-clean:checked) .pn-clean{display:block}
form:has(#tr-junk:checked) .pn-junk{display:block}
form:has(#tr-moving:checked) .pn-moving{display:block}
form:has(#tr-pest:checked) .pn-pest{display:block}
form:has(#tr-restore:checked) .pn-restore{display:block}
form:has(#tr-autodetail:checked) .pn-autodetail{display:block}
form:has(#tr-autorepair:checked) .pn-autorepair{display:block}
form:has(#tr-pro:checked) .pn-pro{display:block}
form:has(#tr-other:checked) .pn-other{display:block}
form:has(.tradio:checked) .pn-default{display:none}