/* Sub-page styling drawn from the landing design language (styles.css):
   white paper, Gelasio serif headlines in ink, indigo accents, and the
   ruled stripe pattern at section edges. Loaded by the shared Navbar after
   styles.css, which supplies the tokens (--ink, --indigo, --serif) and the
   .stripes pattern this file leans on. */

/* Serif display heading, as the landing sets its h1/h2s. */
.serif-h {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.serif-h--white {
  color: #fff;
}

/* ---- Page hero -----------------------------------------------------------
   Replaces the old dark navy banner: headline on white with the animated
   rule pattern hugging the page's right edge, echoing the systems panel. */
.page-hero {
  position: relative;
  padding: 128px 0 72px;
  background: #fff;
}

.page-hero-overline {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.56px;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: 20px;
}

.page-hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -1.56px;
  color: var(--ink);
  max-width: 889px;
}

.page-hero-lede {
  margin-top: 22px;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.55;
  color: rgb(9 12 49 / 0.55);
}

.page-hero-lede p + p {
  margin-top: 12px;
}

.page-hero-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  font-size: 14px;
  color: rgb(9 12 49 / 0.45);
}

.page-hero-crumbs a {
  transition: color 0.2s ease;
}

.page-hero-crumbs a:hover {
  color: var(--indigo);
}

.page-hero > .stripes {
  position: absolute;
  top: 128px;
  bottom: 72px;
  right: 0;
  width: calc(var(--stripe-pitch) * 8);
  --stripe-offset: calc(var(--stripe-pitch) * 0.75);
  color: var(--indigo);
}

@media (max-width: 767px) {
  .page-hero {
    padding: 104px 0 48px;
  }

  .page-hero h1 {
    font-size: 36px;
    letter-spacing: -1.08px;
  }

  .page-hero-lede {
    font-size: 16px;
  }

  .page-hero > .stripes {
    display: none;
  }
}