/* HaulNumbers — layout: highway-sign header, form-left / sticky readout-right on calculator pages */
:root{
  --bg:#f1f2ee; --surface:#ffffff; --ink:#18232f; --muted:#5a6672; --line:#d6d9d2;
  --brand:#1d6a47; --brand-ink:#ffffff; --accent:#9a5700; --accent-soft:#fbefd9;
  --road:#24435f; --good:#2f7a4a; --bad:#b4372b;
  --seg1:#24435f; --seg2:#b86a00; --seg3:#5f8a9e; --seg4:#9aa39a;
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#12171d; --surface:#1a2129; --ink:#e6e9e4; --muted:#9aa5ae; --line:#2c3640;
  --brand:#22704c; --brand-ink:#ffffff; --accent:#f0a33a; --accent-soft:#2e2414;
  --road:#8fb4d6; --good:#6cc28c; --bad:#ef7d6f;
  --seg1:#8fb4d6; --seg2:#f0a33a; --seg3:#5f8a9e; --seg4:#6b756d; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#12171d; --surface:#1a2129; --ink:#e6e9e4; --muted:#9aa5ae; --line:#2c3640;
  --brand:#22704c; --brand-ink:#ffffff; --accent:#f0a33a; --accent-soft:#2e2414;
  --road:#8fb4d6; --good:#6cc28c; --bad:#ef7d6f;
  --seg1:#8fb4d6; --seg2:#f0a33a; --seg3:#5f8a9e; --seg4:#6b756d; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
a{color:var(--road)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding-inline:16px}

/* header */
.site-head{background:var(--brand);color:var(--brand-ink)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;color:var(--brand-ink);text-decoration:none}
.logo-mark{width:30px;height:38px;border:2px solid var(--brand-ink);border-radius:4px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:13px;line-height:1;text-align:center}
.logo-word{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.02em}
.site-nav{display:flex;gap:18px;flex-wrap:wrap}
.site-nav a{color:var(--brand-ink);text-decoration:none;font-family:var(--display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:15px;opacity:.9}
.site-nav a:hover{opacity:1;text-decoration:underline}

/* page header */
.page-head{display:grid;gap:6px;padding-block:28px 20px}
.crumbs{font-size:13px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.eyebrow{font-family:var(--display);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-size:14px}
h1{font-family:var(--display);font-weight:700;font-size:clamp(32px,5vw,48px);line-height:1.02;margin:0;text-wrap:balance}
.lede{color:var(--muted);max-width:64ch;margin:0}

/* calculator layout */
.calc{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:820px){.calc{grid-template-columns:1fr}}
.calc form{display:grid;gap:16px}
fieldset{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:16px;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
@media (max-width:480px){fieldset{grid-template-columns:1fr}}
legend{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.04em;text-transform:uppercase;padding:0 6px;color:var(--road)}
label{display:grid;gap:4px;font-size:14px;font-weight:500;min-width:0;align-content:start}
.field{display:flex;align-items:center;min-width:0;border:1px solid var(--line);border-radius:4px;background:var(--bg)}
.field:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.field span{padding:0 8px;color:var(--muted);font-family:var(--mono);font-size:13px;white-space:nowrap}
input,select{flex:1 1 0;width:0;min-width:0;border:0;background:transparent;color:var(--ink);font-family:var(--mono);font-size:15px;padding:9px 8px;font-variant-numeric:tabular-nums}
select{font-family:var(--body);font-weight:500}
input:focus,select:focus{outline:none}
.hint{font-size:12px;color:var(--muted);font-weight:400}
.reset{justify-self:start;font:600 14px var(--body);color:var(--road);background:none;border:1px solid var(--line);border-radius:4px;padding:8px 12px;cursor:pointer}

.readout{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);display:grid;gap:16px}
@media (max-width:820px){.readout{position:static}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px}
.hero{border-top:6px solid var(--accent)}
.k{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.big{font-family:var(--display);font-weight:700;font-size:clamp(48px,8vw,64px);line-height:1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.big small{font-size:22px;color:var(--muted);font-weight:600}
.rows{display:grid;gap:10px;margin-top:16px}
.row{display:flex;justify-content:space-between;gap:12px;border-top:1px dashed var(--line);padding-top:10px}
.row b{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.row .em{color:var(--accent)}
.bar{display:flex;height:14px;border-radius:3px;overflow:hidden;margin:16px 0 10px;background:var(--line)}
.bar:empty{display:none}
.bar i{display:block;height:100%}
.legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;font-size:13px}
.legend div{display:flex;align-items:center;gap:6px;min-width:0}
.legend em{width:10px;height:10px;border-radius:2px;flex:none}
.legend b{margin-left:auto;font-family:var(--mono);font-weight:500;font-size:12px}
.note{font-size:13px;color:var(--muted);margin:12px 0 0}
.verdict{padding:12px;border-radius:4px;font-weight:600;background:var(--accent-soft)}
.verdict:empty{display:none}
.verdict.good{color:var(--good)} .verdict.bad{color:var(--bad)}
.verdict span{display:block;font-weight:400;color:var(--muted);font-size:14px}

/* ads: hidden until you paste AdSense code inside and add class "on" */
.ad-slot{display:none}
.ad-slot.on{display:block;margin-block:24px;min-height:100px}

/* article content */
.content{display:grid;gap:12px;max-width:68ch;padding-block:40px 24px}
.content h2{font-family:var(--display);font-weight:700;font-size:28px;margin:16px 0 0;text-wrap:balance}
.content p,.content ul,.content ol{margin:0}
.content li+li{margin-top:4px}
pre{font-family:var(--mono);font-size:13px;background:var(--surface);border:1px solid var(--line);padding:12px;border-radius:4px;overflow-x:auto;margin:0}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px;background:var(--surface)}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left}
th{font-family:var(--display);letter-spacing:.04em;text-transform:uppercase;font-size:14px}
td.n{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
details{border-top:1px solid var(--line);padding:10px 0}
summary{cursor:pointer;font-weight:600}
details p{margin:8px 0 0}
.src{font-size:13px;color:var(--muted)}

.related{display:grid;gap:12px;padding-block:8px 40px}
.related h2{font-family:var(--display);font-weight:700;font-size:24px;margin:0}

/* tool cards (home + related) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.card{display:grid;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:16px;text-decoration:none;color:var(--ink);transition:border-color .15s}
.card:hover{border-color:var(--accent)}
.card strong{font-family:var(--display);font-size:21px;font-weight:700;line-height:1.1}
.card span{font-size:14px;color:var(--muted)}
.card .q{font-family:var(--mono);font-size:12px;color:var(--accent)}

/* home */
.home-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:center;padding-block:40px 32px}
@media (max-width:820px){.home-hero{grid-template-columns:1fr}}
.home-hero h1{font-size:clamp(40px,6.5vw,68px)}
.sign{background:var(--brand);color:var(--brand-ink);border-radius:10px;border:3px solid var(--surface);outline:2px solid var(--brand);padding:20px;display:grid;gap:10px;font-family:var(--display)}
.sign .s-k{font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:14px;opacity:.85}
.sign .s-row{display:flex;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,.3);padding-top:8px;font-size:20px;font-weight:600}
.sign .s-row b{font-variant-numeric:tabular-nums}
.sign .s-src{font-family:var(--body);font-size:12px;opacity:.85}
.group{display:grid;gap:12px;padding-block:12px 20px}
.group h2{font-family:var(--display);font-weight:700;font-size:26px;margin:0;letter-spacing:.02em;text-transform:uppercase;color:var(--road)}

/* footer */
.site-foot{border-top:1px solid var(--line);margin-top:32px}
.site-foot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:24px;font-size:14px;color:var(--muted)}
.site-foot nav{display:flex;gap:16px;flex-wrap:wrap}
.site-foot a{color:var(--muted)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* accessibility helpers */
.skip{position:absolute;left:16px;top:-60px;background:var(--surface);color:var(--ink);padding:10px 14px;border-radius:4px;z-index:10;font-weight:600}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 8px)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.cta{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:6px;font-family:var(--display);font-weight:700;font-size:19px;text-decoration:none;letter-spacing:.02em}
.cta.primary{background:var(--brand);color:var(--brand-ink)}
.cta.secondary{border:2px solid var(--brand);color:var(--ink)}
.cta:hover{filter:brightness(1.08)}
.group-sub{font-family:var(--body);font-size:15px;color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
.hero-copy{display:grid;gap:12px}
.share-img{width:100%;height:auto;border-radius:6px;border:1px solid var(--line)}

/* phone: result stays visible while typing */
.mobile-bar{display:none}
@media (max-width:820px){
  .mobile-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:5;justify-content:space-between;align-items:center;gap:12px;
    background:var(--brand);color:var(--brand-ink);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));box-shadow:0 -2px 10px rgba(0,0,0,.15)}
  .mobile-bar span{font-family:var(--display);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:14px}
  .mobile-bar b{font-family:var(--display);font-size:28px;font-variant-numeric:tabular-nums}
  .mobile-bar b small{font-size:15px;opacity:.85}
  .mobile-bar a{color:var(--brand-ink);font-size:13px}
  body.has-bar{padding-bottom:72px}
  .site-nav{gap:12px}
  .site-nav a{font-size:14px}
}

