@font-face {
  font-family: sohne-var;
  src: url("/fonts/Sohne.woff2") format("woff2-variations"),
       url("/fonts/Sohne.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
}
/* v065 US-source import + locale banner suppression */
.SiteHeader{display:none!important;}
.NotificationCenter,.ThirdPartyFrame,.UniversalChatCtaButton,.UniversalChatCtaButtonLarge,.UniversalChatCtaCard__wrapper,[data-universal-chat-iframe],[data-universal-chat-unseen-messages-count-div]{display:none!important;visibility:hidden!important;}
body.mw-source-import-shell{margin:0;-webkit-font-smoothing:antialiased;}
body.mw-source-import-shell img{max-width:100%;}
body.mw-source-import-shell a[href="/under-construction/"]{cursor:pointer;}
.mw-v065-locale-removed{display:none!important;}
.mw-source-import-shell [style*="opacity: 0"], .mw-source-import-shell [style*="opacity:0"] { opacity: 1 !important; }
.mw-source-import-shell [style*="visibility: hidden"] { visibility: visible !important; }
.mw-source-import-shell .hero-sticky-subnav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2147482990 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-14px) !important;
  pointer-events: none !important;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}
.mw-source-import-shell.mw-sticky-subnav-active .hero-sticky-subnav {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
.mw-source-import-shell .hero-sticky-subnav .hero-subnav {
  background: #fff !important;
  border-bottom: 1px solid #d8e2ec !important;
  box-shadow: 0 8px 24px rgba(10, 37, 64, .08) !important;
}
.mw-source-import-shell.mw-sticky-subnav-active .mw-core-header {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-100%) !important;
}
.mw-source-import-shell.mw-sticky-subnav-active .product-hero-subnav > .hero-static-subnav,
.mw-source-import-shell.mw-sticky-subnav-active .product-hero-subnav > .hero-mobile-static-subnav {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@media (max-width: 920px) {
  .mw-source-import-shell .hero-sticky-subnav { top: 0 !important; }
}


/* Tighter vertical padding on the 4 value-prop cards under the logo strip. */
.mw-source-import-shell .section:has(.mw-valueprop) > .section-container {
  --section-container-pbs: var(--hds-space-core-300, 24px);
  --section-container-pbe: var(--hds-space-core-300, 24px);
  --section-container-pbs-tb: var(--hds-space-core-400, 32px);
  --section-container-pbe-tb: var(--hds-space-core-400, 32px);
  --section-container-pbs-dt: var(--hds-space-core-400, 32px);
  --section-container-pbe-dt: var(--hds-space-core-400, 32px);
}
/* Value-prop cards (Connect) reuse Stripe's gradient-border-card component. The reveal
   on hover is pure CSS; the gradient only follows the pointer once
   --gradient-border-card-mouse-x/y are set, which the prototype script in index.html does. */
.mw-source-import-shell .mw-valueprop {
  --gradient-border-card-bg: #fff;
  display: block;
  height: 100%;
  text-decoration: none;
}
/* Resting edge: the plain variant ships no border-layer background, so the ring is
   invisible until hover. Stripe's expandable variant paints it; do the same here. */
.mw-source-import-shell .mw-valueprop .gradient-border-card__border {
  background: var(--hds-color-surface-border-quiet, #e3e8ee);
}
.mw-source-import-shell .mw-valueprop .gradient-border-card__inner { height: 100%; }
.mw-source-import-shell .mw-valueprop .gradient-border-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hds-space-core-200, 16px);
  padding: var(--hds-space-core-300, 24px);
}
.mw-source-import-shell .mw-valueprop__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--hds-color-surface-border-quiet, #e3e8ee);
  border-radius: 10px;
  color: #635bff;
}
.mw-source-import-shell .mw-valueprop__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: auto;
  color: #635bff;
}
/* The captured panels rely on an HDS surface token that resolves transparent here, so the
   hero shows through the open mobile subnav. Pin them to white. */
