/* MetallGarant client report — shared industrial style */
:root{
  --bg:#eceef0;--panel:#fff;--panel-2:#f5f6f8;--panel-3:#eef1f4;--ink:#15181c;--ink-soft:#39424b;--muted:#6a7480;
  --hair:#d9dde2;--hair-strong:#c3c9d0;--brand:#c01d24;--brand-ink:#96161c;--good:#1c7a4f;--good-bg:#e3f2ea;
  --warn:#a3660a;--warn-bg:#f6ecd6;--crit:#c01d24;--crit-bg:#f7e0e1;--steel:#3d6a8f;--steel-bg:#e4edf4;--gold:#a8791b;
  --shadow:0 1px 2px rgba(16,22,28,.05),0 8px 26px rgba(16,22,28,.05);
  --mono:ui-monospace,"SF Mono","Cascadia Code","Consolas",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0e1113;--panel:#191d21;--panel-2:#14181b;--panel-3:#1f242a;--ink:#eef1f3;--ink-soft:#c3ccd2;--muted:#8a949d;
  --hair:#2a3037;--hair-strong:#373f47;--brand:#f0555c;--brand-ink:#f0555c;--good:#4cc38a;--good-bg:#11261c;
  --warn:#e2a53a;--warn-bg:#291f0f;--crit:#f0555c;--crit-bg:#2b1315;--steel:#7db0d8;--steel-bg:#14232f;--gold:#d6a63f;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
}}
:root[data-theme="light"]{--bg:#eceef0;--panel:#fff;--panel-2:#f5f6f8;--panel-3:#eef1f4;--ink:#15181c;--ink-soft:#39424b;--muted:#6a7480;--hair:#d9dde2;--hair-strong:#c3c9d0;--brand:#c01d24;--brand-ink:#96161c;--good:#1c7a4f;--good-bg:#e3f2ea;--warn:#a3660a;--warn-bg:#f6ecd6;--crit:#c01d24;--crit-bg:#f7e0e1;--steel:#3d6a8f;--steel-bg:#e4edf4;--gold:#a8791b;--shadow:0 1px 2px rgba(16,22,28,.05),0 8px 26px rgba(16,22,28,.05);}
:root[data-theme="dark"]{--bg:#0e1113;--panel:#191d21;--panel-2:#14181b;--panel-3:#1f242a;--ink:#eef1f3;--ink-soft:#c3ccd2;--muted:#8a949d;--hair:#2a3037;--hair-strong:#373f47;--brand:#f0555c;--brand-ink:#f0555c;--good:#4cc38a;--good-bg:#11261c;--warn:#e2a53a;--warn-bg:#291f0f;--crit:#f0555c;--crit-bg:#2b1315;--steel:#7db0d8;--steel-bg:#14232f;--gold:#d6a63f;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:var(--steel);text-decoration:none;}
.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(14px,4vw,40px) 90px;}

/* Top nav */
.topnav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair);}
.topnav .inner{max-width:1080px;margin:0 auto;padding:11px clamp(14px,4vw,40px);display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.topnav .brand{font-weight:800;letter-spacing:-.01em;font-size:15px;display:flex;align-items:center;gap:9px;}
.topnav .brand .mk{width:10px;height:18px;background:var(--brand);display:inline-block;border-radius:1px;}
.topnav nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto;}
.topnav nav a{font-size:13px;color:var(--ink-soft);padding:6px 11px;border-radius:7px;font-weight:600;}
.topnav nav a:hover{background:var(--panel-2);}
.topnav nav a.active{background:var(--brand);color:#fff;}

/* Masthead */
.mast{border-top:4px solid var(--brand);padding-top:26px;margin-top:26px;}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--brand-ink);font-weight:600;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.eyebrow .tick{width:8px;height:8px;background:var(--brand);display:inline-block;}
h1{font-size:clamp(28px,5.2vw,50px);line-height:1.02;margin:14px 0 12px;letter-spacing:-.022em;font-weight:800;text-wrap:balance;}
.sub{color:var(--muted);font-size:16px;max-width:66ch;}
.meta-row{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;padding-top:16px;border-top:1px solid var(--hair);font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);}
.meta-row b{color:var(--ink);font-weight:600;}
.meta-row span{display:inline-flex;gap:7px;}

section{margin-top:52px;}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:8px;}
.sec-num{font-family:var(--mono);font-size:13px;color:var(--brand-ink);font-weight:600;}
h2{font-size:clamp(21px,3vw,27px);margin:0;letter-spacing:-.01em;font-weight:780;}
h3.blk{font-size:14.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin:28px 0 12px;}
.lead{color:var(--ink-soft);font-size:15.5px;margin:6px 0 20px;max-width:74ch;}
p.body{color:var(--ink-soft);font-size:15px;max-width:74ch;}
.body b{color:var(--ink);font-weight:650;}

