/* Match captured Guides / Customers pages to the 1266px rails used on new product pages. */
body.mw-source-guides,
body.mw-source-guides.MktBody,
body.mw-source-guide-agentic-commerce,
body.mw-source-guide-agentic-commerce.MktBody,
body.mw-source-customers,
body.mw-source-customers.MktBody {
  --mw-page-max: 1266px;
  --mw-page-margin: 0px;
  --layoutWidthMax: 1266px !important;
  --hds-font-weight-normal: 300;
  --hds-font-weight-bold: 400;
  /* Remap Stripe marketing weight tokens to Söhne / HDS. */
  --fontWeightLight: 300 !important;
  --fontWeightNormal: 300 !important;
  --fontWeightSemibold: 400 !important;
  --fontWeightBold: 400 !important;
  overflow-x: clip;
  font-family: sohne-var, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
}

/* Flatten captured 500–700 weights to theme: body 300, emphasis 400. */
body.mw-source-guides :where(*):not(svg):not(svg *),
body.mw-source-guide-agentic-commerce :where(*):not(svg):not(svg *) {
  font-weight: 300 !important;
}

body.mw-source-guides :where(h1, h2, h3, h4, h5, h6, strong, b, label, th, button, .Button, [class*="Title"], [class*="title"], [class*="Heading"], [class*="heading"]),
body.mw-source-guide-agentic-commerce :where(h1, h2, h3, h4, h5, h6, strong, b, label, th, button, .Button, [class*="Title"], [class*="title"], [class*="Heading"], [class*="heading"]) {
  font-weight: 400 !important;
}

@media (min-width: 640px) {
  body.mw-source-guides,
  body.mw-source-guides.MktBody,
  body.mw-source-guide-agentic-commerce,
  body.mw-source-guide-agentic-commerce.MktBody,
  body.mw-source-customers,
  body.mw-source-customers.MktBody {
    --mw-page-margin: 16px;
    /* Fit layout inside rails at every width — not only ≥1112px */
    --layoutWidth: min(
      var(--mw-page-max),
      calc(100vw - 2 * var(--mw-page-margin))
    ) !important;
  }

}

@media (min-width: 1112px) {
  body.mw-source-guides,
  body.mw-source-guides.MktBody,
  body.mw-source-guide-agentic-commerce,
  body.mw-source-guide-agentic-commerce.MktBody,
  body.mw-source-customers,
  body.mw-source-customers.MktBody {
    /* Keep fitting the viewport; never force wider than available space */
    --layoutWidth: min(
      var(--layoutWidthMax),
      calc(100vw - 2 * var(--mw-page-margin))
    ) !important;
  }
}

/* Keep shared chrome on the same outer width as page sections. */
html body.mw-source-guides .mw-core-header__inner,
html body.mw-source-guide-agentic-commerce .mw-core-header__inner,
html body.mw-source-customers .mw-core-header__inner {
  max-width: var(--mw-page-max, 1266px) !important;
}

html body.mw-source-guides footer.mw-shared-footer .mw-shared-footer__grid,
html body.mw-source-guide-agentic-commerce footer.mw-shared-footer .mw-shared-footer__grid,
html body.mw-source-customers footer.mw-shared-footer .mw-shared-footer__grid {
  max-width: var(--mw-footer-grid-max, 1266px) !important;
}

/* Sit Stripe layout boxes on the same 1266 rail. */
body.mw-source-guides .Section__layoutContainer,
body.mw-source-guides .Guides__container,
body.mw-source-guides .SiteHeader__container,
body.mw-source-guide-agentic-commerce .Section__layoutContainer,
body.mw-source-guide-agentic-commerce .Guides__container,
body.mw-source-guide-agentic-commerce .SiteHeader__container,
body.mw-source-customers .Section__layoutContainer,
body.mw-source-customers .Guides__container,
body.mw-source-customers .SiteHeader__container {
  max-width: min(var(--mw-page-max), 100%) !important;
  margin-inline: auto !important;
  width: 100% !important;
}

body.mw-source-guides .Section__layoutContainer,
body.mw-source-guide-agentic-commerce .Section__layoutContainer,
body.mw-source-customers .Section__layoutContainer {
  padding-inline: 16px;
  box-sizing: border-box;
}

body.mw-source-customers .Section__layoutContainer {
  /* Use the same content inset as Guides so the header, grid and page rails align. */
  padding-inline: 16px;
  overflow-x: visible;
}

/* Building together eyebrow (Stripe Copy__caption) */
body.mw-source-customers .Copy__caption {
  margin: 0 0 10px;
  font: var(--fontWeightBold, 400) 16px / 1.4 var(--fontFamily, sohne-var, sans-serif);
  letter-spacing: 0.2px;
  color: #635bff;
}

body.mw-source-customers .CaseStudy .Copy.variant--Subsection .Copy__title {
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #0a2540;
}

/* Product checklist under Challenge / Solution */
body.mw-source-customers .CaseStudy .List {
  margin: 0;
}

body.mw-source-customers .CaseStudy .List__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  row-gap: 10px;
}

