/* ============================================================
   RESPONSIVE, cross-cutting refinements.
   Section-specific breakpoints live in their own files.
   Load this file LAST so it can win where it needs to.
   ============================================================ */

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  :root {
    --section-y: clamp(4.5rem, 9vw, 7rem);
  }
}

/* ---------- Mobile: keep type powerful, keep air ---------- */
@media (max-width: 720px) {
  :root {
    --gutter: 1.35rem;
    --fs-body: 1rem;
    --fs-lead: 1.0625rem;
  }

  .s-head { margin-bottom: 2.5rem; }
  .s-head__title,
  .hero__title,
  .problem__title,
  .cta__title,
  .systems__title,
  .founder__title { max-width: none; }

  /* Full-bleed hairlines read better edge to edge on phones */
  .btn { height: 50px; }
  .btn--lg { height: 54px; }
}

/* ---------- Touch targets ----------
   Inline links are visually small by design. On touch screens we grow the
   hit area without moving anything, so nothing needs a bigger label. */
@media (max-width: 900px) {
  .link-u,
  .footer__col a,
  .footer__legal a,
  .nav__brand,
  .footer__brand .logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer__col ul { gap: 0; }
  .footer__legal { gap: 0.5rem 1.25rem; }
}

/* ---------- Small phones ---------- */
@media (max-width: 380px) {
  :root { --gutter: 1.15rem; }
  .trust__list { gap: 0.9rem 1.25rem; }
}

/* ---------- Large screens: stop lines getting too long ---------- */
@media (min-width: 1600px) {
  :root { --container: 1320px; }
}

/* ---------- Touch devices: no hover-dependent affordances ---------- */
@media (hover: none) {
  .btn:hover { transform: none; }
  .ledger__row:hover,
  .case:hover { background: transparent; }
  .link-u { background-size: 100% 1px; }
}

/* ---------- Print ---------- */
@media print {
  .nav, .rail, .drawer, .modal, .play { display: none !important; }
  .section--dark, .systems, .results, .cta, .footer {
    background: #fff !important;
    color: #000 !important;
  }
  .section { padding-block: 1.5rem; }
}