/* SoloChief Homepage V2 — Phase 1 motion foundation.
   Isolated stylesheet. All selectors are prefixed hv2- to avoid
   any collision with the production homepage (index.html) or
   styles/tokens.css, neither of which this file touches or imports. */

:root {
  --hv2-bg: #0F1B2D;
  --hv2-deep: #0B1422;
  --hv2-panel: #1A273A;
  --hv2-panelhi: #1E2D43;
  --hv2-muted: #94A3B8;
  --hv2-line: #1E293B;
  --hv2-teal: #00C2A8;
  --hv2-tealh: #00A892;
  --hv2-text: #F0F4F8;

  /* One shared corner-radius family for every panel in a page's closing
     stack (sliding cover panels, the Homepage footer, and the combined
     Features/Pricing/FAQ closing footer) — so the whole sequence reads
     as one rounded-card system rather than some panels rounded and
     others square. Same clamp already used by .hv2-cover-panel/
     .hv2-fx-cover-panel; centralised here so .hv2-footer and .hv2-closing
     can reference the identical value instead of carrying their own
     copies that can drift out of sync. */
  --hv2-shell-radius: clamp(1.5rem, 3vw, 2.5rem);

  --hv2-duration: 600ms;
  --hv2-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hv2-stagger-step: 90ms;

  /* Page-scoped light-theme tokens — no global/user-facing theme toggle.
     Applied only via the .hv2-light-section utility (see FEATURES PAGE
     REBUILD block below), which re-points the same hv2-bg/-panel/-muted/
     -line/-text/-teal variables every existing component already reads,
     so light sections re-theme automatically with no per-component work. */
  --hv2-light-bg: #F7F3EC;
  --hv2-light-surface: #FFFFFF;
  --hv2-light-surface-alt: #ECF1F5;
  --hv2-light-text: #0F1B2D;
  --hv2-light-muted: #47536A;
  --hv2-light-border: #D9E0E8;
  --hv2-light-accent: #0F766E;
  --hv2-light-accent-hover: #0B5D57;
}

.hv2-root {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--hv2-bg);
  color: var(--hv2-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hv2-root * { box-sizing: border-box; }

.hv2-root img { max-width: 100%; display: block; }

.hv2-root a:focus-visible,
.hv2-root button:focus-visible {
  outline: 2px solid var(--hv2-teal);
  outline-offset: 2px;
  border-radius: 2px;
}

.hv2-container {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

@media (min-width: 640px) {
  .hv2-container { padding: 0 1.5rem; }
}

/* ---------- Navigation ---------- */

.hv2-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-bottom: 1px solid var(--hv2-line);
  background: rgba(15, 27, 45, 0.92);
  backdrop-filter: blur(8px);
}

.hv2-nav {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 640px) {
  .hv2-nav { padding: 0 1.5rem; }
}

.hv2-logo {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--hv2-teal);
  text-decoration: none;
}

.hv2-badge {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hv2-muted);
  border: 1px solid var(--hv2-line);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  margin-left: 0.6rem;
}

.hv2-nav-links {
  display: none;
  align-items: center;
  gap: 2rem;
}

@media (min-width: 768px) {
  .hv2-nav-links { display: flex; }
}

.hv2-nav-link {
  font-size: 0.875rem;
  color: var(--hv2-muted);
  text-decoration: none;
  transition: color 160ms ease;
}

.hv2-nav-link:hover { color: #fff; }

.hv2-nav-cta {
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--hv2-teal);
  color: var(--hv2-bg);
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  text-decoration: none;
  transition: background 160ms ease;
}

.hv2-nav-cta:hover { background: var(--hv2-tealh); }

.hv2-menu-btn {
  display: inline-flex;
  background: none;
  border: none;
  color: #fff;
  padding: 0.25rem;
  cursor: pointer;
}

@media (min-width: 768px) {
  .hv2-menu-btn { display: none; }
}

.hv2-mobile-menu {
  display: none;
  border-top: 1px solid var(--hv2-line);
  padding: 1rem 1.25rem;
  background: rgba(11, 20, 34, 0.98);
}

.hv2-mobile-menu.hv2-menu-open { display: block; }

@media (min-width: 768px) {
  .hv2-mobile-menu { display: none !important; }
}

.hv2-mobile-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.6rem 0;
  font-size: 0.875rem;
  color: var(--hv2-muted);
  text-decoration: none;
}

.hv2-mobile-menu a:hover { color: #fff; }

/* ---------- Hero ---------- */
/* Hero, Film, How It Works and the paired chapters are distinct sibling
   panels — NOT merged into one continuous section. Hero sits at ~68svh
   on desktop (a floor, not a fixed height — content that needs more room
   simply pushes it taller, so nothing is ever clipped) specifically so
   Film's rounded top edge is already visible on the first screen, making
   the "next panel rises and covers" sequence obvious from the start. */

.hv2-hero {
  position: relative;
  z-index: 1;
  min-height: 68vh;
  min-height: 68svh;
  display: flex;
  flex-direction: column;
  /* Top-weighted, not vertically centred: the min-height above is a floor
     (so Film's rounded top edge still peeks in on the first screen at
     tall viewports), but the content itself should sit near the top of
     that floor rather than drift toward the middle of empty vertical
     space — completes the same nav-clearance fix already applied to
     .hv2-hero-inner's align-items below. */
  justify-content: flex-start;
  padding: 5.5rem 0 4.5rem;
  background:
    radial-gradient(65% 55% at 78% 12%, rgba(0, 194, 168, 0.09), transparent 60%),
    var(--hv2-deep);
  /* Desktop override below adds nav-clearance breathing room — the
     align-items fix above dropped the nav-to-eyebrow gap to 39px
     (measured), under the 80-120px target, since padding-top alone
     was doing all the positioning once centering was removed. */
  /* overflow-x alone (without a matching overflow-y) computes overflow-y
     to `auto` per the CSS Overflow spec's axis-pairing rule, silently
     creating a nested scroll container. Both axes explicit avoids it. */
  overflow: hidden;
}

@media (min-width: 1024px) {
  .hv2-hero { padding-top: 9.5rem; }
}

.hv2-hero-inner { width: 100%; }

/* Faint structural grid + bottom fade so the panel that rises over the
   hero on scroll never reads as an abrupt colour cut. */
.hv2-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(240, 244, 248, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 244, 248, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(75% 60% at 50% 20%, #000 40%, transparent 85%);
  pointer-events: none;
}

.hv2-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  background: linear-gradient(to bottom, transparent, var(--hv2-panel));
  pointer-events: none;
}

.hv2-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3.5rem;
  /* Was align-items: center — the copy column (eyebrow/H1/lede/CTAs)
     is shorter than the phone-image column, so centering pulled the
     eyebrow ~120px down from the row's actual top edge (measured:
     146px nav-to-eyebrow gap at 1440x900, well past the ~80-120px
     target). Both columns now align to the top of the row instead. */
  align-items: start;
}

@media (min-width: 1024px) {
  /* 0.85fr (was 0.74fr): the copy column needs enough width for "for
     Agency Owners." on one line at the h1's clamped max font-size — a
     narrower ratio wraps that phrase mid-word. */
  .hv2-hero-inner { grid-template-columns: 0.85fr 1fr; gap: 2.5rem; }
}

.hv2-hero-copy { min-width: 0; }

.hv2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hv2-teal);
  border: 1px solid var(--hv2-line);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  margin-bottom: 1.5rem;
}

.hv2-h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.35rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}

.hv2-h1-line { display: block; }

/* "Chief of Staff" must never break across lines — hold it on one
   line at any width that can fit it; below ~420px there is no room
   left to keep that promise without causing horizontal overflow, so
   it falls back to normal wrapping there. */
.hv2-h1-line--tight { white-space: nowrap; }

@media (max-width: 420px) {
  .hv2-h1-line--tight { white-space: normal; }
}

.hv2-h1 .hv2-accent { color: var(--hv2-teal); }

/* Hero role rotation — "Your personal Chief of Staff for [Founders /
   Operators / Managers / Agency Owners / Executives]." A character-by-
   character typewriter effect (JS types the word in, holds, deletes it,
   then types the next) rather than a cross-fade — the width is
   *supposed* to change continuously as it types/deletes, so no
   min-width reservation here (that was for the old cross-fade, where a
   fixed slot stopped the line jumping when swapping whole words at
   once). The blinking caret is a separate sibling span so deleting the
   word's own text never touches it. */
.hv2-role-word {
  display: inline-block;
}

.hv2-role-word-caret {
  display: inline-block;
  margin-left: 0.05em;
  animation: hv2CaretBlink 1s step-end infinite;
}

@keyframes hv2CaretBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hv2-role-word-caret { animation: none; opacity: 0; }
}

.hv2-hero-kicker {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--hv2-text);
  margin: 0 0 0.85rem;
}

.hv2-lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--hv2-muted);
  max-width: 30rem;
  margin: 0 0 2rem;
}

.hv2-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.hv2-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.75rem 1.4rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease, border-color 160ms ease;
}

.hv2-btn-primary {
  background: var(--hv2-teal);
  color: var(--hv2-bg);
}

.hv2-btn-primary:hover { background: var(--hv2-tealh); }

.hv2-btn-secondary {
  background: transparent;
  color: var(--hv2-text);
  border: 1px solid var(--hv2-line);
}

.hv2-btn-secondary:hover { border-color: var(--hv2-teal); color: var(--hv2-teal); }

.hv2-hero-support {
  font-size: 0.8125rem;
  color: var(--hv2-muted);
  margin: 0;
}

/* ---------- Hero product scene: genuine product imagery only ----------
   "Command Center on the web. Pocket Chief in WhatsApp." — one real Web
   Command Center screenshot (Weekly Plan) as the primary visual, with the
   real WhatsApp phone photo placed partially in front, lower-right. Both
   images are genuine SoloChief product screenshots — no hand-built
   dashboard cards, no fabricated chat bubbles, no invented UI. */

.hv2-hero-scene { position: relative; }

.hv2-scene {
  position: relative;
  padding: 0.5rem 0 3.5rem;
}

.hv2-scene-glow {
  position: absolute;
  top: -10%;
  right: -10%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(0, 194, 168, 0.16), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

.hv2-scene--product {
  position: relative;
  z-index: 1;
  max-width: 30rem;
  margin: 0 auto;
}

/* .hv2-root img (base reset, specificity 0,1,1) outranks a single class
   selector (0,1,0) — the two-class .hv2-hero-scene descendant selectors
   below are required to actually win, not decorative. */

/* Web Command Center screenshot — the primary visual. Real screenshot,
   real aspect ratio (1800x1227) preserved via height:auto; no stretching,
   no cropping, no fake browser chrome. */
.hv2-hero-scene .hv2-scene-web-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  border: 1px solid var(--hv2-line);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.55);
}

/* Real WhatsApp phone photo — placed partially in front of the web
   screenshot's lower-right corner, its own real aspect ratio (1024x1536)
   preserved via height:auto. */
.hv2-hero-scene .hv2-scene-phone-img {
  position: absolute;
  z-index: 2;
  right: -1rem;
  bottom: -1.75rem;
  width: 34%;
  max-width: 9.5rem;
  height: auto;
  filter: drop-shadow(0 25px 45px rgba(0, 0, 0, 0.45));
}

@media (min-width: 1024px) {
  .hv2-scene--product { max-width: 32rem; }
  .hv2-hero-scene .hv2-scene-phone-img { max-width: 10.5rem; }
}

/* Scroll cue */

/* Pinned to the very bottom of the hero, centred, sitting just above the
   film panel's rounded edge — independent of how tall the hero copy/scene
   content is, so it always reads as "scroll past here" rather than
   floating somewhere mid-content. */
.hv2-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  font-size: 0.75rem;
  color: var(--hv2-muted);
  text-decoration: none;
  transition: color 160ms ease;
}

.hv2-scroll-cue:hover { color: var(--hv2-text); }

.hv2-scroll-cue-icon { display: inline-block; }

/* ---------- Hero entrance motion sequence ----------
   Baseline state (no attribute / no JS / reduced motion) is the final,
   fully visible composition — see <requirement: content must not wait
   on JavaScript classes>. The animated sequence is an enhancement only. */

@media (prefers-reduced-motion: no-preference) {
  html[data-hv2-hero-motion="ready"] .hv2-hero-copy > * {
    animation: hv2HeroFadeUp 700ms var(--hv2-ease) both;
  }
  html[data-hv2-hero-motion="ready"] .hv2-hero-copy > *:nth-child(1) { animation-delay: 0ms; }
  html[data-hv2-hero-motion="ready"] .hv2-hero-copy > *:nth-child(2) { animation-delay: 90ms; }
  html[data-hv2-hero-motion="ready"] .hv2-hero-copy > *:nth-child(3) { animation-delay: 180ms; }
  html[data-hv2-hero-motion="ready"] .hv2-hero-copy > *:nth-child(4) { animation-delay: 260ms; }
  html[data-hv2-hero-motion="ready"] .hv2-hero-copy > *:nth-child(5) { animation-delay: 330ms; }

  html[data-hv2-hero-motion="ready"] .hv2-scene-web-img {
    animation: hv2SceneEnter 800ms var(--hv2-ease) both;
    animation-delay: 200ms;
  }

  html[data-hv2-hero-motion="ready"] .hv2-scene-phone-img {
    animation: hv2PhoneEnter 750ms var(--hv2-ease) both;
    animation-delay: 420ms;
  }

  /* Settled idle state: one barely perceptible ambient movement, stops under reduced motion */
  html[data-hv2-hero-motion="ready"] .hv2-scene-glow {
    animation: hv2Breathe 6s ease-in-out 1.8s infinite;
  }

  html[data-hv2-hero-motion="ready"] .hv2-scroll-cue-icon {
    animation: hv2ChevronFloat 2.4s ease-in-out 1.4s infinite;
  }
}

