/* 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(--brand-white); /* white in both modes (rebrand PR 6) */
  color: var(--ink);
  color-scheme: light;
  --accent-text: var(--accent-ink);
  --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-teal);
  color: #ffffff;
  --muted: var(--brand-teal-tint); /* 5.17:1 on teal */
  --faint: var(--brand-teal-tint); /* 5.17:1 on teal */
  --line: rgba(255, 255, 255, 0.35);
  --line-soft: rgba(255, 255, 255, 0.22);
  --focus-ring: var(--paper);
}

/* Accent (teal) is not the paper remap — the paper remap's muted, faint
   and accent-ink tiers are dark and fail on teal. Every text token, --line
   and --focus-ring resolve to --on-accent (white, 6.03:1); all text on teal
   is white. --accent-ink and .btn--primary are forbidden on it. */
.band--accent {
  background: var(--accent);
  color: var(--on-accent);
  --muted: var(--on-accent);
  --faint: var(--on-accent);
  --ink-muted: var(--on-accent);
  --ink-faint: var(--on-accent);
  --accent-text: var(--on-accent);
  --line: var(--on-accent);
  --line-soft: rgba(255, 255, 255, 0.35);
  --focus-ring: var(--on-accent);
}

/* 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: #242423; /* ink lifted for hover, both modes (rebrand PR 6) */
}

.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;
}