/* ==========================================================================
   TextRad Hero V3 — production styles
   Ported from Claude Design handoff (hero-section-textrad-revamp/).
   All selectors scoped under `.hero.v3` to avoid bleed into the rest of the
   page. Design tokens are defined locally (--trv3-*) so we don't depend on
   colors_and_type.css being loaded — but values mirror the production palette.
   ========================================================================== */

.hero.v3 {
  /* ---- tokens (mirror production palette, scoped to hero only) ---- */
  --trv3-brand-blue:        #3b82f6;
  --trv3-brand-blue-600:    #2563eb;
  --trv3-brand-blue-light:  #60a5fa;
  --trv3-brand-green:       #34d399;
  --trv3-brand-teal:        #14b8a6;
  --trv3-brand-cyan:        #06b6d4;
  --trv3-warning:           #f59e0b;
  --trv3-light-fg:          #111827;

  --trv3-radius-lg:         0.5rem;
  --trv3-radius-xl:         0.75rem;
  --trv3-radius-2xl:        1rem;
  --trv3-radius-pill:       9999px;

  --trv3-gradient-primary:  linear-gradient(135deg, #3b82f6, #2563eb);
  --trv3-gradient-accent:   linear-gradient(96deg, #22d3ee 0%, #34d399 100%);

  --trv3-shadow-cta:        0 4px 16px rgba(59, 130, 246, 0.30);
  --trv3-shadow-cta-hover:  0 8px 24px rgba(59, 130, 246, 0.40);
  --trv3-shadow-xl:         0 20px 40px rgba(0, 0, 0, 0.50);
  --trv3-text-shadow-hero:  0 2px 8px rgba(0, 0, 0, 0.70);

  --trv3-ease:              cubic-bezier(0.4, 0, 0.2, 1);
  --trv3-ease-out-soft:     cubic-bezier(0.22, 1, 0.36, 1);
  --trv3-dur-base:          300ms;

  --trv3-font-sans:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* layout — fill the first viewport */
  position: relative;
  overflow: hidden;
  font-family: var(--trv3-font-sans);
  letter-spacing: 0.01em;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh; /* iOS Safari respects the dynamic viewport */
  display: flex;
  flex-direction: column;
}

.hero.v3 * { box-sizing: border-box; }

/* The HTML `hidden` attribute has very low specificity (`display: none`) so
   it loses to our `.h-btn { display: inline-flex }` rule. Re-assert it inside
   the hero scope so auth-state toggling actually hides the buttons. */
.hero.v3 [hidden] { display: none !important; }

/* the cinematic background video / overlay are handled by the existing
   .hero-video + .hero-video-overlay elements from landing-theme.css.
   We add a stronger V3-specific dark scrim biased to the left so the
   left-column content is legible against the radiologist photo on the right. */
.hero.v3 .v3-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(11,16,24,0.90) 0%,
      rgba(11,16,24,0.80) 40%,
      rgba(11,16,24,0.52) 72%,
      rgba(11,16,24,0.30) 100%),
    linear-gradient(180deg,
      rgba(11,16,24,0.32) 0%,
      rgba(11,16,24,0.00) 30%,
      rgba(11,16,24,0.28) 100%);
}
/* The hero background is the cinematic radiologist video, which is dark
   regardless of mode. We deliberately keep the hero dark in light mode too —
   the same scrim, the same white text — so contrast stays high and the
   visual identity of the hero is consistent. The rest of the page still
   responds to `body.light-mode`. */
body.light-mode .hero.v3 .v3-scrim {
  /* same as dark — intentionally not lightened */
  background:
    linear-gradient(90deg,
      rgba(11,16,24,0.95) 0%,
      rgba(11,16,24,0.88) 40%,
      rgba(11,16,24,0.66) 72%,
      rgba(11,16,24,0.44) 100%),
    linear-gradient(180deg,
      rgba(11,16,24,0.44) 0%,
      rgba(11,16,24,0.08) 30%,
      rgba(11,16,24,0.40) 100%);
}



