/* HashForge AI site styles. Built on Studio's tokens.css (loaded first). Do not add colors outside the locked palette. */
@font-face{font-family:"IBM Plex Sans"; src:url("../fonts/IBMPlexSans-Variable.ttf") format("truetype"); font-weight:600 700; font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible"; src:url("../fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype"); font-weight:400; font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible"; src:url("../fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype"); font-weight:700; font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible"; src:url("../fonts/AtkinsonHyperlegible-Italic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap}
@font-face{font-family:"IBM Plex Mono"; src:url("../fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight:400; font-display:swap}
@font-face{font-family:"IBM Plex Mono"; src:url("../fonts/IBMPlexMono-Bold.ttf") format("truetype"); font-weight:700; font-display:swap}

:root{ --tap:3rem; --bar:6px; }
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:150px}
body{margin:0; min-height:100vh}
img,svg{max-width:100%}
h1,h2,h3,h4{margin:0 0 .5em; letter-spacing:0}
h1{font-size:clamp(2rem, 6vw, var(--hf-h1))}
h2{font-size:clamp(1.45rem, 4vw, var(--hf-h2))}
h3{font-size:var(--hf-h3)}
h4{font-size:1.1rem}
p{margin:0 0 1em}
.measure{max-width:var(--hf-measure)}
ul,ol{padding-left:1.3em; margin:0 0 1em}
li{margin:.35em 0}
code,.mono{font-family:var(--hf-font-mono); font-size:.95em; overflow-wrap:anywhere}
small,.small{font-size:var(--hf-small)}
.muted{color:var(--hf-slag)}
strong,b{font-weight:700}
.sr-only{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-9999px; top:0; background:var(--hf-ember); color:var(--hf-on-ember); padding:12px 16px; z-index:100; font-weight:700}
.skip:focus{left:8px; top:8px}
svg.i{width:1.3em; height:1.3em; flex:none; vertical-align:-.25em}

/* ---------- Demo banner: Amber fill + On Ember text, sticky ---------- */
.demo-banner{position:sticky; top:0; z-index:60; background:var(--hf-amber); color:var(--hf-on-ember);
  font-weight:700; padding:10px 16px; display:flex; gap:10px 14px; align-items:center; justify-content:center; flex-wrap:wrap;
  border-bottom:var(--hf-border) solid var(--hf-on-ember); text-align:center}
.demo-banner a{color:var(--hf-on-ember); text-decoration-color:var(--hf-on-ember)}
.demo-banner a:hover{text-decoration-color:var(--hf-on-ember)}
.demo-banner :focus-visible{outline-color:var(--hf-on-ember)}
.empty-banner{position:sticky; top:0; z-index:60; background:var(--hf-steel); color:var(--hf-ingot); border-bottom:var(--hf-border) solid var(--hf-rivet);
  padding:10px 16px; text-align:center; font-weight:700}

/* ---------- Top app bar ---------- */
.topbar{position:sticky; top:var(--banner-h,0px); z-index:50; background:var(--hf-steel); border-bottom:var(--hf-border) solid var(--hf-rivet);
  display:flex; align-items:center; gap:12px; padding:6px 16px; min-height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; min-height:var(--tap)}
.brand .lockup{height:32px; width:auto; display:none}
.brand .mark{width:40px; height:40px}
.brand .word{font-family:var(--hf-font-display); font-weight:700; font-size:1.1rem; color:var(--hf-ingot); white-space:nowrap}
@media (max-width:479px){.icon-btn#menu-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
.topbar .spacer{flex:1}
.mode-badge{display:inline-flex; align-items:center; gap:6px; font-weight:700; padding:4px 10px; border-radius:var(--hf-radius); min-height:40px; text-decoration:none; font-size:var(--hf-small)}
.mode-badge.demo{background:var(--hf-amber); color:var(--hf-on-ember); border:var(--hf-border) solid var(--hf-on-ember); text-decoration:none}
.mode-badge.demo:hover{background:var(--hf-ember); color:var(--hf-on-ember)}
.mode-badge.empty{background:var(--hf-plate); color:var(--hf-ingot); border:var(--hf-border) solid var(--hf-rivet)}
.topnav{display:none; gap:4px}
.topnav a{color:var(--hf-slag); text-decoration:none; padding:8px 12px; border-radius:var(--hf-radius); min-height:var(--tap); display:inline-flex; align-items:center; font-weight:700; border:var(--hf-border) solid transparent}
.topnav a:hover{background:var(--hf-plate); color:var(--hf-ingot)}
.topnav a[aria-current="page"]{color:var(--hf-ingot); border-bottom-color:var(--hf-ember)}
.icon-btn{appearance:none; background:var(--hf-steel); border:var(--hf-border) solid var(--hf-rivet); color:var(--hf-ingot); min-width:var(--tap); height:var(--tap); border-radius:var(--hf-radius); display:inline-flex; gap:6px; align-items:center; justify-content:center; cursor:pointer; font:inherit; font-weight:700; padding:0 10px}
.icon-btn:hover{background:var(--hf-plate)}

/* Drawer */
.drawer-backdrop{position:fixed; inset:0; background:var(--hf-iron); opacity:.85; z-index:80}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(380px, 92vw); background:var(--hf-steel); border-left:var(--hf-border) solid var(--hf-rivet); z-index:81; padding:16px; overflow:auto}
.drawer h2{font-family:var(--hf-font-body); font-size:var(--hf-small); color:var(--hf-slag); margin:20px 8px 6px; font-weight:700}
.drawer a{display:flex; align-items:center; gap:12px; padding:10px 12px; min-height:var(--tap); color:var(--hf-ingot); text-decoration:none; border-radius:var(--hf-radius); font-weight:700; border:var(--hf-border) solid transparent}
.drawer a:hover{background:var(--hf-plate)}
.drawer a[aria-current="page"]{border-color:var(--hf-rivet); background:var(--hf-plate)}
.drawer a svg{color:var(--hf-ember)}
.drawer-head{display:flex; justify-content:space-between; align-items:center}

/* ---------- Layout ---------- */
main{display:block; outline:none}
.wrap{max-width:1120px; margin:0 auto; padding:24px 16px 56px}
.app .wrap{padding-bottom:130px; max-width:980px}
.page-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:20px}
.page-head p{margin:0; color:var(--hf-slag)}
.eyebrow{display:block; color:var(--hf-slag); font-weight:700; margin-bottom:4px}
.eyebrow::before{content:""; display:inline-block; width:18px; height:4px; background:var(--hf-ember); vertical-align:middle; margin-right:8px; border-radius:2px}
.grid{display:grid; gap:16px}
.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}
.grid.kpis{grid-template-columns:repeat(2, minmax(0,1fr))}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.between{justify-content:space-between}