body.mw-source-customers .CaseStudy .ListItem--hasIcon {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.mw-source-customers .CaseStudy .List__itemIcon {
  flex: 0 0 auto;
}

body.mw-source-customers .CaseStudy .ListItem__label.Link,
body.mw-source-customers .CaseStudy a.ListItem__label {
  color: #635bff;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 400;
}

body.mw-source-customers .CaseStudy .ListItem__label.Link:hover,
body.mw-source-customers .CaseStudy a.ListItem__label:hover {
  text-decoration: underline;
}

body.mw-source-customers .Copy.variant--Stat,
body.mw-source-customers .Copy.variant--Detail {
  --titleAnchorDisplay: block !important;
  --headerPaddingLeft: 0px;
  --bodyPaddingLeft: 16px;
  --footerPaddingLeft: 16px;
  --titleBorderColor: #635bff;
}

body.mw-source-customers .Copy.variant--Stat .Copy__title,
body.mw-source-customers .Copy.variant--Detail .Copy__title {
  position: relative !important;
  padding-left: 16px !important;
  color: #0a2540;
}

body.mw-source-customers .Copy.variant--Stat .Copy__title::before,
body.mw-source-customers .Copy.variant--Detail .Copy__title::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.15em !important;
  width: 1px !important;
  height: 1em !important;
  background-color: #635bff !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Customer Stories results use two intentional, shared anchors: the results
   heading and every metric's copy share one text rail, while each metric's
   indigo rule begins precisely on its vertical guide. Keeping those anchors
   explicit prevents source-template padding from nudging either one. */
body.mw-source-customers .CustomersHero.Section[data-mw-guides-card-layout="true"] + .Section .RowLayout > .Copy.variant--Section .Copy__header {
  padding-left: 0 !important;
}

body.mw-source-customers .CustomersHero.Section[data-mw-guides-card-layout="true"] + .Section .ColumnLayout[data-columns="1,1,1,1"] > .Copy.variant--Stat .Copy__title::before {
  left: 0 !important;
  width: 1px !important;
  height: 1em !important;
  background-color: #635bff !important;
  opacity: 1 !important;
}

/* The first result is the only marker that lands on the outer page rail.
   Move its draw position two pixels inside that rail so it remains visibly
   identical to the three interior markers rather than being obscured by it. */
body.mw-source-customers .CustomersHero.Section[data-mw-guides-card-layout="true"] + .Section .ColumnLayout[data-columns="1,1,1,1"] > .Copy.variant--Stat:first-child .Copy__title::before {
  left: 2px !important;
}

/* The first stat's guide coincides with the fixed page rail. Raise the title
   above that decorative rail so the intended indigo marker remains visible at
   every zoom level without widening it or moving the page content. */
body.mw-source-customers .CustomersHero.Section[data-mw-guides-card-layout="true"] + .Section .ColumnLayout[data-columns="1,1,1,1"] > .Copy.variant--Stat .Copy__header {
  z-index: 6;
}

body.mw-source-customers .CustomersCaseStudyCarousel,
body.mw-source-customers .CustomersCaseStudyCarousel__layout,
body.mw-source-customers .ColumnLayout {
  max-width: 100%;
  min-width: 0;
}

/* Captured Guides sections use their own outer rails. Customer Stories uses
   the source Guides grid as its page-rail layer, so its two outer guides stay visible. */
body.mw-source-guides .Guides__guide:first-of-type,
body.mw-source-guides .Guides__guide:last-of-type,
body.mw-source-guide-agentic-commerce .Guides__guide:first-of-type,
body.mw-source-guide-agentic-commerce .Guides__guide:last-of-type {
  background: transparent !important;
}

/* mw-customer-stories-source-grid */
/* Keep Customer Stories on the same 1266px / 16px rail geometry as About,
   using the captured source grid rather than page-edge pseudo-elements. */
body.mw-source-customers {
  --guideSolidColor: rgba(66, 71, 112, 0.06);
  --guideDashedColor: rgba(66, 71, 112, 0.09);
}

@media (min-width: 640px) {
  body.mw-source-customers .Guides__container {
    width: min(
      var(--mw-page-max),
      calc(100vw - 2 * var(--mw-page-margin))
    ) !important;
    max-width: var(--mw-page-max) !important;
    margin-inline: auto !important;
  }

  body.mw-source-customers .Guides__guide {
    display: block !important;
  }

  body.mw-source-customers .Guides__guide:first-of-type,
  body.mw-source-customers .Guides__guide:last-of-type {
    background: var(--guideSolidColor) !important;
  }
}

/* Hero: space between breadcrumb and “Guides and resources” title */
body.mw-source-guides .GuidesHomeHero .BreadcrumbNav {
  margin-bottom: 28px;
}

@media (min-width: 900px) {
  body.mw-source-guides .GuidesHomeHero .BreadcrumbNav {
    margin-bottom: 36px;
  }
}

body.mw-source-guides .GuidesHomeHero .Copy.variant--Hero {
  row-gap: 20px;
}

body.mw-source-guides .GuidesHomeHero .Copy.variant--Hero .Copy__title {
  font-weight: 400 !important;
  color: #0a2540;
}

/* ~3-line wrap like the Stripe hero reference */
body.mw-source-guides .GuidesHomeHero .Copy.variant--Hero .Copy__body {
  max-width: 34rem;
  --bodyMaxWidth: 34rem;
}

@media (min-width: 900px) {
  body.mw-source-guides .GuidesHomeHero .Copy.variant--Hero .Copy__body {
    margin-bottom: 56px;
  }

  /* Keep cards below the Guides breadcrumb (not level with it) */
  body.mw-source-guides .GuidesHomeHeroGraphic {
    top: 72px;
    bottom: auto !important;
    margin-top: 0 !important;
  }
}

body.mw-source-guides .GuidesHomeCategoryLayout {
  display: grid;
  row-gap: 8px;
}

/* Category blocks below hero: restore section heading rhythm above card grids */
body.mw-source-guides .GuidesHomeCategoryLayout .Copy.variant--Section {
  row-gap: 12px;
  --footerGap: 12px;
  padding-bottom: 0;
  margin-bottom: 0;
}

body.mw-source-guides .GuidesHomeCategoryLayout .Copy__title {
  font-weight: 400 !important;
  color: #0a2540;
}

body.mw-source-guides .GuidesHomeCategoryLayout .Copy__footer {
  margin-top: 0;
  padding-bottom: 0;
}

body.mw-source-guides .GuidesHomeCategoryLayout .Copy__footer .CtaButton.variant--Button {
  display: inline-flex;
  align-items: center;
  height: 33px;
  padding: 0 16px 1px 16px;
  border-radius: 16.5px;
  background: #635bff;
  color: #fff;
  font: 500 15px / 1 var(--guides-font, sohne-var, Inter, sans-serif);
  letter-spacing: 0.2px;
  text-decoration: none;
}

body.mw-source-guides .GuidesHomeCategoryLayout .Copy__footer .CtaButton.variant--Button:hover {
  background: #0a2540;
  opacity: 1;
}

/* Category card grids: inset from the page rails and fill the row so
   4-up sections do not leave a blank strip on the right. */
body.mw-source-guides .GuidesHomeCategoryLayout .GuidesCategoryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 16px;
  width: 100%;
  box-sizing: border-box;
  padding-inline: var(--columnPaddingNormal, 16px);
}

