/* v52-visible-tap-card-bg
   Single purpose: keep the tapping-card artwork visible as the hero background.
   The image lives at /assets/utap-hero-card-tap-bg.png and is painted by CSS,
   while the existing <img> remains only as a silent preload fallback. */

html body .main-hero-wrap .hero-stage {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 88% 10%, rgba(20, 199, 191, .24), transparent 34vw),
    radial-gradient(circle at 4% 0%, rgba(101, 73, 236, .13), transparent 30vw),
    linear-gradient(90deg, #ffffff 0%, #ffffff 38%, rgba(232, 250, 250, .96) 100%) !important;
}

html body .main-hero-wrap .hero-stage::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.998) 0%, rgba(255,255,255,.99) 25%, rgba(255,255,255,.82) 39%, rgba(255,255,255,.34) 53%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 62%, rgba(255,255,255,.96) 100%) !important;
}

html body .main-hero-wrap .hero-stage::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 2 !important;
  height: 28% !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.96)) !important;
}

html body .main-hero-wrap .hero-visual-card {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  background-image: url('/assets/utap-hero-card-tap-bg.png') !important;
  background-repeat: no-repeat !important;
  background-size: auto min(100%, 900px) !important;
  background-position: right center !important;
  background-color: transparent !important;
}

html body .main-hero-wrap .hero-visual-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background-image: url('/assets/utap-hero-card-tap-bg.png') !important;
  background-repeat: no-repeat !important;
  background-size: auto min(100%, 900px) !important;
  background-position: right center !important;
  opacity: 1 !important;
}

html body .main-hero-wrap .hero-visual-card::after {
  content: none !important;
  display: none !important;
}

html body .main-hero-wrap .hero-visual-card__img {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  pointer-events: none !important;
}

html body .main-hero-wrap .hero-copy {
  position: relative !important;
  z-index: 4 !important;
}

html body .main-hero-wrap .hero-capability-strip,
html body .main-hero-wrap .hero-apps-section,
html body .main-hero-wrap .landing-steps-strip {
  position: relative !important;
  z-index: 5 !important;
}

@media (max-width: 1180px) {
  html body .main-hero-wrap .hero-stage {
    min-height: clamp(780px, 112vw, 1040px) !important;
  }

  html body .main-hero-wrap .hero-visual-card,
  html body .main-hero-wrap .hero-visual-card::before {
    background-size: auto clamp(520px, 78vw, 760px) !important;
    background-position: right bottom !important;
  }

  html body .main-hero-wrap .hero-stage::before {
    background:
      linear-gradient(180deg, rgba(255,255,255,.995) 0%, rgba(255,255,255,.965) 42%, rgba(255,255,255,.56) 63%, rgba(255,255,255,.20) 82%, rgba(255,255,255,.94) 100%),
      linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.82) 48%, rgba(255,255,255,0) 100%) !important;
  }
}

@media (max-width: 720px) {
  html body .main-hero-wrap .hero-stage {
    min-height: clamp(860px, 178vw, 1120px) !important;
  }

  html body .main-hero-wrap .hero-visual-card,
  html body .main-hero-wrap .hero-visual-card::before {
    background-size: auto clamp(430px, 115vw, 590px) !important;
    background-position: right bottom !important;
  }
}



/* v53-no-gap-elegant-hero-icons
   Final homepage surface lock:
   - no top gap between transparent header and hero
   - hidden legacy eyebrow
   - two-line hero title
   - stronger visible teal/purple background
   - iconized platform chips and capability strip
   This file loads after the other landing CSS, so it owns only the public hero shell. */
:root {
  --utap-elegant-sans: "Inter Tight", "Manrope", "Avenir Next", "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --utap-elegant-display: "Inter Tight", "Manrope", "Avenir Next", "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --utap-hero-ink-v53: #0b1026;
  --utap-hero-muted-v53: #46546e;
  --utap-hero-purple-v53: #6246ea;
  --utap-hero-teal-v53: #12b8b5;
  --utap-hero-blue-v53: #0786c6;
}

