:root{--bg:#f3f4f6;--panel:#fff;--ink:#111827;--muted:#647084;--line:#dfe4eb;--teal:#008fa3}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px}.shell{max-width:1200px;margin:auto;padding:0 28px}.shell>section+section{margin-top:28px}.nav{display:flex;align-items:center;justify-content:space-between;height:96px}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-size:25px;font-weight:750;letter-spacing:-1px}.brand svg{width:38px;height:38px;color:var(--teal)}nav{display:flex;gap:36px}nav a{text-decoration:none;color:#536074;padding:12px 0;font-size:14px}nav a.active{border-bottom:2px solid var(--teal);color:var(--ink)}.intro{text-align:center;padding:28px 0 0}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--teal)}h1{font-size:clamp(30px,4vw,48px);letter-spacing:-1.8px;margin:14px 0 12px;line-height:1.15}.intro p{font-size:17px;margin:0;color:var(--muted)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 4px 20px #1f293704}.test-panel{padding:24px}.status{display:flex;justify-content:center;align-items:center;gap:9px;font-size:13px;color:#485468;min-height:20px}#status-dot{width:9px;height:9px;border-radius:50%;background:#43c461}#status-dot.busy{background:var(--teal)}#status-dot.error{background:#d34b4b}.progress{height:3px;margin:14px 0 18px;background:#f1f4f7;border-radius:3px;overflow:hidden}.progress>div{height:100%;width:0;background:var(--teal);transition:width .3s}.connection{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:0 6px}.connection>div{display:flex;align-items:center;gap:20px}.connection>div+div{border-left:1px solid var(--line);padding-left:32px}.connection svg{width:32px;height:32px;color:var(--teal)}.connection small{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}.connection span{font-size:13px;color:#475569}.quality{display:grid;grid-template-columns:repeat(3,1fr);padding:22px 24px}.quality>div{display:flex;align-items:center;gap:22px;padding:4px 22px}.quality>div+div{border-left:1px solid var(--line)}.quality svg{width:36px;height:36px;color:var(--teal);flex-shrink:0}.quality h2{font-size:15px;margin:0 0 9px;font-weight:600}.quality p{font-size:12px;margin:0;color:var(--muted)}.history{padding:22px 24px}.section-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:16px}.section-heading h2{display:flex;align-items:center;gap:14px;font-size:17px;margin:0}.section-heading svg{width:22px;height:22px}.text-button{border:0;background:transparent;color:var(--teal);font:inherit;font-size:12px;cursor:pointer}#empty{text-align:center;padding:24px 0 12px;color:var(--muted)}#empty svg{width:27px;height:27px}#empty p{font-size:13px;margin:12px 0 6px}#empty small{font-size:11px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}th{color:var(--muted);font-weight:500}td,th{padding:14px 8px;border-bottom:1px solid #edf0f4}tr:last-child td{border-bottom:0}.notice{text-align:center;color:var(--muted);font-size:11px;margin:22px 0 38px}.explanation{border-top:1px solid var(--line);padding:22px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:70px}.explanation h2{font-size:25px;letter-spacing:-.6px}.explanation p,dd{font-size:13px;color:var(--muted);line-height:1.7;margin:0}dl{margin:0}dl>div{margin-bottom:18px}dt{font-size:13px;font-weight:650;margin-bottom:6px}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;min-height:80px;color:var(--muted);font-size:11px}.footer-brand{font-size:17px}.footer-brand svg{width:25px;height:25px}button:focus-visible,a:focus-visible{outline:3px solid #008fa366;outline-offset:5px}[hidden]{display:none!important}@media(max-width:720px){.shell{padding:0 18px}.shell>section+section{margin-top:22px}.nav{height:76px}.brand{font-size:21px}nav{gap:16px}nav a{font-size:12px}nav a:last-child{display:none}.intro{padding:24px 0 0}.intro p{font-size:14px;line-height:1.6}.test-panel{padding:20px 14px}.connection{gap:16px}.connection>div{gap:10px}.connection>div+div{padding-left:16px}.connection svg{width:25px}.connection span{font-size:11px}.quality{padding:16px 12px}.quality>div{padding:0 8px;flex-direction:column;gap:12px;text-align:center}.quality h2{font-size:12px}.quality p{font-size:10px;line-height:1.5}.quality svg{width:28px;height:28px}.history{padding:20px 16px}.notice{line-height:1.7}.explanation{grid-template-columns:1fr;gap:24px}.eyebrow{font-size:9px}}

/* Updated brand typography and colors. */
:root{--bg:#ffffff;--panel:#ffffff;--ink:#231f1f;--muted:#625c5c;--teal:#e50a15}
body{font-family:Helvetica,arial,sans-serif}
h1{font-weight:700;line-height:48.48px;color:#231f1f}


.brand,
nav a,.status,.connection span{color:#231f1f}
.text-button{background:#e50a15;color:#ffffff;border-radius:5px;padding:7px 12px}
button:focus-visible,a:focus-visible{outline-color:#e50a1566}
@media(max-width:720px){h1{line-height:1.2}}

.benchmark-note{font-size:13px;line-height:1.6;color:#231f1f;background:#fff5f5;border:1px solid #f3dddd;border-radius:8px;padding:12px 16px;text-align:center;margin:20px 0 8px}

/* Provider detection line under the test panel (provider pages + homepage). */
.detected-provider{font-size:13px;line-height:1.6;color:#475569;text-align:center;margin:14px 0 0}
.provider-match{font-size:12px;line-height:1.6;color:#647084;text-align:center;margin:4px 0 0}
.provider-match.match{color:#15803d}
.provider-match.mismatch{color:#b45309}

/* Provider lists: homepage tier panels + provider-page "More tests".
   Without these, lists render as default bulleted blue serif links. */
/* Provider directory: homepage tier panels + provider-page "More tests". */
.panel h3{font-size:15px;margin:26px 0 12px;color:var(--ink);padding-bottom:8px;border-bottom:1px solid var(--line)}
.panel ul{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.panel li{margin:0}
.panel li a{display:flex;align-items:center;gap:10px;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:anywhere;transition:border-color .15s,box-shadow .15s,transform .15s}
.panel li a::before{content:"";flex:0 0 8px;height:8px;border-radius:50%;background:var(--teal)}
.panel li a::after{content:"\2192";margin-left:auto;color:var(--muted);font-weight:400;transition:transform .15s}
.panel li a:hover{border-color:var(--teal);box-shadow:0 4px 14px rgba(229,10,21,.10);transform:translateY(-1px)}
.panel li a:hover::after{transform:translateX(3px);color:var(--teal)}
/* Provider directory search (homepage). */
.directory-search{margin:0 0 4px}
.directory-search label{display:block;font-size:13px;color:var(--muted);margin-bottom:8px}
.directory-search input{width:100%;padding:13px 16px;font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;outline:none}
.directory-search input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(229,10,21,.12)}
.directory-search p{font-size:12px;color:var(--muted);margin:8px 2px 0}
.explanation ul{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px 16px}
.explanation ul li{margin:0}
.explanation ul li a{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);text-decoration:none;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.explanation ul li a:hover{border-color:var(--teal);background:#fff5f5}
/* Keep the explanation heading visible while its long content scrolls,
   instead of leaving a blank left column. */
.explanation>div:first-child{position:sticky;top:24px;align-self:start}
.explanation--single{grid-template-columns:1fr;gap:16px}
.explanation--single>div:first-child{position:static}
@media(max-width:720px){
  .panel ul,.explanation ul{grid-template-columns:1fr 1fr}
  .explanation>div:first-child{position:static}
}
@media(max-width:480px){
  .panel ul,.explanation ul{grid-template-columns:1fr}
}

/* Speedtest-style gauge (original SpeedAccu design): circular gauge with sweeping needle, GO in the center, results row below. */
.gauge-wrap{display:flex;justify-content:center;padding:18px 0 8px}
.gauge{position:relative;width:320px;height:320px;max-width:100%}
.gauge-svg{width:100%;height:100%;overflow:visible}
.gauge-arc-track{fill:none;stroke:#e8eaee;stroke-width:14;stroke-linecap:round}

.needle{position:absolute;left:calc(50% - 2px);bottom:50%;width:4px;height:130px;background:#231f1f;border-radius:2px;transform-origin:50% 100%;transform:rotate(-120deg)}

.gauge-center{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.gauge-center button{order:1;margin-top:10px;border:0;background:#e50a15;color:#fff;border-radius:50%;width:104px;height:104px;font:inherit;font-size:30px;font-weight:700;cursor:pointer;box-shadow:0 8px 22px rgba(229,10,21,.35);transition:transform .15s,background .15s}
.gauge-center button:hover{background:#c90812;transform:scale(1.04)}
#start-label{order:2;font-size:12px;color:var(--muted)}
#gauge-value{order:-2;font-size:46px;font-weight:800;color:var(--ink);line-height:1}
#gauge-label{order:-1;font-size:11px;color:var(--muted);letter-spacing:1px}





@media(max-width:720px){
  .gauge{width:280px;height:280px}
  .needle{height:112px}
  .gauge-center{bottom:auto}
  .gauge-center button{width:96px;height:96px;font-size:28px}
  #gauge-value{font-size:36px}
  
  
}

/* Popular speed tests: borderless, open section (no panel box). */
.panel--plain{border:none;box-shadow:none;background:transparent;padding:28px 4px}
              .panel--plain .section-heading{margin-bottom:14px}


/* Mobile hamburger navigation (<=720px). Desktop: checkbox + label hidden. */
.nav{position:relative}
.nav-toggle{position:absolute;opacity:0;width:1px;height:1px}
.nav-toggle-label{display:none}
@media(max-width:720px){
  .nav{height:64px}
  .nav-toggle-label{display:block;position:relative;width:28px;height:20px;cursor:pointer;flex-shrink:0}
  .nav-toggle-label span{position:absolute;left:0;top:9px;width:28px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
  .nav-toggle-label span::before,.nav-toggle-label span::after{content:"";position:absolute;left:0;width:28px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s}
  .nav-toggle-label span::before{top:-8px}
  .nav-toggle-label span::after{top:8px}
  .nav-toggle:checked ~ .nav-toggle-label span{background:transparent}
  .nav-toggle:checked ~ .nav-toggle-label span::before{transform:translateY(8px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-toggle-label span::after{transform:translateY(-8px) rotate(-45deg)}
  .nav nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:50;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(17,24,39,.08);padding:8px 0}
  .nav-toggle:checked ~ nav{display:flex}
  .nav nav a{display:block;padding:14px 22px;font-size:16px;border-bottom:0;white-space:nowrap;border-top:1px solid var(--line)}.nav nav a:first-child{border-top:0}
  .nav nav a:last-child{display:block}
  .nav nav a.active{border-bottom:0;color:#E50A15;font-weight:600}
}

/* Brand logo (2026-10-19). */
.brand img{height:56px;width:auto;aspect-ratio:303/120;display:block}
.footer-brand img{height:40px}
@media(max-width:720px){.brand img{height:44px}}

/* Footer link list. */
.footer-links{display:flex;gap:24px}
.footer-links a{color:var(--muted);text-decoration:none;font-size:13px}
.footer-links a:hover{color:#e50a15}
@media(max-width:720px){.footer-links{gap:16px}}

/* Option C — Bold Minimal test panel (2026-10-19). Replaces the gauge layout;
   all app.js element IDs are unchanged. */
.test-panel{padding:40px 36px 30px}




.go-row{display:flex;flex-direction:column;align-items:center;gap:10px;margin:30px 0 4px}
.go-row button{border:0;background:#e50a15;color:#fff;border-radius:999px;min-width:230px;padding:18px 48px;font-size:20px;font-weight:800;letter-spacing:3px;cursor:pointer;box-shadow:0 10px 26px rgba(229,10,21,.35);transition:transform .15s,background .15s}
.go-row button:hover{background:#c90812;transform:translateY(-1px)}
.go-row button:active{transform:translateY(0)}
#start-label{font-size:12px;color:var(--muted)}


.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;border-top:2px solid #231f1f}
.stat{padding:18px 8px 4px}
.stat small{display:block;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.stat strong{font-size:34px;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1.1}
.stat span{font-size:13px;color:var(--muted);margin-left:4px}
.test-panel .connection{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}
.test-panel .connection>div{gap:10px}
.test-panel .connection>div+div{border-left:0;padding-left:0}
.test-panel .connection svg{width:18px;height:18px}
.test-panel .connection small{margin-bottom:4px}
.test-panel .connection span{font-size:12px}
@media(max-width:720px){
.test-panel{padding:28px 20px 24px}


.go-row button{min-width:200px;padding:16px 40px;font-size:18px}
.stats{grid-template-columns:1fr 1fr;gap:0 16px}
.test-panel .connection{flex-direction:column;gap:12px}
}

/* Option B — Light Precision test panel (2026-10-19). Supersedes the Option C
   block above; all app.js element IDs are unchanged. */
.test-panel{padding:36px 36px 28px;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 12px 40px rgba(31,41,55,.06);background:#fff}
.test-panel .status{justify-content:center;font-size:13px;color:#475569;margin:0}
.gauge-wrap{display:flex;justify-content:center;margin:14px 0 6px}
.gauge{position:relative;width:300px;height:300px;max-width:100%}
.gauge-svg{width:100%;height:100%;overflow:visible}
.gauge-arc-track{stroke:#eef1f4;stroke-width:16;stroke-linecap:round}
.gauge-arc{stroke:#e50a15;stroke-width:16;stroke-linecap:round}
.gauge-ticks line{stroke:#aeb9c4;stroke-width:2.5;stroke-linecap:round}
#gauge-head{will-change:transform}
#gauge-head{will-change:transform}
#gauge-head-inner{transform-box:fill-box;transform-origin:50% 88%;animation:flameFlick .45s ease-in-out infinite}
@keyframes flameFlick{0%,100%{transform:scale(1,1) skewX(0deg)}30%{transform:scale(.93,1.09) skewX(2.5deg)}55%{transform:scale(1.06,.92) skewX(-2deg)}75%{transform:scale(.97,1.04) skewX(1deg)}}
#gauge-head .wisp{transform-box:fill-box;transform-origin:50% 25%;animation:flameFlick .5s ease-in-out infinite}
#gauge-head .wisp.w2{animation-delay:.16s;animation-duration:.55s}
#gauge-embers{animation:emberFlow .5s linear infinite}
@keyframes emberFlow{to{stroke-dashoffset:-3.6}}
@media (prefers-reduced-motion:reduce){#gauge-head-inner,#gauge-head .wisp,#gauge-embers{animation:none}}
.test-panel .gauge-center{position:absolute;top:0;right:0;bottom:0;left:0;transform:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;text-align:center}
.test-panel #gauge-value{font-size:76px;font-weight:800;color:#231f1f;letter-spacing:-2px;font-variant-numeric:tabular-nums;line-height:1}
.test-panel #gauge-label{font-size:12px;color:#647084;margin-top:10px;letter-spacing:2px;text-transform:uppercase}
.go-row{display:flex;flex-direction:column;align-items:center;gap:10px;margin:18px 0 4px}
.go-row button{border:0;background:#e50a15;color:#fff;border-radius:999px;min-width:200px;padding:15px 44px;font:inherit;font-size:17px;font-weight:800;letter-spacing:3px;cursor:pointer;box-shadow:0 8px 22px rgba(229,10,21,.30);transition:transform .15s,background .15s}
.go-row button:hover{background:#c90812;transform:translateY(-1px)}
.go-row button:active{transform:translateY(0)}
#start-label{font-size:12px;color:#94a3b8}
#progress{display:none!important}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:22px;border:0}
.stat{text-align:center;padding:6px 0}
.stat+.stat{border-left:1px solid #eef1f4}
.stat small{display:block;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#94a3b8;margin-bottom:8px}
.stat strong{font-size:28px;font-weight:800;color:#231f1f;font-variant-numeric:tabular-nums;letter-spacing:-.5px;line-height:1.15}
.stat span{font-style:normal;font-size:12px;color:#94a3b8;margin-left:3px}
.stat.dim strong{color:#75808d}
.stat.dim span{color:#b6bfc9}
.test-panel .connection{margin-top:22px;background:#f8fafc;border:1px solid #eef1f4;border-radius:10px;padding:14px 18px;font-size:12px;color:#647084;display:flex;justify-content:space-between;gap:12px}
.test-panel .connection>div{gap:10px}
.test-panel .connection>div+div{border-left:0;padding-left:0}
.test-panel .connection svg{width:18px;height:18px;color:#94a3b8}
.test-panel .connection small{margin-bottom:4px}
.test-panel .connection span{font-size:12px}
@media(max-width:720px){
.test-panel{padding:28px 20px 22px}
.gauge{width:260px;height:260px}
.test-panel #gauge-value{font-size:60px}
.test-panel .gauge-center{bottom:0;transform:none}
.stats{grid-template-columns:1fr 1fr;gap:14px 0}
.stat:nth-child(3){border-left:0}
.stat strong{font-size:24px}
.test-panel .connection{flex-direction:column;gap:10px}
}

.stat small .stat-ico{width:15px;height:15px;vertical-align:-2.5px;margin-right:5px}
#gauge-label{transition:opacity .25s ease}
.phase-fly{position:fixed;z-index:80;pointer-events:none;transform:translate(-50%,-50%);transition:transform .65s cubic-bezier(.2,.7,.25,1),opacity .65s ease;font-weight:700;white-space:nowrap}
.phase-fly-down{font-size:12px;letter-spacing:2px;color:#647084;text-transform:uppercase}
.phase-fly-up{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#94a3b8;display:inline-flex;align-items:center;gap:5px}
.phase-fly-up .stat-ico{width:15px;height:15px;margin:0;vertical-align:0}
.stat.flash{animation:statFlash .7s ease;border-radius:10px}
@keyframes statFlash{0%{box-shadow:inset 0 0 0 2px rgba(229,10,21,.55)}100%{box-shadow:inset 0 0 0 2px rgba(229,10,21,0)}}
@media (prefers-reduced-motion:reduce){.phase-fly{display:none}}
.skip-link{position:absolute;left:16px;top:-70px;z-index:100;background:#e50a15;color:#fff;padding:10px 18px;border-radius:8px;font-weight:600;text-decoration:none;transition:top .2s}
.skip-link:focus{top:12px;color:#fff}
:focus-visible{outline:2px solid #e50a15;outline-offset:2px}


.prose{border-top:1px solid var(--line);padding:22px 0 0}
.prose h2{font-size:20px;letter-spacing:-.5px;margin:26px 0 12px}
.prose .eyebrow{display:block;margin-bottom:8px}
.prose p,.prose li{font-size:14px;line-height:1.7;color:#3f4753}
.prose p{margin:0 0 12px}
.prose ol,.prose ul{margin:0 0 14px;padding-left:22px;display:grid;gap:8px}
.prose a{color:#e50a15}
.prose table{width:100%;border-collapse:collapse;margin:2px 0 14px;font-size:14px}
.prose th,.prose td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
.prose th{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#647084}