/* Guides page – hero + shared left/right page rails */

body.mw-source-guides {
  --radar-page-max: 1266px;
  --radar-page-margin: 0px;
  --radar-content-pad: 16px;
  --guides-title: #0a2540;
  --guides-text: #425466;
  --guides-muted: #697386;
  --guides-accent: #635bff;
  --guides-bg: #ffffff;
  --guides-bg-soft: #f6f9fc;
  --guides-border: #e3e8ee;
  --guides-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --guides-shadow:
    0 13px 27px -5px rgba(50, 50, 93, 0.1),
    0 8px 16px -8px rgba(0, 0, 0, 0.1);
  overflow-x: clip;
  background: var(--guides-bg);
}

@media (min-width: 640px) {
  body.mw-source-guides {
    --radar-page-margin: var(--mw-page-margin, 16px);
  }

  /* Rails drawn by guides-page-width.css — avoid duplicate lines here */
}

.guides-page *,
.guides-page *::before,
.guides-page *::after {
  box-sizing: border-box;
}

.guides-page {
  font-family: var(--guides-font);
  color: var(--guides-title);
  background: var(--guides-bg);
}

.guides-page > section {
  padding-inline: var(--radar-page-margin);
}

.guides-wrap {
  width: min(var(--mw-page-max, var(--radar-page-max)), 100%);
  margin-inline: auto;
  padding-inline: var(--radar-content-pad);
  box-sizing: border-box;
}

/*
  Hero: full viewport width with padding locked to --mw-rail-inset so the product
  card ends exactly on the body rail (same formula as guides-page-width.css).
*/
@media (min-width: 640px) {
  .guides-page > .guides-hero {
    padding-inline: 0;
  }

  .guides-hero .guides-wrap {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-left: calc(var(--mw-rail-inset, var(--radar-page-margin)) + var(--radar-content-pad));
    padding-right: var(--mw-rail-inset, var(--radar-page-margin));
    overflow: clip;
  }
}

.guides-link {
  color: var(--guides-accent);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.guides-link:hover {
  color: var(--guides-title);
}

.guides-chevron {
  display: inline-block;
  margin-left: 0.15em;
}

/* ----- Hero ----- */

.guides-hero {
  background: var(--guides-bg-soft);
  /* Stripe guide detail — Section__layout padding-top + BreadcrumbNav padding-top */
  padding-block: 16px 56px;
  border-bottom: 1px solid rgba(66, 71, 112, 0.09);
}

@media (min-width: 750px) {
  .guides-hero {
    padding-block: 16px 72px;
  }
}

@media (min-width: 900px) {
  .guides-hero {
    padding-block: 24px 96px;
  }
}

/* Stripe BreadcrumbNav — https://stripe.com/guides/optimizing-payments-at-scale */
.guides-breadcrumb {
  padding: 16px 0 0;
  margin: 0;
}

.guides-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guides-breadcrumb__item {
  display: inline-flex;
  align-items: center;
}

.guides-breadcrumb__item + .guides-breadcrumb__item::before {
  content: "/";
  margin: 0 6px 0 10px;
  color: #c2ccd9;
  font: inherit;
}

body.mw-source-guides .guides-breadcrumb__link {
  font: 425 18px/28px var(--guides-font) !important;
  letter-spacing: 0.2px;
  color: var(--guides-accent);
  text-decoration: none;
}

body.mw-source-guides .guides-breadcrumb__link:hover {
  color: var(--guides-title);
}

.guides-hero__grid {
  display: grid;
  gap: 40px;
  align-items: start;
  /* Stripe ref — gap between breadcrumb row and H1/card row */
  padding-top: 48px;
}

@media (min-width: 750px) {
  .guides-hero__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 40px 48px;
    align-items: start;
    padding-top: 64px;
  }
}

@media (min-width: 900px) {
  .guides-hero__grid {
    grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr);
    gap: 48px 64px;
    padding-top: 72px;
  }
}

/* Stripe GuidesHero Copy.variant--Hero — https://stripe.com/guides/state-of-online-fraud */
body.mw-source-guides .guides-hero__copy {
  display: grid;
  gap: 32px;
  max-width: 700px;
}

body.mw-source-guides .guides-hero__title {
  margin: 0;
  font: 500 48px/56px var(--guides-font) !important;
  letter-spacing: -0.02em !important;
  color: var(--guides-title);
}

body.mw-source-guides .guides-hero__desc {
  margin: 0;
  font: 300 18px/28px var(--guides-font) !important;
  letter-spacing: 0.2px;
  color: var(--guides-text);
}

body.mw-source-guides .guides-hero__cta {
  margin: 0;
  font: 425 15px/24px var(--guides-font) !important;
}

body.mw-source-guides .guides-hero .guides-link {
  font-weight: 425 !important;
}

/* ----- Product card (Stripe GuidesProductCard) ----- */

