/* ─────────────────────────────────────────────────────────────────
   CRO Block 3 — Hero Video (final override)
   Loaded last via base.html.twig 1..17 loop. Token-bound rebuild
   that overrides legacy cro-hero-video.css cosmetic rules.
   Scheme: paper-2 (alternating ivory) so the video card lifts.
   ───────────────────────────────────────────────────────────── */

/* ── Section shell ───────────────────────────────────────────── */
.section.cro-hero-video,
.section.block-cro-block-3,
.section.hero-compact-video,
.section.hero-video-container {
  background: var(--ds-paper-2) !important;
  color: var(--ds-ink) !important;
  position: relative;
  overflow: hidden;
  /* Section padding handled by .section.section-lg in design-system.css (W3-A24). */
}

/* ── Industry stats widget (top) ─────────────────────────────── */
.cro-hero-video .hero-industry-stats, .block-cro-block-3 .hero-industry-stats {
  margin: 0 auto var(--ds-space-6) !important;
  max-width: 1180px;
}
.cro-hero-video .stats-grid, .block-cro-block-3 .stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ds-space-2);
}
@media (min-width: 768px) {
  .cro-hero-video .stats-grid, .block-cro-block-3 .stats-grid { grid-template-columns: repeat(4, 1fr); gap: var(--ds-space-3); }
}
.cro-hero-video .stat-item, .block-cro-block-3 .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-2);
  /* !important to win against the global `main button:where(...)` reset
     in design-system.css (T3-BUTTON-SYSTEM) which uses --ds-paper bg
     and would otherwise paint these stat tiles cream-on-cream. */
  background: var(--scheme-card-bg, #fff) !important;
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius) !important;
  cursor: pointer;
  font-family: var(--ds-font-body);
  transition: all var(--ds-duration) var(--ds-ease-out);
}
.cro-hero-video .stat-item:hover, .block-cro-block-3 .stat-item:hover {
  border-color: var(--ds-cta);
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-md);
}
.cro-hero-video .stat-item.active, .block-cro-block-3 .stat-item.active {
  border-color: var(--ds-cta);
  /* !important to win against the global button reset in design-system.css. */
  background: color-mix(in srgb, var(--ds-cta) 6%, white) !important;
}
.cro-hero-video .stat-icon, .block-cro-block-3 .stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ds-radius-pill);
  background: color-mix(in srgb, var(--ds-cta) 14%, white);
  color: var(--ds-cta);
}
.cro-hero-video .stat-icon svg,
.block-cro-block-3 .stat-icon svg,
.cro-hero-video .stat-icon img,
.block-cro-block-3 .stat-icon img,
.cro-hero-video .stat-svg,
.block-cro-block-3 .stat-svg,
.cro-hero-video .stat-svg svg, .block-cro-block-3 .stat-svg svg {
  width: 18px !important;
  height: 18px !important;
}
.cro-hero-video .stat-label, .block-cro-block-3 .stat-label {
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  color: var(--ds-ink);
  text-align: center;
}
.cro-hero-video .stat-count, .block-cro-block-3 .stat-count {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-sm);
  color: var(--ds-cta);
  letter-spacing: 0.005em;
  line-height: 1;
}

/* ── Container columns ───────────────────────────────────────── */
/* The .row contains: [hero-industry-stats][col-lg-6 video][col-lg-6 right][hero-modal].
   Use a single-column flex flow on mobile, then a two-column grid where
   the industry-stats and modal span the full row. */
.cro-hero-video .container > .row, .block-cro-block-3 .container > .row {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
  align-items: stretch;
}
.cro-hero-video .container > .row > .hero-industry-stats, .block-cro-block-3 .container > .row > .hero-industry-stats {
  order: -1;
  width: 100%;
}
.cro-hero-video .container > .row > .hero-modal, .block-cro-block-3 .container > .row > .hero-modal {
  order: 99;
}
@media (min-width: 992px) {
  .cro-hero-video .container > .row, .block-cro-block-3 .container > .row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--ds-space-6) var(--ds-space-6);
    align-items: start;
  }
  .cro-hero-video .container > .row > .hero-industry-stats, .block-cro-block-3 .container > .row > .hero-industry-stats {
    grid-column: 1 / -1;
  }
  .cro-hero-video .container > .row > .hero-modal, .block-cro-block-3 .container > .row > .hero-modal {
    grid-column: 1 / -1;
    /* keep modal off-flow visually */
  }
}
.cro-hero-video .col-lg-6, .block-cro-block-3 .col-lg-6 {
  width: 100%; max-width: 100%; flex: none; padding: 0;
}

/* ── Video card ──────────────────────────────────────────────── */
.cro-hero-video .hero-video-card, .block-cro-block-3 .hero-video-card {
  background: var(--scheme-card-bg, #fff) !important;
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow-lg);
  overflow: hidden;
}
.cro-hero-video .video-card-header, .block-cro-block-3 .video-card-header {
  padding: var(--ds-space-3) var(--ds-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  border-bottom: 1px solid var(--ds-rule);
  flex-wrap: wrap;
}
.cro-hero-video .video-card-title, .block-cro-block-3 .video-card-title {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-lg);
  font-weight: 700;
  color: var(--ds-ink) !important;
  margin: 0;
  flex-wrap: wrap;
}
.cro-hero-video .live-badge, .block-cro-block-3 .live-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ds-cta-aa, var(--ds-cta-dk));
  padding: 0.2rem 0.5rem;
  border-radius: var(--ds-radius-pill);
  position: relative;
}
.cro-hero-video .live-badge::before, .block-cro-block-3 .live-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--ds-radius-pill);
  background: #fff;
  margin-right: 0.4rem;
  animation: cro-hero-video-pulse 1.4s ease-in-out infinite;
}
@keyframes cro-hero-video-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.cro-hero-video .video-card-meta, .block-cro-block-3 .video-card-meta {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  color: var(--ds-ink-soft);
}

/* Video container 16:9 + .ds-image-hero recipe */
.cro-hero-video .video-embed-container, .block-cro-block-3 .video-embed-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ds-ink);
  overflow: hidden;
}
.cro-hero-video .hero-video-player, .block-cro-block-3 .hero-video-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Video controls overlay */
.cro-hero-video .video-controls-overlay, .block-cro-block-3 .video-controls-overlay {
  position: absolute;
  bottom: var(--ds-space-3);
  right: var(--ds-space-3);
  display: flex;
  gap: var(--ds-space-2);
  z-index: 2;
}
.cro-hero-video .video-control-btn, .block-cro-block-3 .video-control-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  /* !important to win against the global `main button:where(...)` reset
     in design-system.css (T3-BUTTON-SYSTEM). Same justification applies
     below to .chapter-pill, .tab-pill-compact, .trust-badge-compact,
     .carousel-compact-btn, .modal-close. */
  background: rgba(14,15,12,.70) !important;
  color: #fff;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: var(--ds-radius-pill) !important;
  cursor: pointer;
  transition: background var(--ds-duration-fast) var(--ds-ease-out),
              transform var(--ds-duration-fast) var(--ds-ease-out);
  padding: 0 !important;
}
.cro-hero-video .video-control-btn:hover, .block-cro-block-3 .video-control-btn:hover {
  background: var(--ds-cta-aa, var(--ds-cta-dk));
  transform: scale(1.06);
}
.cro-hero-video .video-control-btn svg, .block-cro-block-3 .video-control-btn svg {
  width: 18px !important;
  height: 18px !important;
}

/* Centered play button (decorative — when present) */
.cro-hero-video .video-play-button, .block-cro-block-3 .video-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-cta-aa, var(--ds-cta-dk));
  color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--ds-shadow-cta);
  transition: transform var(--ds-duration-fast) var(--ds-ease-out),
              background var(--ds-duration) var(--ds-ease-out);
}
.cro-hero-video .video-play-button:hover, .block-cro-block-3 .video-play-button:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--ds-cta-dk);
}
.cro-hero-video .video-play-button svg, .block-cro-block-3 .video-play-button svg {
  width: 28px !important;
  height: 28px !important;
}

/* Chapter pills */
.cro-hero-video .video-chapters, .block-cro-block-3 .video-chapters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-4);
  border-bottom: 1px solid var(--ds-rule);
}
.cro-hero-video .chapter-pill, .block-cro-block-3 .chapter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--ds-touch-target);
  padding: 0.4rem 0.85rem !important;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  /* !important: override design-system T3-BUTTON-SYSTEM global button reset. */
  background: var(--scheme-card-bg, #fff) !important;
  color: var(--ds-ink);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-pill) !important;
  cursor: pointer;
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: var(--ds-duration);
  transition-timing-function: var(--ds-ease-out);
}
.cro-hero-video .chapter-pill:hover, .block-cro-block-3 .chapter-pill:hover { border-color: var(--ds-cta); color: var(--ds-cta) !important; }
.cro-hero-video .chapter-pill.active, .block-cro-block-3 .chapter-pill.active {
  background: var(--ds-ink) !important;
  color: #fff !important;
  border-color: var(--ds-ink);
}
.cro-hero-video .chapter-number, .block-cro-block-3 .chapter-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--ds-radius-pill);
  background: color-mix(in srgb, var(--ds-cta) 18%, white);
  color: var(--ds-cta-dk);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 700;
}
.cro-hero-video .chapter-pill.active .chapter-number, .block-cro-block-3 .chapter-pill.active .chapter-number { background: var(--ds-cta-aa, var(--ds-cta-dk)); color: #fff; }

/* Quick facts (3-up benefit pills) */
.cro-hero-video .video-quick-facts, .block-cro-block-3 .video-quick-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-4);
}
@media (min-width: 768px) {
  .cro-hero-video .video-quick-facts, .block-cro-block-3 .video-quick-facts { grid-template-columns: repeat(3, 1fr); }
}
.cro-hero-video .fact-item, .block-cro-block-3 .fact-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-2);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  color: var(--ds-ink-soft);
}
.cro-hero-video .fact-icon, .block-cro-block-3 .fact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--ds-radius-pill);
  background: color-mix(in srgb, var(--ds-trust) 14%, white);
  color: var(--ds-trust);
  flex-shrink: 0;
}
.cro-hero-video .fact-icon svg,
.block-cro-block-3 .fact-icon svg,
.cro-hero-video .fact-icon img,
.block-cro-block-3 .fact-icon img,
.cro-hero-video .fact-svg,
.block-cro-block-3 .fact-svg,
.cro-hero-video .fact-svg svg, .block-cro-block-3 .fact-svg svg {
  width: 14px !important;
  height: 14px !important;
}

/* ── Right column: contact + tabs ────────────────────────────── */
.cro-hero-video .hero-contact-card-compact, .block-cro-block-3 .hero-contact-card-compact {
  background: var(--scheme-card-bg, #fff);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius);
  padding: var(--ds-space-4) !important;
  box-shadow: var(--ds-shadow-sm);
}
.cro-hero-video .contact-compact-title, .block-cro-block-3 .contact-compact-title {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-ink-soft);
  margin: 0 0 var(--ds-space-3);
}
.cro-hero-video .contact-methods-compact, .block-cro-block-3 .contact-methods-compact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}
.cro-hero-video .contact-method-compact, .block-cro-block-3 .contact-method-compact {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 0.5rem 0.9rem;
  background: color-mix(in srgb, var(--ds-cta) 8%, white);
  color: var(--ds-cta-dk);
  border: 1px solid color-mix(in srgb, var(--ds-cta) 24%, transparent);
  border-radius: var(--ds-radius-pill);
  text-decoration: none !important;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  transition: all var(--ds-duration) var(--ds-ease-out);
}
.cro-hero-video .contact-method-compact:hover, .block-cro-block-3 .contact-method-compact:hover {
  background: var(--ds-cta-aa, var(--ds-cta-dk));
  color: #fff;
  border-color: var(--ds-cta);
}
.cro-hero-video .contact-icon-compact,
.block-cro-block-3 .contact-icon-compact,
.cro-hero-video .contact-svg,
.block-cro-block-3 .contact-svg,
.cro-hero-video .contact-method-compact svg,
.block-cro-block-3 .contact-method-compact svg,
.cro-hero-video .contact-method-compact img, .block-cro-block-3 .contact-method-compact img {
  width: 16px !important;
  height: 16px !important;
}

/* Tabs card */
.cro-hero-video .hero-tabs-card-compact, .block-cro-block-3 .hero-tabs-card-compact {
  background: var(--scheme-card-bg, #fff);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius);
  padding: var(--ds-space-4) !important;
  box-shadow: var(--ds-shadow-sm);
}
.cro-hero-video .tabs-pill-nav-compact, .block-cro-block-3 .tabs-pill-nav-compact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin-bottom: var(--ds-space-4);
  padding-bottom: var(--ds-space-3);
  border-bottom: 1px solid var(--ds-rule);
}
.cro-hero-video .tab-pill-compact, .block-cro-block-3 .tab-pill-compact {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-height: var(--ds-touch-target);
  padding: 0.45rem 0.85rem !important;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  /* !important: override design-system T3-BUTTON-SYSTEM global button reset. */
  background: var(--scheme-card-bg, #fff) !important;
  color: var(--ds-ink-soft);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-pill) !important;
  cursor: pointer;
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: var(--ds-duration);
  transition-timing-function: var(--ds-ease-out);
}
.cro-hero-video .tab-pill-compact:hover, .block-cro-block-3 .tab-pill-compact:hover { border-color: var(--ds-cta); color: var(--ds-cta) !important; }
.cro-hero-video .tab-pill-compact.active,
.block-cro-block-3 .tab-pill-compact.active,
.cro-hero-video .tab-pill-compact[aria-selected="true"], .block-cro-block-3 .tab-pill-compact[aria-selected="true"] {
  background: var(--ds-cta-aa, var(--ds-cta-dk)) !important;
  color: #fff !important;
  border-color: var(--ds-cta);
}
.cro-hero-video .pill-icon-compact,
.block-cro-block-3 .pill-icon-compact {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
}
.cro-hero-video .pill-icon-compact .icon-preset,
.block-cro-block-3 .pill-icon-compact .icon-preset,
.cro-hero-video .pill-icon-compact .icon-svg,
.block-cro-block-3 .pill-icon-compact .icon-svg,
.cro-hero-video .pill-icon-compact .icon-custom,
.block-cro-block-3 .pill-icon-compact .icon-custom,
.cro-hero-video .tab-svg,
.block-cro-block-3 .tab-svg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px;
  line-height: 0 !important;
}
.cro-hero-video .pill-icon-compact svg,
.block-cro-block-3 .pill-icon-compact svg,
.cro-hero-video .pill-icon-compact img,
.block-cro-block-3 .pill-icon-compact img,
.cro-hero-video .tab-svg svg,
.block-cro-block-3 .tab-svg svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  flex: 0 0 14px;
}
.cro-hero-video .pill-label-compact,
.block-cro-block-3 .pill-label-compact {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}
.cro-hero-video .tab-compact-pane, .block-cro-block-3 .tab-compact-pane { display: none; }
.cro-hero-video .tab-compact-pane.active, .block-cro-block-3 .tab-compact-pane.active { display: block; }

/* Trust score */
.cro-hero-video .trust-score-compact, .block-cro-block-3 .trust-score-compact {
  text-align: center;
  margin-bottom: var(--ds-space-3);
}
.cro-hero-video .trust-number-compact, .block-cro-block-3 .trust-number-compact {
  font-family: var(--ds-font-display);
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  letter-spacing: 0.005em;
  color: var(--ds-cta);
  line-height: 1;
}
.cro-hero-video .trust-denom-compact, .block-cro-block-3 .trust-denom-compact {
  font-size: 0.45em;
  color: var(--ds-ink-mute);
}
.cro-hero-video .trust-bar-compact, .block-cro-block-3 .trust-bar-compact {
  height: 6px;
  background: var(--ds-rule);
  border-radius: var(--ds-radius-pill);
  overflow: hidden;
  margin-bottom: var(--ds-space-3);
}
.cro-hero-video .trust-bar-fill-compact, .block-cro-block-3 .trust-bar-fill-compact {
  height: 100%;
  background: linear-gradient(90deg, var(--ds-cta), var(--ds-trust));
  transition: width 1.2s var(--ds-ease-out);
}
.cro-hero-video .trust-badges-compact-grid, .block-cro-block-3 .trust-badges-compact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-space-2);
  margin-bottom: var(--ds-space-3);
}
.cro-hero-video .trust-badges-compact-grid .trust-badge-compact, .block-cro-block-3 .trust-badges-compact-grid .trust-badge-compact {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem !important;
  /* !important: override design-system T3-BUTTON-SYSTEM global button reset. */
  background: var(--ds-paper) !important;
  color: var(--ds-ink);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-sm) !important;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--ds-duration) var(--ds-ease-out);
}
.cro-hero-video .trust-badges-compact-grid .trust-badge-compact:hover, .block-cro-block-3 .trust-badges-compact-grid .trust-badge-compact:hover {
  border-color: var(--ds-cta);
  background: var(--scheme-card-bg, #fff);
}
.cro-hero-video .badge-icon-compact,
.block-cro-block-3 .badge-icon-compact,
.cro-hero-video .badge-svg,
.block-cro-block-3 .badge-svg,
.cro-hero-video .badge-svg svg, .block-cro-block-3 .badge-svg svg {
  width: 14px !important;
  height: 14px !important;
}
.cro-hero-video .verify-btn-compact, .block-cro-block-3 .verify-btn-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  width: 100%;
  padding: 0.7rem 1rem !important;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 700;
  color: #fff;
  /* !important: override design-system T3-BUTTON-SYSTEM global button reset. */
  background: var(--ds-cta-aa, var(--ds-cta-dk)) !important;
  border: none !important;
  border-radius: var(--ds-radius-sm) !important;
  cursor: pointer;
  transition: background var(--ds-duration) var(--ds-ease-out);
}
.cro-hero-video .verify-btn-compact:hover, .block-cro-block-3 .verify-btn-compact:hover { background: var(--ds-cta-dk); }
.cro-hero-video .verify-icon,
.block-cro-block-3 .verify-icon,
.cro-hero-video .verify-svg,
.block-cro-block-3 .verify-svg,
.cro-hero-video .verify-btn-compact svg, .block-cro-block-3 .verify-btn-compact svg {
  width: 14px !important;
  height: 14px !important;
}

/* Testimonial carousel (proof tab) */
.cro-hero-video .testimonial-compact-slide, .block-cro-block-3 .testimonial-compact-slide { display: none; }
.cro-hero-video .testimonial-compact-slide.active, .block-cro-block-3 .testimonial-compact-slide.active { display: block; }
.cro-hero-video .testimonial-compact-stars, .block-cro-block-3 .testimonial-compact-stars { display: inline-flex; gap: 0.15rem; margin-bottom: var(--ds-space-2); }
.cro-hero-video .testimonial-compact-stars svg, .block-cro-block-3 .testimonial-compact-stars svg { width: 12px !important; height: 12px !important; }
.cro-hero-video .testimonial-compact-quote, .block-cro-block-3 .testimonial-compact-quote {
  font-family: var(--ds-font-serif);
  font-style: italic;
  font-size: var(--ds-fs-body);
  color: var(--ds-ink);
  line-height: 1.5;
  margin: 0 0 var(--ds-space-2);
}
.cro-hero-video .testimonial-compact-author, .block-cro-block-3 .testimonial-compact-author {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  color: var(--ds-ink-soft);
  margin: 0;
}
.cro-hero-video .testimonial-compact-author strong, .block-cro-block-3 .testimonial-compact-author strong { color: var(--ds-ink); }
.cro-hero-video .author-detail-compact, .block-cro-block-3 .author-detail-compact { color: var(--ds-ink-mute); }

.cro-hero-video .carousel-compact-nav, .block-cro-block-3 .carousel-compact-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
  margin-top: var(--ds-space-3);
}
.cro-hero-video .carousel-compact-btn, .block-cro-block-3 .carousel-compact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  /* !important: override design-system T3-BUTTON-SYSTEM global button reset. */
  background: var(--ds-paper) !important;
  color: var(--ds-ink);
  border: 1px solid var(--ds-rule) !important;
  border-radius: var(--ds-radius-pill) !important;
  cursor: pointer;
  transition: all var(--ds-duration) var(--ds-ease-out);
  padding: 0 !important;
}
.cro-hero-video .carousel-compact-btn:hover, .block-cro-block-3 .carousel-compact-btn:hover { border-color: var(--ds-cta); color: var(--ds-cta); }
.cro-hero-video .carousel-compact-btn svg, .block-cro-block-3 .carousel-compact-btn svg { width: 14px !important; height: 14px !important; }
.cro-hero-video .carousel-compact-counter, .block-cro-block-3 .carousel-compact-counter {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-body-sm);
  color: var(--ds-ink-mute);
}

/* Benefits tab */
.cro-hero-video .benefits-compact-grid, .block-cro-block-3 .benefits-compact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-2);
}
@media (min-width: 576px) {
  .cro-hero-video .benefits-compact-grid, .block-cro-block-3 .benefits-compact-grid { grid-template-columns: 1fr 1fr; }
}
.cro-hero-video .benefit-compact-item, .block-cro-block-3 .benefit-compact-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-2);
  background: var(--ds-paper);
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  color: var(--ds-ink);
}
.cro-hero-video .benefit-icon-compact,
.block-cro-block-3 .benefit-icon-compact,
.cro-hero-video .benefit-svg,
.block-cro-block-3 .benefit-svg,
.cro-hero-video .benefit-svg svg, .block-cro-block-3 .benefit-svg svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--ds-trust);
  stroke: var(--ds-trust);
}

/* VoC card
   WAVE3-F07 (2026-05-08) — MAJOR fix: Pattern-B local scheme rebind
   (doctrine §B). Self-contained dark callout inside a paper-2 light
   section. Today no descendant reads var(--ds-ink) directly so contrast
   is currently safe, but the dark surface MUST locally rebind --scheme-fg
   and the defensive --ds-ink triplet so any future descendant
   (or any cross-cutting `var(--scheme-fg, #fff)` consumer) resolves to
   white text. */
.cro-hero-video .hero-voc-card-compact, .block-cro-block-3 .hero-voc-card-compact {
  --scheme-bg: var(--ds-ink);
  --scheme-fg: #fff;
  --scheme-fg-soft: rgba(255,247,227,.85);
  --scheme-fg-mute: rgba(255,247,227,.65);
  --scheme-card-bg: rgba(255,255,255,.06);
  --scheme-rule: rgba(255,255,255,.18);
  --ds-ink: #fff;
  --ds-ink-soft: rgba(255,247,227,.85);
  --ds-ink-mute: rgba(255,247,227,.65);

  background: #0e0f0c; /* literal hex — local --ds-ink rebind would otherwise re-paint white */
  color: #fff;
  border-radius: var(--ds-radius);
  padding: var(--ds-space-4) !important;
  box-shadow: var(--ds-shadow-md);
}
.cro-hero-video .voc-stars, .block-cro-block-3 .voc-stars { display: inline-flex; gap: 0.15rem; margin-bottom: var(--ds-space-2); }
.cro-hero-video .voc-stars svg, .block-cro-block-3 .voc-stars svg { width: 14px !important; height: 14px !important; }
.cro-hero-video .voc-testimonial-item, .block-cro-block-3 .voc-testimonial-item { display: none; }
.cro-hero-video .voc-testimonial-item.active, .block-cro-block-3 .voc-testimonial-item.active { display: block; }
.cro-hero-video .voc-quote, .block-cro-block-3 .voc-quote {
  font-family: var(--ds-font-serif);
  font-style: italic;
  font-size: var(--ds-fs-body-lg);
  line-height: 1.5;
  color: rgba(255,247,227,.95);
  margin: 0 0 var(--ds-space-2);
}
.cro-hero-video .voc-author, .block-cro-block-3 .voc-author {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  color: rgba(255,247,227,.72);
  margin: 0;
}
.cro-hero-video .voc-author strong, .block-cro-block-3 .voc-author strong { color: #fff; display: block; }
.cro-hero-video .voc-progress-dots, .block-cro-block-3 .voc-progress-dots {
  display: flex;
  gap: var(--ds-space-2);
  margin-top: var(--ds-space-3);
}
.cro-hero-video .voc-dot, .block-cro-block-3 .voc-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--ds-radius-pill);
  background: rgba(255,255,255,.20);
  cursor: pointer;
  transition: background var(--ds-duration) var(--ds-ease-out);
}
.cro-hero-video .voc-dot.active, .block-cro-block-3 .voc-dot.active { background: var(--ds-cta-aa, var(--ds-cta-dk)); }

