:root {
  --text-section-gap: 3rem;
  --text-section-gap-mobile: 1.5rem;
  --text-heading-gap: 2rem;
  --text-heading-gap-mobile: 1.25rem;
  --text-body-gap: 2rem;
  --text-body-gap-mobile: 1.5rem;
  --text-body-max-width: 74ch;
  --text-list-indent: 2rem;
  --text-list-gap: 0.5rem;
  --pdf-link-icon: url('../../images/pdf_icon.svg');

  --reveal-offset: 1.125rem;
  --reveal-duration: 1s ease;
  --reveal-delay: 0.25s;

  /* Typography (text system) */
  --text-font-family-body: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-font-family-display: 'Exo 2', 'Open Sans', sans-serif;
  --text-line-base: 1.6;
  --text-line-base-mobile: 1.5;
  --text-weight-strong: 600;
  --text-weight-emphasis: 800;
  --text-weight-heading: 700;

  --text-size-heading: 2rem;
  --text-size-highlight: 1.5rem;
  --text-size-body: 1.3rem;
  --text-size-heading-mobile: clamp(1.5rem, 5vw, 1.85rem);
  --text-size-highlight-mobile: clamp(1.15rem, 4vw, 1.35rem);
  --text-size-body-mobile: clamp(1.05rem, 3.6vw, 1.2rem);

  --text-line-heading: 1.2;

  --text-letter-heading-tight: -0.02em;
  --text-letter-heading-wide: 0.08em;
  --text-letter-wide: 0.1em;
  --text-letter-narrow: 0.04em;
  --text-letter-title: 0.06em;

  --text-transform-uppercase: uppercase;

  /* Text classes (defaults) */
  --text-body-size: var(--text-size-body);
  --text-body-line: 2;
  --text-body-weight: var(--text-weight-strong);
  --text-body-letter: var(--text-letter-wide);
  --text-body-color: var(--color-body);
  --text-bullet-size: var(--text-size-body);

  --text-body-small-size: 0.95rem;
  --text-body-small-line: 1.6;
  --text-body-small-weight: var(--text-body-weight);
  --text-body-small-letter: var(--text-letter-narrow);
  --text-body-small-color: var(--color-body);

  --text-eyebrow-size: var(--text-size-body);
  --text-eyebrow-weight: var(--text-weight-strong);
  --text-eyebrow-letter: var(--text-letter-wide);
  --text-eyebrow-transform: var(--text-transform-uppercase);
  --text-eyebrow-color: var(--color-body);

  --text-heading-size: var(--text-size-heading);
  --text-heading-line: var(--text-line-heading);
  --text-heading-weight: var(--text-weight-heading);
  --text-heading-letter: var(--text-letter-heading-wide);
  --text-heading-transform: var(--text-transform-uppercase);
  --text-heading-color: var(--color-primary);

  --text-highlight-size: var(--text-size-highlight);
  --text-highlight-line: 1.2;
  --text-highlight-weight: var(--text-weight-heading);
  --text-highlight-letter: var(--text-letter-title);
  --text-highlight-transform: var(--text-transform-uppercase);
  --text-highlight-color: var(--color-primary);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--text-font-family-body);
  font-size: var(--text-size-body);
  background: var(--color-background);
  color: var(--color-title);
  line-height: var(--text-line-base);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2 {
  font-family: var(--text-font-family-display);
  margin: 0 ;
  letter-spacing: var(--text-letter-heading-tight);
}

p {
  margin: 0;
  color: var(--color-body);
  line-height: var(--text-line-base);
}

.container {
  width: min(var(--layout-max), var(--layout-fluid));
  margin: 0 auto;
}

.text-body {
  font-family: var(--text-font-family-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  font-weight: var(--text-body-weight);
  letter-spacing: var(--text-body-letter);
  color: var(--text-body-color);
}

.text-body-uppercase {
  font-family: var(--text-font-family-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  font-weight: var(--text-body-weight);
  letter-spacing: var(--text-body-letter);
  text-transform: uppercase;
  color: inherit;
}

.text-body-small {
  font-family: var(--text-font-family-body);
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line);
  font-weight: var(--text-body-small-weight);
  letter-spacing: var(--text-body-small-letter);
  color: var(--text-body-small-color);
}

.text-eyebrow {
  margin: 0;
  font-family: var(--text-font-family-body);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--text-eyebrow-weight);
  letter-spacing: var(--text-eyebrow-letter);
  text-transform: var(--text-eyebrow-transform);
  color: var(--text-eyebrow-color);
}

