/* LifeARC — full-bleed the Salient blank template for any ported page. */
body:has(.marketing-page) #header-outer, body:has(.legal-page) #header-outer, body:has(.media-page) #header-outer,
body:has(.marketing-page) #page-header-bg, body:has(.legal-page) #page-header-bg, body:has(.media-page) #page-header-bg { display:none !important; }
body:has(.marketing-page) .container-wrap, body:has(.legal-page) .container-wrap, body:has(.media-page) .container-wrap { padding:0 !important; margin:0 !important; background:none !important; }
body:has(.marketing-page) .main-content, body:has(.legal-page) .main-content, body:has(.media-page) .main-content { padding:0 !important; }
body:has(.marketing-page) .main-content .container, body:has(.legal-page) .main-content .container, body:has(.media-page) .main-content .container,
body:has(.marketing-page) .container.main-content, body:has(.legal-page) .container.main-content, body:has(.media-page) .container.main-content { max-width:none !important; width:100% !important; padding:0 !important; margin:0 !important; }
body:has(.marketing-page) .main-content .row, body:has(.legal-page) .main-content .row, body:has(.media-page) .main-content .row { margin:0 !important; }
body:has(.marketing-page), body:has(.legal-page), body:has(.media-page) { background:#F7FAF9 !important; }

/* Sticky header: position:sticky only works when NO ancestor is a scroll container
   (overflow != visible) or transformed. Salient's #ajax-content-wrap/#ajax-loading-screen
   set overflow + transforms for page transitions, which silently kill the sticky navbar.
   Neutralize the ancestor chain and re-assert sticky above Salient's z-index layers. */
body:has(.marketing-page) #ajax-content-wrap, body:has(.legal-page) #ajax-content-wrap, body:has(.media-page) #ajax-content-wrap,
body:has(.marketing-page) .container-wrap, body:has(.legal-page) .container-wrap, body:has(.media-page) .container-wrap,
body:has(.marketing-page) .main-content, body:has(.legal-page) .main-content, body:has(.media-page) .main-content,
body:has(.marketing-page) #ajax-content-wrap .row, body:has(.legal-page) #ajax-content-wrap .row, body:has(.media-page) #ajax-content-wrap .row {
  overflow: visible !important; transform: none !important; -webkit-transform: none !important; perspective: none !important;
}
.marketing-page .marketing-navbar, .legal-page .marketing-navbar, .media-page .marketing-navbar {
  position: -webkit-sticky !important; position: sticky !important; top: 0 !important; z-index: 999 !important;
}

/* Calculators dropdown: the React source conditionally MOUNTED the menu (so its
   base CSS has no hidden state). In the static port the menu is always in the DOM,
   toggled by marketing.js via .is-open — so hide it by default and reveal on open. */
.marketing-navbar .nav-dropdown-menu { display: none !important; }
.marketing-navbar .nav-dropdown.is-open .nav-dropdown-menu { display: flex !important; }

/* Sticky fix, part 2: Salient sets overflow-x:hidden on html/body to kill horizontal
   scroll, which makes them a scroll container and breaks descendant position:sticky.
   overflow-x:clip prevents h-scroll WITHOUT establishing a scroll container. */
html:has(.marketing-page), html:has(.legal-page), html:has(.media-page) { overflow-x: clip !important; }
body:has(.marketing-page), body:has(.legal-page), body:has(.media-page) { overflow: visible !important; overflow-x: clip !important; }

/* ── QA fixes 2026-09-28 (Jeff browser review) ─────────────────────────────── */

/* Use-cases showcase: Salient's global h2 color overrides the inherited light
   color, leaving the slide title dark-on-dark. Force light text + a scrim shadow. */
.showcase-content h2, .showcase-content [data-showcase-title] {
  color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(8, 20, 15, 0.65), 0 1px 3px rgba(8, 20, 15, 0.5);
}
.showcase-content p, .showcase-content [data-showcase-desc] {
  color: #f1f5f9 !important;
  text-shadow: 0 1px 10px rgba(8, 20, 15, 0.7);
}

/* Platform "evidence" lists render a native disc AND the ported gold ◆ marker
   (Salient re-adds list-style:disc). Kill the native marker on these lists only
   (legal pages keep their normal bullets). */
.marketing-page .platform-section .platform-column ul,
.marketing-page .split-layout ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.marketing-page .platform-section .platform-column ul li,
.marketing-page .split-layout ul li {
  list-style: none !important;
}

/* Calculator pages: constrain the full-bleed content to a readable centered
   column instead of spanning the whole viewport. */