@keyframes hv2HeroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes hv2SceneEnter {
  from { opacity: 0; transform: translateY(26px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes hv2PhoneEnter {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes hv2Breathe {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

@keyframes hv2ChevronFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ---------- Tablet: scene scales down, both surfaces still visible ---------- */

@media (min-width: 768px) and (max-width: 1023px) {
  .hv2-scene { padding-bottom: 2.5rem; }
  .hv2-scene--product { max-width: 26rem; }
}

/* ---------- Mobile: copy first, scene stacks below, no overlap issues ---------- */

@media (max-width: 767px) {
  .hv2-hero { padding-top: 7rem; }

  .hv2-scene { padding: 0; }

  .hv2-scene-glow { display: none; }

  .hv2-scene--product { max-width: 21rem; margin: 0 auto; }

  .hv2-hero-scene .hv2-scene-phone-img { right: -0.5rem; bottom: -1rem; max-width: 7.5rem; }
}

/* ---------- Film section: a distinct cover-slide panel ----------
   Film is a real .hv2-cover-panel (see the shared cover-panel rules
   further down this file) — sticky, rounded top edge, its own z-index.
   Its surface uses --hv2-panelhi (a step lighter than --hv2-panel, and
   well clear of the hero's --hv2-deep) plus a restrained top border so
   the rounded edge reads clearly as the next sheet while it slides over
   the hero — no neon, no hue shift, still the same SoloChief palette. */

.hv2-film {
  position: relative;
  background: var(--hv2-panelhi);
  border-top: 1px solid rgba(240, 244, 248, 0.08);
  padding: 6rem 0 2.25rem;
  overflow: hidden;
}

.hv2-film-bg-word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(6rem, 18vw, 15rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  color: rgba(240, 244, 248, 0.035);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

.hv2-film-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.25rem;
  justify-items: center;
  text-align: center;
}

.hv2-film-copy { max-width: 38rem; }

.hv2-film-title {
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
}

.hv2-film-lede {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--hv2-muted);
  margin: 0;
}

.hv2-film-stage {
  position: relative;
  width: 100%;
}

@media (min-width: 1024px) {
  .hv2-film-stage { max-width: min(88%, 1200px); margin: 0 auto; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hv2-film-stage { max-width: 90%; margin: 0 auto; }
}

/* Wrap shrink-wraps to the video's own letterboxed size (see .hv2-film-video
   below) so the frame/border/shadow always hugs the real 16:9 box rather
   than leaving dead space when the video is height-constrained. */
.hv2-film-video-wrap {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--hv2-line);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.65);
  background: var(--hv2-deep);
}

/* Replaced-element letterbox sizing: width/height auto + max-width/max-height
   together always preserve the video's intrinsic 16:9 ratio and never crop
   it, unlike a fixed-aspect-ratio box with object-fit:cover. The height
   cap is intentionally generous (85vh, not ~46vh) — width (.hv2-film-stage
   above) is meant to be the dominant constraint now that the film panel
   uses min-height rather than a fixed height, so content driving the
   panel taller is safe: nothing here can ever crop the video. */
.hv2-film-video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  background: var(--hv2-deep);
}

@media (min-width: 768px) {
  .hv2-film-video {
    max-height: 85vh;
    max-height: 85svh;
  }
}

.hv2-film-sound-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.65rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--hv2-line);
  background: var(--hv2-panelhi);
  color: var(--hv2-text);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}

.hv2-film-sound-btn:hover,
.hv2-film-sound-btn[aria-pressed="true"] {
  border-color: var(--hv2-teal);
  color: var(--hv2-teal);
}

.hv2-film-next {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0;
  font-size: 0.8125rem;
  color: var(--hv2-muted);
  text-decoration: none;
  transition: color 160ms ease;
}

.hv2-film-next:hover { color: var(--hv2-text); }

@media (max-width: 767px) {
  .hv2-film { padding: 4rem 0 2rem; }
  .hv2-film-bg-word { font-size: 5rem; }
}

/* ---------- How It Works: concise bridge between film and story chapters ---------- */

.hv2-hiw {
  position: relative;
  background: var(--hv2-panel);
  padding: 3.75rem 0 4rem;
}

/* Desktop: HIW's content (~430px) is far shorter than the shared
   min-height floor it still rides (that floor can't change here — same
   nested-centering cancellation as PLAN/FOCUS applies), so the leftover
   space is pushed almost entirely below the content instead of split
   evenly above and below it. PLAN slides up and covers that trailing
   space next, exactly like PLAN's own bottom padding is covered by
   FOCUS — it is never seen as a static gap. This brings the header
   noticeably closer to the top of the panel. */
@media (min-width: 1024px) {
  .hv2-cover-panel--hiw { padding: 1rem 0 14.5rem; }
}

.hv2-hiw-inner {
  display: grid;
  gap: 2.75rem;
}

.hv2-hiw-header {
  max-width: 38rem;
  margin: 0 auto;
  text-align: center;
}

.hv2-hiw-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 1rem 0;
}

.hv2-hiw-lede {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--hv2-muted);
  margin: 0;
}

.hv2-hiw-sequence {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.hv2-hiw-line {
  position: absolute;
  top: 1.375rem;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--hv2-line), var(--hv2-teal), var(--hv2-line));
  z-index: 0;
  transform-origin: left;
}

.hv2-hiw-step {
  position: relative;
  z-index: 1;
}

.hv2-hiw-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--hv2-panelhi);
  border: 1px solid var(--hv2-line);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--hv2-teal);
  margin-bottom: 1rem;
}

.hv2-hiw-step-title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}

.hv2-hiw-step-copy {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--hv2-muted);
  margin: 0;
  max-width: 20rem;
}

/* Connecting-line progressive fill — desktop: left-to-right */
@media (min-width: 768px) {
  .hv2-hiw-line.hv2-reveal {
    transform: scaleX(0);
    transform-origin: left;
    transition: opacity var(--hv2-duration) var(--hv2-ease), transform 900ms var(--hv2-ease);
  }
  .hv2-hiw-line.hv2-reveal.hv2-is-visible { transform: scaleX(1); }
}

@media (max-width: 767px) {
  .hv2-hiw-sequence { grid-template-columns: 1fr; gap: 2.25rem; }

  .hv2-hiw-line {
    top: 0;
    bottom: 0;
    left: 1.375rem;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--hv2-line), var(--hv2-teal), var(--hv2-line));
  }

  .hv2-hiw-step { padding-left: 3.75rem; }

  .hv2-hiw-step-number { position: absolute; left: 0; top: 0; margin-bottom: 0; }

  /* Connecting-line progressive fill — mobile: top-to-bottom */
  .hv2-hiw-line.hv2-reveal {
    transform: scaleY(0);
    transform-origin: top;
    transition: opacity var(--hv2-duration) var(--hv2-ease), transform 900ms var(--hv2-ease);
  }
  .hv2-hiw-line.hv2-reveal.hv2-is-visible { transform: scaleY(1); }
}

/* Reduced motion: the line is fully drawn immediately, on any breakpoint —
   declared after the breakpoint rules above so it wins on source order
   at equal specificity when both conditions are true simultaneously. */
@media (prefers-reduced-motion: reduce) {
  .hv2-hiw-line.hv2-reveal { transform: none; transition: none; }
}

/* ---------- Direct sticky cover panels ----------
   Film, How It Works, and the three paired story chapters all share the
   exact same cover-panel mechanism, in that order, so the whole sequence
   reads as one consistent rhythm — every panel rises, briefly settles
   while covering the one before it, then gives way to the next. Hero is
   the only panel that isn't a cover panel; it's the fixed starting point
   everything else rises over.

   Each cover panel is its own sticky element directly in document flow —
   no outer "hold" shell, no separate sticky-inner wrapper, so there is no
   dead scroll time before the next one starts visibly rising over the last.

   Desktop/tablet: a -80px top offset with a matching oversized min-height
   keeps the panel in continuous upward motion right up to settling,
   rather than snapping into a fully-pinned static state.

   Mobile: the same cover-slide mechanic stays ON (SoloChief is mobile-
   first — this is not something to fall back away from) but scaled down:
   a much smaller offset, smaller rounded corners, and — critically —
   content-driven height instead of a forced 100svh+ box, so real content
   (paragraphs, later real product captures) is never compressed or
   clipped to fit an artificial fixed-height panel. */

/* ROOT-CAUSE FIX (matches the identical bug found and fixed on the
   Features page): a position:sticky element's containing block — the
   box that bounds how long it can stay pinned — is its nearest
   ancestor. When the <section> itself was the sticky element, that
   ancestor was <main>, which wraps the entire page, so FOCUS (and
   Film/HowItWorks/Plan before it) could in principle stay pinned for
   the rest of the document. This was invisible for Film/HowItWorks/
   Plan because the next sticky panel (higher z-index) always painted
   over the still-pinned one before the bug became visible — but FOCUS
   is last, so nothing masked it: confirmed live via elementFromPoint()
   that a point over Pricing kept resolving to the Plan panel long
   after Pricing had visually scrolled far past that screen position.
   Each panel's <section> is now a plain, non-sticky SHELL
   (.hv2-cover-shell) that just wraps its content; the sticky, rounded,
   shadowed panel itself is this inner div, one level down, so its
   containing block is now bounded to its own shell's height instead
   of the whole document. */
/* =====================================================================
   SHARED COVER-SLIDE MOTION SYSTEM (sc-cover-*)
   ONE authoritative sticky/motion contract for every full-viewport
   sliding panel on every V2 page (Homepage, Features, FAQ, Pricing).
   Previously Homepage (.hv2-cover-shell/-panel) and Features
   (.hv2-fx-cover-shell/-panel) each carried their own, separately
   tuned copy of this mechanism. They are merged here into one rule
   set — .hv2-cover-shell/-panel and .hv2-fx-cover-shell/-panel are
   now aliases of .sc-cover-shell/-panel (same selector list, same
   declarations), not a second competing implementation. New content
   (Homepage's Pricing/Trust/FAQ/Final CTA panels, Features' Final CTA
   panel, and the new FAQ and Pricing pages) uses .sc-cover-shell/
   -panel directly. Page-specific classes (hv2-cover-panel--film,
   hv2-fx-cover-panel--overview, etc.) now provide ONLY background,
   z-index and padding — never position/top/min-height/overflow/width/
   border-radius/shadow, which live here exactly once. */
:root {
  /* .hv2-header is position:fixed, height 65px, z-index:100 — measured
     live, not assumed. Panels settle at top:0, behind it; this value
     is added into each panel's own padding-top for content clearance. */
  --hv2-nav-height: 65px;
  /* PANEL TRAVEL, not a decorative overlap. The required runway is NOT
     "one viewport" — it is the OUTGOING panel's own rendered height:
     at the instant the outgoing panel first becomes stuck (top:0), the
     incoming panel's natural (pre-sticky) position is exactly at
     (outgoing panel's own height) below the viewport top — not at the
     viewport bottom. If the outgoing panel is taller than the runway
     (its own height often exceeds the 100svh floor once real content,
     nav-clearance padding and copy are accounted for — measured live:
     Film renders at 1138px, not 900px, at a 900px-tall viewport), the
     incoming panel starts further down than one viewport's worth of
     runway can cover, and is still short of top:0 when the runway (and
     therefore the outgoing panel's pinned window) runs out. This was
     confirmed directly: with travel=100svh (900px), Film→HowItWorks
     left HowItWorks at top:238px when Film released — a ~240px
     deficit, matching Film's own 1138px height minus the 900px
     provided almost exactly (238px vs 1138-900=238px predicted).
     --sc-cover-travel must exceed the tallest panel's own rendered
     height, with margin: 100svh + 15rem covers every panel measured
     across all four pages (900-1138px).

     A panel taller than the viewport (e.g. Homepage's FAQ Preview
     previously rendered at 1851px — a genuine content-length problem,
     not a runway-sizing one) creates a DIFFERENT failure once it
     releases: an oversized box needs that same oversized distance of
     scroll to fully clear the viewport, and if the document runs out
     of scroll room first, the box (and anything painted via it) stays
     visible over whatever comes after it — including the footer. A
     larger --sc-cover-travel-long for that one shell's OWN runway does
     NOT fix this: it only changes how long the panel stays pinned
     before releasing, not how far it must travel once released. The
     actual fix was shrinking that panel's content back down near the
     900-1138px range every other panel uses — done in the HTML, not
     here. Do not reach for a second travel constant to paper over an
     oversized panel; fix the content. */
  --sc-cover-travel: calc(100svh + 15rem);
  /* The shell immediately BEFORE a --final shell (the "penultimate"
     shell) needs a DIFFERENT, tighter runway than --sc-cover-travel.
     A final panel has a short, bounded lifecycle of its own (rise to
     top:0, dwell briefly, release into the footer — roughly one
     viewport + --sc-cover-final-dwell, ~960px). If the penultimate
     shell's runway (its own stuck-window length) is LONGER than that
     total, the final panel finishes its entire rise-dwell-release
     cycle and scrolls away WHILE the penultimate panel is still
     technically pinned underneath (position:sticky doesn't care what
     happens to elements after it) — confirmed live: with the generic
     --sc-cover-travel (~1140px) on FAQ Preview's shell, Final CTA
     released at ~960px into the handoff, but FAQ Preview remained
     stuck until 1140px, so for that ~180px gap FAQ Preview became the
     topmost visible content again as Final CTA's shrinking box
     uncovered it — read as "FAQ reappearing after Final CTA". Sized
     to final panel height (~900px) + final dwell (~63px) + a small
     margin, not copied from the generic value.

     UPDATED: the final panel (Homepage's Final CTA, and Features'
     equivalent) no longer forces the 100svh floor — both now use
     min-height: 0 so a short CTA doesn't leave a huge empty gap below
     it (a separate fix). That shrank the final panel's own shell to
     roughly 560px (content + final dwell), so this value must shrink
     to match or the exact bug described above reappears the other way:
     the final panel finishes its whole rise-dwell-release cycle in
     ~560px while this value still reserves ~972px, so for that
     remaining ~400px the penultimate panel (FAQ Preview / Demo) is
     still technically pinned and reappears on top of the Footer.
     Fixed value, not vh-based, since the final panel's height is now
     content-driven rather than viewport-driven. Re-tuned alongside the
     --sc-cover-final-dwell reduction below — shrinking the dwell shrinks
     the final shell's own total height by the same amount, so this must
     shrink in step or the release-timing bug above reappears. */
  --sc-cover-travel-penultimate: 33.5rem;
  --sc-cover-edge-overlap: clamp(2rem, 5vh, 4rem);
  --sc-cover-hero-overlap: clamp(2.5rem, 6vh, 4.5rem);
  /* Trailing space after the final panel, before the Footer — was
     clamp(3rem, 7vh, 5.5rem) (~63px at 900px viewport), which read as a
     visible dead band of body-background colour between the Final CTA
     card and the Footer. Fixed, smaller value keeps enough runway for
     the sticky Final CTA to release cleanly (see --sc-cover-travel-
     penultimate above, re-tuned to match) while landing the visible gap
     in Frank's requested ~16-32px range. */
  --sc-cover-final-dwell: 1.5rem;
}

.sc-cover-stack { position: relative; }

.sc-cover-shell,
.hv2-cover-shell,
.hv2-fx-cover-shell {
  position: relative;
}

/* A position:sticky element's containing block is its nearest ancestor
   — making the <section> itself the sticky element let a panel stay
   pinned for the rest of the document (confirmed live via
   elementFromPoint: a point over content two sections later still
   resolved to an earlier "released" panel). Each shell is a plain,
   non-sticky wrapper; the sticky panel is the inner div, one level
   down, bounding its containing block to just this shell.

   The ::after runway + matching negative margin-top on the next shell
   is a second, independently-confirmed engine quirk: a sticky element
   does not register a stuck range at all when it is the sole real
   child of its containing block (tested directly with constructed DOM
   elements). A real sibling with height fixes the clamp; pulling the
   next shell up by the identical amount makes the incoming panel
   actually occupy that range instead of leaving it empty — this is
   what makes the incoming panel's rise continuous rather than a jump
   after a blank hold. --sc-cover-travel is that one shared value: the
   runway height and the incoming pull-up must always match, and both
   must be close to a full viewport so the incoming panel's rise is a
   COMPLETE bottom-to-top journey, not a partial peek. .sc-cover-shell
   --long is an explicit alias for the same rule (long panels — Features
   Catalogue, FAQ categories, Pricing comparison — already get a taller
   shell for free, since shell height = their own content height + this
   same fixed travel runway; the modifier exists for readability at the
   call site, not because the mechanism differs). */
@media (min-width: 1024px) {
  .sc-cover-shell:not(.sc-cover-shell--final)::after,
  .sc-cover-shell--long:not(.sc-cover-shell--final)::after,
  .hv2-cover-shell:not(.hv2-cover-shell--final)::after,
  .hv2-fx-cover-shell:not(.hv2-fx-cover-shell--final)::after {
    content: '';
    display: block;
    height: var(--sc-cover-travel);
  }

  .sc-cover-shell--final::after,
  .hv2-cover-shell--final::after,
  .hv2-fx-cover-shell--final::after {
    content: '';
    display: block;
    height: var(--sc-cover-final-dwell);
  }

  .sc-cover-shell + .sc-cover-shell,
  .hv2-cover-shell + .hv2-cover-shell,
  .hv2-fx-cover-shell + .hv2-fx-cover-shell {
    margin-top: calc(-1 * var(--sc-cover-travel));
  }

  /* First cover shell after the Hero: a smaller head-start overlap so
     the rise feels immediate without visibly intruding on Hero's own
     copy before Hero has finished (measured previously: the full
     overlap value here cut into still-visible Hero content). */
  .sc-cover-shell--first,
  .hv2-hero + .hv2-cover-shell,
  .hv2-fx-hero + .hv2-fx-cover-shell {
    margin-top: calc(-1 * var(--sc-cover-hero-overlap));
  }

}

.sc-cover-panel,
.hv2-cover-panel,
.hv2-fx-cover-panel {
  /* Mobile-first: plain flow, no sticky, no viewport-height locking.
     The full-surface cover behaviour (sticky + min-height floor) is
     opt-in only at the sliding breakpoint, below. */
  position: relative;
  width: 100%;
  border-radius: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) 0 0;
  border-top: 1px solid var(--hv2-line);
  box-shadow: 0 -40px 80px -28px rgba(0, 0, 0, 0.55);
}

.hv2-cover-panel,
.hv2-fx-cover-panel {
  display: flex;
  flex-direction: column;
  /* Was justify-content: center — with min-height:100svh (below) that
     vertically centred every panel's content inside a full-viewport
     box regardless of how short the content was, leaving equal dead
     space above and below (confirmed live: Features Operating System
     heading sat ~180px below its actual top padding at 1440x900).
     flex-start lets each panel's own padding-top (set per-panel below)
     do the positioning instead — content now sits where its padding
     places it, not re-centred afterward. Panels that want a
     deliberately centred moment set their own justify-content
     override (see .hv2-hiw below for the one place that still does). */
  justify-content: flex-start;
}

/* top: var(--hv2-nav-height) was mathematically wrong for "slide to the
   top of the viewport" — it means exactly "stop 65px short of the
   top", permanently. The panel SURFACE reaches top: 0; the fixed
   header (z-index: 100, above every panel's z-index 2-5) floats
   visually above it, not the other way around. Nav clearance for a
   panel's own content lives in that panel's own padding-top (added
   once, on top of its existing design spacing) — never in this offset.
   min-height is a FLOOR (100vh/100svh, no nav subtraction — subtracting
   it here would leave a gap at the panel's BOTTOM instead of its top):
   long content (Catalogue, FAQ categories, Pricing comparison) exceeds
   it and the panel grows to fit, which is what lets its sticky hold
   release only once all of that content has scrolled past. */
@media (min-width: 1024px) {
  .sc-cover-panel,
  .hv2-cover-panel,
  .hv2-fx-cover-panel {
    position: sticky;
    top: 0;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
  }
}

/* Features/FAQ/Pricing keep a wider breakpoint (1280px, not the usual
   1024px): their long Catalogue/category/comparison panels can exceed
   the viewport by enough at 1024-1279 that a sticky hold there reads
   as a scroll freeze (measured directly for Features' Catalogue).
   Revert those pages' shells/panels to normal flow in that one band —
   applied per-shell via this modifier, not a whole-page override, so
   it stays a single shared contract rather than a second system. Must
   come AFTER the >=1024px sticky-enable block above: both match in the
   1024-1279 range, and this one needs to win there. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .sc-cover-shell--wide::after,
  .hv2-fx-cover-shell:not(.hv2-fx-cover-shell--final)::after,
  .hv2-fx-cover-shell--final::after {
    content: none;
  }

  .sc-cover-shell--wide + .sc-cover-shell--wide,
  .hv2-fx-cover-shell + .hv2-fx-cover-shell {
    margin-top: 0;
  }

  .sc-cover-shell--wide.sc-cover-shell--first,
  .hv2-fx-hero + .hv2-fx-cover-shell {
    margin-top: 0;
  }

  .sc-cover-panel--wide,
  .hv2-fx-cover-panel {
    position: relative;
    top: auto;
    min-height: 0;
    overflow: visible;
    width: auto;
  }
}

/* The shell directly before a --final shell uses the tighter
   --sc-cover-travel-penultimate instead of the generic
   --sc-cover-travel — see the --root variable comment for why. Split
   into two breakpoint-matched blocks (not one shared >=1024px rule)
   because "wide" pages (Features/FAQ/Pricing, 1280px activation) must
   NOT re-enable this runway during the 1024-1279px band where the
   wide-disable block above already reverts them to normal flow — a
   single >=1024px rule would win over that disable by source order
   and silently re-activate sticky in that band. Each block only
   targets the class combination that actually occurs on that kind of
   page, so there is no cross-page conflict. */
@media (min-width: 1024px) {
  .sc-cover-shell--penultimate:not(.sc-cover-shell--wide)::after,
  .hv2-cover-shell.sc-cover-shell--penultimate::after {
    height: var(--sc-cover-travel-penultimate);
  }

  .sc-cover-shell--penultimate:not(.sc-cover-shell--wide) + .sc-cover-shell,
  .hv2-cover-shell.sc-cover-shell--penultimate + .hv2-cover-shell {
    margin-top: calc(-1 * var(--sc-cover-travel-penultimate));
  }
}

@media (min-width: 1280px) {
  .sc-cover-shell--wide.sc-cover-shell--penultimate::after,
  .hv2-fx-cover-shell.sc-cover-shell--penultimate::after {
    height: var(--sc-cover-travel-penultimate);
  }

  .sc-cover-shell--wide.sc-cover-shell--penultimate + .sc-cover-shell,
  .hv2-fx-cover-shell.sc-cover-shell--penultimate + .hv2-fx-cover-shell {
    margin-top: calc(-1 * var(--sc-cover-travel-penultimate));
  }
}

/* Film only: top-align its content instead of centering it. How It Works
   covers film from the bottom up as it rises, so content sitting near
   film's top edge (right under the rounded corner) stays reachable for
   the longest possible span of the transition — keeping the video and
   its controls usable, not covered mid-interaction. */
.hv2-film.hv2-cover-panel { justify-content: flex-start; }

/* Section-specific alignment modifiers — the shared base rule
   (.hv2-cover-panel { justify-content: flex-start }) is a sane default
   for panels with substantial content (Plan/Focus/Film), but Frank's
   review flagged that applying it to every panel left short content
   (How It Works, Pricing preview) sitting near the top of a still-
   100svh-tall box with a large empty field below. These panels get an
   explicit centred composition instead, scoped to just these classes —
   not a return to global centring. */
.hv2-cover-panel--hiw,
.hv2-cover-panel--pricing {
  justify-content: center;
}

.hv2-cover-panel--film { z-index: 2; }
.hv2-cover-panel--hiw { z-index: 3; }
.hv2-cover-panel--plan { background: var(--hv2-panel); z-index: 4; padding: 2.5rem 0; }
/* overflow: hidden crops the oversized .hv2-environment-word at this
   panel's own edge (the intended "partially cropped" treatment) — box-
   shadow is unaffected since it belongs to this same element, not a
   clipped descendant. */
