/* Extracted from stripe.com/billing/usage-based-billing (Metronome hero graphic) */
.metronome-dashboard-graphic{position:relative;width:100%;height:100%;display:flex;flex-direction:column;font-weight:var(--hds-font-weight-normal);background:var(--hds-color-util-neutral-0);border-radius:var(--hds-space-core-radius-md);overflow:hidden;color:var(--hds-color-util-neutral-990)}

.metronome-dashboard-graphic__header{display:flex;flex-direction:column;align-items:flex-start;padding:0 27px 13px;border-bottom:1px solid var(--hds-color-util-border-quiet);flex-shrink:0}

.metronome-dashboard-graphic__header__title{font-size:18px;font-weight:var(--hds-font-weight-bold);line-height:23px;color:var(--hds-color-util-neutral-990);padding-top:var(--hds-space-core-200)}

.metronome-dashboard-graphic__content{display:flex;flex-direction:column;padding:13px 27px;gap:13px;flex:1;min-height:0}

.metronome-dashboard-graphic__card{display:flex;flex-direction:column;border:1px solid var(--hds-color-util-border-quiet);border-radius:var(--hds-space-core-radius-md);background:var(--hds-color-util-neutral-0);overflow:hidden}

.metronome-dashboard-graphic__card__header{display:flex;flex-direction:row;align-items:center;padding:10px 13px;gap:7px}

.metronome-dashboard-graphic__card__title{font-size:12px;font-weight:var(--hds-font-weight-bold);line-height:18px;letter-spacing:.01em;color:var(--hds-color-util-neutral-990);flex:1}

.metronome-dashboard-graphic__card__body{display:flex;flex-direction:column;padding:0 13px 13px;gap:13px}

.metronome-dashboard-graphic__card__body--billing{flex-direction:row;padding:0;gap:95px}

.metronome-dashboard-graphic__card__metrics-row{display:flex;flex-direction:row;align-items:flex-start;gap:var(--hds-space-core-250);padding-top:13px}

.metronome-dashboard-graphic__billing-section{display:flex;flex-direction:column;align-items:flex-start;padding:13px;gap:13px}

.metronome-dashboard-graphic__billing-section__heading{font-size:13px;font-weight:var(--hds-font-weight-bold);line-height:20px;color:var(--hds-color-util-neutral-990)}

.metronome-dashboard-graphic__billing-section__metrics{display:flex;flex-direction:row;align-items:flex-start;gap:var(--hds-space-core-300)}

.metronome-dashboard-graphic__billing-divider{width:1px;background:var(--hds-color-util-border-quiet);margin:13px 0;flex-shrink:0}

.metronome-dashboard-graphic__cards-row{display:flex;flex-direction:row;gap:13px;flex:1;min-height:0}

.metronome-dashboard-graphic__cards-row>.metronome-dashboard-graphic__card{flex:1;min-width:0}

.metronome-dashboard-graphic__big-metric{display:flex;flex-direction:column;align-items:flex-start}

.metronome-dashboard-graphic__big-metric__label{font-size:10px;font-weight:var(--hds-font-weight-bold);line-height:18px;color:var(--hds-color-util-neutral-990)}

.metronome-dashboard-graphic__big-metric__row{display:flex;flex-direction:row;align-items:center;gap:7px}

.metronome-dashboard-graphic__big-metric__value{font-size:20px;font-weight:var(--hds-font-weight-bold);line-height:27px;letter-spacing:.01em;color:var(--hds-color-util-neutral-990)}

.metronome-dashboard-graphic__badge{padding:0 var(--hds-space-core-100);gap:var(--hds-space-core-25);height:18px;background:rgba(182,242,199,.6);border-radius:9px}

.metronome-dashboard-graphic__action-btn,.metronome-dashboard-graphic__badge{display:inline-flex;flex-direction:row;justify-content:center;align-items:center;font-size:10px;font-weight:var(--hds-font-weight-bold);line-height:18px;color:var(--hds-color-util-success-600)}

