/* 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.55;-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 1em}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;letter-spacing:-.01em;margin:0 0 .5em;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)}
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:1rem}
.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:.7em 1.1em .6em}
.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:64px}
.logo svg{height:34px;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)}
@media (max-width:720px){.nav{display:none}.btn-head{margin-left:auto}}

/* sections */
section{padding-block:clamp(56px,9vw,120px);border-bottom:1px solid var(--line)}
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){.pair{grid-template-columns:1fr}.arrow{transform:rotate(90deg);justify-self:center}}
.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)}
.foot-grid{display:grid;grid-template-columns:6fr 3fr 3fr;gap:32px}
@media (max-width:720px){.foot-grid{grid-template-columns:1fr}}
.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)}
.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)}

/* PAPER — the brand's light ground. Warm off-white, ink wordmark colours, same accent. */
:root{
  --bg:#F0ECE1;--bg-2:#F7F4EC;
  --line:rgba(28,27,30,.12);--line-strong:rgba(28,27,30,.28);
  --ink:#1C1B1E;--ink-2:#7B7784;--ink-3:#A9A6AE;
  --accent:#AC1330;--accent-hover:#93102A;--accent-ink:#FFFFFF;
  --green:#2B7A38;--amber:#C99A2E;--red:#C7434F;--green-ink:#2B7A38;
  --red-ink:#B8232F;--green-mark:#CDEBC4;
  --green:#2E8B3A;--amber:#8FBF45;--green-ink:#237A31;--green-deep:#1E6B2B;--green-mark:#BFE8B5;--green-glow:rgba(60,160,80,.18);--red-glow:rgba(184,35,47,.10);
  --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 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --amber-before:#D9646E;
  --map-filter:none;
}
.site-head{background:color-mix(in srgb,#F0ECE1 90%,transparent)}
.hero-chart,.panel,.stat-card,.giveback,.form{box-shadow:0 1px 0 rgba(28,27,30,.04)}