/* ==========================================================================
   mobile-fixes.css — sitewide mobile layout + legibility pass (2026-09-30)
   Linked at the END of <head> on every page so it loads after each page's own
   styles. Two labelled sections: A) LAYOUT (fit the screen) and
   B) LEGIBILITY (bigger / brighter small text). Delete section B to revert
   the text changes without touching the layout fixes.
   ========================================================================== */

/* ---------- A. LAYOUT: fit the screen ---------- */
@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: clip; }
  img, video, iframe { max-width: 100%; height: auto; }
  p, li, dd, dt, td, th, h1, h2, h3, h4, a, label, figcaption { overflow-wrap: break-word; }
  section { padding-left: 20px !important; padding-right: 20px !important; }

  /* Multi-column layouts collapse to one column */
  .addons-grid, .ai-layout, .blog-card.featured, .checklist-grid, .deliverables-grid,
  .expect-grid, .fit-layout, .form-grid, .guarantee-badges, .portfolio-layout, .prep-box,
  .pricing-grid, .pricing-row, .problem-grid, .problem-inner, .process-track,
  .resources-grid, .results-grid, .scope-grid, .seo-three, .seo-walkthrough,
  .system-cards, .system-header, .tiers-grid, .work-ledger, .blog-grid,
  [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1.4fr 1fr"], [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"], [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }
  .work-ledger dl > div { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; }

  /* Grid/flex children may shrink instead of pushing the page wider */
  .addons-grid > *, .ai-layout > *, .checklist-grid > *, .deliverables-grid > *, .fit-layout > *,
  .form-grid > *, .portfolio-layout > *, .pricing-grid > *, .pricing-row > *, .problem-grid > *,
  .problem-inner > *, .process-track > *, .resources-grid > *, .results-grid > *, .scope-grid > *,
  .seo-three > *, .seo-walkthrough > *, .system-cards > *, .system-header > *, .tiers-grid > *,
  .work-ledger > *, .blog-grid > *, .process-step > *, .step-row > *, .dir-grid > *,
  [style*="display:grid"] > *, [style*="display: grid"] > *, [style*="display:flex"] > * { min-width: 0; }

  /* Number + text rows keep two columns but with a slimmer number column */
  .process-step { grid-template-columns: 52px minmax(0, 1fr) !important; gap: 16px !important; }
  .step-row, [style*="grid-template-columns:48px 1fr"] { grid-template-columns: 40px minmax(0, 1fr) !important; gap: 14px !important; }
  .ai-terms > div { grid-template-columns: 64px minmax(0, 1fr) !important; }

  /* Cards: tighter padding so text gets the width */
  [style*="padding:32px"] { padding: 22px 18px !important; }
  [style*="padding:40px"], [style*="padding:48px"] { padding: 24px 18px !important; }
  [style*="gap:80px"], [style*="gap:64px"], [style*="gap:60px"] { gap: 28px !important; }

  /* Buttons fit and are easy to tap */
  .btn-primary, .btn-ghost { display: block; width: 100%; max-width: 100%; box-sizing: border-box; text-align: center; white-space: normal; }
  [style*="display:flex"][style*="flex-wrap:wrap"] { width: 100%; }

  /* Forms: 16px inputs stop iPhone Safari from zooming the page */
  input, select, textarea { font-size: 16px !important; max-width: 100%; }

  /* Wide comparison tables scroll inside their own box */
  .compare-scroll, .table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 480px) {
  section { padding-left: 16px !important; padding-right: 16px !important; }
  .dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
}

