@layer unset {
  .hero :is(h1, h2, h3, h4, h5, h6, p), .section-header :is(h1, h2, h3, h4, h5, h6, p), .section-heading, .section-paragraph, .river-content :is(h1, h2, h3, h4, h5, h6, p), .pillar :is(h1, h2, h3, h4, h5, h6, p, [data-heading], [data-paragraph]), .cta-banner :is(h1, h2, h3, h4, h5, h6, p), .testimonial :is(blockquote, figcaption, cite, p), .statistic :is(p, [data-leading], [data-heading], [data-description]) {
    margin: 0;
  }
}

.hero {
  flex-direction: column;
  padding-top: 3rem;
  display: flex;
}

.hero .section-paragraph {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-9);
  text-wrap: pretty;
  margin-top: 1.5rem;
}

.hero .river-content {
  row-gap: 0;
}

@media (min-width: 40rem) {
  .hero {
    padding-top: 7rem;
  }

  .hero .section-paragraph {
    max-width: min(42rem, 70%);
  }
}

@media (min-width: 64rem) {
  .hero .section-paragraph {
    font-size: var(--font-size-5);
    line-height: var(--line-height-6);
  }
}

.hero[data-align="center"] :is(.section-heading, .section-paragraph) {
  text-align: center;
  text-wrap: balance;
}

.hero:has(.river[data-align="start"]) {
  padding-block: 6rem;
}

.hero:has(.river[data-align="start"]) .section-paragraph {
  text-wrap: pretty;
  font-size: var(--font-size-3) !important;
  line-height: var(--line-height-3) !important;
}

@media (min-width: 48rem) {
  .hero:has(.river[data-align="start"]) {
    padding-block: 8rem;
  }
}

.page-section {
  background-color: var(--color-background);
  padding-block: 3rem;
  position: relative;
}

@media (min-width: 48rem) {
  .page-section {
    padding-top: 7rem;
  }
}

.page-container {
  box-sizing: border-box;
  padding-left: var(--page-padding-left, 1rem);
  padding-right: var(--page-padding-right, 1rem);
  max-width: var(--page-max-width, 72rem);
  width: 100%;
  margin-inline: auto;
}

.section-header {
  text-wrap: balance;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-block: 1.5rem;
  display: flex;
}

.section-header .section-heading {
  max-width: 20ch;
}

.section-header .section-paragraph {
  text-wrap: balance;
  max-width: 82ch;
}

.section-header[data-align="center"] {
  align-items: safe center;
}

.section-header[data-align="center"] .section-heading, .section-header[data-align="center"] .section-paragraph {
  text-align: center;
}

.section-header[data-align="center"] > a {
  margin-top: 1rem;
}

.section-heading {
  font-family: var(--font-heading);
  letter-spacing: var(--letter-spacing-9);
  overflow-wrap: break-word;
  font-weight: 600;
}

[dir="rtl"] .section-heading {
  letter-spacing: 0;
  line-height: 1.4;
}

.section-heading-1 {
  font-size: calc(48px * var(--scaling, 1));
  letter-spacing: -.04em;
  font-weight: 550;
  line-height: 1;
}

.section-heading-2 {
  font-size: var(--font-size-8);
  line-height: var(--line-height-8);
}

.section-heading-3 {
  font-size: calc(30px * var(--scaling, 1));
  line-height: calc(36px * var(--scaling, 1));
}

.section-heading-4 {
  font-size: var(--font-size-5);
  line-height: var(--line-height-5);
}

@media (min-width: 64rem) {
  .section-heading-1 {
    font-size: var(--font-size-9);
    line-height: 1;
  }

  .section-heading-2 {
    font-size: calc(48px * var(--scaling, 1));
    line-height: 1;
  }

  .section-heading-3 {
    font-size: var(--font-size-8);
    line-height: var(--line-height-8);
  }
}

.section-paragraph {
  line-height: var(--default-line-height, 1.5);
  text-wrap: pretty;
  white-space: pre-line;
  overflow-wrap: break-word;
  color: var(--neutral-11);
}

.section-paragraph em {
  color: var(--neutral-12);
  font-style: normal;
}

.river {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: min-content;
  row-gap: 2rem;
  display: grid;
}

.river > * {
  grid-column: 1 / -1;
  min-width: 0;
}

@media (min-width: 48rem) {
  .river {
    grid-auto-rows: auto;
    gap: 0 3rem;
  }

  .river > * {
    grid-column: span 6 / span 6;
  }

  .river[data-align="start"][data-large-visual] > .river-content, .river[data-align="end"][data-large-visual] > .river-content {
    grid-column: span 5 / span 5;
  }

  .river[data-align="start"][data-large-visual] > .river-visual, .river[data-align="end"][data-large-visual] > .river-visual {
    grid-column: span 7 / span 7;
  }
}