/* ---------- Cards ---------- */
.card{padding:20px}
.card.tonal{background:var(--hf-plate)}
.card.outline{background:transparent}
.card > :last-child{margin-bottom:0}
.card.verified{border-left:8px solid var(--hf-sage)}
.card.accrued{border-left:8px solid var(--hf-amber)}
.card.estimate{border-style:dashed; border-color:var(--hf-ingot); background:var(--hf-iron)}
.card.danger{border-left:8px solid var(--hf-scale)}
.card.notice{border-left:8px solid var(--hf-ember)}
.section{margin:36px 0}
.section-title{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.section-title h2,.section-title h3{margin:0}
.rank{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:var(--hf-radius); background:var(--hf-plate); border:var(--hf-border) solid var(--hf-rivet); font-weight:700}

.kpi{background:var(--hf-steel); border:var(--hf-border) solid var(--hf-rivet); border-radius:var(--hf-radius-card); padding:14px 16px; min-width:0}
.kpi .label{color:var(--hf-slag); font-weight:700}
.kpi .value{font-family:var(--hf-font-display); font-size:1.55rem; font-weight:700; line-height:1.2; margin:4px 0; overflow-wrap:anywhere}
.kpi .sub{color:var(--hf-slag); font-size:var(--hf-small)}
.headline-figure{font-family:var(--hf-font-display); font-size:clamp(2rem, 7vw, 2.75rem); font-weight:700; line-height:1.1; margin:.2em 0}

/* ---------- Tags (data labels) ---------- */
.tag{display:inline-flex; align-items:center; gap:5px; font-size:var(--hf-small); font-weight:700; padding:0 8px; border-radius:6px; vertical-align:middle; white-space:nowrap; line-height:1.6; border:var(--hf-border) solid var(--hf-rivet); background:var(--hf-plate); color:var(--hf-ingot)}
.tag svg{width:16px;height:16px}
.tag.demo,.tag.sample{background:var(--hf-amber); color:var(--hf-on-ember); border-color:var(--hf-on-ember)}
.tag.verified{border-left:6px solid var(--hf-sage)}
.tag.accrued{border-left:6px solid var(--hf-amber)}
.tag.estimate{border-style:dashed; border-color:var(--hf-ingot); background:var(--hf-iron)}
.tag.unknown{border-left:6px solid var(--hf-scale)}
.tag.user{background:var(--hf-steel)}

/* ---------- Status chip: color bar + icon + word ---------- */
.chip{min-height:36px; gap:.4rem; font-size:var(--hf-small); white-space:nowrap}
.chip svg{width:20px; height:20px}
.chip.ok::before{background:var(--hf-sage)}
.chip.warn::before{background:var(--hf-amber)}
.chip.bad::before{background:var(--hf-scale)}
.chip.neutral::before{background:var(--hf-rivet)}
.chip.info::before{background:var(--hf-ingot)}

/* ---------- Buttons ---------- */
.btn{appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; line-height:1.2; text-align:center}
.btn svg{width:22px;height:22px}
.btn.primary{background:var(--hf-ember); color:var(--hf-on-ember)}
.btn.primary:hover{background:var(--hf-amber); color:var(--hf-on-ember)}
.btn.secondary,.btn.ghost{background:var(--hf-steel); color:var(--hf-ingot); border-color:var(--hf-rivet)}
.btn.secondary:hover,.btn.ghost:hover{background:var(--hf-plate); color:var(--hf-ingot)}
.btn.danger{background:var(--hf-steel); color:var(--hf-ingot); border-color:var(--hf-scale)}
.btn.danger svg{color:var(--hf-scale)}
.btn.danger:hover{background:var(--hf-plate)}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--hf-plate); color:var(--hf-slag); border-color:var(--hf-rivet); cursor:not-allowed}
.btn.block{width:100%}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px}
.locked-note{display:flex; gap:8px; align-items:flex-start; font-weight:700; margin-top:10px; padding:8px 12px; border-left:6px solid var(--hf-scale); background:var(--hf-plate); border-radius:var(--hf-radius)}

