/* One horizontal rhythm for the whole page: header, hero, sections and footer. */
:root { --page-gutter: clamp(20px, 4.3vw, 70px); }

html,
body {
  overflow-x: clip;
}

.site-header,
.hero,
.section,
.split,
.result-section,
.image-section,
.not-for,
.program,
.tariffs,
.tariff-details,
.final-offer,
footer {
  padding-right: var(--page-gutter);
  padding-left: var(--page-gutter);
}

.section {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

.hero .proof-strip { left: var(--page-gutter); }

.result-section > .section-intro,
.result-section > .result-grid,
.result-section > .statement,
.why-section > .section-intro,
.why-section > .feature-grid,
.tariffs > .section-intro,
.tariffs > .tariff-grid,
.tariffs > .offer-note,
.tariff-details > .detail-columns,
.program .program-intro,
.program .program-parts,
.program .program-principle {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

@media (max-width: 900px) {
  .site-header,
  .hero,
  .section,
  .split,
  .result-section,
  .image-section,
  .not-for,
  .program,
  .tariffs,
  .tariff-details,
  .final-offer,
  footer {
    padding-right: var(--page-gutter);
    padding-left: var(--page-gutter);
  }

  /* In mobile flow the strip already lives inside the padded hero. */
  .hero .proof-strip { left: 0; }
}