/* ===== v2: distinct identity + faster access ===== */
:root{--asphalt:#232a31;--asphalt-ink:#eef0ea;--lane:#ffc35c;--t-costs:#24435f;--t-revenue:#1d6a47;--t-taxes:#9a5700;--t-business:#4e6f80}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--asphalt:#0c1014;--asphalt-ink:#eef0ea;--t-costs:#8fb4d6;--t-revenue:#6cc28c;--t-taxes:#f0a33a;--t-business:#8fb0c0}}
:root[data-theme="dark"]{--asphalt:#0c1014;--asphalt-ink:#eef0ea;--t-costs:#8fb4d6;--t-revenue:#6cc28c;--t-taxes:#f0a33a;--t-business:#8fb0c0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header with lane line */
.site-head{position:relative}
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:repeating-linear-gradient(90deg,var(--lane) 0 34px,transparent 34px 58px)}
.site-head .wrap{flex-wrap:nowrap;padding-block:12px 16px}
.head-tools{display:flex;align-items:center;gap:12px;flex:1;justify-content:flex-end;min-width:0}
.finder{position:relative;flex:0 1 380px;min-width:0}
.finder input{width:100%;flex:none;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:6px;color:var(--brand-ink);font-family:var(--body);font-size:15px;padding:9px 34px 9px 36px}
.finder input::placeholder{color:rgba(255,255,255,.8)}
.finder input:focus{outline:2px solid var(--lane);outline-offset:1px;background:rgba(255,255,255,.2)}
.finder .s-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--brand-ink);opacity:.85;pointer-events:none}
.finder kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:12px;border:1px solid rgba(255,255,255,.5);border-radius:3px;padding:0 5px;color:var(--brand-ink)}
.finder-list{position:absolute;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.18);z-index:20;max-height:70vh;overflow:auto}
.finder-list li a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;color:var(--ink);text-decoration:none}
.finder-list li a small{display:block;color:var(--muted);font-size:13px}
.finder-list li[aria-selected="true"] a,.finder-list li a:hover{background:var(--accent-soft)}
.finder-list .empty{padding:10px;color:var(--muted);font-size:14px}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;color:var(--brand-ink);font-family:var(--display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:15px;padding:8px 12px;border:1px solid rgba(255,255,255,.35);border-radius:6px;white-space:nowrap}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:" ▾"}
.menu[open] summary{background:rgba(255,255,255,.14)}
.menu-panel{position:absolute;right:0;top:calc(100% + 8px);width:min(640px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.2);padding:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;z-index:20}
.menu-panel h3{margin:0 0 6px;font-family:var(--display);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.menu-panel a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:6px;color:var(--ink);text-decoration:none;font-weight:500}
.menu-panel a:hover{background:var(--accent-soft)}
@media (max-width:720px){
  .site-head .wrap{flex-wrap:wrap}
  .head-tools{flex-basis:100%;order:3}
  .finder{flex:1 1 auto}
  .finder kbd{display:none}
  .menu-panel{grid-template-columns:1fr;right:0}
}