.mw-source-import-shell .hero-mobile-static-subnav__content-container,
.mw-source-import-shell .hero-subnav--sticky .hero-subnav__content-container {
  background: #fff !important;
}

/* Jump targets clear the sticky subnav. */
.mw-source-import-shell section[id] { scroll-margin-block-start: 88px; }

/* Key features grid: Stripe divides the cells with hairline rules, so the grid
   gaps are zeroed on the container and the spacing comes from cell padding. */
.mw-source-import-shell .feature-lists__column {
  --mw-feature-rule: 1px solid var(--hds-color-surface-border-quiet, #e3e8ee);
  --mw-feature-bleed: var(--section-container-padding-inline, var(--hds-space-layout-content-margin, 16px));
  border-block-start: var(--mw-feature-rule);
  padding-block: var(--hds-space-core-400, 32px);
  /* Bleed out of the section padding so the rules meet the container's side rails. */
  margin-inline: calc(-1 * var(--mw-feature-bleed));
  padding-inline: var(--mw-feature-bleed);
}
.mw-source-import-shell .feature-lists__column:last-child {
  border-block-end: var(--mw-feature-rule);
}
@media (min-width: 640px) {
  /* Two per row, so the closing rule spans both cells of the final row. */
  .mw-source-import-shell .feature-lists__column:nth-last-child(-n+2) {
    border-block-end: var(--mw-feature-rule);
  }
  /* Only the outer edge of each cell bleeds; the inner edges meet at the centre rule. */
  .mw-source-import-shell .feature-lists__column:nth-child(odd) {
    border-inline-end: var(--mw-feature-rule);
    margin-inline-end: 0;
    padding-inline-end: var(--hds-space-core-400, 32px);
  }
  .mw-source-import-shell .feature-lists__column:nth-child(even) {
    margin-inline-start: 0;
    padding-inline-start: var(--hds-space-core-400, 32px);
  }
}

/* Footer brand column: wordmark sits in the first grid column, ahead of the link groups. */
.mw-source-import-shell .footer-brand-block {
  padding-inline-end: 0 !important;
}
.mw-source-import-shell .footer-brand-block__logo {
  display: inline-block !important;
  width: fit-content !important;
}
.mw-source-import-shell .footer-brand-block__logo img {
  display: block !important;
  width: 84px !important;
  height: auto !important;
}
.mw-source-import-shell .footer-brand-block .locale-switcher__button {
  margin-inline: 0 !important;
  margin-block: var(--hds-space-core-150, 12px) 0 !important;
  padding-inline: 0 !important;
  justify-content: flex-start !important;
  width: fit-content !important;
}

/* Wave lives inside the product graphic box only — not behind the hero copy. */
.mw-source-import-shell .billing-hero__anim-container {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-start-start-radius: 8px;
  border-start-end-radius: 8px;
  /* Keep the product UI off the top edge of the wave background. */
  padding-block-start: 40px;
}
@media (min-width: 940px) {
  .mw-source-import-shell .billing-hero__anim-container {
    padding-block-start: 56px;
  }
}
.mw-source-import-shell .billing-hero__desktop-anim,
.mw-source-import-shell .billing-hero__mobile-anim {
  position: relative;
  z-index: 1;
}
.mw-source-import-shell .billing-hero__wave {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.mw-source-import-shell .billing-hero__wave .hero-wave-animation__layout,
.mw-source-import-shell .billing-hero__wave .hero-wave-animation__contents {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.mw-source-import-shell .billing-hero__wave .hero-wave-animation__canvas {
  display: none !important;
}
.mw-source-import-shell .billing-hero__wave .hero-wave-animation__static {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 100% !important;
  height: 100% !important;
}
.mw-source-import-shell .billing-hero__wave .hero-wave-animation__static picture,
.mw-source-import-shell .billing-hero__wave .hero-wave-animation__static img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}
/* Desktop-only looping wave video; mobile keeps the static PNG. */
.mw-source-import-shell .billing-hero__wave .hero-wave-animation__video {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
@media (min-width: 940px) {
  .mw-source-import-shell .billing-hero__wave .hero-wave-animation__video {
    display: block;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mw-source-import-shell .billing-hero__wave .hero-wave-animation__video {
    display: none !important;
  }
}

/* "Quickly launch new pricing" section — brand wave PNGs hosted locally. */
.mw-source-import-shell .mw-launch__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding: 44px 40px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #6d3df0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mw-source-import-shell .mw-launch__panel--warm {
  background-image: url("./images/launch/UBB_brand_wave_1.png");
}
.mw-source-import-shell .mw-launch__panel--cool {
  background-image: url("./images/launch/UBB_brand_wave_2.png");
}
.mw-source-import-shell .mw-launch__card {
  width: 100%;
  max-width: 340px;
  padding: 18px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(16, 24, 40, .18);
  color: #0a2540;
  font: 400 12px/1.45 sohne-var, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.mw-source-import-shell .mw-launch__card-title { font-size: 15px; font-weight: 600; }
.mw-source-import-shell .mw-launch__card-title--icon { display: flex; align-items: center; gap: 8px; }
.mw-source-import-shell .mw-launch__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f0ecff;
  color: #635bff;
}
.mw-source-import-shell .mw-launch__card-meta { margin-top: 4px; color: #697386; font-size: 10px; }
.mw-source-import-shell .mw-launch__rate,
.mw-source-import-shell .mw-launch__plan {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-block: 12px;
  border-block: 1px solid #eaeef3;
}
.mw-source-import-shell .mw-launch__plan { border-block-end: 0; }
.mw-source-import-shell .mw-launch__rate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid #eaeef3;
  border-radius: 6px;
  color: #697386;
}
.mw-source-import-shell .mw-launch__rate-body,
.mw-source-import-shell .mw-launch__plan-body { flex: 1; min-width: 0; }
.mw-source-import-shell .mw-launch__rate-body b,
.mw-source-import-shell .mw-launch__plan-body b { display: block; font-weight: 500; }
.mw-source-import-shell .mw-launch__rate-body i,
.mw-source-import-shell .mw-launch__plan-body i { display: block; color: #8792a2; font-size: 10px; font-style: normal; }
.mw-source-import-shell .mw-launch__rate-price { color: #697386; font-size: 10px; white-space: nowrap; }
.mw-source-import-shell .mw-launch__plan-price { font-weight: 500; white-space: nowrap; }
.mw-source-import-shell .mw-launch__field { margin-top: 12px; }
.mw-source-import-shell .mw-launch__label { margin-bottom: 5px; color: #697386; font-size: 10px; }
.mw-source-import-shell .mw-launch__select,
.mw-source-import-shell .mw-launch__input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border: 1px solid #e3e8ee;
  border-radius: 6px;
  box-shadow: 0 1px 1px rgba(16, 24, 40, .04);
}
.mw-source-import-shell .mw-launch__chevron { color: #8792a2; }
.mw-source-import-shell .mw-launch__segmented {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  border: 1px solid #e3e8ee;
  border-radius: 6px;
  overflow: hidden;
  text-align: center;
}
.mw-source-import-shell .mw-launch__segment {
  padding: 7px 6px;
  background: #f7f9fc;
  border-inline-start: 1px solid #e3e8ee;
  color: #697386;
}
.mw-source-import-shell .mw-launch__segment:first-child { border-inline-start: 0; }
.mw-source-import-shell .mw-launch__segment--on { background: #fff; color: #0a2540; }
.mw-source-import-shell .mw-launch__segment--accent { color: #635bff; }
.mw-source-import-shell .mw-launch__table { margin-top: 12px; }
.mw-source-import-shell .mw-launch__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr .9fr;
  gap: 8px;
  padding-block: 8px;
  border-block-start: 1px solid #eaeef3;
}
.mw-source-import-shell .mw-launch__row--head { border-block-start: 0; color: #8792a2; font-size: 10px; }
.mw-source-import-shell .mw-launch__row > span:last-child { text-align: end; white-space: nowrap; }
.mw-source-import-shell .mw-launch__note h3 { margin-bottom: 6px; }
@media (max-width: 940px) {
  .mw-source-import-shell .mw-launch__panel { min-height: 340px; padding: 28px 20px; }
}

/* "Optimize pricing" copy row + Replicate spotlight card. */
.mw-source-import-shell .mw-optimize__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hds-space-core-150, 12px);
}
/* Matches the reference, where this paragraph wraps short of its column. 940px is the
   breakpoint at which the columns primitive goes to its desktop track count. */
@media (min-width: 940px) {
  .mw-source-import-shell #mw-scale .mw-optimize__item:first-child p { width: 80%; }
}
.mw-source-import-shell .mw-spotlight {
  display: grid;
  /* Left copy ~58% / right art ~42% — right a bit larger than prior 325px track */
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr);
  align-items: stretch;
  min-height: 0;
  max-height: 260px;
  background: var(--hds-color-surface-bg-subdued, #f6f9fc);
  border: 1px solid var(--hds-color-surface-border-quiet, #e6e6e6);
  /* HDS/Stripe card radius (was 12px — too round vs live) */
  border-radius: var(--hds-space-core-radius-md, 6px);
  overflow: hidden;
}
.mw-source-import-shell .mw-spotlight__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  padding: 24px 28px;
  min-height: 0;
  box-sizing: border-box;
}
.mw-source-import-shell .mw-spotlight__logo {
  display: inline-flex;
  align-items: center;
  gap: 2px; /* icon = “r”, tight to “eplicate” like live wordmark */
  margin: 0;
  color: #0a2540;
  font: 500 15px/1 sohne-var, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: -.01em;
}
.mw-source-import-shell .mw-spotlight__logo-mark {
  flex: 0 0 auto;
  display: block;
  width: 14px;
  height: 14px;
  color: #0a2540;
}
.mw-source-import-shell .mw-spotlight__logo-text {
  font: inherit;
  font-weight: 500;
  font-variation-settings: "wght" 500;
  text-transform: none;
}
.mw-source-import-shell .mw-spotlight__quote {
  margin: 0;
  max-width: 30rem; /* ~3 lines at desktop like live */
  font: 300 1.125rem/1.3 sohne-var, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.mw-source-import-shell .mw-spotlight__quote-lead {
  color: #0a2540;
  font-weight: 500;
  font-variation-settings: "wght" 500;
}
.mw-source-import-shell .mw-spotlight__quote-copy {
  color: var(--hds-color-heading-subdued, #425466);
  font-weight: 300;
  font-variation-settings: "wght" 300;
}
.mw-source-import-shell .mw-spotlight__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #635bff;
  font-weight: 500;
  text-decoration: none;
}
/* The artwork bleeds to the card edges, so it is sized by the grid track, not its own box. */
.mw-source-import-shell .mw-spotlight__media {
  width: 100%;
  height: 100%;
  max-height: 260px;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (min-width: 940px) {
  .mw-source-import-shell .mw-spotlight__body {
    padding: 26px 32px;
  }
  .mw-source-import-shell .mw-spotlight__quote {
    font-size: 1.25rem;
    line-height: 1.3;
  }
}
@media (min-width: 1180px) {
  .mw-source-import-shell .mw-spotlight {
    max-height: 280px;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.9fr);
  }
  .mw-source-import-shell .mw-spotlight__media {
    max-height: 280px;
  }
  .mw-source-import-shell .mw-spotlight__quote {
    font-size: 1.3125rem;
    line-height: 1.28;
    max-width: 32rem;
  }
}
@media (max-width: 940px) {
  .mw-source-import-shell .mw-spotlight {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
  }
  .mw-source-import-shell .mw-spotlight__body {
    padding: 20px 18px;
  }
  .mw-source-import-shell .mw-spotlight__quote {
    font-size: 1.125rem;
    max-width: none;
  }
  .mw-source-import-shell .mw-spotlight__media {
    height: 160px;
    max-height: 160px;
  }
}

/* "Protect margins" accordion. <details name> gives exclusive open/close for free, and
   :has() swaps the chart in the adjacent column, so the whole thing stays script-free. */
.mw-source-import-shell .mw-usage {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1fr);
  gap: var(--hds-space-core-500, 40px);
  align-items: center;
}
.mw-source-import-shell .mw-usage__item {
  padding-block: var(--hds-space-core-200, 16px);
  border-block-end: 1px solid var(--hds-color-surface-border-quiet, #e3e8ee);
}
.mw-source-import-shell .mw-usage__summary { cursor: pointer; list-style: none; }
.mw-source-import-shell .mw-usage__summary::-webkit-details-marker { display: none; }
.mw-source-import-shell .mw-usage__summary::marker { content: ""; }
.mw-source-import-shell .mw-usage__item[open] .mw-usage__summary { margin-block-end: 8px; }
.mw-source-import-shell .mw-usage__panel {
  display: grid;
  place-items: center;
  width: min(100%, 560px);
  /* Landscape rectangle like live — was aspect-ratio: 1 (square) */
  aspect-ratio: 3 / 2;
  min-height: 0;
  padding: 28px 32px;
  margin-inline: auto;
  border-radius: 8px;
  overflow: hidden;
  background-color: #7c3aed;
  background-image: url("./images/protect/UBB_stepper_background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mw-source-import-shell .mw-usage__slide {
  grid-area: 1 / 1;
  width: 100%;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.mw-source-import-shell .mw-usage:has(.mw-usage__item:nth-of-type(1)[open]) .mw-usage__slide:nth-of-type(1),
.mw-source-import-shell .mw-usage:has(.mw-usage__item:nth-of-type(2)[open]) .mw-usage__slide:nth-of-type(2),
.mw-source-import-shell .mw-usage:has(.mw-usage__item:nth-of-type(3)[open]) .mw-usage__slide:nth-of-type(3),
.mw-source-import-shell .mw-usage:not(:has(.mw-usage__item[open])) .mw-usage__slide:nth-of-type(1) {
  opacity: 1;
  visibility: visible;
}
/* Grow bars from 0 → --h whenever the matching accordion card is shown. */
.mw-source-import-shell .mw-usage:has(.mw-usage__item:nth-of-type(1)[open]) .mw-usage__slide:nth-of-type(1) .mw-usage__bar,
.mw-source-import-shell .mw-usage:has(.mw-usage__item:nth-of-type(2)[open]) .mw-usage__slide:nth-of-type(2) .mw-usage__bar,
.mw-source-import-shell .mw-usage:has(.mw-usage__item:nth-of-type(3)[open]) .mw-usage__slide:nth-of-type(3) .mw-usage__bar,
.mw-source-import-shell .mw-usage:not(:has(.mw-usage__item[open])) .mw-usage__slide:nth-of-type(1) .mw-usage__bar {
  height: var(--h, 0%);
}
.mw-source-import-shell .mw-usage__card {
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  padding: 20px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(16, 24, 40, .16);
  color: #0a2540;
  font: 400 13px/1.45 sohne-var, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.mw-source-import-shell .mw-usage__card-title { font-size: 15px; font-weight: 600; }
.mw-source-import-shell .mw-usage__card-meta { margin-top: 2px; color: #8792a2; font-size: 11px; }
.mw-source-import-shell .mw-usage__stats { display: flex; gap: 36px; margin-top: 18px; }
.mw-source-import-shell .mw-usage__stats i { display: block; color: #697386; font-size: 11px; font-style: normal; }
.mw-source-import-shell .mw-usage__stats b { display: block; margin-top: 2px; font-size: 16px; font-weight: 500; }
.mw-source-import-shell .mw-usage__chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 120px;
  margin-top: 18px;
}
.mw-source-import-shell .mw-usage__bar {
  flex: 1;
  height: 0;
  background: #635bff;
  border-radius: 2px;
  transform-origin: bottom;
  transition: height .55s cubic-bezier(.22, 1, .36, 1);
}
.mw-source-import-shell .mw-usage__bar:nth-child(1) { transition-delay: 0ms; }
.mw-source-import-shell .mw-usage__bar:nth-child(2) { transition-delay: 35ms; }
.mw-source-import-shell .mw-usage__bar:nth-child(3) { transition-delay: 70ms; }
.mw-source-import-shell .mw-usage__bar:nth-child(4) { transition-delay: 105ms; }
.mw-source-import-shell .mw-usage__bar:nth-child(5) { transition-delay: 140ms; }
.mw-source-import-shell .mw-usage__bar:nth-child(6) { transition-delay: 175ms; }
.mw-source-import-shell .mw-usage__bar:nth-child(7) { transition-delay: 210ms; }
.mw-source-import-shell .mw-usage__bar:nth-child(8) { transition-delay: 245ms; }
.mw-source-import-shell .mw-usage__bar:nth-child(9) { transition-delay: 280ms; }
.mw-source-import-shell .mw-usage__bar:nth-child(10) { transition-delay: 315ms; }
.mw-source-import-shell .mw-usage__bar:nth-child(11) { transition-delay: 350ms; }
.mw-source-import-shell .mw-usage__bar:nth-child(12) { transition-delay: 385ms; }
.mw-source-import-shell .mw-usage__bar--flagged { background: #ff5c7c; }
@media (prefers-reduced-motion: reduce) {
  .mw-source-import-shell .mw-usage__bar { transition: none; }
}
@media (max-width: 940px) {
  .mw-source-import-shell .mw-usage { grid-template-columns: minmax(0, 1fr); }
  .mw-source-import-shell .mw-usage__panel { width: min(100%, 440px); padding: 28px; }
}

/* Dividers above these sections. The border sits on the section container, whose box is
   the bordered content width, so it meets the vertical rails without any bleed maths. */
.mw-source-import-shell #mw-protect .section-container,
.mw-source-import-shell #mw-scale .section-container {
  border-block-start: 1px solid var(--hds-color-surface-border-quiet, #e3e8ee);
}

/* Client logo strip: infinite horizontal marquee. */
.mw-source-import-shell .mw-logo-marquee-container {
  justify-content: flex-start !important;
  cursor: grab;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.mw-source-import-shell .mw-logo-marquee {
  width: max-content !important;
  justify-content: flex-start !important;
  animation: mw-logo-marquee 36s linear infinite;
}
.mw-source-import-shell .mw-logo-marquee-container:hover .mw-logo-marquee {
  animation-play-state: paused;
}
@keyframes mw-logo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .mw-source-import-shell .mw-logo-marquee { animation: none; }
}

/*
  Trusted-by case-study carousel — match stripe.com/billing/usage-based-billing:
  prev/next in header, horizontal scroll, card hover scale.
*/
.mw-source-import-shell .customer-stories-carousel__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mw-source-import-shell .customer-stories-carousel__header .carousel-nav,
.mw-source-import-shell .customer-stories-carousel__nav {
  display: flex !important;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
}
.mw-source-import-shell .customer-stories-carousel__nav .hds-ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--hds-color-surface-border-quiet, #e3e8ee);
  border-radius: 6px;
  background: #f6f9fc;
  color: #0a2540;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.mw-source-import-shell .customer-stories-carousel__nav .hds-ui-button:hover:not(:disabled) {
  background: #eef1fe;
  border-color: #c7c3f0;
  color: #533afd;
}
.mw-source-import-shell .customer-stories-carousel__nav .hds-ui-button:disabled {
  opacity: 0.4;
  cursor: default;
}
.mw-source-import-shell .customer-stories-carousel__nav .hds-ui-button:not(:disabled):last-child {
  background: #ebe9fe;
  border-color: #d6d3f8;
  color: #533afd;
}
.mw-source-import-shell .case-study-carousel {
  container-type: inline-size;
  width: 100%;
}
.mw-source-import-shell .case-study-carousel .case-study-carousel__scroller,
.mw-source-import-shell .case-study-carousel .carousel__scroller {
  display: flex !important;
  gap: var(--hds-space-core-200, 16px);
  overflow-x: auto !important;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block-end: 8px;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}
.mw-source-import-shell .case-study-carousel .carousel__scroller::-webkit-scrollbar {
  display: none;
}
.mw-source-import-shell .case-study-carousel .case-study-carousel__item,
.mw-source-import-shell .case-study-carousel .carousel__item {
  flex: 0 0 auto !important;
  width: min(100%, var(--case-study-carousel-card-max-width, 384px)) !important;
  max-width: var(--case-study-carousel-card-max-width, 384px) !important;
  scroll-snap-align: start;
}
.mw-source-import-shell .case-study-carousel .case-study-card {
  text-decoration: none;
  color: inherit;
}
.mw-source-import-shell .case-study-carousel .case-study-card__media {
  overflow: hidden;
  border-radius: var(--hds-space-core-radius-md, 6px);
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.mw-source-import-shell .case-study-carousel .case-study-card__image {
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (hover: hover) and (pointer: fine) {
  .mw-source-import-shell .case-study-carousel .case-study-card:hover,
  .mw-source-import-shell .case-study-carousel .case-study-card:focus-visible {
    --carousel-item-hover-scale: var(--carousel-hover-scale-target, 1.036);
    --hds-hover-active: 1;
  }
  .mw-source-import-shell .case-study-carousel .case-study-card:hover .case-study-card__media,
  .mw-source-import-shell .case-study-carousel .case-study-card:focus-visible .case-study-card__media {
    transform: scaleX(var(--carousel-hover-scale-target, 1.036));
  }
  .mw-source-import-shell .case-study-carousel .case-study-card:hover .case-study-card__image,
  .mw-source-import-shell .case-study-carousel .case-study-card:focus-visible .case-study-card__image {
    transform: translate3d(-50%, 0, 0) scaleX(calc(1 / var(--carousel-hover-scale-target, 1.036)));
  }
  .mw-source-import-shell .case-study-carousel .case-study-card:hover .case-study-card__link .hds-icon-hover-arrow,
  .mw-source-import-shell .case-study-carousel .case-study-card:focus-visible .case-study-card__link .hds-icon-hover-arrow {
    --hds-hover-active: 1;
  }
}
@media (min-width: 640px) {
  .mw-source-import-shell .customer-stories-carousel__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
  }
  .mw-source-import-shell .customer-stories-carousel__header .carousel-nav,
  .mw-source-import-shell .customer-stories-carousel__nav {
    align-self: flex-end;
    transform: translateY(8px);
  }
  .mw-source-import-shell .case-study-carousel .case-study-carousel__item,
  .mw-source-import-shell .case-study-carousel .carousel__item {
    width: clamp(240px, 30.38cqi, 384px) !important;
  }
}
@media (max-width: 639px) {
  /*
    Stripe usage-based-billing mobile case-study carousel:
    full-bleed track + gutter peeks, snap-center, active card scale(1),
    side cards slightly smaller via --carousel-item-progress (JS sets scroll progress).
  */
  .mw-source-import-shell .customer-stories-carousel__header .carousel-nav,
  .mw-source-import-shell .customer-stories-carousel__nav {
    display: none !important;
  }

  .mw-source-import-shell .customer-stories-carousel .case-study-carousel {
    --carousel-gap: 12px;
    --carousel-gutter: var(--hds-space-layout-page-margin, 16px);
    --carousel-card-width: 100%;
    /* Cancel section-container padding so peeks reach the screen edge */
    width: calc(100% + 2 * var(--carousel-gutter));
    margin-inline: calc(-1 * var(--carousel-gutter));
  }

  .mw-source-import-shell .case-study-carousel .case-study-carousel__scroller,
  .mw-source-import-shell .case-study-carousel .carousel__scroller {
    gap: var(--carousel-gap) !important;
    padding-inline: var(--carousel-gutter) !important;
    scroll-padding-inline: var(--carousel-gutter) !important;
    margin-inline: 0 !important;
    scroll-snap-type: x mandatory;
  }

  .mw-source-import-shell .case-study-carousel .case-study-carousel__item,
  .mw-source-import-shell .case-study-carousel .carousel__item {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .mw-source-import-shell .case-study-carousel .carousel__inner {
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    pointer-events: auto;
  }

  /* Active = scale 1; left/right shrink ~8% (Stripe uses 5% — slightly stronger for mobile clarity) */
  .mw-source-import-shell .case-study-carousel .case-study-card {
    --card-mobile-scale-factor: 0.08;
    --card-mobile-gap-inset: 7px;
    --carousel-card-scale: calc(
      1 - max(var(--carousel-item-progress, 0), -1 * var(--carousel-item-progress, 0)) *
        var(--card-mobile-scale-factor)
    );
    --scale-shrinkage: calc((1 - var(--carousel-card-scale)) * 50%);
    --gap-offset: calc(
      (var(--scale-shrinkage) + var(--card-mobile-gap-inset) / var(--carousel-card-scale)) *
        var(--carousel-item-progress, 0) * -1
    );
    width: 100% !important;
    max-width: 100% !important;
    transform: translate3d(var(--gap-offset), 0, 0) scale(var(--carousel-card-scale));
    transform-origin: center center;
    will-change: transform;
    backface-visibility: hidden;
  }

  .mw-source-import-shell .case-study-carousel .case-study-card__media {
    width: 100% !important;
    transform: none !important;
    background-color: transparent !important;
    overflow: hidden;
    border-radius: var(--hds-space-core-radius-md, 6px);
  }

  /* Full-bleed photo — no gray strip beside the image */
  .mw-source-import-shell .case-study-carousel .case-study-card__image {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    transform: none !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Soft fade/slide title + CTA when card leaves center (Stripe detail) */
  .mw-source-import-shell .case-study-carousel .case-study-card__title,
  .mw-source-import-shell .case-study-carousel .case-study-card__link {
    opacity: calc(
      1 - max(var(--carousel-item-progress, 0), -1 * var(--carousel-item-progress, 0))
    );
  }
  .mw-source-import-shell .case-study-carousel .case-study-card__title {
    transform: translate3d(calc(40px * var(--carousel-item-progress, 0)), 0, 0);
  }
  .mw-source-import-shell .case-study-carousel .case-study-card__link {
    transform: translate3d(calc(60px * var(--carousel-item-progress, 0)), 0, 0);
  }

  .mw-source-import-shell .case-study-carousel .case-study-card:hover .case-study-card__media,
  .mw-source-import-shell .case-study-carousel .case-study-card:focus-visible .case-study-card__media,
  .mw-source-import-shell .case-study-carousel .case-study-card:hover .case-study-card__image,
  .mw-source-import-shell .case-study-carousel .case-study-card:focus-visible .case-study-card__image {
    transform: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mw-source-import-shell .case-study-carousel .case-study-card__media,
  .mw-source-import-shell .case-study-carousel .case-study-card__image {
    transition: none;
  }
}