/* ── Cert modal ──────────────────────────────────────────────── */
.cro-hero-video .hero-modal, .block-cro-block-3 .hero-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.cro-hero-video .hero-modal.active, .block-cro-block-3 .hero-modal.active { display: flex; }
.cro-hero-video .modal-overlay, .block-cro-block-3 .modal-overlay {
  position: absolute; inset: 0;
  background: rgba(14,15,12,.65);
}
.cro-hero-video .modal-content, .block-cro-block-3 .modal-content {
  position: relative;
  background: var(--scheme-card-bg, #fff);
  color: var(--ds-ink);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-lg);
  max-width: 560px;
  max-height: 88vh;
  overflow: auto;
  padding: var(--ds-space-5);
  margin: var(--ds-space-3);
}
.cro-hero-video .modal-close, .block-cro-block-3 .modal-close {
  position: absolute;
  top: var(--ds-space-3);
  right: var(--ds-space-3);
  width: 32px;
  height: 32px;
  /* !important: override design-system T3-BUTTON-SYSTEM global button reset. */
  background: var(--ds-paper) !important;
  border: 1px solid var(--ds-rule) !important;
  border-radius: var(--ds-radius-pill) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 !important;
}
.cro-hero-video .modal-close svg, .block-cro-block-3 .modal-close svg { width: 16px !important; height: 16px !important; }
.cro-hero-video .modal-header h3, .block-cro-block-3 .modal-header h3 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-sm);
  letter-spacing: 0.005em;
  color: var(--ds-ink);
  margin: 0 0 var(--ds-space-3);
  text-transform: uppercase;
}
.cro-hero-video .cert-section, .block-cro-block-3 .cert-section {
  margin-bottom: var(--ds-space-4);
}
.cro-hero-video .cert-section h4, .block-cro-block-3 .cert-section h4 {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-lg);
  font-weight: 700;
  color: var(--ds-ink);
  margin: 0 0 var(--ds-space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
}
.cro-hero-video .cert-title-icon,
.block-cro-block-3 .cert-title-icon,
.cro-hero-video .cert-svg,
.block-cro-block-3 .cert-svg,
.cro-hero-video .cert-svg svg, .block-cro-block-3 .cert-svg svg {
  width: 18px !important;
  height: 18px !important;
}
.cro-hero-video .cert-details, .block-cro-block-3 .cert-details {
  font-size: var(--ds-fs-body-sm);
  color: var(--ds-ink-soft);
  line-height: 1.55;
}
.cro-hero-video .cert-divider, .block-cro-block-3 .cert-divider {
  height: 1px;
  background: var(--ds-rule);
  margin: var(--ds-space-3) 0;
}
.cro-hero-video .cert-actions a.cert-link, .block-cro-block-3 .cert-actions a.cert-link {
  color: var(--ds-cta);
  font-weight: 600;
  text-decoration: none;
}
.cro-hero-video .cert-verified, .block-cro-block-3 .cert-verified {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  margin: var(--ds-space-3) 0;
  padding: var(--ds-space-2) var(--ds-space-3);
  background: color-mix(in srgb, var(--ds-trust) 12%, white);
  color: var(--ds-trust-dk);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  border-radius: var(--ds-radius-sm);
}
.cro-hero-video .verified-icon,
.block-cro-block-3 .verified-icon,
.cro-hero-video .verified-svg,
.block-cro-block-3 .verified-svg,
.cro-hero-video .verified-svg svg, .block-cro-block-3 .verified-svg svg {
  width: 16px !important;
  height: 16px !important;
}
.cro-hero-video .modal-cta-btn, .block-cro-block-3 .modal-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.85rem 1.2rem;
  background: var(--ds-cta-aa, var(--ds-cta-dk));
  color: #fff;
  border-radius: var(--ds-radius-sm);
  font-weight: 700;
  text-decoration: none !important;
  transition: background var(--ds-duration) var(--ds-ease-out);
}
.cro-hero-video .modal-cta-btn:hover, .block-cro-block-3 .modal-cta-btn:hover { background: var(--ds-cta-dk); }

/* ─────────────────────────────────────────────────────────────────
   T2-CRO-HERO-VIDEO (2026-05-08) — Universal icon hard-cap.
   Defense-in-depth: prevents any inline SVG that ships without
   width/height attrs (most icons.html.twig presets) from rendering
   at intrinsic ~1280 px and stretching the section to 17 600 px tall
   when individual size rules above are removed/refactored. The
   per-class rules above (e.g. .stat-svg → 18 px) still win on
   specificity; this is the floor.
   ───────────────────────────────────────────────────────────── */
.cro-hero-video svg,
.block-cro-block-3 svg {
  max-width: 56px;
  max-height: 56px;
  width: auto;
  height: auto;
}
.cro-hero-video img,
.block-cro-block-3 img {
  max-width: 100%;
  height: auto;
}

/* Mobile tightening */
@media (max-width: 575px) {
  .cro-hero-video .video-card-header, .block-cro-block-3 .video-card-header { padding: var(--ds-space-3); }
  .cro-hero-video .video-chapters,
  .block-cro-block-3 .video-chapters,
  .cro-hero-video .video-quick-facts, .block-cro-block-3 .video-quick-facts {
    padding: var(--ds-space-3);
  }
  .cro-hero-video .hero-contact-card-compact,
  .block-cro-block-3 .hero-contact-card-compact,
  .cro-hero-video .hero-tabs-card-compact,
  .block-cro-block-3 .hero-tabs-card-compact,
  .cro-hero-video .hero-voc-card-compact, .block-cro-block-3 .hero-voc-card-compact {
    padding: var(--ds-space-3) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Merged from block-cro-block-3.css (deleted in W1-A7 cleanup).
   Shared utility rules: .btn-cta/.btn-orange/.btn-gradient buttons,
   input[type] / select / textarea form fields, label, .pain-tab /
   .pain-card / .timeline-step / .stat-card / .calculator-result
   surfaces, .floating-cta-bar / .float-cta-btn mobile bar.
   ───────────────────────────────────────────────────────────── */
.block-cro-block-3 { font-family: var(--ds-font-body); color: var(--scheme-fg); }

/* Section header tag/eyebrow (legacy class — design-system .ds-eyebrow recipe values). */
.block-cro-block-3 .section-tag {
  display: inline-block;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-cta);
  margin-bottom: var(--ds-space-3);
}
.block-cro-block-3 .section-header-divider { background: var(--scheme-rule); }

/* Trust badges — pill row above the form/headline. */
.block-cro-block-3 .trust-badges-inline { gap: var(--ds-space-2); margin-bottom: var(--ds-space-5); }
.block-cro-block-3 .trust-badge {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  background: var(--scheme-card-bg);
  color: var(--scheme-card-fg);
  border: 1px solid var(--scheme-rule);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-2) var(--ds-space-3);
  gap: var(--ds-space-2);
}
.block-cro-block-3 .trust-icon-svg svg { stroke: var(--ds-trust); }

/* Live activity dot. */
.block-cro-block-3 .live-activity {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--scheme-fg-soft);
}
.block-cro-block-3 .pulse-dot { background: var(--ds-cta-aa, var(--ds-cta-dk)); }

/* Legacy CTA button aliases (cro-*.css uses btn-cta, btn-orange, btn-gradient). */
.block-cro-block-3 .btn-cta,
.block-cro-block-3 .btn-orange,
.block-cro-block-3 .btn-gradient {
  font-family: var(--ds-font-body);
  font-weight: 700;
  background: var(--ds-cta-aa, var(--ds-cta-dk));
  color: #fff;
  border: none;
  border-radius: var(--ds-radius-sm);
  box-shadow: var(--ds-shadow-cta);
  transition: background var(--ds-duration) var(--ds-ease-out),
              transform var(--ds-duration) var(--ds-ease-out),
              box-shadow var(--ds-duration) var(--ds-ease-out);
}
.block-cro-block-3 .btn-cta:hover,
.block-cro-block-3 .btn-orange:hover,
.block-cro-block-3 .btn-gradient:hover { background: var(--ds-cta-dk); color: #fff; }

/* Form fields shared across CRO blocks (lead-form / hero-form / calculator). */
.block-cro-block-3 input[type="text"],
.block-cro-block-3 input[type="email"],
.block-cro-block-3 input[type="tel"],
.block-cro-block-3 input[type="number"],
.block-cro-block-3 select,
.block-cro-block-3 textarea {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  color: var(--scheme-fg);
  background: var(--scheme-card-bg);
  border: 1px solid var(--scheme-rule);
  border-radius: var(--ds-radius-sm);
  padding: var(--ds-space-3);
  transition: border-color var(--ds-duration) var(--ds-ease-out),
              box-shadow var(--ds-duration) var(--ds-ease-out);
}
.block-cro-block-3 input:focus,
.block-cro-block-3 select:focus,
.block-cro-block-3 textarea:focus {
  outline: none;
  border-color: var(--ds-cta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-cta) 22%, transparent);
}
.block-cro-block-3 label {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  color: var(--scheme-fg);
}

/* Surface tokens for legacy non-.card cards (calculator/pain/timeline). */
.block-cro-block-3 .pain-tab,
.block-cro-block-3 .pain-card,
.block-cro-block-3 .timeline-step,
.block-cro-block-3 .stat-card,
.block-cro-block-3 .calculator-result {
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-sm);
}

/* Floating CTA bar (mobile). */
.block-cro-block-3 .floating-cta-bar {
  font-family: var(--ds-font-body);
  background: var(--ds-ink);
  border-top: 1px solid var(--ds-rule-dark);
}
.block-cro-block-3 .float-cta-btn {
  font-family: var(--ds-font-body);
  font-weight: 700;
  border-radius: var(--ds-radius-sm);
  transition: background var(--ds-duration) var(--ds-ease-out);
}
.block-cro-block-3 .float-cta-btn.phone { background: var(--ds-trust); color: #fff; }
.block-cro-block-3 .float-cta-btn.quote { background: var(--ds-cta-aa, var(--ds-cta-dk));   color: #fff; }

/* ─────────────────────────────────────────────────────────────────
   W2-A20 — Mobile touch-target + 14px min font-size sweep.
   Audit: team-07-visual-mobile.md fix #5 — 12 sub-44 px targets in
   contact-compact strip + 11.52 px "Get In Touch:" / hint / verified-
   badge labels. Bumps min-height to 44 px and minimum font-size to
   14 px on phone widths. Token-only.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .block-cro-block-3 .contact-compact-title,
  .block-cro-block-3 .hint-text,
  .block-cro-block-3 .review-verified-badge {
    font-size: 14px;
  }
  .block-cro-block-3 .contact-button,
  .block-cro-block-3 a.icon-link,
  .block-cro-block-3 button {
    min-height: 44px;
    padding: 12px 16px;
  }
  /* W4-A46 — V2 noted .contact-method-compact at 43 px (1 px shy). */
  .block-cro-block-3 .contact-method-compact,
  .block-cro-block-3 .chapter-pill,
  .block-cro-block-3 .tab-pill-compact,
  .block-cro-block-3 .trust-badge-compact {
    min-height: 44px; /* mobile-44 */
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .block-cro-block-3 .carousel-compact-btn {
    width: 44px; /* mobile-44 */
    height: 44px; /* mobile-44 */
  }
}

/* ─────────────────────────────────────────────────────────────────
   SENIOR-UX team-08 (2026-05-07) — AARP / WCAG AAA pass.
   Note: cro-block-3 is NOT a full-bleed video hero with overlay scrim.
   It's a video CARD on --ds-paper-2 surface. h1 (.video-card-title)
   renders dark ink on white card → already ≥7:1 AAA. The video
   itself plays inside the card, so no body text reads ON the video.
   - Bump all tap targets to 48 px floor (44 mobile-only was W2-A20 pass).
   - Bump body-sm helper text to body where it dominates a section.
   - Bump body contrast to AAA on dark voc-card and dark scrim chips.
   - Italic serif testimonial quote → bump line-height to 1.6.
   ───────────────────────────────────────────────────────────── */

/* Industry stat tiles — primary entry CTA-equivalent, ≥56 px tap. */
.cro-hero-video .stat-item,
.block-cro-block-3 .stat-item {
  min-height: var(--ds-touch-target-primary);  /* 56 px */
  padding: var(--ds-space-3);
}
.cro-hero-video .stat-item:focus-visible,
.block-cro-block-3 .stat-item:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}
.cro-hero-video .stat-label,
.block-cro-block-3 .stat-label {
  font-size: var(--ds-fs-body);  /* 18 px — was body-sm 16 */
  line-height: 1.3;
}
.cro-hero-video .stat-count,
.block-cro-block-3 .stat-count {
  font-size: clamp(1.5rem, 3vw, 2.25rem); /* readable numerals on small tiles */
}

/* Video card title (h2) — POLISH3 2026-05-08: previously sized as h3
   at body-lg (20 px), but template renders <h2 class="video-card-title">,
   which made the section's heading visually demoted vs sibling H2s
   (48-54 px). Bump to fluid clamp matching other section H2s.
   (Anton uppercase remains fine for h2.) */
.cro-hero-video .video-card-title,
.block-cro-block-3 .video-card-title {
  font-size: clamp(28px, 4vw, 48px); /* POLISH3: was var(--ds-fs-body-lg) 20 px */
  line-height: 1.2;
}
.cro-hero-video .video-card-meta,
.block-cro-block-3 .video-card-meta {
  font-size: var(--ds-fs-body-sm); /* 16 px floor */
}

/* Video controls — 44/48 px on every viewport (was 40 px). */
.cro-hero-video .video-control-btn,
.block-cro-block-3 .video-control-btn {
  width: var(--ds-touch-target);   /* 48 px */
  height: var(--ds-touch-target);  /* 48 px */
}
.cro-hero-video .video-control-btn:focus-visible,
.block-cro-block-3 .video-control-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ds-cta), 0 0 0 5px rgba(0,0,0,.85);
}

