/* ─────────────────────────────────────────────
   VERISafe V3 overrides
   Loaded AFTER verisafe-v2-font-upsize.css, only on
   the V3 template. Keep this file to genuine v3-only
   deltas so the shared v2 stylesheet stays untouched.
   ───────────────────────────────────────────── */

/* The v3 "Most businesses hire blindly…" problem headline is much
   longer than the old copy. .vs-pain-head-left ships flex-shrink:0
   with no width cap, so the long heading lays out on one line and
   overflows the viewport. Let the column shrink and wrap. */
.vs-pain-head-left {
  flex-shrink: 1;
  min-width: 0;
}

.vs-pain-heading {
  overflow-wrap: break-word;
}

/* Size the hero so it fills exactly one viewport minus the sticky nav,
   so scrolling down lands right on the 2nd section (Industry Reports) —
   same behaviour as the landing page. Rather than hardcode the nav
   height per breakpoint, verisafe-v3.js measures the real nav height and
   sets --vs-nav-h, so this stays exact at ANY screen size / on resize.
   100dvh keeps it correct with mobile browser chrome; the 110px fallback
   covers the brief moment before the script runs. */
.hero-and-ticker {
  min-height: calc(100dvh - var(--vs-nav-h, 110px));
}