/* ─────────────────────────────────────────────────────────────
   M Infinite — responsive hardening

   Loaded LAST so it wins over style.css and any page-level <style>.

   THE BUG THIS FIXES
   The nav holds 8 links plus a wordmark plus the Create Account
   button. Measured, that needs about 1403px of viewport. The
   burger menu only appeared below 900px, so between 900px and
   1403px the links wrapped, "HOW IT WORKS" broke onto three
   lines and "HOME" collided with the logo. That range covers
   almost every laptop, which is why it looked broken on most
   screens.

   Fix is in three parts:
     1. nav links never wrap, and their spacing is fluid
     2. the burger takes over at 1279px, before anything breaks
     3. global guards so no section can overflow at any width
   ───────────────────────────────────────────────────────────── */

/* ═══ 1. GLOBAL OVERFLOW GUARDS ═══════════════════════════════
   Nothing should ever cause a horizontal scrollbar, at any width. */
html, body { max-width: 100%; overflow-x: hidden; }

img, svg, video, canvas, iframe, table { max-width: 100%; height: auto; }

/* Long unbroken strings (URLs, emails, big numbers) must not push
   their container wider than the screen. */
p, li, td, th, h1, h2, h3, h4, dd, dt, figcaption, label, .hint {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Grid and flex children default to min-width:auto, which lets wide
   content blow out the track. This is the single most common cause
   of horizontal overflow. */
.hero-inner > *, .stats-band > *, .features-section > *,
.how-section > *, .assets-section > *, .builder-wrap > *,
.pf-grid2 > *, .pf-summary > *, .pf-perf > * { min-width: 0; }

/* ═══ 2. NAV ══════════════════════════════════════════════════ */
.main-nav { gap: 1rem; }

/* The wordmark must never be squeezed or overlapped. */
.nav-logo { flex: 0 0 auto; white-space: nowrap; }

.nav-links {
  /* Spacing shrinks with the viewport instead of forcing a wrap. */
  gap: clamp(1rem, 2.1vw, 2.5rem);
  flex-wrap: nowrap;
  min-width: 0;
}

/* Multi-word items like "HOW IT WORKS" and "LOAN RESTRUCTURE"
   were breaking onto multiple lines. They must stay on one. */
.nav-links a {
  white-space: nowrap;
  font-size: clamp(0.7rem, 0.62vw + 0.34rem, 0.8rem);
  letter-spacing: clamp(0.08em, 0.5vw, 0.14em);
}

.nav-right { flex: 0 0 auto; }
.nav-cta {
  white-space: nowrap;
  padding: 0.52rem clamp(0.9rem, 1.6vw, 1.5rem);
  font-size: clamp(0.7rem, 0.6vw + 0.34rem, 0.78rem);
}

/* Burger takes over well before the links run out of room.
   1279px chosen from the measurement below: the full nav only fits
   comfortably from 1280px up. */
@media (max-width: 1279px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .main-nav { padding: 0 clamp(1rem, 4vw, 2.5rem); }
}

/* The open mobile sheet: make sure it works at the new breakpoint
   too, not just below 900px where it was originally defined. */
@media (max-width: 1279px) {
  .nav-links.open {
    display: flex; flex-direction: column; gap: 0;
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    background: var(--white); padding: 1.25rem clamp(1rem, 4vw, 2.5rem);
    border-bottom: 1px solid var(--rule); z-index: 899;
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
  }
  .nav-links.open li { border-bottom: 1px solid var(--rule); }
  .nav-links.open li:last-child { border-bottom: none; }
  .nav-links.open a {
    padding: 0.85rem 0; display: block;
    font-size: 0.78rem; letter-spacing: 0.14em; white-space: normal;
  }
}

/* On very small screens the CTA text is the first thing to sacrifice. */
@media (max-width: 420px) {
  .nav-cta { padding: 0.5rem 0.85rem; font-size: 0.66rem; letter-spacing: 0.08em; }
  .nav-logo { font-size: 1.2rem; }
}

/* ═══ 3. HERO ═════════════════════════════════════════════════
   The two-column hero was a fixed 1fr / 420px, which crushes the
   text column before the single-column breakpoint arrives. */
.hero-inner {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: clamp(2rem, 5vw, 5rem);
  padding-left: clamp(1.25rem, 5vw, 3rem);
  padding-right: clamp(1.25rem, 5vw, 3rem);
}
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
}

/* Headline scales smoothly rather than jumping at breakpoints. */
.hero h1, .hero-title {
  font-size: clamp(2.1rem, 5.2vw, 4.2rem);
  line-height: 1.08;
}

/* ═══ 4. SECTION GRIDS ════════════════════════════════════════
   auto-fit means these reflow at every width instead of only at
   the two or three breakpoints that happened to be written. */
.stats-band {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.features-section .feature-grid,
.how-section .how-grid,
.assets-section .asset-grid,
.pt-grid, .cl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

/* ═══ 5. FLUID GUTTERS ════════════════════════════════════════ */
:root { --gutter: clamp(1.25rem, 4vw, 3rem); }

.pf-wrap, .cl-wrap, .qv-wrap, .pt-wrap {
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}

/* ═══ 6. TABLES ═══════════════════════════════════════════════
   Any table wider than its container scrolls inside itself rather
   than pushing the whole page sideways. */
.pf-table { width: 100%; }
.table-scroll, .pf-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ═══ 7. TOUCH TARGETS ════════════════════════════════════════ */
@media (pointer: coarse) {
  .nav-links a, .nav-cta, .pf-mini, .pf-chip, .pf-skip {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}

/* ═══ 8. VERY WIDE SCREENS ════════════════════════════════════
   Stop content stretching to absurd line lengths on 4K monitors. */
@media (min-width: 1800px) {
  .hero-inner { max-width: 1500px; }
}