/* Centered play button — already 64 px; bump CTA contrast & focus. */
.cro-hero-video .video-play-button:focus-visible,
.block-cro-block-3 .video-play-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ds-cta), 0 0 0 6px rgba(255,255,255,.95);
}

.cro-hero-video .chapter-pill:focus-visible,
.block-cro-block-3 .chapter-pill:focus-visible,
.cro-hero-video .tab-pill-compact:focus-visible,
.block-cro-block-3 .tab-pill-compact:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

/* Quick-fact pills inside the video card. */
.cro-hero-video .fact-item,
.block-cro-block-3 .fact-item {
  font-size: var(--ds-fs-body-sm);     /* 16 px floor */
  color: var(--ds-ink);                /* was ink-soft — AAA on white card */
  padding: 0.6rem var(--ds-space-2);
}

/* Contact card — Get In Touch chips ≥48 px, body-sm 16 px floor. */
.cro-hero-video .contact-method-compact,
.block-cro-block-3 .contact-method-compact {
  min-height: var(--ds-touch-target);  /* 48 px on every viewport */
  padding: 0.75rem 1.1rem;
  font-size: var(--ds-fs-body-sm);
}
.cro-hero-video .contact-method-compact:focus-visible,
.block-cro-block-3 .contact-method-compact:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}
.cro-hero-video .contact-compact-title,
.block-cro-block-3 .contact-compact-title {
  font-size: var(--ds-fs-body-sm);     /* 16 px floor (was eyebrow 14) */
  color: var(--ds-ink);                /* AAA on white */
  margin-bottom: var(--ds-space-3);
}

/* Trust score numerals — already display-md+; lift denom contrast. */
.cro-hero-video .trust-denom-compact,
.block-cro-block-3 .trust-denom-compact {
  color: var(--ds-ink-soft);   /* was ink-mute — push for AAA on white */
}

/* Trust badge chips inside trust tab + benefit grid → ≥48 px tap. */
.cro-hero-video .trust-badges-compact-grid .trust-badge-compact,
.block-cro-block-3 .trust-badges-compact-grid .trust-badge-compact {
  min-height: var(--ds-touch-target);
  font-size: var(--ds-fs-body-sm);
  padding: 0.65rem 0.85rem;
}
.cro-hero-video .trust-badges-compact-grid .trust-badge-compact:focus-visible,
.block-cro-block-3 .trust-badges-compact-grid .trust-badge-compact:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}
.cro-hero-video .benefit-compact-item,
.block-cro-block-3 .benefit-compact-item {
  min-height: var(--ds-touch-target);
  padding: 0.7rem var(--ds-space-3);
  font-size: var(--ds-fs-body-sm);
  color: var(--ds-ink);
}

/* Verify Credentials primary button — ≥56 px / ≥1.25rem. */
.cro-hero-video .verify-btn-compact,
.block-cro-block-3 .verify-btn-compact {
  min-height: var(--ds-touch-target-primary); /* 56 px */
  padding: 1rem 1.25rem;
  font-size: var(--ds-fs-body-lg);    /* 20 px — was body-sm */
}
.cro-hero-video .verify-btn-compact:focus-visible,
.block-cro-block-3 .verify-btn-compact:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

/* Carousel nav — promote to 44 px+ all viewports + focus ring. */
.cro-hero-video .carousel-compact-btn,
.block-cro-block-3 .carousel-compact-btn {
  width: var(--ds-touch-target);   /* 48 px */
  height: var(--ds-touch-target);  /* 48 px */
}
.cro-hero-video .carousel-compact-btn:focus-visible,
.block-cro-block-3 .carousel-compact-btn:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}
.cro-hero-video .carousel-compact-counter,
.block-cro-block-3 .carousel-compact-counter {
  font-size: var(--ds-fs-body-sm); /* 16 px floor */
  color: var(--ds-ink-soft);
}

/* Testimonial quote (italic serif) — keep italic but ≥18 px / 1.6. */
.cro-hero-video .testimonial-compact-quote,
.block-cro-block-3 .testimonial-compact-quote {
  font-size: var(--ds-fs-body);    /* 18 px floor */
  line-height: var(--ds-lh-body);  /* 1.6 — was 1.5 */
  color: var(--ds-ink);
}
.cro-hero-video .testimonial-compact-author,
.block-cro-block-3 .testimonial-compact-author {
  font-size: var(--ds-fs-body-sm);
  color: var(--ds-ink-soft);
}

