/*
 * PARIO — mobile.css
 * Loaded on all inner pages after page-specific <style> blocks.
 * Targets 768px and below. Uses !important only where needed to
 * override page-specific class styles defined in <style> blocks.
 */

@media (max-width: 768px) {

  /* ─────────────────────────────────────────────────────
     GLOBAL: Every multi-column grid → single column
     Catches all gap values, all column configs
  ───────────────────────────────────────────────────── */

  /* Class-based grids */
  .grid-2, .grid-3, .grid-4,
  .split-hero, .employer-band-inner,
  .hiw-cols, .apply-cols,
  .calc-grid, .sms-section-grid,
  .case-card, .research-layout,
  .policy-layout, .hiw-flow {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Page-layout classes defined in per-page <style> blocks */
  .demo-page, .contact-page {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  /* Inline grids — catch every column config */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* ─────────────────────────────────────────────────────
     EXCEPTIONS: things that must stay multi-column
  ───────────────────────────────────────────────────── */

  /* Icon + text rows (40px/48px/52px/72px wide icon column) */
  [style*="grid-template-columns: 40px"],
  [style*="grid-template-columns:40px"],
  [style*="grid-template-columns: 48px"],
  [style*="grid-template-columns:48px"],
  [style*="grid-template-columns: 52px"],
  [style*="grid-template-columns:52px"],
  [style*="grid-template-columns: 72px"],
  [style*="grid-template-columns:72px"] {
    grid-template-columns: revert !important;
  }

  /* 2×2 stat tiles inside dark bands — stay 2-col */
  .stats-grid-2x2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* Footer stays 2-col */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px !important;
  }

  /* Form first/last name row */
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* Evidence strip → 2×2 on mobile */
  .evidence-strip {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Pricing grid — single column */
  .pricing-grid, .grid-3.pricing-grid {
    grid-template-columns: 1fr !important;
  }

  /* ─────────────────────────────────────────────────────
     FLEX: All horizontal button rows → stack vertically
  ───────────────────────────────────────────────────── */

  /* Any flex row that contains .btn elements */
  .hero-btns,
  [style*="display:flex"][style*=".btn"],
  [style*="display: flex"][style*=".btn"] {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Catch flex rows by gap value (button groups use 12px or 14px) */
  [style*="display:flex"][style*="gap:12px"],
  [style*="display:flex"][style*="gap: 12px"],
  [style*="display:flex"][style*="gap:14px"],
  [style*="display:flex"][style*="gap: 14px"],
  [style*="display:flex"][style*="gap:20px"],
  [style*="display:flex"][style*="gap: 20px"],
  [style*="display:flex"][style*="gap:24px"],
  [style*="display:flex"][style*="gap: 24px"],
  [style*="display:flex"][style*="gap:32px"],
  [style*="display:flex"][style*="gap: 32px"],
  [style*="display:flex"][style*="gap:48px"],
  [style*="display:flex"][style*="gap: 48px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  /* Exceptions — flex rows that must stay horizontal */
  /* Nav inner, trust items, footer bottom, icon+text pairs */
  .nav-inner,
  .trust-item,
  .trust-bar-inner,
  .footer-bottom,
  .demo-promise,
  .contact-channel,
  .no-list li,
  .req-chip,
  .finding-citation,
  .sec-label,
  .policy-meta,
  .policy-meta-item {
    flex-direction: row !important;
  }

  /* All .btn inside stacked flex containers → full width */
  [style*="display:flex"][style*="gap:12px"] .btn,
  [style*="display:flex"][style*="gap: 12px"] .btn,
  [style*="display:flex"][style*="gap:14px"] .btn,
  [style*="display:flex"][style*="gap: 14px"] .btn,
  [style*="display:flex"][style*="gap:20px"] .btn,
  [style*="display:flex"][style*="gap: 20px"] .btn,
  [style*="display:flex"][style*="gap:24px"] .btn,
  [style*="display:flex"][style*="gap: 24px"] .btn,
  .hero-btns .btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* ─────────────────────────────────────────────────────
     OVERFLOW: Remove max-width constraints on content blocks
  ───────────────────────────────────────────────────── */

  [style*="max-width:400px"], [style*="max-width: 400px"],
  [style*="max-width:440px"], [style*="max-width: 440px"],
  [style*="max-width:460px"], [style*="max-width: 460px"],
  [style*="max-width:480px"], [style*="max-width: 480px"],
  [style*="max-width:500px"], [style*="max-width: 500px"],
  [style*="max-width:520px"], [style*="max-width: 520px"],
  [style*="max-width:540px"], [style*="max-width: 540px"],
  [style*="max-width:560px"], [style*="max-width: 560px"],
  [style*="max-width:580px"], [style*="max-width: 580px"],
  [style*="max-width:600px"], [style*="max-width: 600px"],
  [style*="max-width:620px"], [style*="max-width: 620px"],
  [style*="max-width:640px"], [style*="max-width: 640px"],
  [style*="max-width:660px"], [style*="max-width: 660px"],
  [style*="max-width:680px"], [style*="max-width: 680px"],
  [style*="max-width:700px"], [style*="max-width: 700px"],
  [style*="max-width:720px"], [style*="max-width: 720px"],
  [style*="max-width:760px"], [style*="max-width: 760px"],
  [style*="max-width:800px"], [style*="max-width: 800px"] {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ─────────────────────────────────────────────────────
     PAGE HERO: Inner page hero sections
  ───────────────────────────────────────────────────── */

  .page-hero {
    padding: 100px 0 48px !important;
  }

  /* Hero grids inside .page-hero — collapse, then re-allow icon rows */
  .page-hero [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* ─────────────────────────────────────────────────────
     PER-PAGE: Book demo
  ───────────────────────────────────────────────────── */

  .demo-left  { padding: 48px 24px !important; }
  .demo-right { padding: 40px 24px !important; }
  .demo-form  { max-width: 100% !important; }

  /* ─────────────────────────────────────────────────────
     PER-PAGE: Contact
  ───────────────────────────────────────────────────── */

  .contact-left  { padding: 48px 24px !important; }
  .contact-right { padding: 40px 24px !important; }

  /* ─────────────────────────────────────────────────────
     PER-PAGE: Research
  ───────────────────────────────────────────────────── */

  .research-toc   { position: static !important; }
  .finding-head   { grid-template-columns: 1fr !important; padding: 24px 20px !important; }
  .finding-number { display: none !important; }
  .finding-body   { padding: 22px 20px !important; }
  .finding-stat   { font-size: 2.4rem !important; }
  .contrast-frame { padding: 32px 24px !important; }

  /* ─────────────────────────────────────────────────────
     PER-PAGE: Privacy / Terms
  ───────────────────────────────────────────────────── */

  .policy-toc  { position: static !important; }
  .policy-layout { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* ─────────────────────────────────────────────────────
     PER-PAGE: Pricing
  ───────────────────────────────────────────────────── */

  .pricing-head { padding: 24px 20px !important; }
  .pricing-body { padding: 20px !important; }

  /* ─────────────────────────────────────────────────────
     PER-PAGE: Calculator
  ───────────────────────────────────────────────────── */

  .calc-grid  { grid-template-columns: 1fr !important; }
  .calc-left  { padding: 28px 20px !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; }
  .calc-right { padding: 28px 20px !important; }

  /* ─────────────────────────────────────────────────────
     PER-PAGE: Network
  ───────────────────────────────────────────────────── */

  .sticky-col { position: static !important; }
  .net-step   { grid-template-columns: 52px 1fr !important; gap: 16px !important; }

  /* ─────────────────────────────────────────────────────
     TRUST BAR: Stack on mobile
  ───────────────────────────────────────────────────── */

  .trust-bar-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .trust-divider { display: none !important; }

  /* ─────────────────────────────────────────────────────
     TYPOGRAPHY: Scale down large display text
  ───────────────────────────────────────────────────── */

  .d-xl  { font-size: clamp(2rem, 7.5vw, 2.8rem) !important; }
  .d-lg  { font-size: clamp(1.7rem, 6vw, 2.2rem) !important; }

  /* ─────────────────────────────────────────────────────
     SPACING: Tighten sections
  ───────────────────────────────────────────────────── */

  .section    { padding: 52px 0 !important; }
  .section-sm { padding: 36px 0 !important; }
  .container,
  .container-narrow { padding: 0 20px !important; }

  /* ─────────────────────────────────────────────────────
     CTA BAND: Stack buttons, center them
  ───────────────────────────────────────────────────── */

  .cta-amber { padding: 56px 0 !important; }
  .cta-amber > .container > [style*="display:flex"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .cta-amber .btn {
    width: 100% !important;
    max-width: 320px !important;
    justify-content: center !important;
  }

  /* ─────────────────────────────────────────────────────
     FOOTER: 2-col on mobile, single col at 480px
  ───────────────────────────────────────────────────── */

  .footer-bottom {
    flex-direction: column !important;
    gap: 10px !important;
  }
}

/* ── 480px: small phones ─────────────────────────── */
@media (max-width: 480px) {

  .container,
  .container-narrow { padding: 0 16px !important; }

  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

  .page-hero { padding: 92px 0 40px !important; }

  .demo-left, .contact-left   { padding: 40px 16px !important; }
  .demo-right, .contact-right { padding: 32px 16px !important; }

  .finding-body,
  .finding-head { padding: 18px 16px !important; }
  .finding-stat { font-size: 2rem !important; }

  .evidence-strip         { grid-template-columns: 1fr 1fr !important; }
  .evidence-strip-item    { padding: 18px 10px !important; }
  .evidence-strip-num     { font-size: 1.6rem !important; }

  .pricing-head,
  .pricing-body           { padding: 18px 16px !important; }

  .contrast-frame         { padding: 24px 18px !important; }
  .contrast-frame p       { font-size: 0.92rem !important; }

  .policy-section h2      { font-size: 1.35rem !important; }

  .d-xl { font-size: clamp(1.85rem, 8vw, 2.2rem) !important; }
  .d-lg { font-size: clamp(1.55rem, 7vw, 1.85rem) !important; }

  .btn-lg { padding: 13px 18px !important; font-size: 0.88rem !important; }
}