:root {
  --rhythm-gutter: clamp(24px, 5vw, 80px);
  --rhythm-cta-gutter: clamp(24px, 3.2vw, 48px);
  --rhythm-hero-top: clamp(128px, 10vw, 172px);
  --rhythm-hero-bottom: clamp(72px, 7vw, 112px);
  --rhythm-standard-y: clamp(104px, 9vw, 144px);
  --rhythm-compact-y: clamp(80px, 7vw, 112px);
  --rhythm-dense-y: clamp(56px, 5.6vw, 88px);
  --rhythm-final-top: clamp(104px, 8.1vw, 124px);
  --rhythm-final-bottom: clamp(112px, 8vw, 136px);
  --rhythm-footer-y: clamp(22px, 2vw, 30px);
  --rhythm-rule-top: clamp(72px, 6.4vw, 96px);
  --rhythm-rule-bottom: clamp(56px, 6vw, 88px);
  --rhythm-faq-item-y: clamp(40px, 4.4vw, 56px);
  --rhythm-panel-y: clamp(104px, 9vw, 128px);
}

.content > .hero {
  padding-top: var(--rhythm-hero-top);
  padding-right: var(--rhythm-gutter);
  padding-bottom: var(--rhythm-hero-bottom);
  padding-left: var(--rhythm-gutter);
}

.content > .editorial-section,
.content > .fit-section,
.content > .route-section,
.content > .process-section,
.copy-section {
  padding-top: var(--rhythm-standard-y);
  padding-right: var(--rhythm-gutter);
  padding-bottom: var(--rhythm-standard-y);
  padding-left: var(--rhythm-gutter);
}

.timeline-container {
  --step-block-y: var(--rhythm-standard-y);
  --step-block-y-mobile: 96px;
  --path-content-max: 1180px;
  --path-content-rail: max(var(--rhythm-gutter), calc((100vw - var(--path-content-max)) / 2));
}

.timeline-container > .path-hero {
  padding-right: var(--rhythm-gutter);
  padding-left: var(--path-content-rail);
}

.timeline-container > .path-hero .hero-scroll-cue {
  left: var(--path-content-rail);
}

.timeline-container > .summary-section {
  padding-top: var(--rhythm-standard-y);
  padding-right: var(--rhythm-gutter);
  padding-bottom: var(--rhythm-compact-y);
  padding-left: var(--rhythm-gutter);
}

.page-shell .panel-section {
  padding-top: var(--rhythm-panel-y);
  padding-bottom: var(--rhythm-panel-y);
}

.page-shell .stacked-notes {
  gap: var(--rhythm-compact-y);
}

main > .page-rule {
  margin-top: var(--rhythm-rule-top);
  margin-bottom: var(--rhythm-rule-bottom);
}

main > .faq-list .faq-group {
  padding-top: var(--rhythm-dense-y);
  padding-bottom: calc(var(--rhythm-dense-y) * 0.58);
}

main > .faq-list .faq-item {
  padding-top: var(--rhythm-faq-item-y);
  padding-bottom: var(--rhythm-faq-item-y);
}

main > .direct-fit-section,
main > .bg-silk.py-32,
main > .insight-section.py-32 {
  padding-top: var(--rhythm-standard-y);
  padding-bottom: var(--rhythm-standard-y);
}

.inquiry.final-cta,
.faq-next-step {
  padding-top: var(--rhythm-final-top);
  padding-right: var(--rhythm-cta-gutter);
  padding-bottom: var(--rhythm-final-bottom);
  padding-left: var(--rhythm-cta-gutter);
}

.faq-next-step.animate-on-scroll {
  transform: none;
}

footer,
.site-footer {
  padding-top: var(--rhythm-footer-y);
  padding-bottom: var(--rhythm-footer-y);
}

@media (max-width: 900px) {
  :root {
    --rhythm-gutter: 24px;
    --rhythm-cta-gutter: 24px;
    --rhythm-hero-top: 128px;
    --rhythm-hero-bottom: 80px;
    --rhythm-standard-y: 88px;
    --rhythm-compact-y: 72px;
    --rhythm-dense-y: 56px;
    --rhythm-final-top: 88px;
    --rhythm-final-bottom: 112px;
    --rhythm-footer-y: 28px;
    --rhythm-rule-top: 72px;
    --rhythm-rule-bottom: 64px;
    --rhythm-faq-item-y: 40px;
    --rhythm-panel-y: 96px;
  }

  main > .direct-fit-section,
  main > .bg-silk.py-32,
  main > .insight-section.py-32 {
    padding-right: var(--rhythm-gutter);
    padding-left: var(--rhythm-gutter);
  }

  .timeline-container > .path-hero {
    padding-right: var(--rhythm-gutter);
    padding-left: var(--rhythm-gutter);
  }

  .timeline-container > .path-hero .hero-scroll-cue {
    right: var(--rhythm-gutter);
    left: var(--rhythm-gutter);
  }
}

@media (max-width: 520px) {
  :root {
    --rhythm-standard-y: 80px;
    --rhythm-compact-y: 64px;
    --rhythm-dense-y: 48px;
    --rhythm-rule-top: 64px;
    --rhythm-rule-bottom: 56px;
    --rhythm-panel-y: 88px;
  }
}

.direct-page > .bg-silk.py-32 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.direct-page > .bg-silk.py-32 .comparison-container {
  width: var(--content-rail);
  max-width: var(--content-max);
  margin-right: auto;
  margin-left: auto;
}

.direct-page > .page-rule + .direct-fit-section {
  padding-top: 0;
}

@media (max-width: 900px) {
  .direct-page > .bg-silk.py-32 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}