/* The free tools (/checks/, /map/, /seo-check/, /resume/, /list/). Loaded after /assets/site.css;
   every colour is a token from there. /check/ and /prose/ keep their own inline copies. */
.page-hero h1{max-width:20ch}
/* the hero terminal on other pages shows a skill being built; these pages are about the tool */
.page-hero .rig{display:none}
.checker{display:grid;gap:14px;margin-top:clamp(28px,4vw,44px);max-width:920px}
.checker label{font-size:14px;font-weight:600;color:var(--muted);display:block;margin-bottom:8px}
.checker .row{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center}
.checker input[type=text],.checker textarea{width:100%;font:400 16px/1.55 var(--sans);color:var(--ink);background:var(--surface);border:0;border-radius:var(--r);padding:14px 16px;box-shadow:inset 0 0 0 1px var(--line)}
.checker input[type=text]{flex:1;min-width:0;width:auto}
.checker textarea{min-height:220px;resize:vertical}
.checker textarea.code,.checker input.code{font:400 14px/1.5 var(--mono)}
.checker textarea.code{white-space:pre;overflow:auto}
.checker input:focus,.checker textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.checker .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.checker .hint{font-size:14px;color:var(--muted)}
button.link{background:none;border:0;font:inherit;font-size:14px;color:var(--muted);text-decoration:underline;cursor:pointer;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{border:0;cursor:pointer;font:500 14px/1 var(--sans);color:var(--ink);background:var(--sunk);padding:10px 14px;border-radius:999px}
.chips button:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
#status{font-size:15px;color:var(--muted);min-height:1.5em}
#status.err{color:var(--ink);font-weight:600}
#result{margin-top:clamp(28px,4vw,48px);max-width:980px;scroll-margin-top:16px}
.verdict{font-family:var(--serif);font-size:clamp(30px,3.6vw,48px);line-height:1.05;letter-spacing:-.02em}
.facts{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px;font-size:15px;color:var(--muted)}
.facts b{color:var(--ink);font-weight:600}
.findings{list-style:none;margin-top:24px;display:grid;gap:8px}
.finding{background:var(--surface);border-radius:var(--r);padding:18px 20px}
.finding .lvl{display:inline-block;font:600 12px/1 var(--mono);letter-spacing:.04em;padding:5px 8px;border-radius:6px;margin-right:10px;vertical-align:2px;background:var(--sunk);color:var(--ink)}
.finding.fail .lvl{background:var(--accent);color:var(--accent-ink)}
.finding.skip{box-shadow:inset 0 0 0 1px var(--line)}
.finding.skip .lvl{background:var(--ink);color:var(--bg)}
.finding .msg{font-weight:600}
.finding p{font-size:15.5px;color:var(--muted);margin-top:8px;max-width:70ch}
.finding p b{color:var(--ink);font-weight:600}
.finding .ev{font:400 13.5px/1.5 var(--mono);color:var(--ink);background:var(--sunk);border-radius:6px;padding:8px 10px;overflow-wrap:anywhere;white-space:pre-wrap}
.terms{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.terms span{font:400 13px/1.3 var(--mono);color:var(--ink);background:var(--sunk);border-radius:5px;padding:3px 7px}
.passed{font-size:15px;color:var(--muted);margin-top:16px;max-width:75ch}
.passed b{color:var(--ink);font-weight:600}
.draft{margin-top:24px;background:var(--surface);border-radius:var(--r);padding:14px 0;max-height:min(70vh,640px);overflow:auto;font-size:16px;line-height:1.7}
.ln{display:grid;grid-template-columns:52px minmax(0,1fr);padding-right:18px}
.ln .no{font:400 12px/2.25 var(--mono);color:var(--muted);text-align:right;padding-right:14px;user-select:none;-webkit-user-select:none;opacity:.7}
.ln .tx{white-space:pre-wrap;overflow-wrap:anywhere}
.draft mark,.legend mark{color:inherit;border-radius:3px;padding:1px 2px;margin:0 -2px;background:color-mix(in srgb,var(--accent) 26%,transparent);box-shadow:inset 0 -2px 0 var(--accent)}
.legend{font-size:14.5px;color:var(--muted);margin-top:12px}
.legend mark{margin:0}
.result-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.upsell{margin-top:28px;padding:22px 24px;border-radius:var(--r-lg);background:var(--roast);color:var(--roast-ink);display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.upsell p{max-width:52ch;font-size:16px}
.upsell b{display:block;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15;margin-bottom:6px}
.checks{list-style:none;columns:2;column-gap:48px;margin-top:clamp(24px,3vw,40px);max-width:980px}
.checks li{break-inside:avoid;padding:12px 0;border-top:1px solid var(--line);font-size:16px}
.checks li b{font-weight:600}
.serp{margin-top:24px;background:var(--surface);border-radius:var(--r);padding:20px 22px;max-width:640px}
.serp .k{font-size:14px;font-weight:600;color:var(--muted)}
.serp .u{font-size:13px;color:var(--muted);margin-top:12px;overflow-wrap:anywhere}
.serp .t{font-size:19px;line-height:1.3;margin-top:4px;color:#1a3fa8;overflow-wrap:anywhere}
.serp .d{font-size:14.5px;color:var(--muted);margin-top:6px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .serp .t{color:#9db8ff}}
:root[data-theme="dark"] .serp .t{color:#9db8ff}
.gate{margin-top:8px;padding:26px 30px;border-radius:var(--r-lg);background:var(--roast);color:var(--roast-ink);display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center;justify-content:space-between}
.gate.hold{background:var(--accent);color:var(--accent-ink)}
.gate .k{font:600 13px/1 var(--mono);letter-spacing:.04em}
.gate .v{font-family:var(--serif);font-size:clamp(32px,4vw,48px);line-height:1;letter-spacing:-.02em;margin-top:8px}
.gate p.why{max-width:38ch;font-size:16px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin-top:8px}
.tiles div{background:var(--surface);padding:20px 22px}
.tiles b{display:block;font-family:var(--serif);font-weight:400;font-size:44px;line-height:1}
.tiles strong{display:block;font-weight:600;margin-top:8px}
.tiles span{display:block;font-size:15px;color:var(--muted);margin-top:4px}
.tablebox{overflow-x:auto;margin-top:12px;background:var(--surface);border-radius:var(--r)}
.tablebox table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px;text-align:left}
.tablebox th{padding:12px 16px;font-weight:600;color:var(--muted)}
.tablebox td{padding:12px 16px;border-top:1px solid var(--line);overflow-wrap:anywhere}
.tablebox td.m{font-family:var(--mono);font-size:13px}
.tablebox td.bad{font-weight:600}
.route{margin-top:clamp(28px,4vw,44px);padding:clamp(22px,3vw,34px);border-radius:var(--r-lg);background:var(--roast);color:var(--roast-ink)}
.route .brew{font:600 13px/1 var(--mono);letter-spacing:.04em;color:var(--accent)}
.route h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,42px);line-height:1.05;letter-spacing:-.02em;margin-top:10px}
.route .sum{font-size:16px;color:var(--roast-muted);margin-top:10px;max-width:70ch}
.graph{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin-top:26px}
.node{flex:1 1 190px;min-width:0;background:var(--roast-surface);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:8px}
.node.last{background:var(--accent);color:var(--accent-ink)}
.node .n{font:400 12px/1 var(--mono);color:var(--roast-muted)}
.node.last .n,.node.last .what,.node.last .alt{color:inherit}
.node a.name{font:600 15px/1.3 var(--mono);overflow-wrap:anywhere;color:inherit}
.node .what{font-size:14.5px;line-height:1.45;color:var(--roast-muted)}
.node .alt{font-size:13px;color:var(--roast-muted);margin-top:auto}
.node .alt a{color:inherit}
.graph svg{align-self:center;flex:none;color:var(--accent)}
.route .install{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;margin-top:22px}
.route pre{flex:1 1 320px;min-width:0;font:400 13px/1.6 var(--mono);background:var(--roast-surface);border-radius:var(--r);padding:14px 16px;white-space:pre-wrap;overflow-wrap:anywhere}
.route .btn-light{background:var(--roast-ink);color:var(--roast)}
.route .note{font-size:14.5px;color:var(--roast-muted);margin-top:16px;max-width:75ch}
.route .note a{color:inherit}
.after{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px;margin-top:8px}
.after div{background:var(--surface);padding:22px}
.after b{font-weight:600}
.after p{font-size:15px;color:var(--muted);margin-top:6px}
/* /checks/, the hub. A two-column hero with a "what are you about to send" picker, tool cards that
   show a sample of the result, three steps, the price ladder and the four rules. */
.hub-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:center}
/* motion.js wraps the hero for a terminal these pages hide; keep the wrap a plain block */
.hub-hero .rig-host{display:block}
.hub-hero h1{max-width:9ch}
.hub-hero .eyebrow{margin-bottom:22px}
.hub-facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px clamp(20px,3vw,40px);margin-top:clamp(28px,4vw,44px);padding-top:22px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.hub-facts li{display:flex;align-items:baseline;gap:8px}
.hub-facts b{font:400 clamp(28px,2.6vw,36px)/1 var(--serif);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.picker{border-radius:var(--r-lg);padding:clamp(22px,2.6vw,34px);box-shadow:0 40px 80px -48px rgba(var(--glow),.7)}
.picker h2{font-size:clamp(24px,2.2vw,30px);line-height:1.1;letter-spacing:-.015em;margin-bottom:10px}
.picker ol{list-style:none;counter-reset:pick}
.picker li{counter-increment:pick;border-top:1px solid var(--line)}
.picker a{display:flex;align-items:baseline;gap:12px;padding:15px 4px;text-decoration:none;transition:padding 300ms var(--out),color 160ms var(--ease)}
.picker a::before{content:counter(pick,decimal-leading-zero);flex:none;font:500 12px/1 var(--mono);color:var(--muted)}
.picker .have{font-size:17px;font-weight:600}
.picker a i{flex:1;min-width:14px;border-bottom:1px dotted color-mix(in srgb,currentColor 34%,transparent);transform:translateY(-4px)}
.picker .go{flex:none;font:500 13px/1 var(--mono);color:var(--muted);transition:color 160ms var(--ease)}
.picker .go::after{content:" \2192"}
.picker a:hover,.picker a:focus-visible{padding-left:12px;padding-right:12px}
.picker a:hover .go,.picker a:focus-visible .go{color:var(--accent)}
.toolgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:clamp(28px,4vw,48px)}
.tool{display:flex;flex-direction:column;gap:14px;background:var(--surface);border-radius:var(--r-lg);padding:clamp(22px,2.2vw,30px);text-decoration:none;transition:box-shadow 160ms var(--ease),transform 300ms var(--out)}
.tool:hover{box-shadow:inset 0 0 0 1.5px var(--accent);transform:translateY(-3px)}
.tool .who{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tool h3{font-size:clamp(26px,2.3vw,32px);line-height:1.06;letter-spacing:-.018em;min-height:2.12em}
.tool .q{font-size:15.5px;color:var(--muted)}
.tool .foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.tool .name{font-size:15.5px;font-weight:600}
.tool .name::after{content:" \2192";display:inline-block;transition:transform 160ms var(--ease)}
.tool:hover .name::after{transform:translateX(4px)}
.tool .offer{font:500 12px/1 var(--mono);padding:6px 9px;border-radius:999px;background:var(--ink);color:var(--bg)}
.tool .offer.free{background:var(--sunk);color:var(--ink)}
.demo{display:flex;flex-direction:column;gap:8px;background:var(--sunk);border-radius:var(--r);padding:14px 16px;min-height:132px;font-size:14.5px;line-height:1.4}
.demo-k{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.demo-row{display:flex;align-items:flex-start;gap:9px;font-weight:600}
.demo .lvl{flex:none;font:600 11px/1 var(--mono);letter-spacing:.04em;padding:4px 6px;border-radius:5px;background:var(--surface);color:var(--ink);margin-top:1px}
.demo .lvl.fail{background:var(--accent);color:var(--accent-ink)}
.demo-note{font-size:13.5px;color:var(--muted);margin-top:auto}
.demo-text{font-size:15.5px;line-height:1.6}
.demo mark{color:inherit;border-radius:3px;padding:1px 2px;background:color-mix(in srgb,var(--accent) 26%,transparent);box-shadow:inset 0 -2px 0 var(--accent)}
.demo-stat{display:flex;align-items:baseline;gap:9px}
.demo-stat b{font:400 30px/1 var(--serif);letter-spacing:-.02em}
.demo-terms{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13.5px;color:var(--muted);margin-top:auto}
.demo-terms span{flex-basis:100%}
.demo code{font:400 12.5px/1.3 var(--mono);color:var(--ink);background:var(--surface);border-radius:5px;padding:3px 7px}
.demo-gate{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;background:var(--accent);color:var(--accent-ink);border-radius:8px;padding:10px 12px;font-weight:600}
.demo-gate b{font:400 26px/1 var(--serif);letter-spacing:-.02em}
.demo-route{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.demo-route b{color:var(--accent);font-weight:600}
.offerbar{font-size:15px}
.offerbar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 16px;padding-top:11px;padding-bottom:11px;text-align:center}
.offerbar b{font-weight:600}
.offerbar a{color:var(--accent);font-weight:600;white-space:nowrap}
.offerbar a::after{content:" \2192"}
.offerbar .pill{font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);padding:5px 8px;border-radius:999px}
.flowline{display:flex;flex-direction:column;gap:8px}
.flow-k{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.flow-steps{display:flex;flex-wrap:wrap;gap:6px}
.st{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;line-height:1.2;padding:6px 10px 6px 6px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.st b{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:600 11px/1 var(--mono);background:var(--sunk);color:var(--ink)}
.st.free{box-shadow:none;background:var(--ink);color:var(--bg)}
.st.free b{background:var(--accent);color:var(--accent-ink)}
.st em{font-style:normal;font-weight:400;opacity:.75}
.flow-note{font-size:13.5px;color:var(--muted)}
.steps{list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(32px,5vw,64px)}
.steps li{counter-increment:step;border-top:2px solid var(--ink);padding-top:18px}
.steps li::before{content:counter(step,decimal-leading-zero);display:block;font:500 13px/1 var(--mono);color:var(--accent);margin-bottom:clamp(28px,4vw,56px)}
.steps p{color:var(--muted);margin-top:10px;font-size:16px;max-width:38ch}
#pricing h2{max-width:24ch}
.plan li a{font-weight:600}
.hub-fine{margin-top:20px;max-width:54ch}
.plan li,.plan .for,.tool .q,.rules p,.steps p,.hub-fine,.faq p{text-wrap:pretty}
.rules{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:clamp(32px,5vw,64px)}
.rules li{background:var(--surface);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,36px)}
.rules p{color:var(--muted);margin-top:10px;font-size:16px;max-width:52ch}
.rules a{color:var(--ink)}
@media (max-width:1020px){.hub-hero-grid{grid-template-columns:1fr}.hub-hero h1{max-width:12ch}.picker{max-width:560px}.toolgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.toolgrid,.steps,.rules{grid-template-columns:1fr}.tool h3{min-height:0}.demo{min-height:0}.steps li::before{margin-bottom:18px}}
@media (prefers-reduced-motion:reduce){.tool,.picker a{transition:none}.tool:hover{transform:none}}
@media (max-width:820px){.checks{columns:1}.checker .two{grid-template-columns:1fr}.ln{grid-template-columns:38px minmax(0,1fr);padding-right:12px}.ln .no{padding-right:10px}.graph{flex-direction:column}.graph svg{transform:rotate(90deg)}.node{flex:none}}
/* on a toned section the quiet button's own ground is the section's, so lift it */
.tone #result .btn-quiet{background:var(--surface)}
.after button.link{text-align:left}
/* /checks/ in motion (tools/fx/src/hub.js). Everything below is behind .fx-on, which motion.js sets
   only when motion is allowed, so the page above is complete without it. */
.picker,.tool{--mx:-999px;--my:-999px;background-image:radial-gradient(520px circle at var(--mx) var(--my),rgba(var(--glow),.16),transparent 62%)}
/* depth is for a pointer that can lean a card; on touch the cards stay flat and no wider than the page */
@media (hover:hover) and (pointer:fine){
.fx-on .picker,.fx-on .tool,.fx-on .plan{transform-style:preserve-3d}
.fx-on .picker h2{transform:translateZ(44px)}
.fx-on .picker ol{transform:translateZ(22px);transform-style:preserve-3d}
.fx-on .tool .demo{transform:translateZ(30px);box-shadow:0 18px 30px -24px rgba(var(--glow),.55)}
.fx-on .plan .price{transform:translateZ(24px)}
}
.fx-on .tool{transition:box-shadow 160ms var(--ease)}
.fx-on .demo mark{background:linear-gradient(color-mix(in srgb,var(--accent) 26%,transparent),color-mix(in srgb,var(--accent) 26%,transparent)) no-repeat 0 0/100% 100%}
.fx-on .demo .lvl,.fx-on .demo-gate{transform-origin:0 50%}
#how .steps li{position:relative}
.fx-on #how .steps li{border-top-color:var(--line)}
.fx-on #how .steps li::after{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:0 50%}
.fx-on #how .steps li::before{color:var(--muted);transition:color 300ms var(--ease)}
.fx-on #how .steps li.is-lit::before{color:var(--accent)}
.fx-on .contact.ember{background-image:radial-gradient(70% 120% at 85% calc(50% + var(--by,0%)),rgba(255,255,255,.2),transparent 70%)}