.hv2-cover-panel--focus { background: #142338; z-index: 5; padding: 2.5rem 0; overflow: hidden; }
/* Pricing preview is now the LAST panel in the sticky stack — Trust,
   FAQ preview and Final CTA (below) left the sliding-panel system
   entirely, see the "closing block" comment above .hv2-cover-panel--
   trust. Its own visual size/centring is unchanged; only its shell's
   release runway changed (see .hv2-cover-shell--final on this panel's
   <section> in the HTML). */
.hv2-cover-panel--pricing { background: var(--hv2-deep); z-index: 6; padding: 2.5rem 0; }

@media (min-width: 1024px) {
  .hv2-cover-panel--plan,
  .hv2-cover-panel--focus {
    padding: 1rem 0 10rem;
  }

  .hv2-cover-panel--pricing {
    padding-bottom: 2.5rem;
  }

  .hv2-film.hv2-cover-panel { padding-top: calc(var(--hv2-nav-height) + 3.5rem); }
  .hv2-cover-panel--hiw { padding-top: calc(var(--hv2-nav-height) + 1rem); }
  .hv2-cover-panel--plan,
  .hv2-cover-panel--focus,
  .hv2-cover-panel--pricing {
    padding-top: calc(var(--hv2-nav-height) + 1rem);
  }
}

/* ---------- Closing block: Trust, FAQ preview, Final CTA (Homepage);
   Final CTA (Features) ----------
   These left the sliding cover-panel system entirely (no sticky, no
   100svh floor, no per-panel rounded-top card) — Frank's review of the
   recording: repeating the rounded-card treatment on every closing
   section made the ending read as several stacked pages rather than
   one deliberate closing sequence. Trust and FAQ preview are now plain
   normal-flow bands (natural content height, no forced floor) that
   scroll like ordinary page content. Final CTA is the ONE deliberate
   rounded panel that starts the closing block; the Footer (see
   .hv2-footer/.hv2-closing further down) connects directly beneath it
   with no radius of its own and no meaningful gap — together they read
   as one continuous surface, not two cards. */
/* position: relative + z-index above every sticky panel still earlier
   in the stack (Film 2 / How It Works 3 / Plan 4 / Focus 5 / Pricing
   preview 6) — these panels keep painting at position: sticky; top: 0
   for as long as their own shell's runway hasn't fully scrolled past,
   regardless of DOM order, once they carry an explicit z-index. Trust/
   FAQ/Final CTA left the sticky system but still need to out-rank that
   z-index or the last still-active sticky panel paints over them
   (confirmed live via elementFromPoint: without this, Focus's still-
   pinned panel painted over Trust's normal-flow content). z-index on a
   position: static element is a no-op, hence position: relative here
   even though nothing else needs it structurally. */
.hv2-cover-panel--trust {
  position: relative;
  z-index: 7;
  background: var(--hv2-panel);
  padding: 4.5rem 0;
}

.hv2-cover-panel--faq {
  position: relative;
  z-index: 8;
  background: var(--hv2-bg);
  color: var(--hv2-text);
  padding: 4.5rem 0;
}

/* overflow: hidden crops the oversized environment word at this
   panel's own edge, matching FOCUS above — without it, the word's
   position:absolute box (no explicit width, sized by its own text at
   whatever font-size is active) extends past the panel and pushes the
   whole document wider at narrow viewports (confirmed: 8-9px overflow
   at 375/390/360, clean at 768+). Box-shadow is unaffected (it belongs
   to this same element, not a clipped descendant), and this crops only
   the decorative word — the CTA text/buttons live in .hv2-container,
   raised to z-index: 1 below, and are never inside the clipped area
   in a way that would cut off focus outlines or the button itself.
   position: relative gives the word's absolute positioning a local
   anchor now that this panel is no longer part of the sticky system
   (which previously supplied position: relative via its base class).
   border-radius is the one deliberate rounded top in the whole closing
   block — see the block comment above. */
.hv2-cover-panel--finalcta,
.hv2-fx-cover-panel--finalcta {
  position: relative;
  z-index: 9;
  background: var(--hv2-deep);
  padding: 4.5rem 0;
  overflow: hidden;
  border-radius: var(--hv2-shell-radius) var(--hv2-shell-radius) 0 0;
}

@media (min-width: 1024px) {
  .hv2-cover-panel--trust,
  .hv2-cover-panel--faq {
    padding: 6rem 0;
  }

  .hv2-cover-panel--finalcta,
  .hv2-fx-cover-panel--finalcta {
    padding: 6rem 0 3.5rem;
  }

  /* Features only: slightly more bottom breathing room before Footer
     (56px → 80px, within Frank's requested 64-96px) — Homepage's Final
     CTA keeps the shared 3.5rem value untouched. */
  .hv2-fx-cover-panel--finalcta {
    padding-bottom: 5rem;
  }
}

@media (max-width: 1023px) {
  .hv2-cover-panel--plan,
  .hv2-cover-panel--focus,
  .hv2-cover-panel--pricing,
  .hv2-cover-panel--trust,
  .hv2-cover-panel--faq,
  .hv2-cover-panel--finalcta {
    padding: 3.5rem 0;
  }

  .sc-cover-panel,
  .hv2-cover-panel,
  .hv2-fx-cover-panel {
    border-radius: 1.5rem 1.5rem 0 0;
  }

  /* Panels are not direct siblings of each other (each lives inside its
     own shell) — this selector targets the shells so the slight
     overlap that hides mobile seams still applies to the right
     elements. Below the sliding breakpoint the panels are in normal
     flow (not sticky), so this is a small visual seam-hider only, not
     a scroll-runway overlap. */
  .sc-cover-shell + .sc-cover-shell,
  .hv2-cover-shell + .hv2-cover-shell,
  .hv2-fx-cover-shell + .hv2-fx-cover-shell {
    margin-top: -1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-cover-panel,
  .hv2-cover-panel,
  .hv2-fx-cover-panel {
    position: static;
    top: auto;
    min-height: 0;
  }

  .sc-cover-shell::after,
  .hv2-cover-shell::after,
  .hv2-fx-cover-shell::after {
    content: none;
  }

  .sc-cover-shell + .sc-cover-shell,
  .hv2-cover-shell + .hv2-cover-shell,
  .hv2-fx-cover-shell + .hv2-fx-cover-shell,
  .hv2-hero + .hv2-cover-shell,
  .hv2-fx-hero + .hv2-fx-cover-shell {
    margin-top: 0;
  }
}

/* Reduced motion: fall back to plain document flow (handled by the one
   shared reduced-motion block above). Static still needs a positioning
   context for the absolutely positioned environment word inside FOCUS
   — relative (no offsets) is visually identical to static for the
   panel's own layout. */
@media (prefers-reduced-motion: reduce) {
  .hv2-cover-panel--focus {
    position: relative;
  }
}

/* ---------- Environment word: faded oversized background typography ----------
   Shared, reusable across V2 pages (currently only Homepage FOCUS and
   the footer use it — see the section comments at each call site).
   Decorative only: aria-hidden, out of normal flow, never a headline.
   Inspired by the Xara reference's low-opacity background labels, but
   tuned brighter (0.06-0.13 vs Xara's ~0.03) because SoloChief's word
   sits on a dark navy surface rather than Xara's bright one — it must
   still read as clearly faded, never foreground-bright. */
.hv2-environment-word {
  position: absolute;
  z-index: 0;
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.82;
  white-space: nowrap;
  color: rgba(184, 196, 214, 0.1);
  pointer-events: none;
  user-select: none;
}

/* FOCUS reads "SOLOCHIEF" in the environmental treatment; the footer
   keeps the brand's normal "SoloChief" casing (its own variant below
   does not transform case). Tuned to the low end of the approved
   0.06-0.10 range — the lowest value that still reads as faintly
   visible against the panel's dark navy background. Sized and
   positioned to read as cropped background architecture (Xara-style)
   rather than a complete, fully-visible word: pushed left off the
   panel edge and enlarged so only a fragment of the letterforms is
   ever on screen, bottom-anchored low enough to clear the copy/
   bullets column vertically at 1280px+ (the wider container leaves
   enough room below the panel's shorter shell); the 1024-1279px band
   below overrides with a horizontal crop instead, because at that
   width the copy column is tall enough, relative to the panel's own
   shorter height there, that no vertical position clears it without
   shrinking the word to an unreadable sliver. */
.hv2-environment-word--focus {
  left: -8vw;
  bottom: -0.4em;
  font-size: clamp(8rem, 24vw, 22rem);
  text-transform: uppercase;
  color: rgba(184, 196, 214, 0.07);
}

/* 1024-1279px: crop the word's width so it never reaches the copy/
   bullets column (measured left edge ~450-545px in this range), instead
   of trying to dodge it vertically in a shell too short to allow that
   without shrinking the word to a sliver. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hv2-environment-word--focus {
    bottom: -0.1em;
    width: 460px;
    overflow: hidden;
  }
}

/* 1280-1439px: the base rule's vertical clearance below the copy
   column is real but too thin here (measured ~10px, easily lost to
   rounding) — same horizontal-crop fix, slightly wider. 1440px+ has
   enough clearance and keeps the full-width base treatment. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .hv2-environment-word--focus {
    bottom: -0.1em;
    width: 500px;
    overflow: hidden;
  }
}

@media (max-width: 767px) {
  .hv2-environment-word--focus {
    font-size: clamp(4rem, 25vw, 7rem);
    bottom: -0.1em;
  }
}

/* Full-bleed background field behind the footer's brand/nav content
   (which sits at z-index: 1 via .hv2-footer-inner) — not constrained
   to the container like ordinary footer copy. Deliberately oversized
   and pushed past both the left and right edges (width wider than the
   viewport, negative left offset) so only a fragment of the word is
   ever visible — cropped background architecture, not a centred,
   fully-legible logo. .hv2-footer's own overflow: hidden crops it. */
.hv2-environment-word--footer {
  position: absolute;
  left: -6vw;
  bottom: -0.16em;
  width: 112vw;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  color: rgba(184, 196, 214, 0.1);
  font-size: clamp(6rem, 24vw, 20rem);
  letter-spacing: -0.045em;
  line-height: 0.85;
}

@media (max-width: 767px) {
  .hv2-environment-word--footer {
    font-size: clamp(3.5rem, 21vw, 6.5rem);
    bottom: -0.1em;
  }
}

/* Final CTA closing chapter (Homepage and Features) — restrained
   background typography so the panel reads as a designed surface, not
   an empty field around three lines of centred copy. Cropped bottom-
   left fragment, same treatment family as FOCUS/footer, sized down
   from the footer's full-bleed variant since this panel is narrower
   (container width, not full-bleed). */
.hv2-environment-word--finalcta {
  position: absolute;
  left: -4vw;
  bottom: -0.18em;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  color: rgba(184, 196, 214, 0.08);
  font-size: clamp(6rem, 18vw, 14rem);
  letter-spacing: -0.045em;
  line-height: 0.85;
  pointer-events: none;
}

@media (max-width: 767px) {
  .hv2-environment-word--finalcta {
    font-size: clamp(3.5rem, 20vw, 6rem);
    bottom: -0.1em;
  }
}

/* Features' Final CTA specifically: the shared sizing above (word
   height ~190px, flush with the panel's own bottom edge) measured fine
   on Homepage's taller Final CTA panel but, on Features' shorter one,
   clipped right at the Final CTA/Footer seam with zero breathing room
   — Frank's review: "extends too deeply into the Footer area" /
   Footer reads as sitting on top of the word. Smaller, pulled further
   up, and slightly fainter so it stays decorative inside the panel
   with real clearance above Footer. Homepage's own word (same shared
   class, no Features-scoped selector match) is untouched. */
@media (min-width: 768px) {
  .hv2-fx-cover-panel--finalcta .hv2-environment-word--finalcta {
    font-size: clamp(4.5rem, 11vw, 8rem);
    bottom: 1.1em;
    color: rgba(184, 196, 214, 0.06);
  }
}

.hv2-final-cta-note {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  color: var(--hv2-muted);
}

/* Painting order puts an absolutely-positioned z-index:0 descendant
   (the environment word) ABOVE normal in-flow content in the same
   stacking context (CSS2.1 Appendix E) — same reason .hv2-footer-inner
   needs its own position:relative + z-index:1 above the footer's
   environment word. Same fix here, or the word sits over the CTA text. */
.hv2-cover-panel--finalcta > .hv2-container,
.hv2-fx-cover-panel--finalcta > .hv2-container {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hv2-environment-word { transition: none; animation: none; }
}

.hv2-panel-inner {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .hv2-panel-inner { grid-template-columns: 1fr 1fr; }
}

.hv2-panel-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hv2-teal);
  margin: 0 0 1rem;
}

.hv2-panel-title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 1rem;
}

.hv2-panel-copy {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--hv2-muted);
  max-width: 30rem;
  margin: 0;
}

.hv2-panel-scene {
  display: grid;
  gap: 0.85rem;
}

/* ---------- PLAN + FOCUS: real product captures ----------
   Two independent cover panels (#hv2Plan, #hv2Focus), each a large
   editorial split — a narrow copy column paired with a large real
   screenshot that dominates the scene, mirrored between the two panels.
   Each still uses .hv2-cover-panel's min-height (a floor, not a cap),
   so when content needs more room the panel simply grows; nothing here
   is ever clipped or compressed to force a fixed height. */

.hv2-pf-scene {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  /* top/bottom only — a shorthand here would zero out the horizontal
     safe padding inherited from .hv2-container on this same element. */
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  /* Real content always paints above FOCUS's absolutely positioned
     .hv2-environment-word (z-index: 0) — see the environment-word
     block above. */
  position: relative;
  z-index: 1;
}

/* Below the split breakpoint, always stack copy first then screenshot —
   FOCUS's DOM order is shot-then-copy (needed for the desktop split
   below), so it needs an explicit reorder here to keep the lede text
   ahead of the image on small screens. */
@media (max-width: 1023px) {
  .hv2-pf-scene--focus .hv2-pf-copy { order: -1; }
}

@media (min-width: 1024px) {
  .hv2-pf-scene {
    flex-direction: row;
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
    /* Just a floor against squishing on short viewports — the actual
       top position is controlled by the panel's own padding split
       above, not by this value (the panel centers this scene, and the
       scene centers its own children, so the scene's height cancels
       out of that math and this number has no visible effect on it). */
    min-height: 60svh;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  /* FOCUS's DOM order is already shot-then-copy (needed so the mobile
     order:-1 hack below has a copy element to promote) — plain `row`
     already renders shot-left/copy-right, matching PLAN's shot-right/
     copy-left mirrored the other way. No flex-direction override needed
     here; row-reverse would put copy first (left) instead. */
}

@media (min-width: 1280px) {
  .hv2-pf-scene {
    min-height: 68svh;
    gap: 1.5rem;
  }
}

/* PLAN: pull the screenshot a little closer to the panel's right edge —
   still a real safe inset, just tighter than the page's usual 1.5rem. */
@media (min-width: 1024px) {
  .hv2-pf-scene--plan {
    padding-right: 0.5rem;
  }
}

@media (min-width: 1280px) {
  .hv2-pf-scene--plan { padding-right: 0.25rem; }
}

/* FOCUS mirrors PLAN's tightened inset on its own leading edge (the
   screenshot side) — same safe padding, same width budget, so both
   panels read as matched halves of one composition. */
@media (min-width: 1024px) {
  .hv2-pf-scene--focus {
    padding-left: 0.5rem;
  }
}

@media (min-width: 1280px) {
  .hv2-pf-scene--focus { padding-left: 0.25rem; }
}

.hv2-pf-copy {
  min-width: 0;
}

@media (min-width: 1024px) {
  .hv2-pf-copy { flex: 0 0 40%; }
}

/* Large desktop only: widen just this scene's own stage (not the shared
   .hv2-container used everywhere else on the page) so the screenshot
   column can grow ~4-6% at every width from 1280px up, not just on very
   wide screens. Copy switches from a percentage basis to a fixed width
   (23.1rem — a ~3% trim from its old ~24rem rendered width, small
   enough not to change how the text wraps) so the combination of that
   small trim, the tightened gap/padding above, and the wider stage
   together land the screenshot in range at both 1280px and 1440px+,
   not just one or the other. */
@media (min-width: 1280px) {
  .hv2-pf-scene { max-width: 80.625rem; }
  .hv2-pf-copy { flex: 0 0 23.1rem; }
}

.hv2-pf-copy .hv2-eyebrow { margin-bottom: 1.25rem; }

.hv2-pf-heading {
  font-size: clamp(1.9rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
}

.hv2-pf-copy-lede {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--hv2-muted);
  margin: 0 0 1.5rem;
  max-width: 26rem;
}

.hv2-pf-points {
  list-style: none;
  display: grid;
  gap: 0.7rem;
  margin: 0 0 1.5rem;
  padding: 0;
  max-width: 26rem;
}

.hv2-pf-points li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--hv2-text);
}

.hv2-pf-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--hv2-teal);
}

.hv2-pf-lock {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hv2-teal);
  border: 1px solid var(--hv2-line);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

/* The screenshot itself, restrained framing only — no browser chrome,
   no decorative dots, no heavy card container. */
.hv2-pf-shot {
  display: flex;
  min-width: 0;
  margin: 0;
}