.metronome-dashboard-graphic__action-btn{padding:5px 8px;gap:5px;height:28px;background:var(--hds-color-util-neutral-0);border:1px solid #a5c2b6;border-radius:var(--hds-space-core-radius-sm);cursor:default;flex-shrink:0}

.metronome-dashboard-graphic__chart{position:relative;display:flex;flex-direction:row;flex:1;min-height:130px;gap:var(--hds-space-core-50)}

.metronome-dashboard-graphic__chart__y-axis{display:flex;flex-direction:column;justify-content:space-between;width:28px;flex-shrink:0;padding-block:2px}

.metronome-dashboard-graphic__chart__y-label{font-size:11px;line-height:14px;color:var(--hds-color-util-neutral-500);text-align:right}

.metronome-dashboard-graphic__chart__plot{position:relative;flex:1;min-width:0}

.metronome-dashboard-graphic__chart__grid-line{position:absolute;left:0;right:0;height:0;border-top:.7px dashed var(--hds-color-util-neutral-100);opacity:.8}

.metronome-dashboard-graphic__chart__grid-line:first-child{top:0}

.metronome-dashboard-graphic__chart__grid-line:nth-child(2){top:33%}

.metronome-dashboard-graphic__chart__grid-line:nth-child(3){top:66%}

.metronome-dashboard-graphic__chart__grid-line:nth-child(4){top:100%}

.metronome-dashboard-graphic__chart__svg{position:absolute;inset:0;width:100%;height:100%}

.metronome-dashboard-graphic__chart__line{stroke:var(--hds-color-util-brand-500)}

.balance-notification-graphic{position:relative;width:100%;height:100%;background:var(--hds-color-util-neutral-0);box-shadow:var(--hds-shadow-xl);border-radius:var(--hds-space-core-radius-md);overflow:hidden;font-weight:var(--hds-font-weight-normal)}

.balance-notification-graphic__header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:11px 14px;background:var(--hds-color-util-brand-50);height:37px}

.balance-notification-graphic__header-left{display:flex;flex-direction:row;align-items:center;gap:var(--hds-space-core-50)}

.balance-notification-graphic__bell-icon{color:var(--hds-color-util-brand-600)}

.balance-notification-graphic__header-text{font-size:9px;line-height:1;letter-spacing:.02em;text-transform:capitalize;color:var(--hds-color-util-neutral-990)}

.balance-notification-graphic__sent{font-size:9px;line-height:16px;color:var(--hds-color-util-neutral-990)}

.balance-notification-graphic__body{position:relative;display:flex;flex-direction:row;align-items:center;padding:var(--hds-space-core-200) 14px;height:135px}

.balance-notification-graphic__text-block{display:flex;flex-direction:column;gap:var(--hds-space-core-100);width:143px;flex-shrink:0}

.balance-notification-graphic__message{font-size:14px;font-weight:var(--hds-font-weight-normal);line-height:18px;color:var(--hds-color-util-neutral-990)}

.balance-notification-graphic__auto-reload{font-size:8px;font-weight:var(--hds-font-weight-bold);line-height:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--hds-color-util-neutral-500)}

.balance-notification-graphic__donut-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-width:0}

.balance-notification-graphic__donut-wrap svg{width:100%;height:100%}

.billing-contract-graphic{position:relative;width:100%;height:100%;background:var(--hds-color-util-neutral-0);box-shadow:var(--hds-shadow-xl);border-radius:var(--hds-space-core-radius-md);overflow:hidden;font-weight:var(--hds-font-weight-normal)}

.billing-contract-graphic__top-row{position:absolute;left:var(--hds-space-core-200);top:var(--hds-space-core-200);display:flex;flex-direction:row;gap:var(--hds-space-core-100)}

.billing-contract-graphic__tile{display:flex;flex-direction:column;padding:var(--hds-space-core-200);gap:var(--hds-space-core-200);background:var(--hds-color-util-neutral-25);border-radius:var(--hds-space-core-radius-md)}

