/* Responsive overrides — inline styles in components.jsx are desktop-first,
   so these rules use !important to win. Loaded last. */

html,body{overflow-x:hidden;max-width:100%}
img,svg{max-width:100%}

/* ---------- TABLET (<=1024px) ---------- */
@media (max-width:1024px){
  section{padding-left:32px !important;padding-right:32px !important}
  header nav{padding-left:20px !important;padding-right:20px !important;gap:20px !important}
  .pt-navlinks{gap:18px !important;font-size:13px !important}
}

/* ---------- MOBILE (<=860px) ---------- */
@media (max-width:860px){
  /* every multi-column grid collapses to one column */
  [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns"][style*="gap: 72px"],
  [style*="grid-template-columns"][style*="gap: 64px"],
  [style*="grid-template-columns"][style*="gap: 56px"],
  [style*="grid-template-columns"][style*="gap: 48px"]{gap:40px !important}

  /* exceptions: small grids that must keep their columns */
  [style*="grid-template-columns"].pt-keep-3{grid-template-columns:repeat(3,1fr) !important}
  [style*="grid-template-columns"].pt-keep-2{grid-template-columns:1fr 1fr !important}
  [style*="grid-template-columns"].pt-compare{grid-template-columns:1.3fr 1fr 1fr !important}

  section{padding-left:20px !important;padding-right:20px !important;padding-top:64px !important;padding-bottom:64px !important}

  /* header: hide anchor nav, keep logo + CTA */
  .pt-navlinks{display:none !important}
  header nav{padding:10px 20px !important;justify-content:space-between}

  /* hero */
  h1{font-size:38px !important;line-height:44px !important}
  h2{font-size:30px !important;line-height:36px !important}
  h3{font-size:20px !important}

  /* hero mock: absolute cards flow into a stack */
  .pt-heromock{height:auto !important;display:flex;flex-direction:column;gap:12px}
  .pt-heromock > div{position:static !important;width:100% !important;max-width:none !important}

  .pt-gauge{width:100% !important;max-width:280px}
  .pt-gauge svg{width:100%;height:auto}

  /* comparison table: tighter so 3 columns still fit */
  .pt-compare{padding-left:14px !important;padding-right:14px !important;font-size:13px !important}
  .pt-compare > div{word-break:break-word}

  /* oversized card padding */
  .pt-quote{padding:40px 24px !important}
  .pt-recog{padding:40px 24px !important}
  .pt-quotemark{font-size:140px !important;top:-10px !important;left:0 !important}

  /* announcement bar */
  .pt-announce{padding:8px 16px !important;font-size:12px !important;text-align:center}
}

/* ---------- SMALL PHONES (<=380px) ---------- */
@media (max-width:380px){
  h1{font-size:32px !important;line-height:38px !important}
  section{padding-left:16px !important;padding-right:16px !important}
  .pt-compare{font-size:12px !important;padding-left:10px !important;padding-right:10px !important}
}