/**
 * Site-wide dark theme.
 * Activated by html[data-theme="dark"] (FOUC boot + theme-toggle.js).
 * Default follows prefers-color-scheme unless localStorage nb-theme is set.
 */

/*
 * Instant theme flips: kill transition interpolation only.
 * Do NOT set animation:none on * — that permanently stops mosey/cloud
 * floats (CSS animations do not resume after the class is removed).
 */
html.nb-theme-switching,
html.nb-theme-switching * {
  transition: none !important;
}

/*
 * Filter mid-frames (brightness→invert) paint as a soft black “drop shadow”
 * on logos/icons before settling. Hide filtered objects for the switch tick
 * so that intermediate composite never shows.
 */
html.nb-theme-switching .bank-logo[data-balloon-logo],
html.nb-theme-switching .lander-globe-iconography,
html.nb-theme-switching .lander-globe-iconography-group,
html.nb-theme-switching .lander-globe-iconography-art,
html.nb-theme-switching .lander-globe-iconography-scrim,
html.nb-theme-switching .lander-globe-chart,
html.nb-theme-switching .bank-globle-routes,
html.nb-theme-switching .lander-globe::before,
html.nb-theme-switching .services-box-iconography,
html.nb-theme-switching .card-iconography,
html.nb-theme-switching .chip-on-card img,
html.nb-theme-switching .checkbox-list-item::before,
html.nb-theme-switching .main-iconography,
html.nb-theme-switching .iconography-copilot-image,
html.nb-theme-switching .iconography-payments-image,
html.nb-theme-switching .iconography-specialty-image,
html.nb-theme-switching .iconography-business-image,
html.nb-theme-switching .iconography-security-image,
html.nb-theme-switching .prospera-iconography {
  visibility: hidden !important;
}

/* —— Toggle control (size bounds also in thenetworkbank.webflow.css for early paint) —— */
.theme-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  color: inherit;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

.theme-toggle:focus-visible {
  outline: 2px solid #1d5dff;
  outline-offset: 2px;
}

.theme-toggle__icon {
  box-sizing: border-box;
  display: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
  overflow: hidden;
  flex-shrink: 0;
}

.theme-toggle__icon.material-icons {
  align-items: center;
  justify-content: center;
  font-family: Material Icons, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  white-space: nowrap;
}

html:not([data-theme="dark"]) .theme-toggle__icon--moon,
html[data-theme="dark"] .theme-toggle__icon--sun {
  display: inline-flex;
}

html:not([data-theme="dark"]) .theme-toggle__icon--sun,
html[data-theme="dark"] .theme-toggle__icon--moon {
  display: none;
}

/*
 * Navbar: keep brand + theme toggle on one vertical centerline.
 * Webflow float brand + brand margin-top: 5px throws the toggle off-center.
 */
.navbar .navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .brand.w-nav-brand,
.navbar .brand {
  float: none;
  margin-top: 0;
  margin-bottom: 0;
}

