:root{
  --bg:#000000; --panel:#141414; --panel2:#1d1d1d; --line:#2e2e2e;
  --text:#f2f2f2; --muted:#9a9a9a; --brand:#FF6700; --led:#FFB300; --good:#7CD992;
  --disp:'Big Shoulders Display','Arial Narrow',Arial,sans-serif;
  --body:'Public Sans',Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--text)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,label:focus-within{outline:3px solid var(--led);outline-offset:2px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
header.top{border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.mark{font-family:var(--disp);font-weight:800;font-size:28px;letter-spacing:.01em;text-decoration:none}
.mark b{color:var(--brand)}
nav a{color:var(--muted);text-decoration:none;margin-left:22px;font-size:15px}
nav a:hover,nav a[aria-current]{color:var(--text)}
h1,h2,h3{font-family:var(--disp);font-weight:800;line-height:.98;margin:0}
h1{font-size:clamp(46px,7vw,88px);letter-spacing:-.005em}
h2{font-size:clamp(34px,4.4vw,52px);margin-bottom:18px}
h3{font-size:26px;margin-bottom:8px}
p{margin:0 0 14px;max-width:62ch}
.muted{color:var(--muted)}
.btn{display:inline-block;background:var(--brand);color:#000;border:0;font:700 16px var(--body);padding:14px 22px;cursor:pointer;text-decoration:none}
.btn:hover{background:#ff8533}
.btn.ghost{background:transparent;color:var(--text);border:2px solid var(--text)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
input[type=text],input[type=number],select{background:#000;color:var(--text);border:2px solid var(--line);font:600 17px var(--body);padding:12px 14px}
input[type=text]:focus,input[type=number]:focus,select:focus{border-color:var(--led);outline:none}
section{padding:84px 0;border-bottom:1px solid var(--line)}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start;padding:64px 0 84px}
.hero p.lede{font-size:20px;color:#d6d6d6;margin:22px 0 28px}
.pcform{display:flex;gap:10px;flex-wrap:wrap}
.pcform input{width:200px;text-transform:uppercase}
.fine{font-size:13px;color:var(--muted);margin-top:14px}

/* totem */
.totem{background:#050505;border:6px solid #1f1f1f;box-shadow:0 0 0 2px #2b2b2b inset;padding:0}
.totem .cap{background:var(--brand);color:#000;font-family:var(--disp);font-weight:800;font-size:22px;padding:12px 18px;letter-spacing:.04em;text-transform:uppercase}
.totem .rowp{display:flex;justify-content:space-between;align-items:baseline;padding:14px 18px;border-top:2px solid #1b1b1b}
.totem .lbl{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.06em;text-transform:uppercase;color:#cfcfcf}
.totem .lbl small{display:block;font-family:var(--body);font-weight:400;font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted)}
.led{font-family:var(--disp);font-weight:800;font-size:52px;color:var(--led);text-shadow:0 0 14px rgba(255,179,0,.35);font-variant-numeric:tabular-nums;line-height:1}
.led sup{font-size:.45em;vertical-align:top;margin-left:2px}
.totem .foot{padding:12px 18px;border-top:2px solid #1b1b1b;font-size:13px;color:var(--muted)}
.totem.idle .led{color:#3a2c00;text-shadow:none}

/* preview result */
.result{margin-top:34px;display:none}
.result.on{display:block}
.calc{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:10px 0 18px}
.calc input{width:96px}
.bigline{font-family:var(--disp);font-weight:800;font-size:clamp(30px,4vw,44px);line-height:1.05}
.bigline em{font-style:normal;color:var(--brand)}
table{border-collapse:collapse;width:100%;font-size:15px}
th{text-align:left;font-weight:700;color:var(--muted);font-size:13px;padding:8px 10px;border-bottom:2px solid var(--line)}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tr.cheap td{color:var(--good)}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 6px;border:1px solid var(--muted);color:var(--muted);margin-left:6px;vertical-align:1px}
.tag.mw{border-color:var(--brand);color:var(--brand)}
.scroll{overflow-x:auto}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--text)}
.steps div{padding:26px 26px 10px 0;border-right:1px solid var(--line)}
.steps div+div{padding-left:26px}
.steps div:last-child{border-right:0}
.steps .num{font-family:var(--disp);font-weight:800;font-size:64px;color:var(--brand);line-height:1}

/* pricing */
.price{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;border:2px solid var(--text)}
.price>div{padding:26px;border-right:1px solid var(--line)}
.price>div:last-child{border-right:0}
.price .amt{font-family:var(--disp);font-weight:800;font-size:48px;line-height:1}
.price .amt small{font-size:18px;font-family:var(--body);font-weight:400;color:var(--muted)}
.price .lead{background:var(--brand);color:#000}
.price .lead .muted{color:#2b1500}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px}
ul.tight{padding-left:18px;margin:0}
ul.tight li{margin-bottom:8px}
footer{padding:40px 0 60px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* audit tool */
.drop{border:2px dashed #555;padding:40px;text-align:center;cursor:pointer}
.drop.over{border-color:var(--led);background:#0d0a00}
.maprow{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px 18px;margin:18px 0}
.maprow label{display:block;font-size:13px;color:var(--muted);font-weight:700}
.maprow select{width:100%;margin-top:4px;font-size:15px;padding:9px}
.opts{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:10px 0 24px}
.opts label{font-size:14px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--text);margin:24px 0}
.kpis>div{padding:20px;border-right:1px solid var(--line)}
.kpis>div:last-child{border-right:0}
.kpis .v{font-family:var(--disp);font-weight:800;font-size:44px;line-height:1}
.kpis .v.hot{color:var(--brand)}
.kpis .k{font-size:13px;color:var(--muted);margin-top:6px}
.panel{background:var(--panel);padding:22px;margin:18px 0}
.warn{border-left:4px solid var(--led);padding:12px 16px;background:#0d0a00;margin:14px 0;font-size:15px}
.hide{display:none!important}
.progress{height:6px;background:#222;margin:14px 0}
.progress i{display:block;height:100%;width:0;background:var(--led)}

@media (max-width:860px){
  .hero,.split{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}.steps div{border-right:0;border-bottom:1px solid var(--line);padding-left:0!important}
  .price{grid-template-columns:1fr}.price>div{border-right:0;border-bottom:1px solid var(--line)}
  .kpis{grid-template-columns:1fr 1fr}.kpis>div:nth-child(2){border-right:0}.kpis>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  nav a{margin-left:14px}
  section{padding:56px 0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{
  @page{margin:12mm}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact;font-size:12px}
  header.top nav,.noprint,footer{display:none!important}
  section{padding:18px 0;border:0}
  .kpis .v{font-size:30px}
}
@media (max-width:560px){nav a:not(:last-child){display:none}}