html body .main-hero-wrap {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: clip !important;
  font-family: var(--utap-elegant-sans) !important;
  background:
    radial-gradient(circle at 88% 9%, rgba(18, 184, 181, .30), transparent 29vw),
    radial-gradient(circle at 7% 10%, rgba(98, 70, 234, .15), transparent 27vw),
    linear-gradient(90deg, #ffffff 0%, #fbfbff 38%, #d9f8f8 100%) !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing {
  position: relative !important;
  z-index: 50 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: clamp(76px, 5.9vw, 102px) !important;
  margin: 0 !important;
  padding: clamp(10px, 1vw, 18px) clamp(18px, 2vw, 40px) !important;
  display: grid !important;
  grid-template-columns: auto auto minmax(300px, 1fr) auto auto !important;
  grid-template-areas: "menu brand nav accounts cta" !important;
  align-items: center !important;
  column-gap: clamp(14px, 1.5vw, 28px) !important;
  row-gap: 10px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, .055) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.76) 0%, rgba(255,255,255,.62) 44%, rgba(229,249,249,.54) 100%) !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .07) !important;
  backdrop-filter: blur(16px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.14) !important;
  box-sizing: border-box !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-shell {
  grid-area: menu !important;
  justify-self: start !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .brand-mark {
  grid-area: brand !important;
  justify-self: start !important;
  align-self: center !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .brand-mark__img--landing {
  height: clamp(34px, 2.8vw, 46px) !important;
  max-width: min(150px, 18vw) !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .site-direct-menu {
  grid-area: nav !important;
  justify-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(22px, 2vw, 42px) !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .site-direct-menu a {
  color: #11182d !important;
  -webkit-text-fill-color: #11182d !important;
  font-family: var(--utap-elegant-sans) !important;
  font-size: clamp(14px, .86vw, 16px) !important;
  font-weight: 780 !important;
  letter-spacing: -.015em !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .site-account-actions {
  grid-area: accounts !important;
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .site-account-link {
  min-height: clamp(38px, 2.6vw, 46px) !important;
  padding: 0 clamp(12px, 1vw, 18px) !important;
  border-radius: 999px !important;
  background: rgba(248, 250, 252, .70) !important;
  border: 1px solid rgba(15, 23, 42, .035) !important;
  color: #182033 !important;
  -webkit-text-fill-color: #182033 !important;
  box-shadow: none !important;
  font-family: var(--utap-elegant-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .site-account-link__icon svg {
  fill: currentColor !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .header-actions.site-actions {
  grid-area: cta !important;
  justify-self: end !important;
  width: auto !important;
  max-width: max-content !important;
  margin: 0 !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .btn--header-cta {
  min-width: clamp(150px, 9.2vw, 176px) !important;
  max-width: 184px !important;
  min-height: clamp(42px, 2.9vw, 52px) !important;
  padding: 7px clamp(16px, 1vw, 22px) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #6044e8 0%, #286ad5 50%, #0895bd 100%) !important;
  box-shadow: 0 14px 28px rgba(85, 75, 216, .23), 0 8px 18px rgba(8, 149, 189, .16) !important;
}

html body .main-hero-wrap .browser-shell,
html body .main-hero-wrap .hero-page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body .main-hero-wrap .hero-page {
  min-height: 0 !important;
}

html body .main-hero-wrap .hero-page::before,
html body .main-hero-wrap .hero-page::after {
  content: none !important;
  display: none !important;
}

html body .main-hero-wrap .hero-stage {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-columns: minmax(430px, .43fr) minmax(0, .57fr) !important;
  grid-template-areas:
    "copy visual"
    "strip strip"
    "apps apps"
    "steps steps" !important;
  align-items: center !important;
  width: 100vw !important;
  max-width: none !important;
  min-height: clamp(560px, 43vw, 735px) !important;
  margin: 0 calc(50% - 50vw) 0 !important;
  padding: clamp(48px, 4.8vw, 82px) clamp(42px, 5vw, 96px) 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 87% 17%, rgba(16, 188, 184, .32), transparent 25vw),
    radial-gradient(circle at 6% 4%, rgba(98, 70, 234, .18), transparent 26vw),
    linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.96) 32%, rgba(255,255,255,.74) 45%, rgba(222,248,248,.72) 100%) !important;
  box-shadow: none !important;
}

html body .main-hero-wrap .hero-stage::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 0 auto auto !important;
  z-index: 0 !important;
  width: min(74vw, 1380px) !important;
  height: min(100%, 780px) !important;
  pointer-events: none !important;
  background-image: url('/assets/utap-hero-card-tap-bg.png') !important;
  background-repeat: no-repeat !important;
  background-size: auto 100% !important;
  background-position: right top !important;
  opacity: 1 !important;
}

html body .main-hero-wrap .hero-stage::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.90) 30%, rgba(255,255,255,.50) 43%, rgba(255,255,255,.08) 58%, rgba(255,255,255,0) 73%),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 60%, rgba(255,255,255,.88) 100%) !important;
}

html body .main-hero-wrap .hero-copy {
  grid-area: copy !important;
  position: relative !important;
  z-index: 5 !important;
  align-self: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: min(100%, 780px) !important;
  max-width: min(780px, 45vw) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0 clamp(24px, 2.4vw, 42px) !important;
  text-align: left !important;
}

html body .main-hero-wrap .hero-eyebrow {
  display: none !important;
}

html body .main-hero-wrap #hero-title,
html body .main-hero-wrap .hero-copy h1 {
  display: block !important;
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 !important;
  color: var(--utap-hero-ink-v53) !important;
  -webkit-text-fill-color: var(--utap-hero-ink-v53) !important;
  font-family: var(--utap-elegant-display) !important;
  font-size: clamp(58px, 5.05vw, 96px) !important;
  font-weight: 890 !important;
  line-height: .95 !important;
  letter-spacing: -.074em !important;
  text-align: left !important;
  text-wrap: balance !important;
}

html body .main-hero-wrap #hero-title .hero-title-line {
  display: block !important;
  white-space: nowrap !important;
}

html body .main-hero-wrap .hero-title-accent {
  display: inline !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(90deg, var(--utap-hero-purple-v53) 0%, #376ae7 48%, var(--utap-hero-teal-v53) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

html body .main-hero-wrap #hero-description,
html body .main-hero-wrap .hero-copy p {
  width: min(100%, 650px) !important;
  max-width: 650px !important;
  margin: clamp(18px, 1.55vw, 26px) 0 0 !important;
  color: var(--utap-hero-muted-v53) !important;
  -webkit-text-fill-color: var(--utap-hero-muted-v53) !important;
  font-family: var(--utap-elegant-sans) !important;
  font-size: clamp(16px, 1.05vw, 20px) !important;
  font-weight: 520 !important;
  line-height: 1.58 !important;
  letter-spacing: -.012em !important;
  text-align: left !important;
}

html body .main-hero-wrap .hero-platform-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin: clamp(20px, 1.7vw, 28px) 0 0 !important;
  padding: 0 !important;
}

html body .main-hero-wrap .hero-platform-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 40px !important;
  padding: 7px 13px 7px 9px !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 14px 36px rgba(44, 54, 105, .105), inset 0 1px 0 rgba(255,255,255,.88) !important;
  color: #16213d !important;
  -webkit-text-fill-color: #16213d !important;
  font-family: var(--utap-elegant-sans) !important;
  font-size: clamp(12px, .76vw, 14px) !important;
  font-weight: 790 !important;
  letter-spacing: -.01em !important;
  white-space: nowrap !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

html body .main-hero-wrap .hero-chip-icon,
html body .main-hero-wrap .hero-capability-icon {
  flex: 0 0 auto !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(98,70,234,.14), rgba(18,184,181,.17)) !important;
  color: var(--utap-hero-purple-v53) !important;
}

html body .main-hero-wrap .hero-chip-icon {
  width: 28px !important;
  height: 28px !important;
}

html body .main-hero-wrap .hero-chip-icon svg,
html body .main-hero-wrap .hero-capability-icon svg {
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body .main-hero-wrap .hero-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  width: 100% !important;
  margin: clamp(24px, 2vw, 34px) 0 0 !important;
  padding: 0 !important;
}

html body .main-hero-wrap .hero-visual-card {
  grid-area: visual !important;
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: clamp(420px, 36vw, 650px) !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body .main-hero-wrap .hero-visual-card__img {
  display: none !important;
}

html body .main-hero-wrap .feature-panel {
  display: none !important;
}

html body .main-hero-wrap .hero-capability-strip {
  grid-area: strip !important;
  position: relative !important;
  z-index: 6 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  align-items: stretch !important;
  width: min(calc(100vw - clamp(36px, 4.6vw, 90px)), 1680px) !important;
  max-width: none !important;
  min-height: clamp(62px, 4.1vw, 76px) !important;
  margin: clamp(8px, 1vw, 16px) auto 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(20, 33, 72, .09) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.74) !important;
  box-shadow: 0 18px 46px rgba(16, 24, 48, .11), inset 0 1px 0 rgba(255,255,255,.92) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}

html body .main-hero-wrap .hero-capability-strip > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 10px clamp(9px, 1vw, 18px) !important;
  border-left: 1px solid rgba(20, 33, 72, .08) !important;
  color: #202944 !important;
  -webkit-text-fill-color: #202944 !important;
  font-family: var(--utap-elegant-sans) !important;
  font-size: clamp(12px, .76vw, 14px) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html body .main-hero-wrap .hero-capability-strip > span:first-child {
  border-left: 0 !important;
}

html body .main-hero-wrap .hero-capability-icon {
  width: 30px !important;
  height: 30px !important;
  color: var(--utap-hero-blue-v53) !important;
}

html body .main-hero-wrap .hero-capability-strip strong {
  font-weight: 880 !important;
  color: #2c365b !important;
  -webkit-text-fill-color: #2c365b !important;
}

html body .main-hero-wrap .hero-apps-section,
html body .main-hero-wrap #hero-apps-section,
html body .main-hero-wrap .landing-steps-strip {
  position: relative !important;
  z-index: 6 !important;
  width: min(calc(100vw - clamp(36px, 4.6vw, 90px)), 1680px) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 1180px) {
  html body .main-hero-wrap .site-bar.site-bar--landing {
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "menu brand accounts cta"
      "nav nav nav nav" !important;
    min-height: 0 !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-direct-menu {
    width: 100% !important;
    justify-content: center !important;
  }

  html body .main-hero-wrap .hero-stage {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "copy"
      "visual"
      "strip"
      "apps"
      "steps" !important;
    min-height: 0 !important;
    padding: clamp(38px, 6vw, 62px) clamp(22px, 5vw, 48px) 0 !important;
  }

  html body .main-hero-wrap .hero-stage::before {
    inset: auto 0 0 auto !important;
    width: 100% !important;
    height: clamp(300px, 55vw, 520px) !important;
    background-size: auto 100% !important;
    background-position: right bottom !important;
  }

  html body .main-hero-wrap .hero-stage::after {
    background:
      linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.94) 42%, rgba(255,255,255,.44) 62%, rgba(255,255,255,.91) 100%) !important;
  }

  html body .main-hero-wrap .hero-copy {
    max-width: min(760px, 100%) !important;
  }

  html body .main-hero-wrap .hero-visual-card {
    min-height: clamp(300px, 55vw, 520px) !important;
  }

  html body .main-hero-wrap .hero-capability-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body .main-hero-wrap .hero-capability-strip > span:nth-child(odd) {
    border-left: 0 !important;
  }

  html body .main-hero-wrap .hero-capability-strip > span:nth-child(n+3) {
    border-top: 1px solid rgba(20,33,72,.08) !important;
  }

  html body .main-hero-wrap .hero-capability-strip > span:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  html body .main-hero-wrap .site-bar.site-bar--landing {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "menu brand cta"
      "accounts accounts accounts"
      "nav nav nav" !important;
    padding: 10px 14px !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .brand-mark {
    justify-self: start !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-account-actions,
  html body .main-hero-wrap .site-bar.site-bar--landing .site-direct-menu {
    justify-self: stretch !important;
    justify-content: center !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-account-actions::-webkit-scrollbar,
  html body .main-hero-wrap .site-bar.site-bar--landing .site-direct-menu::-webkit-scrollbar {
    display: none !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-direct-menu {
    gap: 18px !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-account-link {
    min-height: 36px !important;
    padding-inline: 12px !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .btn--header-cta {
    min-width: 124px !important;
    max-width: 136px !important;
    min-height: 40px !important;
  }

  html body .main-hero-wrap .hero-stage {
    padding: 32px 18px 0 !important;
  }

  html body .main-hero-wrap #hero-title,
  html body .main-hero-wrap .hero-copy h1 {
    max-width: 100% !important;
    font-size: clamp(38px, 11.8vw, 58px) !important;
    letter-spacing: -.068em !important;
  }

  html body .main-hero-wrap #hero-title .hero-title-line {
    white-space: normal !important;
  }

  html body .main-hero-wrap #hero-description,
  html body .main-hero-wrap .hero-copy p {
    font-size: 15.5px !important;
  }

  html body .main-hero-wrap .hero-platform-chips {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  html body .main-hero-wrap .hero-platform-chip {
    justify-content: flex-start !important;
  }

  html body .main-hero-wrap .hero-stage::before {
    height: clamp(250px, 76vw, 390px) !important;
    background-size: auto 100% !important;
    background-position: right bottom !important;
  }

  html body .main-hero-wrap .hero-visual-card {
    min-height: clamp(250px, 76vw, 390px) !important;
  }

  html body .main-hero-wrap .hero-capability-strip {
    width: calc(100vw - 24px) !important;
    grid-template-columns: 1fr !important;
  }

  html body .main-hero-wrap .hero-capability-strip > span,
  html body .main-hero-wrap .hero-capability-strip > span:nth-child(odd),
  html body .main-hero-wrap .hero-capability-strip > span:first-child {
    border-left: 0 !important;
  }

  html body .main-hero-wrap .hero-capability-strip > span:nth-child(n+2) {
    border-top: 1px solid rgba(20,33,72,.08) !important;
  }

  html body .main-hero-wrap .hero-apps-section,
  html body .main-hero-wrap #hero-apps-section,
  html body .main-hero-wrap .landing-steps-strip {
    width: calc(100vw - 24px) !important;
  }
}

/* v56-purple-no-extra-chip-icons
   Final public hero correction:
   - remove the large circular/tapping-card background object behind the title
   - keep the headline as two explicit rows
   - align the description, chips, and CTAs to the left edge of the headline
   - center the header nav against the viewport
   - keep the header glass color continuous from left to right */
html body .main-hero-wrap {
  background: linear-gradient(90deg, #ffffff 0%, #fbfbff 34%, #d8f7f6 100%) !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing {
  position: relative !important;
  display: block !important;
  min-height: clamp(78px, 5.9vw, 104px) !important;
  padding: 0 !important;
  overflow: visible !important;
  background: linear-gradient(90deg, rgba(255,255,255,.76) 0%, rgba(252,252,255,.70) 34%, rgba(222,249,249,.68) 100%) !important;
  border-bottom: 1px solid rgba(15,23,42,.055) !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .065) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-shell,
html body .main-hero-wrap .site-bar.site-bar--landing .brand-mark,
html body .main-hero-wrap .site-bar.site-bar--landing #site-direct-menu,
html body .main-hero-wrap .site-bar.site-bar--landing .site-account-actions,
html body .main-hero-wrap .site-bar.site-bar--landing .header-actions.site-actions {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-shell {
  left: clamp(22px, 2vw, 42px) !important;
  z-index: 5 !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .brand-mark {
  left: clamp(88px, 6vw, 126px) !important;
  z-index: 5 !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing #site-direct-menu {
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: min(620px, 42vw) !important;
  gap: clamp(30px, 2.35vw, 50px) !important;
  z-index: 4 !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .site-account-actions {
  right: clamp(232px, 13.7vw, 284px) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 5 !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .header-actions.site-actions {
  right: clamp(32px, 2.25vw, 48px) !important;
  z-index: 5 !important;
}

html body .main-hero-wrap .hero-stage {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "copy"
    "strip"
    "apps"
    "steps" !important;
  min-height: clamp(560px, 38vw, 700px) !important;
  padding: clamp(86px, 7.2vw, 132px) clamp(48px, 5vw, 116px) 0 !important;
  overflow: hidden !important;
  background: linear-gradient(90deg, #ffffff 0%, #fbfbff 34%, #d5f6f5 100%) !important;
}

html body .main-hero-wrap .hero-stage::before,
html body .main-hero-wrap .hero-stage::after,
html body .main-hero-wrap .hero-visual-card,
html body .main-hero-wrap .hero-visual-card::before,
html body .main-hero-wrap .hero-visual-card::after,
html body .main-hero-wrap .hero-visual-card__img {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html body .main-hero-wrap .hero-copy {
  grid-area: copy !important;
  position: relative !important;
  z-index: 5 !important;
  align-self: start !important;
  justify-self: start !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: min(1500px, 100%) !important;
  max-width: min(1500px, calc(100vw - clamp(96px, 10vw, 232px))) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

html body .main-hero-wrap #hero-title,
html body .main-hero-wrap .hero-copy h1 {
  display: block !important;
  width: max-content !important;
  max-width: min(1500px, calc(100vw - clamp(96px, 10vw, 232px))) !important;
  margin: 0 !important;
  color: #0b1026 !important;
  -webkit-text-fill-color: #0b1026 !important;
  font-family: var(--utap-elegant-display) !important;
  font-size: clamp(58px, 5vw, 94px) !important;
  font-weight: 900 !important;
  line-height: .95 !important;
  letter-spacing: -.078em !important;
  text-align: left !important;
  text-wrap: nowrap !important;
  white-space: normal !important;
  overflow: visible !important;
}

html body .main-hero-wrap #hero-title .hero-title-line {
  display: block !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

html body .main-hero-wrap #hero-title .hero-title-accent {
  display: inline !important;
  white-space: nowrap !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(90deg, #6246ea 0%, #376ae7 48%, #12b8b5 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

html body .main-hero-wrap #hero-description,
html body .main-hero-wrap .hero-copy p {
  display: block !important;
  width: min(720px, 100%) !important;
  max-width: 720px !important;
  margin: clamp(20px, 1.55vw, 28px) 0 0 0 !important;
  padding: 0 !important;
  color: #46546e !important;
  -webkit-text-fill-color: #46546e !important;
  font-family: var(--utap-elegant-sans) !important;
  font-size: clamp(16px, 1.02vw, 19px) !important;
  font-weight: 560 !important;
  line-height: 1.58 !important;
  letter-spacing: -.012em !important;
  text-align: left !important;
  align-self: flex-start !important;
}

html body .main-hero-wrap .hero-platform-chips,
html body .main-hero-wrap .hero-actions {
  align-self: flex-start !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
  text-align: left !important;
}

html body .main-hero-wrap .hero-capability-strip {
  grid-area: strip !important;
  width: min(calc(100vw - clamp(36px, 4.6vw, 90px)), 1680px) !important;
  margin: clamp(36px, 3vw, 58px) auto 0 !important;
}

@media (max-width: 1320px) {
  html body .main-hero-wrap .site-bar.site-bar--landing #site-direct-menu {
    max-width: min(600px, 40vw) !important;
    gap: clamp(22px, 1.8vw, 36px) !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-account-actions {
    right: clamp(220px, 14vw, 260px) !important;
  }

  html body .main-hero-wrap #hero-title,
  html body .main-hero-wrap .hero-copy h1 {
    font-size: clamp(54px, 4.55vw, 78px) !important;
  }
}

@media (max-width: 1180px) {
  html body .main-hero-wrap .site-bar.site-bar--landing {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "menu brand accounts cta"
      "nav nav nav nav" !important;
    min-height: 0 !important;
    padding: 10px 18px !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-shell,
  html body .main-hero-wrap .site-bar.site-bar--landing .brand-mark,
  html body .main-hero-wrap .site-bar.site-bar--landing #site-direct-menu,
  html body .main-hero-wrap .site-bar.site-bar--landing .site-account-actions,
  html body .main-hero-wrap .site-bar.site-bar--landing .header-actions.site-actions {
    position: static !important;
    transform: none !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-shell { grid-area: menu !important; }
  html body .main-hero-wrap .site-bar.site-bar--landing .brand-mark { grid-area: brand !important; }
  html body .main-hero-wrap .site-bar.site-bar--landing #site-direct-menu {
    grid-area: nav !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body .main-hero-wrap .site-bar.site-bar--landing .site-account-actions { grid-area: accounts !important; justify-self: end !important; }
  html body .main-hero-wrap .site-bar.site-bar--landing .header-actions.site-actions { grid-area: cta !important; justify-self: end !important; }

  html body .main-hero-wrap .hero-stage {
    padding: clamp(58px, 6vw, 86px) clamp(28px, 5vw, 56px) 0 !important;
  }

  html body .main-hero-wrap .hero-copy,
  html body .main-hero-wrap #hero-title,
  html body .main-hero-wrap .hero-copy h1 {
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  html body .main-hero-wrap .hero-stage {
    padding: 42px 18px 0 !important;
  }

  html body .main-hero-wrap #hero-title,
  html body .main-hero-wrap .hero-copy h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(38px, 10.8vw, 56px) !important;
    text-wrap: balance !important;
  }

  html body .main-hero-wrap #hero-title .hero-title-line {
    white-space: normal !important;
  }
}


/* v56-purple-no-extra-chip-icons
   Narrow correction after v55:
   - restore a soft purple wash on the left side without any circular object
   - remove the legacy colored square/dot pseudo-icons from the four hero chips
   - use a renamed pill/icon pair so old .hero-platform-chip::before rules cannot attach */
html body .main-hero-wrap {
  background:
    linear-gradient(105deg, rgba(243, 238, 255, .95) 0%, rgba(255,255,255,.98) 24%, rgba(251,252,255,.96) 42%, rgba(214,247,246,.98) 100%) !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing {
  background:
    linear-gradient(105deg, rgba(250,247,255,.82) 0%, rgba(255,255,255,.74) 30%, rgba(224,249,249,.70) 100%) !important;
}

html body .main-hero-wrap .hero-stage {
  background:
    linear-gradient(110deg, rgba(239,233,255,.86) 0%, rgba(255,255,255,.98) 19%, rgba(252,253,255,.95) 41%, rgba(211,247,246,.98) 100%) !important;
}

html body .main-hero-wrap .hero-stage::before,
html body .main-hero-wrap .hero-stage::after,
html body .main-hero-wrap .hero-visual-card,
html body .main-hero-wrap .hero-visual-card::before,
html body .main-hero-wrap .hero-visual-card::after,
html body .main-hero-wrap .hero-visual-card__img {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html body .main-hero-wrap .hero-platform-chip::before,
html body .main-hero-wrap .hero-platform-chip::after,
html body .main-hero-wrap .hero-tool-pill::before,
html body .main-hero-wrap .hero-tool-pill::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html body .main-hero-wrap .hero-tool-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px !important;
  margin: clamp(20px, 1.7vw, 28px) 0 0 !important;
  padding: 0 !important;
  align-self: flex-start !important;
  text-align: left !important;
}

html body .main-hero-wrap .hero-tool-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  min-height: 40px !important;
  padding: 7px 14px 7px 10px !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.74) !important;
  box-shadow: 0 14px 36px rgba(44, 54, 105, .105), inset 0 1px 0 rgba(255,255,255,.9) !important;
  color: #16213d !important;
  -webkit-text-fill-color: #16213d !important;
  font-family: var(--utap-elegant-sans) !important;
  font-size: clamp(12px, .76vw, 14px) !important;
  font-weight: 790 !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  white-space: nowrap !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}

html body .main-hero-wrap .hero-tool-icon {
  flex: 0 0 auto !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(98,70,234,.13), rgba(18,184,181,.18)) !important;
  color: #6246ea !important;
  -webkit-text-fill-color: #6246ea !important;
}

html body .main-hero-wrap .hero-tool-icon svg {
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body .main-hero-wrap .hero-tool-pill--apps .hero-tool-icon {
  color: #6246ea !important;
  -webkit-text-fill-color: #6246ea !important;
}

html body .main-hero-wrap .hero-tool-pill--tools .hero-tool-icon {
  color: #6246ea !important;
  -webkit-text-fill-color: #6246ea !important;
}

html body .main-hero-wrap .hero-tool-pill--analytics .hero-tool-icon {
  color: #6246ea !important;
  -webkit-text-fill-color: #6246ea !important;
}

html body .main-hero-wrap #hero-title,
html body .main-hero-wrap .hero-copy h1 {
  color: #0b1026 !important;
  -webkit-text-fill-color: #0b1026 !important;
}

html body .main-hero-wrap #hero-title .hero-title-accent {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(90deg, #6246ea 0%, #376ae7 48%, #12b8b5 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

@media (max-width: 640px) {
  html body .main-hero-wrap .hero-tool-pills {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  html body .main-hero-wrap .hero-tool-pill {
    justify-content: flex-start !important;
    width: 100% !important;
  }
}

/* v58-big-plain-strip-icons
   Exact visual correction:
   - bottom capability bar uses plain larger line icons, no circular icon backs, no separators
   - header height and hero top spacing tightened
   - primary CTA arrow becomes a clean SVG glyph, not a distorted text arrow */
html body .main-hero-wrap .site-bar.site-bar--landing {
  height: clamp(70px, 4.25vw, 82px) !important;
  min-height: clamp(70px, 4.25vw, 82px) !important;
  max-height: clamp(70px, 4.25vw, 82px) !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-toggle {
  width: clamp(40px, 2.7vw, 46px) !important;
  height: clamp(40px, 2.7vw, 46px) !important;
  min-width: clamp(40px, 2.7vw, 46px) !important;
  min-height: clamp(40px, 2.7vw, 46px) !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .brand-mark__img--landing {
  height: clamp(32px, 2.3vw, 40px) !important;
  max-height: 40px !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .site-account-link {
  min-height: clamp(36px, 2.25vw, 42px) !important;
  padding: 0 clamp(12px, .86vw, 16px) !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .btn--header-cta {
  min-height: clamp(38px, 2.4vw, 44px) !important;
  min-width: clamp(142px, 8.4vw, 164px) !important;
  max-width: 168px !important;
  padding: 6px 16px !important;
}

html body .main-hero-wrap .hero-stage {
  padding-top: clamp(54px, 4.55vw, 82px) !important;
  min-height: clamp(520px, 36vw, 660px) !important;
}

html body .main-hero-wrap .hero-capability-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  gap: clamp(26px, 4vw, 78px) !important;
  width: min(calc(100vw - clamp(32px, 4.4vw, 84px)), 1500px) !important;
  min-height: clamp(58px, 3.7vw, 66px) !important;
  margin: clamp(34px, 2.75vw, 54px) auto 0 !important;
  padding: 0 clamp(30px, 4.4vw, 78px) !important;
  border: 1px solid rgba(20, 33, 72, .08) !important;
  border-radius: 16px !important;
  overflow: visible !important;
  background: rgba(255,255,255,.76) !important;
  box-shadow: 0 16px 38px rgba(16, 24, 48, .09), inset 0 1px 0 rgba(255,255,255,.92) !important;
  backdrop-filter: blur(18px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
}

html body .main-hero-wrap .hero-capability-strip > span,
html body .main-hero-wrap .hero-capability-strip > span:first-child,
html body .main-hero-wrap .hero-capability-strip > span:nth-child(odd),
html body .main-hero-wrap .hero-capability-strip > span:nth-child(n+2),
html body .main-hero-wrap .hero-capability-strip > span:nth-child(n+3),
html body .main-hero-wrap .hero-capability-strip > span:last-child:nth-child(odd) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  gap: 13px !important;
  min-width: max-content !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-left: 0 !important;
  border-top: 0 !important;
  color: #273153 !important;
  -webkit-text-fill-color: #273153 !important;
  font-family: var(--utap-elegant-sans) !important;
  font-size: clamp(14px, .92vw, 17px) !important;
  font-weight: 560 !important;
  line-height: 1.1 !important;
  letter-spacing: -.012em !important;
  white-space: nowrap !important;
  text-align: center !important;
}

html body .main-hero-wrap .hero-capability-icon,
html body .main-hero-wrap .hero-capability-strip .hero-capability-icon {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: clamp(25px, 1.65vw, 31px) !important;
  height: clamp(25px, 1.65vw, 31px) !important;
  min-width: clamp(25px, 1.65vw, 31px) !important;
  min-height: clamp(25px, 1.65vw, 31px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #29345f !important;
  -webkit-text-fill-color: #29345f !important;
}

html body .main-hero-wrap .hero-capability-icon::before,
html body .main-hero-wrap .hero-capability-icon::after {
  content: none !important;
  display: none !important;
}

html body .main-hero-wrap .hero-capability-icon svg,
html body .main-hero-wrap .hero-capability-strip .hero-capability-icon svg {
  display: block !important;
  width: clamp(25px, 1.65vw, 31px) !important;
  height: clamp(25px, 1.65vw, 31px) !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.05 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  overflow: visible !important;
}

html body .main-hero-wrap .hero-capability-strip strong {
  font: inherit !important;
  font-weight: 600 !important;
  color: #2c365b !important;
  -webkit-text-fill-color: #2c365b !important;
}

html body .main-hero-wrap #hero-browse-templates.btn--primary,
html body .main-hero-wrap .landing-final-cta .btn--primary,
html body .landing-final-cta .btn--primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  line-height: 1 !important;
}

html body .main-hero-wrap #hero-browse-templates.btn--primary::after,
html body .main-hero-wrap .landing-final-cta .btn--primary::after,
html body .landing-final-cta .btn--primary::after {
  content: "" !important;
  flex: 0 0 clamp(27px, 1.75vw, 32px) !important;
  display: inline-block !important;
  width: clamp(27px, 1.75vw, 32px) !important;
  height: clamp(27px, 1.75vw, 32px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background-color: rgba(255,255,255,.18) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h12.5' stroke='white' stroke-width='2.35' stroke-linecap='round'/%3E%3Cpath d='m13 6 6 6-6 6' stroke='white' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 64% 64% !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-shadow: none !important;
  transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 8px 18px rgba(8,149,189,.16) !important;
}

html body .main-hero-wrap .hero-secondary-cta::after {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  margin-left: 8px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

@media (max-width: 1180px) {
  html body .main-hero-wrap .site-bar.site-bar--landing {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 8px 16px !important;
  }

  html body .main-hero-wrap .hero-stage {
    padding-top: clamp(44px, 5vw, 64px) !important;
  }

  html body .main-hero-wrap .hero-capability-strip {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 18px 34px !important;
    padding: 16px 22px !important;
    min-height: 0 !important;
  }
}

@media (max-width: 760px) {
  html body .main-hero-wrap .hero-stage {
    padding-top: 28px !important;
  }

  html body .main-hero-wrap .hero-capability-strip {
    width: calc(100vw - 24px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 18px 20px !important;
    border-radius: 18px !important;
  }

  html body .main-hero-wrap .hero-capability-strip > span,
  html body .main-hero-wrap .hero-capability-strip > span:first-child,
  html body .main-hero-wrap .hero-capability-strip > span:nth-child(odd),
  html body .main-hero-wrap .hero-capability-strip > span:nth-child(n+2),
  html body .main-hero-wrap .hero-capability-strip > span:nth-child(n+3),
  html body .main-hero-wrap .hero-capability-strip > span:last-child:nth-child(odd) {
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
  }
}


/* v58-big-plain-strip-icons
   Final strip correction:
   - use large plain line icons like the reference bar
   - remove every separator line from direct items and nested labels
   - keep the clean white glass bar without circular icon backs */
html body .main-hero-wrap .hero-capability-strip,
html body .main-hero-wrap section.hero-capability-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(34px, 5vw, 90px) !important;
  width: min(calc(100vw - clamp(28px, 4vw, 84px)), 1480px) !important;
  min-height: clamp(54px, 3.45vw, 64px) !important;
  margin: clamp(34px, 2.7vw, 50px) auto 0 !important;
  padding: 0 clamp(40px, 5.3vw, 92px) !important;
  border: 1px solid rgba(20, 33, 72, .075) !important;
  border-radius: 15px !important;
  overflow: visible !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 14px 34px rgba(16, 24, 48, .09), inset 0 1px 0 rgba(255, 255, 255, .96) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

html body .main-hero-wrap .hero-capability-strip::before,
html body .main-hero-wrap .hero-capability-strip::after {
  content: none !important;
  display: none !important;
}

html body .main-hero-wrap .hero-capability-strip > span,
html body .main-hero-wrap .hero-capability-strip > .hero-capability-item,
html body .main-hero-wrap .hero-capability-strip > span:first-child,
html body .main-hero-wrap .hero-capability-strip > span:nth-child(odd),
html body .main-hero-wrap .hero-capability-strip > span:nth-child(n+2),
html body .main-hero-wrap .hero-capability-strip > span:nth-child(n+3),
html body .main-hero-wrap .hero-capability-strip > span:last-child:nth-child(odd) {
  position: relative !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(12px, 1vw, 16px) !important;
  min-width: max-content !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #3a446b !important;
  -webkit-text-fill-color: #3a446b !important;
  font-family: var(--utap-elegant-sans) !important;
  font-size: clamp(14px, .9vw, 17px) !important;
  font-weight: 560 !important;
  line-height: 1.08 !important;
  letter-spacing: -.012em !important;
  white-space: nowrap !important;
  text-align: center !important;
}

html body .main-hero-wrap .hero-capability-strip > span::before,
html body .main-hero-wrap .hero-capability-strip > span::after,
html body .main-hero-wrap .hero-capability-strip > .hero-capability-item::before,
html body .main-hero-wrap .hero-capability-strip > .hero-capability-item::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .main-hero-wrap .hero-capability-strip > span > span,
html body .main-hero-wrap .hero-capability-strip .hero-capability-label,
html body .main-hero-wrap .hero-capability-strip .hero-capability-label::before,
html body .main-hero-wrap .hero-capability-strip .hero-capability-label::after {
  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .main-hero-wrap .hero-capability-icon,
html body .main-hero-wrap .hero-capability-strip .hero-capability-icon {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: clamp(31px, 2.05vw, 39px) !important;
  height: clamp(31px, 2.05vw, 39px) !important;
  min-width: clamp(31px, 2.05vw, 39px) !important;
  min-height: clamp(31px, 2.05vw, 39px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #44507b !important;
  -webkit-text-fill-color: #44507b !important;
}

html body .main-hero-wrap .hero-capability-icon::before,
html body .main-hero-wrap .hero-capability-icon::after {
  content: none !important;
  display: none !important;
}

html body .main-hero-wrap .hero-capability-icon svg,
html body .main-hero-wrap .hero-capability-strip .hero-capability-icon svg {
  display: block !important;
  width: clamp(31px, 2.05vw, 39px) !important;
  height: clamp(31px, 2.05vw, 39px) !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  overflow: visible !important;
}

html body .main-hero-wrap .hero-capability-strip strong {
  font: inherit !important;
  font-weight: 600 !important;
  color: #2c365b !important;
  -webkit-text-fill-color: #2c365b !important;
}

@media (max-width: 1180px) {
  html body .main-hero-wrap .hero-capability-strip,
  html body .main-hero-wrap section.hero-capability-strip {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 18px 36px !important;
    padding: 16px 24px !important;
    min-height: 0 !important;
  }
}

@media (max-width: 760px) {
  html body .main-hero-wrap .hero-capability-strip,
  html body .main-hero-wrap section.hero-capability-strip {
    width: calc(100vw - 24px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    padding: 18px 20px !important;
    border-radius: 18px !important;
  }

  html body .main-hero-wrap .hero-capability-strip > span,
  html body .main-hero-wrap .hero-capability-strip > .hero-capability-item {
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
  }
}


/* v59-lighter-strip-icons: soften feature strip icon and label weight */




/* v61-header-drawer-responsive
   Single purpose:
   - keep desktop header centered
   - hide direct nav from the header on narrow windows because those links already live in the menu panel
   - stop User/Admin/direct links from spilling outside the header on small windows
   - make the opened Account Actions panel left-aligned and full-width inside the drawer */
html body .main-hero-wrap .site-bar.site-bar--landing {
  overflow: visible !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-shell {
  position: relative !important;
  overflow: visible !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-toggle {
  flex: 0 0 auto !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-panel,
html body #site-menu-panel.site-menu-panel {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  z-index: 1200 !important;
  width: min(440px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  min-width: min(320px, calc(100vw - 28px)) !important;
  max-height: calc(100vh - 120px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  border-radius: 22px !important;
  border: 1px solid rgba(15, 23, 42, .055) !important;
  background: rgba(255, 255, 255, .955) !important;
  box-shadow: 0 22px 58px rgba(15, 23, 42, .12) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
  align-items: stretch !important;
  align-content: start !important;
  justify-items: stretch !important;
  justify-content: stretch !important;
  text-align: left !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing.is-menu-open .site-menu-panel,
html body .main-hero-wrap .site-bar.site-bar--landing.is-menu-open #site-menu-panel.site-menu-panel {
  display: grid !important;
  gap: 12px !important;
}

html body #site-menu-panel .site-menu-panel__section,
html body #site-menu-panel .site-menu-panel__auth,
html body #site-menu-panel .site-menu,
html body #site-menu-panel .site-menu--main,
html body #site-menu-panel .site-menu--more,
html body #site-menu-panel .site-menu__dropdown,
html body #site-menu-panel .site-menu__dropdown-menu {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
  align-content: start !important;
  justify-items: stretch !important;
  justify-content: stretch !important;
  text-align: left !important;
}

html body #site-menu-panel .site-menu-panel__section {
  display: grid !important;
  gap: 8px !important;
  padding: 0 !important;
}

html body #site-menu-panel .site-menu-panel__title {
  width: 100% !important;
  margin: 0 0 2px !important;
  padding: 0 4px !important;
  text-align: left !important;
  color: #667085 !important;
  -webkit-text-fill-color: #667085 !important;
  font-size: 12px !important;
  font-weight: 820 !important;
  line-height: 1.15 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html body #site-menu-panel .site-menu-panel__auth {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

html body #site-menu-panel .site-menu,
html body #site-menu-panel .site-menu--main,
html body #site-menu-panel .site-menu--more {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 9px !important;
  padding: 0 !important;
}

html body #site-menu-panel .site-account-link,
html body #site-menu-panel .site-menu a,
html body #site-menu-panel .site-menu__trigger {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  border-radius: 17px !important;
  background: rgba(15, 23, 42, .045) !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #10172b !important;
  -webkit-text-fill-color: #10172b !important;
  text-align: left !important;
  white-space: normal !important;
  font-family: var(--utap-elegant-sans) !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  line-height: 1.15 !important;
  letter-spacing: -.012em !important;
}

html body #site-menu-panel .site-account-link__icon {
  flex: 0 0 auto !important;
}

html body #site-menu-panel .site-menu__trigger-label,
html body #site-menu-panel .site-account-link span:not(.site-account-link__icon) {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  text-align: left !important;
  overflow-wrap: anywhere !important;
}

html body #site-menu-panel .site-menu__trigger-arrow {
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

html body #site-menu-panel .site-menu__dropdown {
  position: static !important;
  display: grid !important;
}

html body #site-menu-panel .site-menu__dropdown-menu {
  position: static !important;
  inset: auto !important;
  display: none !important;
  margin-top: 8px !important;
  padding: 8px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

html body #site-menu-panel .site-menu__dropdown.is-open .site-menu__dropdown-menu,
html body #site-menu-panel .site-menu__dropdown:focus-within .site-menu__dropdown-menu {
  display: grid !important;
  gap: 7px !important;
}

/* Tablet and small desktop: direct nav moves into the drawer. */
@media (max-width: 1180px) {
  html body .main-hero-wrap .site-bar.site-bar--landing {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto !important;
    grid-template-areas: "menu brand spacer accounts cta" !important;
    align-items: center !important;
    gap: clamp(8px, 1.5vw, 18px) !important;
    min-height: clamp(64px, 6.2vw, 78px) !important;
    height: auto !important;
    padding: 8px clamp(14px, 2.2vw, 26px) !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing #site-direct-menu,
  html body .main-hero-wrap .site-bar.site-bar--landing .site-direct-menu {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-shell {
    grid-area: menu !important;
    justify-self: start !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .brand-mark {
    grid-area: brand !important;
    justify-self: start !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-account-actions {
    grid-area: accounts !important;
    justify-self: end !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    overflow: visible !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .header-actions.site-actions {
    grid-area: cta !important;
    justify-self: end !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    min-width: 0 !important;
  }
}

/* Phone / narrow browser: only menu, logo, and CTA stay in the header.
   User/Admin and all main links are inside the opened drawer. */
@media (max-width: 860px) {
  html body .main-hero-wrap .site-bar.site-bar--landing {
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    grid-template-areas: "menu brand spacer cta" !important;
    gap: 9px !important;
    min-height: 58px !important;
    padding: 7px 12px !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-account-actions {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-toggle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .brand-mark__img--landing {
    height: clamp(29px, 8vw, 38px) !important;
    max-width: min(118px, 29vw) !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .btn--header-cta {
    min-width: 126px !important;
    max-width: 142px !important;
    min-height: 40px !important;
    padding: 6px 14px !important;
    font-size: 10.5px !important;
  }
}

@media (max-width: 520px) {
  html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-panel,
  html body #site-menu-panel.site-menu-panel {
    position: fixed !important;
    top: calc(var(--landing-fixed-header-offset, 64px) + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100vh - var(--landing-fixed-header-offset, 64px) - 24px) !important;
    padding: 12px !important;
    border-radius: 20px !important;
  }

  html body #site-menu-panel .site-menu-panel__auth {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body #site-menu-panel .site-account-link,
  html body #site-menu-panel .site-menu a,
  html body #site-menu-panel .site-menu__trigger {
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: 13.5px !important;
  }
}

@media (max-width: 360px) {
  html body #site-menu-panel .site-menu-panel__auth {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .btn--header-cta {
    min-width: 116px !important;
    max-width: 126px !important;
    padding-left: 11px !important;
    padding-right: 11px !important;
  }
}




/* v62-header-menu-icon-safe
   Narrow fix only:
   - keep the hamburger/menu button vertically centered in the header on narrow windows
   - reset leftover top/left/transform coordinates from earlier absolute header layers
   - keep the account/menu drawer behavior from v61
   - SVG icon paths are repaired in view/landing.py */
@media (max-width: 1180px) {
  html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-shell,
  html body .main-hero-wrap .site-bar.site-bar--landing .brand-mark,
  html body .main-hero-wrap .site-bar.site-bar--landing .site-account-actions,
  html body .main-hero-wrap .site-bar.site-bar--landing .header-actions.site-actions {
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    align-self: center !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-shell {
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
    width: clamp(40px, 3vw, 46px) !important;
    min-width: clamp(40px, 3vw, 46px) !important;
    height: clamp(40px, 3vw, 46px) !important;
    min-height: clamp(40px, 3vw, 46px) !important;
    grid-area: menu !important;
    justify-self: start !important;
    align-self: center !important;
    overflow: visible !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-toggle {
    position: relative !important;
    grid-area: 1 / 1 !important;
    place-self: center !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
  }
}

@media (max-width: 860px) {
  html body .main-hero-wrap .site-bar.site-bar--landing {
    align-items: center !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-shell,
  html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .brand-mark,
  html body .main-hero-wrap .site-bar.site-bar--landing .header-actions.site-actions {
    align-self: center !important;
  }
}

@media (max-width: 520px) {
  html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-shell {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }
}




/* v63-elegant-light-strip-icons
   Strip-only correction:
   - keep the current layout
   - make the feature-strip icons lighter and more elegant
   - remove bold emphasis from labels, including nested <strong>
   - do not touch header, drawer, hero, chips, or CTA styling */
html body .main-hero-wrap .hero-capability-strip,
html body .main-hero-wrap section.hero-capability-strip {
  background: rgba(255, 255, 255, .88) !important;
  border-color: rgba(30, 42, 80, .055) !important;
  box-shadow: 0 12px 28px rgba(18, 31, 58, .065), inset 0 1px 0 rgba(255, 255, 255, .98) !important;
}

html body .main-hero-wrap .hero-capability-strip > span,
html body .main-hero-wrap .hero-capability-strip > .hero-capability-item,
html body .main-hero-wrap .hero-capability-strip > span:first-child,
html body .main-hero-wrap .hero-capability-strip > span:nth-child(odd),
html body .main-hero-wrap .hero-capability-strip > span:nth-child(n+2),
html body .main-hero-wrap .hero-capability-strip > span:nth-child(n+3),
html body .main-hero-wrap .hero-capability-strip > span:last-child:nth-child(odd) {
  color: #3f4a70 !important;
  -webkit-text-fill-color: #3f4a70 !important;
  font-family: var(--utap-elegant-sans) !important;
  font-size: clamp(14px, .86vw, 16px) !important;
  font-weight: 500 !important;
  line-height: 1.12 !important;
  letter-spacing: -.004em !important;
}

html body .main-hero-wrap .hero-capability-strip .hero-capability-label,
html body .main-hero-wrap .hero-capability-strip .hero-capability-label strong,
html body .main-hero-wrap .hero-capability-strip strong {
  font-family: var(--utap-elegant-sans) !important;
  font-weight: 500 !important;
  color: #3f4a70 !important;
  -webkit-text-fill-color: #3f4a70 !important;
  letter-spacing: -.004em !important;
}

html body .main-hero-wrap .hero-capability-icon,
html body .main-hero-wrap .hero-capability-strip .hero-capability-icon {
  color: #536089 !important;
  -webkit-text-fill-color: #536089 !important;
  opacity: .92 !important;
}

html body .main-hero-wrap .hero-capability-icon svg,
html body .main-hero-wrap .hero-capability-strip .hero-capability-icon svg {
  stroke: currentColor !important;
  stroke-width: 1.42 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
  opacity: .94 !important;
}

html body .main-hero-wrap .hero-capability-icon svg circle,
html body .main-hero-wrap .hero-capability-strip .hero-capability-icon svg circle,
html body .main-hero-wrap .hero-capability-icon svg path,
html body .main-hero-wrap .hero-capability-strip .hero-capability-icon svg path {
  vector-effect: non-scaling-stroke !important;
}




/* v65-how-video-layout
   How It Works section lock:
   - badge stays above the heading
   - heading aligns to the same left rail as the video card
   - playlist is scrollable and matched to the player-card height by landing.js
   - clicking a playlist row swaps into the player and starts playback */
html body #how-it-works.video-section {
  box-sizing: border-box !important;
}

html body #how-it-works .section-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: start !important;
  align-items: start !important;
  gap: clamp(12px, 1vw, 18px) !important;
  width: 100% !important;
  max-width: var(--landing-grid-max) !important;
  margin: 0 auto clamp(18px, 1.8vw, 30px) !important;
  padding-left: var(--landing-rail-pad) !important;
  padding-right: var(--landing-rail-pad) !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

html body #how-it-works .section-head .section-eyebrow {
  order: 1 !important;
  justify-self: start !important;
  margin: 0 !important;
  width: auto !important;
  max-width: max-content !important;
  text-align: left !important;
}

html body #how-it-works .section-head h2,
html body #how-it-works #how-it-works-title {
  order: 2 !important;
  justify-self: start !important;
  width: min(100%, 1120px) !important;
  max-width: min(100%, 1120px) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  text-wrap: balance !important;
}

html body #how-it-works .video-grid.video-grid--playlist {
  grid-template-columns: minmax(0, 1.13fr) minmax(340px, .87fr) !important;
  align-items: start !important;
  gap: clamp(18px, 1.7vw, 30px) !important;
}

html body #how-it-works .video-card--playlist-player {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
}

html body #how-it-works .video-card--playlist-player .video-frame {
  width: 100% !important;
}

html body #how-it-works .video-playlist {
  align-self: start !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  padding-right: clamp(10px, .9vw, 16px) !important;
  scroll-behavior: smooth !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(91, 92, 240, .32) rgba(15, 23, 42, .045) !important;
}

html body #how-it-works .video-playlist::-webkit-scrollbar {
  width: 8px !important;
}

html body #how-it-works .video-playlist::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, .045) !important;
  border-radius: 999px !important;
}

html body #how-it-works .video-playlist::-webkit-scrollbar-thumb {
  background: rgba(91, 92, 240, .34) !important;
  border-radius: 999px !important;
}

html body #how-it-works .video-playlist__item {
  flex: 0 0 auto !important;
}

@media (max-width: 860px) {
  html body #how-it-works .video-grid.video-grid--playlist {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #how-it-works .video-playlist {
    max-height: min(520px, 70vh) !important;
    height: auto !important;
  }
}




/* v67-menu-left-responsive
   Narrow correction:
   - menu drawer content is one left-aligned column
   - main links/more links no longer sit on the right side of the drawer
   - header direct nav hides earlier on smaller browser widths to prevent Contact Us / User Login overlap
   - desktop wide header remains unchanged */
html body .main-hero-wrap .site-bar.site-bar--landing,
html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-shell {
  overflow: visible !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-shell {
  position: relative !important;
  z-index: 5200 !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing #site-menu-panel.site-menu-panel,
html body #site-menu-panel.site-menu-panel {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  transform-origin: top left !important;
  width: min(456px, calc(100vw - 22px)) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 22px) !important;
  max-height: calc(100dvh - var(--landing-fixed-header-offset, 82px) - 12px) !important;
  margin: 0 !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  display: none !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  gap: 11px !important;
  align-items: stretch !important;
  align-content: start !important;
  justify-items: stretch !important;
  justify-content: stretch !important;
  text-align: left !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing.is-menu-open #site-menu-panel.site-menu-panel,
html body .main-hero-wrap .site-bar.site-bar--landing.is-menu-open .site-menu-panel {
  display: grid !important;
}

html body .main-hero-wrap #site-menu-panel.site-menu-panel > *,
html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-menu-panel__section,
html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-menu-panel__section--auth,
html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-menu-panel__section--main,
html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-menu-panel__section--more,
html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-menu-panel__auth,
html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-menu,
html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-menu--main,
html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-menu--more,
html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-menu__dropdown,
html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-menu__dropdown-menu {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  align-items: stretch !important;
  align-content: start !important;
  justify-items: stretch !important;
  justify-content: stretch !important;
  text-align: left !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
}

html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-menu-panel__section {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}

html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-menu-panel__auth {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-menu,
html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-menu--main,
html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-menu--more {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 9px !important;
}

html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-account-link,
html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-menu a,
html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-menu__trigger {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  text-align: left !important;
  white-space: normal !important;
}

html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-menu__trigger-arrow {
  margin-left: auto !important;
}

html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-account-link span:not(.site-account-link__icon),
html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-menu__trigger-label,
html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-menu a {
  text-align: left !important;
}

/* Hide the direct header links earlier so Contact Us never collides with User Login on medium windows. */
@media (max-width: 1360px) {
  html body .main-hero-wrap .site-bar.site-bar--landing {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto !important;
    grid-template-areas: "menu brand spacer accounts cta" !important;
    align-items: center !important;
    gap: clamp(8px, 1.2vw, 18px) !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing #site-direct-menu,
  html body .main-hero-wrap .site-bar.site-bar--landing .site-direct-menu {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-shell {
    grid-area: menu !important;
    justify-self: start !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .brand-mark {
    grid-area: brand !important;
    justify-self: start !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-account-actions {
    grid-area: accounts !important;
    justify-self: end !important;
    width: auto !important;
    max-width: max-content !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .header-actions.site-actions {
    grid-area: cta !important;
    justify-self: end !important;
    width: auto !important;
    max-width: max-content !important;
  }
}

@media (max-width: 920px) {
  html body .main-hero-wrap .site-bar.site-bar--landing {
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    grid-template-areas: "menu brand spacer cta" !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-account-actions {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 520px) {
  html body .main-hero-wrap .site-bar.site-bar--landing #site-menu-panel.site-menu-panel,
  html body #site-menu-panel.site-menu-panel {
    position: fixed !important;
    top: calc(var(--landing-fixed-header-offset, 64px) + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 12px !important;
  }

  html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-menu-panel__auth {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 360px) {
  html body .main-hero-wrap #site-menu-panel.site-menu-panel .site-menu-panel__auth {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}




/* v68-small-header-hide-links
   Small / tabbed-window header lock:
   - keep wide desktop header unchanged
   - hide direct nav and desktop account buttons on tab/small widths
   - keep only menu + logo + Create Profile CTA in the header
   - drawer still contains Account Actions, Main Links, and More */
@media (max-width: 1500px) {
  html body .main-hero-wrap .site-bar.site-bar--landing {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    grid-template-areas: "menu brand spacer cta" !important;
    align-items: center !important;
    gap: clamp(8px, 1.15vw, 16px) !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing #site-direct-menu,
  html body .main-hero-wrap .site-bar.site-bar--landing .site-direct-menu,
  html body .main-hero-wrap .site-bar.site-bar--landing .site-account-actions {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-shell {
    grid-area: menu !important;
    justify-self: start !important;
    align-self: center !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .brand-mark {
    grid-area: brand !important;
    justify-self: start !important;
    align-self: center !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .header-actions.site-actions {
    grid-area: cta !important;
    justify-self: end !important;
    align-self: center !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    min-width: 0 !important;
  }
}

@media (max-width: 640px) {
  html body .main-hero-wrap .site-bar.site-bar--landing {
    min-height: 58px !important;
    padding: 7px 12px !important;
  }
}




/* v69-header-logo-menu-admin-icon
   Surgical header correction:
   - when the header collapses, keep menu icon + logo on the same header center line
   - clear the older absolute-position coordinates that pushed menu/logo down or away
   - do not change hero/content/feature strip */
@media (max-width: 1500px) {
  html body .main-hero-wrap .site-bar.site-bar--landing {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    grid-template-areas: "menu brand spacer cta" !important;
    align-items: center !important;
    justify-items: start !important;
    min-height: clamp(58px, 4.7vw, 72px) !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-shell,
  html body .main-hero-wrap .site-bar.site-bar--landing .brand-mark,
  html body .main-hero-wrap .site-bar.site-bar--landing .header-actions.site-actions {
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    align-self: center !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-shell {
    grid-area: menu !important;
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
    justify-self: start !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    overflow: visible !important;
    z-index: 5200 !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-toggle {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    grid-area: 1 / 1 !important;
    place-self: center !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .brand-mark {
    grid-area: brand !important;
    position: relative !important;
    justify-self: start !important;
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .header-actions.site-actions {
    grid-area: cta !important;
    position: relative !important;
    justify-self: end !important;
  }
}

@media (max-width: 640px) {
  html body .main-hero-wrap .site-bar.site-bar--landing {
    min-height: 58px !important;
    padding: 7px 12px !important;
    gap: 8px !important;
  }

  html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-shell,
  html body .main-hero-wrap .site-bar.site-bar--landing .site-menu-toggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }
}




/* v72-font-spacing-control
   Typography substrate lock:
   - hero slogan now uses the selected heading font from Edit Landing
   - text spacing is controlled by saved typography variables
   - removes the hard-coded Inter Tight/Manrope lock that made font changes look unchanged */
:root {
  --utap-elegant-display: var(--utap-font-heading) !important;
  --utap-elegant-sans: var(--utap-font-body) !important;
}

html body .main-hero-wrap #hero-title,
html body .main-hero-wrap .hero-copy h1 {
  font-family: var(--utap-font-heading) !important;
  letter-spacing: var(--utap-heading-letter-spacing) !important;
  font-weight: 820 !important;
}

html body .main-hero-wrap #hero-description,
html body .main-hero-wrap .hero-copy p,
html body .main-hero-wrap .hero-tool-pill,
html body .main-hero-wrap .hero-capability-strip,
html body .main-hero-wrap .hero-capability-strip > span,
html body .main-hero-wrap .hero-capability-strip .hero-capability-label,
html body .main-hero-wrap .hero-capability-strip strong,
html body .main-hero-wrap .btn,
html body .main-hero-wrap a,
html body .main-hero-wrap button {
  font-family: var(--utap-font-body) !important;
  letter-spacing: var(--utap-body-letter-spacing) !important;
}

html body .main-hero-wrap .hero-title-line,
html body .main-hero-wrap .hero-title-accent {
  font-family: inherit !important;
  letter-spacing: inherit !important;
}




/* v74-spacing-persistence-safe
   Final typography spacing lock: persisted editor variables win over older
   hard-coded letter-spacing rules without changing layout geometry. */
html body .main-hero-wrap #hero-title,
html body .main-hero-wrap .hero-copy h1,
html body .main-hero-wrap .hero-title-line,
html body .main-hero-wrap .hero-title-accent {
  letter-spacing: var(--utap-heading-letter-spacing) !important;
}

html body .main-hero-wrap #hero-description,
html body .main-hero-wrap .hero-copy p,
html body .main-hero-wrap .hero-tool-pill,
html body .main-hero-wrap .hero-capability-strip,
html body .main-hero-wrap .hero-capability-strip > span,
html body .main-hero-wrap .hero-capability-strip .hero-capability-label,
html body .main-hero-wrap .hero-capability-strip strong,
html body .main-hero-wrap .btn,
html body .main-hero-wrap a,
html body .main-hero-wrap button {
  letter-spacing: var(--utap-body-letter-spacing) !important;
}




/* v75-spacing-all-sections
   Typography spacing bridge:
   The editor already saves --utap-heading-letter-spacing and --utap-body-letter-spacing.
   Earlier locks only applied those variables to the hero/top section, while lower
   sections still had hard-coded letter-spacing rules with !important. This final
   layer makes the saved spacing variables win across the full public landing page. */
html body :where(.main-hero-wrap, .video-section, .landing-showcase-section, .landing-final-cta, .site-footer)
  :where(p, li, a, button, span, strong, small, em, label, input, textarea, select,
  .btn,
  .section-eyebrow,
  .hero-tool-pill,
  .hero-capability-label,
  .hero-capability-strip,
  .hero-capability-strip > span,
  .hero-side-box__head,
  .hero-side-box__items,
  .landing-step-card,
  .landing-step-card__icon,
  .landing-step-arrow,
  .video-card,
  .video-card__eyebrow,
  .video-card__title,
  .video-card__text,
  .hero-image-panel__caption,
  .hero-gallery__caption,
  .hero-gallery__copy,
  .trusted-label,
  .logo-chip,
  .landing-final-cta__button,
  .site-footer__link) {
  font-family: var(--utap-font-body) !important;
  letter-spacing: var(--utap-body-letter-spacing) !important;
}

html body :where(.main-hero-wrap, .video-section, .landing-showcase-section, .landing-final-cta, .site-footer)
  :where(h1, h2, h3, h4, h5, h6,
  #hero-title,
  #how-it-works-title,
  .section-head h2,
  .landing-showcase-section__head h2,
  .hero-side-box__head strong,
  .landing-steps-strip__head h2,
  .landing-step-card h3,
  .video-card h3,
  .video-card__title,
  .hero-image-panel__caption strong,
  .hero-gallery__copy strong,
  .landing-final-cta__copy h2,
  .logo-chip strong) {
  font-family: var(--utap-font-heading) !important;
  letter-spacing: var(--utap-heading-letter-spacing) !important;
}

html body :where(.main-hero-wrap, .video-section, .landing-showcase-section, .landing-final-cta, .site-footer)
  :where(h1, h2, h3, h4, h5, h6,
  #hero-title,
  #how-it-works-title,
  .section-head h2,
  .landing-showcase-section__head h2,
  .hero-side-box__head strong,
  .landing-steps-strip__head h2,
  .landing-step-card h3,
  .video-card h3,
  .video-card__title,
  .hero-image-panel__caption strong,
  .hero-gallery__copy strong,
  .landing-final-cta__copy h2,
  .logo-chip strong)
  :where(span, strong, em, small) {
  font-family: inherit !important;
  letter-spacing: inherit !important;
}

/* Footer links have inline styles; this selector is intentionally explicit so the
   saved body spacing still wins without changing the footer layout. */
html body .site-footer .site-footer__nav a,
html body .site-footer .site-footer__link {
  font-family: var(--utap-font-body) !important;
  letter-spacing: var(--utap-body-letter-spacing) !important;
}


/* v76-spacing-high-specificity
   Root cause: the previous all-section bridge used :where(), which has zero
   specificity. Older section rules used !important with stronger selectors,
   so the saved spacing variables lost in the cascade. These explicit selectors
   are intentionally high-specificity and limited to the public landing surface. */
html body .main-hero-wrap.main-hero-wrap #hero-title,
html body .main-hero-wrap.main-hero-wrap .hero-copy.hero-copy h1,
html body .main-hero-wrap.main-hero-wrap .hero-title-line,
html body .main-hero-wrap.main-hero-wrap .hero-title-accent,
html body .main-hero-wrap.main-hero-wrap .hero-apps-section.hero-apps-section .hero-side-box.hero-side-box .hero-side-box__head strong,
html body .main-hero-wrap.main-hero-wrap .hero-apps-section.hero-apps-section .hero-side-card.hero-side-card .hero-side-card__copy strong,
html body .main-hero-wrap.main-hero-wrap .landing-steps-strip.landing-steps-strip .landing-steps-strip__head h2,
html body .main-hero-wrap.main-hero-wrap .landing-steps-strip.landing-steps-strip .landing-step-card.landing-step-card h3,
html body .video-section.video-section .section-head.section-head h2,
html body .video-section.video-section #how-it-works-title,
html body .video-section.video-section .video-grid.video-grid .video-card.video-card h3,
html body .video-section.video-section .video-grid.video-grid .video-card.video-card .video-card__title,
html body .video-section.video-section .video-grid.video-grid .video-playlist.video-playlist .video-playlist__item strong,
html body .landing-showcase-section.landing-showcase-section .section-head.section-head h2,
html body .landing-showcase-section.landing-showcase-section .landing-showcase-section__head.landing-showcase-section__head h2,
html body .landing-showcase-section.landing-showcase-section .hero-image-panel.hero-image-panel .hero-image-panel__caption strong,
html body .landing-showcase-section.landing-showcase-section .hero-gallery.hero-gallery .hero-gallery__copy strong,
html body .landing-showcase-section.landing-showcase-section #hero-brand-band.logo-band.logo-band .logo-chip.logo-chip strong,
html body .landing-showcase-section.landing-showcase-section #hero-proof-row .logo-band.logo-band .logo-chip.logo-chip strong,
html body .landing-final-cta.landing-final-cta .landing-final-cta__copy.landing-final-cta__copy h2 {
  font-family: var(--utap-font-heading) !important;
  letter-spacing: var(--utap-heading-letter-spacing) !important;
}

html body .main-hero-wrap.main-hero-wrap #hero-description,
html body .main-hero-wrap.main-hero-wrap .hero-copy.hero-copy p,
html body .main-hero-wrap.main-hero-wrap .hero-tool-pill.hero-tool-pill,
html body .main-hero-wrap.main-hero-wrap .hero-tool-pill.hero-tool-pill span,
html body .main-hero-wrap.main-hero-wrap .hero-capability-strip.hero-capability-strip,
html body .main-hero-wrap.main-hero-wrap .hero-capability-strip.hero-capability-strip .hero-capability-item,
html body .main-hero-wrap.main-hero-wrap .hero-capability-strip.hero-capability-strip .hero-capability-label,
html body .main-hero-wrap.main-hero-wrap .hero-capability-strip.hero-capability-strip strong,
html body .main-hero-wrap.main-hero-wrap .hero-actions.hero-actions .btn,
html body .main-hero-wrap.main-hero-wrap .hero-apps-section.hero-apps-section .hero-side-box.hero-side-box .hero-side-box__head p,
html body .main-hero-wrap.main-hero-wrap .hero-apps-section.hero-apps-section .hero-side-card.hero-side-card .hero-side-card__description,
html body .main-hero-wrap.main-hero-wrap .hero-apps-section.hero-apps-section .hero-side-card.hero-side-card .hero-side-card__badge,
html body .main-hero-wrap.main-hero-wrap .landing-steps-strip.landing-steps-strip .landing-step-card.landing-step-card p,
html body .main-hero-wrap.main-hero-wrap .landing-steps-strip.landing-steps-strip .landing-step-arrow,
html body .video-section.video-section .section-head.section-head p,
html body .video-section.video-section .section-head.section-head .section-eyebrow,
html body .video-section.video-section .video-grid.video-grid .video-card.video-card p,
html body .video-section.video-section .video-grid.video-grid .video-card.video-card span,
html body .video-section.video-section .video-grid.video-grid .video-card.video-card .video-card__eyebrow,
html body .video-section.video-section .video-grid.video-grid .video-playlist.video-playlist .video-playlist__item,
html body .video-section.video-section .video-grid.video-grid .video-playlist.video-playlist .video-playlist__item span,
html body .landing-showcase-section.landing-showcase-section .section-head.section-head p,
html body .landing-showcase-section.landing-showcase-section .section-eyebrow.section-eyebrow,
html body .landing-showcase-section.landing-showcase-section .hero-image-panel.hero-image-panel .hero-image-panel__caption span,
html body .landing-showcase-section.landing-showcase-section .hero-gallery.hero-gallery .hero-gallery__copy span,
html body .landing-showcase-section.landing-showcase-section #hero-trust-copy.trusted-label,
html body .landing-showcase-section.landing-showcase-section #hero-brand-band.logo-band.logo-band .logo-chip.logo-chip small,
html body .landing-showcase-section.landing-showcase-section #hero-proof-row .logo-band.logo-band .logo-chip.logo-chip small,
html body .landing-final-cta.landing-final-cta .landing-final-cta__copy.landing-final-cta__copy p,
html body .landing-final-cta.landing-final-cta .landing-final-cta__button.landing-final-cta__button,
html body .site-footer.site-footer .site-footer__nav.site-footer__nav a,
html body .site-footer.site-footer .site-footer__link.site-footer__link {
  font-family: var(--utap-font-body) !important;
  letter-spacing: var(--utap-body-letter-spacing) !important;
}

/* Inline child spans/strongs inherit the section decision instead of reviving
   old hard-coded spacing on nested text fragments. */
html body .main-hero-wrap.main-hero-wrap #hero-title span,
html body .main-hero-wrap.main-hero-wrap .hero-copy.hero-copy h1 span,
html body .video-section.video-section h2 span,
html body .video-section.video-section h3 span,
html body .landing-showcase-section.landing-showcase-section h2 span,
html body .landing-final-cta.landing-final-cta h2 span {
  font-family: inherit !important;
  letter-spacing: inherit !important;
}




/* v77-section-layout-spacing-fixes
   Narrow section layout correction:
   - keep How It Works heading on one desktop row
   - keep Original company-branded themes on one row with the description directly below
   - remove the circular mark in the final CTA and let the copy move left
   - tighten and center the trusted-by label above the logo band */
@media (min-width: 901px) {
  html body #how-it-works.video-section .section-head h2,
  html body #how-it-works.video-section #how-it-works-title {
    width: 100% !important;
    max-width: none !important;
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-size: clamp(38px, 3.55vw, 64px) !important;
    line-height: 1.02 !important;
  }

  html body .landing-showcase-section.landing-showcase-section .landing-showcase-section__head,
  html body .landing-showcase-section.landing-showcase-section .section-head.landing-showcase-section__head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "eyebrow"
      "title"
      "copy" !important;
    justify-items: start !important;
    align-items: start !important;
    gap: clamp(10px, 1vw, 18px) !important;
    width: min(100%, 1540px) !important;
    max-width: 1540px !important;
    margin: 0 auto clamp(20px, 2vw, 34px) !important;
    text-align: left !important;
  }

  html body .landing-showcase-section.landing-showcase-section .landing-showcase-section__head .section-eyebrow {
    grid-area: eyebrow !important;
    grid-column: auto !important;
    align-self: start !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  html body .landing-showcase-section.landing-showcase-section .landing-showcase-section__head h2 {
    grid-area: title !important;
    grid-column: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-size: clamp(38px, 3.2vw, 58px) !important;
    line-height: 1.04 !important;
  }

  html body .landing-showcase-section.landing-showcase-section .landing-showcase-section__head p:not(.section-eyebrow) {
    grid-area: copy !important;
    grid-column: auto !important;
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    margin: 0 !important;
    text-align: left !important;
  }
}

html body .landing-final-cta.landing-final-cta {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: clamp(18px, 3vw, 42px) !important;
}

html body .landing-final-cta.landing-final-cta .landing-final-cta__mark,
html body .landing-final-cta.landing-final-cta .landing-final-cta__mark-img {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body .landing-final-cta.landing-final-cta .landing-final-cta__copy {
  grid-column: 1 !important;
  justify-self: start !important;
  width: 100% !important;
  max-width: min(100%, 1120px) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

html body .landing-final-cta.landing-final-cta .landing-final-cta__button {
  grid-column: 2 !important;
  justify-self: end !important;
}

html body .landing-showcase-section.landing-showcase-section #hero-proof-row,
html body .landing-showcase-section.landing-showcase-section .hero-proof-row {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

html body .landing-showcase-section.landing-showcase-section .trusted-section,
html body .landing-showcase-section.landing-showcase-section .hero-brand-chip-box,
html body .landing-showcase-section.landing-showcase-section #hero-proof-row .trusted-section.hero-brand-chip-box {
  padding-top: clamp(4px, .8vw, 12px) !important;
  text-align: center !important;
}

html body .landing-showcase-section.landing-showcase-section #hero-trust-copy.trusted-label,
html body .landing-showcase-section.landing-showcase-section .trusted-label.trust-copy,
html body .landing-showcase-section.landing-showcase-section .trust-copy {
  display: block !important;
  width: 100% !important;
  margin: 0 auto clamp(8px, .8vw, 14px) !important;
  padding: 0 !important;
  text-align: center !important;
}

html body .landing-showcase-section.landing-showcase-section #hero-brand-band,
html body .landing-showcase-section.landing-showcase-section .logo-band,
html body .landing-showcase-section.landing-showcase-section .trusted-logo-marquee {
  margin-top: 0 !important;
  padding-top: clamp(12px, 1.4vw, 22px) !important;
  padding-bottom: clamp(12px, 1.4vw, 22px) !important;
  min-height: clamp(82px, 6.5vw, 122px) !important;
}

@media (max-width: 900px) {
  html body #how-it-works.video-section .section-head h2,
  html body #how-it-works.video-section #how-it-works-title,
  html body .landing-showcase-section.landing-showcase-section .landing-showcase-section__head h2 {
    white-space: normal !important;
    text-wrap: balance !important;
  }

  html body .landing-final-cta.landing-final-cta {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .landing-final-cta.landing-final-cta .landing-final-cta__button {
    grid-column: 1 !important;
    justify-self: start !important;
  }
}


/* v84-brand-band-scroll-marquee
   Brand strip only:
   - animation is driven by scrollLeft in landing.js, so old transform locks cannot stop it
   - keep the tray full-width with a small edge bleed to remove the right-side empty gap
   - no hero/header/footer/app changes */
:root {
  --trusted-logo-gap: clamp(24px, 3.1vw, 58px);
  --utap-brand-band-edge-bleed-v84: clamp(10px, 2vw, 36px);
}

html body .landing-showcase-section.landing-showcase-section #hero-brand-band.logo-band,
html body .landing-showcase-section.landing-showcase-section #hero-proof-row .logo-band,
html body #hero-brand-band.logo-band,
html body #hero-proof-row .logo-band {
  width: calc(100% + (var(--utap-brand-band-edge-bleed-v84) * 2)) !important;
  max-width: none !important;
  margin-left: calc(var(--utap-brand-band-edge-bleed-v84) * -1) !important;
  margin-right: calc(var(--utap-brand-band-edge-bleed-v84) * -1) !important;
  padding-left: var(--utap-brand-band-edge-bleed-v84) !important;
  padding-right: var(--utap-brand-band-edge-bleed-v84) !important;
  overflow: hidden !important;
  scroll-behavior: auto !important;
  scrollbar-width: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

html body .landing-showcase-section.landing-showcase-section #hero-brand-band.logo-band::-webkit-scrollbar,
html body .landing-showcase-section.landing-showcase-section #hero-proof-row .logo-band::-webkit-scrollbar,
html body #hero-brand-band.logo-band::-webkit-scrollbar,
html body #hero-proof-row .logo-band::-webkit-scrollbar {
  display: none !important;
}

html body .landing-showcase-section.landing-showcase-section #hero-brand-band.logo-band .logo-band__track,
html body .landing-showcase-section.landing-showcase-section #hero-proof-row .logo-band .logo-band__track,
html body #hero-brand-band.logo-band .logo-band__track,
html body #hero-proof-row .logo-band .logo-band__track {
  display: flex !important;
  align-items: center !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  animation: none !important;
  transform: none !important;
  translate: none !important;
  will-change: auto !important;
}

html body .landing-showcase-section.landing-showcase-section #hero-brand-band.logo-band .logo-band__set,
html body .landing-showcase-section.landing-showcase-section #hero-brand-band.logo-band .logo-band__set[aria-hidden="true"],
html body .landing-showcase-section.landing-showcase-section #hero-proof-row .logo-band .logo-band__set,
html body .landing-showcase-section.landing-showcase-section #hero-proof-row .logo-band .logo-band__set[aria-hidden="true"],
html body #hero-brand-band.logo-band .logo-band__set,
html body #hero-brand-band.logo-band .logo-band__set[aria-hidden="true"],
html body #hero-proof-row .logo-band .logo-band__set,
html body #hero-proof-row .logo-band .logo-band__set[aria-hidden="true"] {
  display: flex !important;
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: var(--trusted-logo-gap) !important;
  margin: 0 !important;
  padding: 0 var(--trusted-logo-gap) 0 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
  translate: none !important;
}

html body .landing-showcase-section.landing-showcase-section #hero-brand-band.logo-band .logo-chip,
html body .landing-showcase-section.landing-showcase-section #hero-proof-row .logo-band .logo-chip,
html body #hero-brand-band.logo-band .logo-chip,
html body #hero-proof-row .logo-band .logo-chip {
  flex: 0 0 var(--trusted-logo-width, var(--landing-trusted-logo-size, 156px)) !important;
  width: var(--trusted-logo-width, var(--landing-trusted-logo-size, 156px)) !important;
  min-width: var(--trusted-logo-width, var(--landing-trusted-logo-size, 156px)) !important;
  max-width: var(--trusted-logo-width, var(--landing-trusted-logo-size, 156px)) !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 760px) {
  :root {
    --trusted-logo-gap: clamp(18px, 7vw, 38px);
    --utap-brand-band-edge-bleed-v84: 14px;
  }
}




/* v85-brand-band-edge-balance
   Brand strip only.
   Intent: keep the existing JS scrollLeft marquee working, but make the tray
   reach the same visual edge on the left and right. Do not redefine keyframes,
   transform movement, or scroll animation. */
:root {
  --trusted-logo-gap: clamp(18px, 2.35vw, 42px);
}

html body .landing-showcase-section.landing-showcase-section #hero-brand-band.logo-band,
html body .landing-showcase-section.landing-showcase-section #hero-proof-row .logo-band,
html body #hero-brand-band.logo-band,
html body #hero-proof-row .logo-band {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
  scroll-behavior: auto !important;
  scrollbar-width: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

html body .landing-showcase-section.landing-showcase-section #hero-brand-band.logo-band .logo-band__track,
html body .landing-showcase-section.landing-showcase-section #hero-proof-row .logo-band .logo-band__track,
html body #hero-brand-band.logo-band .logo-band__track,
html body #hero-proof-row .logo-band .logo-band__track {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body .landing-showcase-section.landing-showcase-section #hero-brand-band.logo-band .logo-band__set,
html body .landing-showcase-section.landing-showcase-section #hero-brand-band.logo-band .logo-band__set[aria-hidden="true"],
html body .landing-showcase-section.landing-showcase-section #hero-proof-row .logo-band .logo-band__set,
html body .landing-showcase-section.landing-showcase-section #hero-proof-row .logo-band .logo-band__set[aria-hidden="true"],
html body #hero-brand-band.logo-band .logo-band__set,
html body #hero-brand-band.logo-band .logo-band__set[aria-hidden="true"],
html body #hero-proof-row .logo-band .logo-band__set,
html body #hero-proof-row .logo-band .logo-band__set[aria-hidden="true"] {
  gap: var(--trusted-logo-gap) !important;
  padding-left: 0 !important;
  padding-right: var(--trusted-logo-gap) !important;
}

@media (max-width: 760px) {
  :root {
    --trusted-logo-gap: clamp(16px, 6vw, 34px);
  }
}



/* v86-brand-band-symmetric-motion-viewport
   Brand strip only.
   The background remains full-bleed. The moving row now lives inside one
   symmetric viewport, so its left and right start/exit positions use the same
   distance from the background edge. landing.js scrolls this inner viewport. */
:root {
  --utap-brand-motion-edge-v86: clamp(18px, 2.15vw, 38px);
  --utap-brand-motion-fade-v86: clamp(8px, .8vw, 14px);
}

/* Remove the older nested left:50%/translateX(-50%) breakout from the proof
   row. One standard full-bleed calculation owns the geometry. */
html body .landing-showcase-section.landing-showcase-section #hero-proof-row.hero-proof-row {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  transform: none !important;
  justify-self: stretch !important;
}

html body .landing-showcase-section.landing-showcase-section #hero-proof-row.hero-proof-row .hero-brand-chip-box,
html body .landing-showcase-section.landing-showcase-section #hero-proof-row.hero-proof-row .trusted-section {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body .landing-showcase-section.landing-showcase-section #hero-proof-row.hero-proof-row .hero-brand-chip-box #hero-brand-band.logo-band,
html body .landing-showcase-section.landing-showcase-section #hero-proof-row.hero-proof-row .trusted-section #hero-brand-band.logo-band,
html body .landing-showcase-section.landing-showcase-section #hero-brand-band.logo-band,
html body #hero-proof-row #hero-brand-band.logo-band {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html body .landing-showcase-section.landing-showcase-section #hero-brand-band.logo-band .logo-band__viewport,
html body .landing-showcase-section.landing-showcase-section #hero-proof-row .logo-band .logo-band__viewport,
html body #hero-brand-band.logo-band .logo-band__viewport,
html body #hero-proof-row .logo-band .logo-band__viewport {
  position: relative !important;
  width: calc(100% - (var(--utap-brand-motion-edge-v86) * 2)) !important;
  max-width: calc(100% - (var(--utap-brand-motion-edge-v86) * 2)) !important;
  min-width: 0 !important;
  margin-left: var(--utap-brand-motion-edge-v86) !important;
  margin-right: var(--utap-brand-motion-edge-v86) !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  scroll-behavior: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--utap-brand-motion-fade-v86),
    #000 calc(100% - var(--utap-brand-motion-fade-v86)),
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--utap-brand-motion-fade-v86),
    #000 calc(100% - var(--utap-brand-motion-fade-v86)),
    transparent 100%
  ) !important;
}

html body .landing-showcase-section.landing-showcase-section #hero-brand-band.logo-band .logo-band__viewport::-webkit-scrollbar,
html body .landing-showcase-section.landing-showcase-section #hero-proof-row .logo-band .logo-band__viewport::-webkit-scrollbar,
html body #hero-brand-band.logo-band .logo-band__viewport::-webkit-scrollbar,
html body #hero-proof-row .logo-band .logo-band__viewport::-webkit-scrollbar {
  display: none !important;
}

html body .landing-showcase-section.landing-showcase-section #hero-brand-band.logo-band .logo-band__viewport > .logo-band__track,
html body .landing-showcase-section.landing-showcase-section #hero-proof-row .logo-band .logo-band__viewport > .logo-band__track,
html body #hero-brand-band.logo-band .logo-band__viewport > .logo-band__track,
html body #hero-proof-row .logo-band .logo-band__viewport > .logo-band__track {
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 760px) {
  :root {
    --utap-brand-motion-edge-v86: 14px;
    --utap-brand-motion-fade-v86: 8px;
  }
}

/* v95-mobile-background-and-capability-contrast
   One authoritative owner for the homepage hero from v87 onward.

   Invariants:
   - Desktop/tablet keep the wide artwork behind the real HTML copy.
   - Mobile uses the portrait <picture> source as an absolute background layer,
     not as a normal-flow image block.
   - The navigation geometry is preserved; only its visible glass surface is
     maintained.
   - All four tool chips and both hero buttons remain available.
   - The capability bar remains 40% white, while labels and icons stay fully
     opaque and high-contrast.
   - Applications and the three-step section remain outside the hero stage. */

:root {
  --utap-hero-height: clamp(720px, 56.28vw, 980px);
  --utap-hero-gutter: clamp(24px, 5vw, 96px);
  --utap-hero-support-width: min(1760px, calc(100vw - clamp(24px, 4vw, 76px)));
}

/* Surface only. The base landing styles continue to own the header position,
   width, centering, padding and responsive geometry. */
html body .main-hero-wrap .site-bar.site-bar--landing {
  background: rgba(255, 255, 255, .74) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.14) !important;
  backdrop-filter: blur(18px) saturate(1.14) !important;
  border-color: rgba(255, 255, 255, .36) !important;
  box-shadow: 0 12px 34px rgba(5, 15, 38, .09) !important;
}

/* v102-homepage-fixed-scroll-header
   The homepage had a later high-specificity rule that changed this header to
   position: relative. The scroll state classes were still toggled correctly,
   but the header travelled with the document and could not return until the
   page reached the top. This block owns the complete floating invariant:
   fixed to the viewport, hidden on down-scroll, visible on up-scroll. */
html body .main-hero-wrap .site-bar.site-bar--landing[data-site-header] {
  position: fixed !important;
  transform: translate3d(-50%, 0, 0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition:
    transform 220ms cubic-bezier(.22, .75, .24, 1),
    opacity 160ms ease !important;
  will-change: transform, opacity;
}

html body .main-hero-wrap .site-bar.site-bar--landing[data-site-header].is-scroll-hidden:not(.is-menu-open):not(:focus-within) {
  transform: translate3d(-50%, calc(-100% - 18px), 0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body .main-hero-wrap .site-bar.site-bar--landing[data-site-header].is-scroll-visible,
html body .main-hero-wrap .site-bar.site-bar--landing[data-site-header].is-menu-open,
html body .main-hero-wrap .site-bar.site-bar--landing[data-site-header]:focus-within {
  transform: translate3d(-50%, 0, 0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body .main-hero-wrap,
html body .main-hero-wrap .browser-shell,
html body .main-hero-wrap .hero-page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body .main-hero-wrap {
  overflow-x: clip !important;
  background: #f5f7fb !important;
}

html body .main-hero-wrap .hero-stage {
  position: relative !important;
  isolation: isolate !important;
  width: 100% !important;
  max-width: none !important;
  min-height: var(--utap-hero-height) !important;
  margin: 0 !important;
  padding:
    clamp(156px, 9.6vw, 190px)
    var(--utap-hero-gutter)
    clamp(26px, 2.4vw, 42px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(40px, 1fr) auto !important;
  grid-template-areas:
    "copy"
    "."
    "strip" !important;
  gap: 0 !important;
  align-items: start !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  background: #071126 !important;
}

html body .main-hero-wrap .hero-background-media,
html body .main-hero-wrap .hero-background-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}

html body .main-hero-wrap .hero-background-media {
  z-index: 0 !important;
  display: block !important;
  overflow: hidden !important;
  background: #071126 !important;
}

html body .main-hero-wrap .hero-background-media__image {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center right !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

html body .main-hero-wrap .hero-background-overlay {
  z-index: 1 !important;
  display: block !important;
  background:
    linear-gradient(90deg,
      rgba(3, 9, 23, .78) 0%,
      rgba(3, 9, 23, .64) 27%,
      rgba(3, 9, 23, .34) 43%,
      rgba(3, 9, 23, .10) 57%,
      rgba(3, 9, 23, 0) 72%),
    linear-gradient(180deg,
      rgba(3, 9, 23, .08) 0%,
      rgba(3, 9, 23, 0) 72%,
      rgba(3, 9, 23, .24) 100%) !important;
}

html body .main-hero-wrap .hero-copy {
  grid-area: copy !important;
  position: relative !important;
  z-index: 3 !important;
  align-self: start !important;
  width: min(690px, 48vw) !important;
  max-width: min(690px, 48vw) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

html body .main-hero-wrap .hero-capability-strip {
  grid-area: strip !important;
  position: relative !important;
  z-index: 3 !important;
  align-self: end !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

html body .main-hero-wrap .hero-support-sections {
  position: relative !important;
  z-index: 2 !important;
  width: var(--utap-hero-support-width) !important;
  max-width: var(--utap-hero-support-width) !important;
  margin: clamp(22px, 2.8vw, 44px) auto 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(18px, 2vw, 30px) !important;
  background: transparent !important;
}

html body .main-hero-wrap .hero-support-sections .hero-apps-section,
html body .main-hero-wrap .hero-support-sections #hero-apps-section,
html body .main-hero-wrap .hero-support-sections .landing-steps-strip {
  grid-area: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep every chip and every CTA available at every width. */
html body .main-hero-wrap .hero-tool-pills > .hero-tool-pill:nth-child(n),
html body .main-hero-wrap .hero-actions .btn:nth-child(n) {
  visibility: visible !important;
  opacity: 1 !important;
}

html body .main-hero-wrap .hero-tool-pills > .hero-tool-pill:nth-child(n) {
  display: inline-flex !important;
}

/* 20% glass surface. The glass remains highly transparent; foreground
   contrast is owned independently so labels and icons never inherit the
   background opacity. */
html body .main-hero-wrap .hero-capability-strip,
html body .main-hero-wrap section.hero-capability-strip {
  background: rgba(255, 255, 255, .20) !important;
  border: 1px solid rgba(255, 255, 255, .58) !important;
  box-shadow:
    0 14px 34px rgba(2, 8, 23, .22),
    inset 0 1px 0 rgba(255, 255, 255, .38) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) brightness(.78) !important;
  backdrop-filter: blur(18px) saturate(1.08) brightness(.78) !important;
}

html body .main-hero-wrap .hero-capability-strip .hero-capability-item,
html body .main-hero-wrap .hero-capability-strip .hero-capability-label,
html body .main-hero-wrap .hero-capability-strip .hero-capability-label strong,
html body .main-hero-wrap .hero-capability-strip strong {
  color: #ffffff !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff !important;
  -webkit-text-stroke: 0 !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .96),
    0 0 8px rgba(0, 0, 0, .62) !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

html body .main-hero-wrap .hero-capability-strip .hero-capability-label {
  font-weight: 720 !important;
  letter-spacing: .005em !important;
}

html body .main-hero-wrap .hero-capability-strip strong {
  font-weight: 850 !important;
}

html body .main-hero-wrap .hero-capability-strip .hero-capability-icon,
html body .main-hero-wrap .hero-capability-strip .hero-capability-icon svg {
  color: #69d7ff !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

html body .main-hero-wrap .hero-capability-strip .hero-capability-icon {
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, .95))
    drop-shadow(0 0 5px rgba(0, 0, 0, .48)) !important;
}

html body .main-hero-wrap .hero-capability-strip .hero-capability-icon svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.25 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

@media (min-width: 769px) and (max-width: 1180px) {
  :root {
    --utap-hero-height: clamp(760px, 74vw, 930px);
    --utap-hero-gutter: clamp(28px, 5vw, 58px);
  }

  html body .main-hero-wrap .hero-stage {
    padding-top: clamp(142px, 14vw, 170px) !important;
  }

  html body .main-hero-wrap .hero-copy {
    width: min(650px, 64vw) !important;
    max-width: min(650px, 64vw) !important;
  }

  html body .main-hero-wrap .hero-background-overlay {
    background:
      linear-gradient(90deg,
        rgba(3, 9, 23, .82) 0%,
        rgba(3, 9, 23, .68) 38%,
        rgba(3, 9, 23, .28) 63%,
        rgba(3, 9, 23, 0) 84%),
      linear-gradient(180deg,
        rgba(3, 9, 23, .08) 0%,
        rgba(3, 9, 23, 0) 70%,
        rgba(3, 9, 23, .24) 100%) !important;
  }
}

@media (max-width: 768px) {
  :root {
    --utap-hero-support-width: calc(100vw - 24px);
  }

  html body .main-hero-wrap .site-bar.site-bar--landing {
    background: rgba(255, 255, 255, .76) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.12) !important;
    backdrop-filter: blur(16px) saturate(1.12) !important;
  }

  html body .main-hero-wrap .hero-stage {
    min-height: max(980px, 177.7778vw) !important;
    padding: clamp(108px, 22vw, 126px) 14px 176px !important;
    display: block !important;
    overflow: hidden !important;
    background: #071126 !important;
  }

  html body .main-hero-wrap .hero-copy {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html body .main-hero-wrap #hero-title,
  html body .main-hero-wrap .hero-copy h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(36px, 10.4vw, 47px) !important;
    line-height: 1.01 !important;
    letter-spacing: -.055em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  html body .main-hero-wrap #hero-description,
  html body .main-hero-wrap .hero-copy > p {
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    margin-top: 14px !important;
    font-size: 14.5px !important;
    line-height: 1.48 !important;
  }

  html body .main-hero-wrap .hero-tool-pills,
  html body .main-hero-wrap .hero-platform-chips.hero-tool-pills {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body .main-hero-wrap .hero-tool-pills > .hero-tool-pill:nth-child(n) {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 6px 9px 6px 7px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  html body .main-hero-wrap .hero-tool-pills > .hero-tool-pill:nth-child(n) > span:last-child {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .main-hero-wrap .hero-tool-icon {
    flex: 0 0 auto !important;
    width: 24px !important;
    height: 24px !important;
  }

  html body .main-hero-wrap .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body .main-hero-wrap .hero-actions .btn:nth-child(n),
  html body .main-hero-wrap .hero-actions #hero-browse-templates,
  html body .main-hero-wrap .hero-actions .hero-secondary-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    white-space: normal !important;
    transform: none !important;
  }

  /* The portrait source now behaves as a true background layer. It begins
     behind the lower copy/CTAs, then fills the remaining hero. */
  html body .main-hero-wrap .hero-background-media {
    position: absolute !important;
    inset: clamp(260px, 55vw, 330px) 0 0 !important;
    z-index: 0 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #071126 !important;
  }

  html body .main-hero-wrap .hero-background-media__image {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center top !important;
    opacity: 1 !important;
  }

  html body .main-hero-wrap .hero-background-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    background:
      linear-gradient(180deg,
        #071126 0%,
        rgba(7, 17, 38, .98) 25%,
        rgba(7, 17, 38, .90) 36%,
        rgba(7, 17, 38, .48) 48%,
        rgba(7, 17, 38, .12) 62%,
        rgba(7, 17, 38, .05) 78%,
        rgba(7, 17, 38, .34) 100%),
      linear-gradient(90deg,
        rgba(7, 17, 38, .28) 0%,
        rgba(7, 17, 38, .06) 50%,
        rgba(7, 17, 38, .18) 100%) !important;
  }

  html body .main-hero-wrap .hero-capability-strip {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 18px !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 10px !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
  }

  html body .main-hero-wrap .hero-capability-strip .hero-capability-item:nth-child(n) {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 6px 4px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body .main-hero-wrap .hero-capability-strip .hero-capability-item:last-child {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: min(58%, 220px) !important;
  }

  html body .main-hero-wrap .hero-capability-strip .hero-capability-label {
    font-size: clamp(11.5px, 3vw, 13px) !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  html body .main-hero-wrap .hero-capability-strip .hero-capability-icon {
    flex: 0 0 auto !important;
    width: 26px !important;
    height: 26px !important;
    margin-right: 8px !important;
  }

  html body .main-hero-wrap .hero-support-sections {
    margin-top: 18px !important;
    gap: 16px !important;
  }
}

@media (max-width: 420px) {
  html body .main-hero-wrap .hero-stage {
    min-height: max(1120px, 205vw) !important;
    padding-top: 108px !important;
    padding-bottom: 186px !important;
  }

  html body .main-hero-wrap #hero-title,
  html body .main-hero-wrap .hero-copy h1 {
    font-size: clamp(34px, 10.8vw, 42px) !important;
  }

  html body .main-hero-wrap .hero-tool-pills > .hero-tool-pill:nth-child(n) {
    font-size: 11.5px !important;
    padding-right: 7px !important;
  }

  html body .main-hero-wrap .hero-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .main-hero-wrap .hero-background-media {
    inset: 420px 0 0 !important;
  }

  html body .main-hero-wrap .hero-capability-strip {
    left: 10px !important;
    right: 10px !important;
    bottom: 14px !important;
    padding: 10px !important;
    gap: 4px 8px !important;
  }

  html body .main-hero-wrap .hero-capability-strip .hero-capability-item:nth-child(n) {
    min-height: 40px !important;
    padding: 5px 2px !important;
  }

  html body .main-hero-wrap .hero-capability-strip .hero-capability-label {
    font-size: 11px !important;
  }

  html body .main-hero-wrap .hero-capability-strip .hero-capability-icon {
    width: 24px !important;
    height: 24px !important;
    margin-right: 6px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .main-hero-wrap .site-bar.site-bar--landing {
    transition: none !important;
  }
}

/* v97-hero-copy-contrast
   Final hero copy color ownership.
   Older light-theme rules still forced the heading and paragraph to dark ink
   (#0b1026 / #46546e), which made them disappear over the photographic hero.
   This layer changes color only: layout, typography, animation, navigation,
   backgrounds, buttons, and responsive geometry remain untouched. */
html body .main-hero-wrap.main-hero-wrap #hero-title,
html body .main-hero-wrap.main-hero-wrap .hero-copy.hero-copy h1,
html body .main-hero-wrap.main-hero-wrap #hero-title .hero-title-line,
html body .main-hero-wrap.main-hero-wrap .hero-copy.hero-copy h1 .hero-title-line {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow:
    0 2px 18px rgba(2, 8, 23, .72),
    0 1px 2px rgba(2, 8, 23, .92) !important;
}

html body .main-hero-wrap.main-hero-wrap #hero-title .hero-title-accent,
html body .main-hero-wrap.main-hero-wrap .hero-copy.hero-copy h1 .hero-title-accent {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(90deg, #8b6cff 0%, #4f8df7 50%, #39d4df 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  filter: drop-shadow(0 2px 10px rgba(2, 8, 23, .42)) !important;
}

html body .main-hero-wrap.main-hero-wrap #hero-description,
html body .main-hero-wrap.main-hero-wrap .hero-copy.hero-copy > p,
html body .main-hero-wrap.main-hero-wrap .hero-copy.hero-copy p#hero-description {
  color: #eef4ff !important;
  -webkit-text-fill-color: #eef4ff !important;
  opacity: 1 !important;
  text-shadow:
    0 2px 12px rgba(2, 8, 23, .72),
    0 1px 2px rgba(2, 8, 23, .88) !important;
}




/* v100-hero-rhythm-and-tool-pill-contrast
   Final ownership for the spacing between hero description, tool pills and CTAs,
   plus stable high-contrast labels inside the four tool pills.
   This does not alter the navigation, hero background, capability bar, animation,
   section boundaries or editor behavior. */
html body .main-hero-wrap.main-hero-wrap .hero-copy.hero-copy #hero-description {
  margin: clamp(18px, 1.35vw, 24px) 0 0 !important;
}

html body .main-hero-wrap.main-hero-wrap .hero-copy.hero-copy .hero-platform-chips.hero-tool-pills {
  gap: 10px !important;
  margin: clamp(24px, 1.65vw, 30px) 0 0 !important;
}

html body .main-hero-wrap.main-hero-wrap .hero-copy.hero-copy .hero-actions.hero-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: clamp(40px, 2.8vw, 48px) 0 0 !important;
  padding: 0 !important;
}

html body .main-hero-wrap.main-hero-wrap .hero-copy.hero-copy .hero-actions.hero-actions .btn {
  margin: 0 !important;
  min-height: 54px !important;
}

html body .main-hero-wrap.main-hero-wrap .hero-copy.hero-copy .hero-actions.hero-actions #hero-browse-templates {
  min-width: clamp(290px, 20vw, 360px) !important;
}

html body .main-hero-wrap.main-hero-wrap .hero-copy.hero-copy .hero-actions.hero-actions .hero-secondary-cta {
  min-width: clamp(220px, 15vw, 250px) !important;
}

html body .main-hero-wrap.main-hero-wrap .hero-tool-pills.hero-tool-pills > .hero-tool-pill.hero-tool-pill,
html body .main-hero-wrap.main-hero-wrap .hero-tool-pills.hero-tool-pills > .hero-tool-pill.hero-tool-pill > span:last-child {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .78) !important;
  mix-blend-mode: normal !important;
}

html body .main-hero-wrap.main-hero-wrap .hero-tool-pills.hero-tool-pills > .hero-tool-pill.hero-tool-pill {
  border-color: rgba(255, 255, 255, .38) !important;
  background: rgba(7, 17, 38, .66) !important;
  box-shadow:
    0 8px 22px rgba(2, 8, 23, .20),
    inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
  backdrop-filter: blur(12px) saturate(1.08) !important;
}

html body .main-hero-wrap.main-hero-wrap .hero-tool-pills.hero-tool-pills .hero-tool-icon,
html body .main-hero-wrap.main-hero-wrap .hero-tool-pills.hero-tool-pills .hero-tool-icon svg {
  color: #79e6ff !important;
  -webkit-text-fill-color: #79e6ff !important;
  opacity: 1 !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .56)) !important;
}

html body .main-hero-wrap.main-hero-wrap .hero-tool-pills.hero-tool-pills .hero-tool-icon {
  background: rgba(86, 110, 255, .18) !important;
}

@media (max-width: 768px) {
  html body .main-hero-wrap.main-hero-wrap .hero-copy.hero-copy #hero-description {
    margin-top: 14px !important;
  }

  html body .main-hero-wrap.main-hero-wrap .hero-copy.hero-copy .hero-platform-chips.hero-tool-pills {
    gap: 8px !important;
    margin-top: 18px !important;
  }

  html body .main-hero-wrap.main-hero-wrap .hero-copy.hero-copy .hero-actions.hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 30px !important;
  }

  html body .main-hero-wrap.main-hero-wrap .hero-copy.hero-copy .hero-actions.hero-actions #hero-browse-templates,
  html body .main-hero-wrap.main-hero-wrap .hero-copy.hero-copy .hero-actions.hero-actions .hero-secondary-cta {
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 420px) {
  html body .main-hero-wrap.main-hero-wrap .hero-copy.hero-copy .hero-actions.hero-actions {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-top: 26px !important;
  }
}

/* v114: responsive hero media substrate.
   One renderer owns public output and editor previews for images, GIFs, and
   muted looping video. Smart seamless keeps the complete source undistorted,
   puts a cover continuation behind it, and feathers only the exposed source
   edge. The uploaded file is never resized or rewritten. */
html body .main-hero-wrap .hero-background-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  isolation: isolate !important;
  contain: paint !important;
  pointer-events: none !important;
}

html body .main-hero-wrap .hero-background-media::before {
  content: none !important;
  display: none !important;
}

html body .main-hero-wrap .hero-background-media__layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #071126 !important;
  pointer-events: none !important;
}

html body .main-hero-wrap .hero-background-media__layer--mobile {
  display: none !important;
}

html body .main-hero-wrap .hero-background-media__asset,
html body .main-hero-wrap .hero-background-media__fill,
html body .main-hero-wrap .hero-background-media__foreground,
html body .main-hero-wrap .hero-background-media__image {
  position: absolute !important;
  display: block !important;
  max-width: none !important;
  min-width: 0 !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-position: 50% 50% !important;
  transform-origin: center !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* Safe first paint before natural media dimensions are available. */
html body .main-hero-wrap .hero-background-media__fill {
  z-index: 0 !important;
  inset: -4% !important;
  width: 108% !important;
  height: 108% !important;
  object-fit: cover !important;
  opacity: 0 !important;
  filter: blur(34px) saturate(1.05) brightness(.74) !important;
  transform: scale(1.04) translateZ(0) !important;
  transition: opacity 180ms ease !important;
}

html body .main-hero-wrap .hero-background-media__foreground,
html body .main-hero-wrap .hero-background-media__image {
  z-index: 1 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
  transform: translateZ(0) !important;
  transition: left 160ms ease, top 160ms ease, width 160ms ease, height 160ms ease !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

html body .main-hero-wrap .hero-background-media__layer.is-fit-cover:not(.is-geometry-ready) .hero-background-media__foreground,
html body .main-hero-wrap .hero-background-media__layer.is-fit-cover:not(.is-geometry-ready) .hero-background-media__image {
  object-fit: cover !important;
}

/* Hide the contain boundary during the short first-paint interval before the
   natural dimensions are known. JavaScript then replaces this with the exact
   directional mask for the real free edge. */
html body .main-hero-wrap .hero-background-media__layer--desktop.is-fit-smart:not(.is-geometry-ready) .hero-background-media__foreground,
html body .main-hero-wrap .hero-background-media__layer--desktop.is-fit-smart:not(.is-geometry-ready) .hero-background-media__image {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%) !important;
}

html body .main-hero-wrap .hero-background-media__layer--mobile.is-fit-smart:not(.is-geometry-ready) .hero-background-media__foreground,
html body .main-hero-wrap .hero-background-media__layer--mobile.is-fit-smart:not(.is-geometry-ready) .hero-background-media__image {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%) !important;
}

/* Once JavaScript knows the natural dimensions, it writes exact undistorted
   rectangles. object-fit:fill is safe here because each rectangle already has
   the source aspect ratio. */
html body .main-hero-wrap .hero-background-media__layer.is-geometry-ready .hero-background-media__fill {
  inset: auto !important;
  left: var(--hero-fill-left, -4%) !important;
  top: var(--hero-fill-top, -4%) !important;
  width: var(--hero-fill-width, 108%) !important;
  height: var(--hero-fill-height, 108%) !important;
  object-fit: fill !important;
}

html body .main-hero-wrap .hero-background-media__layer.is-geometry-ready .hero-background-media__foreground,
html body .main-hero-wrap .hero-background-media__layer.is-geometry-ready .hero-background-media__image {
  inset: auto !important;
  left: var(--hero-media-left, 0px) !important;
  top: var(--hero-media-top, 0px) !important;
  width: var(--hero-media-width, 100%) !important;
  height: var(--hero-media-height, 100%) !important;
  object-fit: fill !important;
}

html body .main-hero-wrap .hero-background-media__layer.is-fit-smart .hero-background-media__fill {
  opacity: 1 !important;
}

/* Directional feathering: do not fade an edge that already touches the frame. */
html body .main-hero-wrap .hero-background-media__layer.is-fit-smart.is-geometry-ready[data-feather-axis="x"][data-feather-side="start"] .hero-background-media__foreground,
html body .main-hero-wrap .hero-background-media__layer.is-fit-smart.is-geometry-ready[data-feather-axis="x"][data-feather-side="start"] .hero-background-media__image {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 1.5%, rgba(0,0,0,.78) 5%, #000 10%, #000 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 1.5%, rgba(0,0,0,.78) 5%, #000 10%, #000 100%) !important;
}

html body .main-hero-wrap .hero-background-media__layer.is-fit-smart.is-geometry-ready[data-feather-axis="x"][data-feather-side="end"] .hero-background-media__foreground,
html body .main-hero-wrap .hero-background-media__layer.is-fit-smart.is-geometry-ready[data-feather-axis="x"][data-feather-side="end"] .hero-background-media__image {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 90%, rgba(0,0,0,.78) 95%, rgba(0,0,0,.22) 98.5%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, #000 0%, #000 90%, rgba(0,0,0,.78) 95%, rgba(0,0,0,.22) 98.5%, transparent 100%) !important;
}

html body .main-hero-wrap .hero-background-media__layer.is-fit-smart.is-geometry-ready[data-feather-axis="x"][data-feather-side="both"] .hero-background-media__foreground,
html body .main-hero-wrap .hero-background-media__layer.is-fit-smart.is-geometry-ready[data-feather-axis="x"][data-feather-side="both"] .hero-background-media__image {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 1.5%, rgba(0,0,0,.78) 5%, #000 10%, #000 90%, rgba(0,0,0,.78) 95%, rgba(0,0,0,.22) 98.5%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 1.5%, rgba(0,0,0,.78) 5%, #000 10%, #000 90%, rgba(0,0,0,.78) 95%, rgba(0,0,0,.22) 98.5%, transparent 100%) !important;
}

html body .main-hero-wrap .hero-background-media__layer.is-fit-smart.is-geometry-ready[data-feather-axis="y"][data-feather-side="start"] .hero-background-media__foreground,
html body .main-hero-wrap .hero-background-media__layer.is-fit-smart.is-geometry-ready[data-feather-axis="y"][data-feather-side="start"] .hero-background-media__image {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.22) 1.5%, rgba(0,0,0,.78) 5%, #000 10%, #000 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.22) 1.5%, rgba(0,0,0,.78) 5%, #000 10%, #000 100%) !important;
}

html body .main-hero-wrap .hero-background-media__layer.is-fit-smart.is-geometry-ready[data-feather-axis="y"][data-feather-side="end"] .hero-background-media__foreground,
html body .main-hero-wrap .hero-background-media__layer.is-fit-smart.is-geometry-ready[data-feather-axis="y"][data-feather-side="end"] .hero-background-media__image {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 90%, rgba(0,0,0,.78) 95%, rgba(0,0,0,.22) 98.5%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, #000 0%, #000 90%, rgba(0,0,0,.78) 95%, rgba(0,0,0,.22) 98.5%, transparent 100%) !important;
}

html body .main-hero-wrap .hero-background-media__layer.is-fit-smart.is-geometry-ready[data-feather-axis="y"][data-feather-side="both"] .hero-background-media__foreground,
html body .main-hero-wrap .hero-background-media__layer.is-fit-smart.is-geometry-ready[data-feather-axis="y"][data-feather-side="both"] .hero-background-media__image {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.22) 1.5%, rgba(0,0,0,.78) 5%, #000 10%, #000 90%, rgba(0,0,0,.78) 95%, rgba(0,0,0,.22) 98.5%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.22) 1.5%, rgba(0,0,0,.78) 5%, #000 10%, #000 90%, rgba(0,0,0,.78) 95%, rgba(0,0,0,.22) 98.5%, transparent 100%) !important;
}

@media (max-width: 768px) {
  html body .main-hero-wrap .hero-background-media__layer--desktop {
    display: none !important;
  }

  html body .main-hero-wrap .hero-background-media__layer--mobile {
    display: block !important;
  }
}

/* Editor preview: same DOM pair, same geometry, same directional feather. */
.hero-frame-preview {
  position: relative !important;
  isolation: isolate !important;
  width: 100% !important;
  min-height: 180px !important;
  margin: 12px 0 8px !important;
  overflow: hidden !important;
  contain: paint !important;
  border: 1px solid rgba(17, 24, 39, .16) !important;
  border-radius: 14px !important;
  background: #071126 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.hero-frame-preview--mobile {
  width: min(320px, 100%) !important;
  min-height: 360px !important;
}

.hero-frame-preview::after {
  content: attr(data-badge);
  position: absolute;
  z-index: 4;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 999px;
  background: rgba(3,9,23,.64);
  color: #fff;
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: .01em;
  box-shadow: 0 6px 18px rgba(2,8,23,.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.hero-frame-preview__asset,
.hero-frame-preview__fill,
.hero-frame-preview__foreground {
  position: absolute !important;
  display: block !important;
  max-width: none !important;
  min-width: 0 !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-position: 50% 50% !important;
  pointer-events: none !important;
  user-select: none !important;
}

.hero-frame-preview__fill {
  z-index: 0 !important;
  inset: -4% !important;
  width: 108% !important;
  height: 108% !important;
  object-fit: cover !important;
  opacity: 0 !important;
  filter: blur(28px) saturate(1.05) brightness(.74) !important;
  transform: scale(1.04) translateZ(0) !important;
  transition: opacity 180ms ease !important;
}

.hero-frame-preview__foreground {
  z-index: 1 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
  transform: translateZ(0) !important;
  transition: left 160ms ease, top 160ms ease, width 160ms ease, height 160ms ease !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.hero-frame-preview.is-fit-cover:not(.is-geometry-ready) .hero-frame-preview__foreground {
  object-fit: cover !important;
}

.hero-frame-preview--desktop.is-fit-smart:not(.is-geometry-ready) .hero-frame-preview__foreground {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%) !important;
}

.hero-frame-preview--mobile.is-fit-smart:not(.is-geometry-ready) .hero-frame-preview__foreground {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%) !important;
}

.hero-frame-preview.is-geometry-ready .hero-frame-preview__fill {
  inset: auto !important;
  left: var(--hero-fill-left, -4%) !important;
  top: var(--hero-fill-top, -4%) !important;
  width: var(--hero-fill-width, 108%) !important;
  height: var(--hero-fill-height, 108%) !important;
  object-fit: fill !important;
}

.hero-frame-preview.is-geometry-ready .hero-frame-preview__foreground {
  inset: auto !important;
  left: var(--hero-media-left, 0px) !important;
  top: var(--hero-media-top, 0px) !important;
  width: var(--hero-media-width, 100%) !important;
  height: var(--hero-media-height, 100%) !important;
  object-fit: fill !important;
}

.hero-frame-preview.is-fit-smart .hero-frame-preview__fill {
  opacity: 1 !important;
}

.hero-frame-preview.is-fit-smart.is-geometry-ready[data-feather-axis="x"][data-feather-side="start"] .hero-frame-preview__foreground {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 1.5%, rgba(0,0,0,.78) 5%, #000 10%, #000 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 1.5%, rgba(0,0,0,.78) 5%, #000 10%, #000 100%) !important;
}

.hero-frame-preview.is-fit-smart.is-geometry-ready[data-feather-axis="x"][data-feather-side="end"] .hero-frame-preview__foreground {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 90%, rgba(0,0,0,.78) 95%, rgba(0,0,0,.22) 98.5%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, #000 0%, #000 90%, rgba(0,0,0,.78) 95%, rgba(0,0,0,.22) 98.5%, transparent 100%) !important;
}

.hero-frame-preview.is-fit-smart.is-geometry-ready[data-feather-axis="x"][data-feather-side="both"] .hero-frame-preview__foreground {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 1.5%, rgba(0,0,0,.78) 5%, #000 10%, #000 90%, rgba(0,0,0,.78) 95%, rgba(0,0,0,.22) 98.5%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 1.5%, rgba(0,0,0,.78) 5%, #000 10%, #000 90%, rgba(0,0,0,.78) 95%, rgba(0,0,0,.22) 98.5%, transparent 100%) !important;
}

.hero-frame-preview.is-fit-smart.is-geometry-ready[data-feather-axis="y"][data-feather-side="start"] .hero-frame-preview__foreground {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.22) 1.5%, rgba(0,0,0,.78) 5%, #000 10%, #000 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.22) 1.5%, rgba(0,0,0,.78) 5%, #000 10%, #000 100%) !important;
}

.hero-frame-preview.is-fit-smart.is-geometry-ready[data-feather-axis="y"][data-feather-side="end"] .hero-frame-preview__foreground {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 90%, rgba(0,0,0,.78) 95%, rgba(0,0,0,.22) 98.5%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, #000 0%, #000 90%, rgba(0,0,0,.78) 95%, rgba(0,0,0,.22) 98.5%, transparent 100%) !important;
}

.hero-frame-preview.is-fit-smart.is-geometry-ready[data-feather-axis="y"][data-feather-side="both"] .hero-frame-preview__foreground {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.22) 1.5%, rgba(0,0,0,.78) 5%, #000 10%, #000 90%, rgba(0,0,0,.78) 95%, rgba(0,0,0,.22) 98.5%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.22) 1.5%, rgba(0,0,0,.78) 5%, #000 10%, #000 90%, rgba(0,0,0,.78) 95%, rgba(0,0,0,.22) 98.5%, transparent 100%) !important;
}

.hero-frame-preview__meta {
  margin: 0 0 12px !important;
  color: #526078 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

@media (max-width: 720px) {
  .hero-frame-preview {
    min-height: 150px !important;
  }

  .hero-frame-preview--mobile {
    min-height: 340px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .main-hero-wrap .hero-background-media__asset,
  .hero-frame-preview__asset,
  .hero-frame-preview__fill,
  .hero-frame-preview__foreground {
    transition: none !important;
  }
}