.billing-contract-graphic__tile--left{width:142px;height:120px}

.billing-contract-graphic__tile--right{width:210px;height:120px}

.billing-contract-graphic__tile-section{display:flex;flex-direction:column;gap:var(--hds-space-core-25)}

.billing-contract-graphic__date-range{font-size:10px;line-height:14px;color:var(--hds-color-util-neutral-500)}

.billing-contract-graphic__heading{font-size:16px;font-weight:var(--hds-font-weight-bold);line-height:19px;color:var(--hds-color-util-neutral-990)}

.billing-contract-graphic__label{font-size:10px;line-height:14px;color:var(--hds-color-util-neutral-500)}

.billing-contract-graphic__commit{display:flex;flex-direction:column;gap:var(--hds-space-core-100)}

.billing-contract-graphic__commit-label{font-size:10px;font-weight:var(--hds-font-weight-bold);line-height:14px;color:var(--hds-color-util-neutral-500)}

.billing-contract-graphic__progress-track{position:relative;width:173px;height:8px;background:var(--hds-color-util-neutral-100);border-radius:4px}

.billing-contract-graphic__progress-fill{position:absolute;left:2px;top:2px;width:132px;height:4px;background:var(--hds-color-util-brand-600);border-radius:4px}

.billing-contract-graphic__rate-card{position:absolute;left:var(--hds-space-core-200);top:152px;width:360px;height:76px;background:var(--hds-color-util-neutral-25);border-radius:var(--hds-space-core-radius-md);padding:var(--hds-space-core-200);display:flex;flex-direction:column;gap:var(--hds-space-core-200)}

.billing-contract-graphic__rate-card-header,.billing-contract-graphic__rate-card-row{display:flex;flex-direction:row;align-items:center}

.billing-contract-graphic__rate-card-col{font-size:12px;line-height:14px;color:var(--hds-color-util-neutral-500);white-space:nowrap}

.billing-contract-graphic__rate-card-col--name{width:110px;flex-shrink:0}

.billing-contract-graphic__rate-card-col:not(.billing-contract-graphic__rate-card-col--name){flex:1}

.billing-contract-graphic__rate-card-col--bold{font-weight:var(--hds-font-weight-bold);color:var(--hds-color-util-neutral-990)}

.billing-contract-graphic__rate-card-col--secondary{font-weight:var(--hds-font-weight-normal);color:var(--hds-color-util-neutral-500)}

.billing-event-stream-static-graphic{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background:var(--hds-color-util-neutral-0);box-shadow:var(--hds-shadow-xl);border-radius:var(--hds-space-core-radius-md);overflow:hidden;font-weight:var(--hds-font-weight-normal);color:var(--hds-color-util-neutral-990)}

.billing-event-stream-static-graphic__header{display:flex;flex-direction:row;align-items:center;padding:10px 13px;gap:7px;border-bottom:1px solid var(--hds-color-util-border-quiet);flex-shrink:0}

.billing-event-stream-static-graphic__title{font-size:12px;font-weight:var(--hds-font-weight-bold);line-height:18px;letter-spacing:.01em;color:var(--hds-color-util-neutral-990);flex:1}

.billing-event-stream-static-graphic__action-btn{display:inline-flex;flex-direction:row;justify-content:center;align-items:center;padding:5px 8px;gap:5px;height:28px;background:var(--hds-color-util-neutral-0);border:1px solid var(--hds-color-util-neutral-200);border-radius:var(--hds-space-core-radius-sm);font-size:10px;font-weight:var(--hds-font-weight-bold);line-height:18px;color:var(--hds-color-util-success-600);cursor:default;flex-shrink:0}

.billing-event-stream-static-graphic__body{display:flex;flex-direction:column;padding:0 13px 13px;gap:13px;flex:1;min-height:0}

