/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE MASTER QA — Task #1142737
   Full mobile visual pass at 375px (iPhone SE) and 414px (iPhone 14) viewports.
   Loaded LAST via async to override all earlier styles.
   Covers: horizontal overflow, text size, touch targets, images, cards, forms,
   navigation, footer, modals, tables, spacing, z-index, CLS.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   1. GLOBAL OVERFLOW PREVENTION — CRITICAL BASELINE
   ────────────────────────────────────────────────────────────────────────────── */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}

*, *::before, *::after {
  box-sizing: border-box;
}

img, video, iframe, embed, object, svg, canvas {
  max-width: 100%;
  height: auto;
}

table {
  max-width: 100%;
}

pre, code {
  max-width: 100%;
  overflow-x: auto;
  word-break: break-all;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. MOBILE FONT SIZE MINIMUMS — No text smaller than 14px on mobile
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Ensure minimum 14px for body text */
  body {
    font-size: 15px;
    line-height: 1.6;
  }

  /* Small text elements that commonly fall below 14px */
  .announce-bar-msg,
  .announce-bar-inner,
  .nav-cta-check-elig,
  .nav-cta-go-pro,
  .nav-signin-link,
  .mega-price,
  .trust-proof-pill,
  .sr-ft-brand-tagline,
  .sr-ft-col-header,
  .nav-mobile-sublabel,
  .rs-trust-badge,
  .urgency-strip-item,
  .hiw-step-number,
  .footer-disclaimer,
  .sr-ft-copy,
  .sr-ft-disclaimer-text,
  .sr-ft-address,
  .sr-ft-terms-links a,
  .sr-ft-seo-links a,
  .prc-feature-label {
    font-size: max(0.75rem, 12px) !important;
  }

  /* Paragraphs, list items, form labels should be at least 14px */
  p, li, label, .card-text, .card-desc, .guide-excerpt,
  .settlement-desc, .sg-section-body, .blog-body {
    font-size: max(1em, 14px);
    line-height: 1.6;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. TOUCH TARGETS — All interactive elements >= 44x44px on mobile
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Primary CTAs and buttons */
  a.btn, a.cta, button,
  .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,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Links in navigation and footer */
  .sr-ft-col-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* FAQ toggles */
  .faq-q, .ca-faq-question, .emp-faq-q, .seo-faq-q,
  details > summary {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Filter and tab buttons */
  .filter-btn, .tab-btn, .sort-btn, .category-pill {
    min-height: 44px;
    padding: 8px 16px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. HOMEPAGE — Hero, stats, trust bar, CTAs
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Hero headline — constrain for small screens */
  .sr-hero-value-prop,
  .rs-hero-headline,
  .hero-headline {
    font-size: clamp(1.6rem, 8vw, 2.5rem) !important;
    line-height: 1.15 !important;
    padding: 0 0.5rem;
  }

  /* Hero sub-headline */
  .sr-hero-sub,
  .rs-hero-sub {
    font-size: clamp(0.9rem, 4vw, 1.1rem) !important;
    padding: 0 0.5rem;
  }

  /* Hero CTAs — stack vertically */
  .rs-hero-ctas-redesigned,
  .sr-hero-ctas,
  .hero-cta-group {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 0 0.75rem;
  }

  .rs-btn-primary-dominant,
  .rs-btn-ghost-redesigned,
  .sr-hero-cta,
  .hero-cta-primary,
  .hero-cta-secondary {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 12px 20px !important;
    white-space: normal !important;
  }

  /* Stats bar — 2-column grid */
  .rs-stats-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 12px 8px !important;
    margin: 0 0.75rem !important;
    max-width: calc(100% - 1.5rem) !important;
  }

  .rs-stat {
    min-width: 0 !important;
    text-align: center !important;
  }

  .rs-stat-divider {
    display: none !important;
  }

  .rs-stat-number,
  .rs-stat-num {
    font-size: 1.15rem !important;
  }

  /* Trust bar badges — stack vertically */
  .rs-trust-bar-inner {
    flex-direction: column !important;
    gap: 0 !important;
  }

  .rs-trust-badge {
    border-right: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    width: 100% !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    font-size: 0.82rem !important;
  }

  .rs-trust-badge:last-child {
    border-bottom: none !important;
  }

  /* Featured section */
  .rs-featured-grid,
  .featured-settlements-grid {
    grid-template-columns: 1fr !important;
  }

  /* Payout ticker section — prevent overflow */
  .payout-ticker-section,
  .activity-feed-section,
  .crh-ticker {
    overflow: hidden !important;
  }

  /* Pro upsell section — stack text + CTAs vertically */
  .hp-pro-upsell-inner {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: stretch !important;
  }

  .hp-pro-upsell-text {
    width: 100% !important;
    text-align: center !important;
  }

  .hp-pro-upsell-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .hp-pro-upsell-btn {
    width: 100% !important;
    text-align: center !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hp-pricing-clarification {
    width: 100% !important;
    text-align: center !important;
  }
}

@media (max-width: 375px) {
  .sr-hero-value-prop,
  .rs-hero-headline {
    font-size: 1.5rem !important;
  }

  .rs-stat-number,
  .rs-stat-num {
    font-size: 1rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. SETTLEMENTS LISTING PAGE — Card grid, filters, pagination
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Settlement cards — single column */
  .settlement-grid,
  .settlements-grid,
  .sr-settlements-grid,
  [class*="settlement-grid"],
  .settlement-cards {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 0.75rem !important;
  }

  /* Settlement card — full width */
  .settlement-card,
  .sr-settlement-card,
  [class*="settlement-card"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Filters row — horizontal scroll */
  .settlement-filters,
  .filter-row,
  .filter-pills {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 8px 0.75rem !important;
  }

  .settlement-filters::-webkit-scrollbar,
  .filter-row::-webkit-scrollbar,
  .filter-pills::-webkit-scrollbar {
    display: none;
  }

  /* Sorting/pagination */
  .pagination {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  .pagination a, .pagination span {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. SETTLEMENTS CATEGORIES PAGE
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .scp-hero {
    padding: 1.25rem 0.75rem !important;
  }

  .scp-h1 {
    font-size: 1.45rem !important;
  }

  .scp-stats {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .scp-stat {
    text-align: center !important;
  }

  /* Category cards grid */
  .category-grid,
  .categories-grid,
  [class*="category-grid"],
  .scp-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 0.75rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. PRICING PAGE — Card grid, feature comparison
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .prc-grid {
    grid-template-columns: 1fr !important;
    max-width: 440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 16px !important;
  }

  .prc-card {
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .prc-grid {
    padding: 0 0.75rem !important;
    max-width: 100% !important;
  }

  .prc-card {
    padding: 1.25rem 1rem !important;
  }

  .prc-cta,
  .prc-card-cta {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    min-height: 48px !important;
  }

  /* Comparison table */
  .prc-comparison-table-wrap,
  .feature-comparison-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -0.75rem;
    padding: 0 0.75rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. FILE MY CLAIM PAGE — Form flow
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Form inputs — full width */
  .filing-form input[type="text"],
  .filing-form input[type="email"],
  .filing-form input[type="tel"],
  .filing-form select,
  .filing-form textarea,
  .fc-input, .fc-email-input,
  .ff-input, .ff-select {
    width: 100% !important;
    font-size: 16px !important; /* Prevent iOS zoom */
    min-height: 48px;
  }

  /* Form rows — stack */
  .filing-form-row,
  .ff-row,
  .form-row {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Filing flow steps */
  .ff-step,
  .filing-step {
    padding: 1.25rem 1rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. FOR LAW FIRMS PAGE
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lf-stats-row,
  [class*="lf-stats"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1rem !important;
  }

  .lf-features-grid,
  [class*="lf-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  .lf-pricing-grid,
  [class*="lf-pricing"] {
    grid-template-columns: 1fr !important;
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .lf-section,
  [class*="lf-section"] {
    padding: 3rem 1.25rem !important;
  }

  /* Intro bar badges wrap */
  .lf-intro-bar-inner {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem !important;
  }
}

@media (max-width: 480px) {
  .lf-hero {
    padding: 3.5rem 1rem 2.5rem !important;
  }

  .lf-hero h1 {
    font-size: clamp(1.5rem, 7vw, 2.2rem) !important;
  }

  .lf-hero-ctas,
  .lf-hero-btns {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .lf-hero-ctas a,
  .lf-hero-ctas button,
  .lf-hero-btns a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }

  .lf-features-grid,
  [class*="lf-grid"] {
    grid-template-columns: 1fr !important;
  }

  .lf-stats-row {
    flex-direction: column !important;
    align-items: center !important;
  }
}

@media (max-width: 375px) {
  .lf-hero h1 {
    font-size: 1.4rem !important;
  }

  .lf-section,
  [class*="lf-section"] {
    padding: 2rem 1rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. FOR EMPLOYERS PAGE
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .emp-pricing-grid {
    grid-template-columns: 1fr !important;
  }

  .emp-usecases-grid {
    grid-template-columns: 1fr !important;
  }

  .emp-roi-grid {
    grid-template-columns: 1fr !important;
  }

  .emp-form-grid {
    grid-template-columns: 1fr !important;
  }

  .emp-testimonials-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .emp-hero {
    padding: 3rem 1rem 2rem !important;
  }

  .emp-hero h1 {
    font-size: clamp(1.5rem, 7vw, 2.2rem) !important;
  }

  .emp-hero-btns {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .emp-hero-btns a,
  .emp-hero-btns button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }

  .emp-section {
    padding: 2.5rem 1rem !important;
  }

  .emp-values-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }
}

@media (max-width: 375px) {
  .emp-values-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. API DOCS PAGE
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .api-hero,
  .api-section {
    padding: 2rem 1rem !important;
  }

  .api-hero h1 {
    font-size: clamp(1.4rem, 6vw, 2rem) !important;
  }

  .api-pricing-grid,
  .api-endpoints-grid {
    grid-template-columns: 1fr !important;
  }

  .api-code-block,
  .api-example pre {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    font-size: 0.8rem !important;
    padding: 1rem !important;
    max-width: 100% !important;
  }

  .api-form input,
  .api-form select {
    width: 100% !important;
    font-size: 16px !important;
    min-height: 48px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. ADVERTISE PAGE
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .adv-hero {
    padding: 3rem 1rem !important;
  }

  .adv-hero h1 {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }

  .adv-section {
    padding: 2rem 1rem !important;
  }

  .adv-audience-split,
  .adv-contact-wrap,
  .adv-form-row {
    grid-template-columns: 1fr !important;
  }

  .adv-cta-btn {
    width: 100% !important;
    text-align: center !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   13. GUIDES HUB & INDIVIDUAL GUIDE PAGES
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Guides hub grid */
  .guides-grid,
  .guide-cards,
  .sg-guides-grid,
  [class*="guides-grid"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Guide content — ensure readability */
  .sg-section-body,
  .guide-content,
  .guide-body {
    padding: 0 0.75rem !important;
    overflow-x: auto;
  }

  .sg-section-body img,
  .guide-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
  }

  /* Tables in guides — scrollable */
  .sg-section-body table,
  .guide-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Guide hero */
  .sg-hero,
  .guide-hero {
    padding: 2rem 1rem !important;
  }

  .sg-hero h1,
  .guide-hero h1 {
    font-size: clamp(1.4rem, 6vw, 2rem) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   14. TOOLS PAGE
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .tools-grid,
  .tool-cards,
  [class*="tools-grid"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .tool-card {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   15. HOW-TO-FILE PAGES
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .htf-hero,
  .how-to-file-hero {
    padding: 2rem 1rem !important;
  }

  .htf-hero h1,
  .how-to-file-hero h1 {
    font-size: clamp(1.4rem, 6vw, 2rem) !important;
  }

  .htf-steps,
  .htf-content {
    padding: 0 0.75rem !important;
  }

  .htf-step-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   16. SETTLEMENT DETAIL PAGE
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Detail stats — stack */
  .detail-stats,
  .detail-stats-row,
  .sdr-hero-stats,
  .settlement-hero-stats {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .detail-stat,
  .sdr-stat {
    width: 100% !important;
    text-align: center !important;
  }

  /* Above-fold CTA strip */
  .above-fold-cta-strip {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .above-fold-cta-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    min-height: 48px !important;
    align-items: center !important;
  }

  /* Urgency banner — prevent overflow */
  #urgentDeadlineBanner .udb-msg {
    min-width: 0 !important;
  }

  .sp-cta-urgency-strip {
    flex-wrap: wrap !important;
    padding: 0.5rem 0.75rem !important;
  }

  .sp-cta-item {
    font-size: 0.77rem !important;
  }

  /* Settlement detail content */
  .settlement-body,
  .sd-content {
    padding: 0 0.75rem !important;
  }

  /* Related settlements */
  .related-grid,
  .sd-related-grid {
    grid-template-columns: 1fr !important;
  }

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

  .share-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   17. VETERANS PAGE
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .vet-hero {
    padding: 2.5rem 1rem !important;
  }

  .vet-hero h1 {
    font-size: clamp(1.4rem, 6vw, 2rem) !important;
  }

  .vet-grid,
  .vet-cards {
    grid-template-columns: 1fr !important;
  }

  .vet-cta-btn {
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   18. FOOTER — Ensure proper mobile stacking
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sr-ft-columns {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .sr-ft-email-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  .sr-ft-email-form {
    width: 100% !important;
  }

  .sr-ft-email-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .sr-ft-email-input {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important; /* Prevent iOS zoom */
  }

  .sr-ft-email-btn {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
  }

  .sr-sitewide-share-inner {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .sr-sitewide-share-text {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .sr-ft-columns {
    grid-template-columns: 1fr !important;
  }

  footer.sr-ramsey-footer .sr-ft-bottom-bar {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.2rem !important;
    text-align: center;
  }

  footer.sr-ramsey-footer .sr-ft-copy,
  footer.sr-ramsey-footer .sr-ft-disclaimer-text,
  footer.sr-ramsey-footer .sr-ft-address,
  footer.sr-ramsey-footer .sr-ft-terms-links {
    display: block !important;
    text-align: center !important;
    white-space: normal !important;
    width: 100% !important;
  }

  /* Ensure footer terms links wrap properly */
  .sr-ft-terms-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px 12px !important;
  }

  .sr-ft-terms-links a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Social links */
  .sr-ft-social-links {
    justify-content: center !important;
  }

  .sr-ft-social-links a {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   19. NAVIGATION — Mobile hamburger menu refinements
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Ensure mega panels don't overflow */
  .mega-panel,
  .nav-mobile-menu {
    max-height: calc(100vh - 56px);
    max-height: calc(100dvh - 56px);
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Mobile menu links — adequate tap targets */
  .nav-mobile-link,
  .mobile-nav-link {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
  }

  /* Accordion buttons in mobile menu */
  .nav-mobile-accordion-btn {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}

@media (max-width: 600px) {
  .mega-panel,
  .nav-mobile-menu {
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   20. MODALS & POPUPS — Properly sized for mobile
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Generic modal sizing */
  .modal-content,
  .popup-content,
  .dialog-content,
  [class*="modal"] > div:first-child {
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    margin: 0.5rem;
    border-radius: 12px;
    width: calc(100% - 1rem) !important;
    max-width: none !important;
  }

  /* Pro upgrade modal */
  #proUpgradeModal {
    padding: 0.5rem !important;
  }

  #proUpgradeModal > div {
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto !important;
    border-radius: 14px !important;
  }

  /* Share modal */
  .share-win-modal {
    width: calc(100% - 1rem) !important;
    max-width: none !important;
    margin: 0.5rem !important;
  }

  /* Exit intent popup */
  .exit-intent-overlay .exit-intent-content {
    width: calc(100% - 2rem) !important;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
  }

  /* Onboarding wizard */
  .srwiz-panel {
    width: calc(100% - 1rem) !important;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
  }

  /* Toast notifications */
  #saveSignInPrompt,
  #subscribeConfirmedToast,
  .sr-toast {
    right: 0.75rem !important;
    left: 0.75rem !important;
    max-width: none !important;
    width: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   21. TABLES — Responsive handling
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* All tables scroll horizontally if needed */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Table cells — min-width to prevent crushing */
  td, th {
    min-width: 80px;
    padding: 8px 10px;
    font-size: 0.85rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   22. SPACING — Adequate padding on left/right edges
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Sections — prevent text flush against edges */
  section,
  .container,
  main > div,
  article {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }

  /* Override double-padding for nested containers */
  section .container,
  .container .container,
  section section {
    padding-left: 0;
    padding-right: 0;
  }

  /* Ensure hero sections have breathing room */
  [class*="-hero"],
  [class*="hero-"] {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   23. FIXED ELEMENTS — Prevent stacking/overlap issues
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Announce bar — compact on mobile */
  .announce-bar {
    font-size: 0.78rem !important;
    padding: 6px 12px !important;
  }

  /* When both sticky bars and bottom CTA are visible */
  .sticky-filing-bar ~ #sr-mobile-cta-bar,
  body:has(.sticky-filing-bar[style*="display: flex"]) #sr-mobile-cta-bar {
    display: none !important;
  }

  /* Back to top button — clear bottom bars */
  .sr-back-to-top-v2,
  #sr-back-to-top {
    bottom: 5rem !important;
  }

  /* Sticky filing bar */
  .sticky-filing-bar {
    flex-wrap: wrap !important;
    text-align: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
  }

  .sticky-filing-bar .bar-text {
    font-size: 0.8rem !important;
    flex: 1 1 100% !important;
  }

  .sticky-filing-bar .bar-cta {
    padding: 10px 20px !important;
    font-size: 14px !important;
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   24. FORMS — All form elements full width on mobile
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* All form inputs — full width, proper size */
  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;
    min-height: 48px;
    font-size: 16px !important; /* Prevent iOS auto-zoom */
    border-radius: 8px;
  }

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

  /* Email capture forms — stack input/button */
  .inline-cta-form,
  .email-capture-form,
  .newsletter-form {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   25. SECTION OVERFLOW CONTAINMENT — Animated sections
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 430px) {
  .rs-hero-redesigned,
  .rs-features-section,
  .hiw-section,
  .trust-proof-section,
  .community-wins-section,
  .rs-featured-section,
  .hm-banner-section,
  .bbc-section,
  .fms-widget-section,
  .sotd-section,
  .sotw-section,
  .recently-closed-section,
  .cas-explainer,
  .payout-ticker-section,
  .activity-feed-section,
  .sr-why-trust-section {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* Prevent min-width from causing flex overflow */
  .fs-hero-left,
  .sotw-card-left,
  .hm-banner-text,
  .fms-widget-text,
  .lf-hero-text,
  .emp-hero-content,
  .sr-sitewide-share-text {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   26. SEO BRAND LANDING PAGES (class action pages)
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ca-countdown-wrap {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }

  .ca-hero {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .ca-hero h1 {
    font-size: clamp(1.5rem, 6vw, 2.2rem) !important;
  }
}

@media (max-width: 480px) {
  .ca-payout-grid,
  .ca-related-grid {
    grid-template-columns: 1fr !important;
  }

  .ca-section {
    padding: 1.5rem 1rem !important;
  }

  .ca-faq-question {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
    min-height: 44px;
  }
}

@media (max-width: 375px) {
  .ca-hero h1 {
    font-size: 1.3rem !important;
  }

  .ca-countdown-num {
    font-size: 1.5rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   27. IMAGES — Responsive, not overflowing, not stretched
   ────────────────────────────────────────────────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
}

/* Settlement hero images */
.settlement-hero-img,
.sd-hero-img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Card images */
.settlement-card img,
.guide-card img,
.tool-card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   28. KEYBOARD/INPUT — Prevent layout shifts when keyboard opens
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  input:focus,
  select:focus,
  textarea:focus {
    scroll-margin-bottom: 120px;
  }

  /* Prevent viewport resize when iOS keyboard opens */
  html {
    height: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   29. 414px SPECIFIC — iPhone 14/XR/11
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 414px) {
  /* Slightly tighter hero for 414px */
  .sr-hero-value-prop,
  .rs-hero-headline {
    font-size: clamp(1.6rem, 7.5vw, 2.4rem) !important;
  }

  /* Stats bar adjust for 414px */
  .rs-stats-bar {
    margin: 0 0.5rem !important;
    max-width: calc(100% - 1rem) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   30. 375px SPECIFIC — iPhone SE / smallest common viewport
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 375px) {
  /* Tighter padding across the board */
  section, .container, article {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }

  /* Reduce gap in grids */
  .settlement-grid,
  .guides-grid,
  .tools-grid,
  .prc-grid,
  .category-grid {
    gap: 10px !important;
  }

  /* Ensure leaderboard ranks don't push content */
  .sr-lb-rank {
    width: 28px !important;
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
  }

  /* Trust pills — wrap properly */
  .trust-proof-pill {
    white-space: normal !important;
    text-align: center !important;
    font-size: 0.72rem !important;
    padding: 4px 8px !important;
  }

  /* Email form row */
  .sr-ft-email-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   31. SAFE AREA INSETS — iPhone notch + home indicator
   ────────────────────────────────────────────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .sticky-filing-bar,
  #sr-mobile-cta-bar,
  .sr-ft-bottom-bar {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   32. FOR LAW FIRMS PAGE — Critical mobile overflow fixes
   Inline styles use min-width/fixed widths that break at 375px.
   Must use !important to override inline style specificity.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Comparison table — has inline min-width:640px, wrapper has overflow-x:auto */
@media (max-width: 768px) {
  .lf-section table {
    min-width: 0 !important;
    font-size: 0.75rem !important;
  }
  .lf-section table th,
  .lf-section table td {
    padding: 0.6rem 0.5rem !important;
    font-size: 0.72rem !important;
    min-width: 0 !important;
  }
}
@media (max-width: 480px) {
  /* Force comparison table to scroll horizontally within its wrapper */
  .lf-section table {
    min-width: 580px !important;
  }
  .lf-section > div[style*="overflow-x"] {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    padding: 0 0.75rem;
  }
}

/* Case study stats bar — 4 items with inline min-width:100px + flex:1 */
@media (max-width: 480px) {
  .lf-section div[style*="min-width:100px"],
  .lf-section div[style*="min-width: 100px"] {
    min-width: 0 !important;
    flex: 1 1 calc(50% - 1rem) !important;
  }
  /* Stack stats bar into 2x2 grid */
  div[style*="display:flex"][style*="min-width:100px"],
  div[style*="display: flex"][style*="min-width:100px"] {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }
}

/* Lead magnet section — flex child with inline min-width:260px */
@media (max-width: 480px) {
  .lf-lead-magnet div[style*="min-width:260px"],
  .lf-lead-magnet div[style*="min-width: 260px"],
  div[style*="flex:1;min-width:260px"],
  div[style*="flex:1; min-width:260px"] {
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  .lf-lead-magnet div[style*="display:flex"][style*="flex-wrap:wrap"],
  .lf-lead-magnet div[style*="display: flex"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
  }
}

/* GADS widget — slider input with inline min-width:200px, number with min-width:90px */
@media (max-width: 480px) {
  #gadsWidget {
    padding: 1.5rem 1rem !important;
  }
  #gadsWidget input[type="range"] {
    min-width: 0 !important;
    width: 100% !important;
  }
  #gadsWidget div[style*="min-width:90px"],
  #gadsWidget div[style*="min-width: 90px"] {
    min-width: 0 !important;
  }
  /* ROI calculator input with inline width:120px */
  .lf-calc-input {
    width: 100% !important;
    max-width: 100% !important;
  }
  input[style*="width:120px"] {
    width: 100% !important;
  }
}

/* Logos row — animated ticker, already has overflow:hidden on parent */
@media (max-width: 480px) {
  .lf-logos {
    overflow: hidden !important;
  }
  .lf-logos-row {
    max-width: none !important;
  }
}

/* Trust comparison grid / results grid */
@media (max-width: 480px) {
  .lf-trust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  div[style*="max-width:860px"][style*="display:flex"] {
    flex-direction: column !important;
  }
  div[style*="max-width:600px"][style*="display:flex"] {
    flex-direction: column !important;
  }
}
@media (max-width: 375px) {
  .lf-trust-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Inline email form */
@media (max-width: 480px) {
  form[style*="display:flex"][style*="flex-wrap:wrap"][style*="max-width:440px"],
  #lawFirmsInlineCaptureForm {
    flex-direction: column !important;
    max-width: 100% !important;
  }
  #lawFirmsInlineCaptureForm input {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* CTA buttons inline — force full width */
@media (max-width: 480px) {
  .lf-section div[style*="display:flex"][style*="justify-content:center"] button,
  .lf-section div[style*="display:flex"][style*="justify-content:center"] a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    min-height: 48px !important;
    align-items: center !important;
  }
  .lf-section div[style*="display:flex"][style*="justify-content:center"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* Sticky bottom CTA bar on law firms page */
@media (max-width: 480px) {
  .lf-cta-bar div[style*="max-width:1100px"] {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.75rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   33. FOR EMPLOYERS PAGE — Mobile overflow fixes
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Trust items with inline min-width:180px + flex:1 causing overflow */
@media (max-width: 480px) {
  .emp-trust-item {
    min-width: 0 !important;
    flex: 1 1 calc(50% - 1rem) !important;
    border-right: none !important;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    padding: 0.75rem 1rem !important;
  }
  .emp-trust-inner {
    flex-wrap: wrap !important;
    gap: 0 !important;
  }
  .emp-trust-item:last-child {
    border-bottom: none !important;
  }
  .emp-trust-num {
    font-size: 1.3rem !important;
  }
}
@media (max-width: 375px) {
  .emp-trust-item {
    flex: 1 1 100% !important;
  }
}

/* Values grid — force 1-col on smallest screens */
@media (max-width: 480px) {
  .emp-values-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }
}

/* ROI grid sections */
@media (max-width: 480px) {
  .emp-roi-grid,
  .emp-usecases-grid,
  .emp-testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* Form elements */
@media (max-width: 480px) {
  .emp-form-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  .emp-form-grid input,
  .emp-form-grid select,
  .emp-form-grid textarea {
    width: 100% !important;
    font-size: 16px !important;
    min-height: 48px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   34. ADVERTISE PAGE — Mobile fixes
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Stats bar items with inline min-width:160px */
@media (max-width: 480px) {
  .adv-stat {
    min-width: 0 !important;
    flex: 1 1 calc(50% - 0.5px) !important;
    border-right: none !important;
    border-bottom: 1px solid #e5e7eb;
    padding: 1rem 0.75rem !important;
  }
  .adv-stats {
    flex-wrap: wrap !important;
  }
  .adv-stat:last-child {
    border-bottom: none !important;
  }
  .adv-stat-num {
    font-size: 1.5rem !important;
  }
}
@media (max-width: 375px) {
  .adv-stat {
    flex: 1 1 100% !important;
  }
}

/* Hero section */
@media (max-width: 480px) {
  .adv-hero {
    padding: 5rem 1rem 2.5rem !important;
  }
  .adv-hero h1 {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }
  .adv-hero-btns {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .adv-hero-btns a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    min-height: 48px !important;
    align-items: center !important;
  }
}

/* Audience split grid */
@media (max-width: 480px) {
  .adv-audience-split {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .adv-audience-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }
}
@media (max-width: 375px) {
  .adv-audience-stats {
    grid-template-columns: 1fr !important;
  }
}

/* Pricing tiers grid */
@media (max-width: 480px) {
  .adv-pricing-tiers {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  .adv-pricing-teaser {
    padding: 2rem 1.25rem !important;
    border-radius: 12px !important;
  }
}

/* Contact form */
@media (max-width: 480px) {
  .adv-contact-wrap,
  .adv-form-row {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  .adv-form-row input,
  .adv-form-row select,
  .adv-form-row textarea,
  .adv-contact-wrap input,
  .adv-contact-wrap select,
  .adv-contact-wrap textarea {
    width: 100% !important;
    font-size: 16px !important;
    min-height: 48px;
  }
}

/* Section padding */
@media (max-width: 480px) {
  .adv-section {
    padding: 2.5rem 1rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   35. API DOCS PAGE — Code block overflow & mobile layout
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* Code blocks — ensure proper horizontal scroll */
  pre.code-block,
  .embed-code-block,
  .key-code {
    max-width: calc(100vw - 2rem) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    font-size: 0.75rem !important;
    padding: 1rem !important;
    word-break: break-all;
  }

  /* Docs grid — force single column */
  .docs-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Hero section */
  .apidocs-hero {
    padding: 5rem 1rem 2.5rem !important;
  }
  .apidocs-hero h1 {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }

  /* Hero stats */
  .hero-stats {
    flex-direction: column !important;
    gap: 0.5rem !important;
    text-align: center !important;
  }

  /* Hero CTAs */
  .hero-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hero-cta-row a,
  .hero-cta-row button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    min-height: 48px !important;
    align-items: center !important;
  }

  /* Section padding */
  .section {
    padding: 2.5rem 1rem !important;
  }

  /* Pricing grid */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Use cases grid */
  .use-cases-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }

  /* Signup card */
  .signup-card {
    padding: 1.5rem 1rem !important;
  }
  .signup-section {
    padding: 2rem 0.75rem !important;
  }

  /* Config row */
  .config-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .config-select {
    width: 100% !important;
  }

  /* Embed section */
  .embed-section {
    padding: 2rem 1rem !important;
  }
  .embed-preview {
    padding: 1rem !important;
  }
}

@media (max-width: 375px) {
  .use-cases-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   36. SETTLEMENTS LISTING — Filter bar, ticker, button refinements
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* Filter bar — add scroll indicator fade */
  .settlement-filters,
  .filter-row,
  .filter-pills,
  .dir-filter-bar {
    position: relative;
  }
  .settlement-filters::after,
  .filter-row::after,
  .filter-pills::after,
  .dir-filter-bar::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, white);
    pointer-events: none;
    z-index: 1;
  }

  /* Filter buttons — adequate size */
  .sr-filter-btn,
  .filter-btn,
  .tab-btn,
  .sort-btn {
    min-height: 44px !important;
    padding: 8px 14px !important;
    font-size: 0.82rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Live ticker — prevent text overlap */
  .live-ticker-item,
  .crh-ticker-item {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100vw - 2rem) !important;
  }

  /* Settlement card consistent padding */
  .settlement-card,
  .sr-settlement-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 12px !important;
  }

  /* Results count / sort row */
  .dir-results-meta,
  .settlement-results-header {
    flex-direction: column !important;
    gap: 0.5rem !important;
    align-items: flex-start !important;
    padding: 0.75rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   37. GUIDES & TOOLS — Padding consistency, card fixes
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* Guides hub */
  .sg-guides-grid,
  .guides-grid,
  .guide-cards {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Guide cards — consistent spacing */
  .guide-card,
  .sg-guide-card {
    margin: 0 !important;
    width: 100% !important;
  }

  /* Individual guide content */
  .sg-section-body,
  .guide-content {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }
  .sg-section-body h2,
  .guide-content h2 {
    font-size: 1.35rem !important;
  }
  .sg-section-body h3,
  .guide-content h3 {
    font-size: 1.15rem !important;
  }

  /* Tool cards — consistent touch targets */
  .tool-card a,
  .tool-card button {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   38. SETTLEMENT DETAIL — Mobile refinements
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* Urgency bar text */
  .udb-msg {
    font-size: 0.82rem !important;
    padding: 0.5rem 0.75rem !important;
  }
  .udb-msg span {
    min-width: 0 !important;
  }

  /* Settlement detail hero */
  .sd-hero,
  .settlement-detail-hero,
  .sdr-hero {
    padding: 1.5rem 0.75rem !important;
  }

  /* Sidebar — stack below main content */
  .sd-sidebar,
  .settlement-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 1.5rem !important;
  }

  /* Main content + sidebar layout */
  .sd-layout,
  .settlement-layout {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .sd-main,
  .settlement-main {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Eligibility checklist */
  .sd-eligibility-item,
  .eligibility-item {
    padding: 0.75rem !important;
    font-size: 0.9rem !important;
  }

  /* Payout estimates */
  .sd-payout-range,
  .payout-range {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   39. HOW-TO-FILE PAGES — Mobile refinements
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .htf-step-grid,
  .how-to-file-steps {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .htf-step,
  .how-to-file-step {
    padding: 1.25rem 1rem !important;
  }

  .htf-step-number {
    font-size: 1.25rem !important;
    width: 36px !important;
    height: 36px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   40. POPUP / OVERLAY STACKING — Prevent multiple overlays from blocking content
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* When exit intent popup is visible, hide other overlays */
  .exit-intent-overlay ~ .sr-toast,
  .exit-intent-overlay ~ #saveSignInPrompt,
  .exit-intent-overlay ~ .fomo-notification {
    display: none !important;
  }

  /* When pro upgrade modal is visible, hide other overlays */
  #proUpgradeModal[style*="display: flex"] ~ .sr-toast,
  #proUpgradeModal[style*="display: flex"] ~ .fomo-notification,
  #proUpgradeModal:not([style*="display: none"]) ~ .sr-toast {
    display: none !important;
  }

  /* FOMO notifications — smaller and non-blocking on mobile */
  .fomo-notification,
  .social-proof-notification,
  [class*="fomo-"] {
    max-width: calc(100vw - 2rem) !important;
    left: 1rem !important;
    right: 1rem !important;
    bottom: 4.5rem !important;
    font-size: 0.82rem !important;
  }

  /* PWA install banner — compact on mobile */
  .pwa-install-banner,
  .sr-install-banner {
    padding: 0.75rem 1rem !important;
    font-size: 0.85rem !important;
  }
  .pwa-install-banner .sr-install-dismiss,
  .sr-install-banner button {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   41. CATEGORIES PAGE — Consistent mobile layout
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .scp-grid,
  .category-grid,
  .categories-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    padding: 0 0.75rem !important;
  }

  .scp-card,
  .category-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  .scp-hero {
    padding: 1.25rem 0.75rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   42. GLOBAL INLINE-STYLE OVERFLOW PREVENTION
   Any element with inline min-width that might cause overflow on mobile
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* Override all inline min-width on flex children that cause overflow */
  [style*="min-width:200px"],
  [style*="min-width: 200px"],
  [style*="min-width:260px"],
  [style*="min-width: 260px"],
  [style*="min-width:280px"],
  [style*="min-width: 280px"],
  [style*="min-width:300px"],
  [style*="min-width: 300px"] {
    min-width: 0 !important;
  }

  /* Ensure all containers constrain their children */
  .lf-section,
  .emp-section,
  .adv-section,
  .section,
  .apidocs-hero,
  .ca-section,
  [class*="-section"] {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

@media (max-width: 414px) {
  /* Override inline min-width:150px+ on iPhone 14 and smaller */
  [style*="min-width:150px"],
  [style*="min-width: 150px"],
  [style*="min-width:155px"],
  [style*="min-width: 155px"],
  [style*="min-width:160px"],
  [style*="min-width: 160px"],
  [style*="min-width:175px"],
  [style*="min-width: 175px"],
  [style*="min-width:180px"],
  [style*="min-width: 180px"] {
    min-width: 0 !important;
  }
}

@media (max-width: 375px) {
  /* Extra tight override for iPhone SE — all inline min-widths above 100px */
  [style*="min-width:100px"],
  [style*="min-width: 100px"],
  [style*="min-width:110px"],
  [style*="min-width: 110px"],
  [style*="min-width:120px"],
  [style*="min-width: 120px"],
  [style*="min-width:130px"],
  [style*="min-width: 130px"],
  [style*="min-width:140px"],
  [style*="min-width: 140px"] {
    min-width: 0 !important;
  }

  /* Even tighter section padding */
  .lf-section,
  .emp-section,
  .adv-section,
  .section {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Settlement detail inline flex rows — stack vertically */
  .detail-inner div[style*="display:flex"][style*="min-width:110px"],
  .content-with-sidebar div[style*="display:flex"][style*="min-width:110px"] {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   43. ANNOUNCEMENT BAR — Compact on smallest viewports
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 375px) {
  .announce-bar {
    font-size: 0.72rem !important;
    padding: 5px 10px !important;
  }
  .announce-bar-msg {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100vw - 80px) !important;
    display: inline-block !important;
  }
}