.river[data-align="center"] {
  grid-auto-rows: min-content;
  align-items: safe center;
  gap: 3rem 0;
}

.river[data-align="center"] > * {
  grid-column: 1 / -1;
  justify-self: center;
  padding-inline: 0;
}

.river[data-align="center"] > .river-content {
  align-items: safe center;
}

.river[data-align="center"] > .river-content > .section-heading {
  text-align: center;
  text-wrap: balance;
  max-width: 24ch;
}

.river[data-align="center"] > .river-content > .section-paragraph {
  text-align: center;
  text-wrap: balance;
  max-width: 72ch;
}

@media (min-width: 48rem) {
  .river[data-align="end"] > .river-content {
    order: 1;
  }

  .river[data-align="end"] > .river-visual {
    order: 0;
  }
}

@media (min-width: 64rem) {
  .river[data-align="end"] > .river-content {
    padding-inline: 4rem;
  }
}

.river[data-align="breakout"] {
  flex-direction: column;
  gap: 2.5rem;
  padding-block: 2.5rem;
  display: flex;
}

.river[data-align="breakout"] > .section-heading:first-child {
  clip: rect(0, 0, 0, 0);
  word-wrap: normal;
  border: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  position: absolute;
}

.river[data-align="breakout"] > .river-content {
  order: 1;
}

.river[data-align="breakout"] > .river-content .section-paragraph {
  font-family: var(--font-heading);
  font-size: var(--font-size-6);
  letter-spacing: var(--letter-spacing-9);
  text-wrap: pretty;
  color: var(--neutral-11);
  font-weight: 600;
  line-height: 1.2;
}

.river[data-align="breakout"] > .river-content > [data-trailing] {
  margin-top: 1.5rem;
}

.river[data-align="breakout"] > .river-visual {
  border-radius: var(--radius-4);
  order: 0;
}

@media (min-width: 48rem) {
  .river[data-align="breakout"] {
    row-gap: 4rem;
    padding-block: 3rem;
  }

  .river[data-align="breakout"] > .river-content .section-paragraph {
    font-size: var(--font-size-8);
  }

  .river[data-align="breakout"] .river-content {
    grid-template-columns: 5fr 3fr;
    grid-template-areas: "text trailing"
                         "cta trailing";
    grid-auto-rows: auto 1fr;
    gap: 2rem 3rem;
    display: grid;
  }

  .river[data-align="breakout"] .river-content .section-paragraph {
    grid-area: text;
  }

  .river[data-align="breakout"] .river-content [data-cta] {
    grid-area: cta;
    justify-self: start;
  }

  .river[data-align="breakout"] .river-content > [data-trailing] {
    grid-area: trailing;
    justify-self: end;
    margin-block-start: 0;
  }
}

.river-content {
  flex-direction: column;
  order: 0;
  align-items: flex-start;
  row-gap: 1rem;
  min-width: 0;
  display: flex;
}

.river-content > .section-heading {
  text-wrap: balance;
}

.river-content > a {
  margin-top: 1rem;
}

.river-visual {
  order: 1;
  min-width: 0;
  position: relative;
}

.river-visual[data-border] {
  border-radius: var(--radius-4);
  border: 1px solid var(--neutral-a6);
}

.pillar {
  text-align: start;
  flex-direction: column;
  align-items: flex-start;
  max-width: 50ch;
  display: flex;
}

.pillar > [data-heading] {
  font-size: var(--font-size-5);
  letter-spacing: var(--letter-spacing-8);
  margin-bottom: .5rem;
  font-weight: 600;
  line-height: 1.3;
}

.pillar > svg:first-child {
  color: var(--accent-9);
  margin-bottom: 1.5rem;
  font-size: 2rem;
}

.pillar > [data-paragraph] {
  font-size: var(--font-size-2);
  line-height: var(--default-line-height, 1.5);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
  color: var(--neutral-11);
  margin-bottom: 1.5rem;
}

.pillar > a {
  margin-top: 1rem;
}

.testimonial {
  --card-padding: 2rem;
  flex-direction: column;
  min-width: 0;
  display: flex;
}

@media (min-width: 64rem) {
  .testimonial {
    --card-padding-block-start: 6rem;
    --card-padding-block-end: 6rem;
    --card-padding-inline-start: 8rem;
    --card-padding-inline-end: 8rem;
  }
}

