/* Ledger landing pages. Every component is a vendored sarib-design s- class
   (sarib/tokens.css + sarib/components.css, hash-locked, never edited here).
   This file only places them: page frame, grids and rows. No colours, sizes or
   radii of its own beyond token references. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Header band, canvas, footer band: the canvas grows so the footer sits at the bottom. */
body { display: flex; flex-direction: column; min-height: 100dvh; }

/* The Ledger mark, drawn in ink: red is one moment per view, and on these
   pages that moment is the hero's accent word (decision 5 + rule 11). */
.ledger-logo { color: var(--s-color-content-primary); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-spacing-4); }

/* Feature cards: 1 → 2 (768) → 3 (1280) columns, gap 16, as the origin's guide grid. */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-spacing-5); }
@media (min-width: 768px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-icon { width: var(--s-glyph-20); height: var(--s-glyph-20); color: var(--s-color-content-tertiary); }

/* Long-form pages (privacy, terms): the 720 reading column. Article h2 is
   Flex body-xl 500 ink (DESIGN.md 3.3); s-prose has no heading rule of its own. */
.doc { max-width: var(--site-article-max); }
.doc > h2 { margin-top: var(--s-spacing-7); font: var(--s-type-body-xl); font-weight: var(--s-font-weight-medium); color: var(--s-color-content-primary); }

/* 404 destination cards (seam rule 3): one column, two from md. */
.nf-dest { display: grid; gap: var(--s-spacing-5); }
@media (min-width: 768px) { .nf-dest { grid-template-columns: repeat(2, minmax(0, 1fr)); } }