.guides-product-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 22px 12px 16px 16px;
  border: 1px solid #e7ecf1;
  border-right: none;
  border-radius: 8px 0 0 8px;
  background: #fff;
  box-shadow: none !important;
  box-sizing: border-box;
  overflow: hidden;
}

@media (min-width: 750px) {
  .guides-product-card {
    align-self: start;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}

@media (min-width: 900px) {
  /*
    Card top = H1 top. Do NOT use margin-bottom here — it inflated the grid
    row and vertically centered the copy block (looked like H1 moved up).
  */
  .guides-product-card {
    margin-bottom: 0;
  }
}

.guides-product-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.guides-product-card__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.guides-product-card__img,
.guides-product-card__svg {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: cover;
}

body.mw-source-guides .guides-product-card__label {
  font: 500 14px/24px var(--guides-font) !important;
  letter-spacing: 0.2px;
  color: var(--guides-title);
}

body.mw-source-guides .guides-product-card__body {
  margin: 0;
  font: 300 15px/24px var(--guides-font) !important;
  letter-spacing: 0.2px;
  color: var(--guides-text);
}

body.mw-source-guides .guides-product-card__brand {
  color: var(--guides-accent);
  text-decoration: none;
  font-weight: 425 !important;
}

.guides-product-card__brand:hover {
  color: var(--guides-title);
}

.guides-product-card__cta {
  margin: 0;
  font: 425 15px/24px var(--guides-font) !important;
}

@media (max-width: 639px) {
  .guides-product-card {
    margin-left: 16px;
    margin-right: 0;
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
  }
}

/* ----- Article: 25% TOC + 75% content ----- */

.guides-article {
  background: #fff;
  padding-block: 48px 80px;
}

@media (min-width: 900px) {
  .guides-article {
    padding-block: 64px 112px;
  }
}

.guides-article__layout {
  display: grid;
  gap: 40px;
  align-items: start;
}

@media (min-width: 900px) {
  .guides-article__layout {
    grid-template-columns: minmax(0, 0.28fr) minmax(0, 0.72fr);
    gap: 48px 40px;
  }
}

.guides-toc {
  display: none;
}

@media (min-width: 900px) {
  .guides-toc {
    display: block;
    position: sticky;
    top: 96px;
    padding-left: 16px;
    align-self: start;
  }
}

.guides-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.guides-toc__link {
  position: relative;
  display: block;
  padding-left: 14px;
  color: var(--guides-title);
  text-decoration: none;
  font: 500 16px / 24px var(--guides-font);
  letter-spacing: 0.2px;
  transition: color 0.15s ease;
}

.guides-toc__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 2px;
  border-radius: 1px;
  background: transparent;
}

.guides-toc__link:hover {
  color: var(--guides-accent);
}

.guides-toc__link.is-active {
  color: var(--guides-accent);
  font-weight: 500;
}

.guides-toc__link.is-active::before {
  background: var(--guides-accent);
}

.guides-toc__pdf {
  margin: 28px 0 0;
  padding-left: 14px;
  font: 500 16px / 24px var(--guides-font);
}

.guides-article__content {
  min-width: 0;
  padding-left: 16px;
  max-width: 46rem;
}

@media (min-width: 900px) {
  .guides-article__content {
    padding-left: 8px;
    max-width: none;
  }
}

.guides-block {
  display: grid;
  gap: 24px 0;
  scroll-margin-top: 96px;
  margin-bottom: 56px;
}

@media (min-width: 900px) {
  .guides-block {
    margin-bottom: 72px;
  }
}

.guides-block:last-child {
  margin-bottom: 0;
}

.guides-block__accent {
  width: 40px;
  height: 3px;
  margin: 0 0 20px;
  border-radius: 2px;
  background: var(--guides-accent);
}

.guides-block__title {
  margin: 0;
  font: 500 34px / 44px var(--guides-font);
  letter-spacing: -0.1px;
  color: var(--guides-title);
}

.guides-block__title:not(:first-child) {
  margin-top: 48px;
}

.guides-block__subtitle {
  margin: 0;
  font: 500 24px / 32px var(--guides-font);
  letter-spacing: 0.1px;
  color: var(--guides-title);
}

.guides-block__subtitle:not(:first-child) {
  margin-top: 32px;
}

.guides-block__p {
  margin: 0;
  font: 300 18px / 28px var(--guides-font);
  letter-spacing: 0.2px;
  color: var(--guides-text);
}

html body.mw-source-guides .guides-page .guides-article__content p.guides-block__p,
html body.mw-source-guides .guides-page .guides-article__content .guides-list li {
  margin: 0 !important;
  font: 300 18px / 28px var(--guides-font) !important;
  letter-spacing: 0.2px !important;
  color: var(--guides-text) !important;
}

.guides-figure {
  margin: 0;
  width: 100%;
}

.guides-figure__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: 0;
}

.guides-figure--phone {
  max-width: min(100%, 560px);
  margin-inline: auto;
}

@media (min-width: 600px) {
  .guides-figure--phone {
    max-width: min(100%, 640px);
  }
}

