@if (page(); as copy) {
  <div class="content-container stack page">
    <app-page-hero [hero]="copy.hero" [ctas]="copy.ctas" />
    @for (section of copy.sections; track section.id) {
      <app-content-section [section]="section" />
      @if (section.id === 'sequence') {
        <app-process-steps [steps]="steps()" [labelledBy]="sequenceHeadingId()" />
      }
      @if (section.id === 'offer-boundary' && copy.offerings.length > 0) {
        <ul class="stack offerings">
          @for (offering of copy.offerings; track offering.id) {
            <li class="glass-surface">
              <h3>{{ offering.title }}</h3>
              <p>{{ offering.body }}</p>
            </li>
          }
        </ul>
      }
    }
    <section class="stack" [attr.aria-labelledby]="'reference-' + copy.routeId">
      <h2 [id]="'reference-' + copy.routeId">{{ copy.sequence.referenceNote }}</h2>
      <app-case-card [caseStudy]="referenceCase()" />
    </section>
    <app-content-section [section]="copy.sequence.inquiry" />
    <app-cta-row [ctas]="copy.ctas" />
  </div>
}