/* Local trim for the copied static export. Keep the real components alive. */
html {
  overflow-x: clip !important;
  overflow-y: auto !important;
}

body {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

header[class*="content-module"] {
  z-index: 50 !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

main,
footer {
  position: relative !important;
  z-index: 1 !important;
}

/* The loader (and the body behind it, so the fade-out reveals no flash)
   wears the hero intro's own dark blurred clouds — loader-clouds.jpg is a
   capture of the WebGL intro backdrop, which has no source bitmap. */
html, body {
  background:
    url("/assets/hero/loader-clouds.jpg?v=2") center / cover no-repeat,
    #1b2838 !important;
}

.screenshepherd-loader {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: none !important;
  color: #fff !important;
  background:
    url("/assets/hero/loader-clouds.jpg?v=2") center / cover no-repeat,
    #1b2838 !important;
  transition:
    opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 520ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation: none !important;
}

.screenshepherd-loader::before {
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18), transparent 36%) !important;
}

.screenshepherd-loader[data-state="hidden"] {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Pill technique applied to a cross mask: a conic-gradient wedge rotates via
   transform (compositor-thread, GPU-accelerated, survives Next.js hydration
   starvation) and is masked through the cross outline so only the cross
   stroke shows the bright sweep. stroke-dashoffset was main-thread-only and
   could not survive hydration. */
.screenshepherd-loader__spinner {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  width: 120px !important;
  height: 120px !important;
  color: currentColor !important;
}

.screenshepherd-loader__icon,
.screenshepherd-loader__line-container {
  grid-area: 1 / 1 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linejoin='round' stroke-linecap='round' d='M55 6 L65 6 A4 4 0 0 1 69 10 L69 37 L95 37 A4 4 0 0 1 99 41 L99 49 A4 4 0 0 1 95 53 L69 53 L69 110 A4 4 0 0 1 65 114 L55 114 A4 4 0 0 1 51 110 L51 53 L25 53 A4 4 0 0 1 21 49 L21 41 A4 4 0 0 1 25 37 L51 37 L51 10 A4 4 0 0 1 55 6 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat !important;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linejoin='round' stroke-linecap='round' d='M55 6 L65 6 A4 4 0 0 1 69 10 L69 37 L95 37 A4 4 0 0 1 99 41 L99 49 A4 4 0 0 1 95 53 L69 53 L69 110 A4 4 0 0 1 65 114 L55 114 A4 4 0 0 1 51 110 L51 53 L25 53 A4 4 0 0 1 21 49 L21 41 A4 4 0 0 1 25 37 L51 37 L51 10 A4 4 0 0 1 55 6 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat !important;
}

.screenshepherd-loader__icon {
  background: currentColor !important;
  opacity: 0.3 !important;
}

.screenshepherd-loader__line-container {
  position: relative !important;
  overflow: hidden !important;
}

.screenshepherd-loader__line {
  position: absolute !important;
  inset: -60% !important;
  background: conic-gradient(from 0deg at 50% 50%, currentColor 0deg 70deg, transparent 70deg 360deg) !important;
  animation: screenshepherd-loader-rotate 2.4s linear infinite !important;
  will-change: transform !important;
}

@keyframes screenshepherd-loader-rotate {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

/* Enlarge the Next.js spinner container — the small cross loader visible
   during hydration. Default size is ~60px which feels under-scaled.
   overflow:visible so the drop-shadow halo can bleed past the box. */
[class*="spinner-module-scss-module__ANPtdG__container"] {
  width: 130px !important;
  height: 130px !important;
  overflow: visible !important;
  animation: none !important;
}

/* Hide the rotating wedge layer underneath. The chunk CSS's __icon stays
   visible as the static dim cross outline; on top of it the trim.js-injected
   .ss-cross-trace draws the moving snake. Only one animated layer total. */
[class*="spinner-module-scss-module__ANPtdG__lineContainer"] {
  display: none !important;
}

/* Hide the chunk CSS's mask-based icon. Safari clips drop-shadow at the
   mask boundary, so we replace it with a real SVG path (injected by
   trim.js) where the glow halo can actually bleed past the cross. */
[class*="spinner-module-scss-module__ANPtdG__icon"] {
  display: none !important;
}

/* Cross loader: SVG path with whole-cross pulse + drop-shadow halo
   (variant #4 from /loader-test/glow.html — "moderate"). Both `opacity`
   and `filter` are compositor-accelerated, so this stays smooth even
   when Next.js hydration starves the main thread. */
svg.ss-cross-glow {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 2 !important;
  color: #fff !important;
  will-change: opacity, filter !important;
  animation: ss-cross-glow 1.6s ease-in-out infinite !important;
}
svg.ss-cross-glow path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 3 !important;
  stroke-linejoin: round !important;
  stroke-linecap: round !important;
}
@keyframes ss-cross-glow {
  0%,
  100% {
    opacity: 0.35;
    filter:
      drop-shadow(0 0 3px rgba(255, 255, 255, 0.6))
      drop-shadow(0 1px 6px rgba(23, 38, 53, 0.3));
  }
  50% {
    opacity: 1;
    filter:
      drop-shadow(0 0 10px rgba(255, 255, 255, 1))
      drop-shadow(0 0 26px rgba(255, 255, 255, 0.6))
      drop-shadow(0 1px 6px rgba(23, 38, 53, 0.3));
  }
}

/* When trim.js adds .is-fading (after `load` + small buffer), replace the
   infinite pulse with a one-shot graceful fade-out so the cross dims out
   smoothly instead of just blinking away when React swaps content in. */
svg.ss-cross-glow.is-fading {
  animation: ss-cross-fade 900ms cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}
@keyframes ss-cross-fade {
  to {
    opacity: 0;
    filter: drop-shadow(0 0 0 transparent);
  }
}

@keyframes screenshepherd-loader-fallback-hide {
  to {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
}

@keyframes ss-hero-loader-fallback-hide {
  to {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
}

main > section {
  display: none !important;
}

main > section[class*="phone-module"],
main > section[class*="carousel-reviews-module"] {
  display: block !important;
}

main > section[class*="phone-module"] {
  display: grid !important;
}

main > section[class*="carousel-reviews-module"] {
  display: flex !important;
}

main > section[class*="faq-module"],
main > section[class*="qr-module"] {
  display: grid !important;
}

main > section[class*="footnotes-module"],
main > section[class*="highlight-module"],
main > section[class*="immersive-module"],
main > section[class*="carousel-features-module"],
main > section[class*="carousel-skew-module"],
main > section[class*="cards-side-by-side-module"],
main > section[class*="content-module__wHkUCG"],
main > section[class*="header-module"] {
  display: none !important;
}

main > section[class*="phone-module"] {
  position: relative !important;
  z-index: auto !important;
  height: 250svh !important;
  min-height: 250svh !important;
  max-height: none !important;
  overflow: visible !important;
}

main > section[class*="carousel-reviews-module"],
main > section[class*="faq-module"],
main > section[class*="qr-module"],
footer {
  position: relative !important;
  z-index: auto !important;
}

main > section[class*="carousel-reviews-module"],
main > section[class*="faq-module"] {
  background: #f8f6f2 !important;
}

main > section[class*="phone-module"] [class*="stickyContainer"] {
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
}

main > section[class*="phone-module"] [class*="stickyContainer"] {
  grid-area: 1 / 1 !important;
  display: grid !important;
  width: 100% !important;
  position: sticky !important;
  top: 0 !important;
}

main > section[class*="phone-module"] [class*="loaderContainer"] {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

main > section[class*="phone-module"] [class*="loaderContainer"] [class*="image"] {
  visibility: hidden !important;
  opacity: 0 !important;
}

main > section[class*="phone-module"] [class*="loaderContainer"] [class*="spinner"] {
  visibility: visible !important;
  opacity: 1 !important;
}

main > section[class*="phone-module"] [class*="title"] {
  white-space: pre-line !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.22) !important;
}

.ss-force-hero-ready main > section[class*="phone-module"] [class*="loaderContainer"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.ss-force-hero-ready [class*="spinner-module-scss-module__ANPtdG__container"],
.ss-force-hero-ready svg.ss-cross-glow {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

dialog[class*="dialog-module"] {
  display: none !important;
  width: 100dvw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 132px 7vw 7vw !important;
  color: #fff8f1 !important;
  background: rgba(28, 25, 24, 0.92) !important;
  backdrop-filter: blur(18px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 260ms ease !important;
  z-index: 900 !important;
}

dialog[class*="dialog-module"][open],
body.screenshepherd-menu-open dialog[class*="dialog-module"] {
  display: grid !important;
  place-items: center !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

dialog[class*="dialog-module"]::backdrop {
  background: transparent !important;
}

body.screenshepherd-menu-open {
  overflow: hidden !important;
}

body.screenshepherd-menu-open dialog[class*="dialog-module"] [class*="mobileNavContainer"] {
  display: grid !important;
  width: min(520px, 86vw) !important;
  height: auto !important;
  place-items: stretch !important;
}
main > section[class*="carousel-reviews-module"] :is(h1, h2, h3, p, span, button, a),
main > section[class*="faq-module"] :is(h1, h2, h3, p, span, button, a),
main > section[class*="qr-module"] :is(h1, h2, h3, p, span, button, a),
footer :is(h1, h2, h3, p, span, button, a),
main > section[class*="carousel-reviews-module"] [class*="reveal"],
main > section[class*="faq-module"] [class*="reveal"],
main > section[class*="qr-module"] [class*="reveal"],
footer [class*="reveal"] {
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

footer [class*="column"]:has(a[href="/company"], a[href="/company"]),
footer a[href="/company"],
footer a[href="/company"],
dialog a[href="/company"],
dialog a[href="/company"] {
  display: none !important;
}

/* ── Native mobile menu: sizing only (no restyle) ──
   The native vertical menu hugs its content (~187px), leaving the card cramped.
   Widen it to a comfortable menu width and let the native items + the
   'Get the app' button fill it. Visual style stays 100% native. */
body.screenshepherd-menu-open dialog[class*="dialog-module"] [class*="mobileNavContainer"] {
  width: min(360px, 88vw) !important;
}
body.screenshepherd-menu-open dialog[class*="dialog-module"] [class*="mobileNavContainer"] > *,
body.screenshepherd-menu-open dialog[class*="dialog-module"] [class*="vertical-module"][class*="container"],
body.screenshepherd-menu-open dialog[class*="dialog-module"] [class*="vertical-module"][class*="itemsContainer"],
body.screenshepherd-menu-open dialog[class*="dialog-module"] [class*="vertical-module"][class*="itemContainer"],
body.screenshepherd-menu-open dialog[class*="dialog-module"] [class*="containerOuter"] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* tighten the menu's vertical spacing (sizing only): shorter rows, smaller gaps */
body.screenshepherd-menu-open dialog[class*="dialog-module"] [class*="vertical-module"][class*="itemsContainer"] {
  gap: 4px !important;
  padding: 6px !important;
}
body.screenshepherd-menu-open dialog[class*="dialog-module"] [class*="vertical-module"][class*="itemContainer"] {
  padding: 0 !important;
}
body.screenshepherd-menu-open dialog[class*="dialog-module"] [class*="vertical-module"] [class*="containerOuter"],
body.screenshepherd-menu-open dialog[class*="dialog-module"] [class*="vertical-module"] [class*="containerInner"] {
  min-height: 0 !important;
}
body.screenshepherd-menu-open dialog[class*="dialog-module"] [class*="vertical-module"] [class*="containerInner"] {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* ── Simplified nav: no menu links, no hamburger/dropdown ──
   Keep only the logo (left) and the "Get the app" button (top-right) at all widths. */
[class*="content-module"] [class*="navigationMenuHorizontal"],
[class*="horizontal-module"][class*="container"],
[class*="content-module"] [class*="buttonMenu"] {
  display: none !important;
}
/* keep the Get the app button visible at every width (was hidden on mobile) */
[class*="content-module"] [class*="buttonAppContainer"] {
  display: flex !important;
}

/* ── Logo: the brand mark (vector) inside a circle that REUSES the "Get the app"
   button's exact glass classes — so material / sheen / shadow are identical and it
   flips dark↔light with the button on scroll. Only the SHAPE + size are overridden. */
[class*="logo-full-module"][class*="containerOuter"],
[class*="logo-full-module"][class*="containerInner"],
[class*="content-module"][class*="__logo"],
[class*="content-module"][class*="logoContainer"] {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
[class*="logo-full-module"]::before,
[class*="logo-full-module"]::after,
[class*="logo-full-module"] [class*="containerInner"]::before,
[class*="logo-full-module"] [class*="containerInner"]::after {
  display: none !important;
  content: none !important;
}
/* The nav vertically centers the logo box on the CTA's line, but the 58px pill is
   bigger than the original logo box and was overflowing downward (sitting low).
   Pin the box to a stable footprint and absolute-CENTER the pill on it, so the
   circle stays the same height as "Get the app" and lines up with it on both axes,
   in every scroll state. */
[class*="logo-full-module"][class*="containerOuter"] {
  position: relative !important;
  width: 58px !important;
  min-width: 58px !important;
  height: 47px !important;
  overflow: visible !important;
}
[class*="logo-full-module"][class*="containerInner"] {
  display: block !important;
  width: 58px !important;
  min-width: 58px !important;
  height: 47px !important;
  line-height: 0 !important;
}
/* circle shape + diameter (glass / sheen / border / shadow inherited from button classes) */
.ss-logo-pill {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  width: 58px !important;
  height: 58px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
}
.ss-logo-pill > span {
  border-radius: 50% !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
}
.ss-logo-vec {
  width: 86% !important;
  height: 86% !important;
  display: block !important;
  transition: color .2s linear !important;
}
.ss-logo-vec svg { width: 100% !important; height: 100% !important; display: block !important; }
[data-theme="dark"] .ss-logo-vec { color: #fff !important; }
[data-theme="light"] .ss-logo-vec { color: rgb(71, 32, 28) !important; }

/* The family review video lives in a body-level overlay on TOP of each portrait.
   Hide the legacy template's player + its poster that sit behind it (and clear the
   slot's placeholder gradient) so nothing old can peek through while the carousel
   slides — behind the family clip is just the clean white card. */
[class*="carousel-reviews"] mux-player,
[class*="carousel-reviews"] mux-video,
[class*="carousel-reviews"] [class*="asset-module"][class*="poster"] {
  opacity: 0 !important;
}
[class*="carousel-reviews"] [class*="asset-module"][class*="contain"] {
  background: transparent !important;
}

/* Reviews carousel background — warm "parchment" sand band (replaces the legacy peach). */
[class*="carousel-reviews"] ol,
ol[class*="carousel-reviews"] {
  background-image: linear-gradient(
    rgba(235, 222, 198, 0) 0%,
    rgba(235, 222, 198, 0.85) 30%,
    rgba(235, 222, 198, 0.85) 66%,
    rgba(235, 222, 198, 0) 100%
  ) !important;
}

/* Scrub leftover fintech artifacts from the scraped template so they never flash
   before trim.js removes them (and stay hidden if a class hash ever shifts):
   - the footer "small print" block: banking / FDIC / card / credit disclaimers
   - the "ScreenShepherd Card" product item in the nav menu (href="/card") */
[class*="footnotes-module"][class*="container"] {
  display: none !important;
}
a[href="/card"],
li[class*="dialog-module"]:has(a[href="/card"]) {
  display: none !important;
}