body.mw-source-guides .GuidesHomeCategoryLayout .GuidesCategoryGrid .GuidesCard,
body.mw-source-guides .GuidesHomeCategoryLayout .GuidesCategoryGrid__card {
  width: 100% !important;
  max-width: none !important;
}

body.mw-source-guides .GuidesHomeCategoryLayout .GuidesCard__art.GuidesCardArt {
  width: 100%;
  height: 100%;
}

@media (max-width: 1111px) {
  body.mw-source-guides .GuidesHomeCategoryLayout .GuidesCategoryGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  body.mw-source-guides .GuidesHomeCategoryLayout .GuidesCategoryGrid {
    grid-template-columns: 1fr;
  }
}

/* Closing CTA: documents icon + titles/links like Stripe /guides */
body.mw-source-guides .ColumnLayout[data-columns="3,1"] .Copy__icon {
  display: flex;
  align-items: flex-end;
  min-height: 40px;
  margin-bottom: 16px;
}

body.mw-source-guides .ColumnLayout[data-columns="3,1"] .Icon path {
  fill-rule: evenodd;
}

body.mw-source-guides .ColumnLayout[data-columns="3,1"] .Copy.variant--Subsection .Copy__title,
body.mw-source-guides .ColumnLayout[data-columns="3,1"] .Copy.variant--Detail .Copy__title {
  font-weight: 400 !important;
  color: #0a2540;
}

body.mw-source-guides .ColumnLayout[data-columns="3,1"] .Copy.variant--Detail .Copy__title {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
}

body.mw-source-guides .ColumnLayout[data-columns="3,1"] .CtaButton.variant--Link {
  display: inline-flex;
  align-items: center;
  color: #635bff;
  font-weight: 400 !important;
  font-size: 15px;
  line-height: 24px;
  text-decoration: none;
}

body.mw-source-guides .ColumnLayout[data-columns="3,1"] .CtaButton.variant--Link:hover {
  color: #0a2540;
}

/* Customer Stories follows the Guides hero's light angled frame. */
body.mw-source-customers .CustomersHero.HeroSection.Section {
  --sectionPaddingTop: 0;
  z-index: 2;
}

@media (min-width: 900px) {
  body.mw-source-customers .CustomersHero.HeroSection.Section {
    --sectionOverflow: visible;
  }
}

body.mw-source-customers .CustomersHero .Copy.variant--Hero .Copy__title {
  font-weight: 400 !important;
  color: #0a2540;
}

body.mw-source-customers .CustomersHero .CtaButton.variant--Button {
  display: inline-flex;
  align-items: center;
  height: 33px;
  padding: 0 16px 1px;
  border-radius: 16.5px;
  background: #0a2540;
  color: #fff;
  font: 500 15px / 1 var(--guides-font, sohne-var, Inter, sans-serif);
  letter-spacing: 0.2px;
  text-decoration: none;
}

body.mw-source-customers .CustomersHero .CtaButton.variant--Button:hover {
  background: #0a2540;
  opacity: 0.85;
}

body.mw-source-customers .CustomersHero .CtaButton.variant--Link {
  display: inline-flex;
  align-items: center;
  color: #635bff;
  font-weight: 400 !important;
  font-size: 15px;
  line-height: 24px;
  text-decoration: none;
}

body.mw-source-customers .CustomersHero .CtaButton.variant--Link:hover {
  color: #0a2540;
}

/* Customer Stories CTA standard: page actions are 48px high; the paired
   buttons have an 8px horizontal gap and retain the system's 12px wrap gap. */
body.mw-source-customers .CustomersHero .Copy__ctaGroup {
  column-gap: 8px;
  row-gap: 12px;
}

body.mw-source-customers [data-mw-customer-ready-band="true"] .mw-customer-ready-cta-group {
  column-gap: 8px;
  row-gap: 12px;
}

/* Preserve the same full-width light-grey closing band used on Guides. */
body.mw-source-customers .Section[data-mw-customer-ready-band="true"] {
  --backgroundColor: #f6f9fc;
}

body.mw-source-customers .Section[data-mw-customer-ready-band="true"] .Section__background {
  background: #f6f9fc !important;
}

body.mw-source-customers .CustomersHero .CtaButton.mw-customer-hero-cta,
body.mw-source-customers [data-mw-customer-ready-band="true"] .CtaButton.mw-customer-ready-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 48px;
  min-height: 0;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: sohne-var, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
}

body.mw-source-customers .CustomersHero .CtaButton.mw-customer-hero-cta--primary,
body.mw-source-customers [data-mw-customer-ready-band="true"] .CtaButton.mw-customer-ready-cta--primary {
  border: 0;
  background: #533afd;
  color: #fff;
}

body.mw-source-customers .CustomersHero .CtaButton.mw-customer-hero-cta--primary:hover,
body.mw-source-customers [data-mw-customer-ready-band="true"] .CtaButton.mw-customer-ready-cta--primary:hover {
  background: #4032c8;
  border-color: #4032c8;
  color: #fff;
  opacity: 1;
}

