/* app-pages: layout glue for the marketing sub-pages (how-it-works, what-you-get, pricing, faq, about, privacy, terms).
   Built from design-system pieces (ds-container, ds-prose, ds-banner-callout, ds-data-table, the atlas sections);
   this file only spaces them. Tokens only: no colour, font, radius or shadow literals. */

.x-page-head { padding-block: var(--ds-space-16) var(--ds-space-8); }
.x-page-head .ds-display { max-inline-size: 20ch; }
.x-page-head .ds-body-lg { max-inline-size: 60ch; }
.x-page-note { padding-block-end: var(--ds-space-6); }

.x-sec { padding-block: var(--ds-space-8); }
.x-sec > .ds-container > h2 { margin-block-end: var(--ds-space-4); }
.x-prose { font-family: var(--ds-font-sans); }
.x-prose > * + * { margin-block-start: var(--ds-space-4); }
.x-prose :is(ul, ol) { display: grid; gap: var(--ds-space-2); }
.x-prose li { padding-inline-start: var(--ds-space-1); }
.x-prose .ds-data-table { max-inline-size: 100%; }


/* the closing call to action */
.x-cta__links { display: flex; flex-wrap: wrap; gap: var(--ds-space-4) var(--ds-space-6); align-items: center; margin-block-start: var(--ds-space-4); }

/* home: the "full page" link under each summary */
.x-more { margin-block-start: var(--ds-space-6); display: flex; justify-content: flex-start; }
.x-more a { display: inline-flex; align-items: center; gap: var(--ds-space-2); font-weight: var(--ds-weight-medium); color: var(--ds-ink-link, var(--ds-accent-ink)); text-decoration: underline; text-underline-offset: 0.25em; }
.x-more a:hover { text-decoration-thickness: 2px; }
.x-sec-inner { max-inline-size: 1320px; margin-inline: auto; padding-inline: var(--ds-gutter-page); }

@media (max-width: 760px) {
  .x-page-head { padding-block: var(--ds-space-10) var(--ds-space-6); }
  .x-sec { padding-block: var(--ds-space-6); }
}

/* the plain "Back to top" link at the end of every page (design-system back-to-top companion) */
.x-back-link { padding-block: var(--ds-space-6) var(--ds-space-8); }