.billing-event-stream-static-graphic__metrics-row{display:flex;flex-direction:row;align-items:flex-start;gap:var(--hds-space-core-250);padding-top:13px}

.billing-event-stream-static-graphic__big-metric{display:flex;flex-direction:column;align-items:flex-start}

.billing-event-stream-static-graphic__big-metric-label{font-size:10px;font-weight:var(--hds-font-weight-bold);line-height:18px;color:var(--hds-color-util-neutral-990)}

.billing-event-stream-static-graphic__big-metric-value{font-size:20px;font-weight:var(--hds-font-weight-bold);line-height:27px;letter-spacing:.01em;color:var(--hds-color-util-neutral-990)}

.billing-event-stream-static-graphic__chart{position:relative;display:flex;flex-direction:row;flex:1;min-height:80px;gap:var(--hds-space-core-50)}

.billing-event-stream-static-graphic__chart-y-axis{display:flex;flex-direction:column;justify-content:space-between;width:32px;flex-shrink:0;padding-block:2px}

.billing-event-stream-static-graphic__chart-y-label{font-size:11px;line-height:14px;color:var(--hds-color-util-neutral-500);text-align:right}

.billing-event-stream-static-graphic__chart-plot{position:relative;flex:1;min-width:0}

.billing-event-stream-static-graphic__chart-grid-line{position:absolute;left:0;right:0;height:0;border-top:.7px dashed var(--hds-color-util-neutral-100);opacity:.8}

.billing-event-stream-static-graphic__chart-grid-line:first-child{top:0}

.billing-event-stream-static-graphic__chart-grid-line:nth-child(2){top:33%}

.billing-event-stream-static-graphic__chart-grid-line:nth-child(3){top:66%}

.billing-event-stream-static-graphic__chart-grid-line:nth-child(4){top:100%}

.billing-event-stream-static-graphic__chart-svg{position:absolute;inset:0;width:100%;height:100%}

.billing-event-stream-static-graphic__chart-line{stroke:var(--hds-color-util-brand-500)}

.ubb-hero__graphic-container{--section-container-pbe:var(--hds-space-core-0);--section-container-pbe-tb:var(--hds-space-core-0);--section-container-pbe-dt:var(--hds-space-core-0);--section-container-pbs:var(--hds-space-core-0);--section-container-pbs-tb:var(--hds-space-core-0);--section-container-pbs-dt:var(--hds-space-core-0);--section-container-border-inline:1px solid transparent;height:636px;position:relative;z-index:2}

.ubb-hero__graphic-stack{position:relative;z-index:1;width:100%;height:100%;display:flex;justify-content:center;align-items:center;gap:var(--hds-space-core-150);flex-direction:column}

@media (min-width:640px){.ubb-hero__graphic-stack{flex-direction:row;gap:var(--hds-space-core-0)}}

.ubb-hero__graphic-browser{width:86%;max-width:1024px;position:relative;overflow:hidden}

.ubb-hero__graphic-browser>.dom-graphic{transform:translateY(13.5%)}

.ubb-hero__graphic-browser--desktop{display:none}

.ubb-hero__graphic-chart-card{width:70%}

@media (min-width:640px){.ubb-hero__graphic-browser--desktop{display:block}.ubb-hero__graphic-chart-card--mobile{display:none}}

.ubb-hero__graphic-invoice{position:relative;width:70%;top:0;right:0;z-index:1}

@media (min-width:640px){.ubb-hero__graphic-invoice{position:absolute;top:30.8%;right:-2%;width:25%}}

@media (min-width:1360px){.ubb-hero__graphic-invoice{right:-3%}}

.ubb-hero__graphic-notification{position:relative;width:70%;top:0;left:0;z-index:1;display:none}

@media (min-width:640px){.ubb-hero__graphic-notification{display:block;position:absolute;top:64%;right:-2%;width:25%}}

@media (min-width:1360px){.ubb-hero__graphic-notification{right:-3%}}

@media (min-width:1360px){.ubb-hero__graphic{border-radius:var(--hds-space-core-radius-md);width:calc(100% - 32px)}}

