.gauge-cap { fill: var(--brand-3); filter: drop-shadow(0 0 8px rgba(24, 166, 200, .4)); }

.speed-feedback {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.speed-feedback a { text-decoration: underline; }

/* Keep the desktop speed-test colours and proportions on smaller screens.
   These scoped rules replace the older mobile miniature/gap overrides. */
@media (max-width: 900px) {
  body.speedtest-page .speed-hero-grid {
    width: min(calc(100% - 32px), 620px) !important;
    max-width: 620px !important;
  }

  body.speedtest-page .speed-copy .hero-title {
    max-width: 100% !important;
  }

  body.speedtest-page .speed-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: clamp(16px, 4.5vw, 26px) !important;
    border-radius: 28px !important;
    border: 1px solid rgba(217, 228, 239, .98) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow) !important;
  }

  body.speedtest-page .speed-card::before {
    display: block !important;
    inset: -120px -60px auto auto !important;
    width: 180px !important;
    height: 180px !important;
    border-radius: 999px !important;
    background: rgba(24, 166, 200, .14) !important;
  }

  body.speedtest-page .speed-card-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  body.speedtest-page .speed-card-top .section-kicker {
    margin: 0 0 8px !important;
    font-size: 12px !important;
  }

  body.speedtest-page .speed-card-top h2 {
    margin: 0 !important;
    font-size: 25px !important;
    line-height: 1.2 !important;
    color: var(--brand) !important;
  }

  body.speedtest-page .speed-pill {
    flex: 0 0 auto !important;
    min-height: 32px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
  }

  body.speedtest-page .speed-progress {
    flex-shrink: 0;
    height: 8px;
  }

  body.speedtest-page .speedometer {
    display: grid !important;
    place-items: center !important;
    align-self: center !important;
    width: min(100%, 410px) !important;
    height: auto !important;
    aspect-ratio: 260 / 160;
    margin: 8px 0 0 !important;
    padding: 0 !important;
  }

  body.speedtest-page .speedometer svg {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body.speedtest-page .gauge-track {
    stroke: rgba(96, 112, 138, .2) !important;
    stroke-width: 18 !important;
  }

  body.speedtest-page .gauge-fill {
    stroke: var(--brand-3) !important;
    stroke-width: 18 !important;
    filter: drop-shadow(0 0 8px rgba(24, 166, 200, .4)) !important;
  }

  body.speedtest-page .gauge-needle {
    opacity: 1 !important;
    stroke: var(--warm) !important;
    stroke-width: 5 !important;
    filter: drop-shadow(0 7px 12px rgba(240, 111, 67, .25)) !important;
  }

  body.speedtest-page .gauge-hub {
    opacity: 1 !important;
    fill: var(--brand) !important;
    stroke: #fff !important;
    stroke-width: 4 !important;
  }

  body.speedtest-page .speed-readout {
    display: block !important;
    top: 54% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: max-content;
    max-width: 72%;
    color: var(--brand) !important;
    pointer-events: none;
  }

  body.speedtest-page .speed-readout strong {
    color: var(--brand) !important;
    font-size: clamp(3rem, 14vw, 5.4rem) !important;
    line-height: .92 !important;
    letter-spacing: -.08em !important;
  }

  body.speedtest-page .speed-readout span {
    margin-top: 4px !important;
    color: var(--muted) !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;
  }

  body.speedtest-page .speed-readout small {
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  body.speedtest-page .speed-results {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body.speedtest-page .speed-result {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px 5px !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    background: rgba(9, 126, 214, .08) !important;
    box-shadow: none !important;
  }

  body.speedtest-page .speed-result span {
    font-size: clamp(11px, 3.1vw, 14px) !important;
    line-height: 1.3 !important;
    font-weight: 760 !important;
  }

  body.speedtest-page .speed-result strong {
    margin-top: 8px !important;
    color: var(--brand) !important;
    font-size: clamp(14px, 4vw, 20px) !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  body.speedtest-page .speed-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  body.speedtest-page .speed-controls .btn {
    height: auto !important;
    min-height: 46px !important;
    padding: 12px !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    justify-content: center !important;
  }

  body.speedtest-page .speed-controls #speedStart {
    background: linear-gradient(135deg, #006098, #00457c) !important;
    box-shadow: 0 14px 36px rgba(8, 126, 214, .2) !important;
  }

  body.speedtest-page .speed-controls #speedStop {
    background: var(--surface) !important;
    color: var(--brand) !important;
    border: 1px solid var(--line) !important;
  }

  body.speedtest-page .speed-controls #speedStop[disabled] {
    background: var(--surface) !important;
    color: #646975 !important;
    opacity: .65 !important;
  }

  body.speedtest-page .speed-feedback { margin: 0; }
}

@media (max-width: 360px) {
  body.speedtest-page .speed-readout {
    top: 47% !important;
  }

  body.speedtest-page .speed-readout strong {
    font-size: 42px !important;
  }

  body.speedtest-page .speed-readout small {
    font-size: 10px !important;
  }
}