/* ---------- Forms ---------- */
form .field{margin-bottom:22px}
label,.label{display:block; font-weight:700; margin-bottom:6px}
.req{font-weight:400; color:var(--hf-slag)}
.hint{display:block; color:var(--hf-slag); font-size:var(--hf-small); margin-top:4px; font-weight:400}
input[type=text],input[type=email],input[type=number],input[type=password],input[type=url],select,textarea{
  width:100%; min-height:var(--hf-control-h); padding:.6rem .9rem; font-family:var(--hf-font-body); font-size:var(--hf-body); color:var(--hf-ingot);
  background:var(--hf-plate); border:var(--hf-border) solid var(--hf-rivet); border-radius:var(--hf-radius)}
input::placeholder,textarea::placeholder{color:var(--hf-slag)}
textarea{min-height:110px; resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--hf-ingot)}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--hf-scale); border-left-width:8px}
.error{display:flex; gap:6px; align-items:flex-start; font-weight:700; margin-top:6px}
.error svg{color:var(--hf-scale); width:22px; height:22px; flex:none; margin-top:2px}
.check{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:var(--hf-border) solid var(--hf-rivet); background:var(--hf-steel); border-radius:var(--hf-radius); cursor:pointer; min-height:var(--tap); font-weight:700}
.check input{width:26px; height:26px; margin:2px 0 0; accent-color:var(--hf-ember); flex:none}
.radio-cards{display:grid; gap:10px}
.radio-card{display:flex; gap:12px; align-items:flex-start; padding:14px; border:var(--hf-border) solid var(--hf-rivet); background:var(--hf-steel); border-radius:var(--hf-radius); cursor:pointer}
.radio-card input{width:24px;height:24px;accent-color:var(--hf-ember); margin-top:3px; flex:none}
.radio-card:has(input:checked){border-color:var(--hf-ember); border-left-width:8px}
.radio-card strong{display:block}
fieldset{border:0; padding:0; margin:0 0 22px}
legend{font-weight:700; margin-bottom:8px; padding:0}
.input-unit{display:flex; align-items:stretch}
.input-unit input{border-top-right-radius:0; border-bottom-right-radius:0}
.input-unit span{display:grid; place-items:center; padding:0 14px; background:var(--hf-steel); border:var(--hf-border) solid var(--hf-rivet); border-left:0; border-radius:0 var(--hf-radius) var(--hf-radius) 0; color:var(--hf-slag); font-weight:700; white-space:nowrap}
.form-section{border-top:var(--hf-border) solid var(--hf-rivet); padding-top:20px; margin-top:8px}
.switch-row{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 0; border-bottom:var(--hf-border) solid var(--hf-plate); min-height:var(--tap)}
.switch-row input[type=checkbox]{width:28px;height:28px;accent-color:var(--hf-ember); flex:none}