.calculators-page .calculators-main {
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── Accessibility layer (full UX pass 2026-09-28) ─────────────────────────── */
/* Visible keyboard focus on every interactive element (Salient's reset hides it).
   :focus-visible → only keyboard users see it, mouse clicks stay clean. */
.marketing-page a:focus-visible, .marketing-page button:focus-visible, .marketing-page input:focus-visible,
.marketing-page select:focus-visible, .marketing-page textarea:focus-visible, .marketing-page summary:focus-visible,
.marketing-page [tabindex]:focus-visible, .marketing-page .tn-range:focus-visible,
.legal-page a:focus-visible, .legal-page button:focus-visible, .legal-page input:focus-visible,
.legal-page select:focus-visible, .legal-page textarea:focus-visible, .legal-page summary:focus-visible,
.legal-page [tabindex]:focus-visible {
  outline: 3px solid #114734 !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
/* Range thumbs need the ring on the thumb itself in WebKit. */
.marketing-page input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(17,71,52,0.5); }

/* Honor reduced-motion: neutralize transitions/animations + native smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  .marketing-page *, .legal-page * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Full UX pass round 2 (2026-09-28) ─────────────────────────────────────── */
/* #3 Contrast (WCAG AA): darken gold text on light backgrounds + muted grays. */
.media-section-kicker, .contact-section-kicker, .le-kicker, .tn-kicker,
.marketing-page .security-item h3, .legal-page .contact-section-kicker { color: #8a6a1f !important; }
.contact-field-optional, .tn-tile-note, .le-fin-note, .le-persona-hero-label, .tn-tip-sub { color: #64748b !important; }
/* #14 Tap targets ≥24px hit area on small controls. */
.showcase-dot { position: relative; }
.showcase-dot::after { content: ""; position: absolute; inset: -11px; }
.showcase-pause { min-width: 32px; min-height: 32px; }
.tn-info { padding: 6px; margin: -6px; }
/* #8 Hero video honors reduced-motion (hide it, keep a readable brand backdrop). */
@media (prefers-reduced-motion: reduce) {
  .hero-video-bg, video.hero-video-bg { display: none !important; }
  .hero-section, .hero-section--split { background: linear-gradient(135deg, #0B3327 0%, #114734 60%, #1f6b50 100%) !important; }
}

/* ── Full UX pass round 3 (2026-09-28): brand font, mobile nav, video controls ── */

/* Brand display font (Marcellus) standardized across headings site-wide — replaces
   the mix of Georgia/Palatino/system-sans. Weights kept so hierarchy is preserved. */
.marketing-page h1, .marketing-page h2, .marketing-page h3, .marketing-page h4,
.legal-page h1, .legal-page h2, .legal-page h3, .legal-page h4,
.marketing-page .footer-brand, .legal-page .footer-brand,
.marketing-page .calculator-section-title, .marketing-page .cardTitle {
  font-family: "Marcellus", Georgia, "Times New Roman", serif !important;
}

/* Mobile navigation: hamburger toggle (injected by marketing.js) + collapsible
   panel that reveals the full nav incl. the Calculators submenu (≤760px). */
.nav-mobile-toggle { display: none; }
.hero-section, .hero-section--split { position: relative; }
@media (max-width: 900px) {
  .nav-mobile-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 44px; height: 44px; padding: 9px;
    background: transparent; border: none; color: #114734; cursor: pointer; border-radius: 8px;
  }
  .marketing-navbar { flex-wrap: wrap; align-items: center; }
  .marketing-navbar .navbar-center, .marketing-navbar .navbar-right { display: none; }
  .marketing-navbar.nav-open .navbar-center,
  .marketing-navbar.nav-open .navbar-right { display: flex; flex-basis: 100%; width: 100%; }
  .marketing-navbar.nav-open .navbar-links { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
  .marketing-navbar.nav-open .nav-link-hide-mobile { display: block !important; }
  .marketing-navbar.nav-open .navbar-links .nav-link-btn,
  .marketing-navbar.nav-open .nav-dropdown-toggle { padding: 12px 6px; width: 100%; text-align: left; justify-content: flex-start; }
  .marketing-navbar.nav-open .navbar-right { justify-content: flex-start; padding: 4px 0 12px; }
  .marketing-navbar.nav-open .nav-dropdown { width: 100%; }
  .marketing-navbar.nav-open .nav-dropdown.is-open .nav-dropdown-menu {
    position: static !important; box-shadow: none !important; border: none !important;
    padding: 0 0 0 16px !important; background: transparent !important; min-width: 0 !important;
  }
}

/* Hero background video: pause/play control (injected by marketing.js) for WCAG 2.2.2. */
.hero-video-toggle {
  position: absolute; bottom: 16px; right: 16px; z-index: 6;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(8,20,15,0.55); color: #fff; border: 1px solid rgba(255,255,255,0.45);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s ease;
}
.hero-video-toggle:hover { background: rgba(8,20,15,0.8); }
@media (prefers-reduced-motion: reduce) { .hero-video-toggle { display: none; } }

/* Floating widgets: the CookieYes "revisit consent" badge and the UserWay
   accessibility button both default to the bottom-LEFT corner and overlap/stack.
   Move the cookie badge to the bottom-right (nudged up to clear the home hero's
   video pause control, which sits at bottom-right of the hero) so the two
   never stack on top of each other. */
.cky-btn-revisit-wrapper,
.cky-btn-revisit-wrapper.cky-revisit-bottom-left {
  left: auto !important;
  right: 16px !important;
  bottom: 76px !important;
}