/* ---------- B. LEGIBILITY: bigger, brighter small text (mobile only) ---------- */
@media (max-width: 900px) {
  :root { --muted: #b4b1aa; }
  p, li, dd { font-weight: 400 !important; }
  [style*="font-weight:300"], [style*="font-weight: 300"] { font-weight: 400 !important; }
  [style*="font-size:13px"], [style*="font-size:14px"] { font-size: 15px !important; }
  [style*="font-size:15px"] { font-size: 16px !important; }
  .card-desc, .tier-tagline, .addon-desc, .expect-desc, .confirm-text, .res-desc { font-size: 15px !important; }
  .res-features li, .check-items li, .pricing-features-list li { font-size: 15px !important; }
  .section-tag, .blog-tag, .hero-tag, .problem-label, .tier-includes-label, .example-label,
  .footer-copy, .compare-note, .last-updated, .callout-attr, .card-link-arrow { font-size: 11px !important; }
}

/* ---------- C. LEGAL PAGES (privacy / terms): list rows were flex, so bold text, plain text and
   links became separate columns and the email link pushed the page wider ---------- */
@media (max-width: 900px) {
  .page-wrap ul li { display: block !important; position: relative; padding-left: 22px; }
  .page-wrap ul li::before { position: absolute; left: 0; top: 0.6em; margin-top: 0 !important; }
  .page-wrap a { overflow-wrap: anywhere; }
}

/* ---------- D. CARD PADDING + BUTTONS: wide inline paddings shrink on phones ---------- */
@media (max-width: 900px) {
  [style*="padding:40px 36px"], [style*="padding:44px 40px"], [style*="padding:36px"], [style*="padding:30px"] { padding: 26px 18px !important; }
  [style*="padding:22px 48px"], [style*="padding:22px 52px"], [style*="padding:20px 52px"] { padding: 18px 20px !important; }
  [style*="padding:28px"], [style*="padding:25px"] { padding: 22px 18px !important; }
}

/* ---------- E. Comparison table hint (pricing page): it scrolls sideways inside its own box ---------- */
@media (max-width: 900px) {
  .compare-scroll::before { content: "Swipe sideways to compare \2192"; display: block; position: sticky; left: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); padding: 0 0 12px; }
}

/* ---------- F. MOBILE MENU (hamburger) ---------- */
.nav-toggle { display: none; }
@media (max-width: 900px) {
  .nav-logo { min-width: 0; }
  .nav-call-mobile { margin-left: auto; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 44px; height: 44px; margin-left: 12px; padding: 0; flex-shrink: 0;
    background: transparent; border: 1px solid var(--border); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-logo + .nav-toggle { margin-left: auto; }
  .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--white); transition: transform 0.25s, opacity 0.2s; }
  nav.menu-open .nav-toggle { border-color: var(--orange); }
  nav.menu-open .nav-toggle span { background: var(--orange); }
  nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  nav.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  nav.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  nav.menu-open { background: #0a0a0a; }
  nav.menu-open .nav-links {
    display: flex !important; flex-direction: column; align-items: stretch; gap: 0 !important;
    position: fixed; top: var(--nav-h, 72px); left: 0; right: 0; bottom: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: #0a0a0a; padding: 8px 24px 120px; margin: 0; z-index: 99; list-style: none;
  }
  nav.menu-open .nav-links > li { border-bottom: 1px solid var(--border); list-style: none; }
  nav.menu-open .nav-links > li > a {
    display: block; padding: 18px 0; font-size: 15px !important; letter-spacing: 0.12em; color: var(--white);
  }
  nav.menu-open .nav-item > a::after { display: none; }
  nav.menu-open .nav-item > a { color: var(--orange) !important; cursor: default; pointer-events: none; padding-bottom: 6px; }
  nav.menu-open .nav-dropdown {
    position: static !important; transform: none !important; opacity: 1 !important; visibility: visible !important;
    display: flex; flex-direction: column; min-width: 0; background: transparent; border: 0; backdrop-filter: none;
    padding: 0 0 12px 14px;
  }
  nav.menu-open .nav-dropdown-label { display: none; }
  nav.menu-open .nav-dropdown a { display: block; padding: 12px 0 !important; font-size: 15px !important; color: #d6d3cc !important; letter-spacing: 0.04em; }
  nav.menu-open .nav-links > li:last-child { border-bottom: 0; padding-top: 20px; }
  nav.menu-open .nav-cta { display: block !important; text-align: center; padding: 18px 20px !important; }
  body.menu-open { overflow: hidden; }
}

/* F2. A blur filter on <nav> makes position:fixed children size to the nav bar instead of the screen,
   which clipped the open menu. Turn the blur off while the menu is open, and keep the logo from crowding the buttons. */
@media (max-width: 900px) {
  nav.menu-open { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (max-width: 420px) {
  .nav-logo { gap: 8px; }
  .nav-logo-text { font-size: 21px !important; }
  nav { padding-left: 16px !important; padding-right: 16px !important; }
}