/* Process page — #process-* ids for Cursor edits */

.process-page .section {
  width: min(100%, var(--page-max));
  margin-inline: auto;
}

.process-band {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.process-band--opening {
  padding: 96px var(--gutter);
  gap: 28px;
}

.process-band--opening .display--xl {
  max-width: 960px;
}

.process-band--opening .lead {
  max-width: 660px;
}

.process-band--sand {
  background: var(--color-sand);
}

.process-band--forest {
  background: var(--color-forest);
}

.process-band--principle {
  padding: 80px var(--gutter);
  gap: 18px;
}

.process-band--principle .display {
  max-width: 860px;
  font-size: 50px;
  line-height: 1.06;
  letter-spacing: -1px;
  color: #000;
}

.process-band--principle .body {
  max-width: 680px;
}

.process-band--step {
  padding: 112px var(--gutter) 76px;
}

.process-band--step .display--sm {
  max-width: 820px;
}

.process-band--step .body {
  max-width: 700px;
}

.process-band--alt {
  padding: 104px var(--gutter);
}

.process-band--alt .display {
  max-width: 820px;
}

.process-band--alt .display--sm {
  max-width: 800px;
}

.process-band--alt .body {
  max-width: 700px;
}

.process-band--closing {
  padding: 112px var(--gutter) 88px;
  gap: 24px;
}

.process-band--closing .display--sm {
  max-width: 860px;
}

.process-closing__ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin-top: 8px;
}

/* Dark section display sizes */
#process-direction .display,
#process-not .display {
  font-size: 52px;
  line-height: 1.04;
  letter-spacing: -1px;
}

#process-not .display {
  font-size: 50px;
  line-height: 1.05;
}

@media (max-width: 1199px) {
  .process-band--principle .display,
  #process-direction .display,
  #process-not .display {
    font-size: 40px;
  }
}

@media (max-width: 809px) {
  .process-band--opening {
    padding: 48px var(--gutter) 40px;
    gap: 18px;
  }

  .process-band--principle {
    padding: 48px var(--gutter);
  }

  .process-band--principle .display {
    font-size: 32px;
  }

  .process-band--step {
    padding: 64px var(--gutter) 48px;
  }

  .process-band--alt {
    padding: 64px var(--gutter);
  }

  #process-direction .display,
  #process-not .display {
    font-size: 34px;
  }

  .process-band--closing {
    padding: 64px var(--gutter) 48px;
  }
}