/* ============================================================================
   responsive.css
   Mobile-first floor: 18px body, 48px tap, 56px form fields preserved across
   all breakpoints. The 40-62 reader needs the SAME ergonomics on phone & desk.
   Breakpoints:
     - phone:        up to 640px
     - tablet:       641px - 1023px
     - desktop:      1024px and up (default)
   ============================================================================ */

/* ---------- TABLET DOWN (≤ 1023px) ---------- */
@media (max-width: 1023px) {
  section { padding: var(--s10) var(--s4); }
  section.tight { padding: var(--s8) var(--s4); }
  section.loose { padding: var(--s11) var(--s4); }

  .hero { padding: var(--s8) var(--s4); }
  .hero .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--s7);
  }
  .hero h1 { max-width: 100%; }

  .section-empathy .empathy-grid,
  .section-authority .auth-grid,
  .section-area .area-grid,
  .section-faq .faq-grid,
  .section-audit .audit-grid,
  .about-hero .grid,
  .engine-hero .grid {
    grid-template-columns: 1fr;
    gap: var(--s7);
  }

  .plan-grid,
  .section-proof .proof-row,
  .section-solution .ladder,
  .section-pricing .tiers-row,
  .engine-stack .stack-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s4);
  }

  .section-proof .stats-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s5);
  }

  .work-list .case {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }

  .stack-list .layer {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }

  /* nav: keep visible essentials */
  nav.site .nav-row {
    padding: var(--s3) var(--s4);
    gap: var(--s3);
  }
  nav.site .links { display: none; }
  nav.site .nav-phone { display: none; }
}

/* ---------- PHONE (≤ 640px) ---------- */
@media (max-width: 640px) {
  /* keep typography legible — DON'T shrink body */
  h1 { font-size: clamp(1.875rem, 1.5rem + 4vw, 2.5rem); line-height: 1.1; }
  h2 { font-size: clamp(1.5rem, 1.25rem + 2vw, 1.875rem); }
  .display-xl,
  .hero h1 { font-size: clamp(2rem, 1.6rem + 4vw, 2.75rem); }

  section { padding: var(--s9) var(--s4); }
  .hero { padding: var(--s7) var(--s4); }

  .plan-grid,
  .section-proof .proof-row,
  .section-solution .ladder,
  .section-pricing .tiers-row,
  .engine-stack .stack-grid {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }

  .section-proof .stats-strip { grid-template-columns: 1fr 1fr; }

  /* CTAs stack full-width on phone */
  .hero .hero-cta-row,
  .closer-ctas,
  .ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .hero .hero-cta-row .btn,
  .closer-ctas .btn,
  .ctas .btn {
    width: 100%;
    justify-content: center;
  }

  /* trust strip wraps cleanly */
  .trust-strip {
    font-size: 0.875rem;
    gap: var(--s3);
  }

  /* pain row stacks */
  .pain-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s2);
  }
  .pain-row .cost { margin-left: 0; }

  /* anchor card stacks */
  .anchor-card {
    grid-template-columns: 1fr;
    gap: var(--s5);
    padding: var(--s6);
  }

  /* tiers: featured no longer scaled (avoid visual cramp on phone) */
  .tier.featured { transform: none; }

  /* service area columns flatten */
  .section-area .area-list { columns: 1; }

  /* footer trust lighter */
  .section-closer { padding: var(--s10) var(--s4); }
  .section-closer .footer-trust {
    flex-direction: column;
    gap: var(--s3);
  }

  /* photo frame caption — keep readable */
  .photo-frame .caption {
    bottom: var(--s3); left: var(--s3); right: var(--s3);
    font-size: 0.75rem;
  }

  /* engine hero stacks */
  .engine-hero { padding: var(--s9) var(--s4); }

  /* about hero stacks */
  .about-hero { padding: var(--s9) var(--s4); }
}

/* ---------- TINY PHONE (≤ 380px) ---------- */
@media (max-width: 380px) {
  section { padding: var(--s8) var(--s3); }
  .hero { padding: var(--s7) var(--s3); }
  nav.site .nav-row { padding: var(--s3) var(--s3); }
  .anchor-card { padding: var(--s5); }
  .tier { padding: var(--s5); }
  .plan-step { padding: var(--s5); }
}

/* ---------- LARGE DESKTOP (≥ 1440px) ---------- */
@media (min-width: 1440px) {
  /* don't blow up tap targets — just give content more room */
  .container { padding: 0 var(--s4); }
}

/* ---------- PRINT ---------- */
@media print {
  nav.site, .section-closer .footer-trust, .scarcity, .scroll-progress { display: none; }
  body { background: white; color: black; }
  a { color: black; text-decoration: underline; }
  .hero, section { padding: 1.5rem 0; }
}