/* Shared compact rhythm. Typography, touch targets and stacked headings stay intact. */
:root { --section-y: clamp(32px, 4vw, 56px); }
main .section:not(.author-sources) {
  padding-block: var(--section-y);
}
main .hero > .container {
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(28px, 3.5vw, 48px);
  gap: clamp(24px, 3.5vw, 44px);
}
.hero .breadcrumb { margin-bottom: 14px; }
.hero .lead { margin-block: 16px 12px; }
.hero .lead + .hero-support { margin-block: 12px 16px; }
.hero .hero-ctas { margin-top: 18px; gap: 10px; }
.section .section-head {
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 16px;
}
.section .section-head::after { margin-top: 10px; }
.section > .container > p:not(.highlight-note):not(.definition-note):not(.table-scroll-hint) {
  margin-block: 12px;
}
.section .body-subheading { margin-block: 24px 10px; }
.section .body-subheading + :is(p, ul, ol, div) { margin-top: 0; }
.section .topic-grid { gap: 14px; margin-block: 16px 20px; }
.section .topic-block { padding: clamp(18px, 2vw, 24px); }
.topic-block > h3 { margin-bottom: 12px; }
.topic-block > p { margin-bottom: 10px; }
.topic-block > p:last-child { margin-bottom: 0; }
.section :is(.highlight-note, .definition-note) {
  margin-block: 16px;
  padding: 16px 18px;
}
.section .callout { margin-top: 14px; padding: 14px 18px; }
.section .grid { gap: 16px; }
.section .grid > .card:not(.card--nopad) { padding: 18px; }
article.related-link.linked-card { gap: 14px; padding: 18px; }
.section .faq { gap: 8px; }
.section .faq summary { min-height: 54px; padding: 14px 18px; }
.section .faq .a { padding: 0 18px 18px 46px; }
.section .checklist { gap: 10px; }
main :is(.editorial-visual-section, .material-visual-section) {
  padding-block: clamp(18px, 2.5vw, 30px);
}
:is(.editorial-visual, .material-visual) > figcaption {
  padding: clamp(16px, 2vw, 24px);
}
main .route-selector { padding-block: 28px; }
.route-selector__head { margin-bottom: 18px; }
.route-selector .route-card { min-height: 220px; padding: 18px; }
main :is(.contact-cta, .contact-brief-section) {
  padding-block: clamp(32px, 4vw, 56px);
}
.author-sources { padding-block: 18px !important; }

/* Panels and following content must not share a zero-margin boundary. */
:is(.topic-block, .section > .container, .card) > :is(.key-points, .grid, .callout) + * {
  margin-top: 16px;
}
:is(.topic-block, .section > .container, .card) > :is(p, h3) + .checklist {
  margin-top: 12px;
}
.section > .container > h3:not(.body-subheading) {
  margin-block: 24px 12px;
}
.topic-block > p:has(> .btn) {
  margin-top: 16px;
}

@media (max-width: 720px) {
  :root { --section-y: 32px; }
  main .hero > .container { padding-block: 24px 32px; gap: 24px; }
  .section .section-head { margin-bottom: 16px; padding-bottom: 14px; }
  .section .grid { gap: 12px; }
  .section .faq .a { padding-inline: 18px; }
  main :is(.editorial-visual-section, .material-visual-section) { padding-block: 18px; }
  main .route-selector { padding-block: 24px; }
  .route-selector .route-card { min-height: 0; }
}

/* Treat an illustration as part of the reading flow, not two padded sections.
   Text -> image: 12 + 12 px. Image -> next section: 12 + 20 px. */
main .section:has(+ :is(.editorial-visual-section, .material-visual-section)) {
  padding-bottom: 12px;
}
main :is(.editorial-visual-section, .material-visual-section) {
  padding-block: 12px;
  margin-block: 0;
}
main :is(.editorial-visual-section, .material-visual-section) + .section:not(.author-sources) {
  padding-top: 20px;
}
main :is(.editorial-visual-section, .material-visual-section) :is(.editorial-visual, .material-visual) {
  margin-block: 0;
}
main .section:has(+ :is(.editorial-visual-section, .material-visual-section)) > .container > :last-child {
  margin-bottom: 0;
}

@media print {
  main :is(.section, .contact-cta, .contact-brief-section) { padding-block: 16px; }
}