/* Public-page vertical rhythm. Edit these tokens to change every page.
   Adjacent modules each contribute half the gap: 32 + 32 = 64px.
   Component padding, editor controls and paragraph spacing stay component-owned. */
:root {
  --site-section-gap: 64px;
  --site-section-inset: calc(var(--site-section-gap) / 2);
}
@media (max-width: 767px) {
  :root { --site-section-gap: 40px; }
}

/* Only outer modules, never nested examples, editor sections or dialogs.
   Important is limited to outer spacing to supersede historical ID selectors
   and responsive utility classes; this file is loaded last by the build. */
.site-spacing :is(main > section, main > div:not([class]) > section, .tool-first-screen > section) {
  padding-block: var(--site-section-inset) !important;
  margin-block: 0 !important;
}
.site-spacing :is(main > section, main > div:not([class]) > section, .tool-first-screen > section) > :first-child {
  margin-block-start: 0;
}
.site-spacing :is(main > section, main > div:not([class]) > section, .tool-first-screen > section) > :last-child {
  margin-block-end: 0;
}
/* Sample buttons belong to the document editor, not a separate module. */
.site-spacing .word-sample-links { margin-block: 0; }
.site-spacing > footer { margin-block-start: 0 !important; }

/* Information and editorial pages share the same section rhythm. */
.site-spacing :is(.info-page, .blog-page) {
  padding-block: var(--site-section-inset);
}
.site-spacing :is(.info-hero, .blog-hero) {
  padding-block: var(--site-section-inset);
}
.site-spacing :is(.info-layout, .blog-layout, .blog-cards) {
  padding-block-start: var(--site-section-gap);
}
.site-spacing .info-content > section {
  margin-block: 0 var(--site-section-gap);
}
.site-spacing .info-content > section:last-child { margin-block-end: 0; }
.site-spacing .blog-body > section { margin-block-start: var(--site-section-gap); }
.site-spacing :is(.info-next, .blog-cta) { margin-block-start: var(--site-section-gap); }

/* Pricing has a single wrapper instead of top-level sections. */
.site-spacing .pricing-reference > div {
  padding-block: var(--site-section-inset);
}
.site-spacing .pricing-reference > div > :is(div, section) {
  margin-block: 0;
}
.site-spacing .pricing-reference > div > :is(div, section) + :is(div, section) {
  margin-block-start: var(--site-section-gap);
}
.site-spacing [data-pricing-account-status] { margin-block: var(--site-section-inset) 0; }
.site-spacing [data-account-retry] { margin-block-start: var(--site-section-inset); }