/* Cards / panels */
.panel{background:var(--panel);border:1px solid var(--hair);border-radius:12px;box-shadow:var(--shadow);padding:20px 22px;margin-bottom:14px;}
.panel h3.pt{margin:0 0 2px;font-size:17px;font-weight:700;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.panel .url{font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:400;}
.findings{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:11px;}
.findings li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;}
.findings li .txt{font-size:14.5px;color:var(--ink-soft);}
.findings li .txt b{color:var(--ink);font-weight:650;}
.chip{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:5px;white-space:nowrap;margin-top:2px;display:inline-block;}
.chip.crit{background:var(--crit-bg);color:var(--crit);}.chip.warn{background:var(--warn-bg);color:var(--warn);}.chip.good{background:var(--good-bg);color:var(--good);}.chip.info{background:var(--steel-bg);color:var(--steel);}.chip.gold{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold);}
.num,.cnum{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* Scorecard */
.scores{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px;}
@media (max-width:760px){.scores{grid-template-columns:repeat(2,1fr);}}
.score{background:var(--panel);border:1px solid var(--hair);border-radius:10px;padding:15px 16px 13px;box-shadow:var(--shadow);position:relative;overflow:hidden;}
.score::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--sev);}
.score .lab{font-size:12.5px;color:var(--muted);font-weight:600;}
.score .grade{font-family:var(--mono);font-size:30px;font-weight:700;margin-top:5px;color:var(--sev);}
.score .st{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}

/* KPI readout */
.readout{margin-top:14px;background:var(--panel);border:1px solid var(--hair);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;}
.readout .bar{background:var(--panel-2);border-bottom:1px solid var(--hair);padding:9px 16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);}
.kpis{display:grid;grid-template-columns:repeat(6,1fr);}
@media (max-width:760px){.kpis{grid-template-columns:repeat(3,1fr);}}
@media (max-width:440px){.kpis{grid-template-columns:repeat(2,1fr);}}
.kpi{padding:15px 14px;border-right:1px solid var(--hair);border-top:1px solid var(--hair);}
.kpi .n{font-family:var(--mono);font-size:21px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.kpi .k{font-size:11.5px;color:var(--muted);margin-top:3px;}
.kpi .n.bad{color:var(--crit);}.kpi .n.ok{color:var(--good);}.kpi .n.warn{color:var(--warn);}

/* Big hero stats */
.hero-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px;}
@media (max-width:760px){.hero-stat{grid-template-columns:1fr;}}
.hs{background:var(--panel);border:1px solid var(--hair);border-radius:12px;box-shadow:var(--shadow);padding:18px 20px;position:relative;overflow:hidden;}
.hs::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c);}
.hs .big{font-family:var(--mono);font-size:33px;font-weight:800;color:var(--c);letter-spacing:-.02em;line-height:1;}
.hs .cap{font-size:13px;color:var(--ink-soft);margin-top:8px;}
.hs .sub2{font-size:12px;color:var(--muted);margin-top:3px;}

/* Tables */
.tablewrap{overflow-x:auto;border:1px solid var(--hair);border-radius:12px;box-shadow:var(--shadow);margin-top:6px;}
table{border-collapse:collapse;width:100%;min-width:600px;background:var(--panel);}
thead th{background:var(--panel-2);text-align:left;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:11px 13px;border-bottom:1px solid var(--hair-strong);white-space:nowrap;}
tbody td{padding:11px 13px;border-bottom:1px solid var(--hair);font-size:13.3px;color:var(--ink-soft);vertical-align:top;}
tbody tr:last-child td{border-bottom:none;}
tfoot td{padding:12px 13px;font-size:13.3px;font-weight:700;background:var(--panel-2);border-top:1px solid var(--hair-strong);color:var(--ink);}
td.r,th.r,tfoot td.r{text-align:right;}
.bad{color:var(--crit);font-weight:600;}.ok{color:var(--good);font-weight:600;}.warnc{color:var(--warn);font-weight:600;}
tr.waste td{background:color-mix(in srgb,var(--crit-bg) 55%,transparent);}
tr.win td{background:color-mix(in srgb,var(--good-bg) 55%,transparent);}
.me-col{background:color-mix(in srgb,var(--brand) 8%,transparent);}

/* Callout */
.callout{border:1px solid var(--steel);background:var(--steel-bg);border-radius:12px;padding:16px 20px;margin-top:14px;font-size:14.5px;color:var(--ink-soft);}
.callout.crit{border-color:var(--crit);background:var(--crit-bg);}
.callout.good{border-color:var(--good);background:var(--good-bg);}
.callout b{color:var(--ink);}

