/* ==========================================================================
   MOBILE OPTIMIZATION — Comprehensive cross-page mobile fixes
   Created: 2026-03-31 (Task #592250)

   This file provides mobile-first responsive fixes across the entire
   Ops-Deck application. Loaded after page-specific styles to provide
   overrides and missing breakpoints.
   ========================================================================== */

/* ==========================================================================
   GLOBAL MOBILE FOUNDATIONS
   ========================================================================== */

/* Prevent horizontal scroll on ALL pages */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Ensure all images are responsive by default */
img {
  max-width: 100%;
  height: auto;
}

/* Touch targets — minimum 44px for all interactive elements */
@media (max-width: 768px) {
  button, a, input[type="submit"], input[type="button"], .btn, [role="button"] {
    min-height: 44px;
  }
}

/* iOS input zoom prevention — 16px minimum on all form elements */
@media (max-width: 768px) {
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   LANDING PAGE (index.html) MOBILE FIXES
   ========================================================================== */

/* Fix: Hero preview causes horizontal scroll on narrow phones.
   The clamp(320px, 50vw, 560px) min of 320px is wider than viewport on 375px
   when combined with padding. Override to use max-width: 100%. */
@media (max-width: 480px) {
  .hero-preview {
    width: 100% !important;
    max-width: 100% !important;
  }

  .demo-browser {
    border-radius: 10px !important;
  }

  .demo-browser-bar {
    padding: 8px 12px !important;
    gap: 8px !important;
  }

  .demo-browser-dots span {
    width: 8px !important;
    height: 8px !important;
  }

  .demo-browser-addr {
    font-size: 10px !important;
  }

  .demo-browser-pill {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }
}

/* Fix: CTA group max-width 340px overflows 320px screens */
@media (max-width: 360px) {
  .cta-group {
    max-width: 100% !important;
  }

  .cta-primary {
    padding: 14px 20px !important;
    font-size: 15px !important;
  }

  .cta-demo {
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
}

/* Fix: Activity toast positioning on mobile — don't overlap content */
@media (max-width: 480px) {
  .activity-toast {
    left: 8px !important;
    right: 8px !important;
    max-width: calc(100vw - 16px) !important;
    font-size: 12px !important;
    padding: 10px 12px !important;
  }

  .toast-avatar {
    width: 30px !important;
    height: 30px !important;
  }
}

/* Fix: Comparison cards need proper mobile stacking */
@media (max-width: 480px) {
  .compare-wrap {
    gap: 10px !important;
  }

  .cmp-card {
    padding: 20px 16px !important;
  }

  .cmp-total-amount {
    font-size: 24px !important;
  }
}

/* Fix: VS cards on small screens */
@media (max-width: 480px) {
  .vs-card {
    padding: 20px 16px !important;
  }

  .vs-quote {
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
}

/* Fix: Job cards horizontal layout becomes too tall on narrow screens */
@media (max-width: 380px) {
  .job-card {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 16px !important;
  }

  .job-icon {
    font-size: 22px !important;
  }
}

/* Fix: Testimonial cards readability on small phones */
@media (max-width: 480px) {
  .tcard {
    padding: 20px 16px !important;
    gap: 12px !important;
  }

  .tcard-quote {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
}

/* Fix: ROI calculator section padding + slider usability */
@media (max-width: 480px) {
  /* Task #678700: ROI section uses base .snap-section padding for snap scroll */

  .roi-inputs {
    padding: 18px 16px !important;
  }

  .roi-slider {
    height: 6px !important;
  }

  .roi-slider::-webkit-slider-thumb {
    width: 24px !important;
    height: 24px !important;
  }

  .roi-slider::-moz-range-thumb {
    width: 24px !important;
    height: 24px !important;
  }
}

/* Fix: S5 section perks on small screens */
@media (max-width: 480px) {
  .s5-perk {
    font-size: 13px !important;
  }

  .s5-sub {
    font-size: 14px !important;
  }

  .s5-headline {
    letter-spacing: -1.5px !important;
  }
}

/* Fix: Snap section side padding on small phones — keep min-height for snap cards */
@media (max-width: 480px) {
  .snap-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Fix: Mobile sticky CTA — vertical stack on small screens (both buttons visible) */
@media (max-width: 360px) {
  .sticky-cta-inner {
    flex-direction: column !important;
    gap: 6px !important;
  }

  .sticky-cta-primary {
    width: 100% !important;
    font-size: 13px !important;
    padding: 11px 14px !important;
  }

  .sticky-cta-demo {
    width: 100% !important;
    font-size: 12px !important;
    padding: 9px 10px !important;
    text-align: center !important;
  }
}

/* Fix: Nav cramped on tiny phones */
@media (max-width: 360px) {
  nav {
    padding: 0 12px !important;
  }

  .logo img {
    height: 22px !important;
  }

  nav a.nav-signup {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  nav a.login-link {
    font-size: 12px !important;
    padding: 4px 6px !important;
  }

  .nav-buttons {
    gap: 4px !important;
  }
}

/* Fix: Trust checks wrap better on tiny screens */
@media (max-width: 380px) {
  .trust-checks {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .trust-checks span {
    font-size: 12px !important;
  }
}

/* Fix: S1 badge text on small screens */
@media (max-width: 480px) {
  .s1-badge {
    font-size: 10px !important;
    padding: 5px 10px !important;
    text-align: center !important;
    line-height: 1.4 !important;
  }
}

/* ==========================================================================
   FOUNDERS CLUB PAGE MOBILE FIXES
   ========================================================================== */

/* Fix: Header cramped on mobile */
@media (max-width: 600px) {
  .founders-club-page header,
  body:has(.founders-crown) header {
    padding: 0 12px !important;
    height: auto !important;
    min-height: 54px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .header-left {
    gap: 8px !important;
  }

  .header-right {
    display: none !important;
  }

  .header-title {
    font-size: 13px !important;
  }

  .founders-crown {
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
  }

  .badge-pill {
    font-size: 10px !important;
    padding: 2px 8px !important;
  }
}

/* Fix: Hero banner on small phones */
@media (max-width: 480px) {
  .hero-banner {
    padding: 24px 18px !important;
    border-radius: 14px !important;
    margin-bottom: 24px !important;
  }

  .hero-name {
    font-size: 22px !important;
  }

  .hero-sub {
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }

  .hero-meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

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

  .hero-stat-val {
    font-size: 18px !important;
  }

  .hero-tag {
    font-size: 10px !important;
  }

  main {
    padding: 24px 14px 60px !important;
  }
}

/* Fix: Leaderboard table — horizontal scroll container on mobile */
@media (max-width: 600px) {
  .leaderboard-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }

  .leaderboard-table th {
    font-size: 10px !important;
    padding: 8px 10px !important;
  }

  .leaderboard-table td {
    font-size: 12px !important;
    padding: 10px !important;
  }

  .score-track {
    max-width: 60px !important;
  }
}

/* Fix: Analytics row — 1 col on very small screens */
@media (max-width: 480px) {
  .analytics-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .metric-tile {
    padding: 12px !important;
  }

  .metric-val {
    font-size: 18px !important;
  }

  .metric-label {
    font-size: 10px !important;
  }
}

@media (max-width: 360px) {
  .analytics-row {
    grid-template-columns: 1fr !important;
  }
}

/* Fix: Referral link box on mobile */
@media (max-width: 480px) {
  .referral-link-box {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  .referral-link-text {
    font-size: 11px !important;
    width: 100% !important;
    text-align: center !important;
  }

  .btn-copy {
    width: 100% !important;
    text-align: center !important;
    padding: 10px 14px !important;
    min-height: 44px !important;
  }

  .referral-card {
    padding: 20px 16px !important;
  }

  .referral-stats {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* Fix: Benefits grid on small screens */
@media (max-width: 480px) {
  .benefits-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .benefit-card {
    padding: 14px 16px !important;
    gap: 10px !important;
  }

  .benefit-title {
    font-size: 13px !important;
  }

  .benefit-desc {
    font-size: 12px !important;
  }
}

/* Fix: Spots progress bar on mobile */
@media (max-width: 480px) {
  .spots-bar-wrap {
    padding: 16px !important;
  }

  .spots-bar-count {
    font-size: 18px !important;
  }
}

/* Fix: Grid-2 and Grid-3 on mobile */
@media (max-width: 480px) {
  .grid-2, .grid-3 {
    gap: 12px !important;
  }

  .card {
    padding: 18px 16px !important;
  }

  .card-value {
    font-size: 22px !important;
  }

  .section-title {
    font-size: 16px !important;
  }
}

/* Fix: Price lock banner on mobile */
@media (max-width: 480px) {
  .price-lock-banner {
    padding: 14px 16px !important;
    gap: 10px !important;
  }

  .price-lock-icon {
    font-size: 20px !important;
  }

  .price-lock-title {
    font-size: 13px !important;
  }

  .price-lock-desc {
    font-size: 11px !important;
  }
}

/* Fix: Direct Line form inputs */
@media (max-width: 480px) {
  .form-input, .form-textarea {
    font-size: 16px !important;
    padding: 14px 12px !important;
  }

  .btn-primary {
    width: 100% !important;
    padding: 14px 20px !important;
    min-height: 48px !important;
  }
}

/* Fix: Toast on mobile founders page */
@media (max-width: 480px) {
  .toast {
    left: 12px !important;
    right: 12px !important;
    bottom: 16px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
}

/* ==========================================================================
   ADMIN PORTAL / DASHBOARD MOBILE FIXES
   ========================================================================== */

/* Fix: Tables in admin pages need horizontal scroll on mobile */
@media (max-width: 768px) {
  .tbl,
  .enroll-table,
  .angle-table,
  table:not(.leaderboard-table) {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Add scroll hint shadow */
  .card:has(table),
  .card:has(.tbl) {
    position: relative;
  }
}

/* Fix: Drip/Scraping dashboard stats grids need better mobile breakpoints */
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

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

  .stats-row {
    grid-template-columns: 1fr !important;
  }
}

/* Fix: Source grid — add tablet breakpoint */
@media (max-width: 700px) and (min-width: 481px) {
  .source-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

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

/* Fix: Two-col layout — add tablet breakpoint */
@media (max-width: 700px) {
  .two-col {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Fix: Form rows that don't wrap on mobile */
@media (max-width: 600px) {
  .form-row {
    flex-wrap: wrap !important;
  }

  .form-row input,
  .form-row select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Fix: Fixed-width inline input styles */
@media (max-width: 600px) {
  input[style*="width:140px"],
  input[style*="width:240px"],
  input[style*="width: 140px"],
  input[style*="width: 240px"],
  input[style*="width:200px"],
  input[style*="width: 200px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Fix: Funnel steps on mobile */
@media (max-width: 480px) {
  .funnel {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .funnel-step {
    padding: 12px 10px !important;
  }

  .funnel-step .step-num {
    font-size: 1.5rem !important;
  }

  .funnel-arrow {
    display: none !important;
  }
}

/* Fix: Tab bar overflow on mobile */
@media (max-width: 480px) {
  .tabs {
    padding: 0 12px !important;
    gap: 0 !important;
  }

  .tab {
    padding: 10px 14px !important;
    font-size: 0.8125rem !important;
  }

  .tab-content {
    padding: 16px 12px !important;
  }
}

/* Fix: Topbar on small screens */
@media (max-width: 480px) {
  .topbar {
    padding: 10px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .topbar h1 {
    font-size: 1rem !important;
  }

  .topbar-right {
    width: 100% !important;
    justify-content: flex-end !important;
  }

  .topbar a {
    font-size: 0.75rem !important;
    padding: 5px 10px !important;
  }
}

/* Fix: Hardcoded 4-column metrics grids */
@media (max-width: 768px) {
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
  }
}

/* Fix: Sequence rows on mobile */
@media (max-width: 480px) {
  .seq-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 12px 0 !important;
  }
}

/* ==========================================================================
   LOGIN / AUTH PAGES MOBILE FIXES
   ========================================================================== */

/* These pages are already well-optimized but add extra safety */
@media (max-width: 360px) {
  .login-card,
  .auth-card,
  .setup-card {
    padding: 20px 16px !important;
    margin: 12px !important;
  }
}

/* ==========================================================================
   MODAL FULL-SCREEN ON MOBILE
   ========================================================================== */

@media (max-width: 600px) {
  .modal-content,
  .modal-body,
  [class*="modal"]:not(.modal-overlay):not(.modal-backdrop) {
    max-width: 100vw !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
}

/* ==========================================================================
   ADMIN PORTAL SIDEBAR — Already handled by app-shell.css
   These are safety overrides for pages that may not use the app shell
   ========================================================================== */

@media (max-width: 768px) {
  /* Force old-style sidebars hidden on mobile */
  .sidebar:not(#appSidebar):not(.mobile-open) {
    display: none !important;
  }

  /* Force main content full-width when sidebar hidden */
  .main-content:not(.app-main-content),
  .main:not(.app-main-content) {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   EMAIL HUB / VIEWER MODAL — Mobile-ready
   ========================================================================== */

@media (max-width: 600px) {
  .email-viewer,
  .email-modal,
  .email-detail {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    z-index: 10010 !important;
  }
}

/* ==========================================================================
   GENERAL TYPOGRAPHY — Minimum readable sizes on mobile
   ========================================================================== */

@media (max-width: 480px) {
  /* Ensure body text is never smaller than 14px */
  body {
    font-size: 14px !important;
  }

  /* Section labels and muted text: minimum 11px */
  .text-muted,
  .sub,
  [class*="-desc"],
  [class*="-sub"],
  [class*="-label"] {
    min-font-size: 11px;
  }
}

/* ==========================================================================
   SCROLL BEHAVIOR — Smooth scroll respects reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   SAFE AREA INSETS — Consistent bottom padding for notched devices
   ========================================================================== */

@media (max-width: 768px) {
  #mobile-sticky-cta,
  .app-mobile-bottom-nav,
  .mobile-footer-cta {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ==========================================================================
   CLIENT PORTAL — Dashboard cards on mobile
   ========================================================================== */

@media (max-width: 480px) {
  .widgets-grid {
    gap: 10px !important;
  }

  .widget {
    padding: 14px !important;
  }

  .quick-actions {
    gap: 8px !important;
  }

  .action-btn {
    padding: 12px !important;
    font-size: 13px !important;
  }
}

/* ==========================================================================
   BOOKING / SCHEDULING — Mobile form fixes
   ========================================================================== */

@media (max-width: 480px) {
  .booking-form input,
  .booking-form select,
  .booking-form textarea {
    width: 100% !important;
    font-size: 16px !important;
  }

  .time-slots-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ==========================================================================
   SNAP-SCROLL CONTENT COMPACTION (Task #678700)
   Each snap section is exactly one viewport tall on mobile. Content must
   fit within the available space (viewport - header - sticky CTA).
   These rules aggressively compact section content so nothing overflows.
   ========================================================================== */

/* --- Medium phones (431-768px): moderate compaction --- */
@media (max-width: 768px) {
  /* General: tighter margins on all section headings */
  .s2-headline { margin-bottom: 16px !important; }
  .s3-headline { margin-bottom: 16px !important; }
  .s4-headline { margin-bottom: 12px !important; }
  .sv-headline { margin-bottom: 8px !important; }
  .fp-headline { margin-bottom: 12px !important; }
  .roi-headline { margin-bottom: 8px !important; }

  /* General: compact CTA groups */
  .section-cta-block { margin-top: 10px !important; }
  .cta-group { gap: 8px !important; margin-top: 10px !important; }
  .cta-proof { margin-top: 6px !important; font-size: 11px !important; }
  .section-cta-fine { font-size: 11px !important; margin-top: 4px !important; }

  /* screen-what: compact job cards */
  .jobs-grid { gap: 8px !important; }
  .job-card { padding: 14px 14px !important; }
  .job-desc { font-size: 12px !important; line-height: 1.4 !important; }
  .job-title { font-size: 15px !important; margin-bottom: 4px !important; }

  /* screen-video: compact */
  .sv-player { margin-bottom: 12px !important; }
  .sv-sub { margin-bottom: 12px !important; }
  .sv-bullets { gap: 12px !important; margin-bottom: 12px !important; }

  /* screen-roi: compact */
  .roi-sub { font-size: 13px !important; margin-bottom: 12px !important; }
  .roi-layout { gap: 10px !important; }
  .roi-inputs { padding: 14px 12px !important; }
  .roi-field { margin-bottom: 6px !important; }
  .roi-result-card { padding: 10px 14px !important; }

  /* screen-pricing: compact comparison cards */
  .compare-wrap { gap: 8px !important; }
  .cmp-card { padding: 16px 14px !important; }
  .cmp-item { padding: 3px 0 !important; font-size: 13px !important; }
  .cmp-total { margin-top: 8px !important; padding-top: 8px !important; }
  .cmp-tag { font-size: 11px !important; margin-top: 6px !important; }

  /* screen-vs: compact */
  .vs-grid { gap: 8px !important; }
  .vs-card { padding: 16px 14px !important; }
  .vs-list li { font-size: 12px !important; padding: 2px 0 !important; }

  /* screen-perks: compact cards */
  .fp-trifecta { gap: 8px !important; margin-bottom: 12px !important; }
  .fp-card { padding: 16px 14px !important; }
  .fp-desc { font-size: 12px !important; line-height: 1.4 !important; }
  .fp-icon { font-size: 28px !important; margin-bottom: 6px !important; }
  .fp-value { font-size: 26px !important; }

  /* screen-close: compact */
  .s5-perks { gap: 8px !important; margin-bottom: 10px !important; }
  .s5-footer { font-size: 10px !important; }
}

/* --- Small phones (≤480px): aggressive compaction --- */
@media (max-width: 480px) {
  /* screen-what: hide descriptions, titles only */
  .job-desc { display: none !important; }
  .job-title { font-size: 14px !important; margin-bottom: 0 !important; }
  .job-icon { font-size: 20px !important; }
  .s2-eyebrow { font-size: 9px !important; margin-bottom: 6px !important; }
  .s2-headline { font-size: 22px !important; }

  /* screen-video: hide bullets and subtitle */
  .sv-bullets { display: none !important; }
  .sv-sub { display: none !important; }

  /* screen-roi: hide subtitle and result notes */
  .roi-sub { display: none !important; }
  .roi-eyebrow { margin-bottom: 6px !important; }
  .roi-headline { font-size: 18px !important; }
  .roi-result-note { display: none !important; }
  .roi-result-value { font-size: 18px !important; }
  .roi-slider-labels { font-size: 10px !important; }
  .roi-vs-row { gap: 6px !important; }
  .roi-savings-badge { font-size: 12px !important; padding: 6px 10px !important; }

  /* screen-pricing: hide subtitle, compact items */
  .s4-sub { display: none !important; }
  .s4-headline { font-size: 22px !important; }
  .s4-eyebrow { margin-bottom: 6px !important; }
  .cmp-item { font-size: 11px !important; }
  .cmp-total-amount { font-size: 20px !important; }

  /* screen-vs: hide quote and subtitle */
  .vs-quote { display: none !important; }
  .vs-list li { font-size: 11px !important; }
  .vs-card-title { font-size: 14px !important; }

  /* screen-perks: hide descriptions, compact layout */
  .fp-sub { display: none !important; }
  .fp-desc { display: none !important; }
  .fp-value { font-size: 22px !important; margin-bottom: 2px !important; }
  .fp-label { font-size: 10px !important; margin-bottom: 0 !important; }
  .fp-badge { margin-bottom: 8px !important; }
  .fp-icon { font-size: 24px !important; margin-bottom: 4px !important; }

  /* screen-close: hide less critical elements */
  .s5-sub { display: none !important; }
  .s5-headline { font-size: clamp(20px, 5vw, 28px) !important; letter-spacing: -1px !important; }
  #milestone-counter { display: none !important; }
  .s5-fine { display: none !important; }
  .s5-demo-link { display: none !important; }
  .s5-footer { line-height: 1.6 !important; }
  .s5-perk { font-size: 12px !important; }

  /* General: hide fine print lines */
  .section-cta-fine { display: none !important; }
  .cta-proof { display: none !important; }
}

/* --- Tiny phones (≤430px): maximum compaction + single-button sticky CTA --- */
@media (max-width: 430px) {
  /* Reduce section bottom padding since sticky CTA is now single-button */
  .snap-section {
    padding-bottom: 80px !important;
  }

  /* Single-button sticky CTA to save vertical space */
  #mobile-sticky-cta .sticky-cta-demo { display: none !important; }
  #mobile-sticky-cta .sticky-cta-inner { flex-direction: row !important; }

  /* Even more compact cards */
  .job-card { padding: 10px 12px !important; gap: 10px !important; }
  .cmp-card { padding: 12px 10px !important; }
  .vs-card { padding: 12px 10px !important; }
  .fp-card { padding: 12px 10px !important; }

  /* Perks: horizontal layout instead of stacked */
  .fp-trifecta { gap: 6px !important; flex-direction: row !important; }
  .fp-card { min-width: 0 !important; flex: 1 !important; text-align: center !important; }
  .fp-featured-star { display: none !important; }
}

/* ==========================================================================
   SNAP SCROLL VIEWPORT-FIT RESTRUCTURE (Task #681275)

   Problem: Sections set to calc(100svh - 180px) with overflow: hidden, but
   content doesn't actually fit in one viewport at 375px (iPhone SE).
   Available content area at 375px: ~395px (667 - 180 header - 12 top - 80 bottom).

   Previous attempt (#678700) hid secondary text but kept same layouts.
   This fix RESTRUCTURES layouts: side-by-side comparisons, hidden inputs,
   and trimmed content so everything genuinely fits.

   Sections audited and fixed:
   - screen-pricing: side-by-side cards, items hidden
   - screen-vs: side-by-side cards, 3 items max, CTA hidden
   - screen-roi: slider inputs hidden, compact results only
   - screen-perks: ultra-compact horizontal cards
   - screen-close: footer hidden, compact perks
   - screen-what: tighter card spacing
   - screen-video: compact headline and player
   - screen-more-info: subtitle hidden
   ========================================================================== */

@media (max-width: 480px) {

  /* ── GLOBAL: Hide inline demo CTAs — sticky bar handles conversion ── */
  .snap-section:not(#screen-hero) .cta-group {
    margin-top: 8px !important;
  }
  .snap-section:not(#screen-hero) .cta-group .cta-demo {
    display: none !important;
  }

  /* ── SCREEN-PRICING: Side-by-side compact cards ──
     Old: stacked full-width cards with 5 bullet items each (~600px)
     New: side-by-side summary cards, items hidden (~130px) */
  #screen-pricing .compare-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  #screen-pricing .cmp-card {
    min-width: 0 !important;
    max-width: none !important;
    padding: 14px 10px !important;
  }
  #screen-pricing .cmp-title {
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
  }
  #screen-pricing .cmp-items {
    display: none !important;
  }
  #screen-pricing .cmp-total {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  #screen-pricing .cmp-total-label {
    font-size: 10px !important;
  }
  #screen-pricing .cmp-total-amount {
    font-size: 24px !important;
  }
  #screen-pricing .cmp-tag {
    font-size: 9px !important;
    margin-top: 8px !important;
    padding: 4px 6px !important;
    line-height: 1.3 !important;
  }
  #screen-pricing .s4-headline {
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }
  #screen-pricing .s4-eyebrow {
    margin-bottom: 4px !important;
  }

  /* ── SCREEN-VS: Side-by-side cards, limited items ── */
  #screen-vs .vs-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }
  #screen-vs .vs-card {
    min-width: 0 !important;
    max-width: none !important;
    padding: 10px 8px !important;
  }
  #screen-vs .vs-card-title {
    font-size: 10px !important;
    margin-bottom: 6px !important;
  }
  #screen-vs .vs-list {
    gap: 4px !important;
  }
  #screen-vs .vs-list li {
    font-size: 10px !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    gap: 4px !important;
  }
  #screen-vs .vs-list li .vs-x,
  #screen-vs .vs-list li .vs-check {
    font-size: 10px !important;
  }
  /* Show only first 3 items to save space */
  #screen-vs .vs-list li:nth-child(n+4) {
    display: none !important;
  }
  #screen-vs .vs-quote {
    display: none !important;
  }
  #screen-vs .s4-headline {
    font-size: 18px !important;
    margin-bottom: 6px !important;
  }
  #screen-vs .s4-sub {
    display: none !important;
  }
  /* Hide CTA group — sticky bar handles this */
  #screen-vs .cta-group {
    display: none !important;
  }
  #screen-vs .section-cta-fine {
    display: none !important;
  }
  #screen-vs .sv-eyebrow {
    margin-bottom: 4px !important;
  }

  /* ── SCREEN-ROI: Hide slider inputs, show results only ──
     3 sliders (~214px) + 3 result cards (~224px) = ~438px — way over budget.
     Hide interactive inputs. Show pre-computed results with default values. */
  #screen-roi .roi-inputs {
    display: none !important;
  }
  #screen-roi .roi-results {
    width: 100% !important;
  }
  /* Hide the secondary "owner time" result card */
  #screen-roi .roi-result-card:nth-child(2) {
    display: none !important;
  }
  #screen-roi .roi-result-card {
    padding: 10px 12px !important;
  }
  #screen-roi .roi-result-value {
    font-size: 20px !important;
  }
  #screen-roi .roi-result-label {
    font-size: 11px !important;
  }
  #screen-roi .roi-headline {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }
  #screen-roi .roi-layout {
    gap: 8px !important;
  }
  #screen-roi .roi-vs-row {
    gap: 4px !important;
  }
  #screen-roi .roi-vs-amount {
    font-size: 14px !important;
  }
  #screen-roi .roi-vs-desc {
    font-size: 10px !important;
  }
  #screen-roi .roi-savings-badge {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  /* ── SCREEN-PERKS: Ultra-compact horizontal cards ── */
  #screen-perks .fp-card {
    padding: 10px 6px !important;
    text-align: center !important;
    border-radius: 12px !important;
  }
  #screen-perks .fp-badge {
    display: none !important;
  }
  #screen-perks .fp-icon {
    font-size: 22px !important;
    margin-bottom: 4px !important;
  }
  #screen-perks .fp-value {
    font-size: 16px !important;
    margin-bottom: 2px !important;
  }
  #screen-perks .fp-label {
    font-size: 8px !important;
    margin-bottom: 0 !important;
    letter-spacing: 0.5px !important;
  }
  #screen-perks .fp-headline {
    font-size: 20px !important;
    margin-bottom: 8px !important;
  }
  #screen-perks .fp-eyebrow {
    margin-bottom: 4px !important;
  }

  /* ── SCREEN-CLOSE + FOOTER: Hide footer in all snap sections ── */
  .snap-section .s5-footer {
    display: none !important;
  }
  #screen-close .s5-headline {
    font-size: 18px !important;
    line-height: 1.15 !important;
    margin-bottom: 10px !important;
  }
  #screen-close .s5-eyebrow {
    font-size: 10px !important;
    margin-bottom: 6px !important;
  }
  #screen-close .s5-perks {
    gap: 4px !important;
    margin-bottom: 10px !important;
  }
  #screen-close .s5-perk {
    font-size: 12px !important;
    padding: 3px 0 !important;
  }

  /* ── SCREEN-WHAT: Tighter card spacing ── */
  #screen-what .jobs-grid {
    gap: 6px !important;
  }
  #screen-what .job-card {
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  #screen-what .s2-headline {
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }

  /* ── SCREEN-VIDEO: Compact player and headline ── */
  #screen-video .sv-player {
    margin-bottom: 8px !important;
  }
  #screen-video .sv-headline {
    font-size: 20px !important;
    margin-bottom: 6px !important;
  }

  /* ── SCREEN-MORE-INFO: Compact form ── */
  #screen-more-info .s6-sub {
    display: none !important;
  }
  #screen-more-info .s6-headline {
    font-size: 22px !important;
    margin-bottom: 8px !important;
  }
  #screen-more-info .info-form {
    padding: 16px 14px !important;
  }
  #screen-more-info .info-form-row {
    margin-bottom: 10px !important;
  }
  #screen-more-info .info-form-back {
    margin-top: 12px !important;
  }
}