/* ---------------------------------------------------------------------------
   v2 responsive corrections.

   site.css and site.js are kept byte-identical to the design bundle so a new
   drop can be re-copied without losing work. Anything we change lives here and
   is loaded after them, with a note saying why.
   --------------------------------------------------------------------------- */

/* Nav overflow below ~560px.
   The bundle hides ".nav-r .btn-o" (Start free trial) under 760px, but brand +
   Sign in + Book a demo + the hamburger still measure ~444px, so the page
   scrolled sideways on a 375px phone. Sign in moves into the dropdown panel
   (see v2-fixes.js) rather than being dropped, so nothing becomes unreachable. */
@media (max-width: 560px) {
  .nav-r .btn-g { display: none; }
  .nav-r { gap: 7px; }
  .nav-in { padding-left: 16px; padding-right: 16px; }
  .brand { font-size: 17px; }
}

/* Very narrow phones (≤380px): let the primary CTA shrink rather than clip. */
@media (max-width: 380px) {
  .nav-r .btn-sm { padding-left: 14px; padding-right: 14px; font-size: 13.5px; }
}

/* Auth links appended to the mobile dropdown by v2-fixes.js. Styled to match
   the panel's existing .nav-l anchors, with a rule above the first one. */
.nav-l .nav-auth-m { display: none; }
@media (max-width: 560px) {
  .nav-l .nav-auth-m { display: block; }
  .nav-l .nav-auth-m.first { margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(36, 23, 38, .14); }
  .nav-l .nav-auth-m.cta { color: var(--pri-d); font-weight: 600; }
}

/* Marquee bands: the ticker is intentionally wider than the viewport, but the
   band around it must clip rather than extend the document. */
.mq { overflow: hidden; }

/* Belt and braces: nothing in the v2 site should scroll the page sideways. */
html, body { overflow-x: hidden; }

/* Validation feedback.
   The bundle has no error styling at all because its forms were non-functional
   prototypes (site.js intercepted submit and wrote a fake confirmation). These
   are built from the existing tokens only — raspberry for the error state, the
   mono caption voice, and the same 1.5px ink border + hard offset shadow the
   cards use — so real Laravel validation looks native to the design. */
.fielderr { margin-top: 6px; font: 600 12.5px/1.45 'Geist Mono', monospace; color: var(--pri-d); }
.cform input[aria-invalid="true"],
.cform select[aria-invalid="true"] { border-color: var(--pri-d); box-shadow: 3px 3px 0 var(--pri-s); }

.authnote { margin: 0 0 18px; padding: 12px 15px; border: 1.5px solid var(--ink); border-radius: 14px; font: 500 14px/1.55 'Geist', sans-serif; background: var(--card); }
.authnote.bad { background: var(--pri-s); box-shadow: 3px 3px 0 var(--pri-d); }
.authnote.good { background: var(--yel-s); box-shadow: 3px 3px 0 var(--yel); }
.authnote ul { margin: 6px 0 0; padding-left: 18px; }

/* Phone combo (dial code + national number) for the login OTP panel.
   The design has no compound input for this — its own phone field is a
   single free-text box (`type="tel"`, no explicit country picker). A dial
   code needs one, so this reuses the design's real .field/.inp tokens rather
   than inventing a class that doesn't exist elsewhere (an earlier draft used
   ".inp-group", which is not a real class in this system and rendered the
   select and input stacked instead of side by side). */
.phone-combo { display: flex; gap: 0; border: 1.5px solid var(--ink); border-radius: 14px; overflow: hidden; background: var(--card); }
.phone-combo:focus-within { border-color: var(--pri); box-shadow: 3px 3px 0 var(--yel); }
.phone-combo select { flex: 0 0 auto; width: auto; max-width: 92px; border: none; border-right: 1.5px solid var(--line); border-radius: 0; background: transparent; font: 600 15px/1 'Geist', sans-serif; padding: 0 8px; }
.phone-combo input { flex: 1 1 auto; min-width: 0; border: none; border-radius: 0; }
.phone-combo select:focus, .phone-combo input:focus { outline: none; box-shadow: none; border-color: transparent; }

/* ── product screenshots in the browser-frame mockups ──
   .shot-i was a striped placeholder with a centred caption. A real shot fills it
   edge to edge; the frame already clips, and the captures are 16:10 so nothing
   is cropped. The striped fill stays for the frames still awaiting a shot. */
.shot-i:has(img) { background: none; }
.shot-i img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }