/* ─────────────────────────────────────────────────────────────────────────────
   Bluuid — shared responsive stylesheet
   Linked from every page. The per-page <style> blocks handle desktop layout;
   this file handles tablet → mobile adaptation.
───────────────────────────────────────────────────────────────────────────── */

/* ── Tablet (≤820px) — grids collapse, nav collapses ─────────────────────── */
@media (max-width: 820px) {
  .wrap { padding: 0 20px; }

  /* Collapse all multi-col grids */
  .g2, .g3, .g4, .seg, .prow, .steprow { grid-template-columns: 1fr !important; }

  /* Before/after shift panel */
  .shift { grid-template-columns: 1fr !important; }
  .arr { transform: rotate(90deg); padding: 4px 0; }

  /* Exit card stacks */
  .exit-card { flex-direction: column; gap: 20px; }

  /* Desktop nav links hidden — pill nav takes over */
  .nav-links a:not(.nav-cta) { display: none; }

  /* TCO page grids */
  .results-grid, .ins-grid, .assumptions { grid-template-columns: 1fr !important; }
  .saving { flex-direction: column; }
  .slider-top { flex-direction: column; }
}

/* ── Mobile (≤600px) — padding, type, components ─────────────────────────── */
@media (max-width: 600px) {
  body { padding-bottom: 72px; }
  .wrap { padding: 0 16px; }

  /* Reduce section padding */
  section { padding: 44px 0 !important; }

  /* Typography */
  h1 { font-size: 26px !important; letter-spacing: -0.3px; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 16px !important; }
  .lead { font-size: 16px !important; }
  .eyebrow { font-size: 11px; }

  /* Header */
  .site-header { height: auto !important; overflow: visible !important; }
  .topnav { padding: 10px 16px; }
  .nav-links .nav-cta { font-size: 13px; padding: 8px 14px; }

  /* Pill nav — full width, horizontally scrollable */
  .pill-nav {
    width: calc(100% - 24px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    bottom: 12px;
    padding: 5px;
    border-radius: 30px;
    gap: 2px;
  }
  .pill-nav::-webkit-scrollbar { display: none; }
  .pill-nav a { padding: 8px 13px; font-size: 12px; white-space: nowrap; border-radius: 24px; }

  /* Stats band — stack vertically */
  .stats-band .wrap { flex-direction: column; gap: 18px; padding-top: 28px; padding-bottom: 28px; }
  .stat { min-width: unset; }
  .stat .big { font-size: 18px; }
  .stat .lbl { font-size: 14px; }

  /* Segment tiles — 2-col on mobile, 1-col on very small */
  .seg { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }

  /* Cards */
  .card, .vcard, .step { padding: 18px 16px; }
  .exit-card { padding: 24px 18px; }
  .exit-card h3 { font-size: 18px !important; }

  /* Pricing tier cards */
  .pcard { padding: 22px 18px; }
  .pcard .price { font-size: 30px; }

  /* TCO assumptions — 2 col on mobile */
  .assumptions { grid-template-columns: repeat(2, 1fr) !important; }

  /* Form inputs — 16px prevents iOS Safari from auto-zooming on focus */
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 16px !important; }

  /* Form card */
  div[style*="border-radius:18px"] { padding: 24px 18px !important; }

  /* Dark tiles (problem page "let's be direct") */
  .dark-tiles { grid-template-columns: 1fr !important; }

  /* Number row list (problem page) */
  .num-row { flex-direction: column !important; }
  .num-row .num-n { margin-bottom: 4px; }

  /* Footer */
  footer .wrap { flex-direction: column; gap: 6px; text-align: center; }
}

/* ── Very small screens (≤380px) ─────────────────────────────────────────── */
@media (max-width: 380px) {
  h1 { font-size: 22px !important; }
  h2 { font-size: 19px !important; }
  .seg { grid-template-columns: 1fr !important; }
  .assumptions { grid-template-columns: 1fr !important; }
  .pill-nav a { padding: 7px 10px; font-size: 11px; }
}