@media (min-width: 1024px) {
  .hv2-pf-shot { flex: 1 1 60%; }
  .hv2-pf-scene--plan .hv2-pf-shot { justify-content: flex-end; }
  .hv2-pf-scene--focus .hv2-pf-shot { justify-content: flex-start; }
}

.hv2-pf-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
  border: 1px solid var(--hv2-line);
  box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.6);
}

@media (min-width: 1024px) {
  .hv2-pf-img { max-height: min(70svh, 760px); }
}

@media (min-width: 1280px) {
  .hv2-pf-img { max-height: min(76svh, 860px); }
}

/* ---------- Scroll-reveal (JS-driven) ---------- */

.hv2-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--hv2-duration) var(--hv2-ease),
    transform var(--hv2-duration) var(--hv2-ease);
  transition-delay: calc(var(--hv2-stagger-index, 0) * var(--hv2-stagger-step));
}

.hv2-reveal.hv2-is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Homepage footer (separate Final CTA + Footer) ----------
   Restored after a combined-CTA/footer experiment was reverted per
   explicit instruction — the Homepage keeps its own separate Final CTA
   section and footer-reveal footer. Only the Features page uses the
   combined .hv2-closing system below. */

/* The wordmark is a full-bleed background field behind the whole
   footer (not a separate centred "reveal" card above it) — overflow
   hidden crops it cleanly at the footer's own edges instead of paging
   the document. */
/* No radius, no top border, no gap above — the Footer connects
   directly beneath Final CTA (the one rounded panel that opens the
   closing block) rather than being a second rounded card of its own.
   Same background as Final CTA (.hv2-footer.hv2-dark-section override,
   further down) so the two read as one continuous surface. */
.hv2-footer {
  position: relative;
  background: var(--hv2-deep);
  overflow: hidden;
  /* Must outrank every sticky panel before it (highest is Final CTA's
     own 9) — see the z-index comment on .hv2-cover-panel--trust. */
  z-index: 10;
}

.hv2-footer--separated { border-top-color: rgba(0, 194, 168, 0.2); }

.hv2-footer-inner {
  position: relative;
  z-index: 1;
  padding: 3.5rem 0 2.5rem;
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .hv2-footer-inner { grid-template-columns: 1fr 1fr; }
}

.hv2-footer-brand a {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--hv2-teal);
  text-decoration: none;
}

.hv2-footer-tagline {
  margin: 0.6rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--hv2-teal);
}

.hv2-footer-brand p {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--hv2-muted);
}

.hv2-footer-brand p.hv2-footer-tagline { margin-top: 0.6rem; }

/* Inherits the word's own faded colour instead of a full-opacity teal
   dot, so the full stop doesn't read as a bright foreground accent
   dominating an otherwise faded word. */
.hv2-footer-reveal-word .hv2-fx-accent-dot,
.hv2-environment-word--footer .hv2-fx-accent-dot {
  color: inherit;
}

/* ---------- Closing section (Final CTA + Footer, one combined block) ----------
   Used by the Features page only (see features/index.html's <footer>).
   Final CTA and Footer used to be two separate elements (a <section>
   followed by a <footer>) with their own backgrounds, their own top
   borders, and a negative-margin "reveal" trick pulling one over the
   other. That always left a seam, however small. Now there is exactly
   one <footer> element, one background, one top edge, one padding
   system — the CTA content is simply the first thing inside it. The
   only internal separation between CTA / nav / wordmark / legal is
   spacing and a single hairline rule (.hv2-closing-divider,
   .hv2-closing-legal's own border-top) — never a second background
   or a second rounded corner. */

/* No radius, no top border — connects directly beneath the page's
   Final CTA (Features' .hv2-fx-cover-panel--finalcta, or Pricing/FAQ's
   #pricingFinalCta/#faqFinalCta, both below), which carries the one
   rounded top for the whole closing block. Same background, so the two
   read as one continuous surface rather than a second stacked card. */
.hv2-closing {
  background: var(--hv2-deep);
  position: relative;
  /* Must outrank Features' sticky panels before it (highest is Final
     CTA's own 9) — see the z-index comment on .hv2-cover-panel--trust.
     Pricing/FAQ have no sticky panels, so this is a no-op there. */
  z-index: 10;
  padding: 4.5rem 0 3rem;
}

@media (min-width: 1024px) {
  .hv2-closing { padding: 6rem 0 3.5rem; }
}

@media (max-width: 767px) {
  .hv2-closing { padding: 3rem 0 2rem; }
}

.hv2-closing-divider {
  border: none;
  border-top: 1px solid var(--hv2-line);
  margin: 3.5rem 0;
}

@media (max-width: 767px) {
  .hv2-closing-divider { margin: 2.5rem 0; }
}

.hv2-closing-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (min-width: 640px) {
  .hv2-closing-nav { grid-template-columns: repeat(4, 1fr); }
}

.hv2-closing-legal {
  text-align: center;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hv2-line);
}

.hv2-closing-legal a {
  font-size: 1rem;
  font-weight: 800;
  color: var(--hv2-teal);
  text-decoration: none;
}

.hv2-closing-legal p {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--hv2-muted);
}

.hv2-footer-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

@media (min-width: 640px) {
  .hv2-footer-cols { grid-template-columns: repeat(4, 1fr); }
}

.hv2-footer-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hv2-muted);
  margin: 0 0 0.75rem;
}

.hv2-footer-cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.hv2-footer-cols a {
  font-size: 0.875rem;
  color: #CBD5E1;
  text-decoration: none;
}

.hv2-footer-cols a:hover { color: var(--hv2-teal); }

/* ---------- Conversion content: Pricing Preview, Trust, FAQ, Final CTA
   ----------
   Pricing/Trust/FAQ/Final CTA are now sliding cover panels themselves
   (.hv2-cover-panel--pricing/--trust/--faq/--finalcta, in the shared
   sc-cover-* system above) — the former normal-flow section wrapper
   classes (.hv2-conv-section, .hv2-pricing-section, .hv2-trust-section,
   .hv2-final-cta) are removed, not kept for backwards compatibility.
   The component-level classes below (.hv2-conv-header, .hv2-pricing-
   grid, .hv2-trust-points, .hv2-final-cta-panel, etc.) are unchanged
   and still apply inside the new panels. */

.hv2-conv-header {
  max-width: 40rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.hv2-conv-header--left {
  margin: 0 0 2rem;
  text-align: left;
}

.hv2-conv-heading {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 1rem 0 0;
}

.hv2-conv-copy {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--hv2-muted);
  margin: 1rem 0 0;
  max-width: 32rem;
}

.hv2-conv-footline {
  text-align: center;
  margin-top: 2rem;
}

.hv2-conv-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--hv2-muted);
  text-decoration: none;
}

.hv2-conv-link:hover { color: var(--hv2-teal); }

/* ---------- Pricing Preview ---------- */

.hv2-pricing-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .hv2-pricing-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

@media (min-width: 1024px) {
  .hv2-pricing-grid--detailed { gap: 1.75rem; }
}

.hv2-pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hv2-line);
  background: var(--hv2-panelhi);
  border-radius: 1rem;
  padding: 1.75rem;
}

.hv2-pricing-card--highlight {
  border-color: var(--hv2-teal);
  border-width: 2px;
  background: var(--hv2-deep);
}

.hv2-pricing-badge {
  position: absolute;
  top: -0.7rem;
  left: 1.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--hv2-teal);
  color: var(--hv2-bg);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
}

.hv2-pricing-badge--outline {
  background: transparent;
  color: var(--hv2-teal);
  border: 1px solid var(--hv2-line);
}

.hv2-pricing-name {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0.5rem 0 0;
}

.hv2-pricing-price {
  font-size: 1.75rem;
  font-weight: 800;
  margin: 0.75rem 0 0;
}

.hv2-pricing-price span {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--hv2-muted);
}

.hv2-pricing-points {
  list-style: none;
  display: grid;
  gap: 0.55rem;
  margin: 1.25rem 0 0;
  padding: 0;
  flex: 1;
}

.hv2-pricing-points li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--hv2-muted);
}

.hv2-pricing-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--hv2-teal);
}

.hv2-pricing-cta {
  display: block;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.5rem;
  padding: 0.7rem 1rem;
  margin-top: 1.5rem;
  transition: background 160ms ease, border-color 160ms ease;
}

.hv2-pricing-cta--solid {
  background: var(--hv2-teal);
  color: var(--hv2-bg);
}

.hv2-pricing-cta--solid:hover { background: var(--hv2-tealh); }

.hv2-pricing-cta--outline {
  border: 1px solid var(--hv2-line);
  color: var(--hv2-text);
}

.hv2-pricing-cta--outline:hover { border-color: var(--hv2-teal); }

/* ---------- Pricing: detailed plan cards (Pricing page only — the
   compact 4-5 bullet .hv2-pricing-card above is shared with the
   Homepage preview and stays untouched). Adds platform label,
   audience line, description, and a visually separated usage-
   allowance block on top of the existing card/points/cta pieces. ---------- */
.hv2-pricing-grid--detailed { align-items: stretch; }

/* Bottom-align every card's CTA regardless of how much content the
   plan has above it (Free/Pro/Operator have different bullet counts).
   Scoped to the detailed grid only — .hv2-pricing-cta is shared with
   the Homepage's horizontal preview-card layout, where this rule does
   not apply. */
.hv2-pricing-grid--detailed .hv2-pricing-cta { margin-top: auto; }
.hv2-pricing-grid--detailed .hv2-pricing-card { padding-top: 2rem; }

.hv2-pricing-platform {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hv2-muted);
  margin: 0;
}

.hv2-pricing-card--operator { border-color: rgba(0, 194, 168, 0.35); }

.hv2-pricing-audience {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--hv2-text);
  margin: 0.35rem 0 0;
}

.hv2-pricing-desc {
  font-size: 0.8125rem;
  color: var(--hv2-muted);
  line-height: 1.5;
  margin: 0.5rem 0 0;
}

.hv2-pricing-allowances {
  border-top: 1px solid var(--hv2-line);
  margin-top: 1.25rem;
  padding-top: 1.1rem;
}

.hv2-pricing-allowances-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hv2-muted);
  margin: 0 0 0.6rem;
}

.hv2-pricing-allowances-list {
  list-style: none;
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  color: var(--hv2-text);
}

.hv2-pricing-allowance-value {
  font-weight: 700;
  color: var(--hv2-teal);
}

.hv2-pricing-note {
  font-size: 0.75rem;
  color: var(--hv2-muted);
  line-height: 1.5;
  margin: 1rem 0 0;
}

.hv2-pricing-note a { color: var(--hv2-teal); }

/* ---------- Pricing hero: supporting note under the CTAs ---------- */
.hv2-fx-hero-note {
  font-size: 0.75rem;
  color: var(--hv2-muted);
  margin: 0.5rem 0 0;
}

/* ---------- Comparison: real <table> per capability group, not an
   accordion — accessible column/row headers at every viewport. At
   narrow widths the header row is visually hidden (kept in the a11y
   tree, not display:none) and each cell grows a data-label prefix via
   ::before, so screen readers still get true table semantics while
   sighted users get a stacked-card read. No inner scrollbar at any
   width — this is a reflow, not an overflow container. ---------- */
.hv2-compare-group { margin-top: 2.5rem; }

.hv2-compare-group-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.85rem;
}

.hv2-compare-table-wrap { width: 100%; }

.hv2-compare-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--hv2-line);
  border-radius: 0.75rem;
  overflow: hidden;
  font-size: 0.875rem;
}

.hv2-compare-table th,
.hv2-compare-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--hv2-line);
}

.hv2-compare-table tbody tr:last-child th,
.hv2-compare-table tbody tr:last-child td { border-bottom: none; }

.hv2-compare-table thead th {
  background: var(--hv2-panelhi);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--hv2-muted);
}

.hv2-compare-table tbody th[scope="row"] {
  font-weight: 600;
  color: var(--hv2-text);
  background: transparent;
}

.hv2-compare-check { color: var(--hv2-teal); font-weight: 700; }
.hv2-compare-cross { color: var(--hv2-muted); font-weight: 700; }

@media (max-width: 640px) {
  .hv2-compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hv2-compare-table, .hv2-compare-table tbody, .hv2-compare-table tr, .hv2-compare-table th, .hv2-compare-table td {
    display: block;
    width: 100%;
  }
  .hv2-compare-table tr {
    border-bottom: 1px solid var(--hv2-line);
    padding: 0.75rem 0;
  }
  .hv2-compare-table tbody tr:last-child { border-bottom: none; }
  .hv2-compare-table th, .hv2-compare-table td {
    border-bottom: none;
    padding: 0.3rem 1rem;
  }
  .hv2-compare-table tbody th[scope="row"] { padding-bottom: 0.5rem; font-weight: 700; }
  .hv2-compare-table td[data-label]::before {
    content: attr(data-label) ': ';
    font-weight: 600;
    color: var(--hv2-muted);
  }
}

/* ---------- Web and WhatsApp explanation: two labelled capability
   columns ---------- */
.hv2-platform-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  .hv2-platform-grid { grid-template-columns: repeat(2, 1fr); }
}

.hv2-platform-col {
  border: 1px solid var(--hv2-line);
  border-radius: 1rem;
  padding: 1.75rem;
  background: var(--hv2-panelhi);
}

.hv2-platform-col-title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0;
}

.hv2-platform-col-badge {
  font-size: 0.75rem;
  color: var(--hv2-muted);
  margin: 0.4rem 0 0;
}

.hv2-platform-col-list {
  list-style: none;
  display: grid;
  gap: 0.55rem;
  margin: 1.25rem 0 0;
  padding: 0;
  font-size: 0.875rem;
  color: var(--hv2-text);
}

.hv2-platform-col-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ---------- Trial explanation panel ---------- */
.hv2-trial-panel {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}

.hv2-trial-panel .hv2-conv-heading,
.hv2-trial-panel .hv2-conv-copy { text-align: center; }

