/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE PREMIUM PASS — Task #1144355
   iPhone SE (375px) + iPhone 15 (390px) + all mobile viewports.
   Loaded LAST — overrides all earlier mobile styles.

   Covers gaps from prior mobile passes:
   • Body font upgrade → 16px minimum (prevents iOS zoom on any element)
   • Touch targets → 48×48px enforced everywhere
   • Modals → bottom-sheet pattern (slide up from bottom)
   • Settlement sticky CTA → immediate show, 56px height
   • Pricing → recommended plan premium distinction in stack
   • Navigation → 300ms cubic-bezier drawer transition
   • Settlement directory → search sticky, proper scroll behavior
   • Auth forms → centered card, full-width inputs
   • 390px iPhone 15 specific viewport fixes
   • Thumb-zone CTAs (bottom 40% positioning for primary actions)
   • Safe area padding for all fixed bottom elements
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   1. TYPOGRAPHY BASELINE — 16px minimum everywhere on mobile
      Prevents iOS auto-zoom on ANY focused element.
      Upgrades from prior 15px body to 16px.
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  body {
    font-size: 16px !important;
    line-height: 1.6;
  }

  p, li, label, .card-text, .card-desc, .guide-excerpt,
  .settlement-desc, .sg-section-body, .blog-body,
  .settlement-body, .sd-content, .guide-body {
    font-size: 16px;
    line-height: 1.6;
  }

  /* Small utility text can go to 14px minimum, never below */
  small, .text-sm, .text-xs, caption, figcaption,
  .meta-text, .byline, .timestamp {
    font-size: 14px !important;
  }

  /* Footer fine print — 13px floor */
  .sr-ft-disclaimer-text, .sr-ft-address, .sr-ft-copy {
    font-size: 13px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. TOUCH TARGETS — 48×48px minimum everywhere
      Upgrade from 44px in prior passes to meet WCAG 2.5.5 enhanced target.
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* ALL buttons, links-as-buttons, role=button */
  a.btn, a.cta, button:not([aria-hidden="true"]),
  .sp-btn, .rs-btn-primary, .rs-btn-primary-dominant,
  .lf-plan-cta, .emp-plan-cta, .emp-hero-btn,
  .prc-cta, .prc-card-cta, .adv-cta-btn,
  .msfc-btn, .bar-cta, .sticky-cta-btn,
  .filing-cta-link, .sr-mcta-btn,
  [role="button"] {
    min-height: 48px !important;
    min-width: 48px !important;
  }

  /* Form submit buttons */
  form button[type="submit"],
  form input[type="submit"],
  .form-submit-btn,
  .aup-btn,
  .auth-submit-btn {
    min-height: 52px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
  }

  /* FAQ toggles, accordion buttons, summary elements */
  .faq-q, .ca-faq-question, .emp-faq-q, .seo-faq-q,
  details > summary,
  .nav-mobile-accordion-btn {
    min-height: 52px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Filter pills, tab buttons */
  .filter-btn, .tab-btn, .sort-btn, .category-pill,
  .dir-cat-pill, .dir-filter-pill {
    min-height: 48px !important;
    padding: 10px 18px !important;
    font-size: 15px !important;
  }

  /* Footer links */
  .sr-ft-col-links a {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    padding: 8px 0 !important;
  }

  /* Navigation links */
  .nav-mobile-link {
    min-height: 52px !important;
    padding: 12px 1.25rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. NAVIGATION DRAWER — 300ms cubic-bezier slide, smooth open/close
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Mobile nav panel/drawer — smooth slide-in */
  #mobileNavPanel,
  .mobile-nav-drawer,
  .nav-mobile-menu,
  [id*="mobile"][id*="nav"],
  [id*="nav"][id*="mobile"] {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform;
  }

  /* Ensure drawer doesn't cause layout shift while hidden */
  #mobileNavPanel:not(.is-open):not([aria-hidden="false"]),
  .mobile-nav-drawer:not(.is-open) {
    visibility: visible; /* Stays in DOM but offscreen */
  }

  /* Nav overlay backdrop */
  .nav-overlay,
  .mobile-nav-overlay,
  #navOverlay {
    transition: opacity 0.3s ease !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  /* Hamburger button — always 48×48 */
  .nav-hamburger,
  [aria-label="Open menu"],
  [aria-label="Close menu"],
  [aria-label="Menu"] {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }

  /* Nav close button — prominent, top-right, large touch target */
  .nav-mobile-close,
  .mobile-nav-close,
  #mobileNavClose,
  button[aria-label="Close navigation"] {
    min-width: 56px !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.4rem !important;
  }

  /* Mega panel on mobile — accordion, no overflow */
  .mega-panel {
    border-radius: 0 !important;
    box-shadow: none !important;
    border-top: 1px solid #f0f2f5 !important;
  }
}

@media (max-width: 600px) {
  /* Full-height mobile drawer on small screens */
  #mobileNavPanel,
  .mobile-nav-drawer {
    max-height: calc(100vh - 48px) !important;
    max-height: calc(100dvh - 48px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. MODALS → BOTTOM SHEETS
      All modals on mobile animate from bottom. Native-iOS feel.
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Bottom sheet pattern — replaces centered overlay */
  .modal-overlay,
  .modal-backdrop,
  [class*="modal-overlay"],
  [class*="modal-backdrop"] {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-content,
  .popup-content,
  [class*="modal-content"],
  [class*="popup-content"],
  .dialog-inner,
  .modal-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    max-height: 90vh !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
    /* Bottom sheet handle */
    padding-top: 1.5rem !important;
    animation: sr-sheet-up 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* Drag handle indicator */
  .modal-content::before,
  .popup-content::before,
  [class*="modal-content"]::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 0 auto 1rem;
    flex-shrink: 0;
  }

  /* Pro upgrade modal */
  #proUpgradeModal {
    display: flex !important;
    align-items: flex-end !important;
    padding: 0 !important;
  }

  #proUpgradeModal > div {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    animation: sr-sheet-up 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* Share modal */
  .share-win-modal {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    animation: sr-sheet-up 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
  }

  /* Onboarding wizard as bottom sheet */
  .srwiz-panel {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    animation: sr-sheet-up 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
}

/* Bottom-sheet slide-up animation */
@keyframes sr-sheet-up {
  from {
    transform: translateY(100%);
    opacity: 0.8;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. SETTLEMENT DETAIL — Sticky bottom CTA styling upgrades
      JS now shows immediately on page load (changed from scroll-triggered).
      Note: display show/hide is controlled by JS — we do NOT force display here
      to preserve the dismiss button functionality (inline style wins over !important).
      We only enhance sizing, spacing, and visual quality when visible.
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* When the sticky CTA is visible — premium styling */
  #mobileStickyFileCta[style*="display: block"],
  #mobileStickyFileCta[style*="display:block"] {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 8500 !important;
    background: #ffffff !important;
    border-top: 2px solid #2563EB !important;
    padding: 0.75rem 1rem !important;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0.75rem)) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12) !important;
    min-height: 56px !important;
  }

  .msfc-inner {
    min-height: 44px !important;
    align-items: center !important;
  }

  /* CTA button — full prominence, 48px minimum touch target */
  .msfc-btn {
    min-height: 48px !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: 10px !important;
    background: #2563EB !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(37,99,235,0.35) !important;
  }

  /* Urgency text — 14px minimum */
  .msfc-urgency {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111827 !important;
  }

  .msfc-trust {
    font-size: 12px !important;
    color: #6b7280 !important;
  }

  /* Dismiss button — easy to tap */
  .msfc-dismiss {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    color: #9ca3af !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. HOMEPAGE — Thumb-zone CTAs, proper hero layout
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Hero section — generous padding, text-first */
  .rs-hero-redesigned,
  .sr-hero-section,
  [class*="home-hero"],
  [class*="hero-redesigned"] {
    padding-top: clamp(1.5rem, 8vw, 2.5rem) !important;
    padding-bottom: clamp(1.5rem, 6vw, 2rem) !important;
  }

  /* Hero headline — readable at 375px */
  .sr-hero-value-prop,
  .rs-hero-headline,
  .hero-headline {
    font-size: clamp(1.65rem, 8.5vw, 2.2rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
    padding: 0 !important;
  }

  /* Hero subheadline */
  .sr-hero-sub,
  .rs-hero-sub,
  .hero-sub {
    font-size: clamp(1rem, 4.5vw, 1.15rem) !important;
    line-height: 1.55 !important;
  }

  /* Primary CTA — full width, thumb-friendly */
  .rs-btn-primary-dominant,
  .sr-hero-cta-primary,
  .hero-cta-primary {
    width: 100% !important;
    min-height: 56px !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Secondary ghost button — full width, secondary hierarchy */
  .rs-btn-ghost-redesigned,
  .sr-hero-cta-secondary,
  .hero-cta-secondary {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 1rem !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Trust/stats bar — 2×2 grid, not 1-col stacked */
  .rs-stats-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Trust bar — 2×2 grid (4 badges) */
  .rs-trust-bar-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }

  .rs-trust-badge {
    border-right: 1px solid rgba(0,0,0,0.05) !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    padding: 10px 8px !important;
    font-size: 0.8rem !important;
    justify-content: center !important;
  }

  .rs-trust-badge:nth-child(2n) {
    border-right: none !important;
  }

  .rs-trust-badge:nth-last-child(-n+2) {
    border-bottom: none !important;
  }

  /* How it works — compact */
  .hiw-section,
  .how-it-works-section {
    padding: 2rem 1rem !important;
  }

  .hiw-step-grid,
  .hiw-steps {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* 390px (iPhone 15) specific refinements */
@media (max-width: 390px) {
  .sr-hero-value-prop,
  .rs-hero-headline,
  .hero-headline {
    font-size: clamp(1.55rem, 8vw, 2rem) !important;
  }

  .rs-btn-primary-dominant {
    min-height: 54px !important;
    font-size: 1rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. PRICING PAGE — Recommended plan distinction in mobile stack
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Pricing cards — stacked, full-width */
  .prc-grid {
    grid-template-columns: 1fr !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    padding: 0 1rem !important;
    gap: 14px !important;
  }

  /* All cards full-width */
  .prc-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.5rem 1.25rem !important;
  }

  /* PRO card — recommended → visually dominant, colored border */
  .prc-card--pro,
  .prc-card[data-plan="pro"] {
    border: 2px solid #2563EB !important;
    box-shadow: 0 4px 24px rgba(37,99,235,0.15) !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* "Most Popular" badge on Pro card */
  .prc-card--pro::before,
  .prc-card[data-plan="pro"]::before {
    content: 'Most Popular';
    position: absolute !important;
    top: -14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #2563EB !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 4px 16px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    z-index: 10 !important;
  }

  /* PRO CTA button — full-width, prominent */
  .prc-card--pro .prc-cta,
  .prc-card--pro .prc-card-cta,
  .prc-card[data-plan="pro"] .prc-cta {
    background: #2563EB !important;
    color: #ffffff !important;
    border: none !important;
    width: 100% !important;
    min-height: 52px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(37,99,235,0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* All other CTAs — full width, secondary style */
  .prc-cta,
  .prc-card-cta {
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
  }

  /* Feature list text — readable */
  .prc-feature-label,
  .prc-feature,
  .prc-features li {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  /* Billing toggle — large, easy to tap */
  .sp-billing-toggle,
  .billing-toggle-wrap,
  .prc-billing-toggle {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  .sp-billing-toggle-option {
    min-height: 44px !important;
    padding: 8px 20px !important;
    font-size: 15px !important;
  }

  /* Comparison table — horizontal scroll with sticky first column */
  .prc-comparison-table,
  .feature-comparison-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 8px !important;
  }

  .prc-comparison-table td:first-child,
  .prc-comparison-table th:first-child,
  .feature-comparison-table td:first-child,
  .feature-comparison-table th:first-child {
    position: sticky !important;
    left: 0 !important;
    background: #ffffff !important;
    z-index: 5 !important;
    min-width: 140px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. SETTLEMENTS DIRECTORY — Sticky search, proper layout
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Search bar — full-width, sticky on scroll */
  .dir-search-wrap,
  .settlements-search,
  .directory-search-bar,
  .settlements-search-bar {
    position: sticky !important;
    top: 48px !important; /* below mobile header */
    z-index: 100 !important;
    background: #ffffff !important;
    padding: 8px 1rem !important;
    border-bottom: 1px solid #f0f2f5 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }

  /* When announce bar present */
  html.has-announce-bar .dir-search-wrap,
  html.has-announce-bar .settlements-search {
    top: 80px !important;
  }

  .dir-search-input,
  .settlements-search input,
  .directory-search-input {
    width: 100% !important;
    font-size: 16px !important;
    min-height: 48px !important;
    border-radius: 10px !important;
    padding: 0 16px !important;
  }

  /* Filter pills row — horizontal scroll */
  .dir-cat-nav,
  .settlements-filter-row,
  .category-nav-pills {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
    padding: 8px 1rem !important;
    gap: 8px !important;
  }

  .dir-cat-nav::-webkit-scrollbar,
  .settlements-filter-row::-webkit-scrollbar {
    display: none !important;
  }

  /* Load more button — full width */
  .load-more-btn,
  .dir-load-more,
  .settlements-load-more {
    width: 100% !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin: 1rem 0 !important;
    border-radius: 10px !important;
  }

  /* Settlement cards — single column, proper spacing */
  .dir-grid,
  .settlements-grid,
  .sr-settlements-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 1rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. AUTH FORMS — Login, Signup, Contact
      Centered card, full-width with 16px side padding, labels above inputs,
      social buttons full-width stacked.
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Auth page wrapper */
  .aup-page,
  .auth-page-wrap,
  .login-page-wrap,
  .signup-page-wrap {
    padding: 1rem !important;
    min-height: calc(100vh - 48px) !important;
    align-items: flex-start !important;
  }

  /* Hide marketing side panel on mobile — full screen form */
  .aup-mkt,
  .aup-sp-panel,
  .auth-side-panel,
  .login-side-panel {
    display: none !important;
  }

  /* Auth form card */
  .aup-form-wrap,
  .auth-form-card,
  .login-card,
  .signup-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.5rem 1rem !important;
    margin: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important;
  }

  /* Form inputs — full width, 16px font (iOS no-zoom) */
  .aup-input,
  .auth-input,
  .login-input,
  .signup-input,
  input[type="email"],
  input[type="password"],
  input[type="text"] {
    width: 100% !important;
    font-size: 16px !important;
    min-height: 52px !important;
    border-radius: 10px !important;
    padding: 0 16px !important;
  }

  /* Labels — always above inputs */
  .aup-label,
  .auth-label,
  label[for] {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #374151 !important;
  }

  /* Submit button — full width, prominent */
  .aup-submit,
  .auth-submit,
  .login-submit,
  .signup-submit,
  button[type="submit"] {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0.5rem !important;
  }

  /* Social login buttons — full-width, stacked */
  .aup-social-btn,
  .auth-social-btn,
  .google-login-btn,
  .oauth-btn,
  [class*="social-login-btn"],
  [class*="oauth-btn"] {
    width: 100% !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
  }

  /* Divider between social + form */
  .aup-divider,
  .auth-divider,
  .or-divider {
    text-align: center !important;
    margin: 1rem 0 !important;
    font-size: 14px !important;
    color: #9ca3af !important;
  }

  /* Auth page headline */
  .aup-title,
  .auth-title,
  .login-title,
  .signup-title {
    font-size: clamp(1.4rem, 7vw, 1.8rem) !important;
    line-height: 1.2 !important;
    text-align: center !important;
    margin-bottom: 0.5rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. CONTENT & GUIDE PAGES — Full reading width
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Guide/blog reading container */
  .sg-content-wrap,
  .guide-wrap,
  .blog-post-wrap,
  .content-wrap,
  article.guide,
  article.blog-post {
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* Reading content — full screen minus 32px total */
  .sg-section-body,
  .guide-body,
  .blog-body,
  .content-body,
  .post-content {
    padding: 0 1rem !important;
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  /* Headings in guides */
  .sg-section-body h2,
  .guide-body h2,
  .content-body h2 {
    font-size: clamp(1.25rem, 5.5vw, 1.6rem) !important;
    line-height: 1.25 !important;
    margin-top: 1.5rem !important;
  }

  .sg-section-body h3,
  .guide-body h3,
  .content-body h3 {
    font-size: clamp(1.1rem, 4.5vw, 1.3rem) !important;
    line-height: 1.3 !important;
    margin-top: 1.25rem !important;
  }

  /* Table of contents — collapsible sticky */
  .guide-toc,
  .toc-wrap,
  .sg-toc {
    position: sticky !important;
    top: 48px !important;
    z-index: 50 !important;
    background: #f8f9fa !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 1rem !important;
    border-radius: 0 !important;
  }

  /* TOC toggle */
  .toc-toggle,
  .guide-toc-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 44px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    width: 100% !important;
    background: none !important;
    border: none !important;
    color: #374151 !important;
  }

  /* Code blocks — horizontal scroll */
  pre, code, .code-block {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 14px !important;
    max-width: 100% !important;
  }

  /* Tables in content — horizontal scroll */
  .sg-section-body table,
  .guide-body table,
  .content-body table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. SETTLEMENT DETAIL PAGE — Key info stack, timeline vertical
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Key info cards — stacked, not side-by-side */
  .sdr-key-info,
  .sd-key-facts,
  .settlement-key-info,
  .settlement-facts-grid {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 10px !important;
  }

  /* Timeline — vertical orientation */
  .timeline-horizontal,
  .settlement-timeline-h,
  .sd-timeline {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .timeline-horizontal .timeline-item,
  .sd-timeline .timeline-item {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* Hero stats — 2-column on 390px+ */
  .sdr-hero-stats,
  .settlement-hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .sdr-stat,
  .settlement-stat {
    text-align: center !important;
    padding: 10px !important;
    border-radius: 8px !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
  }

  /* Settlement description — comfortable reading */
  .settlement-body,
  .sd-content,
  .sdr-body {
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  /* Share buttons — compact */
  .share-buttons,
  .social-share {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Related settlements — single col */
  .related-grid,
  .sd-related-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. FORMS — Global form improvements on mobile
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* All inputs — full width, 16px font, 52px height */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  select,
  textarea {
    width: 100% !important;
    font-size: 16px !important; /* iOS zoom prevention */
    min-height: 52px !important;
    border-radius: 10px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* Textarea — taller */
  textarea {
    min-height: 100px !important;
    padding: 12px 16px !important;
    resize: vertical;
  }

  /* Form groups — stack label + input */
  .form-group,
  .input-group,
  .field-group {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Inline input+button forms — stack vertically */
  .inline-form,
  .email-row,
  .search-row,
  .input-btn-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Contact/inquiry forms */
  .contact-form,
  .inquiry-form {
    padding: 1.5rem 1rem !important;
    border-radius: 12px !important;
  }

  /* Form submit button */
  .contact-form button[type="submit"],
  .inquiry-form button[type="submit"] {
    width: 100% !important;
    min-height: 52px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   13. SPACING — Section padding reduced ~40% on mobile, not cramped
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Desktop sections typically 80-100px → 48-56px on mobile */
  section[class*="-section"],
  div[class*="-section"] {
    padding-top: clamp(2rem, 6vw, 3rem) !important;
    padding-bottom: clamp(2rem, 6vw, 3rem) !important;
  }

  /* Page headers */
  [class*="-hero"]:not(img):not(video):not(svg) {
    padding-top: clamp(2rem, 7vw, 3rem) !important;
    padding-bottom: clamp(1.5rem, 5vw, 2.5rem) !important;
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }

  /* Cards — comfortable padding */
  .card,
  [class*="-card"]:not(img):not(video) {
    padding: 1.25rem 1rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   14. 390px (iPhone 15) SPECIFIC
      Between 375px SE and 414px Pro Max — 390px is the most common 2024 viewport.
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 393px) and (min-width: 376px) {
  /* Hero text — slightly larger than SE */
  .sr-hero-value-prop,
  .rs-hero-headline,
  .hero-headline {
    font-size: clamp(1.7rem, 8.5vw, 2.1rem) !important;
  }

  /* Stats — 2-column */
  .rs-stats-bar {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Settlement cards — comfortable at 390px */
  .settlement-card,
  .sr-settlement-card {
    padding: 1rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   15. FIXED ELEMENT SAFE AREAS
      iPhone 15 notch + Dynamic Island + home indicator.
   ────────────────────────────────────────────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #mobileStickyFileCta,
  .mobile-sticky-cta,
  #sr-mobile-cta-bar,
  .sticky-filing-bar,
  .sticky-bottom-cta {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
  }

  /* Nav header — top safe area (Dynamic Island) */
  nav#mainNav,
  header[role="banner"] {
    padding-top: env(safe-area-inset-top, 0) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   16. PREVENT HORIZONTAL SCROLL — Final safety net
      Applied after all other rules to catch any missed overflow.
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Common overflow culprits */
  .payout-ticker-track,
  .activity-feed-track,
  .marquee-track,
  [class*="ticker"],
  [class*="marquee"] {
    overflow: hidden !important;
    max-width: 100vw !important;
  }

  /* Tables without explicit wrapper */
  table:not([class*="scroll"]):not([class*="overflow"]) {
    max-width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
  }

  /* Wide images */
  img[width], img[style*="width"] {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
  }

  /* Embedded iframes */
  iframe {
    max-width: 100% !important;
  }

  /* Min-width on flex items that can cause overflow */
  .flex-nowrap > *,
  [class*="flex-row"] > * {
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   17. BACK TO TOP BUTTON — Stays above sticky bottom bars
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sr-back-to-top-v2,
  #sr-back-to-top,
  .back-to-top {
    bottom: 80px !important; /* Above sticky bar */
    right: 1rem !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* When settlement detail sticky CTA is visible */
  body:has(#mobileStickyFileCta) .sr-back-to-top-v2,
  body:has(#mobileStickyFileCta) #sr-back-to-top {
    bottom: 80px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   18. CHAT WIDGET / FLOATING ELEMENTS — Don't overlap sticky CTAs
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Chat widgets (Tidio, Intercom, Crisp, etc.) */
  #tidio-chat,
  .tidio-1,
  iframe[name="tidio_chat_widget"],
  #intercom-container,
  .intercom-lightweight-app,
  #crisp-chatbox,
  [class*="chat-widget"],
  [id*="chat-widget"] {
    bottom: 80px !important; /* above sticky bar */
    transform: translateY(0) !important;
  }
}