/*
 * A code component's Shadow DOM doesn't inherit the prototype's global
 * resets (box-sizing, link underlines) — see the same note in
 * ../../components/Hero/Hero.module.css.
 */
.RJNIExFvEsw8rvmwTFQj,
.RJNIExFvEsw8rvmwTFQj *,
.RJNIExFvEsw8rvmwTFQj *::before,
.RJNIExFvEsw8rvmwTFQj *::after {
  box-sizing: border-box;
}

/*
 * The breadcrumb, in the eyebrow's style (Utility / Eyebrow: SemiBold,
 * uppercase, widely tracked), 24px over what follows at 1728: step crumbs as
 * links in brand blue, a weight heavier (underlined on hover), the current page
 * in soft black, a small chevron between each.
 */
.RJNIExFvEsw8rvmwTFQj {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 max(16px, 1.39vw);
  padding: 0;
  list-style: none;
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  line-height: var(--type-eyebrow-lh);
  letter-spacing: var(--type-eyebrow-ls);
  text-transform: uppercase;
}

.RJNIExFvEsw8rvmwTFQj li {
  display: flex;
  align-items: center;
  gap: 14px;
  /* A label that is one very long word wraps inside the window instead of running past it (the prototype's breadcrumb has no such rule). */
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.RJNIExFvEsw8rvmwTFQj li + li::before {
  content: '';
  flex: none;
  width: 7px;
  height: 12px;
  background: currentcolor;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 7 12%27%3E%3Cpath d=%27M1 1l5 5-5 5%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E")
    center / contain no-repeat;
  color: var(--neutral-700);
}

.RJNIExFvEsw8rvmwTFQj a {
  color: var(--action-primary-default);
  font-weight: 700; /* a weight over the eyebrow's */
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 6px;
  transition: text-decoration-color 250ms ease;
}

.RJNIExFvEsw8rvmwTFQj a:is(:hover, :focus-visible) {
  text-decoration-color: currentcolor;
}

.RJNIExFvEsw8rvmwTFQj [aria-current] {
  color: var(--text-primary);
}

.J_x5mCLs9hFUGyP_KOk7 {
  pointer-events: none;
}

.J_x5mCLs9hFUGyP_KOk7 svg {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * A code component's Shadow DOM doesn't inherit the prototype's global
 * resets (box-sizing, link underlines) — see the same note in
 * ../Hero/Hero.module.css.
 */
.UpLHn3zDCThQmyccap3e,
.UpLHn3zDCThQmyccap3e *,
.UpLHn3zDCThQmyccap3e *::before,
.UpLHn3zDCThQmyccap3e *::after {
  box-sizing: border-box;
}

/*
 * Both styles: full width, room above for the floating header, the graphic
 * cut off at the hero's foot. The space above and below grows with the window
 * up to about 1728px, then holds (241px over, 104px under).
 */
.UpLHn3zDCThQmyccap3e {
  --pad-top: clamp(150px, 13.95vw, 241px);
  --pad-bottom: clamp(64px, 6vw, 104px);
  /* The space between the eyebrow, headline and description. */
  --gap: max(16px, 1.39vw);
  position: relative;
  isolation: isolate;
  padding: var(--pad-top) var(--page-gutter) var(--pad-bottom);
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
}

/* The background graphic: full width from the top of the hero, behind the text. */
.r0rf5UZPB_A1FtryXUBh {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
}

/*
 * Page style: soft black. Every page's hero has the same minimum height:
 * the eyebrow and two lines of headline. A one-line headline leaves the
 * second line's space empty under it; a longer one (on narrow windows) grows
 * the hero. A description adds nothing to the floor: it sits in the headline's
 * spare line when there is one and otherwise grows the hero by its own height,
 * so a one-line description leaves no empty line under it.
 */
.ziiCp2OnPsMcpzwBEhn8 {
  overflow: hidden;
  min-height: calc(
    var(--pad-top) + var(--type-eyebrow-lh) + var(--gap) + 2 * var(--type-display-l-lh) + var(--pad-bottom)
  );
  background: var(--text-primary);
  color: var(--text-inverse);
}

/*
 * Graphics exported for a light page, on the dark hero: their near-white
 * fan becomes a slightly lighter soft black, and their dark grey corner
 * nodes white (as the dark exports have them).
 */
.ziiCp2OnPsMcpzwBEhn8 .r0rf5UZPB_A1FtryXUBh [stroke='#F9F9F9' i] {
  stroke: #232323;
}

.ziiCp2OnPsMcpzwBEhn8 .r0rf5UZPB_A1FtryXUBh [fill='#595959' i] {
  fill: #fff;
}

/* Detail: the light page, no black; the background stops at the hero's foot. */
.Cv283u3c8nmr3JtW6gML {
  overflow: clip;
  color: var(--text-primary);
}

/*
 * Eyebrow (Utility / Eyebrow), 24px over the headline at 1728. (The breadcrumb
 * that takes its place on Detail is shared/Breadcrumb, in the same type.)
 */
.FmYbpGnmVsUDtOJUx_4c {
  margin: 0 0 var(--gap);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  line-height: var(--type-eyebrow-lh);
  letter-spacing: var(--type-eyebrow-ls);
  text-transform: uppercase;
}

/* Display L, ExtraLight, at most 10.5em wide, the heavier words Medium. */
.IvsDcqAjXu29KpQY6Xor {
  max-width: 10.5em;
  margin: 0;
  font-size: var(--type-display-l-size);
  font-weight: var(--type-display-l-weight);
  line-height: var(--type-display-l-lh);
  letter-spacing: var(--type-display-l-ls);
}

.IvsDcqAjXu29KpQY6Xor strong {
  font-weight: 500;
}

/* Headline size Larger: a step up, Display XL. */
.R2bTr5mRGtWP9BLngf1J {
  font-size: var(--type-display-xl-size);
  font-weight: var(--type-display-xl-weight);
  line-height: var(--type-display-xl-lh);
  letter-spacing: var(--type-display-xl-ls);
}

/* The description, Body / Lead in dark grey, under the title (white at 80% on the soft black Page hero). */
.uFbhVvMXo54uS2vdUR9g {
  max-width: 34em;
  margin: var(--gap) 0 0;
  color: var(--neutral-700);
  font-size: var(--type-lead-size);
  font-weight: var(--type-lead-weight);
  line-height: var(--type-lead-lh);
  letter-spacing: var(--type-lead-ls);
  text-wrap: pretty;
  /* WordReveal's words are inline-blocks: only `anywhere` lets one very long word (a URL) shrink and wrap instead of being clipped. */
  overflow-wrap: anywhere;
}

.ziiCp2OnPsMcpzwBEhn8 .uFbhVvMXo54uS2vdUR9g {
  color: rgb(var(--text-inverse-rgb) / 0.8);
}

/* Phones: the headline the full width; the graphic twice as large, still from the top right (its fan's corner); the detail hero's foot tighter. */
@media (max-width: 767px) {
  .IvsDcqAjXu29KpQY6Xor {
    max-width: none;
  }

  .r0rf5UZPB_A1FtryXUBh {
    left: auto;
    width: 200%;
  }

  .Cv283u3c8nmr3JtW6gML {
    padding-bottom: 40px;
  }
}