.hv2-trial-points {
  list-style: none;
  display: grid;
  gap: 0.65rem;
  margin: 2rem 0 0;
  padding: 0;
  text-align: left;
  font-size: 0.9375rem;
  color: var(--hv2-text);
  border: 1px solid var(--hv2-line);
  border-radius: 1rem;
  padding: 1.5rem 1.75rem;
  background: var(--hv2-panelhi);
}

.hv2-trial-points li {
  position: relative;
  padding-left: 1.25rem;
}

.hv2-trial-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--hv2-teal);
}

/* ---------- How usage works: 3 compact explanation cards ahead of the
   numeric table, so the section reads as a structured explanation
   rather than a single centred paragraph floating above a table. ---------- */
.hv2-usage-cards {
  display: grid;
  gap: 1.25rem;
  margin: 2rem 0 2.5rem;
}

@media (min-width: 768px) {
  .hv2-usage-cards { grid-template-columns: repeat(3, 1fr); }
}

.hv2-usage-card {
  border: 1px solid var(--hv2-line);
  border-radius: 1rem;
  background: var(--hv2-panelhi);
  padding: 1.5rem;
}

.hv2-usage-card-num {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--hv2-teal);
  margin-bottom: 0.75rem;
}

.hv2-usage-card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.hv2-usage-card-copy {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--hv2-muted);
  margin: 0;
}

/* ---------- Usage table note: the flat proactive-message safeguard,
   deliberately not attached to any single plan column ---------- */
.hv2-usage-note {
  font-size: 0.8125rem;
  color: var(--hv2-muted);
  margin: 1.5rem 0 0;
  text-align: center;
}

/* ---------- Pricing: plain normal-flow section rhythm (replaces the
   sc-cover-shell sliding system for this page — see the compact-hero
   comment above for why). Same vertical rhythm as the site's other
   normal-flow sections (.hv2-faq uses the same 4.5rem/6rem pair) so
   Pricing doesn't feel inconsistent with the rest of the V2 system,
   it just doesn't slide. ---------- */
.hv2-pricing-section {
  padding: 3.5rem 0;
}

@media (min-width: 1024px) {
  .hv2-pricing-section { padding: 4.5rem 0; }
}

/* First section directly under the compact hero: less top padding so
   heading and cards read as one compact commercial unit rather than
   two separate scroll beats. */
.hv2-pricing-section--first {
  padding-top: 0.5rem;
}

@media (min-width: 1024px) {
  .hv2-pricing-section--first { padding-top: 0.75rem; }
}

.hv2-pricing-header {
  margin-bottom: 1.5rem;
}

/* ---------- Trust and Privacy ---------- */

.hv2-trust-layout {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .hv2-trust-layout { grid-template-columns: 0.85fr 1fr; align-items: start; }
}

.hv2-trust-links {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.hv2-trust-links a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hv2-muted);
  text-decoration: none;
}

.hv2-trust-links a:hover { color: var(--hv2-teal); }

.hv2-trust-points {
  list-style: none;
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .hv2-trust-points { grid-template-columns: 1fr 1fr; }
}

.hv2-trust-points li {
  border: 1px solid var(--hv2-line);
  border-radius: 0.75rem;
  padding: 1.1rem 1.25rem;
  display: grid;
  gap: 0.4rem;
}

.hv2-trust-point-title {
  font-size: 0.9375rem;
  font-weight: 700;
}

.hv2-trust-point-copy {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--hv2-muted);
}

.hv2-trust-point-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid var(--hv2-teal);
  color: var(--hv2-teal);
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.hv2-trust-proof {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hv2-line);
  font-size: 0.875rem;
  color: var(--hv2-muted);
}

/* ---------- Shared post-Focus conversion chapters: Pricing/Trust/FAQ
   Preview two-column composition (left copy block, right content) —
   one reusable grid, not a bespoke layout per section. Pricing and
   FAQ Preview reuse .hv2-trust-layout's same column ratio via this
   class instead of duplicating the grid rule. ---------- */
.hv2-conv-2col {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .hv2-conv-2col { grid-template-columns: 0.85fr 1fr; align-items: start; }
}

.hv2-conv-2col-copy .hv2-conv-heading,
.hv2-conv-2col-copy .hv2-conv-copy {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

/* ---------- Pricing preview: staggered plan summaries, Operator
   highlighted without a full pricing-page treatment ---------- */
.hv2-pricing-preview-stack {
  display: grid;
  gap: 1rem;
}

.hv2-pricing-preview-card {
  border: 1px solid var(--hv2-line);
  border-radius: 1rem;
  background: var(--hv2-panelhi);
  padding: 1.25rem 1.5rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
}

.hv2-pricing-preview-card--highlight {
  border-color: var(--hv2-teal);
  background: linear-gradient(135deg, rgba(0, 194, 168, 0.1), var(--hv2-panelhi) 60%);
}

.hv2-pricing-preview-name {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.2rem;
}

.hv2-pricing-preview-price {
  font-size: 0.8125rem;
  color: var(--hv2-muted);
  margin: 0;
}

.hv2-pricing-preview-purpose {
  font-size: 0.8125rem;
  color: var(--hv2-text);
  margin: 0.3rem 0 0;
  max-width: 22rem;
}

/* ---------- FAQ (normal flow — see block comment above) ---------- */

.hv2-faq {
  background: var(--hv2-deep);
  padding: 4.5rem 0;
  border-top: 1px solid var(--hv2-line);
}

@media (min-width: 1024px) {
  .hv2-faq { padding: 6rem 0; }
}

/* Previously narrower than .hv2-container (58rem vs 80rem) for FAQ
   reading width — removed: it put the FAQ's left/right edges out of
   line with the sections directly above and below it (Plan summary,
   Final CTA, footer all use the standard .hv2-container width), which
   is exactly what made the lower page feel like a different grid. The
   accordion question/answer text itself stays comfortably readable at
   80rem since each row is a single line until expanded, not a dense
   paragraph column. */

/* ---------- FAQ category panel composition (two-column: intro left,
   accordion right) — replaces a single-column centred header sitting
   above a full-width accordion, which read as unbalanced (a narrow
   centred block over a wide full-bleed list). Mirrors the same
   left-intro/right-content pattern already used by Homepage's Pricing/
   Trust/FAQ Preview panels (.hv2-conv-2col), sized wider here to match
   Features' own two-column density. ---------- */
.hv2-faq-cat-grid {
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}

@media (min-width: 1024px) {
  .hv2-faq-cat-grid {
    grid-template-columns: minmax(280px, 0.8fr) minmax(520px, 1.4fr);
  }
}

.hv2-faq-cat-num {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--hv2-teal);
  margin-bottom: 0.75rem;
}

.hv2-faq-cat-title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

.hv2-faq-cat-desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--hv2-muted);
  margin: 0 0 1rem;
  max-width: 26rem;
}

.hv2-faq-cat-count {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hv2-muted);
  border: 1px solid var(--hv2-line);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

.hv2-faq-list {
  border-bottom: 1px solid var(--hv2-line);
}

.hv2-faq-item {
  border-top: 1px solid var(--hv2-line);
}

.hv2-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  text-align: left;
  color: var(--hv2-text);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 1rem 0.25rem;
  min-height: 44px;
  cursor: pointer;
}

.hv2-faq-q::-webkit-details-marker { display: none; }
.hv2-faq-q::marker { content: ''; }

.hv2-faq-chevron {
  flex-shrink: 0;
  color: var(--hv2-teal);
  transition: transform 220ms ease;
}

.hv2-faq-item[open] .hv2-faq-chevron { transform: rotate(180deg); }

/* Native <details>/<summary> — answers are reachable and readable with
   zero JavaScript, and details[name="..."] makes the group mutually
   exclusive (one open at a time) without any script. */
.hv2-faq-a-inner p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--hv2-muted);
  margin: 0;
  padding: 0 0.25rem 1rem;
  max-width: 42rem;
}

/* ---------- Final CTA content (now the top region of .hv2-closing —
   see the Closing section block above; no section-level background,
   border or padding of its own any more, only the text/action styling
   below, which is unchanged). ---------- */

.hv2-final-cta-panel {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}

.hv2-final-cta-heading {
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

.hv2-final-cta-copy {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--hv2-muted);
  max-width: 30rem;
  margin: 1.25rem auto 0;
}

.hv2-final-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

@media (min-width: 480px) {
  .hv2-final-cta-actions { flex-direction: row; justify-content: center; }
}

.hv2-final-cta-primary {
  font-size: 1.0625rem;
  font-weight: 700;
  padding: 1.05rem 2.5rem;
  border-radius: 0.5rem;
  width: 100%;
  box-shadow: 0 16px 32px -16px rgba(0, 194, 168, 0.45);
}

@media (min-width: 480px) {
  .hv2-final-cta-primary { width: auto; }
}

/* Secondary action stays deliberately quiet next to the strengthened
   primary button — same link style used elsewhere, no extra weight. */
.hv2-final-cta-actions .hv2-conv-link {
  font-weight: 500;
}

/* ---------- Nav: active-page indicator (Features page) ----------
   Underline + weight, not colour alone, so the active link is legible
   without relying on colour perception. */
.hv2-nav-link[aria-current="page"],
.hv2-mobile-menu a[aria-current="page"] {
  color: var(--hv2-teal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hv2-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ====================================================================
   Shared availability-badge system — used by the Features page rebuild
   (features/index.html: hv2-fx-* — see the FEATURES PAGE REBUILD block
   further down this file) and available to any other page. The earlier
   flat Features implementation these badges originally shipped with
   (hv2-features-hero/-model/-capability/-editorial/-spotlight/-index/
   -matrix) has been fully replaced and removed — grep confirmed zero
   remaining references in features/index.html, home-v2/index.html or
   scripts/home-v2.js before deletion.
   ==================================================================== */

/* ---------- Availability badges (text-based — never colour alone) ---------- */

.hv2-badge-state {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--hv2-line);
  white-space: nowrap;
}

.hv2-badge-state--free { color: var(--hv2-teal); border-color: rgba(0, 194, 168, 0.4); }
.hv2-badge-state--pro { color: var(--hv2-bg); background: var(--hv2-teal); border-color: var(--hv2-teal); }
.hv2-badge-state--operator { color: var(--hv2-text); border-color: var(--hv2-line); background: var(--hv2-panelhi); }
.hv2-badge-state--coming { color: var(--hv2-muted); border-style: dashed; }

.hv2-badge-platform {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--hv2-muted);
  border: 1px solid var(--hv2-line);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}

/* Guard against any accidental horizontal overflow at small widths.
   overflow-x: clip (NOT hidden) is required here. Per the CSS Overflow
   spec, setting overflow-x to any non-visible value OTHER than clip
   silently forces overflow-y to compute as "auto" even if overflow-y is
   explicitly written as "visible" — turning <body> into its own scroll
   container. That breaks position:sticky throughout the page (sticky
   elements stick relative to the nearest scroll container, which
   becomes <body> instead of the real viewport) — this is what was
   making How It Works, and every other cover panel, fail to visibly
   rise. clip is exempt from that auto-pairing rule, so overflow-y stays
   genuinely visible and <body> never becomes its own scroll container. */
.hv2-root { overflow-x: clip; overflow-y: visible; }

/* =====================================================================
   FEATURES PAGE REBUILD — institutional-grade interactive reference.
   Prefixed hv2-fx- throughout. Reuses .hv2-container, .hv2-eyebrow,
   .hv2-conv-header/-heading/-copy/-link, .hv2-nav-cta, .hv2-btn-secondary,
   .hv2-pricing-cta/-badge, .hv2-cover-panel, .hv2-reveal, .hv2-badge-state
   and .hv2-badge-platform from the shared design system above.
   ===================================================================== */

/* ---------- Generic section rhythm ---------- */

.hv2-fx-section {
  position: relative;
  background: var(--hv2-bg);
  padding: 2.75rem 0;
}

@media (min-width: 768px) {
  .hv2-fx-section { padding: 4rem 0; }
}

@media (min-width: 1024px) {
  .hv2-fx-section { padding: 6rem 0; }
}

/* Supporting sections (Coming later, FAQ) use less vertical padding
   than the major content sections — a compact roadmap strip and a
   short FAQ list should never claim as much vertical space as the
   36-row explorer or the differentiator/platform panels above them. */
.hv2-fx-section--compact { padding: 2.5rem 0; }

@media (min-width: 768px) {
  .hv2-fx-section--compact { padding: 3.5rem 0; }
}

@media (min-width: 1024px) {
  .hv2-fx-section--compact { padding: 4rem 0; }
}

.hv2-fx-map-section { background: var(--hv2-bg); }
.hv2-fx-demo-section { background: var(--hv2-bg); }
.hv2-fx-differentiators-section { background: var(--hv2-bg); }
.hv2-fx-catalogue-section { background: var(--hv2-bg); }

/* ---------- Features-page cover-panel contract ----------
   Shared by the four major product sections only (Operating System,
   Capability Catalogue, Featured Differentiators, See It in Action) —
   Plan Summary, FAQ and the footer stay in normal flow and never get
   this class.

   ROOT-CAUSE FIX: a position:sticky element's "containing block" (the
   box that bounds how long it can stay pinned) is its nearest ancestor
   — which, when the <section> itself was the sticky element, was
   <main>. Since <main> wraps every section on the page, each sticky
   section could remain pinned for the ENTIRE REST of the document, not
   just its own content height. For panels 1-3 this was invisible
   because the next sticky panel (higher z-index) painted over the
   still-pinned one, creating the illusion of a clean release. For the
   LAST panel (Demo) nothing paints over it, so it stayed frozen on
   screen while Plan Summary and FAQ scrolled past completely hidden
   behind it — confirmed live via elementFromPoint() at increasing
   scrollY: Demo's bottom edge never moved while Plan Summary's
   measured top went from +946 to -936 (its entire height) underneath.

   The fix: the <section> is now a plain, non-sticky SHELL
   (.hv2-fx-cover-shell) with a small, fixed padding-bottom — its own
   height (content + that padding) becomes the sticky element's real
   containing block. The actual sticky, rounded, shadowed panel is now
   a dedicated inner div (.hv2-fx-cover-panel) one level down. This
   bounds every panel's stuck-window to just its own content plus the
   deliberate buffer below, for all four panels — not only the last
   one, since panels 2-3 had the identical latent bug and deserve the
   same correction, not just a lucky visual mask. */
