/* ===== wl page: viewport swap mobile/desktop ===== */
.m-only { display: block; }
.d-only { display: none; }

@media (min-width: 980px) {
  .m-only { display: none; }
  .d-only { display: block; }
  body { padding: 0; background: var(--bg); }
}

/* below 460px tighten section padding so .shell content fits comfortably */
@media (max-width: 380px) {
  .section { padding: 44px 18px; }
  h1 { font-size: 32px; }
  .price-val .num { font-size: 36px; }
}

/* keep coverage SVG hub vertically centered */
.cov-stage { aspect-ratio: 320 / 176; }

/* fallback for tablets between 600-979 — keep mobile shell readable */
@media (min-width: 600px) and (max-width: 979px) {
  .m-only .shell { max-width: 560px; }
}

/* FAQ answers must stay left-aligned even inside the centered .final section */
.faq-q { text-align: left; }
.faq-a-inner { text-align: left; }

/* Compare block: prevent horizontal overflow on narrow phones */
.compare { overflow: hidden; }
.cmp-row {
  grid-template-columns: auto auto 1fr auto;
  min-width: 0;
}
.cmp-row > * { min-width: 0; }
.cmp-url { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 460px) {
  .feature { padding: 20px 16px; }
  .compare { padding: 12px; }
  .cmp-row {
    gap: 8px;
    padding: 10px 11px;
    font-size: 12.5px;
  }
  .cmp-tag { font-size: 10.5px; }
  .cmp-url { font-size: 11.5px; }
  .cmp-state { font-size: 10.5px; }
  .cmp-cap { font-size: 10px; }
}

@media (max-width: 380px) {
  .cmp-row { grid-template-columns: auto auto 1fr auto; gap: 6px; padding: 9px 10px; }
  .cmp-tag { font-size: 10px; }
  .cmp-url { font-size: 11px; }
  .cmp-state { font-size: 10px; }
}