/*
 * AIMS Charter . Mobile Responsive Overrides
 *
 * Shared mobile-first rules for prospect-facing pages (index, signup,
 * login, tier-comparison, policy-pack, brief, security, trust-page).
 * Load AFTER the page's own <style> block so these rules win at the
 * mobile breakpoint. Rob 2026-08-25.
 *
 * Targets iPhone-first: 375px min. Tablet at 768px. Desktop at 1024px.
 */

/* iOS Safari: stop auto-scaling text on orientation change */
html { -webkit-text-size-adjust: 100%; }

/* ─────── Tablet + below (≤767px): the main mobile pass ─────── */
@media (max-width: 767px) {

  /* Nothing on any prospect page should overflow horizontally. */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Container / wrapper padding tightens on phone. Broad selector so
     we don't have to enumerate every page's naming convention. */
  .container,
  .wrapper,
  .content,
  .hero-inner,
  .nav-inner,
  .header-inner,
  .footer-inner,
  .stepper-nav-inner,
  .stepper-footer-inner,
  main > section,
  main {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }

  /* Heading scale down. Uses clamp so the biggest heros still feel
     like heros without breaking phone width. */
  h1,
  .headline,
  .hero-h,
  .hero-title,
  .signup-headline,
  .persona-headline,
  .stats-headline,
  .page-title,
  .founder-name,
  .score-value {
    font-size: clamp(24px, 6.5vw, 34px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    text-wrap: balance;
  }
  h2,
  .section-title,
  .hero-sub,
  .persona-sub,
  .stats-eyebrow,
  .page-lede {
    font-size: clamp(18px, 4.8vw, 24px) !important;
    line-height: 1.35 !important;
  }
  h3 { font-size: 17px !important; }

  /* Body copy min 15px, list/label same. Prevents 12-13px accessory
     text from vanishing on a phone screen. */
  body, p, li, label, .body-text, .sub, .hero-sub, .founder-lede {
    font-size: 15px;
  }

  /* Touch targets ≥44px — Apple's guideline, useful for everyone. */
  button,
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-inverse,
  .btn-outline,
  .submit-btn,
  .cta-primary,
  .header-cta,
  .plus-block-cta,
  .brief-reference-cta,
  .fm-reference-cta,
  .ladder-jump,
  a.cta-tile,
  [role="button"] {
    min-height: 44px;
    padding-left: 18px;
    padding-right: 18px;
  }

  /* iOS zooms on any input <16px. Force 16px on the field itself. */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Nothing embedded should push the page wider than the viewport. */
  img, video, iframe, svg {
    max-width: 100%;
    height: auto;
  }

  /* Tables become horizontally scrollable inside their parent. */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Common multi-column grid patterns — collapse to single column.
     Covers grids named by shape (grid, three-col, two-col, cols-N),
     by content (pricing, feature, persona, benefit, cert, program,
     summary, pack, stats, hero, comparison), and by suffix (-grid). */
  .grid,
  [class*="-grid"],
  [class$="-grid"],
  .three-col,
  .two-col,
  .four-col,
  .cols-2,
  .cols-3,
  .cols-4,
  .hero-grid,
  .pricing-grid,
  .feature-grid,
  .persona-grid,
  .pack-grid,
  .stats-grid,
  .benefit-grid,
  .cert-grid,
  .program-grid,
  .summary-grid,
  .comparison-table,
  .plus-block-header,
  .plus-block-title-group,
  .founder-row,
  .cost-ladder,
  .cta-row,
  .friction-row,
  .frame-band-list {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 12px !important;
  }

  /* Rows that use flex for side-by-side layout — allow wrap. */
  .nav,
  .nav-links,
  .stepper-nav-links,
  .footer-meta-links,
  .footer-inner,
  .header-inner,
  .cert-bar,
  .actions,
  .field-row,
  .hero-cta-row,
  .hero-trust {
    flex-wrap: wrap !important;
    row-gap: 8px;
  }

  /* Sticky nav bars: shrink and don't tower over the fold. */
  .nav,
  .stepper-nav {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Comparison / tier matrix: horizontal scroll fallback so the whole
     matrix doesn't blow up card widths on phones. */
  .matrix,
  .matrix-scroll,
  .comparison,
  .comparison-table,
  .cert-section table {
    overflow-x: auto;
    display: block;
    max-width: 100%;
  }

  /* Footer meta links stack, don't crowd. */
  .footer-meta-links,
  .stepper-footer-meta-links {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  /* Score / cert hero widgets: recentre + shrink for phone width. */
  .score-hero,
  .score-left,
  .score-right {
    text-align: center !important;
    padding: 20px 16px !important;
  }
}

/* ─────── Small phones (≤480px): tighter still ─────── */
@media (max-width: 480px) {
  .container,
  .wrapper,
  .content,
  .hero-inner,
  main > section,
  main {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  h1, .headline, .hero-h, .hero-title, .signup-headline {
    font-size: clamp(22px, 6.5vw, 28px) !important;
  }
  .brand-tagline { display: none; }
}