/* Sticky mechanics (shell, ::after runway, panel position/min-height)
   now come entirely from the shared .sc-cover-shell/.sc-cover-panel
   system above — .hv2-fx-cover-shell and .hv2-fx-cover-panel are
   aliased into those same rules, not a second copy. Only visual-only
   rules remain here: background/overflow/padding-top and per-panel
   z-index. Features keeps the wider 1280px activation breakpoint via
   the shared system's built-in 1024-1279px override for
   .hv2-fx-cover-shell/.hv2-fx-cover-panel (Catalogue's real content
   exceeds the viewport by enough at 1024-1279 that a sticky hold there
   reads as a scroll freeze — measured directly). */
.hv2-fx-cover-panel {
  background: var(--hv2-bg);
  overflow: clip;
  /* Distance from the rounded top edge to the section heading. Was
     clamp(4rem, 7vw, 6.5rem) — combined with the nav-clearance rule
     below that put the heading ~234px from the panel's pinned top at
     1440px (measured), well past the ~80-130px target once the
     vertical-centering bug (see .hv2-fx-cover-panel's justify-content
     above) was fixed and the padding itself became the only thing
     positioning content. Trimmed so nav-height + this lands inside
     that range. */
  padding-top: clamp(2rem, 3.5vw, 3rem);
}

/* Nav clearance, added exactly once on top of the panel's existing
   design spacing above — not stacked on a separate sticky offset.
   Source-order win over the base rule. */
@media (min-width: 1280px) {
  .hv2-fx-cover-panel {
    padding-top: calc(var(--hv2-nav-height) + clamp(2rem, 3.5vw, 3rem));
  }
}

.hv2-fx-cover-panel--overview { z-index: 2; }
.hv2-fx-cover-panel--catalogue { z-index: 3; }
.hv2-fx-cover-panel--differentiators { z-index: 4; }
.hv2-fx-cover-panel--demo { z-index: 5; }
.hv2-fx-cover-panel--finalcta { z-index: 6; background: var(--hv2-deep); color: #fff; }

/* Same reasoning as .hv2-cover-panel--finalcta on the Homepage: this is
   the last panel in the Features stack — nothing ever slides up to
   cover its trailing space, so the shared 100svh floor just left a
   large empty gap below the CTA content before the footer. */
@media (min-width: 1280px) {
  .hv2-fx-cover-panel--finalcta { min-height: 0; }
}

/* Generic ascending z-index steps for pages built directly on the
   shared sc-cover-* system (FAQ, Pricing) — avoids inline styles while
   avoiding inventing a bespoke per-section modifier name for every
   panel on every new page. Each stack just applies --z2, --z3, --z4...
   in document order, same pattern as the named z-index modifiers above. */
.sc-cover-panel--z2 { z-index: 2; }
.sc-cover-panel--z3 { z-index: 3; }
.sc-cover-panel--z4 { z-index: 4; }
.sc-cover-panel--z5 { z-index: 5; }
.sc-cover-panel--z6 { z-index: 6; }
.sc-cover-panel--z7 { z-index: 7; }
.sc-cover-panel--z8 { z-index: 8; }
.sc-cover-panel--z9 { z-index: 9; }

/* ---------- 1. Features hero ---------- */

.hv2-fx-hero {
  padding: 6.5rem 0 3.5rem;
  background:
    radial-gradient(60% 60% at 85% 0%, rgba(0, 194, 168, 0.12), transparent 70%),
    var(--hv2-deep);
}

@media (min-width: 1024px) {
  .hv2-fx-hero { padding: 8.5rem 0 4.5rem; }
}

/* Pricing/FAQ's .hv2-fx-hero--compact ("plans intruding halfway") is
   handled entirely by its own dedicated rules further down (its own
   padding shorthand at 1024px+, and its own min-height: 0/display:
   block override at 1280px+) — this block no longer touches compact
   heroes at all, so that history doesn't apply here.

   Features (the plain, non-compact .hv2-fx-hero) previously shared a
   min-height: 100svh floor with the compact heroes: forcing Features'
   hero to a full viewport left ~250px of dead dark space below its
   actual (shorter) content before the Overview panel began (Frank's
   screenshot review: "oversized dead runway"). Natural content height
   plus deliberate nav-clearance padding-top instead — no viewport
   locking for Features. */
@media (min-width: 1280px) {
  .hv2-fx-hero:not(.hv2-fx-hero--compact) {
    padding-top: calc(var(--hv2-nav-height) + 6rem);
  }
}

/* Compact hero modifier — Pricing only. Pricing is a fast-conversion
   commercial page, not a narrative scroll: forcing the shared
   min-height:100svh full-viewport lock on a hero this short reserved a
   full screen of empty space before the plan cards ("excessive blank
   space above the cards"). Cancels the lock and trims the extra top
   padding tuned for the taller Features/FAQ hero, while keeping enough
   top padding to clear the fixed nav. Equal specificity to .hv2-fx-hero
   (single class each) — wins on source order since it's declared after. */
/* padding-top is nav-height(65px) + ~95px breathing room, landing the
   eyebrow at ~80-110px below the fixed nav (target range) — measured
   directly, not guessed: 65px nav + this padding minus the nav's own
   height is the actual visible gap once nav overlays the fixed header
   band. */
.hv2-fx-hero--compact { padding: 8rem 0 1.5rem; }

@media (min-width: 1024px) {
  .hv2-fx-hero--compact { padding: 10rem 0 1.5rem; }
}

@media (min-width: 1280px) {
  .hv2-fx-hero--compact {
    min-height: 0;
    display: block;
  }
}

.hv2-fx-hero-inner {
  display: grid;
  gap: 3rem;
}

@media (min-width: 1024px) {
  /* Was align-items: center — the copy column is shorter than the
     hero photo, so centering pulled the eyebrow further down within
     the row than the outer hero's own padding-top already placed it. */
  .hv2-fx-hero-inner { grid-template-columns: 1.05fr 0.95fr; align-items: start; gap: 2.5rem; }
}

/* Compact heroes (Pricing, FAQ) have no second-column visual — the
   2-column grid above still reserved ~53% width for the copy,
   wrapping the H1 across extra lines and inflating the hero's height
   for no visual reason (measured: H1 alone was 175px tall at 1440px
   from unnecessary wraps). Let the copy use the full width instead. */
@media (min-width: 1024px) {
  .hv2-fx-hero--compact .hv2-fx-hero-inner { grid-template-columns: 1fr; }
  .hv2-fx-hero--compact .hv2-fx-hero-copy { max-width: 46rem; }
}

.hv2-fx-hero-h1 {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0.75rem 0 1.1rem;
}

.hv2-fx-hero-lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--hv2-muted);
  max-width: 34rem;
  margin: 0 0 1.75rem;
}

.hv2-fx-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.hv2-fx-hero-primary { padding: 0.85rem 1.5rem; }
.hv2-fx-hero-secondary { padding: 0.85rem 1.5rem; }

/* FAQ Hero's compact category-navigation row — visible without
   crowding the primary CTAs above it; wraps cleanly at narrow widths
   instead of forcing a horizontal scroll. */
.hv2-faq-cat-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(240, 244, 248, 0.12);
}

.hv2-faq-cat-nav a {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--hv2-muted);
  text-decoration: none;
  border: 1px solid rgba(240, 244, 248, 0.16);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  transition: color 160ms ease, border-color 160ms ease;
}

.hv2-faq-cat-nav a:hover,
.hv2-faq-cat-nav a:focus-visible {
  color: var(--hv2-teal);
  border-color: var(--hv2-teal);
}

/* Single hero photo — product-led, one image only, no diagram. */
.hv2-fx-hero-photo { margin: 0; }

/* ---------- 2. Operating-system overview ---------- */

/* Centred vertical stack — tabs as a full-width row, content panel
   below — matching the See It in Action section's structure below
   (.hv2-fx-demo) so the two "four connected responsibilities" /
   "See it in action" sections read as one consistent system instead of
   two different layouts (this one used to be a 15rem sidebar-nav +
   content grid, which is what put its tab row and visual off to one
   side rather than centred under the section heading). */
.hv2-fx-map {
  margin-top: 2.5rem;
  max-width: 62rem;
  margin-left: auto;
  margin-right: auto;
}

.hv2-fx-map-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 1024px) {
  .hv2-fx-map-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow-x: visible;
    gap: 0.5rem;
    margin-bottom: 2rem;
  }
}

.hv2-fx-map-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--hv2-line);
  border-radius: 0.75rem;
  background: var(--hv2-panel);
  color: var(--hv2-muted);
  font: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 200ms var(--hv2-ease), color 200ms var(--hv2-ease), background 200ms var(--hv2-ease);
}

.hv2-fx-map-btn:hover { color: var(--hv2-text); border-color: var(--hv2-teal); }
.hv2-fx-map-btn:focus-visible { outline: 2px solid var(--hv2-teal); outline-offset: 2px; }

.hv2-fx-map-btn[aria-selected="true"] {
  color: var(--hv2-bg);
  background: var(--hv2-teal);
  border-color: var(--hv2-teal);
}

.hv2-fx-map-btn[aria-selected="true"] .hv2-fx-map-btn-num { color: var(--hv2-bg); opacity: 0.65; }

.hv2-fx-map-btn-num {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--hv2-teal);
  letter-spacing: 0.04em;
}

.hv2-fx-map-connector {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1px;
  background: var(--hv2-line);
}

@media (min-width: 1024px) {
  .hv2-fx-map-connector { display: none; }
}

.hv2-fx-map-detail {
  position: relative;
  border: 1px solid var(--hv2-line);
  border-radius: 1rem;
  background: var(--hv2-panel);
  padding: 1.75rem;
}

@media (min-width: 1024px) {
  .hv2-fx-map-detail { padding: 2.5rem; }
}

/* Split composition: selected-state copy on the left, a substantial
   real product screenshot (or clearly labelled placeholder where no
   asset exists yet) on the right — never a bare bordered rectangle. */
.hv2-fx-map-panel {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* .hv2-fx-map-panel's own `display: flex` is an author style, so it
   beats the UA stylesheet's [hidden]{display:none} at equal
   specificity — without this, JS-hidden panels keep rendering (and
   taking up layout height) instead of actually hiding. */
.hv2-fx-map-panel[hidden] { display: none; }

@media (min-width: 900px) {
  .hv2-fx-map-panel { flex-direction: row; align-items: center; }
  /* Same 40/60 copy/visual split as .hv2-fx-demo-panel below, so the
     two sections' frames read as one consistent size, not two
     different ratios. */
  .hv2-fx-map-copy { flex: 0 0 40%; min-width: 0; }
  .hv2-fx-map-visual { flex: 1 1 60%; min-width: 0; }
}

.hv2-fx-map-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.hv2-fx-map-visual-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(52svh, 520px);
  object-fit: contain;
  border-radius: 0.75rem;
  border: 1px solid var(--hv2-line);
  box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.6);
}

.hv2-fx-map-visual-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--hv2-text);
}

.hv2-fx-map-visual-note {
  font-size: 0.8125rem;
}

.hv2-fx-map-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--hv2-teal);
  color: var(--hv2-bg);
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 1.25rem;
}

.hv2-fx-map-promise {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--hv2-text);
  line-height: 1.25;
  margin: 0 0 1rem;
  max-width: 34rem;
}

.hv2-fx-map-explain {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--hv2-muted);
  margin: 0 0 1.25rem;
  max-width: 40rem;
}

.hv2-fx-map-caps {
  list-style: none;
  display: grid;
  gap: 0.55rem;
  margin: 0 0 1.5rem;
  padding: 0;
}

@media (min-width: 640px) {
  .hv2-fx-map-caps { grid-template-columns: 1fr 1fr; }
}

.hv2-fx-map-caps li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  color: var(--hv2-text);
}

.hv2-fx-map-caps li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--hv2-teal);
}

.hv2-fx-map-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
}

.hv2-fx-map-example {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--hv2-muted);
  margin: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hv2-line);
}

.hv2-fx-map-example strong { color: var(--hv2-text); font-weight: 600; }

/* ---------- 1. Hero principle strip (One operating rhythm. Web and pocket.) ---------- */

.hv2-fx-hero-principle {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  max-width: 30rem;
}

.hv2-fx-hero-principle-heading {
  font-size: 0.9375rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.94);
  margin: 0 0 0.35rem;
}

.hv2-fx-hero-principle-copy {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.64);
  margin: 0;
}

/* ---------- 5. See it in action (real product screenshots, tabbed) ---------- */

/* Same centred max-width as .hv2-fx-map above, so both sections'
   tab rows and content frames align to the same column width. */
.hv2-fx-demo {
  margin-top: 2.75rem;
  max-width: 62rem;
  margin-left: auto;
  margin-right: auto;
}

.hv2-fx-demo-nav {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  .hv2-fx-demo-nav {
    grid-template-columns: repeat(4, 1fr);
    display: grid;
    overflow-x: visible;
    margin-bottom: 2rem;
  }
}

.hv2-fx-demo-btn {
  flex-shrink: 0;
  min-width: 9rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--hv2-line);
  border-radius: 0.85rem;
  background: var(--hv2-bg);
  color: var(--hv2-text);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 200ms var(--hv2-ease), background 200ms var(--hv2-ease);
}

.hv2-fx-demo-btn:hover { border-color: var(--hv2-teal); }
.hv2-fx-demo-btn:focus-visible { outline: 2px solid var(--hv2-teal); outline-offset: 2px; }

