/* HostSignal shared styles: datasheet look, cool grey ground, ink text, cobalt accent */
:root{
  --ground:#F2F4F7; --paper:#FFFFFF; --soft:#F7F9FB; --ink:#0E1726; --text:#2D3748; --muted:#4A5568;
  --line:#D5DBE3; --line-soft:#E2E7EE; --chip:#EEF1F6; --accent:#1D4ED8; --accent-hover:#1E3A8A;
  --clear:#0F766E; --clear-bg:#E6F4F1; --clear-text:#0F5E57; --partly:#5B6B82; --partly-text:#3A4A61;
  --display:'Archivo','Arial Narrow',sans-serif; --body:'Public Sans','Helvetica Neue',Arial,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
a{color:var(--accent)}a:hover{color:var(--accent-hover)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{text-wrap:balance}
.wrap{max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px}

/* rating marks */
.sig{display:inline-flex;align-items:flex-end;gap:2px;height:18px}
.sig span{display:block;width:5px;background:#CBD3DE;border-radius:1px}
.sig span:nth-child(1){height:6px}.sig span:nth-child(2){height:9px}.sig span:nth-child(3){height:12px}.sig span:nth-child(4){height:15px}.sig span:nth-child(5){height:18px}
.sig span.on{background:var(--ink)}
.sig.big{height:44px;gap:4px}.sig.big span{width:12px;border-radius:2px}
.sig.big span:nth-child(1){height:14px}.sig.big span:nth-child(2){height:21px}.sig.big span:nth-child(3){height:29px}.sig.big span:nth-child(4){height:36px}.sig.big span:nth-child(5){height:44px}
.st{display:inline-block;width:10px;height:10px;border-radius:2px;box-sizing:border-box;flex:none}
.st.clear{background:var(--clear);border:1.5px solid var(--clear)}
.st.partly{background:linear-gradient(90deg,var(--partly) 50%,transparent 50%);border:1.5px solid var(--partly)}
.st.unseen{background:transparent;border:1.5px dotted #64748B}
.cell{height:40px;border-radius:4px;box-sizing:border-box}
.cell.clear{background:var(--clear)}
.cell.partly{background:repeating-linear-gradient(135deg,#7A889C 0 6px,#E3E8EF 6px 12px)}
.cell.unseen{background:var(--paper);border:1.5px dotted #64748B}
.chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;background:var(--chip);color:var(--text);font-size:12.5px;font-weight:500;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){.pulse{animation:pulse 2.4s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}}

/* header + footer */
.site-head{border-bottom:1px solid var(--line);background:var(--ground)}
.site-head .wrap{padding-top:18px;padding-bottom:18px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo span{font-family:var(--display);font-stretch:115%;font-weight:800;font-size:21px;letter-spacing:-.01em}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;font-size:15px;font-weight:500}
.nav a{color:var(--ink);text-decoration:none}
.nav a.cta{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:6px;background:var(--ink);color:#FFFFFF;font-weight:600}
.site-foot{background:var(--ground)}
.site-foot .wrap{padding-top:40px;padding-bottom:40px;display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between;font-size:14px;color:var(--muted)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.site-foot a{color:var(--muted)}

/* section scaffolding */
.band{border-bottom:1px solid var(--line)}
.band.white{background:var(--paper)}
.band > .wrap{padding-top:72px;padding-bottom:72px}
.stack-y{display:flex;flex-direction:column}
.eyebrow{margin:0;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.h2{margin:0;font-family:var(--display);font-stretch:112%;font-weight:800;font-size:40px;line-height:1.1;letter-spacing:-.02em}
.h2-sm{margin:0;font-size:24px;font-weight:700}
.sec-head{display:flex;flex-wrap:wrap;gap:20px 64px;align-items:flex-end}
.sec-head > *{flex:1 1 420px;min-width:0}
.sec-head .lede{margin:0;max-width:34em;color:var(--text)}
.split{display:flex;flex-wrap:wrap;gap:40px 64px}
.split > .side{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:14px}
.split > .main{flex:1 1 520px;min-width:0}
.src{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;font-family:var(--mono);font-size:13px}
.src a{color:var(--accent);text-decoration:none;border-bottom:1px solid #BFCDF5}
.src a:hover{border-bottom-color:var(--accent)}

/* report hero */
.crumbs{font-size:14px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs strong{color:var(--ink)}
.r-hero{display:flex;flex-wrap:wrap;gap:40px 56px;align-items:stretch}
.r-hero .intro{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:20px}
.r-title{margin:0;font-family:var(--display);font-stretch:112%;font-weight:800;font-size:clamp(48px,6.4vw,84px);line-height:.98;letter-spacing:-.03em}
.r-summary{margin:0;max-width:36em;font-size:19px;line-height:1.6;color:var(--text)}
.facts{margin:8px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px 32px;padding-top:20px;border-top:1px solid var(--line)}
.facts div{display:flex;flex-direction:column;gap:2px;min-width:0}
.facts dt{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0;font-weight:600}
.facts dd a.plain{color:var(--ink)}
.scorecard{flex:0 1 380px;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 40px -24px rgba(14,23,38,.35);display:flex;flex-direction:column}
.scorecard .top{padding:28px 28px 24px;display:flex;flex-direction:column;gap:16px}
.scorecard .lbl{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.score-row{display:flex;align-items:flex-end;gap:18px}
.score-num{font-family:var(--display);font-stretch:112%;font-weight:800;font-size:72px;line-height:.85;font-variant-numeric:tabular-nums}
.score-of{font-size:16px;color:var(--muted);padding-bottom:2px}
.band-pill{align-self:flex-start;display:inline-flex;padding:4px 12px;border-radius:999px;font-size:14px;font-weight:700;background:var(--chip);color:var(--partly-text)}
.band-pill.high{background:var(--clear-bg);color:var(--clear-text)}
.tally{padding:20px 28px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:10px;font-size:15px}
.tally div{display:flex;align-items:center;gap:10px}
.tally .pts{margin-left:auto;font-family:var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.scorecard .foot{padding:20px 28px;border-top:1px solid var(--line-soft);background:var(--soft);display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted);border-radius:0 0 8px 8px;margin-top:auto}
.scorecard .foot .mono{font-family:var(--mono);font-size:12.5px}

/* signal strip */
.strip-wrap{overflow-x:auto}
.strip{display:grid;grid-template-columns:repeat(10,minmax(64px,1fr));gap:6px;min-width:700px}
.strip a,.strip div.s{display:flex;flex-direction:column;gap:8px;text-decoration:none}
.strip .name{font-size:12px;line-height:1.3;color:var(--muted)}
.sum{margin:0;font-family:var(--mono);font-size:14px;color:var(--text);font-variant-numeric:tabular-nums}

/* price chart */
.charts{display:flex;flex-wrap:wrap;gap:24px}
.fig{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:28px;display:flex;flex-direction:column;gap:22px;min-width:0}
.fig.wide{flex:1 1 560px}.fig.narrow{flex:1 1 360px;gap:20px}
.fig figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;font-size:14px;color:var(--muted)}
.fig figcaption strong{color:var(--ink);font-size:16px}
.legend{display:inline-flex;flex-wrap:wrap;gap:6px 16px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.dot-o{width:12px;height:12px;border-radius:50%;border:2.5px solid var(--accent);box-sizing:border-box;background:#FFFFFF}
.dot-f{width:12px;height:12px;border-radius:50%;background:var(--accent)}
.dumb{min-width:520px;display:flex;flex-direction:column;gap:18px;padding-top:16px}
.dumb-row{display:grid;grid-template-columns:130px minmax(0,1fr) 56px;align-items:center;gap:16px}
.dumb-row .plan{font-weight:600;font-size:15px}
.dumb-row .mult{font-family:var(--mono);font-size:13px;font-weight:600;text-align:right}
.track{position:relative;height:34px}
.track .base{position:absolute;left:0;right:0;top:16px;height:1px;background:var(--line-soft)}
.track .span{position:absolute;top:15px;height:4px;border-radius:2px;background:#BFCDF5}
.track .pt{position:absolute;top:10px;width:14px;height:14px;margin-left:-7px;border-radius:50%;box-sizing:border-box}
.track .pt.o{border:3px solid var(--accent);background:#FFFFFF}
.track .pt.f{background:var(--accent)}
.track .val{position:absolute;top:-8px;transform:translateX(-50%);font-family:var(--mono);font-size:12px;color:var(--muted)}
.track .val.strong{color:var(--ink);font-weight:600}
.axis{position:relative;height:18px;border-top:1px solid #CBD3DE;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.axis span{position:absolute;top:4px;transform:translateX(-50%)}
.axis span:first-child{transform:none}.axis span:last-child{transform:translateX(-100%)}
.lr{display:flex;flex-direction:column;gap:8px}
.lr .row{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.lr .amt{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lr .bar{height:14px;border-radius:3px;background:var(--chip)}
.lr .bar i{display:block;height:100%;border-radius:3px;box-sizing:border-box}
.lr .bar i.intro{border:2px solid var(--accent);background:#FFFFFF}
.lr .bar i.renewal{background:var(--accent)}
.fig .note{margin:0;font-size:13.5px;color:var(--muted);padding-top:12px;border-top:1px solid var(--line-soft)}

/* key page cards */
.keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.key{display:flex;flex-direction:column;border:1px solid #CBD3DE;border-radius:10px;overflow:hidden;text-decoration:none;color:var(--ink);background:var(--soft)}
.key .bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#E8ECF2;border-bottom:1px solid #CBD3DE}
.key .dots{display:flex;gap:5px}.key .dots i{width:9px;height:9px;border-radius:50%;background:#B8C2D0}
.key .url{flex:1;min-width:0;padding:3px 10px;border-radius:5px;background:#FFFFFF;font-family:var(--mono);font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.key .body{padding:22px;display:flex;flex-direction:column;gap:14px;background:#FFFFFF;flex:1}
.key .kicker{font-family:var(--mono);font-size:12px;color:var(--muted)}
.key .bigrow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.key .big{font-family:var(--display);font-stretch:112%;font-weight:800;font-size:34px;line-height:1}
.key .big small{font-size:16px;font-weight:600}
.key .side{font-size:14px;color:var(--muted)}.key .side strong{color:var(--ink)}
.key ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--text)}

/* findings */
.ai-note{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;margin-bottom:16px;background:var(--paper);border:1px solid var(--line);border-radius:8px;font-size:15px;color:var(--text)}
.ai-note svg{flex:none;margin-top:2px}
.finding{display:flex;flex-wrap:wrap;gap:16px 48px;padding:28px 0;border-top:1px solid var(--line)}
.finding:last-child{border-bottom:1px solid var(--line)}
.finding .meta{flex:0 1 280px;min-width:0;display:flex;flex-direction:column;gap:10px}
.finding .group{font-family:var(--mono);font-size:12px;color:var(--muted)}
.finding h3{margin:0;font-size:20px;line-height:1.25}
.finding .text{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:12px}
.finding .text p{margin:0;color:var(--text)}
.badge{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:600;background:var(--chip);color:var(--partly-text)}
.badge.clear{background:var(--clear-bg);color:var(--clear-text)}
.badge.unseen{background:var(--soft);color:var(--muted);border:1px dotted #94A3B8}
.regions{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:#FFFFFF;border:1px solid var(--line-soft);border-radius:8px;font-size:13.5px}
.regions div{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.regions .r{width:104px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.regions .p{padding:2px 8px;border-radius:4px;background:var(--chip)}

/* specs table */
.tbl-wrap{overflow-x:auto;background:#FFFFFF;border:1px solid var(--line);border-radius:8px}
.specs{width:100%;min-width:720px;border-collapse:collapse;font-size:15px}
.specs thead tr{text-align:left;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--soft)}
.specs th,.specs td{padding:16px 20px;text-align:left;vertical-align:top}
.specs thead th{padding:14px 20px;font-weight:500}
.specs tbody tr{border-top:1px solid var(--line-soft)}
.specs tbody th{font-weight:600;width:22%}
.specs .cellv{display:flex;flex-direction:column;gap:6px}
.specs .num{font-variant-numeric:tabular-nums}
.specs .bar{display:block;height:6px;border-radius:3px;background:var(--chip)}
.specs .bar i{display:block;height:100%;border-radius:3px;background:var(--accent)}

/* tech stack */
.fit-legend{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--muted)}
.fit-legend span{display:inline-flex;align-items:center;gap:8px}
.fit-legend i{display:inline-block;width:12px;height:12px;box-sizing:border-box}
.fit-legend i.best{border-radius:50%;background:var(--accent)}
.fit-legend i.supported{border-radius:50%;border:2px solid var(--accent)}
.fit-legend i.vps{border-radius:3px;background:#CBD3DE}
.fit-legend i.none{border-radius:50%;border:1.5px dotted #64748B}
.stack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.stack-card{border:1px solid var(--line);border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:12px;min-width:0}
.stack-card .top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.stack-card h3{margin:0;font-size:19px}
.stack-card p{margin:0;font-size:15px;color:var(--text)}
.stack-card .plans{font-size:13px;color:var(--muted)}
.fit{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600}
.fit.best{background:var(--accent);color:#FFFFFF}
.fit.supported{padding:2px 10px;border:1.5px solid var(--accent);color:var(--ink)}
.fit.vps{background:#E3E8EF;color:var(--text)}
.fit.none{padding:2px 10px;border:1.5px dotted #64748B;color:var(--text)}

/* sales practices */
.sales{flex:1 1 520px;min-width:0;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.sales li{display:flex;flex-wrap:wrap;gap:6px 16px;padding:18px 0;border-bottom:1px solid var(--line)}
.sales .status{flex:0 0 130px;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:var(--muted)}
.sales .status i{width:10px;height:10px;border-radius:50%;box-sizing:border-box}
.sales .noticed{font-weight:600;color:var(--text)}.sales .noticed i{background:var(--partly)}
.sales .not-checked i{border:1.5px dotted #64748B}
.sales .not-noticed{color:var(--clear-text)}.sales .not-noticed i{border:1.5px solid var(--clear)}
.sales .what{flex:1 1 300px;min-width:0}
.sales .what span{color:var(--muted)}

/* questions + pages */
.qs{flex:1 1 520px;min-width:0;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.qs li{border:1px solid var(--line);border-radius:8px;padding:20px;display:flex;flex-direction:column;gap:6px}
.qs .group{font-family:var(--mono);font-size:12px;color:var(--muted)}
.pages{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px 32px}
.pages li{min-width:0;overflow-wrap:anywhere}
.disclaimer{margin:0;max-width:48em;font-size:15px;color:var(--muted)}

/* states */
.state{padding:96px 0;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.state p{margin:0;color:var(--muted);max-width:36em}
.skeleton{height:14px;border-radius:4px;background:linear-gradient(90deg,#E3E8EF,#EEF1F6,#E3E8EF);background-size:200% 100%}
@media (prefers-reduced-motion:no-preference){.skeleton{animation:sk 1.4s ease-in-out infinite}@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}}