/* ---------- Lists / tables ---------- */
.list{list-style:none; padding:0; margin:0; border:var(--hf-border) solid var(--hf-rivet); border-radius:var(--hf-radius-card); overflow:hidden; background:var(--hf-steel)}
.list > li{margin:0; border-top:var(--hf-border) solid var(--hf-plate)}
.list > li:first-child{border-top:0}
.list-row{display:grid; grid-template-columns:1fr auto; gap:6px 16px; padding:16px; color:inherit; text-decoration:none; min-height:72px; align-items:center}
a.list-row:hover{background:var(--hf-plate)}
.list-row .title{font-family:var(--hf-font-display); font-weight:600; font-size:1.15rem}
.list-row .meta{color:var(--hf-slag); display:flex; flex-wrap:wrap; gap:4px 18px}
.list-row .chev{width:26px;height:26px;color:var(--hf-slag)}
.dl{display:grid; grid-template-columns:1fr; margin:0}
.dl > div{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:var(--hf-border) solid var(--hf-plate); flex-wrap:wrap}
.dl dt{color:var(--hf-slag); font-weight:700}
.dl dd{margin:0; font-weight:700; text-align:right; overflow-wrap:anywhere}
.table-wrap{overflow-x:auto; border:var(--hf-border) solid var(--hf-rivet); border-radius:var(--hf-radius-card)}
table{border-collapse:collapse; width:100%; min-width:580px; background:var(--hf-steel)}
th,td{padding:12px 14px; text-align:left; border-bottom:var(--hf-border) solid var(--hf-plate); vertical-align:top}
th{background:var(--hf-plate); color:var(--hf-ingot); font-weight:700}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
tfoot td{font-weight:700; background:var(--hf-plate)}
caption{text-align:left; padding:10px 14px; color:var(--hf-slag); caption-side:bottom}

/* ---------- Charts ---------- */
.chart{background:var(--hf-iron); border:var(--hf-border) solid var(--hf-rivet); border-radius:var(--hf-radius); padding:8px; margin-top:8px}
.chart svg{display:block; width:100%; height:auto}
.chart .legend{display:flex; gap:16px; flex-wrap:wrap; font-size:var(--hf-small); color:var(--hf-slag); padding:4px 6px 2px}
.chart .legend i{display:inline-block; width:24px; height:4px; vertical-align:middle; margin-right:6px}

/* ---------- Formula / disclaimers / callouts ---------- */
.formula{font-family:var(--hf-font-mono); background:var(--hf-iron); border:var(--hf-border) solid var(--hf-rivet); border-left:8px solid var(--hf-ember); border-radius:var(--hf-radius); padding:14px 16px; line-height:1.75; overflow-x:auto; white-space:pre-wrap; overflow-wrap:anywhere}
.disclaimer{display:flex; gap:12px; align-items:flex-start; background:var(--hf-steel); border:var(--hf-border) solid var(--hf-rivet); border-left:8px solid var(--hf-amber); border-radius:var(--hf-radius); padding:14px 16px}
.disclaimer svg{color:var(--hf-amber); flex:none; margin-top:2px}
.callout{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--hf-radius); background:var(--hf-steel); border:var(--hf-border) solid var(--hf-rivet); border-left-width:8px}
.callout > svg{flex:none; margin-top:2px}
.callout.warn{border-left-color:var(--hf-amber)} .callout.warn > svg{color:var(--hf-amber)}
.callout.bad{border-left-color:var(--hf-scale)} .callout.bad > svg{color:var(--hf-scale)}
.callout.ok{border-left-color:var(--hf-sage)} .callout.ok > svg{color:var(--hf-sage)}
.callout.info{border-left-color:var(--hf-ingot)}
.callout p:last-child{margin-bottom:0}

