/* site/system/index.css: page CSS for site/index.html, the framing screen, and for that page only.
 *
 * Linked LAST in the head (S2), so a rule here can override a component without raising specificity.
 * Anything two pages spend lives in components.css instead: the C1 line and the page title were
 * promoted there on this ticket under S5, and the nav and the button were already there.
 *
 * S1, and gate group 6 treats this file as a consumer exactly as it treats components.css: contract
 * tokens only, no colour literal, no pack primitive, no bare px on padding, margin, gap,
 * border-radius or font-size. No @import either, since an @import is invisible to the S2 order check.
 *
 * The page has one job and one action. The seam sentence is the largest thing after the H1 because
 * it is the claim the whole build is making, the proposal under it sits at body size as the answer,
 * and the CTA gets air rather than a box: a single action does not need a container to be found.
 */

/* .page-frame's structure is in components.css (S5). This page keeps only what differs: a wider gap,
   because the seam and the proposal are two beats rather than one paragraph and its follow-on, and a
   slightly tighter measure. */
.page-frame {
  gap: var(--spacing-lg);
  max-width: 62ch;
}

/* The seam. `.lead` carries the size; this carries the measure, so the sentence breaks where it
   reads rather than where the column ends. */
.page-seam {
  max-width: 54ch;
}

/* The proposal is the answer to the sentence above it, so it takes a rule rather than a box. A
   claim in a box is a claim asking to be believed, which is the register handover.css's own .page-bet
   comment names and this page keeps. */
.page-proposal {
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--color-fg);
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-md);
}

.page-cta {
  display: grid;
  justify-items: start;
  gap: var(--spacing-md);
  margin-top: var(--spacing-2xl);
}

.page-cta-note {
  font-size: var(--type-caption);
  line-height: 1.6;
  color: var(--color-fg-muted);
  max-width: 52ch;
}