body.mw-source-customers .CustomersHero .CtaButton.mw-customer-hero-cta--secondary,
body.mw-source-customers [data-mw-customer-ready-band="true"] .CtaButton.mw-customer-ready-cta--secondary {
  background: rgba(255, 255, 255, 0.78);
  border-color: #d6d9fc;
  color: #533afd;
}

body.mw-source-customers .CustomersHero .CtaButton.mw-customer-hero-cta--secondary:hover,
body.mw-source-customers [data-mw-customer-ready-band="true"] .CtaButton.mw-customer-ready-cta--secondary:hover {
  background: #f7f6ff;
  border-color: #a8a0ff;
  color: #4032c8;
}

/* Customer logos now form the bridge between the story cards and results.
   Six complementary myWork customers sit as a stable desktop rail and remain
   horizontally reachable on narrow screens. */
body.mw-source-customers .CustomersHero .mw-customer-logo-strip {
  grid-column: 1 / -1;
  position: relative;
  z-index: 3;
  margin: 48px calc(var(--columnPaddingNormal) * -1) 0;
  overflow: hidden;
}

body.mw-source-customers .CustomersHero .mw-customer-logo-scroll {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

body.mw-source-customers .CustomersHero .mw-customer-logo-scroll::-webkit-scrollbar {
  display: none;
}

body.mw-source-customers .CustomersHero [data-mw-customer-logo-rail="true"] {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  width: 100%;
  margin: 0;
  padding: 20px var(--columnPaddingNormal);
  list-style: none;
}

body.mw-source-customers .CustomersHero .mw-customer-logo-rail__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

body.mw-source-customers .CustomersHero .mw-customer-logo-rail__item img {
  display: block;
  width: min(128px, 100%);
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 899px) {
  body.mw-source-customers .CustomersHero [data-mw-customer-logo-rail="true"] {
    display: flex;
    gap: 32px;
    width: max-content;
    min-width: 100%;
    padding: 16px var(--columnPaddingNormal);
  }

  body.mw-source-customers .CustomersHero .mw-customer-logo-rail__item {
    flex: 0 0 136px;
  }

  body.mw-source-customers .CustomersHero .mw-customer-logo-rail__item img {
    max-width: 142px;
  }
}

/* Customer story cards: brand wash + full-bleed portrait images (Stripe customers). */
body.mw-source-customers .CustomersCaseStudyCard {
  background-color: var(--customerBrandColor, #0a2540);
  max-width: 100%;
  box-sizing: border-box;
}

body.mw-source-customers .CustomersCaseStudyCardBackground {
  display: block !important;
}

body.mw-source-customers .CustomersCaseStudyCardOverlay {
  display: block !important;
  background-color: var(--customerBrandColor, inherit);
  -webkit-mask-image: linear-gradient(
    0deg,
    #000 15%,
    rgba(0, 0, 0, 0.55) 54.75%,
    transparent 100%
  );
  mask-image: linear-gradient(
    0deg,
    #000 15%,
    rgba(0, 0, 0, 0.55) 54.75%,
    transparent 100%
  );
}

body.mw-source-customers .CustomersCaseStudyCardBackground__image,
body.mw-source-customers img.CustomersCaseStudyCardBackground__image {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  display: block !important;
}

/* Measurable-results / stat rhythm matches Stripe customers. */
body.mw-source-customers .Copy.variant--Stat .Copy__title {
  color: #0a2540;
}

body.mw-source-customers .Copy.variant--Section .Copy__title {
  color: #0a2540;
}

/* === Customers by solution: GraphicWall (vendored + fit to 1266 rails) === */
.GraphicWallGrid{--gridContainerHeightXSmall:374px;--gridContainerHeightSmall:474px;--gridContainerHeightMedium:654px;--gridContainerHeightLarge:764px;--gridRowsXSmall:107px 87px 125px 185px;--gridRowsSmall:70px 157px 97px 333px;--gridRowsMedium:86px 201px 126px 425px;--gridRowsLarge:101px 235px 148px 500px;--gridColumnsXSmall:112px 141px 58px 38px;--gridColumnsSmall:253px 392px 201px;--gridColumnsMedium:323px 501px 256px;--gridColumnsLarge:380px 589px 301px;--gridYOffsetXSmall:-30px;--gridYOffsetSmall:-30px;--gridYOffsetMedium:-80px;--gridYOffsetLarge:-110px;--gridGapXSmall:16px 16px;--gridGapSmall:25px 25px;--gridGapMedium:35px 35px;--gridGapLarge:40px 40px;position:relative;height:var(--gridContainerHeightXSmall)}@media (min-width:397px){.GraphicWallGrid{height:var(--gridContainerHeightSmall)}}@media (min-width:896px) and (max-height:899px){.GraphicWallGrid{height:var(--gridContainerHeightMedium)}}@media (min-height:900px){.GraphicWallGrid{height:var(--gridContainerHeightLarge)}}.GraphicWallGrid__layout{display:grid;gap:var(--gridGapXSmall);grid-template-columns:var(--gridColumnsXSmall);grid-template-rows:var(--gridRowsXSmall);position:absolute;top:var(--gridYOffsetXSmall);pointer-events:none}@media (min-width:397px){.GraphicWallGrid__layout{top:var(--gridYOffsetSmall);gap:var(--gridGapSmall);grid-template-columns:var(--gridColumnsSmall);grid-template-rows:var(--gridRowsSmall)}}@media (min-width:896px) and (max-height:899px){.GraphicWallGrid__layout{top:var(--gridYOffsetMedium);gap:var(--gridGapMedium);grid-template-columns:var(--gridColumnsMedium);grid-template-rows:var(--gridRowsMedium)}}@media (min-width:896px) and (min-height:900px){.GraphicWallGrid__layout{top:var(--gridYOffsetLarge);gap:var(--gridGapLarge);grid-template-columns:var(--gridColumnsLarge);grid-template-rows:var(--gridRowsLarge)}}.GraphicWallGrid__section{display:flex;flex-direction:column}.GraphicWallGrid__section--topLeft{grid-area:2/2}@media (min-width:397px){.GraphicWallGrid__section--topLeft{grid-area:2/1}}.GraphicWallGrid__section--topCenter{grid-area:3/2/3/4}@media (min-width:397px){.GraphicWallGrid__section--topCenter{grid-area:2/2/span 2}}.GraphicWallGrid__section--topRight{grid-area:1/3/2/5}@media (min-width:397px){.GraphicWallGrid__section--topRight{grid-area:span 2/3}}.GraphicWallGrid__section--bottomLeft{grid-area:2/1}@media (min-width:397px){.GraphicWallGrid__section--bottomLeft{grid-area:3/1}}.GraphicWallGrid__section--bottomRight{grid-area:4/1/4/4}@media (min-width:397px){.GraphicWallGrid__section--bottomRight{grid-area:4/2/4/4}}
@media (max-width:396px){.CustomersGraphicWallGraphic__payInvoice .PayInvoiceGraphic{height:342px}.CustomersGraphicWallGraphic__payInvoice .PayInvoiceGraphic__modal{position:relative;top:28px}}@media (min-width:397px){.CustomersGraphicWallGraphic__applePay{align-self:flex-end}}@media (min-width:896px) and (max-height:899px){.CustomersGraphicWallGraphic__applePay{width:85%!important}}@media (min-width:896px) and (min-height:900px){.CustomersGraphicWallGraphic__applePay{width:100%}}

/* DomGraphic base (needed when CDN/JS missing) */
.DomGraphic{--maxWidth:100%;--willChange:initial;position:relative;width:100%;max-width:var(--maxWidth)}@media (max-width:600px){.DomGraphic{max-width:var(--maxWidthPhone,var(--maxWidth))}}@media (min-width:600px) and (max-width:899px){.DomGraphic{max-width:var(--maxWidthTablet,var(--maxWidth))}}@media (min-width:900px){.DomGraphic{max-width:var(--maxWidthDesktop,var(--maxWidth))}}.DomGraphic__heightContainer{height:0;width:100%;max-width:var(--maxWidth);padding-bottom:var(--aspectRatio)}.DomGraphic__scaleContainer{position:absolute;top:0;left:0;transform-origin:top left;will-change:var(--willChange)}.DomGraphic--isAnimating .DomGraphic__scaleContainer{will-change:transform}

/* Without Stripe DomGraphic JS, scale design pixels to the cell width */
body.mw-source-customers .GraphicWallGrid .DomGraphic {
  container-type: inline-size;
  container-name: mw-domgraphic;
  width: 100%;
  max-width: 100% !important;
  min-width: 0;
}

body.mw-source-customers .GraphicWallGrid .DomGraphic__scaleContainer {
  transform: scale(min(1, calc(100cqw / var(--domGraphicWidth)))) !important;
  transform-origin: top left !important;
}

/* Fraud & risk card (bottomRight) is a plain Picture, not DomGraphic */
body.mw-source-customers .GraphicWallGrid__section--bottomRight {
  min-width: 0;
  overflow: hidden;
}

body.mw-source-customers .GraphicWallGrid__section--bottomRight .Card {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

body.mw-source-customers .GraphicWallGrid__section--bottomRight .Picture,
body.mw-source-customers .GraphicWallGrid__section--bottomRight .Picture__image,
body.mw-source-customers .GraphicWallGrid__section--bottomRight img {
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  display: block;
}

/* Tall viewports use Large columns (~1350px) — too wide for our rails.
   Prefer Medium metrics so the collage fits ~1266 content. */
@media (min-height: 900px) {
  body.mw-source-customers .GraphicWallGrid {
    height: var(--gridContainerHeightMedium) !important;
  }
  body.mw-source-customers .GraphicWallGrid__layout {
    top: var(--gridYOffsetMedium) !important;
    gap: var(--gridGapMedium) !important;
    grid-template-columns: var(--gridColumnsMedium) !important;
    grid-template-rows: var(--gridRowsMedium) !important;
  }
}

/* Keep collage inside the section; allow intentional soft overlap inside cells */
body.mw-source-customers .GraphicWallGrid {
  max-width: 100%;
  overflow: visible;
}

body.mw-source-customers .GraphicWallGrid__layout {
  max-width: 100%;
}

body.mw-source-customers .GraphicWallGrid__section {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

/* Solution checklist under Copy footer */
body.mw-source-customers .Copy.variant--Section > .Copy__footer .List[data-column-count="2"] .List__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 12px;
}

body.mw-source-customers .Copy.variant--Section > .Copy__footer .ListItem--hasIcon {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.mw-source-customers .Copy.variant--Section > .Copy__footer .ListItem__label.Link,
body.mw-source-customers .Copy.variant--Section > .Copy__footer a.ListItem__label {
  color: #635bff;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.4;
}

body.mw-source-customers .Copy.variant--Section > .Copy__footer .ListItem__label.Link:hover,
body.mw-source-customers .Copy.variant--Section > .Copy__footer a.ListItem__label:hover {
  text-decoration: underline;
}

body.mw-source-customers .Copy.variant--Section > .Copy__footer .ColumnLayout[data-columns="2,2"] {
  margin-top: 8px;
}

@media (max-width: 699px) {
  body.mw-source-customers .Copy.variant--Section > .Copy__footer .List[data-column-count="2"] .List__list {
    grid-template-columns: 1fr;
  }
}
/* === end Customers by solution GraphicWall === */

/* === Ready to get started CTA row === */
.AnimatedIcon {
  --iconSize: 40px;
  --svgSize: 96px;
  width: var(--iconSize);
  height: var(--iconSize);
}

.AnimatedIcon__iconContainer {
  position: relative;
  left: calc(var(--columnPaddingNormal) * -1);
}

.AnimatedIcon__icon {
  position: absolute;
  top: calc(var(--svgSize) * -1 / 2 - var(--iconSize) * -1 / 2);
  left: 0;
  display: block;
  pointer-events: none;
}

body.mw-source-customers .ColumnLayout[data-columns="2,1,1"] > .Copy.variant--Subsection .Copy__title {
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #0a2540;
  font-weight: 400 !important;
}

/* Keep the lower ready-state pair on the same 48px control system as the
   banner. The compact capture styling below remains for the two supporting
   detail columns only. */
body.mw-source-customers .ColumnLayout[data-columns="2,1,1"] .CtaGroup--inline:not(.mw-customer-ready-cta-group) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

body.mw-source-customers .ColumnLayout[data-columns="2,1,1"] .CtaButton.variant--Button:not(.mw-customer-ready-cta) {
  display: inline-flex;
  align-items: center;
  height: 33px;
  padding: 0 16px 1px;
  border-radius: 16.5px;
  background: #635bff;
  color: #fff;
  font: 500 15px / 1 var(--fontFamily, sohne-var, sans-serif);
  letter-spacing: 0.2px;
  text-decoration: none;
}

body.mw-source-customers .ColumnLayout[data-columns="2,1,1"] .CtaButton.variant--Button:not(.mw-customer-ready-cta):hover {
  opacity: 0.9;
}

body.mw-source-customers .ColumnLayout[data-columns="2,1,1"] .CtaButton.variant--Button:not(.mw-customer-ready-cta) .HoverArrow path {
  fill: #fff;
  stroke: #fff;
}

body.mw-source-customers .ColumnLayout[data-columns="2,1,1"] .CtaButton.variant--Link {
  display: inline-flex;
  align-items: center;
  color: #635bff;
  font-weight: 400 !important;
  font-size: 15px;
  line-height: 24px;
  text-decoration: none;
}

body.mw-source-customers .ColumnLayout[data-columns="2,1,1"] .CtaButton.variant--Link:hover {
  color: #0a2540;
}

body.mw-source-customers .ColumnLayout[data-columns="2,1,1"] .Copy.variant--Detail .Copy__icon {
  margin-bottom: 8px;
  min-height: 40px;
}
/* === end Ready CTA === */

/* === Building together CaseStudyCarousel: kill tall-slide gap ===
   Without Stripe carousel JS, the flex track height = tallest slide
   (Shopify/Flexport quotes), so Lyft shows a huge empty gap above the logos.
*/
body.mw-source-customers .CaseStudyCarousel {
  --caseStudyCarouselOffsetLeft: var(--columnPaddingNormal);
  --caseStudyCarouselPaddingBottom: 120px;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-bottom: 0;
}

@media (min-width: 1112px) {
  body.mw-source-customers .CaseStudyCarousel {
    --caseStudyCarouselOffsetLeft: 0px;
  }
}

body.mw-source-customers .CaseStudyCarousel__container {
  width: 100%;
  -webkit-mask-image: none;
  mask-image: none;
}

body.mw-source-customers .CaseStudyCarousel__track {
  display: block;
  position: relative;
  overflow: visible;
  scroll-snap-type: none;
  padding: 0;
  margin: 0;
}

/* Only the active slide contributes height; others are out of flow */
body.mw-source-customers .CaseStudyCarousel__track > .CaseStudy {
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0 0 var(--caseStudyCarouselPaddingBottom);
  scroll-snap-align: unset;
}

body.mw-source-customers .CaseStudyCarousel__track > .CaseStudy:not(.is-active) {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  visibility: hidden;
  pointer-events: none;
}

body.mw-source-customers .CaseStudyCarousel__track > .CaseStudy.is-active {
  position: relative;
  visibility: visible;
  pointer-events: auto;
  height: auto;
  overflow: visible;
}

/* Scale single DomGraphic media (Lyft). Do NOT apply to Instacart phone overlay. */
body.mw-source-customers .CaseStudy__media > .DomGraphic {
  container-type: inline-size;
  width: 100%;
  max-width: min(540px, 100%) !important;
  margin-left: auto;
  margin-right: auto;
}

body.mw-source-customers .CaseStudy__media > .DomGraphic .DomGraphic__scaleContainer {
  transform: scale(min(1, calc(100cqw / var(--domGraphicWidth, 540px)))) !important;
  transform-origin: top left !important;
}

/* Instacart: pepper photo + cashout phone must overlap (Stripe TogetherWithInstacart).
   Without this, phone DomGraphic stacks below and creates a huge gap. */
.PhoneGraphic {
  --phoneBorderRadius: 36px;
  --phoneScreenBorderRadius: 29px;
  --phoneWidth: 264px;
  --phoneHeight: 533px;
  --phoneGraphicShadow: 0 50px 100px -20px rgba(50, 50, 93, 0.25),
    0 30px 60px -30px rgba(0, 0, 0, 0.3), inset 0 -2px 6px 0 rgba(10, 37, 64, 0.35);
  width: var(--phoneWidth);
  height: var(--phoneHeight);
  padding: 8px;
  border-radius: var(--phoneBorderRadius);
  background: #f6f9fc;
  box-shadow: var(--phoneGraphicShadow);
  user-select: none;
  font-size: 16px;
}

.PhoneGraphic__screen {
  position: relative;
  height: 100%;
  border-radius: var(--phoneScreenBorderRadius);
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  background: #fff;
}

.InstacartCashoutGraphic {
  --instacartGreen: #0aad0a;
}

.InstacartCashoutGraphic__close {
  position: absolute;
  left: 24px;
  top: 24px;
  width: 18px;
  height: 18px;
}

.InstacartCashoutGraphic__close:after,
.InstacartCashoutGraphic__close:before {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  left: 0;
  top: 50%;
  background-color: var(--instacartGreen);
}

.InstacartCashoutGraphic__close:before {
  transform: translateY(-50%) rotate(-45deg);
}

.InstacartCashoutGraphic__close:after {
  transform: translateY(-50%) rotate(45deg);
}

.InstacartCashoutGraphic__content {
  max-width: 200px;
  height: 100%;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.InstacartCashoutGraphic__header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 0 16px;
  border-bottom: 1px solid #f6f9fc;
  margin: 50px auto 35px;
}

.InstacartCashoutGraphic__title {
  font: var(--fontWeightNormal) 11px / 14px var(--fontFamily);
  letter-spacing: 0.2px;
  color: #4f5b76;
  margin: 14px 0 0;
}

.InstacartCashoutGraphic__amount {
  font: var(--fontWeightBold) 23px / 29px var(--fontFamily);
  color: #000;
  margin: 0 0 22px;
}

.InstacartCashoutGraphic__detailLabel {
  font: var(--fontWeightNormal) 8px / 10px var(--fontFamily);
  color: #abb5c5;
  text-align: center;
}

.InstacartCashoutGraphic__table {
  font: var(--fontWeightNormal) 11px / 14px var(--fontFamily);
  color: #4f5b76;
  width: 100%;
}

.InstacartCashoutGraphic__tableRow {
  display: grid;
  grid: repeat(3, auto) / repeat(2, auto);
  padding: 4px 0;
}

.InstacartCashoutGraphic__tableRow > div:last-child {
  text-align: right;
}

.InstacartCashoutGraphic__tableRow--footer {
  margin: 4px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid #f6f9fc;
}

.InstacartCashoutGraphic__cardDestination {
  box-shadow: var(--cardShadowXSmall);
  border-radius: 7px;
  background-color: #fff;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  width: 122px;
  margin: 37px 0 11px;
  font: var(--fontWeightNormal) 9px / 12px var(--fontFamily);
  color: #4f5b76;
}

.InstacartCashoutGraphic__visaIcon {
  margin-right: 9px;
}

.InstacartCashoutGraphic__editLabel {
  color: var(--instacartGreen);
  margin-left: auto;
}

.InstacartCashoutGraphic__button {
  background-color: var(--instacartGreen);
  padding: 12px 0;
  font: var(--fontWeightBold) 11px / 14px var(--fontFamily);
  color: #fff;
  letter-spacing: 0.2px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 7px;
  margin: 34px 0 0;
}

body.mw-source-customers .CustomersOverviewTogetherWithInstacart {
  position: relative !important;
  width: min(540px, 100%);
  max-width: 540px;
  aspect-ratio: 540 / 581;
  margin-left: auto;
  margin-right: auto;
}

body.mw-source-customers .CustomersOverviewTogetherWithInstacart__photoWrapper {
  width: 540px;
  height: 581px;
}

body.mw-source-customers .CustomersOverviewTogetherWithInstacart__photo {
  position: absolute;
  top: 0;
  left: 32px;
  box-shadow: var(--cardShadowSmall);
  border-radius: var(--cardBorderRadius, 4px);
  overflow: hidden;
  width: 267px;
}

body.mw-source-customers
  .CustomersOverviewTogetherWithInstacart
  > .DomGraphic:not(.CustomersOverviewTogetherWithInstacart__phone) {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
}

body.mw-source-customers
  .CustomersOverviewTogetherWithInstacart
  > .DomGraphic:not(.CustomersOverviewTogetherWithInstacart__phone)
  .DomGraphic__heightContainer {
  height: 100% !important;
  padding-bottom: 0 !important;
  max-width: none !important;
}

body.mw-source-customers
  .CustomersOverviewTogetherWithInstacart
  > .DomGraphic:not(.CustomersOverviewTogetherWithInstacart__phone)
  .DomGraphic__scaleContainer {
  transform: none !important;
  position: relative !important;
  width: 100%;
  height: 100%;
}

body.mw-source-customers .CustomersOverviewTogetherWithInstacart__phone.DomGraphic,
body.mw-source-customers .CaseStudy__media .CustomersOverviewTogetherWithInstacart__phone {
  position: absolute !important;
  top: 46px !important;
  left: 243px !important;
  width: 264px !important;
  max-width: 264px !important;
  margin: 0 !important;
  z-index: 2;
}

@media (max-width: 899px) {
  body.mw-source-customers .CustomersOverviewTogetherWithInstacart__phone.DomGraphic,
  body.mw-source-customers .CaseStudy__media .CustomersOverviewTogetherWithInstacart__phone {
    left: auto !important;
    right: 0 !important;
  }
}

body.mw-source-customers .CustomersOverviewTogetherWithInstacart__phone .DomGraphic__heightContainer {
  padding-bottom: var(--aspectRatio, 201.8939393939394%) !important;
  height: 0 !important;
}

body.mw-source-customers .CustomersOverviewTogetherWithInstacart__phone .DomGraphic__scaleContainer {
  transform: scale(1) !important;
  transform-origin: top left !important;
}

body.mw-source-customers .CaseStudyCarouselNav {
  --columnOffset: 0;
}

body.mw-source-customers .CaseStudyCarouselNav__desktopNav {
  position: relative;
  z-index: 1;
  margin: 8px 0 0;
  top: calc(var(--caseStudyCarouselPaddingBottom, 120px) * -1);
}

body.mw-source-customers .CaseStudyCarouselNav__userLogos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.mw-source-customers .CaseStudyCarouselNavItem {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0 0;
}

body.mw-source-customers .CaseStudyCarouselNavItem__button,
body.mw-source-customers .CaseStudyCarouselNavItem button {
  outline: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 16px 0;
  opacity: 0.45;
}

body.mw-source-customers .CaseStudyCarouselNavItem.is-active .CaseStudyCarouselNavItem__button,
body.mw-source-customers .CaseStudyCarouselNavItem.is-active button {
  opacity: 1;
}
/* === end CaseStudyCarousel gap fix === */

/* Customer Stories hero: reuse the exact five-card staircase from /guides/.
   The card content stays customer-story specific; only its composition changes. */
body.mw-source-customers .CustomersHero .BreadcrumbNav {
  margin-bottom: 28px;
}

/* The Guides and Customers eyebrows are the same self-refreshing page link.
   Keep their typography and accent locked together rather than relying on
   the different source captures' inherited link rules. */
body.mw-source-guides .GuidesHomeHero .BreadcrumbNavItem__link,
body.mw-source-customers .CustomersHero .BreadcrumbNavItem__link {
  color: #635bff !important;
  font-family: var(--fontFamily, sohne-var, "Helvetica Neue", Arial, sans-serif) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 28px !important;
  text-decoration: none;
}

body.mw-source-customers .CustomersHero .Copy.variant--Hero {
  row-gap: 20px;
}

body.mw-source-customers .CustomersHero .Copy.variant--Hero .Copy__title {
  font-weight: 400 !important;
  color: #0a2540;
}

/* Match the Guides hero's three-line text measure. */
body.mw-source-customers .CustomersHero .Copy.variant--Hero .Copy__body {
  max-width: 34rem;
  --bodyMaxWidth: 34rem;
}

/* Guides uses a 20px copy rhythm. Add 12px only before this paired action
   group so the body-to-CTA interval is the shared 32px page-action spacing. */
body.mw-source-customers .CustomersHero .Copy.variant--Hero .Copy__footer {
  margin-top: 12px;
}

@media (min-width: 900px) {
  body.mw-source-customers .CustomersHero .BreadcrumbNav {
    margin-bottom: 36px;
  }

  body.mw-source-customers .CustomersHero.Section[data-mw-guides-card-layout="true"] + .Section {
    /* The logo rail is now carried by the hero grid itself. */
    margin-top: 0;
  }

  /* Match GuidesHomeHero__layout: the full hero layout is the positioned
   content rail for the hanging card group, including its vertical offset and
   the customer-logo rail beneath it. */
  body.mw-source-customers .CustomersHero .mw-customer-guides-hero-layout {
    position: relative;
    min-height: 1100px;
  }

  body.mw-source-customers .CustomersHero .mw-customer-logo-strip {
    position: absolute;
    top: 995px;
    right: 0;
    left: 0;
    width: 100%;
    margin: 0;
  }

  body.mw-source-customers .CustomersHero [data-mw-customer-logo-rail="true"] {
    gap: clamp(24px, 3vw, 48px);
    padding: 20px 0;
  }

  /* The four result statements use the page's four guide cells. The indigo
     anchors stay at the cell edge while the copy keeps its intentional inset. */
  body.mw-source-customers .CustomersHero.Section[data-mw-guides-card-layout="true"] + .Section .ColumnLayout[data-columns="1,1,1,1"],
  body.mw-source-customers [data-mw-customer-ready-band="true"] .ColumnLayout[data-columns="2,1,1"] {
    --mw-customer-grid-edge: var(--columnPaddingNormal, 16px);
    width: calc(100% + (var(--mw-customer-grid-edge) * 2));
    max-width: none;
    margin-inline: calc(var(--mw-customer-grid-edge) * -1);
    column-gap: 0;
  }

  body.mw-source-customers .CustomersHero__graphic {
    position: absolute !important;
    right: 16px !important;
    top: 72px !important;
    bottom: auto !important;
    left: auto !important;
    width: 50% !important;
    margin: 0 !important;
  }

  body.mw-source-customers .CustomersHero__track {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.mw-source-customers .CustomersHero__caseStudiesGrid[data-mw-guides-card-layout="true"] {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: grid !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: repeat(3, 254px) !important;
    grid-template-rows: 115px 225px 115px 356px !important;
    gap: 16px !important;
    justify-content: flex-end !important;
  }

  body.mw-source-customers .CustomersHero__caseStudiesGrid[data-mw-guides-card-layout="true"] > .CustomersCaseStudyCard {
    position: relative !important;
    top: auto !important;
    width: 254px !important;
    height: 356px !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    transform: none !important;
  }

  body.mw-source-customers .CustomersHero__caseStudiesGrid[data-mw-guides-card-layout="true"] > .CustomersCaseStudyCard:nth-child(1) {
    grid-column: 3;
    grid-row: 1;
  }

  body.mw-source-customers .CustomersHero__caseStudiesGrid[data-mw-guides-card-layout="true"] > .CustomersCaseStudyCard:nth-child(2) {
    grid-column: 2;
    grid-row: 2;
  }

  body.mw-source-customers .CustomersHero__caseStudiesGrid[data-mw-guides-card-layout="true"] > .CustomersCaseStudyCard:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
  }

  body.mw-source-customers .CustomersHero__caseStudiesGrid[data-mw-guides-card-layout="true"] > .CustomersCaseStudyCard:nth-child(4) {
    grid-column: 3;
    grid-row: 3;
  }

  body.mw-source-customers .CustomersHero__caseStudiesGrid[data-mw-guides-card-layout="true"] > .CustomersCaseStudyCard:nth-child(5) {
    grid-column: 2;
    grid-row: 4;
  }
}


/* mw-customer-stories-footer-grid-alignment */
/* Keep the Customer Stories rail grid on the same outer 1266px geometry as the shared footer. */
@media (min-width: 640px) {
  body.mw-source-customers .Guides__container {
    width: min(var(--mw-page-max), calc(100vw - 2 * var(--mw-page-margin))) !important;
    max-width: var(--mw-page-max) !important;
    margin-inline: auto !important;
  }
}