.speed-page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(76px, 9vw, 128px) 0 54px;
  background:
    radial-gradient(circle at 82% 12%, rgba(88,40,223,.14), transparent 27%),
    radial-gradient(circle at 12% 20%, rgba(25,199,239,.10), transparent 24%),
    linear-gradient(180deg, #fff 0%, #f7f9ff 100%);
}
.speed-page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: clamp(30px, 5vw, 60px); align-items: center; }
.speed-page-hero h1 { margin: 0; max-width: 820px; font-size: clamp(46px, 6.2vw, 84px); line-height: .96; letter-spacing: -.06em; }
.speed-page-hero h1 span { display: block; margin-top: 10px; background: linear-gradient(135deg, var(--blue), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.speed-page-lead { max-width: 760px; margin: 24px 0 0; color: var(--ink-soft); font-size: clamp(18px, 2vw, 21px); line-height: 1.7; }
.speed-hero-panel { padding: 26px; border: 1px solid rgba(16,34,91,.08); border-radius: 28px; background: rgba(255,255,255,.82); box-shadow: 0 22px 54px rgba(17,31,75,.10); backdrop-filter: blur(14px); }
.speed-hero-panel strong { display: block; color: var(--ink); font-size: 17px; }
.speed-hero-panel ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.speed-hero-panel li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-soft); line-height: 1.5; }
.speed-hero-panel li::before { content: '✓'; color: var(--blue); font-weight: 900; }
.speed-tool-section { padding-top: 42px; background: linear-gradient(180deg, #f7f9ff 0%, #fff 20%); }
.speed-tool-shell { border-radius: 34px; border: 1px solid rgba(16,34,91,.08); background: #fff; box-shadow: 0 26px 70px rgba(16,29,70,.11); overflow: hidden; }
.speed-tool-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: end; padding: clamp(24px, 4vw, 38px); border-bottom: 1px solid rgba(16,34,91,.07); background: linear-gradient(145deg, #fff, #fafbff); }
.speed-tool-head h2 { margin: 0; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.045em; }
.speed-tool-head p { margin: 8px 0 0; color: var(--ink-soft); line-height: 1.6; }
.speed-tool-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 24px clamp(24px, 4vw, 38px) 0; }
.speed-field label { display: block; margin-bottom: 7px; color: var(--ink); font-size: 13px; font-weight: 850; }
.speed-field select, .speed-field input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid rgba(16,34,91,.14); border-radius: 14px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; }
.speed-field small { display: block; margin-top: 6px; color: var(--ink-soft); line-height: 1.45; }
.speed-action-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 22px clamp(24px, 4vw, 38px) 28px; }
.speed-action-row .btn { border: 0; cursor: pointer; }
.speed-action-row .btn[disabled] { opacity: .55; cursor: wait; }
.speed-test-note { color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.speed-progress-wrap { padding: 0 clamp(24px, 4vw, 38px) 28px; }
.speed-progress-track { width: 100%; height: 9px; overflow: hidden; border-radius: 999px; background: #edf1fb; }
.speed-progress-bar { width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan), var(--purple)); transition: width .3s ease; }
.speed-progress-meta { display: flex; justify-content: space-between; gap: 14px; margin-top: 9px; color: var(--ink-soft); font-size: 13px; }
.speed-live-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; padding: 0 clamp(24px, 4vw, 38px) 34px; }
.speed-metric { position: relative; min-width: 0; padding: 22px 18px; border-radius: 22px; border: 1px solid rgba(16,34,91,.08); background: linear-gradient(145deg,#fff,#f8faff); }
.speed-metric-label { display: block; color: var(--ink-soft); font-size: 12px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.speed-metric-value { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; color: var(--ink); }
.speed-metric-value strong { font-size: clamp(31px, 4vw, 48px); line-height: 1; letter-spacing: -.045em; }
.speed-metric-value span { color: var(--ink-soft); font-size: 13px; font-weight: 800; }
.speed-metric small { display: block; min-height: 18px; margin-top: 9px; color: var(--ink-soft); }
.speed-results { display: none; border-top: 1px solid rgba(16,34,91,.08); padding: clamp(26px, 4vw, 40px); background: linear-gradient(180deg,#fbfcff,#fff); }
.speed-results.is-visible { display: block; }
.speed-result-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; }
.speed-result-badge { display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border-radius: 999px; color: #073d9d; background: #eaf2ff; font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.speed-results h3 { margin: 12px 0 8px; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.04em; }
.speed-result-summary { max-width: 780px; margin: 0; color: var(--ink-soft); line-height: 1.7; }
.speed-score { width: 102px; height: 102px; border-radius: 50%; display: grid; place-items: center; text-align: center; color: #fff; background: linear-gradient(135deg, var(--blue), var(--purple)); box-shadow: 0 16px 34px rgba(55,49,193,.22); }
.speed-score strong { display: block; font-size: 32px; line-height: 1; }
.speed-score span { font-size: 10px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.speed-use-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; margin-top: 26px; }
.speed-use-card { padding: 17px; border-radius: 17px; border: 1px solid rgba(16,34,91,.08); background: #fff; }
.speed-use-card span { display: block; color: var(--ink-soft); font-size: 12px; font-weight: 800; }
.speed-use-card strong { display: block; margin-top: 6px; color: var(--ink); font-size: 16px; }
.speed-diagnostic { margin-top: 22px; padding: 22px; border-radius: 20px; background: linear-gradient(135deg,rgba(10,103,255,.07),rgba(88,40,223,.07)); border: 1px solid rgba(10,103,255,.11); }
.speed-diagnostic strong { display: block; color: var(--ink); font-size: 18px; }
.speed-diagnostic p { margin: 8px 0 0; color: var(--ink-soft); line-height: 1.65; }
.speed-result-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.speed-history-section { padding-top: 42px; }
.speed-history-head { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:18px; }
.speed-history-head h2 { margin:0; font-size:clamp(28px,3.5vw,42px); letter-spacing:-.04em; }
.speed-history-head p { margin:6px 0 0; color:var(--ink-soft); }
.speed-history-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.speed-history-card { padding:20px; border-radius:20px; border:1px solid rgba(16,34,91,.08); background:#fff; box-shadow:0 12px 32px rgba(17,31,75,.06); }
.speed-history-card h3 { margin:0; font-size:18px; }
.speed-history-card small { color:var(--ink-soft); }
.speed-history-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px; }
.speed-history-metrics div { padding:10px; border-radius:12px; background:#f6f8fd; }
.speed-history-metrics span { display:block; color:var(--ink-soft); font-size:11px; text-transform:uppercase; font-weight:800; letter-spacing:.04em; }
.speed-history-metrics strong { display:block; margin-top:4px; color:var(--ink); }
.speed-empty { padding:24px; border:1px dashed rgba(16,34,91,.16); border-radius:18px; color:var(--ink-soft); text-align:center; }
.speed-explainer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.speed-explainer-card { padding:24px; border-radius:22px; border:1px solid rgba(16,34,91,.08); background:#fff; }
.speed-explainer-card h3 { margin:0 0 8px; font-size:20px; }
.speed-explainer-card p { margin:0; color:var(--ink-soft); line-height:1.7; }
.speed-privacy-note { margin-top:20px; color:var(--ink-soft); font-size:13px; line-height:1.6; }
.speed-error { display:none; margin:0 clamp(24px,4vw,38px) 26px; padding:16px 18px; border-radius:16px; background:#fff1f1; border:1px solid #ffd1d1; color:#8b1e1e; line-height:1.55; }
.speed-error.is-visible { display:block; }
@media (max-width: 1000px) { .speed-page-hero-grid { grid-template-columns:1fr; } .speed-hero-panel { max-width:720px; } .speed-live-grid { grid-template-columns:repeat(2,1fr); } .speed-use-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width: 700px) { .speed-page-hero { padding-top:58px; } .speed-tool-head { grid-template-columns:1fr; } .speed-tool-settings { grid-template-columns:1fr; } .speed-live-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .speed-metric { padding:18px 14px; } .speed-use-grid { grid-template-columns:repeat(2,1fr); } .speed-result-top { grid-template-columns:1fr; } .speed-score { width:88px; height:88px; } .speed-history-grid, .speed-explainer-grid { grid-template-columns:1fr; } .speed-history-head { align-items:flex-start; flex-direction:column; } }
@media (max-width: 390px) { .speed-live-grid { grid-template-columns:1fr; } .speed-use-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { .speed-progress-bar { transition:none; } }



/* Explicit opt-in before a speed-test result is published */
.leaderboard-result-card[hidden], .leaderboard-optin-card[hidden] { display:none !important; }
.leaderboard-optin-card { display:grid; grid-template-columns:180px minmax(0,1fr); gap:22px; margin-top:24px; padding:22px; border-radius:24px; border:1px solid rgba(10,103,255,.13); background:linear-gradient(135deg,rgba(10,103,255,.055),rgba(88,40,223,.055)); }
.leaderboard-optin-mark { min-height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:20px; text-align:center; border-radius:20px; color:#fff; background:linear-gradient(145deg,#0a67ff,#5828df); box-shadow:0 18px 38px rgba(39,50,185,.20); }
.leaderboard-optin-mark span { font-size:38px; line-height:1; }
.leaderboard-optin-mark strong { font-size:15px; letter-spacing:.02em; }
.leaderboard-optin-copy .eyebrow { margin:0 0 7px; }
.leaderboard-optin-copy h4 { margin:0; color:var(--ink); font-size:24px; letter-spacing:-.03em; }
.leaderboard-optin-copy > p:not(.eyebrow) { margin:8px 0 16px; color:var(--ink-soft); line-height:1.6; }
.leaderboard-optin-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.leaderboard-optin-actions .btn { border:0; cursor:pointer; }
.leaderboard-optin-status { min-height:20px; margin:10px 0 0; color:var(--ink-soft); font-size:13px; font-weight:700; }
.leaderboard-optin-status.is-error { color:#9a2635; }
.leaderboard-optin-copy small { display:block; margin-top:3px; color:var(--ink-soft); line-height:1.5; }

/* Wavexa community speed leaderboard */
.leaderboard-result-card { display:grid; grid-template-columns:220px minmax(0,1fr); gap:22px; margin-top:24px; padding:22px; border-radius:24px; border:1px solid rgba(10,103,255,.13); background:linear-gradient(135deg,rgba(10,103,255,.055),rgba(88,40,223,.055)); }
.leaderboard-result-rank { min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; text-align:center; border-radius:20px; color:#fff; background:linear-gradient(145deg,#0a67ff,#5828df); box-shadow:0 18px 38px rgba(39,50,185,.20); }
.leaderboard-result-rank span { max-width:150px; font-size:12px; font-weight:850; line-height:1.35; letter-spacing:.055em; text-transform:uppercase; opacity:.88; }
.leaderboard-result-rank strong { margin-top:8px; font-size:52px; line-height:1; letter-spacing:-.06em; }
.leaderboard-result-rank small { margin-top:10px; font-size:12px; line-height:1.4; opacity:.88; }
.leaderboard-profile-wrap h4 { margin:0; color:var(--ink); font-size:22px; letter-spacing:-.025em; }
.leaderboard-profile-wrap > p { margin:7px 0 16px; color:var(--ink-soft); line-height:1.6; }
.leaderboard-profile-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.leaderboard-other-provider { grid-column:1 / -1; }
.leaderboard-profile-actions { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:2px; }
.leaderboard-profile-actions .btn { border:0; cursor:pointer; }
.leaderboard-remove { min-height:42px; padding:0 8px; border:0; background:transparent; color:#8c3241; font:inherit; font-size:13px; font-weight:800; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.leaderboard-profile-status { min-height:20px; margin:10px 0 0; color:var(--ink-soft); font-size:13px; font-weight:700; }
.leaderboard-profile-status.is-success { color:#08723b; }
.leaderboard-profile-status.is-error { color:#9a2635; }
.leaderboard-public-note { display:block; margin-top:4px; color:var(--ink-soft); line-height:1.5; }
.speed-leaderboard-section { padding-top:42px; background:linear-gradient(180deg,#fff,#fafbff); }
.leaderboard-head { display:flex; justify-content:space-between; gap:22px; align-items:end; margin-bottom:18px; }
.leaderboard-head h2 { margin:0; font-size:clamp(30px,4vw,48px); letter-spacing:-.045em; }
.leaderboard-head p:not(.eyebrow) { max-width:720px; margin:8px 0 0; color:var(--ink-soft); line-height:1.65; }
.leaderboard-total { flex:0 0 auto; min-width:124px; padding:14px 18px; text-align:center; border-radius:18px; background:#fff; border:1px solid rgba(16,34,91,.08); box-shadow:0 12px 28px rgba(17,31,75,.06); }
.leaderboard-total strong { display:block; color:var(--ink); font-size:28px; letter-spacing:-.04em; }
.leaderboard-total span { display:block; margin-top:2px; color:var(--ink-soft); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.leaderboard-tabs { display:flex; gap:8px; margin:0 0 14px; padding:5px; width:max-content; max-width:100%; border-radius:999px; background:#eef2fb; }
.leaderboard-tabs button { min-height:38px; padding:0 16px; border:0; border-radius:999px; color:var(--ink-soft); background:transparent; font:inherit; font-size:13px; font-weight:850; cursor:pointer; }
.leaderboard-tabs button.is-active { color:#fff; background:linear-gradient(135deg,var(--blue),var(--purple)); box-shadow:0 8px 20px rgba(37,50,177,.18); }
.leaderboard-shell { overflow:hidden; border:1px solid rgba(16,34,91,.08); border-radius:24px; background:#fff; box-shadow:0 20px 50px rgba(17,31,75,.07); }
.leaderboard-table-head, .leaderboard-row { display:grid; grid-template-columns:72px minmax(110px,1.15fr) minmax(120px,1fr) minmax(105px,.8fr) minmax(95px,.75fr) 78px; gap:12px; align-items:center; }
.leaderboard-table-head { min-height:48px; padding:0 18px; color:var(--ink-soft); background:#f5f7fc; font-size:11px; font-weight:850; letter-spacing:.055em; text-transform:uppercase; }
.leaderboard-row { min-height:72px; padding:12px 18px; border-top:1px solid rgba(16,34,91,.065); }
.leaderboard-row:first-child { border-top:0; }
.leaderboard-row.is-current { background:linear-gradient(90deg,rgba(10,103,255,.07),rgba(88,40,223,.05)); box-shadow:inset 3px 0 0 var(--blue); }
.leaderboard-rank { display:flex; align-items:center; gap:7px; color:var(--ink); font-weight:900; }
.leaderboard-rank-medal { font-size:20px; }
.leaderboard-person strong, .leaderboard-provider-name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leaderboard-person strong { color:var(--ink); font-size:14px; }
.leaderboard-person small { display:block; margin-top:3px; color:var(--ink-soft); font-size:11px; }
.leaderboard-provider-name { color:var(--ink-soft); font-size:13px; font-weight:700; }
.leaderboard-speed strong { display:block; color:var(--ink); font-size:17px; letter-spacing:-.02em; }
.leaderboard-speed span, .leaderboard-ping span { color:var(--ink-soft); font-size:10px; font-weight:800; text-transform:uppercase; }
.leaderboard-ping strong { color:var(--ink); font-size:14px; }
.leaderboard-empty { padding:32px 20px; color:var(--ink-soft); text-align:center; }
.leaderboard-disclaimer { margin:14px 4px 0; color:var(--ink-soft); font-size:12px; line-height:1.6; }
@media (max-width:900px) { .leaderboard-table-head { display:none; } .leaderboard-row { grid-template-columns:54px minmax(0,1fr) auto; gap:8px 12px; } .leaderboard-row > :nth-child(3) { grid-column:2; } .leaderboard-row > :nth-child(4) { grid-column:3; grid-row:1 / span 2; text-align:right; } .leaderboard-row > :nth-child(5), .leaderboard-row > :nth-child(6) { display:none; } .leaderboard-rank { grid-row:1 / span 2; } }
@media (max-width:700px) { .leaderboard-optin-card, .leaderboard-result-card { grid-template-columns:1fr; } .leaderboard-optin-mark { min-height:130px; } .leaderboard-result-rank { min-height:145px; } .leaderboard-profile-form { grid-template-columns:1fr; } .leaderboard-other-provider, .leaderboard-profile-actions { grid-column:auto; } .leaderboard-head { align-items:flex-start; flex-direction:column; } .leaderboard-total { display:flex; align-items:baseline; gap:7px; min-width:0; } .leaderboard-total strong { font-size:22px; } .leaderboard-tabs { width:100%; display:grid; grid-template-columns:repeat(3,1fr); } .leaderboard-tabs button { padding:0 9px; } }
@media (max-width:390px) { .leaderboard-row { grid-template-columns:46px minmax(0,1fr) auto; padding-inline:12px; } .leaderboard-speed strong { font-size:15px; } }