.testimonial > blockquote {
  font-family: var(--font-heading);
  font-size: var(--font-size-6);
  letter-spacing: var(--letter-spacing-9);
  text-wrap: pretty;
  color: var(--neutral-11);
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
}

@media (min-width: 48rem) {
  .testimonial > blockquote {
    font-size: var(--font-size-7);
  }
}

.testimonial > blockquote em {
  color: var(--neutral-12);
  font-style: normal;
}

.testimonial > blockquote:before {
  content: "“";
  font-size: calc(96px * var(--scaling, 1));
  color: var(--accent-9);
  font-weight: 700;
  line-height: 1;
  display: block;
}

.testimonial > blockquote:after {
  content: "”";
}

.testimonial > figcaption {
  flex-direction: column;
  margin-top: 4rem;
  display: flex;
}

.testimonial > figcaption > cite {
  font-family: var(--font-heading);
  font-size: var(--font-size-5);
  line-height: var(--line-height-5);
  letter-spacing: var(--letter-spacing-9);
  color: var(--neutral-12);
  font-style: normal;
  font-weight: 600;
}

.testimonial > figcaption > [data-title] {
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
  color: var(--neutral-11);
}

.cta-banner {
  --card-padding-block-start: 3rem;
  --card-padding-block-end: 3rem;
  --card-padding-inline-start: 1.5rem;
  --card-padding-inline-end: 1.5rem;
  text-align: center;
  flex-direction: column;
  align-items: center;
  display: flex;
}

@media (min-width: 48rem) {
  .cta-banner {
    --card-padding-block-start: 5rem;
    --card-padding-block-end: 5rem;
    --card-padding-inline-start: 2.5rem;
    --card-padding-inline-end: 2.5rem;
  }
}

@media (min-width: 64rem) {
  .cta-banner {
    --card-padding-block-start: 8rem;
    --card-padding-block-end: 8rem;
    --card-padding-inline-start: 4.5rem;
    --card-padding-inline-end: 4.5rem;
  }
}

.cta-banner :is(.section-heading, .section-paragraph) {
  text-align: center;
  text-wrap: balance;
  max-width: 42ch;
}

.cta-banner .section-paragraph {
  margin-top: 1.5rem;
}

.cta-banner > [data-cta] {
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  width: 100%;
  margin-top: 2.5rem;
  display: flex;
}

@media (min-width: 40rem) {
  .cta-banner > [data-cta] {
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem 1.5rem;
    width: auto;
  }
}

.cta-banner[data-align="start"] {
  text-align: start;
  align-items: flex-start;
}

.cta-banner[data-align="start"] :is(.section-heading, .section-paragraph) {
  text-align: start;
}

.cta-banner[data-align="start"] > [data-cta] {
  width: 100%;
}

@media (min-width: 40rem) {
  .cta-banner[data-align="start"] > [data-cta] {
    justify-content: flex-start;
    width: auto;
  }
}

.statistic {
  text-align: start;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  max-width: 50ch;
  display: flex;
}

.statistic > [data-leading] {
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-9);
  color: var(--neutral-11);
  margin: 0 0 .25rem;
}

.statistic > [data-heading] {
  font-family: var(--font-heading);
  font-size: calc(48px * var(--scaling, 1));
  letter-spacing: -.04em;
  color: var(--neutral-12);
  margin: 0;
  font-weight: 550;
  line-height: 1;
}

@media (min-width: 64rem) {
  .statistic > [data-heading] {
    font-size: var(--font-size-9);
  }
}

.statistic > [data-description] {
  font-size: var(--font-size-3);
  line-height: var(--line-height-3);
  color: var(--neutral-11);
  margin-top: .5rem;
}

.statistic[data-size="1"] > [data-leading] {
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
}

.statistic[data-size="1"] > [data-heading] {
  font-size: calc(28px * var(--scaling, 1));
  letter-spacing: var(--letter-spacing-9);
  font-weight: 600;
  line-height: 1.1;
}

@media (min-width: 64rem) {
  .statistic[data-size="1"] > [data-heading] {
    font-size: var(--font-size-7);
  }
}

.statistic[data-size="1"] > [data-description] {
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
}

.statistic[data-size="3"] > [data-heading] {
  font-size: var(--font-size-9);
}

@media (min-width: 64rem) {
  .statistic[data-size="3"] > [data-heading] {
    font-size: calc(72px * var(--scaling, 1));
  }
}

.statistic[data-size="3"] > [data-description] {
  font-size: var(--font-size-4);
  line-height: var(--line-height-4);
  margin-top: .75rem;
}

.statistic[data-align="center"] {
  text-align: center;
  align-items: safe center;
}