/* ---------- Landing ---------- */
.hero{padding:20px 0 8px}
.hero h1{max-width:18ch}
.hero .lede{font-size:1.2rem; color:var(--hf-slag); max-width:var(--hf-measure)}
.honesty{background:var(--hf-steel); border:var(--hf-border) solid var(--hf-ember); border-radius:var(--hf-radius-card); padding:18px; margin:20px 0}
.honesty h2{font-size:var(--hf-h3)}
.honesty ul{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.honesty li{display:flex; gap:12px; align-items:flex-start; margin:0; font-weight:700}
.honesty li svg{color:var(--hf-ember); margin-top:3px}
.feature .f-ico{width:36px;height:36px;color:var(--hf-ember); margin-bottom:6px}
.phone{max-width:340px; margin:0 auto; border:var(--hf-border) solid var(--hf-rivet); outline:10px solid var(--hf-steel); border-radius:24px; background:var(--hf-iron); overflow:hidden}
.phone .ph-top{background:var(--hf-amber); color:var(--hf-on-ember); font-weight:700; font-size:var(--hf-small); text-align:center; padding:6px}
.phone .ph-body{padding:14px}
.phone .ph-nav{display:grid; grid-template-columns:repeat(4,1fr); border-top:var(--hf-border) solid var(--hf-rivet); background:var(--hf-steel); font-size:var(--hf-small); text-align:center; color:var(--hf-slag)}
.phone .ph-nav div{padding:8px 2px}
.phone .ph-nav div.on{color:var(--hf-ingot); font-weight:700; box-shadow:inset 0 4px 0 var(--hf-ember)}
.phone .ph-row{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 0; border-bottom:var(--hf-border) solid var(--hf-plate); font-size:var(--hf-small)}
.steps{counter-reset:s; list-style:none; padding:0; display:grid; gap:14px}
.steps > li{counter-increment:s; position:relative; padding:18px 18px 18px 74px; background:var(--hf-steel); border:var(--hf-border) solid var(--hf-rivet); border-radius:var(--hf-radius-card); margin:0}
.steps > li::before{content:counter(s); position:absolute; left:18px; top:18px; width:40px; height:40px; border-radius:var(--hf-radius); background:var(--hf-ember); color:var(--hf-on-ember); font-family:var(--hf-font-display); font-weight:700; display:grid; place-items:center; font-size:1.15rem}
.steps h3{margin-bottom:.3em}
.not-list{padding:0}
.not-list li{display:flex; gap:10px; align-items:flex-start; list-style:none}
.not-list li svg{color:var(--hf-scale); margin-top:3px}
details{background:var(--hf-steel); border:var(--hf-border) solid var(--hf-rivet); border-radius:var(--hf-radius-card); padding:0 18px; margin-bottom:10px}
summary{cursor:pointer; font-family:var(--hf-font-display); font-weight:600; font-size:1.12rem; min-height:var(--tap); padding:14px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-size:1.6rem; color:var(--hf-ember); line-height:1}
details[open] summary::after{content:"\2212"}
details > div{padding-bottom:16px; color:var(--hf-slag)}
.legal h2{margin-top:1.6em}
.legal{max-width:var(--hf-measure)}
.placeholder-note{background:var(--hf-steel); border:var(--hf-border) solid var(--hf-rivet); border-left:8px solid var(--hf-amber); border-radius:var(--hf-radius); padding:14px 16px; font-weight:700}

/* ---------- Setup wizard ---------- */
.wizard{max-width:640px; margin:0 auto}
.progress{display:flex; gap:6px; margin:8px 0 6px}
.progress span{flex:1; height:10px; border-radius:2px; background:var(--hf-plate); border:var(--hf-border) solid var(--hf-rivet)}
.progress span.done{background:var(--hf-ember); border-color:var(--hf-ember)}
.progress span.current{background:var(--hf-ingot); border-color:var(--hf-ingot)}
.progress-label{color:var(--hf-slag); font-weight:700; margin-bottom:16px}
.wizard-actions{display:flex; gap:12px; flex-wrap:wrap-reverse; justify-content:space-between; margin-top:24px; padding:12px 0; border-top:var(--hf-border) solid var(--hf-plate)}
.wizard-actions .btn{flex:1 1 200px}

/* ---------- Dialog ---------- */
dialog{border:var(--hf-border) solid var(--hf-ember); border-radius:var(--hf-radius-card); background:var(--hf-steel); color:var(--hf-ingot); padding:0; max-width:min(580px, calc(100vw - 24px)); width:100%; max-height:calc(100vh - 24px)}
dialog::backdrop{background:var(--hf-iron); opacity:.88}
.dialog-body{padding:22px; overflow:auto}
.dialog-body h2{display:flex; gap:10px; align-items:center; font-size:var(--hf-h3)}
.dialog-body h2 svg{width:30px;height:30px;color:var(--hf-ember); flex:none}
.dialog-actions{display:flex; gap:12px; flex-wrap:wrap-reverse; padding:0 22px 22px}
.dialog-actions .btn{flex:1 1 180px}
.effects{background:var(--hf-iron); border-radius:var(--hf-radius); padding:12px 16px; border:var(--hf-border) solid var(--hf-rivet); margin:0 0 14px}
.effects dt{font-weight:700; color:var(--hf-slag); margin-top:8px}
.effects dt:first-child{margin-top:0}
.effects dd{margin:0}

/* ---------- Bottom nav ---------- */
.bottom-nav{position:fixed; left:0; right:0; bottom:0; z-index:55; background:var(--hf-steel); border-top:var(--hf-border) solid var(--hf-rivet);
  display:grid; grid-template-columns:repeat(4,1fr); padding-bottom:env(safe-area-inset-bottom)}
.bottom-nav a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:70px; color:var(--hf-slag); text-decoration:none; font-weight:700; font-size:var(--hf-small); position:relative; border-top:4px solid transparent}
.bottom-nav a svg{width:26px; height:26px}
.bottom-nav a:hover{background:var(--hf-plate); color:var(--hf-ingot)}
.bottom-nav a[aria-current="page"]{color:var(--hf-ingot); border-top-color:var(--hf-ember); background:var(--hf-plate)}
.bottom-nav a[aria-current="page"] svg{color:var(--hf-ember)}
.bottom-nav .badge{position:absolute; top:6px; left:calc(50% + 8px); background:var(--hf-ingot); color:var(--hf-iron); font-size:var(--hf-small); font-weight:700; border-radius:6px; padding:0 6px; min-width:24px; text-align:center; line-height:1.4}

