/* The desktop layout system (PRD-32 §7): the shared grid every marketing
   page adopts in PR C. Additive — nothing in landing.css moves. Two
   breakpoints the site already has (600, 880) and one new (1200).
   Loaded after base.css and before each page's own sheet. */

:root {
  --wrap: 72rem;
  --wrap-prose: 42rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--prose {
  max-width: var(--wrap-prose);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Full-bleed bands ───────────────────────────────────────────────
   A band paints edge to edge; a .wrap inside holds the content column.
   Each modifier is a token scope that sets --muted, --faint, --line and
   --focus-ring explicitly — no text on a band may use a token the band
   has not set. Navy and card keep the page tokens. */

.band {
  padding-block: var(--section-y);
}

.band--paper {
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
  --muted: var(--ink-muted);
  --faint: var(--ink-faint);
  --line: var(--paper-line);
  --line-soft: var(--paper-line-soft);
  --well: var(--paper-well);
  --focus-ring: var(--ink);
}

.band--card {
  background: var(--card);
  --focus-ring: var(--paper);
}

.band--green {
  background: var(--brand-green);
  color: #ffffff;
  --muted: #d5e0da; /* 5.47:1 on the green */
  --faint: #c9d6cf; /* 4.94:1 on the green */
  --line: rgba(255, 255, 255, 0.35);
  --line-soft: rgba(255, 255, 255, 0.22);
  --focus-ring: var(--paper);
}

/* Accent (orange) is not the paper remap — the paper remap's muted,
   faint, hairline and accent-ink tiers fail on orange (2.23, 1.62, 1.06
   and 1.64:1). Every text token, --line and --focus-ring resolve to ink
   (5.85:1); all text on orange is navy. --accent-ink and .btn--primary
   are forbidden on it. */
.band--accent {
  background: var(--accent);
  color: var(--ink);
  --muted: var(--ink);
  --faint: var(--ink);
  --ink-muted: var(--ink);
  --ink-faint: var(--ink);
  --line: var(--ink);
  --line-soft: rgba(1, 11, 27, 0.28);
  --focus-ring: var(--ink);
}

/* A class that sets display beats the hidden attribute — these never do. */
.band[hidden] {
  display: none;
}

/* ── Splits and grids ─────────────────────────────────────────────── */

.split,
.split--reverse {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 880px) {
  .split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .split--reverse {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 880px) {
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── Shared controls ──────────────────────────────────────────────── */

/* Navy fill, white text: the button for orange bands, where an orange
   button would have no boundary and orange text fails (1.64:1). */
.btn--ink {
  background: var(--ink);
  color: #ffffff;
  border: 1px solid transparent;
}

.btn--ink:hover {
  background: #14243f;
}

.btn--ink:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── Section heads ────────────────────────────────────────────────── */

.section__head,
.section__head--center {
  max-width: 36rem;
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__head .eyebrow,
.section__head--center .eyebrow {
  margin-bottom: 0.6rem;
}