/* =========================================================================
   STACK + GRID
   ========================================================================= */
.hero.v3 .v3-stack {
  position: relative; z-index: 10;
  display: flex; flex-direction: column;
  justify-content: center; gap: 30px;
  padding: 32px 40px 56px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  flex: 1 1 auto;          /* fill remaining vertical space inside .hero.v3 */
  min-height: 0;
}
.hero.v3 .v3-head { display: flex; flex-direction: column; gap: 16px; }
.hero.v3 .v3-body {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 48px;
  align-items: start; /* anchor columns to top so demo-inlay expansion
                          on the right does not shift the headline up */
}
.hero.v3 .v3-left {
  display: flex; flex-direction: column;
  gap: 22px; align-items: flex-start;
}
.hero.v3 .v3-right {
  display: flex;
  align-items: flex-start;   /* anchor the demo inlay to the top of the right column */
  justify-content: center;
  padding-top: 64px;          /* visually balance the inlay against the headline block */
}

/* =========================================================================
   ACCENT RULE + KICKER
   ========================================================================= */
.hero.v3 .accent-rule { display: flex; align-items: center; gap: 14px; }
.hero.v3 .accent-rule .bar {
  width: 52px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #22d3ee, #34d399);
}
.hero.v3 .accent-rule .kick {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* =========================================================================
   HEADLINE
   ========================================================================= */
.hero.v3 .v3-headline {
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.99;
  font-size: clamp(2.6rem, 5.6vw, 5.5rem);
  text-shadow: var(--trv3-text-shadow-hero);
  margin: 0;
}
.hero.v3 .v3-headline .line2 { color: rgba(255,255,255,0.94); }
/* Hero stays dark in both modes — no light-mode headline override needed. */

.hero.v3 .grad-word {
  background: var(--trv3-gradient-accent);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@keyframes v3GradShift { to { background-position: 200% 50%; } }
.hero.v3 .grad-word.anim {
  background: linear-gradient(96deg, #22d3ee 0%, #34d399 28%, #60a5fa 55%, #34d399 78%, #22d3ee 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: v3GradShift 7s linear infinite;
  filter: drop-shadow(0 0 22px rgba(52,211,153,0.25));
}
@media (prefers-reduced-motion: reduce) { .hero.v3 .grad-word.anim { animation: none; } }

/* =========================================================================
   SUB COPY
   ========================================================================= */
.hero.v3 .v3-sub {
  color: rgba(241,245,249,0.92);
  font-size: 17.5px;
  line-height: 1.55;
  max-width: 520px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
  margin: 0;
}
.hero.v3 .v3-sub strong { color: #fff; font-weight: 700; }
.hero.v3 .v3-sub em { color: var(--trv3-brand-green); font-style: italic; font-weight: 500; }
/* Hero stays dark in both modes — sub copy keeps its light-on-dark styling. */

/* =========================================================================
   ACTION CLUSTER — primary row, secondary row, OS-alt row
   ========================================================================= */
.hero.v3 .v3-actions {
  display: flex; flex-direction: column;
  gap: 14px; align-items: flex-start;
  width: 100%;
}
.hero.v3 .act-primary { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.hero.v3 .act-secondary { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hero.v3 .os-alt {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: #fff;
}
.hero.v3 .os-alt a {
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.hero.v3 .os-alt a:hover { color: var(--trv3-brand-blue-light); }
.hero.v3 .os-alt .sep { opacity: 0.45; }

/* ---- buttons shared ---- */
.hero.v3 .h-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px;
  height: 54px; padding: 0 24px;
  border-radius: var(--trv3-radius-lg);
  font-size: 15px; font-weight: 700; letter-spacing: 0.01em;
  cursor: pointer; border: none; white-space: nowrap;
  font-family: inherit;
  transition: transform var(--trv3-dur-base) var(--trv3-ease),
              box-shadow var(--trv3-dur-base) var(--trv3-ease),
              background var(--trv3-dur-base) var(--trv3-ease);
}
.hero.v3 .h-btn--primary {
  background: var(--trv3-gradient-primary);
  color: #fff;
  box-shadow: var(--trv3-shadow-cta);
}
.hero.v3 .h-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--trv3-shadow-cta-hover);
}
.hero.v3 .h-btn--ghost {
  background: rgba(255,255,255,0.07); color: #fff;
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(10px);
}
.hero.v3 .h-btn--ghost:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.50);
  transform: translateY(-2px);
}
.hero.v3 .h-btn--link {
  background: transparent;
  color: #fff;
  height: 54px; padding: 0 8px;
  border: none; text-decoration: none; position: relative;
}
.hero.v3 .h-btn--link::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 12px;
  height: 1.5px; background: currentColor; opacity: 0.55;
  transition: opacity var(--trv3-dur-base);
}
.hero.v3 .h-btn--link:hover::after { opacity: 0.95; }

/* ---- OS-aware download button (stacked label) ---- */
.hero.v3 .os-download {
  display: inline-flex; align-items: center; gap: 11px;
  height: 54px; padding: 0 24px 0 20px;
  border-radius: var(--trv3-radius-lg);
  cursor: pointer; white-space: nowrap;
  font-size: 15px; font-weight: 700;
  color: #fff;
  background: rgba(20,184,166,0.18);
  border: 1px solid rgba(45,212,191,0.50);
  backdrop-filter: blur(10px);
  font-family: inherit;
  transition: transform var(--trv3-dur-base) var(--trv3-ease),
              background var(--trv3-dur-base) var(--trv3-ease),
              box-shadow var(--trv3-dur-base) var(--trv3-ease);
}
.hero.v3 .os-download:hover {
  transform: translateY(-2px);
  background: rgba(20,184,166,0.28);
  box-shadow: 0 8px 24px rgba(20,184,166,0.28);
}
.hero.v3 .os-download i { font-size: 20px; color: #fff; opacity: 1; }
.hero.v3 .os-download .stk {
  display: flex; flex-direction: column;
  align-items: flex-start; line-height: 1.05;
}
.hero.v3 .os-download .stk .lead {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.92;
}

/* =========================================================================
   TRUST CHIPS (compact, no animation)
   ========================================================================= */
.hero.v3 .trust-row {
  display: flex; flex-wrap: wrap;
  gap: 10px 22px; align-items: center;
}
.hero.v3 .trust-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500;
  color: #fff;
}
.hero.v3 .trust-chip i { font-size: 13px; opacity: 0.95; }
.hero.v3 .trust-chip.g i { color: var(--trv3-brand-green); }
.hero.v3 .trust-chip.b i { color: var(--trv3-brand-blue-light); }
.hero.v3 .trust-chip.c i { color: var(--trv3-brand-cyan); }
.hero.v3 .trust-chip.y i { color: var(--trv3-warning); }
.hero.v3 .trust-chip.p i { color: #f472b6; }

/* =========================================================================
   TRIAL TAGLINE — solid white in both modes
   ========================================================================= */
.hero.v3 .v3-trial-tagline {
  font-size: 13.5px;
  color: #fff;
  margin: 0;
  letter-spacing: 0.01em;
}
.hero.v3 .v3-trial-tagline strong { color: #fff; font-weight: 700; }
.hero.v3 .v3-trial-tagline .arrow { color: var(--trv3-brand-green); font-weight: 700; }

/* =========================================================================
   DEMO INLAY — subtle one-line invitation that expands into 16:9 player
   ========================================================================= */
.hero.v3 .demo-inlay {
  width: 100%;
  max-width: 560px;
  border-radius: var(--trv3-radius-xl);
  overflow: hidden;
  background: rgba(15,22,33,0.42);
  border: 1px solid rgba(96,165,250,0.20);
  backdrop-filter: blur(10px);
  transition: border-color var(--trv3-dur-base) var(--trv3-ease),
              background var(--trv3-dur-base) var(--trv3-ease);
}
.hero.v3 .demo-inlay:hover { border-color: rgba(96,165,250,0.42); background: rgba(15,22,33,0.56); }
/* demo-inlay stays the same dark glass card in light mode (hero is always dark) */
.hero.v3 .demo-inlay-trigger {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 18px;
  background: transparent; border: 0; cursor: pointer;
  text-align: left; color: rgba(241,245,249,0.92);
  font-family: inherit; font-size: 13.5px; line-height: 1.45;
  transition: color var(--trv3-dur-base) var(--trv3-ease);
}
.hero.v3 .demo-inlay-trigger .play-glyph {
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(34,211,238,0.18);
  color: var(--trv3-brand-cyan);
  font-size: 11px;
  transition: background var(--trv3-dur-base) var(--trv3-ease),
              color var(--trv3-dur-base) var(--trv3-ease),
              transform var(--trv3-dur-base) var(--trv3-ease);
}
.hero.v3 .demo-inlay-trigger:hover .play-glyph {
  background: rgba(52,211,153,0.22);
  color: var(--trv3-brand-green);
  transform: scale(1.08);
}
.hero.v3 .demo-inlay-trigger .play-glyph i { margin-left: 2px; }
.hero.v3 .demo-inlay-trigger b { color: #fff; font-weight: 700; }
/* demo-inlay-trigger stays the same in light mode */

.hero.v3 .demo-inlay-player {
  position: relative;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 380ms var(--trv3-ease-out-soft);
  background: #000;
}
.hero.v3 .demo-inlay.is-open .demo-inlay-player {
  max-height: 360px; /* enough for 560×316 16:9 */
}
.hero.v3 .demo-inlay-player video {
  display: block; width: 100%; height: auto;
  background: #000;
}
.hero.v3 .demo-inlay-close {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(11,16,24,0.66); color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px; line-height: 1; font-family: inherit;
}
.hero.v3 .demo-inlay-close:hover { background: rgba(11,16,24,0.82); }

@media (prefers-reduced-motion: reduce) {
  .hero.v3 .demo-inlay-player { transition: none; }
}

/* =========================================================================
   PLATFORM SPOTLIGHT — pulse the matching card after scrolling from hero
   (rule lives here because the hero is the one that triggers it; the Platforms
   section markup just needs data-platform-card="..." attributes added.)
   ========================================================================= */
[data-platform-card][data-spotlight] {
  position: relative;
}
[data-platform-card][data-spotlight]::after {
  content: ""; position: absolute; inset: -8px;
  border-radius: 14px;
  border: 2px solid var(--trv3-brand-cyan, #06b6d4);
  box-shadow: 0 0 0 4px rgba(6,182,212,0.18),
              0 0 32px rgba(6,182,212,0.45);
  pointer-events: none;
  animation: v3SpotlightPulse 1500ms var(--trv3-ease-out-soft, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
}
@keyframes v3SpotlightPulse {
  0%   { opacity: 0; transform: scale(0.985); }
  18%  { opacity: 1; transform: scale(1.00);  }
  100% { opacity: 0; transform: scale(1.015); }
}
@media (prefers-reduced-motion: reduce) {
  [data-platform-card][data-spotlight]::after {
    animation: none; opacity: 1;
  }
}

/* =========================================================================
   ENTRANCE MOTION (light, no badge-staggering theatrics)
   ========================================================================= */
@keyframes v3Rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero.v3 .rise { opacity: 0; animation: v3Rise 0.75s var(--trv3-ease-out-soft) forwards; }
.hero.v3 .d1 { animation-delay: 0.08s; }
.hero.v3 .d2 { animation-delay: 0.18s; }
.hero.v3 .d3 { animation-delay: 0.28s; }
.hero.v3 .d4 { animation-delay: 0.38s; }
.hero.v3 .d5 { animation-delay: 0.48s; }
@media (prefers-reduced-motion: reduce) {
  .hero.v3 .rise { opacity: 1; animation: none; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

/* Tablet — collapse to single column but keep generous spacing */
@media (max-width: 1024px) {
  .hero.v3 .v3-stack { padding: 28px 32px 40px; gap: 26px; }
  .hero.v3 .v3-body { grid-template-columns: 1fr; gap: 26px; }
  .hero.v3 .v3-right { justify-content: flex-start; }
  .hero.v3 .demo-inlay { max-width: 100%; }
  .hero.v3 .v3-headline { font-size: clamp(2.4rem, 6.4vw, 4.6rem); }
  .hero.v3 .v3-sub { font-size: 16.5px; max-width: 100%; }
}

/* Mobile — full-width CTAs, smaller headline, tighter chrome
   Headline + sub + kicker are center-aligned on mobile per user feedback.
   Desktop left-alignment is preserved. */
@media (max-width: 640px) {
  .hero.v3 { min-height: 100vh; min-height: 100svh; }
  .hero.v3 .v3-stack {
    padding: 20px 18px 32px;
    gap: 20px;
    justify-content: flex-start;
    padding-top: max(20px, env(safe-area-inset-top));
  }
  .hero.v3 .v3-right { padding-top: 0; }

  /* Center-align the head area on mobile */
  .hero.v3 .v3-head {
    gap: 12px;
    align-items: center;
    text-align: center;
  }
  .hero.v3 .accent-rule {
    justify-content: center;
  }
  .hero.v3 .accent-rule .bar { width: 38px; height: 2.5px; }
  .hero.v3 .accent-rule .kick { font-size: 11px; letter-spacing: 0.18em; }
  .hero.v3 .v3-headline {
    font-size: clamp(2rem, 9.5vw, 2.9rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    text-align: center;
  }

  /* Center the sub-headline too for visual consistency */
  .hero.v3 .v3-sub {
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .hero.v3 .v3-body { gap: 20px; }
  .hero.v3 .v3-left { gap: 18px; align-items: stretch; }

  /* "Also on" + trust chips centered on mobile */
  .hero.v3 .os-alt {
    font-size: 12px; gap: 6px; flex-wrap: wrap;
    justify-content: center; width: 100%;
  }
  .hero.v3 .trust-row {
    gap: 8px 16px;
    justify-content: center;
    width: 100%;
  }
  .hero.v3 .trust-chip { font-size: 12px; }
  .hero.v3 .v3-trial-tagline {
    font-size: 12.5px;
    text-align: center;
    width: 100%;
  }

  .hero.v3 .v3-actions { gap: 12px; width: 100%; align-items: center; }
  .hero.v3 .h-btn,
  .hero.v3 .os-download { width: 90%; max-width: 320px; height: 45px; font-size: 13.5px; }
  .hero.v3 .h-btn--link { width: auto !important; }
  .hero.v3 .os-download { justify-content: center; padding: 0 16px; }
  .hero.v3 .os-download .stk { align-items: center; }
  .hero.v3 .act-primary { width: 100%; flex-direction: column; align-items: center; gap: 10px; }
  .hero.v3 .act-secondary {
    width: 100%; flex-direction: column; gap: 8px;
    align-items: center;
  }
  .hero.v3 .act-secondary .h-btn--ghost { flex: 1 1 auto; min-width: 0; }
  .hero.v3 .act-secondary .h-btn--link { padding: 0 4px; font-size: 13.5px; }

  .hero.v3 .demo-inlay-trigger { font-size: 13px; padding: 12px 14px; gap: 10px; }
  .hero.v3 .demo-inlay-trigger .play-glyph { width: 26px; height: 26px; font-size: 10px; }
  .hero.v3 .demo-inlay.is-open .demo-inlay-player { max-height: 56vw; }
}

/* Very small phones (iPhone SE class) */
@media (max-width: 380px) {
  .hero.v3 .v3-headline { font-size: clamp(1.8rem, 10vw, 2.4rem); }
  .hero.v3 .v3-stack { padding: 16px 14px 28px; gap: 16px; }
  .hero.v3 .act-secondary { flex-direction: column; gap: 8px; }
  .hero.v3 .act-secondary .h-btn--link { width: 100%; text-align: center; }
}

/* Landscape phones — give the hero air vs. shrinking it */
@media (max-height: 560px) and (orientation: landscape) {
  .hero.v3 { min-height: auto; }
  .hero.v3 .v3-stack { padding-top: 88px; }
}

/* =========================================================================
   LIGHT MODE OVERRIDES FOR HERO V3
   Since the hero is designed to remain dark and cinematic in both modes,
   we must prevent generic light-mode overrides from turning hero text dark/illegible.
   ========================================================================= */

body.light-mode .hero.v3 .accent-rule .kick {
  color: #ffffff !important;
}

body.light-mode .hero.v3 .v3-headline {
  color: #ffffff !important;
  text-shadow: var(--trv3-text-shadow-hero) !important;
}

body.light-mode .hero.v3 .v3-headline .line2 {
  color: rgba(255, 255, 255, 0.94) !important;
}

body.light-mode .hero.v3 .v3-sub {
  color: rgba(241, 245, 249, 0.92) !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45) !important;
}

body.light-mode .hero.v3 .v3-sub strong {
  color: #ffffff !important;
}

body.light-mode .hero.v3 .v3-sub em {
  color: var(--trv3-brand-green) !important;
}

body.light-mode .hero.v3 .os-alt {
  color: #ffffff !important;
}

body.light-mode .hero.v3 .os-alt span {
  color: #ffffff !important;
}

body.light-mode .hero.v3 .os-alt a {
  color: #ffffff !important;
}

body.light-mode .hero.v3 .os-alt a:hover {
  color: var(--trv3-brand-blue-light) !important;
}

body.light-mode .hero.v3 .os-alt .sep {
  color: #ffffff !important;
  opacity: 0.45 !important;
}

body.light-mode .hero.v3 .trust-chip {
  color: #ffffff !important;
}

body.light-mode .hero.v3 .trust-chip.g i {
  color: var(--trv3-brand-green) !important;
}

body.light-mode .hero.v3 .trust-chip.b i {
  color: var(--trv3-brand-blue-light) !important;
}

body.light-mode .hero.v3 .trust-chip.c i {
  color: var(--trv3-brand-cyan) !important;
}

body.light-mode .hero.v3 .trust-chip.y i {
  color: var(--trv3-warning) !important;
}

body.light-mode .hero.v3 .trust-chip.p i {
  color: #f472b6 !important;
}

body.light-mode .hero.v3 .v3-trial-tagline {
  color: #ffffff !important;
}

body.light-mode .hero.v3 .v3-trial-tagline strong {
  color: #ffffff !important;
}

body.light-mode .hero.v3 .v3-trial-tagline .arrow {
  color: var(--trv3-brand-green) !important;
}

body.light-mode .hero.v3 .demo-inlay-trigger {
  color: rgba(241, 245, 249, 0.92) !important;
}

body.light-mode .hero.v3 .demo-inlay-trigger span {
  color: rgba(241, 245, 249, 0.92) !important;
}

body.light-mode .hero.v3 .demo-inlay-trigger b {
  color: #ffffff !important;
}

body.light-mode .hero.v3 .demo-inlay-trigger .play-glyph {
  color: var(--trv3-brand-cyan) !important;
}

body.light-mode .hero.v3 .demo-inlay-trigger:hover .play-glyph {
  color: var(--trv3-brand-green) !important;
}

body.light-mode .hero.v3 .os-download,
body.light-mode .hero.v3 .os-download span,
body.light-mode .hero.v3 .os-download i {
  color: #ffffff !important;
}

body.light-mode .hero.v3 .h-btn,
body.light-mode .hero.v3 .h-btn span,
body.light-mode .hero.v3 .h-btn i {
  color: #ffffff !important;
}

body.light-mode .hero.v3 .h-btn--link {
  color: #ffffff !important;
}

/* Darken the video background overlay globally in light mode for maximum legibility */
body.light-mode .hero.v3 .hero-video-overlay {
  background:
    linear-gradient(135deg, rgba(11, 16, 24, 0.85) 0%, rgba(40, 44, 52, 0.55) 50%, rgba(11, 16, 24, 0.85) 100%) !important;
}