/* ---------- Toast ---------- */
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:92px; z-index:90; background:var(--hf-ingot); color:var(--hf-iron); font-weight:700; padding:14px 20px; border-radius:var(--hf-radius); max-width:calc(100vw - 32px); border:var(--hf-border) solid var(--hf-iron); transition:opacity var(--hf-dur) var(--hf-ease)}

/* ---------- Footer ---------- */
footer.site{border-top:var(--hf-border) solid var(--hf-rivet); background:var(--hf-steel); padding:28px 16px 40px; color:var(--hf-slag)}
footer.site .wrap{padding:0}
footer.site nav{display:flex; flex-wrap:wrap; gap:4px 10px; margin:12px 0}
footer.site nav a{padding:10px 6px; min-height:var(--tap); display:inline-flex; align-items:center}
.app footer.site{padding-bottom:120px}
.updated{display:inline-flex; gap:6px; align-items:center; color:var(--hf-slag); font-size:var(--hf-small)}
.stale{font-weight:700}
.audit li{margin:.5em 0}

@media (min-width:720px){
  .grid.cols-2{grid-template-columns:1fr 1fr}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
  .grid.kpis{grid-template-columns:repeat(3, minmax(0,1fr))}
  .hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center}
  .dl{grid-template-columns:1fr 1fr; column-gap:32px}
  .brand .lockup{display:block}
  .brand .mark,.brand .word{display:none}
}
@media (min-width:1040px){
  .topnav{display:flex}
  .grid.kpis.k4{grid-template-columns:repeat(4, minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
@media print{.bottom-nav,.topbar .icon-btn{display:none} .demo-banner{position:static}}
main:focus, h1[tabindex="-1"]:focus{outline:none}
.not-list.plain li svg{color:var(--hf-ember)}