.navbar .nav-menu {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.navbar .big-screen-menu {
  align-items: center;
}

.navbar .theme-toggle {
  align-self: center;
}

/* Theme toggle lives in .big-screen-menu (desktop + mobile panel). */
.theme-toggle--mobile {
  display: none !important;
}

.theme-toggle--menu {
  display: inline-flex;
}

/* Mobile-only sandwich chrome (injected by mobile-nav.js) */
.nb-mobile-menu-top,
.nb-mobile-site-nav,
.nb-mobile-section-label,
.nb-mobile-close {
  display: none;
}


/* Balloon engine reads this when data-theme is unset (lab pages / fallback). */
:root {
  --balloon-is-dark: 0;
}
html[data-theme="dark"] {
  --balloon-is-dark: 1;
}
html[data-theme="light"] {
  --balloon-is-dark: 0;
}

/* —— Dark palette —— */
html[data-theme="dark"] {
  color-scheme: dark;
  --nb-bg: #0b0d14;
  --nb-bg-elevated: #141824;
  --nb-bg-panel: #1a1f2e;
  /* Body/heading text ~25% toned down vs pure near-white */
  --nb-fg: #c2c5ce;
  --nb-fg-muted: #8b929e;
  --nb-border: rgba(255, 255, 255, 0.08);
  --nb-border-strong: rgba(255, 255, 255, 0.14);
  --nb-border-focus: rgba(74, 120, 224, 0.45);
  /* Blue text accent ~25% toned (less luminous than #1d5dff) */
  --nb-accent: #4a78e0;
  /* Iconography: rgb(74, 120, 224) — same as --nb-accent */
  --nb-icon: #4a78e0;
  /* Filled primary blue = #1d5dff @ 30% on black (Prospera dark chrome start) */
  --nb-blue: #091c4d;
  --nb-blue-hover: #0d2a73;
  /* Panel CTAs (forms on elevated cards): mid blue — ~12–15% brighter vs prior for punch on dark */
  --nb-btn: #4f79d2;
  --nb-btn-hover: #5e8ae8;
  /* Recolor black SVG marks → --nb-icon */
  --nb-icon-filter: brightness(0) saturate(100%) invert(31%) sepia(92.1%)
    saturate(490.6%) hue-rotate(183.6deg) brightness(122.5%) contrast(84.9%);
}

html[data-theme="dark"] body {
  background-color: var(--nb-bg);
  color: var(--nb-fg);
}

/* Prospera / subpage scroll chrome: brand blue 30% on black → black */
html[data-theme="dark"].section-animation-active,
html[data-theme="dark"].section-animation-active body {
  /* Fallback before JS paints --section-bg; keep --nb-blue fills unchanged */
  background-color: var(--section-bg, #061337);
}

/* Home: white section underlays → dark */
html[data-theme="dark"] .white-background {
  background-color: var(--nb-bg);
}

html[data-theme="dark"] .currency-in-cluster.model-to-hide {
  background-color: #000;
}

/* Currency chips: 10% shrink on hover (light + dark) */
.currency-in-cluster.model-to-hide {
  transition: transform 0.18s ease;
  transform-origin: center center;
  position: relative;
  z-index: 2;
}

.currency-in-cluster.model-to-hide:hover {
  transform: scale(0.9);
}

.currencies-cluster {
  position: relative;
  z-index: 2;
}

/*
 * Decorative clouds are large square/rect hit-boxes (PNG/AVIF boxes, not silhouettes).
 * Never intercept pointer events so currency hover stays reliable.
 */
.lander-globe-cloud,
.lander-globe-cloud-2,
.bank-routes-cloud,
.clouds.boxes,
.innovation-cloud,
.privacy-cloud,
.coral-reef {
  pointer-events: none;
}

/* List copy: arrow cursor (never I-beam); links keep pointer */
li {
  cursor: default;
}

li a,
li a *,
li button,
li button *,
li [role="button"],
li [role="button"] *,
li summary,
li summary * {
  cursor: pointer;
}

/* Logo wordmark (Network / Network Bank / etc.): never I-beam; pointer only in links */
.bank-name,
.bank-name * {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

a.brand,
a.brand *,
a .bank-name,
a .bank-name * {
  cursor: pointer;
}

/*
 * Brand wordmark — Open Sans semibold, slight condensed stretch, tighter tracking.
 * Size 17px (tablet footer proportional ~12.75px).
 */
.bank-name,
h1.bank-name {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-stretch: 95%;
  letter-spacing: -0.02em;
  font-size: 17px;
  line-height: 17px;
}

/* Logo + brand name: 5px closer than Webflow’s 16px (desktop) / 8px (card mobile) */
.brand,
.footer-logo-container,
.card-logo-container {
  grid-column-gap: 11px;
  column-gap: 11px;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .card-logo-container {
    grid-column-gap: 3px;
    column-gap: 3px;
  }

  /* Kill legacy Webflow mobile hacks that shifted footer mark vs wordmark */
  .footer-logo-container .logo-footer,
  .logo-footer {
    margin-top: 0;
  }

  .footer-logo-container .bank-logo {
    margin-top: 0 !important;
    top: 0;
  }
}

/* Optical vertical align vs logo in top-lander-card + footer (nav unchanged) */
.top-lander-card .bank-name.footer,
.footer-logo-container .bank-name.footer,
.bank-name.footer {
  margin-top: 0;
}

@media screen and (max-width: 991px) {
  .top-lander-card .bank-name.footer,
  .footer-logo-container .bank-name.footer,
  .bank-name.footer {
    margin-top: 0;
  }
}

/*
 * Globe 3D limb shade — clipped to the circular banking-*globe plate.
 * Sits above the map (.lander-globe) and under routes (.bank-globle-routes).
 * Keep .lander-globe at z-index:auto so routes can stack above this ::after.
 * Globe plate stays below sibling clouds / iconography so the shade never tints them.
 */
.banking-prospera-globe,
.banking-globe,
.banking-pa-globe,
.banking-epspe-globe {
  z-index: 0;
}

.banking-prospera-globe::after,
.banking-globe::after,
.banking-pa-globe::after,
.banking-epspe-globe::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  /* Edge fade only — mid limb, much stronger final rim */
  background: radial-gradient(
    circle at 50% 50%,
    transparent 46%,
    rgba(15, 23, 42, 0.1) 62%,
    rgba(15, 23, 42, 0.24) 76%,
    rgba(15, 23, 42, 0.48) 88%,
    rgba(15, 23, 42, 0.78) 95%,
    rgba(15, 23, 42, 0.98) 100%
  );
}

.bank-globle-routes {
  position: relative;
  z-index: 2;
}

/* Top cloud + satellite stay behind the globe circle */
.landing-section-inner-content-animation-box > .bank-routes-cloud,
.landing-section-inner-content-animation-box > .bank-routes-satellite,
.landing-section-inner-content-animation-box > .bank-routes-satellite-lines {
  z-index: 0;
}

/* Bottom cloud + iconography sit above the shade (not tinted) */
.landing-section-inner-content-animation-box > .clouds.boxes,
.landing-section-inner-content-animation-box > .prospera-iconography,
.landing-section-inner-content-animation-box > .feature-iconography,
.landing-section-inner-content-animation-box > .global-iconography,
.landing-section-inner-content-animation-box > .pa-iconography,
.landing-section-inner-content-animation-box > .epspe-iconography {
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .currency-in-cluster.model-to-hide {
    transition: none;
  }

  .currency-in-cluster.model-to-hide:hover {
    transform: none;
  }
}

html[data-theme="dark"] .footer-dark-bg.dark-mode.footer-bg,
html[data-theme="dark"] .bank-footer.start-dark {
  background-color: #000;
}

/* Footer copy ~25% softer (match --nb-fg / muted tokens) */
html[data-theme="dark"] .bank-footer .moon-footer-link,
html[data-theme="dark"] .bank-footer .bank-name.footer,
html[data-theme="dark"] .bank-footer .call-to-action-text.no-button.footer-cta {
  color: var(--nb-fg);
}

html[data-theme="dark"] .bank-footer .moon-footer-fineprint,
html[data-theme="dark"] .bank-footer .footer-copyright-2 {
  color: rgba(194, 197, 206, 0.55);
}

html[data-theme="dark"] .bank-footer .footer-mission {
  color: var(--nb-fg-muted);
}

html[data-theme="dark"] .bank-footer .bolded-text.gray-or-violet {
  color: var(--nb-accent);
}

html[data-theme="dark"] .bank-footer a.footer-title-link:hover,
html[data-theme="dark"] .bank-footer a.footer-title-link:focus-visible {
  color: var(--nb-accent);
}

html[data-theme="dark"] .mid-section-bg-light.light-mode {
  display: none;
}

html[data-theme="dark"] .mid-section-bg-dark.dark-mode {
  display: block;
  opacity: 1;
  /* Flat net blue — drop Webflow black→navy gradient */
  background-color: var(--nb-blue);
  background-image: none;
}

html[data-theme="dark"] .secured-card-content-section.main-content-section-box.gray-bg .mid-section-bg-dark.dark-mode {
  /* --nb-blue (#091c4d) at 50% over page ground */
  background-color: rgba(9, 28, 77, 0.5);
}

/* Home hero: first frame of god-rays loop (dark) — video fades in after page load */
html[data-theme="dark"] .landing-content-section {
  background-color: #010106;
  background-image: url("../images/underwater-godrays-loop-poster.jpg");
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
}

/*
 * Soft legibility under nav type over bright homepage rays only.
 * Skip section-animation subpages (solid chrome). No glow halo — the old
 * 14px blur read as a drop-shadow flash while color/filter interpolated.
 */
html[data-theme="dark"]:not(.section-animation-active) .navbar .menu-item,
html[data-theme="dark"]:not(.section-animation-active)
  .navbar
  .nav-link-block:not(.action-item-link),
html[data-theme="dark"]:not(.section-animation-active) .navbar .bank-name,
html[data-theme="dark"]:not(.section-animation-active) .navbar .theme-toggle {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .landing-content-section > * {
  position: relative;
  z-index: 1;
}

/*
 * Per-object darker-down scrim (masked to each graphic).
 * Important: do NOT put z-index on these ::afters — with z-index they join the
 * parent stacking context and the circle scrim painted OVER the dollar where
 * they overlap (overhang looked lighter). Keep overlays inside each element;
 * raise the foreground layers above the circle instead.
 */
html[data-theme="dark"] .behind-lander-globe-container {
  z-index: 0;
}

html[data-theme="dark"] .lander-globe-cash,
html[data-theme="dark"] .lander-globe-chart,
html[data-theme="dark"] .coral-reef {
  z-index: 1;
}

html[data-theme="dark"] .lander-globe-iconography {
  z-index: 2;
}

html[data-theme="dark"] .behind-lander-globe-container::after,
html[data-theme="dark"] .lander-globe-cash::after,
html[data-theme="dark"] .lander-globe-chart::after,
html[data-theme="dark"] .coral-reef::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(1, 1, 6, 0.08) 0%,
    rgba(1, 1, 6, 0.16) 28%,
    rgba(1, 1, 6, 0.4) 62%,
    rgba(1, 1, 6, 0.72) 100%
  );
  pointer-events: none;
}

/*
 * Iconography scrim is a real sibling of the filtered art inside
 * .lander-globe-iconography-group (mosey target) so mask + icons translate 1:1.
 */
html[data-theme="dark"] .lander-globe-iconography-scrim {
  display: block;
  background: linear-gradient(
    180deg,
    rgba(1, 1, 6, 0.08) 0%,
    rgba(1, 1, 6, 0.16) 28%,
    rgba(1, 1, 6, 0.4) 62%,
    rgba(1, 1, 6, 0.72) 100%
  );
  -webkit-mask-image: url("../images/Group-283322-1.svg");
  mask-image: url("../images/Group-283322-1.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

html[data-theme="dark"] .lander-globe-iconography-art {
  filter: var(--nb-icon-filter);
}

html[data-theme="dark"] .lander-globe-iconography .main-iconography,
html[data-theme="dark"] .lander-globe-iconography img {
  filter: none;
}

/* Circle: clip to disc (stays under cash/chart/coral/icon) */
html[data-theme="dark"] .behind-lander-globe-container::after {
  border-radius: 50%;
}

/* Cash / chart / coral / icon: alpha-mask to asset silhouette */
html[data-theme="dark"] .lander-globe-cash::after {
  -webkit-mask-image: url("../images/image-31.avif");
  mask-image: url("../images/image-31.avif");
  -webkit-mask-position: 50%;
  mask-position: 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

html[data-theme="dark"] .lander-globe-chart::after {
  -webkit-mask-image: url("../images/Group-283327.svg");
  mask-image: url("../images/Group-283327.svg");
  -webkit-mask-position: 50%;
  mask-position: 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

html[data-theme="dark"] .coral-reef::after {
  -webkit-mask-image: url("../images/coral-reef.webp");
  mask-image: url("../images/coral-reef.webp");
  -webkit-mask-image: -webkit-image-set(
    url("../images/coral-reef.avif") type("image/avif"),
    url("../images/coral-reef.webp") type("image/webp")
  );
  mask-image: image-set(
    url("../images/coral-reef.avif") type("image/avif"),
    url("../images/coral-reef.webp") type("image/webp")
  );
  -webkit-mask-position: 50% 60%;
  mask-position: 50% 60%;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

html[data-theme="dark"] .top-lander-card {
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

/* Headings & body copy */
html[data-theme="dark"] .heading-1.landing-section-header,
html[data-theme="dark"] .heading-1.landing-section-header .bold-text-4,
html[data-theme="dark"] .heading-2,
html[data-theme="dark"] .heading-2.center,
html[data-theme="dark"] .bank-name,
html[data-theme="dark"] .overview-paragraph,
html[data-theme="dark"] .ready-to-try-cta,
html[data-theme="dark"] .checkbox-list-item,
html[data-theme="dark"] .in-text-link,
html[data-theme="dark"] .faq-link-text {
  color: var(--nb-fg);
}

html[data-theme="dark"] .tagline-subtitle.gray-or-violet,
html[data-theme="dark"] .section-subtitle.gray-or-violet,
html[data-theme="dark"] .section-subtitle.content-box-subtitle.gray-or-violet {
  color: var(--nb-accent);
}

html[data-theme="dark"] .nav-link-block {
  color: var(--nb-fg);
}

html[data-theme="dark"] .nav-link-block:hover {
  color: var(--nb-accent);
}

html[data-theme="dark"] .navbar .nav-open-close svg rect {
  fill: var(--nb-fg);
}

html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .nav-link-block[data-locale-switch]:hover {
  color: var(--nb-fg);
  background-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .theme-toggle {
  color: var(--nb-fg);
}

/*
 * Clean white mark on dark chrome — same invert for static img AND live balloon.
 * (Dropping invert on .is-balloon-ready left WebGL studio lighting looking warm /
 * off vs brand text.) Mid-toggle flash is prevented by transition:none below plus
 * visibility:hidden during .nb-theme-switching — not by skipping the filter.
 */
html[data-theme="dark"] .bank-logo[data-balloon-logo],
html[data-theme="dark"] .bank-logo[data-balloon-logo] > img,
.bank-logo[data-balloon-logo="footer"],
.bank-logo[data-balloon-logo="footer"] > img {
  filter: brightness(0) invert(1);
}

/* Never interpolate filters — mid-keyframes read as drop shadows on objects */
/*
 * Never interpolate filters on marks (mid-keyframes → drop-shadow look).
 * Do NOT include .checkbox-list-item::before — that kills check-scale hover easing.
 * Theme-switch already forces transition:none via .nb-theme-switching *.
 */
.bank-logo[data-balloon-logo],
.lander-globe-iconography img,
.lander-globe-chart,
.bank-globle-routes,
.services-box-iconography,
.services-box-iconography img,
.card-iconography,
.chip-on-card img,
.main-iconography,
.iconography-copilot-image,
.iconography-payments-image,
.iconography-specialty-image,
.iconography-business-image,
.iconography-security-image,
.prospera-iconography {
  transition: none !important;
}

/* Cards / panels — no border/outline */
html[data-theme="dark"] .services-box {
  background-color: var(--nb-bg-panel);
  color: var(--nb-fg);
  box-shadow: none;
  border: 0;
}

html[data-theme="dark"] .services-box.phantom {
  background-color: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .main-content-background {
  background-color: var(--nb-bg-elevated);
  color: var(--nb-fg);
  box-shadow: none;
  border: 0;
}

html[data-theme="dark"] .main-content-rich-text,
html[data-theme="dark"] .main-content-rich-text p,
html[data-theme="dark"] .main-content-rich-text li {
  color: var(--nb-fg);
}

/* Quotes keep hardcoded light-theme grays in rich-article.css — override for dark */
html[data-theme="dark"] .main-content-rich-text blockquote,
html[data-theme="dark"] .hero-article.w-richtext blockquote,
html[data-theme="dark"] .w-richtext blockquote {
  border-left-color: var(--nb-accent);
  color: var(--nb-fg);
}

html[data-theme="dark"] .main-content-rich-text blockquote cite,
html[data-theme="dark"] .hero-article.w-richtext blockquote cite,
html[data-theme="dark"] .w-richtext blockquote cite {
  color: var(--nb-fg-muted);
}

html[data-theme="dark"] .main-content-rich-text:not(.legal-text-sm) h3,
html[data-theme="dark"] .main-content-rich-text:not(.legal-text-sm) h4 {
  color: var(--nb-accent);
}

/* Legal in-box headings stay document-gray → soft body fg (not accent blue) */
html[data-theme="dark"] .main-content-rich-text.legal-text-sm h1,
html[data-theme="dark"] .main-content-rich-text.legal-text-sm h2,
html[data-theme="dark"] .main-content-rich-text.legal-text-sm h3,
html[data-theme="dark"] .main-content-rich-text.legal-text-sm h4,
html[data-theme="dark"] .main-content-rich-text.legal-text-sm h5,
html[data-theme="dark"] .main-content-rich-text.legal-text-sm h6,
html[data-theme="dark"] .main-content-rich-text.legal-text-sm .legal-heading-part,
html[data-theme="dark"] .main-content-rich-text.legal-text-sm .legal-heading-section,
html[data-theme="dark"] .main-content-rich-text.legal-text-sm .legal-heading-sub {
  color: var(--nb-fg);
}

/* Prospera / article media + news */
html[data-theme="dark"] .rich-media-card {
  background: var(--nb-bg-panel);
  border: 0;
  box-shadow: none;
  color: var(--nb-fg);
}

html[data-theme="dark"] .rich-media-card__title {
  color: var(--nb-fg);
}

html[data-theme="dark"] .rich-media-card__byline {
  color: var(--nb-fg-muted);
}

html[data-theme="dark"] .rich-media-card__eyebrow {
  color: var(--nb-accent);
}

html[data-theme="dark"] .news-section-header,
html[data-theme="dark"] .news-tile__title {
  color: var(--nb-accent);
}

html[data-theme="dark"] .news-tile__body {
  background-color: var(--nb-bg-panel);
  border: 0;
  box-shadow: none;
}

html[data-theme="dark"] .news-tile__excerpt {
  color: var(--nb-fg-muted);
}

/* Checkbox: soft circle ≈ --nb-fg (#c2c5ce); check stays dark */
html[data-theme="dark"] .checkbox-list-item::before {
  filter: invert(0.78);
}

/* Iconography SVGs → --nb-icon (#174acc); skip live balloon canvases */
html[data-theme="dark"] .services-box-iconography.business-iconography,
html[data-theme="dark"] .services-box-iconography.security-iconography,
html[data-theme="dark"] .card-iconography:not(.is-balloon-ready),
html[data-theme="dark"] .prospera-iconography.specialty-iconograph:not(.is-balloon-ready),
html[data-theme="dark"] .lander-globe-chart {
  filter: var(--nb-icon-filter);
}

/* Card chip → ~#999 fill, keep dark circuit strokes */
html[data-theme="dark"] .chip-on-card img {
  filter: grayscale(1) brightness(0.79);
}

/* Routes: solid white (child of .lander-globe — must not inherit globe opacity) */
html[data-theme="dark"] .bank-globle-routes {
  position: relative;
  z-index: 2;
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* Dark globe: stronger limb falloff, softer highlight */
html[data-theme="dark"] .banking-prospera-globe::after,
html[data-theme="dark"] .banking-globe::after,
html[data-theme="dark"] .banking-pa-globe::after,
html[data-theme="dark"] .banking-epspe-globe::after {
  background: radial-gradient(
    circle at 50% 50%,
    transparent 44%,
    rgba(0, 0, 0, 0.12) 60%,
    rgba(0, 0, 0, 0.28) 74%,
    rgba(0, 0, 0, 0.55) 88%,
    rgba(0, 0, 0, 0.88) 95%,
    rgba(0, 0, 0, 1) 100%
  );
}

/* Lander molecule filter lives on .lander-globe-iconography-art (with scrim sibling). */
html[data-theme="dark"] .iconography-copilot-image,
html[data-theme="dark"] .iconography-payments-image,
html[data-theme="dark"] .iconography-specialty-image,
html[data-theme="dark"] .iconography-business-image,
html[data-theme="dark"] .iconography-security-image,
html[data-theme="dark"] .services-box-iconography img,
html[data-theme="dark"] [data-balloon-icon]:not(.is-balloon-ready) > img {
  filter: var(--nb-icon-filter);
}

/* Lander globe mark → white at 30% via ::before so routes stay full white */
html[data-theme="dark"] .lander-globe {
  background-image: none;
  filter: none;
  opacity: 1;
}

html[data-theme="dark"] .lander-globe::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/Group-48097715.svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  filter: brightness(0) invert(1);
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

/* Decorative clouds → 80% (hero globe clouds replaced by coral-reef below) */
html[data-theme="dark"] .bank-routes-cloud,
html[data-theme="dark"] .clouds.boxes,
html[data-theme="dark"] .innovation-cloud,
html[data-theme="dark"] .privacy-cloud {
  opacity: 0.8;
}

/* Hero: hide cloud overlays; coral reef sits over cash/chart, under iconography */
html[data-theme="dark"] .lander-globe-cloud,
html[data-theme="dark"] .lander-globe-cloud-2 {
  display: none;
}

.coral-reef {
  display: none;
}

html[data-theme="dark"] .coral-reef {
  display: block;
  background-color: transparent;
  background-image: url("../images/coral-reef.webp");
  background-image: -webkit-image-set(
    url("../images/coral-reef.avif") type("image/avif"),
    url("../images/coral-reef.webp") type("image/webp")
  );
  background-image: image-set(
    url("../images/coral-reef.avif") type("image/avif"),
    url("../images/coral-reef.webp") type("image/webp")
  );
  background-position: 50% 60%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 115%;
  height: 72%;
  position: absolute;
  top: 34%;
  left: -18%;
  pointer-events: none;
  z-index: 1;
}

html[data-theme="dark"] .lander-globe-iconography {
  z-index: 2;
}

/* Dark lander: chart is the sole accent mark (hide molecule cluster) */
@media screen and (max-width: 767px) {
  html[data-theme="dark"] .lander-globe-iconography {
    display: none !important;
  }
}

@media screen and (max-width: 991px) {
  html[data-theme="dark"] .coral-reef {
    width: 420px;
    height: 280px;
    top: 36%;
    left: auto;
    right: -70px;
  }
}

@media screen and (max-width: 767px) {
  /* Smaller coral — sit in the visible clipped band (bank uses 1.15×; we keep ~0.95×) */
  html[data-theme="dark"] .coral-reef {
    width: calc(0.95 * 155cqh) !important;
    height: calc(0.58 * 155cqh) !important;
    top: calc(0.14 * 155cqh) !important;
    left: calc(50% + (-0.14 - 0.5) * 155cqh) !important;
    right: auto !important;
    z-index: 1 !important;
  }
}

/* Ready to join / as-seen-in */
html[data-theme="dark"] .ready-to-join {
  color: var(--nb-fg);
}

html[data-theme="dark"] .ready-to-join .heading-2,
html[data-theme="dark"] .ready-to-join .heading-2 strong {
  color: var(--nb-fg);
}

html[data-theme="dark"] .ready-to-join .light-img {
  display: none !important;
}

html[data-theme="dark"] .ready-to-join .dark-img {
  display: inline-block !important;
}

/* Whisper links: plain text until hover (lander, lists, rich text) */
a.whisper-link {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  font-weight: inherit;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

a.whisper-link:hover,
a.whisper-link:focus-visible {
  color: #1d5dff;
  border-bottom-color: rgba(29, 93, 255, 0.4);
  outline: none;
}

/* Whisper / inline links on dark panels */
html[data-theme="dark"] a.whisper-link:hover,
html[data-theme="dark"] a.whisper-link:focus-visible,
html[data-theme="dark"] .main-content-rich-text a.whisper-link:hover,
html[data-theme="dark"] .main-content-rich-text a.whisper-link:focus-visible {
  color: var(--nb-accent);
  border-bottom-color: rgba(29, 93, 255, 0.45);
}

/* Forms / inputs — softer borders than Webflow #ccc */
html[data-theme="dark"] .w-input,
html[data-theme="dark"] .w-select,
html[data-theme="dark"] .text-field,
html[data-theme="dark"] .footer-form-field,
html[data-theme="dark"] textarea {
  color: var(--nb-fg);
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--nb-border);
  box-shadow: none;
}

html[data-theme="dark"] .w-input::placeholder,
html[data-theme="dark"] .text-field::placeholder,
html[data-theme="dark"] .footer-form-field::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--nb-fg-muted);
}

html[data-theme="dark"] .w-input:hover,
html[data-theme="dark"] .w-select:hover,
html[data-theme="dark"] .text-field:hover,
html[data-theme="dark"] .footer-form-field:hover {
  border-color: var(--nb-border-strong);
  box-shadow: none;
}

html[data-theme="dark"] .w-input:focus,
html[data-theme="dark"] .w-select:focus,
html[data-theme="dark"] .text-field:focus,
html[data-theme="dark"] .footer-form-field:focus,
html[data-theme="dark"] textarea:focus {
  border-color: var(--nb-border-focus);
  box-shadow: 0 0 0 3px rgba(74, 120, 224, 0.18);
  outline: none;
}

/* Form / panel buttons — mid blue reads on elevated cards without neon #007bff */
html[data-theme="dark"] .submit-btn,
html[data-theme="dark"] .main-content-background .w-button:not(.footer-form-submit),
html[data-theme="dark"] .form-block .w-button,
html[data-theme="dark"] .w-form .w-button:not(.footer-form-submit) {
  color: #fff;
  background-color: var(--nb-btn);
  border: 1px solid var(--nb-btn);
}

html[data-theme="dark"] .submit-btn:hover,
html[data-theme="dark"] .main-content-background .w-button:not(.footer-form-submit):hover,
html[data-theme="dark"] .form-block .w-button:hover,
html[data-theme="dark"] .w-form .w-button:not(.footer-form-submit):hover {
  background-color: var(--nb-btn-hover);
  border-color: var(--nb-btn-hover);
}

/* Sign-up CTA stays high-contrast */
html[data-theme="dark"] .nav-link-block.action-item-link.black {
  color: #0c0c0c;
  background-color: #ffffff;
}

html[data-theme="dark"] .nav-link-block.action-item-link.black:hover {
  color: #ffffff;
  background-color: var(--nb-blue-hover);
}

/* Primary filled blues → net blue (Prospera dark chrome) */
html[data-theme="dark"] .behind-lander-globe-container,
html[data-theme="dark"] .behind-lander-globe-container-copy,
html[data-theme="dark"] .behind-lander-globe-container-for-card,
html[data-theme="dark"] .banking-prospera-globe,
html[data-theme="dark"] .specialty-services-circle,
html[data-theme="dark"] .services-box-in-a-box-container,
html[data-theme="dark"] .services-box-in-a-box-container.right-flex,
html[data-theme="dark"] .services-box-in-a-box-container.flex-right,
html[data-theme="dark"] .services-box-in-a-box-wrap {
  background-color: var(--nb-blue);
}

/* Inner service panels match Prospera .main-content-background */
html[data-theme="dark"] .services-in-a-box-right,
html[data-theme="dark"] .services-box-in-box {
  background-color: var(--nb-bg-elevated);
}

/* Hero / section CTAs — use mid --nb-btn (not deep --nb-blue) so they read on dark heroes */
html[data-theme="dark"] .call-to-action-link-block.call-to-action.dark-gray-or-purple-bg,
html[data-theme="dark"] .call-to-action-link-block.call-to-action.center.dark-gray-or-purple-bg {
  color: #fff;
  background-color: var(--nb-btn);
}

html[data-theme="dark"] .call-to-action-link-block.call-to-action.dark-gray-or-purple-bg:hover,
html[data-theme="dark"] .call-to-action-link-block.call-to-action.center.dark-gray-or-purple-bg:hover {
  background-color: var(--nb-btn-hover);
}

html[data-theme="dark"] .footer-social-link.dark-gray-or-purple-bg {
  background-color: var(--nb-blue);
}

html[data-theme="dark"] .footer-social-link.dark-gray-or-purple-bg:hover {
  background-color: var(--nb-blue-hover);
}

html[data-theme="dark"] .get-extension.dark-gray-or-purple-bg {
  background-color: var(--nb-blue);
}

html[data-theme="dark"] .get-extension.dark-gray-or-purple-bg:hover {
  background-color: var(--nb-blue-hover);
}

/* —— Mobile chrome: nav, hero density, services —— */
@media screen and (max-width: 767px) {
  html.nb-nav-open,
  html.nb-nav-open body {
    overflow: hidden;
  }

  .navbar {
    z-index: 20;
    min-height: 56px;
    margin-bottom: 0;
  }

  .navbar .navbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    min-width: 0;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-top: 12px;
    padding-bottom: 0;
    position: relative;
    inset: auto;
    z-index: 9;
  }

  .navbar.is-nav-open .navbar-container {
    z-index: 9;
  }

  .navbar .brand.w-nav-brand,
  .navbar .brand {
    float: none;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    min-height: 40px;
  }

  .navbar .bank-logo,
  .navbar .bank-logo[data-balloon-logo="header"] {
    width: 18px;
    height: 18px;
    margin: 0;
    top: 0.5px;
    position: relative;
    flex-shrink: 0;
  }

  .navbar .bank-logo .image,
  .navbar .image {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0;
    vertical-align: middle;
  }

  .navbar .bank-name,
  .navbar h1.bank-name,
  .navbar .brand .bank-name {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .navbar .nav-menu {
    position: relative;
    top: auto;
    right: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    min-height: 40px;
    z-index: 12;
  }

  .menu-trigger-button-2 {
    z-index: 12;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .nav-open-close.open.link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    margin: 0 !important;
    cursor: pointer;
  }

  .nav-open-close.open.link svg {
    display: block;
    width: 22px;
    height: 16px;
  }

  /* Close control lives in the sheet top bar with Sign Up */
  .navbar.is-nav-open .menu-trigger-button-2 {
    visibility: hidden;
    pointer-events: none;
  }

  .narrow-menu-modal-overlay {
    z-index: 6;
    background-color: rgba(12, 16, 28, 0.55);
    opacity: 1;
    width: 100% !important;
    height: 100% !important;
    display: none;
    position: fixed;
    inset: 0;
  }

  .navbar.is-nav-open .narrow-menu-modal-overlay {
    display: block !important;
  }

  .navbar .big-screen-menu {
    display: none;
    z-index: 10;
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: min(300px, 86vw);
    max-height: 100dvh;
    margin: 0;
    padding: 14px 16px 28px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: #fff;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
    overflow: auto;
    color: #0c0c0c;
  }

  html[data-theme="dark"] .navbar .big-screen-menu {
    background-color: var(--nb-bg-elevated, #0f172a);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
    color: var(--nb-fg, #f5f7fb);
  }

  .navbar.is-nav-open .big-screen-menu {
    display: flex !important;
  }

  .navbar .big-screen-menu .nb-desktop-menu-cta {
    display: none !important;
  }

  .navbar .big-screen-menu .nb-mobile-menu-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    flex-shrink: 0;
  }

  .navbar .big-screen-menu .nb-mobile-section-label {
    display: block;
  }

  .navbar .big-screen-menu .nb-mobile-menu-cta,
  .navbar .big-screen-menu .nav-link-block.action-item-link.black.nb-mobile-menu-cta {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 48px;
    height: 48px;
    margin: 0;
    padding: 0 16px;
    justify-content: center;
    align-items: center;
    border: 0;
    border-radius: 999px;
    background-color: #0c0c0c;
    color: #fff;
  }

  .navbar .big-screen-menu .nb-mobile-menu-cta:hover,
  .navbar .big-screen-menu .nav-link-block.action-item-link.black.nb-mobile-menu-cta:hover {
    background-color: #1d5dff;
    color: #fff;
  }

  html[data-theme="dark"] .navbar .big-screen-menu .nb-mobile-menu-cta,
  html[data-theme="dark"] .navbar .big-screen-menu .nav-link-block.action-item-link.black.nb-mobile-menu-cta {
    background-color: #fff;
    color: #0c0c0c;
  }

  html[data-theme="dark"] .navbar .big-screen-menu .nb-mobile-menu-cta:hover,
  html[data-theme="dark"] .navbar .big-screen-menu .nav-link-block.action-item-link.black.nb-mobile-menu-cta:hover {
    background-color: #1d5dff;
    color: #fff;
  }

  .navbar .big-screen-menu .nb-mobile-menu-cta .signup {
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
  }

  .navbar .big-screen-menu .nb-mobile-close {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background-color: #0c0c0c;
    color: #fff;
    cursor: pointer;
  }

  .navbar .big-screen-menu .nb-mobile-close:hover {
    background-color: #1d5dff;
  }

  .navbar .big-screen-menu .nb-mobile-close:focus-visible {
    outline: 2px solid #1d5dff;
    outline-offset: 2px;
  }

  html[data-theme="dark"] .navbar .big-screen-menu .nb-mobile-close {
    background-color: #fff;
    color: #0c0c0c;
  }

  html[data-theme="dark"] .navbar .big-screen-menu .nb-mobile-close:hover {
    background-color: #1d5dff;
    color: #fff;
  }

  .navbar .big-screen-menu .nb-mobile-close svg {
    display: block;
  }

  .navbar .big-screen-menu .nb-mobile-site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0 0 8px;
  }

  .navbar .big-screen-menu .nb-mobile-section-label {
    margin: 0 4px 8px;
    font-family: Open Sans, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.45;
  }

  .navbar .big-screen-menu .nb-mobile-prefs-label {
    margin-top: 18px;
  }

  .navbar .big-screen-menu .nb-mobile-site-link {
    display: flex;
    align-items: center;
    min-height: 46px;
    margin: 0;
    padding: 12px;
    color: inherit;
    font-family: Open Sans, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  html[data-theme="dark"] .navbar .big-screen-menu .nb-mobile-site-link {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .navbar .big-screen-menu .nb-mobile-site-link:hover {
    background-color: rgba(0, 0, 0, 0.04);
    color: inherit;
  }

  html[data-theme="dark"] .navbar .big-screen-menu .nb-mobile-site-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
  }

  .navbar .big-screen-menu .nav-link-block[data-locale-switch],
  .navbar .big-screen-menu .theme-toggle--menu {
    margin: 0;
    width: 100%;
    max-width: none;
    min-height: 52px;
    height: auto;
    border-radius: 0;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    padding: 14px 12px;
    color: inherit;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    text-decoration: none;
  }

  html[data-theme="dark"] .navbar .big-screen-menu .nav-link-block[data-locale-switch],
  html[data-theme="dark"] .navbar .big-screen-menu .theme-toggle--menu {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .navbar .big-screen-menu .nav-link-block[data-locale-switch]:hover,
  .navbar .big-screen-menu .theme-toggle--menu:hover {
    background-color: rgba(0, 0, 0, 0.04);
    color: inherit;
  }

  html[data-theme="dark"] .navbar .big-screen-menu .nav-link-block[data-locale-switch]:hover,
  html[data-theme="dark"] .navbar .big-screen-menu .theme-toggle--menu:hover {
    background-color: rgba(255, 255, 255, 0.06);
  }

  .navbar .big-screen-menu .nav-link-block[data-locale-switch] .menu-item,
  .navbar .big-screen-menu .theme-toggle--menu .theme-toggle__icon {
    width: 22px;
    min-width: 22px;
    height: 22px;
    margin: 0;
    font-size: 22px;
    line-height: 1;
    opacity: 0.85;
  }

  /* Destination language (what you switch into) */
  .navbar .big-screen-menu .nav-link-block[data-locale-switch]::after {
    content: "Ir a Español";
    margin-left: 0;
    font-family: Open Sans, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: -0.01em;
  }

  html[lang="es"] .navbar .big-screen-menu .nav-link-block[data-locale-switch]::after {
    content: "Go to English";
  }

  /* Theme action = destination mode */
  .navbar .big-screen-menu .theme-toggle--menu::after {
    content: "Go to Dark mode";
    font-family: Open Sans, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  html[data-theme="dark"] .navbar .big-screen-menu .theme-toggle--menu::after {
    content: "Go to Light mode";
  }

  html[lang="es"]:not([data-theme="dark"]) .navbar .big-screen-menu .theme-toggle--menu::after {
    content: "Ir a modo oscuro";
  }

  html[lang="es"][data-theme="dark"] .navbar .big-screen-menu .theme-toggle--menu::after {
    content: "Ir a modo claro";
  }

  /*
   * Hero mobile stacks — mobile only. Desktop stays site Webflow (Labs flex /
   * bank sandwich). Bank keeps 50/25/25 via .lander-cta-band; Labs/siblings
   * use a 2-row tagline + globe stack (no empty middle row).
   */
  .lander-content-wrapper-flex {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-column-gap: 0 !important;
    grid-row-gap: 0 !important;
    flex-flow: unset !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    padding-top: 0 !important;
    overflow: visible !important;
  }

  .lander-content-wrapper-flex:has(> .lander-cta-band) {
    grid-template-rows: 50% 25% 25% !important;
  }

  .lander-content-wrapper-flex:not(:has(> .lander-cta-band)) {
    grid-template-rows: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
  }

  .lander-container-tagline {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    justify-content: flex-end !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    padding-top: 80px !important;
    padding-bottom: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
  }

  .lander-cta-band {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    padding-top: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  .lander-cta-band .overview-paragraph.lander,
  .lander-container-tagline .overview-paragraph.lander {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  .tagline-subtitle.gray-or-violet {
    margin-top: 16px !important;
    margin-bottom: 4px !important;
    font-size: 18px;
    line-height: 1.25;
  }

  .lander-tagline-subtitle-box {
    margin: 0;
  }

  .tagline-header {
    margin-top: 0 !important;
  }

  .heading-1.landing-section-header,
  .heading-1.landing-section-header .bold-text-4 {
    margin-top: 0 !important;
  }

  /* Center clipped lander art — kill Labs 135% / -23% shift (mobile only) */
  .lander-globe-container {
    grid-column: 1 !important;
    grid-row: 3 !important;
    align-self: stretch !important;
    justify-self: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    overflow: visible !important;
    position: relative !important;
    container-type: size !important;
    container-name: lander-globe !important;
  }

  .lander-content-wrapper-flex:not(:has(> .lander-cta-band)) > .lander-globe-container {
    grid-row: 2 !important;
  }

  .behind-lander-globe-container {
    aspect-ratio: 1 !important;
    width: 155cqh !important;
    height: 155cqh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 0 !important;
  }

  .lander-globe-cash {
    width: calc(0.72 * 155cqh) !important;
    height: calc(0.34 * 155cqh) !important;
    top: calc(0.14 * 155cqh) !important;
    right: auto !important;
    left: calc(50% + (-0.5 + 1 + 0.02 - 0.72) * 155cqh) !important;
    z-index: 2 !important;
  }

  .lander-globe-chart {
    width: calc(0.50 * 155cqh) !important;
    height: calc(0.90 * 155cqh) !important;
    top: calc(0.005 * 155cqh) !important;
    right: auto !important;
    bottom: auto !important;
    left: calc(50% + (0.5 - 0.32 - 0.50) * 155cqh) !important;
    z-index: 1 !important;
  }

  .lander-globe-cloud,
  .lander-globe-cloud-2 {
    display: none !important;
  }

  /* Services: drop heavy gray cards on mobile */
  .services-box-array {
    grid-row-gap: 0 !important;
    margin-top: 20px !important;
    margin-bottom: 12px !important;
  }

  .services-box-array > .services-box {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    padding: 28px 0 22px !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    overflow: visible;
  }

  .services-box-array > .services-box:last-child {
    border-bottom: 0;
  }

  html[data-theme="dark"] .services-box-array > .services-box {
    background-color: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }

  .services-box-array > .services-box > .section-subtitle {
    margin-top: 0;
    margin-bottom: 10px;
    padding-right: 0;
  }

  .services-box-array .services-box-iconography,
  .services-box-array .service-box-images {
    display: none !important;
  }

  .services-box-array .checkbox-bullets,
  .services-box-array .checkbox-bullets.mini {
    margin-top: 0;
  }
}

@media screen and (max-width: 479px) {
  .navbar .navbar-container {
    padding-top: 10px;
  }

  .menu-trigger-button-2 {
    margin-top: 0 !important;
  }

  .navbar .bank-logo {
    margin-top: 0 !important;
  }

  .navbar .image {
    margin-top: 0 !important;
  }

  .lander-container-tagline {
    padding-top: 68px !important;
    padding-bottom: 8px !important;
  }

  .tagline-subtitle.gray-or-violet {
    margin-top: 12px !important;
    margin-bottom: 6px !important;
  }

  .lander-cta-band .overview-paragraph.lander,
  .lander-container-tagline .overview-paragraph.lander {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }
}

/*
 * Mobile lander: full-bleed art + stable viewport height.
 * - 90% .top-container gutters + overflow:hidden clipped circle/cash/coral L/R.
 * - 100dvh/100vh reflow when the browser chrome shows/hides → scroll "jerk".
 * Use 100svh (small viewport) so height stays fixed during scroll.
 */
@media screen and (max-width: 767px) {
  .landing-content-section {
    width: 100% !important;
    max-width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  .landing-content-section-container.top-container {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  .lander-content-wrapper-flex {
    width: 100% !important;
    max-width: none !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: visible !important;
  }

  /* Keep copy inset; let globe/coral/cash go edge-to-edge */
  .lander-container-tagline,
  .lander-cta-band {
    padding-left: 5vw !important;
    padding-right: 5vw !important;
    box-sizing: border-box !important;
  }

  .lander-globe-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /*
   * Banking circle-globe map: keep desktop relative scale on mobile.
   * Webflow used width/height 100% + background-size:auto 80%, which collapsed
   * the world map into a thin center strip inside .banking-*-globe.
   */
  .banking-prospera-globe .lander-globe,
  .banking-globe .lander-globe,
  .banking-pa-globe .lander-globe,
  .banking-epspe-globe .lander-globe {
    width: 469% !important;
    height: 163% !important;
    margin-top: -33.3% !important;
    margin-bottom: auto !important;
    margin-left: auto !important;
    margin-right: -43.5% !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: 0 !important;
    background-position: 50% !important;
    background-size: contain !important;
    display: block !important;
    position: absolute !important;
    overflow: visible !important;
  }

  html[data-theme="dark"] .banking-prospera-globe .lander-globe::before,
  html[data-theme="dark"] .banking-globe .lander-globe::before,
  html[data-theme="dark"] .banking-pa-globe .lander-globe::before,
  html[data-theme="dark"] .banking-epspe-globe .lander-globe::before {
    background-position: 50% !important;
    background-size: contain !important;
  }

  .banking-prospera-globe .bank-globle-routes,
  .banking-globe .bank-globle-routes,
  .banking-pa-globe .bank-globle-routes,
  .banking-epspe-globe .bank-globle-routes {
    height: 60% !important;
    margin-top: 7.2% !important;
    margin-left: 69% !important;
    background-size: contain !important;
  }
}