/* ============================================================
   Platform pages (WordPress / PrestaShop / Magento / Node.js)
   — responsive overrides. Loaded together with
   hosting-v5/responsive.css (nav, footer, badges, FAQ rows).
   !important is required to beat the pages' inline styles.
   ============================================================ */

/* ---------- ≤1100px · small desktop ---------- */
@media (max-width: 1100px) {
  .w1-hero .hv-h1 { font-size: clamp(52px, 6.5vw, 72px) !important; }
  .w1-mark { width: 560px; height: 560px; right: -160px; }
}

/* ---------- ≤900px · tablet / stacking ---------- */
@media (max-width: 900px) {
  /* every section/header wrap becomes a single column */
  .hv-page :is(section, header) > .hv-wrap {
    display: flex !important; flex-direction: column !important;
    grid-template-columns: none !important; gap: 40px !important;
    align-items: stretch !important;
  }
  /* heading rows (h2 + intro side by side) stack left-aligned */
  .hv-page .hv-wrap > div[style*="flex-end"] {
    flex-direction: column !important; align-items: flex-start !important;
    gap: 16px !important;
  }
  .hv-page .hv-wrap > div[style*="flex-end"] p { padding-bottom: 0 !important; }

  /* hero */
  .w1-hero { padding: 140px 0 56px !important; }
  .w1-hero .hv-h1 { font-size: clamp(42px, 9vw, 60px) !important; }
  .w1-mark { width: 440px; height: 440px; right: -140px; top: 38%; }
  .w1-woo { display: none !important; }   /* floating Woo / Adobe / npm badge */
  .w1-proof { gap: 18px 28px !important; }

  /* type scale */
  .hv-page .hv-h2 { font-size: clamp(32px, 5.5vw, 42px) !important; }
  .hv-page .hv-lead { font-size: 19px !important; }

  /* spec sheet: one column */
  .w1-spec { grid-template-columns: 1fr !important; }
  .w1-spec-col { border-left: none !important; border-top: 1px solid var(--hairline); padding: 28px 28px 32px !important; }
  .w1-spec-col:first-child { border-top: none; }

  /* illustration wraps go full width; floating cards become stacked */
  .w1-shop-wrap { padding: 18px 0 56px !important; }
  .w1-gauge { right: 8px !important; }
  .w1-spark { right: 0 !important; top: auto !important; bottom: -44px !important; }
  .w1-chip.bl { left: 8px !important; }

  .w1-stage-wrap { padding: 0 !important; display: flex; flex-direction: column; gap: 16px; }
  .w1-stage { width: 100% !important; }
  .w1-trace { position: static !important; width: 100% !important; }
  .w1-stage-wrap .w1-spark { position: absolute; }

  .w1-sec-wrap { padding: 0 !important; display: flex; flex-direction: column; gap: 16px; }
  .w1-sec { width: 100% !important; }
  .w1-ddos { position: static !important; width: auto !important; }

  /* CDN map + stats */
  .w1-cdn-stats { grid-template-columns: 1fr !important; justify-content: stretch !important; }
  .w1-cdn-stat { border-left: none !important; border-top: 1px solid var(--hairline); padding: 20px 4px !important; }
  .w1-cdn-stat:first-child { border-top: none; }

  /* CTA grain card */
  .w1-cta-card { padding: 64px 32px !important; }
  .w1-cta-card .hv-h2 { font-size: clamp(32px, 7vw, 46px) !important; }
}

/* ---------- ≤640px · mobile ---------- */
@media (max-width: 640px) {
  .w1-hero { padding: 124px 0 48px !important; }
  .w1-hero .hv-h1 { font-size: clamp(38px, 11vw, 48px) !important; }
  .w1-mark { width: 320px; height: 320px; right: -110px; top: 30%; }
  .hv-page .hv-lead { font-size: 17px !important; }
  .hv-page .hv-h2 { font-size: clamp(28px, 8.5vw, 34px) !important; }

  /* storefront mock: stack image and info */
  .w1-shop-body { grid-template-columns: 1fr !important; gap: 18px !important; padding: 18px !important; }
  .w1-shop-img { min-height: 140px !important; }
  .w1-gauge { top: -14px !important; padding: 10px 14px 10px 10px !important; }
  .w1-gauge-ring { width: 46px !important; height: 46px !important; }
  .w1-shop-url { font-size: 10.5px !important; padding: 4px 9px !important; }

  /* log/stage rows: tighten mono text */
  .w1-log-row { grid-template-columns: 50px 1fr 84px !important; padding: 8px 13px !important; gap: 9px !important; }
  .w1-log-row .src { font-size: 11px !important; }
  .w1-stage-row { padding: 11px 14px !important; }
  .w1-stage-row .file { font-size: 11px !important; }
  .w1-trace-row { grid-template-columns: 88px 1fr 36px !important; }
  .w3-term-body { font-size: 11.5px !important; padding: 16px 14px 20px !important; min-height: 230px !important; }

  /* CDN map labels: smaller, drop latency figures */
  .w1-city { padding: 3px 8px !important; gap: 6px !important; }
  .w1-city .nm { font-size: 10px !important; }
  .w1-city .ms { display: none !important; }
  .w1-city .bar { width: 6px !important; height: 6px !important; }
  .w1-cdn-stat b { font-size: 32px !important; }

  /* CTA */
  .w1-cta-card { padding: 52px 22px !important; border-radius: 16px !important; gap: 28px !important; }
  .w1-cta-card .hv-lead { font-size: 16.5px !important; }

  /* FAQ */
  .w1-faq-q { font-size: 16px !important; padding: 18px 2px !important; }
}