.guides-figure--phone .guides-figure__img {
  width: 100%;
  background: transparent;
  border-radius: 0;
}

.guides-list {
  margin: 0;
  padding-left: 1.15em;
  display: grid;
  gap: 16px;
}

.guides-list li {
  font: 300 18px / 28px var(--guides-font);
  letter-spacing: 0.2px;
  color: var(--guides-text);
}

.guides-list li strong {
  color: var(--guides-title);
  font-weight: 600;
}

.guides-list--links {
  list-style: disc;
}

.guides-point {
  display: grid;
  gap: 24px 0;
  margin: 0;
}

/*
  Stripe ArticleMarkdown: each h3 is a direct grid child with margin-top: 32px
  on top of the 24px row gap. Our numbered points sit in .guides-point wrappers,
  so apply the h3 top margin on the block instead of the title (always :first-child).
*/
.guides-point:not(:first-child) {
  margin-top: 32px;
}

.guides-point__title {
  margin: 0;
  font: 500 24px / 32px var(--guides-font);
  letter-spacing: 0.1px;
  color: var(--guides-title);
}

html body.mw-source-guides .guides-page .guides-article__content .guides-block__title,
html body.mw-source-guides .guides-page .guides-article__content .guides-block__subtitle,
html body.mw-source-guides .guides-page .guides-article__content .guides-point__title {
  font-weight: 500 !important;
}

@media (max-width: 899px) {
  .guides-article__layout {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .guides-toc {
    display: block;
    position: static;
    order: 0;
    padding-left: 16px;
    padding-right: 16px;
    margin-bottom: 0;
    background: transparent;
  }

  .guides-article__content {
    order: 1;
  }

  .guides-toc__list {
    display: grid;
    gap: 14px;
    overflow: visible;
    padding-bottom: 0;
  }

  .guides-toc__list li {
    flex: initial;
  }

  .guides-toc__link {
    padding: 0 0 0 14px;
    border-radius: 0;
    background: transparent;
    white-space: normal;
    max-width: none;
    overflow: visible;
    text-overflow: unset;
    font: 500 16px / 24px var(--guides-font);
  }

  .guides-toc__link::before {
    display: block;
  }

  .guides-toc__link.is-active {
    background: transparent;
  }

  .guides-toc__pdf {
    display: block;
    margin: 28px 0 0;
  }
}

/* ----- Bottom CTA ----- */

.guides-cta {
  background: var(--guides-bg-soft);
  padding-block: 56px 72px;
  border-top: 1px solid rgba(66, 71, 112, 0.09);
}

@media (min-width: 900px) {
  .guides-cta {
    padding-block: 72px 96px;
  }
}

.guides-cta__layout {
  display: grid;
  gap: 40px;
  align-items: start;
}

/* Tablet: CTA on top, two cards side-by-side below */
@media (min-width: 600px) {
  .guides-cta__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px;
  }
}

/* Desktop: CTA left, two cards on the right */
@media (min-width: 900px) {
  .guides-cta__layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 48px 40px;
  }

  .guides-cta__cards {
    gap: 24px 28px;
  }
}

.guides-cta__title {
  margin: 0 0 16px;
  font: 700 28px / 1.2 var(--guides-font);
  letter-spacing: -0.3px;
  color: var(--guides-title);
}

@media (min-width: 600px) {
  .guides-cta__title {
    font-size: 34px;
  }
}

.guides-cta__desc {
  margin: 0 0 28px;
  max-width: 36rem;
  font: 400 16px / 1.6 var(--guides-font);
  letter-spacing: 0.2px;
  color: var(--guides-text);
}

@media (min-width: 600px) {
  .guides-cta__desc {
    font-size: 17px;
    line-height: 1.65;
  }
}

.guides-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.guides-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 6px;
  font: 600 15px / 1.2 var(--guides-font);
  letter-spacing: 0.2px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.guides-cta__btn--primary {
  background: var(--guides-accent);
  color: #fff;
  border: 1px solid var(--guides-accent);
}

.guides-cta__btn--primary:hover {
  background: #0a2540;
  border-color: #0a2540;
  color: #fff;
}

.guides-cta__btn--secondary {
  background: #fff;
  color: var(--guides-accent);
  border: 1px solid #cfd7df;
}

.guides-cta__btn--secondary:hover {
  border-color: var(--guides-accent);
  color: var(--guides-title);
}

/* Mobile: three separate stacked blocks */
.guides-cta__cards {
  display: grid;
  gap: 36px;
}

.guides-cta-card {
  min-width: 0;
}

.guides-cta-card__icon {
  display: grid;
  place-items: start;
  margin-bottom: 14px;
}

.guides-cta-card__icon .guides-product-card__svg,
.guides-cta-card__img {
  display: block;
  width: 40px;
  height: 40px;
}

.guides-cta-card__title {
  margin: 0 0 10px;
  font: 700 18px / 1.3 var(--guides-font);
  letter-spacing: -0.15px;
  color: var(--guides-title);
}