/* Root cause flow */
.rootcause{border:1px solid var(--crit);background:var(--crit-bg);border-radius:14px;padding:22px 24px;margin-top:14px;}
.rootcause .tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--crit);font-weight:700;}
.rootcause h3{margin:7px 0 6px;font-size:19px;}
.rootcause p{margin:0 0 16px;font-size:14.5px;color:var(--ink-soft);}
.flow{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;}
@media (max-width:640px){.flow{grid-template-columns:1fr;}}
.node{background:var(--panel);border:1px solid var(--hair-strong);border-radius:10px;padding:14px 16px;}
.node .h{font-weight:700;font-size:14px;margin-bottom:6px;display:flex;align-items:center;gap:8px;}
.node .cid{font-family:var(--mono);font-size:12px;color:var(--ink-soft);}
.node.a .h{color:var(--steel);}.node.b .h{color:var(--crit);}
.node small{display:block;color:var(--muted);font-size:12px;margin-top:6px;}
.cut{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--crit);font-weight:800;font-family:var(--mono);}
.cut .x{font-size:26px;line-height:1;}
.cut small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-top:4px;}
@media (max-width:640px){.cut{flex-direction:row;gap:8px;}}

/* Bars */
.bars{display:flex;flex-direction:column;gap:9px;margin-top:6px;}
.barrow{display:grid;grid-template-columns:230px 1fr 46px;gap:12px;align-items:center;font-size:13.5px;}
@media (max-width:560px){.barrow{grid-template-columns:130px 1fr 40px;}}
.barrow .nm{color:var(--ink-soft);}
.barrow .nm.me{color:var(--brand);font-weight:700;}
.track{background:var(--panel-3);border-radius:6px;height:16px;overflow:hidden;}
.fill{height:100%;border-radius:6px;background:var(--steel);}
.fill.me{background:var(--brand);}
.barrow .v{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;font-size:13px;color:var(--ink);}

/* Reviews */
.rev{border-left:3px solid var(--crit);background:var(--panel-2);border-radius:0 8px 8px 0;padding:12px 15px;margin-top:10px;}
.rev.pos{border-left-color:var(--good);}
.rev .top{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted);font-family:var(--mono);}
.rev .top b{color:var(--ink);}
.rev p{margin:6px 0 0;font-size:13.8px;color:var(--ink-soft);font-style:italic;}
.rev .reply{margin-top:9px;background:var(--panel);border:1px solid var(--hair);border-radius:8px;padding:10px 12px;font-style:normal;font-size:13.3px;color:var(--ink-soft);}
.rev .reply b{color:var(--good);font-style:normal;}
.sent{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;}
.sent .s{flex:1;min-width:130px;background:var(--panel);border:1px solid var(--hair);border-radius:10px;padding:13px 15px;box-shadow:var(--shadow);}
.sent .s .b{font-family:var(--mono);font-size:24px;font-weight:700;}
.sent .s .l{font-size:12px;color:var(--muted);margin-top:2px;}

/* Competitor cards */
.comp{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:6px;}
@media (max-width:760px){.comp{grid-template-columns:1fr;}}
.cc{background:var(--panel);border:1px solid var(--hair);border-radius:12px;box-shadow:var(--shadow);padding:16px 18px;}
.cc.threat{border-left:4px solid var(--crit);}.cc.mid{border-left:4px solid var(--warn);}.cc.fed{border-left:4px solid var(--steel);}
.cc .h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;}
.cc .nm{font-weight:700;font-size:16px;}
.cc .dom{font-family:var(--mono);font-size:11.5px;color:var(--muted);}
.cc .rt{font-family:var(--mono);font-size:13px;font-weight:700;}
.cc ul{list-style:none;padding:0;margin:11px 0 0;display:flex;flex-direction:column;gap:6px;}
.cc li{font-size:13px;color:var(--ink-soft);padding-left:16px;position:relative;}
.cc li::before{content:"▪";position:absolute;left:0;color:var(--muted);}
.cc .vd{margin-top:11px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--hair);padding-top:9px;}

/* Growth stack + ladder */
.stack{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.lv{background:var(--panel);border:1px solid var(--hair);border-radius:10px;box-shadow:var(--shadow);padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;}
.lv .t{font-size:14px;}.lv .t b{font-weight:700;}
.lv .t small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;}
.lv .delta{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--good);white-space:nowrap;}
.ladder{margin-top:14px;display:flex;align-items:flex-end;gap:10px;height:170px;}
.rung{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;}
.rung .barv{width:100%;background:linear-gradient(var(--steel),color-mix(in srgb,var(--steel) 60%,transparent));border-radius:6px 6px 0 0;}
.rung.now .barv{background:linear-gradient(var(--muted),color-mix(in srgb,var(--muted) 55%,transparent));}
.rung.goal .barv{background:linear-gradient(var(--brand),color-mix(in srgb,var(--brand) 60%,transparent));}
.rung .lab{font-size:11px;color:var(--muted);text-align:center;}
.rung .val{font-family:var(--mono);font-weight:700;font-size:14px;}