.text-heading {
  font-family: var(--text-font-family-display);
  font-size: var(--text-heading-size);
  line-height: var(--text-heading-line);
  font-weight: var(--text-heading-weight);
  letter-spacing: var(--text-heading-letter);
  text-transform: var(--text-heading-transform);
  color: var(--text-heading-color);
  margin: 0;
}

.text-highlight {
  font-family: var(--text-font-family-display);
  font-size: var(--text-highlight-size);
  line-height: var(--text-highlight-line);
  font-weight: var(--text-highlight-weight);
  letter-spacing: var(--text-highlight-letter);
  text-transform: var(--text-highlight-transform);
  color: var(--text-highlight-color);
}

.pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.pdf-link::before {
  content: '';
  display: inline-block;
  width: 3.125rem;
  height: 3.125rem;
  background: var(--pdf-link-icon) no-repeat center;
  background-size: contain;
}

.pdf-link:is(:hover, :focus-visible) {
  text-decoration: underline;
}

.text-section + .text-section {
  margin-top: var(--text-section-gap);
}

.text-section__heading {
  margin: 0 0 var(--text-heading-gap);
}

.text-section__body {
  --text-flow-gap: var(--text-body-gap);
  --text-flow-max-width: var(--text-body-max-width);
}

.text-section__title {
  margin: var(--text-section-gap);
  text-align: center;
}

.text-flow {
  max-width: var(--text-flow-max-width, 74ch);
  display: grid;
  gap: var(--text-flow-gap, 1rem);
}

.text-flow > * {
  margin: 0;
}

.text-flow :where(ul, ol) {
  padding-left: var(--text-list-indent);
  display: grid;
  gap: var(--text-list-gap);
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(var(--reveal-offset));
}

.reveal-on-scroll.is-visible {
  animation: contentReveal var(--reveal-duration) forwards;
  animation-delay: var(--reveal-delay, 0s);
}

@keyframes contentReveal {
  from {
    opacity: 0;
    transform: translateY(var(--reveal-offset));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }

  .reveal-on-scroll.is-visible {
    animation: none;
  }
}

.is-mobile .reveal-on-scroll,
.is-mobile .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: none;
  animation: none;
}

.is-mobile {
  --text-line-base: var(--text-line-base-mobile);
  --text-body-size: var(--text-size-body-mobile);
  --text-body-small-size: calc(var(--text-size-body-mobile) * 0.9);
  --text-eyebrow-size: var(--text-size-body-mobile);
  --text-heading-size: var(--text-size-heading-mobile);
  --text-highlight-size: var(--text-size-highlight-mobile);
  --text-section-gap: var(--text-section-gap-mobile);
  --text-heading-gap: var(--text-heading-gap-mobile);
  --text-body-gap: var(--text-body-gap-mobile);
  --text-bullet-size: var(--text-size-body-mobile);
}


.bullet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  max-width: var(--text-body-max-width);
  margin-left: 0;
  margin-right: 0;
}

.bullet-list li {
  position: relative;
  padding-left: var(--text-list-indent);
  margin-bottom: var(--text-list-gap);
}

.bullet-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--text-bullet-size);
  transform: translateY(-50%);
  width: calc(var(--text-bullet-size) * 0.6);
  height: calc(var(--text-bullet-size) * 0.6);
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 calc(var(--text-bullet-size) * 0.2) var(--color-secondary);
}

.step-marker {
  --text-heading-size: var(--contact-marker-font);
  --text-heading-line: 1;
  --text-heading-letter: normal;
  --text-heading-transform: none;
  --text-heading-color: var(--color-background);
  position: relative;
  z-index: 2;
  width: var(--contact-marker-size);
  height: var(--contact-marker-size);
  border-radius: 999rem;
  background: var(--color-primary);
  display: grid;
  place-items: center;
}