/* ═══════════════════════════════════════════════════════════════════════
   responsive-v4.css — phone / tablet rules for the v4 site (2026-09-10).

   The v4 nav and landing page are converted VERBATIM from the design with
   inline styles that must not be refactored (see nav-v4.blade.php). So the
   small-screen layout lives here and targets those inline values with
   [style*="…"] attribute selectors + !important. Loaded LAST in head.
   ═══════════════════════════════════════════════════════════════════════ */

/* iOS zooms into any field under 16px — never on a phone */
@media (max-width: 560px) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
}

/* ── Nav: burger + drawer under 1080px ────────────────────────────────── */
@media (max-width: 1080px) {
    [data-hv-navwrap] nav { flex-wrap: nowrap !important; width: 100% !important; justify-content: space-between !important; }
    [data-hv-navwrap] nav > .hv-dd:not(.hv-dd--account) { display: none !important; }
    [data-hv-navwrap] nav > a[href$="/pricing"] { display: none !important; }   /* Pricing pill lives in the drawer on phones */
    [data-hv-navwrap] nav > a:first-child, [data-hv-navwrap] nav > div:first-child { margin-right: auto !important; }
    .hv-burger { display: flex !important; margin-left: 4px; }
    .hv-mobilemenu { z-index: 70; }
}
@media (max-width: 560px) {
    [data-hv-navwrap] { padding: 10px 12px 0 !important; }
    [data-hv-navwrap] nav { padding: 8px 10px !important; gap: 4px !important; }
    [data-hv-navwrap] nav > a.hvx7 { display: none !important; }          /* Start free search — it is inside the drawer */
    .hv-dd--account > a { padding: 8px 10px !important; }
}

/* ── Landing page grids collapse ──────────────────────────────────────── */
@media (max-width: 980px) {
    .hv-design [style*="grid-template-columns:1.04fr .96fr"],
    .hv-design [style*="grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)"],
    .hv-design [style*="grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)"],
    .hv-design [style*="grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)"],
    .hv-design [style*="grid-template-columns:1.05fr .95fr"],
    .hv-design [style*="grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr)"],
    .hv-design [style*="grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)"],
    .hv-design [style*="grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr)"] { grid-template-columns: minmax(0, 1fr) !important; }
    .hv-design [style*="grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr)"] { padding: 40px 20px 56px !important; gap: 36px !important; }
    .hv-design [style*="padding:0 32px 104px"] { padding: 0 20px 64px !important; }
    .hv-design [style*="border-radius:32px;padding:48px"] { padding: 28px 22px !important; }
    .hv-design [style*="border-radius:30px;padding:52px"] { padding: 32px 22px !important; }
    .hv-design [style*="grid-template-columns:1.04fr .96fr"] { padding: 40px 20px 64px !important; gap: 40px !important; }
    .hv-design section[style*="padding:0 32px 112px"] { padding: 0 20px 72px !important; }
    .hv-design [style*="padding:56px;display:grid"] { padding: 32px 22px !important; gap: 28px !important; }
    /* fixed-width copy blocks become fluid */
    .hv-design [style*="width:470px"], .hv-design [style*="width:440px"], .hv-design [style*="width:520px;text-wrap"],
    .hv-design [style*="width:420px"], .hv-design [style*="width:640px"], .hv-design [style*="width:620px"],
    .hv-design [style*="width:600px"], .hv-design [style*="width:400px"], .hv-design [style*="width:660px"] { width: auto !important; max-width: 100% !important; }
    .hv-design [style*="width:820px;height:820px"] { width: 520px !important; height: 520px !important; }
}
@media (max-width: 640px) {
    .hv-design [style*="grid-template-columns:repeat(2,1fr)"],
    .hv-design [style*="grid-template-columns:repeat(2,minmax(300px,1fr))"],
    .hv-design [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
    .hv-design h1 { font-size: clamp(30px, 8.6vw, 38px) !important; }
    .hv-design h2 { font-size: clamp(24px, 6.8vw, 32px) !important; }
    .hv-design #search-container { padding: 18px !important; }
    .hv-design [style*="grid-template-columns:repeat(auto-fit,minmax(196px,1fr))"] { grid-template-columns: 1fr !important; }
    .hv-design [style*="grid-template-columns:repeat(auto-fit,minmax(272px,1fr))"],
    .hv-design [style*="grid-template-columns:repeat(auto-fit,minmax(238px,1fr))"] { grid-template-columns: 1fr !important; }
    .hv-design [style*="border-radius:36px"] { border-radius: 24px !important; }
    .hv-design [style*="font-size:clamp(34px,3.4vw,48px)"] { font-size: clamp(30px, 8.6vw, 38px) !important; }
}

/* ── Inner v4 pages: generic guards ───────────────────────────────────── */
@media (max-width: 640px) {
    .hv-design img, .hv-design video, .hv-design svg { max-width: 100%; }
    .hv-design pre, .hv-design table { max-width: 100%; overflow-x: auto; display: block; }
    .hv-design [style*="min-width:240px"] { min-width: 0 !important; }
}

/* 2026-09-14 phone pass: pill-shaped h1 eyebrows must not take the hero h1 size */
@media (max-width: 640px) {
    .hv-design h1.cs-card__eyebrow, .hv-design h1.ti-hero__eyebrow, .hv-design h1.hp-hero__eyebrow { font-size: 12px !important; }
}