/* 08-pages/_site.css — how a public page arranges the site modules. Composition only. The measure is
   --measure-site (88 rem, in 01-settings/_layout.css), wider than the app's 76 rem, and sections are
   --gap-site-section (64 px, in 01-settings/_spacing.css) apart, because a marketing
   page is read top to bottom, not scanned. The page ground and the type are the app's. */
.site { min-height: 100svh; display: flex; flex-direction: column; }
.site__main { flex: 1; }
.site__container { width: 100%; max-width: var(--measure-site); margin-inline: auto; padding-inline: var(--gutter-page); }
.site__container > * + * { margin-top: var(--gap-site-section); }
.site__section { display: flex; flex-direction: column; gap: var(--space-lg); }
.site__section-title { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.site__section-lede { color: var(--ink-muted); font-size: var(--text-base); max-width: var(--measure-prose); margin-top: calc(-1 * var(--space-sm)); }
/* Body prose on the site (a paragraph, the FAQ answers, the privacy page) is 16 px and at most 65 ch. */
.site__prose { font-size: var(--text-base); line-height: var(--leading-normal); max-width: var(--measure-prose); display: flex; flex-direction: column; gap: var(--space-md); }
.site__prose h2 { font-size: var(--text-xl); padding-top: var(--space-md); }
.site__prose h3 { font-size: var(--text-lg); padding-top: var(--space-xs); }
/* Two columns for a section with an image beside its text (the shared core, the shop floor). */
.site__split { display: grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); align-items: center; }
.site__split .c-feature__frame { aspect-ratio: 4 / 3; }
/* The five module doorways on the landing page: five across from lg, three from md, two from sm, one below. */
.site__doorways { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .site__doorways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56.25rem) { .site__doorways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .site__doorways { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* A narrow column for the contact form; its form grid is two columns, not three. */
.site__narrow { max-width: var(--measure-narrow); }
.site__narrow .o-grid--form { --grid-min: 16rem; }