/* Cover cards (index) */
.deck{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px;}
@media (max-width:760px){.deck{grid-template-columns:1fr;}}
.dcard{background:var(--panel);border:1px solid var(--hair);border-radius:14px;box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;gap:8px;transition:transform .15s ease,border-color .15s ease;}
.dcard:hover{transform:translateY(-3px);border-color:var(--brand);}
.dcard .no{font-family:var(--mono);font-size:12px;color:var(--brand-ink);font-weight:700;letter-spacing:.1em;}
.dcard h3{margin:2px 0 0;font-size:19px;font-weight:750;color:var(--ink);}
.dcard p{margin:0;font-size:13.8px;color:var(--ink-soft);}
.dcard .go{margin-top:auto;font-size:13px;font-weight:700;color:var(--brand);}

/* Plan tasks */
.phase-tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--brand-ink);font-weight:700;margin:26px 0 12px;}
.phase-tag::before{content:"";width:22px;height:2px;background:var(--brand);}
.plan{display:flex;flex-direction:column;gap:10px;}
.task{background:var(--panel);border:1px solid var(--hair);border-radius:10px;box-shadow:var(--shadow);padding:16px 19px;display:grid;grid-template-columns:32px 1fr;gap:14px;}
.task .idx{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--brand-ink);}
.task h4{margin:0 0 6px;font-size:15.5px;font-weight:700;}
.task p{margin:0 0 8px;font-size:13.9px;color:var(--ink-soft);}
.task .how{font-size:13px;color:var(--muted);}.task .how b{color:var(--ink-soft);font-weight:600;}
.task .steps{margin:8px 0 0;padding-left:18px;color:var(--ink-soft);font-size:13.3px;}
.task .steps li{margin:3px 0;}
.task .foot{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;}
.pill{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:20px;border:1px solid var(--hair-strong);color:var(--ink-soft);display:inline-flex;gap:6px;align-items:center;}
.pill.impact{border-color:color-mix(in srgb,var(--good) 45%,transparent);color:var(--good);}
.pill.free{border-color:color-mix(in srgb,var(--steel) 45%,transparent);color:var(--steel);}
.pill.time{border-color:color-mix(in srgb,var(--gold) 45%,transparent);color:var(--gold);}

/* Example ad / template box */
.example{background:var(--panel-3);border:1px dashed var(--hair-strong);border-radius:10px;padding:14px 16px;margin-top:10px;font-size:13.5px;}
.example .lbl{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px;}
.example .ad-title{color:var(--steel);font-weight:700;font-size:14.5px;}
.example .ad-url{color:var(--good);font-size:12.5px;font-family:var(--mono);}
.example .ad-text{color:var(--ink-soft);margin-top:4px;}
.example.tmpl{border-style:solid;background:var(--panel);}

/* Footer */
.foot-note{margin-top:48px;padding:20px 22px;border:1px dashed var(--hair-strong);border-radius:12px;font-size:13.5px;color:var(--muted);background:var(--panel-2);}
.foot-note b{color:var(--ink-soft);}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;font-size:12px;color:var(--muted);}
.legend span{display:inline-flex;gap:6px;align-items:center;}
.dot{width:10px;height:10px;border-radius:3px;}
.pagenav{display:flex;justify-content:space-between;gap:12px;margin-top:40px;flex-wrap:wrap;}
.pagenav a{flex:1;min-width:200px;background:var(--panel);border:1px solid var(--hair);border-radius:10px;padding:14px 18px;box-shadow:var(--shadow);}
.pagenav a .d{font-size:11.5px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;}
.pagenav a .t{font-weight:700;color:var(--ink);margin-top:3px;}
.pagenav a.next{text-align:right;}

@media (prefers-reduced-motion:no-preference){
  .score,.panel,.task,.lv,.tablewrap,.callout,.rootcause,.hs,.cc,.dcard,.verdict{animation:rise .5s cubic-bezier(.2,.7,.2,1) both;}
  @keyframes rise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
}
.verdict{background:var(--panel);border:1px solid var(--hair);border-left:4px solid var(--brand);border-radius:12px;box-shadow:var(--shadow);padding:22px 24px;margin-top:14px;}
.verdict p{margin:0 0 10px;font-size:15.5px;color:var(--ink-soft);}
.verdict p:last-child{margin-bottom:0;}
.verdict b{color:var(--ink);font-weight:650;}
.hl{background:linear-gradient(transparent 60%,color-mix(in srgb,var(--brand) 22%,transparent) 0);padding:0 1px;}