/* icons */
.ico{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:8px;flex:none;color:#fff;background:var(--t-costs)}
.ico svg{width:22px;height:22px}
.ico.sm{width:28px;height:28px;border-radius:6px}.ico.sm svg{width:17px;height:17px}
.g-costs .ico,.ico.g-costs{background:var(--t-costs)} .g-revenue .ico,.ico.g-revenue{background:var(--t-revenue)}
.g-taxes .ico,.ico.g-taxes{background:var(--t-taxes)} .g-business .ico,.ico.g-business{background:var(--t-business)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ico{color:#12171d}}
:root[data-theme="dark"] .ico{color:#12171d}
.card{grid-template-columns:auto 1fr;column-gap:14px;align-items:start}
.card .ico{grid-row:span 3}
.card > :not(.ico){grid-column:2}

/* tool strip on calculator pages */
.tool-strip{background:var(--surface);border-bottom:1px solid var(--line)}
.tool-strip .wrap{display:flex;gap:8px;overflow-x:auto;padding-block:10px;scrollbar-width:thin}
.tool-strip a{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:5px 12px 5px 5px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:500}
.tool-strip a:hover{border-color:var(--accent)}
.tool-strip a[aria-current="page"]{border-color:var(--brand);background:var(--brand);color:var(--brand-ink)}
.tool-strip .ico.sm{width:24px;height:24px;border-radius:999px}.tool-strip .ico.sm svg{width:14px;height:14px}

/* result actions + saved values */
.panel-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.btn-ghost{font:600 14px var(--body);color:var(--road);background:none;border:1px solid var(--line);border-radius:4px;padding:7px 12px;cursor:pointer}
.btn-ghost:hover{border-color:var(--accent)}
.use-saved{justify-self:start;font:600 12px var(--body);color:var(--brand);background:var(--accent-soft);border:1px dashed var(--brand);border-radius:4px;padding:4px 8px;cursor:pointer;margin-top:2px}

/* rate road gauge */
.road{margin-top:18px}
.road:empty{display:none}
.road-k{display:flex;justify-content:space-between;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.road-wrap{position:relative;padding:34px 0 46px}
.road-track{position:relative;height:30px;border-radius:4px;background:var(--asphalt);overflow:visible}
.road-track::before{content:"";position:absolute;left:8px;right:8px;top:50%;height:3px;margin-top:-1.5px;background:repeating-linear-gradient(90deg,var(--lane) 0 18px,transparent 18px 32px)}
.road-zone{position:absolute;top:-6px;height:4px;border-radius:2px}
.road-zone.red{background:var(--bad)}.road-zone.amber{background:var(--accent)}.road-zone.green{background:var(--good)}
.road-mk{position:absolute;top:0;height:30px;width:0;border-left:2px solid var(--asphalt-ink)}
.road-mk em{position:absolute;top:36px;transform:translateX(-50%);font-style:normal;font-size:12px;line-height:1.2;text-align:center;white-space:nowrap;color:var(--muted)}
.road-mk em b{display:block;font-family:var(--mono);font-weight:500;color:var(--ink)}
.road-mk.be{border-color:var(--bad)}.road-mk.target{border-color:var(--good)}
.road-you{position:absolute;top:-34px;transform:translateX(-50%);display:grid;justify-items:center;font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap}
.road-you svg{width:34px;height:20px;color:var(--accent)}
.road-you b{font-family:var(--mono);font-weight:500}

/* home v2 */
.home-hero{align-items:start;padding-block:36px 28px}
.hero-copy h1{max-width:13ch}
.popular{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}
.popular span{font-size:14px;color:var(--muted)}
.popular a{font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px}
.popular a:hover{border-color:var(--accent)}
.qc{background:var(--asphalt);color:var(--asphalt-ink);border-radius:12px;padding:20px;display:grid;gap:14px;position:relative;overflow:hidden}
.qc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:repeating-linear-gradient(90deg,var(--lane) 0 34px,transparent 34px 58px)}
.qc h2{margin:0;font-family:var(--display);font-size:26px;letter-spacing:.02em}
.qc .sub{margin:-8px 0 0;font-size:14px;opacity:.8}
.qc .qc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.qc label{color:var(--asphalt-ink)}
.qc .field{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.qc .field span,.qc .hint{color:rgba(238,240,234,.7)}
.qc input{color:var(--asphalt-ink)}
.qc .use-saved{color:var(--lane);background:transparent;border-color:var(--lane)}
.qc-out{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap;border-top:1px dashed rgba(255,255,255,.25);padding-top:12px}
.qc-out .k{color:rgba(238,240,234,.75)}
.qc-out .big{font-size:48px;color:var(--lane)}
.qc .verdict{background:rgba(255,255,255,.08)}
.qc .verdict.good{color:#7fd6a0}.qc .verdict.bad{color:#ff9a8c}
.qc .verdict span{color:rgba(238,240,234,.75)}
.qc .road-track{background:#3a434c}
.qc .road-mk em{color:rgba(238,240,234,.75)} .qc .road-mk em b,.qc .road-you{color:var(--asphalt-ink)}
.qc-link{color:var(--lane);font-weight:600;font-size:15px}
.markers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-block:8px 28px}
@media (max-width:820px){.markers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.marker{background:var(--brand);color:var(--brand-ink);border-radius:8px;border:3px solid var(--surface);outline:2px solid var(--brand);padding:12px 14px;display:grid;gap:2px;text-align:center;font-family:var(--display)}
.marker b{font-size:32px;line-height:1;font-variant-numeric:tabular-nums}
.marker span{font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.markers-src{grid-column:1/-1;font-size:12px;color:var(--muted);margin:0}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-block:8px 28px;counter-reset:step}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.step{display:grid;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px;text-decoration:none;color:var(--ink);position:relative}
.step:hover{border-color:var(--accent)}
.step .n{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.1em;color:var(--accent)}
.step strong{font-family:var(--display);font-size:22px;line-height:1.1}
.step span{font-size:14px;color:var(--muted)}
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-block:24px 8px;border-top:1px solid var(--line);margin-top:12px}
@media (max-width:820px){.why{grid-template-columns:1fr}}
.why strong{font-family:var(--display);font-size:20px;display:block}
.why p{margin:4px 0 0;color:var(--muted);font-size:15px}
.section-h{font-family:var(--display);font-weight:700;font-size:30px;margin:8px 0 4px}
.menu{border:0;padding:0}
.card .ico,.card span.ico{color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .card span.ico{color:#12171d}}
:root[data-theme="dark"] .card span.ico{color:#12171d}
.road-wrap{padding-top:52px}
.road-you{top:-52px}
.tool-strip .wrap{mask-image:linear-gradient(90deg,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent)}

/* ===== v3: guides, glossary, footer ===== */
:root{--t-guide:#6b4f8a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--t-guide:#b9a0d6}}
:root[data-theme="dark"]{--t-guide:#b9a0d6}
.g-guide .ico,.ico.g-guide{background:var(--t-guide)}
.main-nav{display:flex;align-items:center;gap:10px}
.head-link{color:var(--brand-ink);text-decoration:none;font-family:var(--display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:15px;padding:8px 6px}
.head-link:hover{text-decoration:underline}
.menu-panel .menu-learn{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;border-top:1px solid var(--line);padding-top:12px}
.menu-panel .menu-learn h3{width:100%}
.byline{font-size:14px;color:var(--muted);margin:4px 0 0}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
@media (max-width:900px){.article-grid{grid-template-columns:1fr}}
.article{padding-top:8px;max-width:70ch}
.article h2{scroll-margin-top:16px}
.quick{background:var(--accent-soft);border-left:5px solid var(--accent);border-radius:6px;padding:14px 16px}
.quick p{margin:4px 0 0;font-size:17px;font-weight:500}
.article-side{position:sticky;top:16px;display:grid;gap:16px;padding-top:8px}
@media (max-width:900px){.article-side{position:static}}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.toc ol{margin:8px 0 0;padding-left:20px;display:grid;gap:4px;font-size:15px}
.toc a{color:var(--ink);text-decoration:none}.toc a:hover{color:var(--road);text-decoration:underline}
@media (max-width:900px){.toc{display:none}}
.runbox{display:grid;gap:8px}
.cards.one{grid-template-columns:1fr}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.prevnext a{display:grid;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 14px;color:var(--ink);text-decoration:none;font-weight:600}
.prevnext a:last-child{text-align:right}
.prevnext a:hover{border-color:var(--accent)}
.prevnext small{font-weight:400;color:var(--muted);font-size:13px}
@media (max-width:560px){.prevnext{grid-template-columns:1fr}.prevnext a:last-child{text-align:left}}
.az{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.az a{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:6px;background:var(--surface);text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:700}
.az a:hover{border-color:var(--accent)}
.gloss{margin:0;display:grid;gap:14px}
.gloss dt{font-family:var(--display);font-weight:700;font-size:21px;scroll-margin-top:16px}
.gloss dd{margin:2px 0 0;color:var(--ink)}
.gloss dd a{font-weight:600;white-space:nowrap}
.glossary h2{color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:4px}
/* footer sitemap */
.site-foot .wrap{display:grid;gap:20px;padding-block:32px 24px}
.foot-cols{display:grid;grid-template-columns:1.2fr 1fr 1.3fr .8fr;gap:24px}
@media (max-width:900px){.foot-cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-cols{grid-template-columns:1fr}}
.foot-cols h2{font-family:var(--display);font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0 0 8px}
.foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px}
.foot-cols a{color:var(--muted);text-decoration:none}.foot-cols a:hover{color:var(--ink);text-decoration:underline}
.foot-cols p{font-size:14px;color:var(--muted);margin:8px 0 0}
.foot-logo{color:var(--ink)!important}.foot-logo .logo-mark{border-color:var(--ink)}
.foot-legal{font-size:13px;color:var(--muted);margin:0;border-top:1px solid var(--line);padding-top:16px}
@media (max-width:720px){.head-link{display:none}}
.menu-h{margin:0 0 6px;font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.menu-panel .menu-learn .menu-h{width:100%}
.foot-cols nav{display:block}
.foot-cols ul{align-content:start}
.foot-cols > *{align-self:start}

/* ===== v4: hero art, quick-check band, infographics ===== */
.home-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center}
.hero-art{position:relative;margin:0;border-radius:16px;overflow:hidden;box-shadow:0 18px 40px rgba(24,35,47,.22);aspect-ratio:10/7}
.hero-art img{display:block;width:100%;height:100%;object-fit:cover}
.chip{position:absolute;display:grid;gap:2px;background:rgba(255,255,255,.94);color:#18232f;border-radius:10px;padding:10px 14px;box-shadow:0 8px 20px rgba(0,0,0,.18);font-family:var(--body)}
.chip span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#5a6672;font-weight:600}
.chip b{font-family:var(--display);font-size:26px;line-height:1}
.chip em{font-style:normal;font-size:13px;font-weight:700;color:#2f7a4a}
.chip-a{left:5%;top:8%}.chip-b{right:5%;top:9%}
@media (max-width:480px){.chip{padding:6px 10px}.chip b{font-size:19px}.chip-b{top:6%;right:4%}.chip-a{top:6%}}
@media (prefers-reduced-motion:no-preference){.chip-a{animation:bob 5s ease-in-out infinite}.chip-b{animation:bob 5s ease-in-out 1.2s infinite}}
@keyframes bob{50%{transform:translateY(-6px)}}
.qc-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;margin-block:8px 32px}
@media (max-width:820px){.qc-band{grid-template-columns:1fr;padding:18px}}
.qc-intro{display:grid;gap:10px}
.qc-intro p{margin:0;color:var(--muted)}
.qc-intro .section-h{margin:0}
.ticks{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:6px}
.ticks li{padding-left:28px;position:relative;font-weight:500}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.qc-title{margin:0;font-family:var(--display);font-size:26px}
.infographic{margin:0;display:grid;gap:6px}
.infographic img{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:#f1f2ee}
.infographic figcaption{font-size:14px;color:var(--muted)}
.road-you svg{width:56px;height:20px;color:var(--accent)}