@media (min-width:640px){.ubb-hero__graphic-background{background:linear-gradient(146deg,#ffbc74,#ffb567 8%,#ff8f22 24%,#9939d1 52%,rgba(93,36,208,.68) 74%,#d1adf8)}}

@media (min-width:640px){.ubb-hero__graphic-background-poster--desktop{display:block}.ubb-hero__graphic-background-poster--mobile{display:none}}

@media (prefers-reduced-motion:reduce){.ubb-hero__graphic-background-video{transition:none}}

@media (prefers-reduced-motion:no-preference){.ubb-hero__graphic-stack .metronome-dashboard-graphic__chart__plot{clip-path:inset(0 100% 0 0);will-change:clip-path}.ubb-hero__graphic-invoice,.ubb-hero__graphic-notification{opacity:0;transform:translateY(16px);will-change:opacity,transform}}

@media (max-width:1264px){.ubb-hero__graphic-container{height:auto;aspect-ratio:1264/640}.ubb-hero__graphic{height:auto;aspect-ratio:1296/640}}

@media (max-width:639px){.ubb-hero__graphic,.ubb-hero__graphic-container{aspect-ratio:400/452}}

/* Connect hero — Stripe UBB / Metronome dashboard graphic */
.mw-source-import-shell .billing-hero__anim-container:has([data-mw-ubb-hero]) {
  /* clip overflow; Stripe-like tight top, flush bottom */
  overflow: hidden;
  padding-block-start: 4px !important;
  padding-block-end: 0 !important;
  /* Break out of section-container — full-bleed left/right like Stripe UBB */
  position: relative;
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  border-radius: 0;
  isolation: isolate;
}

@media (min-width: 940px) {
  .mw-source-import-shell .billing-hero__anim-container:has([data-mw-ubb-hero]) {
    padding-block-start: 8px !important;
  }
}

/* Desktop: ~16px side inset + radius (matches Stripe ubb-hero__graphic) */
@media (min-width: 1360px) {
  .mw-source-import-shell .billing-hero__anim-container:has([data-mw-ubb-hero]) {
    width: calc(100vw - 32px);
    max-width: 1600px;
    left: 50%;
    right: auto;
    margin-inline: 0;
    transform: translateX(-50%);
    border-radius: var(--hds-space-core-radius-md, 8px);
  }
}

.mw-source-import-shell .billing-hero__ubb-graphic {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1264px;
  margin-inline: auto;
  height: 636px;
  /* side room so floating cards never hit the clip edge */
  padding-inline: 28px;
  box-sizing: border-box;
}

@media (max-width: 1264px) {
  .mw-source-import-shell .billing-hero__ubb-graphic {
    height: auto;
    aspect-ratio: 1264 / 640;
    padding-inline: 24px;
  }
}

@media (max-width: 939px) {
  .mw-source-import-shell .billing-hero__ubb-graphic {
    padding-inline: 20px;
  }
}

@media (max-width: 639px) {
  .mw-source-import-shell .billing-hero__ubb-graphic {
    aspect-ratio: 400 / 452;
    padding-inline: 12px;
    padding-block-start: 0;
  }

  .mw-source-import-shell .billing-hero__anim-container:has([data-mw-ubb-hero]) {
    overflow: hidden;
    padding-block-start: 4px !important;
  }
}

/* Avoid horizontal scrollbar from 100vw bleed */
.mw-source-import-shell section.billing-hero {
  overflow-x: clip;
}

/* Pin graphic to bottom (Stripe: browser touches / clips section bottom) */
.mw-source-import-shell .billing-hero__ubb-graphic .ubb-hero__graphic-stack {
  height: 100%;
  align-items: flex-end;
  justify-content: center;
}

@media (min-width: 640px) {
  .mw-source-import-shell .billing-hero__ubb-graphic .ubb-hero__graphic-stack {
    align-items: flex-end;
  }

  /* Slight downward shift so bottom edge flushes / clips like Stripe */
  .mw-source-import-shell .ubb-hero__graphic-browser > .dom-graphic {
    transform: translateY(4%);
  }
}

/* Scale floating cards down + keep fully inside the frame */
@media (min-width: 640px) {
  .mw-source-import-shell .ubb-hero__graphic-browser {
    width: 78%;
    max-width: 920px;
  }

  .mw-source-import-shell .ubb-hero__graphic-invoice {
    top: 24%;
    right: 1.5%;
    left: auto;
    width: 22%;
    max-width: 240px;
  }

  .mw-source-import-shell .ubb-hero__graphic-notification {
    display: block;
    position: absolute;
    top: 58%;
    left: 1.5%;
    right: auto;
    width: 22%;
    max-width: 240px;
  }
}

/* Tablet — smaller cards, more inset so both sides stay visible */
@media (min-width: 640px) and (max-width: 939px) {
  .mw-source-import-shell .ubb-hero__graphic-browser {
    width: 74%;
  }

  .mw-source-import-shell .ubb-hero__graphic-browser > .dom-graphic {
    transform: translateY(3%);
  }

  .mw-source-import-shell .ubb-hero__graphic-invoice {
    top: 22%;
    right: 2%;
    width: 20%;
    max-width: 200px;
  }

  .mw-source-import-shell .ubb-hero__graphic-notification {
    top: 56%;
    left: 2%;
    width: 20%;
    max-width: 200px;
  }
}

/* Scale dom-graphic to container; JS sets --graphic-scale */
.mw-source-import-shell .ubb-hero__graphic-browser .dom-graphic {
  width: 100%;
  max-width: 1024px;
}

.mw-source-import-shell .ubb-hero__graphic-browser .dom-graphic[data-status="ready"] .dom-graphic__content,
.mw-source-import-shell .ubb-hero__graphic-invoice .dom-graphic[data-status="ready"] .dom-graphic__content,
.mw-source-import-shell .ubb-hero__graphic-notification .dom-graphic[data-status="ready"] .dom-graphic__content,
.mw-source-import-shell .ubb-hero__graphic-chart-card .dom-graphic[data-status="ready"] .dom-graphic__content {
  visibility: visible;
}

/* Entrance animation — slower than Stripe default */
@media (prefers-reduced-motion: no-preference) {
  .mw-source-import-shell .ubb-hero__graphic-stack.is-animated .metronome-dashboard-graphic__chart__plot,
  .mw-source-import-shell .ubb-hero__graphic-stack.is-animated .billing-event-stream-static-graphic__chart-plot {
    clip-path: inset(0 0 0 0);
    transition: clip-path 2.2s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .mw-source-import-shell .ubb-hero__graphic-stack.is-animated .ubb-hero__graphic-invoice,
  .mw-source-import-shell .ubb-hero__graphic-stack.is-animated .ubb-hero__graphic-notification {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1),
      transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .mw-source-import-shell .ubb-hero__graphic-stack.is-animated .ubb-hero__graphic-invoice {
    transition-delay: 0.2s;
  }

  .mw-source-import-shell .ubb-hero__graphic-stack.is-animated .ubb-hero__graphic-notification {
    transition-delay: 0.45s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mw-source-import-shell .ubb-hero__graphic-stack .metronome-dashboard-graphic__chart__plot,
  .mw-source-import-shell .ubb-hero__graphic-stack .billing-event-stream-static-graphic__chart-plot {
    clip-path: none !important;
  }

  .mw-source-import-shell .ubb-hero__graphic-invoice,
  .mw-source-import-shell .ubb-hero__graphic-notification {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Ensure floating cards sit above the wave */
.mw-source-import-shell .ubb-hero__graphic-invoice,
.mw-source-import-shell .ubb-hero__graphic-notification {
  z-index: 2;
}

.mw-source-import-shell .ubb-hero__graphic-browser {
  z-index: 1;
}