/* Landing narrative tokens + shared rules — issue #160.

   Every color/radius/motion/type value below resolves to a Cobalt Desk
   token (`--cd-*` from team/cobalt-desk.css, loaded before this file on
   every landing page) — this file introduces ZERO literal colors and
   ZERO literal type sizes. It used to declare its own `--cd-landing-*`
   size tokens; Pim's ruling on #160 (2026-08-17) reversed that: a
   page-scoped type token is exactly as barred as a raw literal ("in
   direct tension with AC3 bullet 1 — inherited, not invented"), so the
   type scale this surface needs now lives in cobalt-desk.css itself
   (`--cd-font-size-2xs` through `-2xl`, plus `-display-h2`/`-display-
   hero` for the two fluid clamp() sizes this surface owns) — the
   sanctioned route when the ratified set doesn't cover a control a page
   needs. `--cd-landing-max-width`/`-section-gap` stay here: pure layout
   geometry, never a colour or type-size clause, same as #174's per-
   screen `.layout-*` wrappers.

   AC9 requires this surface to clear the WCAG AA projection floor
   (running body-copy prose ≥16px — Pim's ruling on the *reading*, not
   document.body's own computed size — plus ≥4.5:1 text, ≥3:1 large
   text/UI borders), a floor cobalt-desk.css's own base does not clear
   (see its header comment and
   app/evidence-reports/173-cobalt-desk/projection-floor-measurements.json).
   That gap was explicitly left for "whoever needs the floor to bind" to
   close; #160 AC9 is that WP, scoped to just this surface — every rule
   below that carries running prose (`.landing-fact-card p`, `.arch-step
   p`, `.landing-footer-cta p`, unstyled section `<p>`) uses
   `--cd-font-size-md` (16px) or larger, never smaller.

   Contrast pairs used below are chosen from cobalt-desk's own palette,
   verified against WCAG AA by scripts/landing-homescreen-ui.js (not by
   eye): --cd-color-text and --cd-color-text-dim on both
   --cd-color-bg/--cd-color-surface, and --cd-color-text-on-accent on
   --cd-color-accent, all clear 4.5:1. --cd-color-text-faint/-empty-* are
   deliberately NOT used for any text here — they fail 4.5:1 (measured in
   the 173 report) and this surface cannot inherit that gap. */

:root {
  --cd-landing-max-width: 1120px;
  --cd-landing-section-gap: clamp(4rem, 10vh, 7rem);
}

.landing-body {
  font-size: var(--cd-font-size-md);
  line-height: 1.6;
}

.landing-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem clamp(1.25rem, 4vw, 3rem);
  background: var(--cd-color-surface);
  border-bottom: 1px solid var(--cd-color-border);
}
.landing-header .brand { font-weight: 700; font-size: var(--cd-font-size-sm); color: var(--cd-color-text); }
.landing-header nav { display: flex; gap: 1.5rem; align-items: center; }
.landing-header a.landing-nav-link {
  color: var(--cd-color-text-dim);
  text-decoration: none;
  font-size: var(--cd-font-size-2xs);
  font-weight: 600;
}
.landing-header a.landing-nav-link:hover { color: var(--cd-color-accent); }

.landing-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: var(--cd-font-size-sm);
  font-weight: 700;
  padding: 0.75rem 1.4rem;
  border: none;
  border-radius: var(--cd-radius-pill);
  background: var(--cd-color-accent);
  color: var(--cd-color-text-on-accent);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s var(--cd-ease), background 0.15s;
}
.landing-cta:hover { background: var(--cd-color-accent-hover); transform: translateY(-1px); }
.landing-cta svg { width: 16px; height: 16px; }

.landing-section {
  max-width: var(--cd-landing-max-width);
  margin: 0 auto;
  padding: var(--cd-landing-section-gap) clamp(1.25rem, 4vw, 3rem);
}
.landing-eyebrow {
  font-size: var(--cd-font-size-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cd-color-accent);
  margin: 0 0 0.75rem 0;
}
.landing-section h2 {
  font-size: var(--cd-font-size-display-h2);
  margin: 0 0 1rem 0;
  color: var(--cd-color-text);
}
.landing-lede {
  font-size: var(--cd-font-size-lg);
  color: var(--cd-color-text-dim);
  max-width: 62ch;
  margin: 0 0 1.5rem 0;
}

.landing-fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.landing-fact-card {
  background: var(--cd-color-surface);
  border: 1px solid var(--cd-color-border);
  border-radius: var(--cd-radius-lg);
  padding: 1.5rem;
}
.landing-fact-card h3 {
  margin: 0 0 0.5rem 0;
  font-size: var(--cd-font-size-sm);
  color: var(--cd-color-text);
}
.landing-fact-card p {
  margin: 0;
  font-size: var(--cd-font-size-md);
  color: var(--cd-color-text-dim);
  line-height: 1.55;
}

/* ---- architecture diagram (shared by all three; each page wires its own
   reveal mechanism via landing.js, differing per AC4c) ---- */

.arch-diagram { position: relative; margin-top: 2.5rem; }
.arch-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--cd-color-surface);
  border: 1px solid var(--cd-color-border);
  border-radius: var(--cd-radius-lg);
  padding: 1.25rem 1.5rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--cd-ease), transform 0.5s var(--cd-ease);
}
.arch-step.is-revealed { opacity: 1; transform: translateY(0); }
.arch-step .arch-step-index {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--cd-color-accent);
  color: var(--cd-color-text-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--cd-font-size-xs);
}
.arch-step h3 { margin: 0 0 0.3rem 0; font-size: var(--cd-font-size-sm); color: var(--cd-color-text); }
.arch-step p { margin: 0; font-size: var(--cd-font-size-md); color: var(--cd-color-text-dim); }

@media (prefers-reduced-motion: reduce) {
  .arch-step {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.landing-footer-cta {
  text-align: center;
  padding: var(--cd-landing-section-gap) clamp(1.25rem, 4vw, 3rem);
  background: var(--cd-color-header-bg);
  color: var(--cd-color-header-text);
}
.landing-footer-cta h2 { color: var(--cd-color-header-text); font-size: var(--cd-font-size-display-h2); margin: 0 0 0.75rem 0; }
.landing-footer-cta p { color: var(--cd-color-header-text-dim); margin: 0 0 1.75rem 0; }
.landing-footer-cta .landing-cta {
  background: var(--cd-color-surface);
  color: var(--cd-color-accent);
}
.landing-footer-cta .landing-cta:hover { background: var(--cd-color-accent-soft); }

.landing-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.landing-compare-card {
  background: var(--cd-color-surface);
  border: 1px solid var(--cd-color-border);
  border-radius: var(--cd-radius-lg);
  padding: 1.75rem;
}
.landing-compare-card h2 { margin: 0 0 0.4rem 0; font-size: var(--cd-font-size-lg); color: var(--cd-color-text); }
.landing-compare-card .landing-idea { font-size: var(--cd-font-size-xs); color: var(--cd-color-text-dim); margin: 0 0 1.25rem 0; }