/* VoC card on dark ink — bump to AAA contrast for body. */
.cro-hero-video .voc-quote,
.block-cro-block-3 .voc-quote {
  font-size: var(--ds-fs-body-lg); /* 20 px */
  line-height: var(--ds-lh-body);  /* 1.6 — was 1.5 */
  color: rgba(255,247,227,.95);    /* was .95 already → keep */
}
.cro-hero-video .voc-author,
.block-cro-block-3 .voc-author {
  font-size: var(--ds-fs-body-sm);
  color: rgba(255,247,227,.92);    /* was .72 — AAA push */
}
/* VoC dot indicators → keyboard-reachable buttons. */
.cro-hero-video .voc-dot,
.block-cro-block-3 .voc-dot {
  width: 28px; height: 28px;
  padding: 10px;
  background: transparent;
  position: relative;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cro-hero-video .voc-dot::after,
.block-cro-block-3 .voc-dot::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: var(--ds-radius-pill);
  background: rgba(255,255,255,.30);
}
.cro-hero-video .voc-dot.active::after,
.block-cro-block-3 .voc-dot.active::after { background: var(--ds-cta-aa, var(--ds-cta-dk)); }
.cro-hero-video .voc-dot:focus-visible,
.block-cro-block-3 .voc-dot:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring-dark);
  border-radius: var(--ds-radius-pill);
}

/* Modal close ≥48 px (was 32). */
.cro-hero-video .modal-close,
.block-cro-block-3 .modal-close {
  width: var(--ds-touch-target);   /* 48 px */
  height: var(--ds-touch-target);  /* 48 px */
}
.cro-hero-video .modal-close:focus-visible,
.block-cro-block-3 .modal-close:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}
.cro-hero-video .modal-cta-btn,
.block-cro-block-3 .modal-cta-btn {
  min-height: var(--ds-touch-target-primary);
  font-size: var(--ds-fs-body-lg);
}
.cro-hero-video .modal-cta-btn:focus-visible,
.block-cro-block-3 .modal-cta-btn:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}
.cro-hero-video .cert-details,
.block-cro-block-3 .cert-details {
  font-size: var(--ds-fs-body);    /* 18 px — was body-sm 16 */
  line-height: var(--ds-lh-body);
  color: var(--ds-ink);
}

/* Live badge on white card — keep but bump readability of mono label. */
.cro-hero-video .live-badge,
.block-cro-block-3 .live-badge {
  font-size: var(--ds-fs-eyebrow); /* 14 px tracked uppercase */
  padding: 0.3rem 0.65rem;
  letter-spacing: 0.08em;
}

/* ─────────────────────────────────────────────────────────────────
   BUG-T8 (2026-05-07) — mobile clearance + stacking + reduced-motion:
   - Hero/video container gets isolation so its absolute video
     controls render in its own stacking context (they're z:2 within).
   - Extra bottom padding on small screens so the section ends with
     breathing room above the global #acme-sticky-cta (z:9999).
   - prefers-reduced-motion: don't autoplay, hide autoplay glow.
   ───────────────────────────────────────────────────────────── */
.cro-hero-video .video-container,
.block-cro-block-3 .video-container,
.cro-hero-video .hero-video-card,
.block-cro-block-3 .hero-video-card {
  position: relative;
  isolation: isolate;
}
@media (max-width: 900px) {
  /* SWEEP-C1 (2026-05-08): bottom padding must clear the global
     #acme-sticky-cta (z:9999, ~96px) so the video-controls overlay stops
     intersecting the bar in page-coord audits. */
  .block-cro-block-3 {
    padding-bottom: calc(var(--ds-sticky-cta-clearance, 96px) + var(--ds-space-4)) !important;
  }
  /* SWEEP-C1 (2026-05-08): on mobile, the global #acme-sticky-cta is
     position:fixed and 96px tall at bottom of viewport. The video-control
     buttons are absolute-positioned in their video container (also bottom).
     When the user scrolls to the video section, the control buttons can
     intersect the sticky CTA in viewport-coords. Move controls to the
     TOP-RIGHT of the video container at small viewports — same affordance,
     no overlap risk. */
  .cro-hero-video .video-controls-overlay,
  .block-cro-block-3 .video-controls-overlay {
    bottom: auto;
    top: var(--ds-space-3);
    right: var(--ds-space-3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cro-hero-video video[autoplay],
  .block-cro-block-3 video[autoplay] {
    /* Pause autoplay-as-loop UX for vestibular/older users. JS
       toggles the pause state via cro-hero-video.js, but this CSS
       hard-disables the playing animation halo if any. */
    animation: none !important;
    transition: none !important;
  }
  /* SWEEP-C1 (2026-05-08): defense-in-depth — kill any decorative pulse on the
     live-badge while reduced-motion is on (CRO live indicator can spin). */
  .cro-hero-video .live-badge,
  .block-cro-block-3 .live-badge { animation: none !important; }
}

/* SWEEP-C1 (2026-05-08): hero h1 readability — scrim must hit ≥7:1 vs h1.
   The video-card already places the h1 over the dark video card surface; bump
   the live-badge + h1 contrast floor and ensure the visually-hidden h1 (used
   for SR landmarks on this slug) doesn't trigger text_truncation false flag. */
.block-cro-block-3 .visually-hidden {
  white-space: normal !important;
  word-wrap: break-word;
}
/* SWEEP-C1: poster fallback for users whose autoplay is blocked AND for
   prefers-reduced-motion — render the first frame statically. JS already
   pauses; ensure the paused frame has a visible play affordance. */
@media (prefers-reduced-motion: reduce) {
  .cro-hero-video .hero-video-player,
  .block-cro-block-3 .hero-video-player { /* snap to first frame */
    object-position: 50% 50%;
  }
  .cro-hero-video .video-controls-overlay,
  .block-cro-block-3 .video-controls-overlay {
    /* Larger affordance so users know they can press play. */
    background: rgba(14,15,12,.55);
    padding: var(--ds-space-2);
    border-radius: var(--ds-radius-pill);
  }
}