.guides-cta-card__desc {
  margin: 0 0 14px;
  font: 400 15px / 1.55 var(--guides-font);
  letter-spacing: 0.2px;
  color: var(--guides-text);
}

.guides-cta-card__link {
  margin: 0;
  font: 600 15px / 1.5 var(--guides-font);
}

/* Footer-only: strip HDS section-container side borders.
   Page-wide rails stay on body.mw-source-guides::before/::after. */
body.mw-source-guides .footer.section .section-container,
body.mw-source-guides .footer__container,
body.mw-source-guides .footer-links-section,
body.mw-source-guides .footer-links-section__content {
  border-left: none !important;
  border-right: none !important;
  border-inline: none !important;
}

body.mw-source-guides .footer__container::before,
body.mw-source-guides .footer__container::after,
body.mw-source-guides .footer-links-section::before,
body.mw-source-guides .footer-links-section::after,
body.mw-source-guides .footer-links-section__content::before,
body.mw-source-guides .footer-links-section__content::after {
  content: none !important;
  display: none !important;
}


/*
  Work-order guide desktop composition.
  This detail guide follows the editorial geometry of Stripe's current
  Introduction to Online Payments guide, without changing shared Guides,
  Customer Stories, navigation, footer, or other page templates.
*/
@media (min-width: 900px) {
  body.mw-source-guides .guides-page {
    --mw-work-order-layout: 1080px;
    --mw-work-order-angle: clamp(96px, 10.6vw, 160px);
    --mw-work-order-angle-space: clamp(128px, calc(10.6vw + 13px), 160px);
    --mw-work-order-article-space: clamp(220px, calc(10.6vw + 117px), 277px);
  }

  body.mw-source-guides .guides-page > .guides-hero {
    position: relative;
    isolation: isolate;
    min-height: 0;
    margin: 0 0 calc(-1 * var(--mw-work-order-angle)) !important;
    padding: 0 !important;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  body.mw-source-guides .guides-page > .guides-hero::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    content: "";
    background: var(--guides-bg-soft);
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - var(--mw-work-order-angle)),
      0 100%
    );
    pointer-events: none;
  }

  body.mw-source-guides .guides-page > .guides-hero .guides-wrap {
    position: relative;
    z-index: 1;
    width: min(var(--mw-work-order-layout), calc(100vw - 32px)) !important;
    max-width: var(--mw-work-order-layout) !important;
    min-height: 0;
    margin-inline: auto !important;
    padding: 0 0 var(--mw-work-order-angle-space) !important;
    overflow: visible !important;
  }

  body.mw-source-guides .guides-page > .guides-hero .guides-breadcrumb {
    box-sizing: border-box;
    height: 65px;
    min-height: 65px;
    margin: 0;
    padding: 16px 0 !important;
  }

  body.mw-source-guides .guides-page > .guides-hero .guides-breadcrumb__list {
    padding-left: 16px;
  }

  body.mw-source-guides .guides-page > .guides-hero .guides-hero__grid {
    grid-template-columns: 810px 270px;
    column-gap: 0;
    row-gap: 32px;
    padding-top: 64px;
  }

  body.mw-source-guides .guides-page > .guides-hero .guides-hero__copy {
    width: 810px;
    max-width: none;
    gap: 32px;
  }

  body.mw-source-guides .guides-page > .guides-hero .guides-hero__title {
    width: 652px;
    max-width: none;
    margin: 0 0 0 16px !important;
    font: 500 56px / 68px var(--guides-font) !important;
    letter-spacing: -0.02em !important;
  }

  body.mw-source-guides .guides-page > .guides-hero .guides-hero__desc {
    box-sizing: border-box;
    width: 700px;
    max-width: none;
    min-height: 0;
    margin: 0 !important;
    padding: 0 32px 0 16px;
    font: 300 18px / 28px var(--guides-font) !important;
  }

  body.mw-source-guides .guides-page > .guides-hero .guides-hero__cta {
    box-sizing: border-box;
    width: 810px;
    margin: 0 !important;
    padding: 0 16px;
    font: 425 15px / 24px var(--guides-font) !important;
  }

  body.mw-source-guides .guides-page > .guides-hero .guides-product-card {
    align-self: start;
    justify-self: stretch;
    width: 270px;
    max-width: 270px;
    min-width: 0;
    margin: 0;
    padding: 22px 12px 16px 16px;
    gap: 10px;
    border: 1px solid #e7ecf1;
    border-radius: 8px;
    background: #fff;
    box-shadow: none !important;
  }

  body.mw-source-guides .guides-page > .guides-hero .guides-product-card__icon {
    display: none !important;
  }

  body.mw-source-guides .guides-page > .guides-hero .guides-product-card__header {
    gap: 0;
  }

  body.mw-source-guides .guides-page > .guides-hero .guides-product-card__label {
    font: 500 14px / 24px var(--guides-font) !important;
  }

  body.mw-source-guides .guides-page > .guides-hero .guides-product-card__body {
    font: 300 15px / 24px var(--guides-font) !important;
  }

  body.mw-source-guides .guides-page > .guides-hero .guides-product-card__cta {
    font: 425 15px / 24px var(--guides-font) !important;
  }

  body.mw-source-guides .guides-page > .guides-article {
    padding: var(--mw-work-order-article-space) 0 128px;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-wrap {
    width: min(var(--mw-work-order-layout), calc(100vw - 32px)) !important;
    max-width: var(--mw-work-order-layout) !important;
    margin-inline: auto !important;
    padding: 0 !important;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-article__layout {
    grid-template-columns: 270px 810px;
    column-gap: 0;
    row-gap: 32px;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc {
    display: block;
    width: 270px;
    padding: 0;
    top: 96px;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__list,
  body.mw-source-guides .guides-page > .guides-article .guides-toc__sublist {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__list > li {
    margin: 0 0 16px;
    padding: 0 16px;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__sublist {
    margin-top: 16px;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__sublist > li + li {
    margin-top: 16px;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__link {
    display: inline;
    padding: 0;
    color: var(--guides-title);
    font: 425 16px / 20px var(--guides-font);
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__link::before {
    display: none;
    content: none;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__link.is-active {
    color: var(--guides-accent);
    font-weight: 425;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__link--sub {
    font-weight: 300;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__pdf {
    margin: 24px 0 0;
    padding: 0 16px;
    font: 425 16px / 20px var(--guides-font);
  }

  body.mw-source-guides .guides-page > .guides-article .guides-article__content {
    width: 810px;
    max-width: none;
    padding: 0;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-block__title,
  body.mw-source-guides .guides-page > .guides-article .guides-block__subtitle,
  body.mw-source-guides .guides-page > .guides-article .guides-point__title,
  body.mw-source-guides .guides-page > .guides-article p.guides-block__p {
    box-sizing: border-box;
    padding-right: 32px;
    padding-left: 16px;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-block__accent {
    display: none;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-list {
    margin-right: 32px;
    margin-left: 16px;
  }

  body.mw-source-guides .guides-page > .guides-cta {
    padding: 128px 0;
    border: 0;
    background: var(--guides-bg-soft);
  }

  body.mw-source-guides .guides-page > .guides-cta .guides-wrap {
    width: min(var(--mw-work-order-layout), calc(100vw - 32px)) !important;
    max-width: var(--mw-work-order-layout) !important;
    margin-inline: auto !important;
    padding: 0 !important;
  }

  body.mw-source-guides .guides-page > .guides-cta .guides-cta__layout {
    grid-template-columns: 540px 270px 270px;
    column-gap: 0;
    row-gap: 32px;
  }

  body.mw-source-guides .guides-page > .guides-cta .guides-cta__main {
    padding: 0 16px;
  }

  body.mw-source-guides .guides-page > .guides-cta .guides-cta__cards {
    display: contents;
  }

  body.mw-source-guides .guides-page > .guides-cta .guides-cta-card {
    padding: 0 16px;
  }

  body.mw-source-guides .guides-page > .guides-cta .guides-cta__title {
    margin: 0;
    font: 500 34px / 44px var(--guides-font);
  }

  body.mw-source-guides .guides-page > .guides-cta .guides-cta__desc {
    margin: 0;
    font: 300 18px / 28px var(--guides-font);
  }
}


/* Preserve the reference hierarchy where legacy guide weights use !important. */
@media (min-width: 900px) {
  body.mw-source-guides .guides-page > .guides-article .guides-toc__list > li > .guides-toc__link,
  body.mw-source-guides .guides-page > .guides-article .guides-toc__link.is-active {
    font-weight: 425 !important;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__link--sub {
    font-weight: 300 !important;
  }

  body.mw-source-guides .guides-page > .guides-cta .guides-cta__title {
    font: 500 34px / 44px var(--guides-font) !important;
  }
}


/* Closing guide panel: retain myWork colors, align the editorial proportions. */
@media (min-width: 900px) {
  body.mw-source-guides .guides-page > .guides-cta .guides-cta__main {
    padding: 0;
  }

  body.mw-source-guides .guides-page > .guides-cta .guides-cta__title {
    margin: 0 0 24px;
    padding: 0 16px;
    font: 500 26px / 36px var(--guides-font) !important;
  }

  body.mw-source-guides .guides-page > .guides-cta .guides-cta__desc {
    max-width: none;
    margin: 0 0 24px;
    padding: 0 112px 0 16px;
    font: 300 18px / 28px var(--guides-font) !important;
  }

  body.mw-source-guides .guides-page > .guides-cta .guides-cta__actions {
    gap: 16px;
    padding: 0 16px;
  }

  body.mw-source-guides .guides-page > .guides-cta .guides-cta__btn {
    min-height: 33px;
    padding: 3px 16px 6px;
    border-radius: 6px;
    font: 425 15px / 24px var(--guides-font) !important;
  }
}

/*
  Work-order guide — single-source editorial typography.
  This block intentionally replaces the prior layered overrides so every guide
  element follows one measured hierarchy.
*/
body.mw-source-guides {
  --guides-font: sohne-var, "Helvetica Neue", Arial, sans-serif;
  --guides-title: #0a2540;
  --guides-text: #425466;
  --guides-accent: #635bff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

body.mw-source-guides .guides-page,
body.mw-source-guides .guides-page :is(
  .guides-breadcrumb__link,
  .guides-hero__title,
  .guides-hero__desc,
  .guides-hero__cta,
  .guides-product-card__label,
  .guides-product-card__body,
  .guides-product-card__cta,
  .guides-toc__link,
  .guides-toc__pdf,
  .guides-block__title,
  .guides-block__subtitle,
  .guides-point__title,
  .guides-block__p,
  .guides-list li,
  .guides-cta__title,
  .guides-cta__desc,
  .guides-cta-card__title,
  .guides-cta-card__desc,
  .guides-cta-card__link,
  .guides-cta__btn
) {
  font-family: var(--guides-font) !important;
  font-optical-sizing: auto;
}

/* Hero: same scale, rhythm, and character treatment as the reference guide. */
body.mw-source-guides .guides-page > .guides-hero .guides-breadcrumb__link {
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 425 !important;
  font-variation-settings: "wght" 425 !important;
  letter-spacing: .2px !important;
}

body.mw-source-guides .guides-page > .guides-hero .guides-hero__title {
  font-size: 48px !important;
  line-height: 56px !important;
  font-weight: 500 !important;
  font-variation-settings: "wght" 500 !important;
  letter-spacing: -.02em !important;
  color: var(--guides-title) !important;
}

body.mw-source-guides .guides-page > .guides-hero .guides-hero__desc {
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 300 !important;
  font-variation-settings: "wght" 300 !important;
  letter-spacing: .2px !important;
  color: var(--guides-text) !important;
}

body.mw-source-guides .guides-page > .guides-hero .guides-hero__cta,
body.mw-source-guides .guides-page > .guides-hero .guides-hero__cta .guides-link,
body.mw-source-guides .guides-page > .guides-hero .guides-product-card__cta,
body.mw-source-guides .guides-page > .guides-hero .guides-product-card__cta .guides-link {
  font-size: 15px !important;
  line-height: 24px !important;
  font-weight: 425 !important;
  font-variation-settings: "wght" 425 !important;
  letter-spacing: .2px !important;
}

body.mw-source-guides .guides-page > .guides-hero .guides-product-card__label {
  font-size: 14px !important;
  line-height: 24px !important;
  font-weight: 500 !important;
  font-variation-settings: "wght" 500 !important;
  letter-spacing: .2px !important;
}

body.mw-source-guides .guides-page > .guides-hero .guides-product-card__body {
  font-size: 15px !important;
  line-height: 24px !important;
  font-weight: 300 !important;
  font-variation-settings: "wght" 300 !important;
  letter-spacing: .2px !important;
  color: var(--guides-text) !important;
}

@media (min-width: 900px) {
  body.mw-source-guides .guides-page > .guides-hero .guides-hero__grid {
    padding-top: 68px;
  }

  body.mw-source-guides .guides-page > .guides-hero .guides-hero__copy {
    gap: 32px;
  }

  body.mw-source-guides .guides-page > .guides-hero .guides-hero__title {
    width: 700px;
  }

  /* Contents rail: strengthened parent items, quieter nested items, and one animated guide line. */
  body.mw-source-guides .guides-page > .guides-article .guides-toc__list > li {
    margin-bottom: 16px;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__link,
  body.mw-source-guides .guides-page > .guides-article .guides-toc__list > li.is-active-group > .guides-toc__link {
    color: var(--guides-title) !important;
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 425 !important;
    font-variation-settings: "wght" 425 !important;
    letter-spacing: normal !important;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__sublist {
    margin-top: 16px;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__sublist > li + li {
    margin-top: 16px;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__sublist .guides-toc__link {
    color: var(--guides-title) !important;
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 300 !important;
    font-variation-settings: "wght" 300 !important;
    letter-spacing: normal !important;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__link.is-active,
  body.mw-source-guides .guides-page > .guides-article .guides-toc__sublist .guides-toc__link.is-active {
    color: var(--guides-accent) !important;
    font-weight: 425 !important;
    font-variation-settings: "wght" 425 !important;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__active-indicator {
    left: 0;
    width: 1px;
    height: var(--mw-guide-indicator-h, 16px);
    border-radius: 0;
    background: linear-gradient(180deg, #7dd3fc 0%, #635bff 70%, #635bff 100%);
    box-shadow: none;
    transform: translate3d(0, var(--mw-guide-indicator-y, 0), 0);
    transition:
      transform 300ms cubic-bezier(.16, 1, .3, 1),
      height 220ms cubic-bezier(.16, 1, .3, 1),
      opacity 120ms ease;
  }
}

/* Article: source-weight body copy plus the reference guide's heading ladder. */
body.mw-source-guides .guides-page > .guides-article .guides-block__title {
  font-size: 34px !important;
  line-height: 44px !important;
  font-weight: 500 !important;
  font-variation-settings: "wght" 500 !important;
  letter-spacing: -.1px !important;
  color: var(--guides-title) !important;
}

body.mw-source-guides .guides-page > .guides-article .guides-block__subtitle,
body.mw-source-guides .guides-page > .guides-article .guides-point__title {
  font-size: 26px !important;
  line-height: 36px !important;
  font-weight: 500 !important;
  font-variation-settings: "wght" 500 !important;
  letter-spacing: 0 !important;
  color: var(--guides-title) !important;
}

body.mw-source-guides .guides-page > .guides-article .guides-block__p,
html body.mw-source-guides .guides-page .guides-article__content p.guides-block__p,
html body.mw-source-guides .guides-page .guides-article__content .guides-list li {
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 300 !important;
  font-variation-settings: "wght" 300 !important;
  letter-spacing: .2px !important;
  color: var(--guides-text) !important;
}

body.mw-source-guides .guides-page > .guides-article .guides-list li strong {
  font-weight: 500 !important;
  font-variation-settings: "wght" 500 !important;
  color: var(--guides-title) !important;
}

body.mw-source-guides .guides-page > .guides-article .guides-article__content .guides-link {
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 425 !important;
  font-variation-settings: "wght" 425 !important;
  letter-spacing: .2px !important;
}

/* The two approved guide visuals retain intentional, readable framing. */
@media (min-width: 900px) {
  body.mw-source-guides .guides-page > .guides-article .guides-figure {
    margin-block: 16px 24px;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-figure--document {
    box-sizing: border-box;
    width: min(100%, 720px);
    margin-inline: auto;
    padding: 24px;
    border: 1px solid #d7e1ea;
    border-radius: 12px;
    background: #f7fafc;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-figure--document .guides-figure__img {
    display: block;
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 10px 24px rgba(15, 37, 64, .1);
  }

  body.mw-source-guides .guides-page > .guides-article .guides-figure--wide {
    box-sizing: border-box;
    width: min(100%, 720px);
    margin-inline: auto;
    padding: 20px;
    border: 1px solid #d7e1ea;
    border-radius: 12px;
    background: #f7fafc;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-figure--wide .guides-figure__img {
    display: block;
    width: 100%;
    border-radius: 6px;
  }
}

@media (min-width: 1112px) {
  body.mw-source-guides .guides-page > .guides-hero .guides-hero__title {
    font-size: 56px !important;
    line-height: 68px !important;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-block__title {
    font-size: 38px !important;
    line-height: 48px !important;
    letter-spacing: -.2px !important;
  }
}

/* Closing section continues the same hierarchy rather than returning to site defaults. */
body.mw-source-guides .guides-page > .guides-cta .guides-cta__title {
  font-size: 26px !important;
  line-height: 34px !important;
  font-weight: 500 !important;
  font-variation-settings: "wght" 500 !important;
  letter-spacing: -.02em !important;
}

body.mw-source-guides .guides-page > .guides-cta .guides-cta__desc {
  font-size: 17px !important;
  line-height: 26px !important;
  font-weight: 300 !important;
  font-variation-settings: "wght" 300 !important;
  letter-spacing: .2px !important;
}

body.mw-source-guides .guides-page > .guides-cta .guides-cta-card__title {
  font-size: 18px !important;
  line-height: 24px !important;
  font-weight: 500 !important;
  font-variation-settings: "wght" 500 !important;
  letter-spacing: -.012em !important;
}

body.mw-source-guides .guides-page > .guides-cta .guides-cta-card__desc,
body.mw-source-guides .guides-page > .guides-cta .guides-cta-card__link,
body.mw-source-guides .guides-page > .guides-cta .guides-cta__btn {
  font-size: 15px !important;
  line-height: 24px !important;
  font-weight: 300 !important;
  font-variation-settings: "wght" 300 !important;
  letter-spacing: .2px !important;
}

body.mw-source-guides .guides-page > .guides-cta .guides-cta-card__link,
body.mw-source-guides .guides-page > .guides-cta .guides-cta__btn {
  font-weight: 425 !important;
  font-variation-settings: "wght" 425 !important;
}

@media (max-width: 749px) {
  body.mw-source-guides .guides-page > .guides-hero .guides-hero__title {
    font-size: 40px !important;
    line-height: 48px !important;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-block__title {
    font-size: 30px !important;
    line-height: 38px !important;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-block__subtitle,
  body.mw-source-guides .guides-page > .guides-article .guides-point__title {
    font-size: 24px !important;
    line-height: 32px !important;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-figure--document,
  body.mw-source-guides .guides-page > .guides-article .guides-figure--wide {
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid #d7e1ea;
    border-radius: 10px;
    background: #f7fafc;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mw-source-guides .guides-page > .guides-article .guides-toc__active-indicator {
    transition: none !important;
  }
}


/*
  Contents rail: one actual positioned indicator. Earlier styles used a
  link pseudo-element and an unpositioned span at the same time, which left
  the line invisible on some render paths. This is deliberately self-contained.
*/
@media (min-width: 900px) {
  body.mw-source-guides .guides-page > .guides-article .guides-toc {
    isolation: isolate;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__link {
    position: relative;
    z-index: 1;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__link::before {
    content: none !important;
    display: none !important;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__active-indicator {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__active-indicator.is-visible {
    opacity: 1 !important;
  }
}


/*
  Stripe guide-detail calibration
  Reference: /guides/introduction-to-online-payments
  Keep this as the final guide-specific layer so HDS and earlier migration rules
  cannot mute the intended editorial hierarchy.
*/
@media (min-width: 900px) {
  /* Stripe ArticleMarkdown: H2 stays 34/44 at desktop; H3 is 24/32. */
  body.mw-source-guides .guides-page > .guides-article .guides-block__title {
    font-size: 34px !important;
    line-height: 44px !important;
    font-weight: 500 !important;
    font-variation-settings: "wght" 500 !important;
    letter-spacing: -.1px !important;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-block__subtitle,
  body.mw-source-guides .guides-page > .guides-article .guides-point__title {
    font-size: 24px !important;
    line-height: 32px !important;
    font-weight: 500 !important;
    font-variation-settings: "wght" 500 !important;
    letter-spacing: .1px !important;
  }

  /*
    Stripe's contents rail uses 500 top-level links and 300 nested links.
    Only the current parent reveals its children, so the hierarchy remains
    legible even in a long guide.
  */
  body.mw-source-guides .guides-page > .guides-article .guides-toc__list > li {
    position: relative;
    margin: 0 0 16px !important;
    padding: 0 16px !important;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__list > li > .guides-toc__link {
    color: var(--guides-title) !important;
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    font-variation-settings: "wght" 500 !important;
    letter-spacing: normal !important;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__sublist {
    max-height: 0 !important;
    margin-top: 0 !important;
    overflow: hidden !important;
    opacity: 0;
    transition:
      max-height 400ms cubic-bezier(.16, 1, .3, 1),
      margin-top 260ms cubic-bezier(.16, 1, .3, 1),
      opacity 180ms ease !important;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__list > li.is-active-group > .guides-toc__sublist {
    max-height: var(--mw-guides-sublist-height, 0px) !important;
    margin-top: 16px !important;
    opacity: 1;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__sublist > li {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__sublist > li + li {
    margin-top: 16px !important;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__sublist .guides-toc__link,
  body.mw-source-guides .guides-page > .guides-article .guides-toc__sublist .guides-toc__link.is-active {
    color: var(--guides-title) !important;
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 300 !important;
    font-variation-settings: "wght" 300 !important;
    letter-spacing: normal !important;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__sublist .guides-toc__link.is-active {
    color: var(--guides-accent) !important;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__list > li > .guides-toc__link.is-active {
    color: var(--guides-accent) !important;
    font-weight: 500 !important;
    font-variation-settings: "wght" 500 !important;
  }

  /*
    This is the Stripe-like rail itself: it scales in on the active group and
    returns to zero before the next group expands. The old generated indicator
    remains in the DOM for accessibility-safe state tracking but is not drawn.
  */
  body.mw-source-guides .guides-page > .guides-article .guides-toc__list > li::before {
    content: "" !important;
    position: absolute !important;
    top: 4px !important;
    left: 0 !important;
    display: block !important;
    width: 1px !important;
    height: calc(100% - 6px) !important;
    border-radius: 0 !important;
    background: linear-gradient(
      180deg,
      #7dd3fc 0%,
      #635bff 42%,
      #635bff 62%,
      #7dd3fc 100%
    ) !important;
    transform: scaleY(0) !important;
    transform-origin: center top !important;
    opacity: .95 !important;
    transition: transform 300ms cubic-bezier(.16, 1, .3, 1) !important;
    z-index: 0 !important;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__list > li.is-active-group::before {
    transform: scaleY(1) !important;
  }

  body.mw-source-guides .guides-page > .guides-article .guides-toc__active-indicator {
    display: none !important;
  }
}

@media (min-width: 1112px) {
  /* Guard against the generic guide desktop enlargement above. */
  body.mw-source-guides .guides-page > .guides-article .guides-block__title {
    font-size: 34px !important;
    line-height: 44px !important;
  }
}


/*
  Guide outline correction:
  “What information needs to be on a work order?” is a child of
  “How work order management works,” just as Stripe renders a guide’s
  nested subjects at the H3 level. Keep the editorial gap compact so this
  reads as a continuation rather than a separate primary chapter.
*/
body.mw-source-guides .guides-page > .guides-article #introduction {
  margin-bottom: 32px !important;
}

body.mw-source-guides .guides-page > .guides-article .guides-block--nested > .guides-block__subtitle {
  margin-top: 0 !important;
}