/* =========================================================
   Corroso — responsive.css
   Loaded LAST. Content-driven breakpoints. Mobile is a
   rethink, not a shrink: stacked CTAs, scrollable table,
   fluid type + spacing, 44px touch targets.
   ========================================================= */

/* ---- Fluid container padding (32px desktop → 20px phone) ---- */
.wrap { padding-inline: clamp(20px, 5vw, 32px); }

/* =========================================================
   TABLET & DOWN  (≤ 1024px)
   ========================================================= */
@media (max-width: 1024px) {
  .hero-grid { gap: clamp(32px, 5vw, 56px); }
}

/* =========================================================
   NARROW  (≤ 768px) — single-column territory
   ========================================================= */
@media (max-width: 768px) {
  /* tighten section rhythm so the page isn't endless on mobile */
  .section-pad { padding-block: clamp(48px, 9vw, 72px); }

  /* hero: copy first, mock second, both full-width and centered-left */
  .hero { padding-top: clamp(32px, 8vw, 56px); }
  .hero-lead { max-width: none; }

  /* HERO CTAs — stack full-width, easy thumb targets (the reported issue) */
  .hero-cta { gap: 12px; }
  .hero-cta .btn { width: 100%; }

  /* connectors wrap tidily, smaller gaps */
  .connectors { gap: 10px 18px; margin-top: 36px; }

  /* section headers: a touch smaller sub */
  .sec-sub { font-size: clamp(15px, 3.6vw, 18px); }
}

/* =========================================================
   COMPARISON TABLE — scroll, don't amputate columns
   (4 columns can't shrink to 320px; horizontal scroll keeps
    all the data accessible instead of hiding competitors)
   ========================================================= */
@media (max-width: 760px) {
  .compare { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare table { min-width: 560px; }
  /* subtle affordance that it scrolls */
  .compare { scrollbar-width: thin; }
}

/* =========================================================
   PHONE  (≤ 560px)
   ========================================================= */
@media (max-width: 560px) {
  /* nav: keep brand + the one CTA; CTA stays reachable */
  .nav-inner { height: 60px; }
  .nav-cta .btn.sm { padding: 9px 14px; font-size: 12.5px; }
  .brand .wordmark { font-size: 19px; }

  /* hero headline: don't let the forced <br/>s create huge gaps — allow natural wrap */
  .hero-h br { display: none; }
  .sec-h br { display: none; }

  /* finale / signup heading too */
  .finale-card h2 br, .signup h2 br { display: none; }

  /* the product mock: stack doc over evidence (already at 560 in corroso.css),
     make text comfortable */
  .doc { padding: 18px 18px; }
  .doc p { font-size: 14px; }

  /* steps / rules: a bit less padding so cards aren't cavernous */
  .step, .rule, .plan, .metric, .stat-card { padding: 24px; }
  .rule { gap: 14px; }

  /* buttons: 44px touch height; label scales fluidly to fit (stays one line) */
  .btn { min-height: 44px; white-space: nowrap; }
  .btn.sm { min-height: 38px; }
  .btn.lg { padding-inline: clamp(16px, 4.5vw, 32px); font-size: clamp(13px, 3.6vw, 16.5px); }
  .btn.lg i { font-size: clamp(15px, 3.8vw, 18px); }

  /* form: full-width fields, comfortable targets */
  .form-row { grid-template-columns: 1fr; }
  .field input, .field select { padding: 14px 15px; font-size: 16px; /* 16px prevents iOS zoom-on-focus */ }
  .signup { padding: clamp(28px, 7vw, 40px) clamp(20px, 5vw, 28px); }

  /* footer: stack columns */
  .footer-inner { flex-direction: column; gap: 28px; }
  .footer-cols { gap: 32px; }
  .footer-base { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* =========================================================
   TINY  (≤ 380px) — 320px-class safety
   ========================================================= */
@media (max-width: 380px) {
  .wrap { padding-inline: 16px; }
  .hero-h { font-size: clamp(32px, 9vw, 40px); }
  .metric .mv { font-size: clamp(30px, 9vw, 38px); }
  .nav-links { display: none; }            /* already hidden, explicit */
  .connectors .lbl { width: 100%; }        /* label on its own line */
}

/* =========================================================
   LANDSCAPE PHONE — short viewport, reclaim vertical space
   ========================================================= */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-block: 40px; }
  .section-pad { padding-block: 48px; }
}

/* =========================================================
   POINTER vs TOUCH — only apply hover lifts where hover is real
   (prevents sticky hover states on touch devices)
   ========================================================= */
@media (hover: none) {
  .js-anim .step:hover, .js-anim .rule:hover, .js-anim .metric:hover,
  .connectors .src:hover, .app-body .doc .cite:hover { transform: none; }
}