/* Copied from previews/2026-09-offer/responsive.css for the root-level offer pages. */
/* DNDB offer pages, shared responsive layer, 2026-09.
   =====================================================================
   preview.css carries the design system measured off the live index.html
   but has no media queries at all: every page linking it alone is desktop
   only and overflows a phone. This file adds the breakpoints and nothing
   else. It is additive, it touches no value preview.css sets at desktop
   width, and offer-screen.html deliberately does NOT link it, so the
   original variant stays exactly as it was for the comparison.

   Breakpoints are the site's own: 1024 is where index.html switches to
   the mobile build (DND.isMobile, matchMedia 1024), 768 is the tablet
   step, 480 the small phone.
   ===================================================================== */

/* ── Tablet and below ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* The nav links are the first thing that cannot fit: eight items at
       16px need ~560px and the pill has ~400 once logo and button are in.
       They are dropped rather than shrunk, and the logo still returns to
       the main site, so no destination is lost. */
    .pill { gap: 16px; padding: 0 16px; height: 60px; }
    .nav { display: none; }
    .nav-left { gap: 0; }
    .hd { padding: 16px 0 0; }

    .band { padding: 72px 0; }
    .band-tight { padding: 48px 0; }
    .band-head { margin-bottom: 28px; }

    /* .sec-title is 44px and nowrap on desktop, which is 380px of line for
       a two-word heading. The site solves the same problem the same way in
       its own narrow columns: min(44px, 9.7vw), and wrapping allowed. */
    .sec-title { font-size: min(44px, 8.6vw); white-space: normal; line-height: 0.92; }
    .head-row { flex-wrap: wrap; align-items: baseline; gap: 6px 9px; }
    .tagline { white-space: normal; }

    .h1 { font-size: clamp(30px, 6.2vw, 46px); line-height: 0.96; letter-spacing: -0.035em; }
    .lede { font-size: 15px; line-height: 24px; }
    .measure { max-width: none; }

    .wm { font-size: clamp(64px, 16vw, 150px); }
}

/* ── Phone ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .band { padding: 56px 0; }
    .band-tight { padding: 40px 0; }

    /* Full-width buttons on a phone: a 22px-padded pill in the middle of a
       375px column reads as a link, not as the next step. */
    .btn-row { flex-direction: column; align-items: stretch; gap: 12px; }
    .btn-row > * { width: 100%; }
    .cta-stack { width: 100%; }
    .btn, .btn-2 { height: 44px; font-size: 14px; }
    .btn-lg, .btn-lg.btn-2 { height: 48px; font-size: 15px; }

    .proof { gap: 22px 28px; }
    .field { height: 48px; font-size: 16px; }   /* 16px: no iOS focus zoom */
}

@media (max-width: 480px) {
    .wrap { padding: 0 18px; }
    .sec-title { font-size: min(44px, 9.4vw); }
    .band { padding: 48px 0; }
}

/* Nothing on any of these pages may scroll sideways. Enforced rather than
   trusted: a single 560px card is all it takes. */
@media (max-width: 1024px) {
    html, body { overflow-x: hidden; max-width: 100%; }
    img, svg { max-width: 100%; }
}