.hv2-fx-demo-btn[aria-selected="true"] {
  border-color: var(--hv2-teal);
  background: var(--hv2-panelhi);
  box-shadow: inset 3px 0 0 var(--hv2-teal);
}

.hv2-fx-demo-btn-num {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--hv2-teal);
  letter-spacing: 0.04em;
}

.hv2-fx-demo-btn-name { font-weight: 700; font-size: 0.9375rem; }

.hv2-fx-demo-stage {
  border: 1px solid var(--hv2-line);
  border-radius: 1.25rem;
  background: var(--hv2-panel);
  padding: 1.75rem;
}

@media (min-width: 1024px) {
  .hv2-fx-demo-stage { padding: 2.5rem; }
}

.hv2-fx-demo-panel {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  animation: hv2DemoPanelIn 200ms var(--hv2-ease) both;
}

/* Same [hidden] specificity fix as .hv2-fx-map-panel above. */
.hv2-fx-demo-panel[hidden] { display: none; }

@media (min-width: 900px) {
  .hv2-fx-demo-panel { flex-direction: row; align-items: center; gap: 2.5rem; }
  /* Same 40/60 split as .hv2-fx-map-panel above. */
  .hv2-fx-demo-copy { flex: 0 0 40%; min-width: 0; }
  .hv2-fx-demo-visual { flex: 1 1 60%; min-width: 0; }
}

@keyframes hv2DemoPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.hv2-fx-demo-panel-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}

.hv2-fx-demo-panel-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--hv2-muted);
  margin: 0 0 1rem;
  max-width: 26rem;
}

.hv2-fx-demo-panel-annotation {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--hv2-teal);
  margin: 0;
}

.hv2-fx-demo-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.hv2-fx-demo-visual-img {
  display: block;
  width: 100%;
  height: auto;
  /* 52svh (measured: 468px at a 900px viewport) let the image bottom
     land at y:969 — 69px below the fold, clipped by the viewport
     bottom. The space actually available at this point (below the
     eyebrow/heading/tab-row stack and the stage's own padding) is
     closer to 44svh — measured directly, not assumed. */
  max-height: min(44svh, 480px);
  object-fit: contain;
  border-radius: 0.75rem;
  border: 1px solid var(--hv2-line);
  box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .hv2-fx-demo-panel { animation: none; }
}

/* ---------- 3. Capability catalogue (compact static list, no JS) ---------- */

.hv2-fx-catalogue-section .hv2-conv-header { margin-bottom: 1.5rem; }

/* Confirmed live: Catalogue's panel rendered at 981px in a 900px
   viewport (measured via getBoundingClientRect, not assumed) — just
   81px over. That's enough for the final row ("Quiet hours") to still
   be partially below the fold at the exact scroll position Catalogue's
   sticky window ends, with Differentiators (elementFromPoint-confirmed
   topmost at that point) already covering it — a real premature-
   overlap defect, not a false positive. Trimmed spacing here (margin,
   row/summary padding) recovers that ~81px without touching shared
   nav-clearance padding used by every Features panel. */
.hv2-fx-catalogue {
  margin-top: 1.25rem;
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .hv2-fx-catalogue { grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
}

@media (min-width: 1024px) {
  .hv2-fx-catalogue { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

.hv2-fx-catalogue-group {
  border: 1px solid var(--hv2-line);
  border-radius: 0.75rem;
}

/* Mobile: real, JS-free disclosure — first group open, rest closed, all
   16 groups' capabilities still reachable with a single tap. Tablet and
   desktop: every group is forced open regardless of the `open`
   attribute, so no capability is ever hidden once there's room to show
   it — this selector's specificity beats the UA details-closed rule. */
@media (min-width: 640px) {
  .hv2-fx-catalogue-group:not([open]) > .hv2-fx-catalogue-list {
    display: block;
  }

  /* Chromium/Safari wrap non-summary <details> children in an
     internal ::details-content box whose block-size the browser
     animates between 0 and auto based on the `open` attribute —
     forcing the child's own `display` isn't enough to stop it
     clipping/collapsing that box, so it's targeted directly too. */
  .hv2-fx-catalogue-group::details-content {
    block-size: auto;
    content-visibility: visible;
  }

  .hv2-fx-catalogue-group-summary::after { display: none; }
}

.hv2-fx-catalogue-group-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  padding: 0.6rem 1rem;
}

.hv2-fx-catalogue-group-summary::-webkit-details-marker { display: none; }
.hv2-fx-catalogue-group-summary::marker { content: ''; }

.hv2-fx-catalogue-group-summary::after {
  content: '\25BE';
  color: var(--hv2-teal);
  font-size: 0.75rem;
  transition: transform 200ms ease;
}

.hv2-fx-catalogue-group[open] .hv2-fx-catalogue-group-summary::after { transform: rotate(180deg); }

.hv2-fx-catalogue-group-title {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--hv2-teal);
}

.hv2-fx-catalogue-group-default {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--hv2-muted);
  white-space: nowrap;
}

.hv2-fx-catalogue-list {
  list-style: none;
  margin: 0;
  padding: 0 1rem 0.25rem;
  border-top: 1px solid var(--hv2-line);
}

.hv2-fx-catalogue-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--hv2-line);
}

.hv2-fx-catalogue-row:last-child { border-bottom: none; }

.hv2-fx-catalogue-text {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  min-width: 0;
  flex: 1 1 12rem;
}

.hv2-fx-catalogue-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hv2-text);
}

.hv2-fx-catalogue-desc {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--hv2-muted);
}

.hv2-fx-catalogue-badges {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* ---------- 4. Strongest differentiators (2x2 grid) ---------- */

.hv2-fx-differentiators {
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .hv2-fx-differentiators { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}

@media (min-width: 1280px) {
  .hv2-fx-differentiators { gap: 2rem; }
}

/* Cards previously shared the panel's own background (var(--hv2-bg)),
   distinguished only by a 1px hairline — read as "tiny cards floating
   in an empty white field". --hv2-panelhi isn't usable here: white
   sections deliberately collapse every surface token to pure white
   (the "one background per section, not nested light surfaces" rule
   used throughout this stylesheet), so a flat background would be
   invisible. A visible shadow + heavier border + larger padding/
   min-height gives each card real weight without breaking that rule. */
.hv2-fx-differentiator-card {
  border: 1px solid var(--hv2-line);
  border-radius: 1.25rem;
  padding: 2.25rem 2rem;
  background: var(--hv2-bg);
  box-shadow: 0 12px 32px -20px rgba(15, 27, 45, 0.28);
  min-height: 14rem;
  display: flex;
  flex-direction: column;
}

.hv2-fx-differentiator-num {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--hv2-teal);
  letter-spacing: -0.02em;
  opacity: 0.5;
  margin-bottom: 0.5rem;
}

.hv2-fx-differentiator-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.85rem;
}

.hv2-fx-differentiator-copy {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--hv2-muted);
  margin: 0 0 1.25rem;
  max-width: 32rem;
}

.hv2-fx-differentiator-tag {
  display: inline-flex;
  align-self: flex-start;
  margin-top: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hv2-muted);
  border: 1px solid var(--hv2-line);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

@media (max-width: 767px) {
  .hv2-fx-map-detail { padding: 1.5rem; }
}

/* =====================================================================
   MIXED LIGHT/DARK EDITORIAL SYSTEM (no user-facing theme toggle).
   .hv2-light-section re-points the same --hv2-bg/-deep/-panel/-panelhi/
   -muted/-line/-text/-teal/-tealh custom properties every existing
   component already reads via var(...), plus sets color: var(--hv2-text)
   on itself for inherited text. Adding the class to a section re-themes
   everything inside it — badges, eyebrows, headings, buttons, borders —
   with no per-component overrides required.
   ===================================================================== */

.hv2-light-section {
  /* All four surface tokens collapse to the SAME single light value —
     one background system per section, not a section tone plus a
     separate card tone plus a separate alt tone. Cards (map detail,
     status/context panels, quadrant cells) stay legible only through
     their existing border, never through a background-colour step,
     which is what "nested light surfaces" meant in practice: a white
     card floating on a cream section floating on a blue-grey page. */
  --hv2-bg: var(--hv2-light-bg);
  --hv2-deep: var(--hv2-light-bg);
  --hv2-panel: var(--hv2-light-bg);
  --hv2-panelhi: var(--hv2-light-bg);
  --hv2-muted: var(--hv2-light-muted);
  --hv2-line: var(--hv2-light-border);
  --hv2-text: var(--hv2-light-text);
  --hv2-teal: var(--hv2-light-accent);
  --hv2-tealh: var(--hv2-light-accent-hover);
  background: var(--hv2-bg);
  color: var(--hv2-text);
}

/* Explicit dark-section restoration — used on sections that must never
   depend on inherited/leaked variables from a preceding sibling (they
   don't leak under normal CSS custom-property scoping, since siblings
   never inherit from each other, but this makes the intent explicit
   and removes any doubt when auditing the cascade section by section). */
.hv2-dark-section {
  --hv2-bg: #0F1B2D;
  --hv2-deep: #0B1422;
  --hv2-panel: #1A273A;
  --hv2-panelhi: #1E2D43;
  --hv2-muted: #94A3B8;
  --hv2-line: #1E293B;
  --hv2-text: #F0F4F8;
  --hv2-teal: #00C2A8;
  --hv2-tealh: #00A892;
  background: var(--hv2-bg);
  color: var(--hv2-text);
}

/* .hv2-footer and .hv2-closing both also carry .hv2-dark-section (for
   its text/border tokens) and both set their own, more specific intent
   — background: var(--hv2-deep), one shade darker than --hv2-bg, to
   match the Final CTA panel immediately above them. .hv2-dark-section's
   own `background: var(--hv2-bg)` above has equal selector specificity
   and comes later in the file, so it silently won that fight by source
   order alone, leaving the footer/closing a visibly lighter navy than
   the panel it sits directly beneath (confirmed live: #0F1B2D footer
   vs #0B1422 Final CTA) — the "detached page" seam. Compound selectors
   here outrank a single class regardless of source order, without
   touching .hv2-dark-section itself (used broadly elsewhere). */
.hv2-footer.hv2-dark-section,
.hv2-closing.hv2-dark-section {
  background: var(--hv2-deep);
}

/* Pricing/FAQ's Final CTA section (plain normal-flow content, not a
   sliding cover panel like Homepage/Features) sits directly above
   .hv2-closing and must match its background now that .hv2-closing
   resolves to --hv2-deep above — otherwise fixing the Homepage/Features
   seam would have introduced the same seam here in reverse (closing
   darker than the section right above it). Targeted by ID, not a class
   shared with the page's other, lighter --hv2-bg sections. */
#pricingFinalCta.hv2-dark-section,
#faqFinalCta.hv2-dark-section {
  background: var(--hv2-deep);
}

/* Pricing/FAQ's Final CTA is the one rounded panel that opens the
   closing block (same role as Homepage/Features' Final CTA panel) —
   .hv2-closing, immediately below, now connects directly beneath it
   with no radius of its own and no gap, so the two read as one
   continuous surface instead of two stacked rounded cards. */
#pricingFinalCta.hv2-dark-section,
#faqFinalCta.hv2-dark-section {
  border-radius: var(--hv2-shell-radius) var(--hv2-shell-radius) 0 0;
}

/* Pure-white variant — Features page only. Distinct from
   .hv2-light-section (cream #F7F3EC), which stays exactly as-is
   because the Homepage FAQ still uses it and the Homepage must not
   change. Same "one clear background system" discipline: every
   surface token collapses to the same #FFFFFF, cards are distinguished
   only by a very light neutral-grey border, never a background step. */
.hv2-white-section {
  --hv2-bg: #FFFFFF;
  --hv2-deep: #FFFFFF;
  --hv2-panel: #FFFFFF;
  --hv2-panelhi: #FFFFFF;
  --hv2-muted: #5B6472;
  --hv2-line: #E5E7EB;
  --hv2-text: #0F1B2D;
  --hv2-teal: #0F766E;
  --hv2-tealh: #0B5D57;
  background: var(--hv2-bg);
  color: var(--hv2-text);
}

/* Active-stage marker on light sections: a filled pill alone can read as
   "just a colour change" — add a non-colour checkmark so the active
   stage is identifiable even without colour perception. */
.hv2-fx-map-btn[aria-selected="true"]::after {
  content: '\2713';
  margin-left: auto;
  font-weight: 700;
}

/* ---------- Editorial photography ----------
   Four real images, each 762×452 source, framed at a uniform 4:3 crop
   so the visual system reads as one consistent editorial treatment
   rather than four different aspect ratios. 4:3 against a 1.69:1
   source crops horizontally only (object-fit: cover scales to fill
   the taller target, so height is never cropped) — each image gets
   its own object-position below to keep the face/hands/notebook/phone
   inside that horizontal crop; see the final report for the exact
   value used per image and why. */

.hv2-fx-photo {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hv2-line);
  background: var(--hv2-deep);
}

.hv2-fx-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 900ms var(--hv2-ease);
}

.hv2-fx-photo.hv2-is-visible img { transform: scale(1); }

/* Deliberate per-image crop anchor — keeps the subject (face, hands,
   notebook or phone) inside the 4:3 frame for each specific photo.
   Only two images are used on the rebuilt Features page (hero,
   Pocket Chief differentiator) — features-run-week.webp and
   features-close-loop.webp are no longer referenced in the page, so
   their object-position rules were removed; the files themselves are
   left on disk, not deleted, since nothing in this task confirmed they
   are unused anywhere else in the repository. */
.hv2-fx-photo--hero img { object-position: 62% 35%; }
.hv2-fx-photo--carry-context img { object-position: 40% 30%; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .hv2-reveal {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }

  .hv2-root * {
    scroll-behavior: auto !important;
  }

  .hv2-faq-chevron {
    transition: none;
  }

  .hv2-fx-map-btn {
    transition: none;
  }

  .hv2-fx-photo img {
    transform: none;
    transition: none;
  }
}