/* The public-page layer (2026-10-14): the landing and /roadmap. Larger type,
 * generous spacing, and the brand glows, on top of app.css components (btn,
 * badge, pill, card). Tokens only. Mobile-first, with the same two
 * breakpoints as app.css (768px, 1280px). */

/* ---- shared scaffolding ------------------------------------------------------ */
.site-page {
  font-size: var(--fs-md);
  line-height: 1.6;
}
.site-page h2 {
  font-size: clamp(26px, 4vw, var(--fs-2xl));
  line-height: 1.15;
  letter-spacing: -0.4px;
}
.site-page h3 {
  font-size: var(--fs-lede);
  line-height: 1.3;
}
.kicker {
  margin-bottom: var(--sp-2);
  color: var(--accent);
  font: 700 var(--fs-sm) / 1.2 var(--font-mono);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.lede {
  max-width: 60ch;
  color: var(--text-dim);
  font-size: var(--fs-lede);
  line-height: 1.6;
}
.section-lede {
  max-width: 62ch;
  margin-top: var(--sp-3);
  color: var(--text-dim);
}
.section-more {
  margin-top: var(--sp-5);
}
.section-more a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.section-more a:hover {
  text-decoration: underline;
}
.page-head {
  max-width: 760px;
  padding-block: var(--sp-5) var(--sp-6);
}
.page-head h1 {
  margin-bottom: var(--sp-3);
  font-size: clamp(32px, 5vw, var(--fs-3xl));
  letter-spacing: -1px;
}

/* ---- landing: hero ----------------------------------------------------------- */
.lp-hero {
  margin-top: calc(-1 * var(--sp-5)); /* flush under the header: cancels main's top padding */
  padding-block: var(--sp-7);
  background:
    radial-gradient(ellipse 60% 70% at 85% 25%, var(--glow-teal), transparent 70%),
    radial-gradient(ellipse 45% 60% at 5% 95%, var(--glow-coral), transparent 70%);
  border-bottom: 1px solid var(--line);
}
.lp-hero-grid {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}
.lp-hero-copy {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
}
.lp-hero h1 {
  max-width: 14ch;
  font-size: var(--fs-hero);
  line-height: 1.04;
  letter-spacing: -1.5px;
}
.lp-tagline {
  color: var(--danger);
  font: 700 var(--fs-base) / 1.2 var(--font-mono);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.lp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.lp-ctas {
  margin-top: var(--sp-2);
}
.lp-note {
  color: var(--text-dim);
  font-size: var(--fs-base);
}

/* ---- landing: the link demo (hero illustration) --------------------------------- */
.link-demo {
  display: grid;
  gap: var(--sp-3);
  width: 100%;
  max-width: 460px;
  justify-self: center;
}
.ld-route {
  padding: var(--sp-4);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.ld-alive {
  border-color: var(--line-ok);
}
.ld-broken {
  border-color: var(--line-danger);
}
.ld-route-name {
  margin-bottom: var(--sp-3);
  color: var(--text-dim);
  font: 700 var(--fs-xs) / 1 var(--font-mono);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.ld-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
}
.ld-mon {
  display: grid;
  justify-items: center;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-2);
  background: var(--surface-2);
  border-radius: var(--r-md);
  text-align: center;
}
.ld-dot {
  width: 34px;
  height: 34px;
  border: 3px solid currentColor;
  border-radius: 50%;
}
.ld-p1 {
  color: var(--player-1);
}
.ld-p2 {
  color: var(--player-2);
}
.ld-who {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
}
.ld-lv {
  color: var(--text-dim);
  font: 700 var(--fs-sm) / 1.2 var(--font-mono);
}
.ld-chain {
  width: 28px;
  height: 28px;
}
.ld-alive .ld-chain,
.ld-alive .ld-status {
  color: var(--ok);
}
.ld-broken .ld-chain,
.ld-broken .ld-status,
.ld-dead .ld-lv {
  color: var(--danger);
}
.ld-dead .ld-dot {
  color: var(--danger);
  border-style: dashed;
}
.ld-dead .ld-who {
  color: var(--text-dim);
}
.ld-status {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.link-demo figcaption {
  color: var(--text-dim);
  font-size: var(--fs-sm);
  text-align: center;
}

/* ---- landing: sections ---------------------------------------------------------- */
.lp-section {
  padding-top: var(--sp-8);
}
.feature-grid,
.steps,
.teaser-grid {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding: 0;
  list-style: none;
}
.feature,
.step,
.teaser {
  padding: var(--sp-5);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.feature h3,
.step h3,
.teaser h3 {
  margin-bottom: var(--sp-2);
}
.feature p,
.step p,
.mode p,
.teaser p {
  color: var(--text-dim);
}
.feature-icon {
  width: 42px;
  height: 42px;
  margin-bottom: var(--sp-4);
  padding: 10px;
  background: var(--tint-ok);
  border-radius: var(--r-md);
  color: var(--accent);
}

.mode-grid {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.mode {
  padding: var(--sp-6) var(--sp-5);
  background: linear-gradient(160deg, var(--surface-1), var(--surface-0));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.mode-icon {
  width: 32px;
  height: 32px;
  margin-bottom: var(--sp-3);
  color: var(--accent);
}
.mode h3 {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-lg);
}

.expect {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-5);
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--warn);
  border-radius: var(--r-lg);
}
.expect-list {
  display: grid;
  gap: var(--sp-5);
  padding: 0;
  list-style: none;
}
.expect-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}
.expect-icon {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--warn);
}
.expect-list h3 {
  margin-bottom: var(--sp-1);
  font-size: var(--fs-md);
}
.expect-list p {
  color: var(--text-dim);
}

.steps {
  counter-reset: step;
}
.step {
  counter-increment: step;
}
.step::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: var(--sp-4);
  background: var(--accent);
  border-radius: 50%;
  color: var(--surface-0);
  font: 700 var(--fs-md) / 1 var(--font-display);
}

.teaser {
  display: block;
  height: 100%;
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.teaser:hover {
  border-color: var(--line-ok);
  transform: translateY(-2px);
}
.teaser p {
  font-size: var(--fs-base);
}

/* ---- roadmap ------------------------------------------------------------------- */
.promise {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  margin-bottom: var(--sp-4);
  padding: var(--sp-5);
  background: var(--tint-ok);
  border: 1px solid var(--line-ok);
  border-radius: var(--r-lg);
}
.promise-icon {
  width: 28px;
  height: 28px;
  color: var(--ok);
}
.promise p + p {
  margin-top: var(--sp-1);
}
.rm-phase {
  padding-top: var(--sp-7);
  scroll-margin-top: 72px; /* #anchors clear the sticky header */
}
.rm-phase-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.rm-list {
  display: grid;
  gap: var(--sp-3);
  padding: 0;
  list-style: none;
}
.rm-item {
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  scroll-margin-top: 80px;
}
.rm-item:target {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--tint-ok);
}
.rm-item h3 {
  margin-bottom: var(--sp-1);
}
.rm-item p {
  color: var(--text-dim);
}
.rm-today {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--line);
  font-size: var(--fs-base);
}
.rm-today .icon {
  margin-top: 3px;
  color: var(--ok);
}
.rm-today b {
  color: var(--text);
}

/* ---- breakpoints: the ONLY two -------------------------------------------------- */
@media (min-width: 768px) {
  .lp-hero {
    padding-block: var(--sp-8);
  }
  .feature-grid,
  .mode-grid,
  .steps,
  .expect-list,
  .rm-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .teaser-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .expect {
    padding: var(--sp-6);
  }
}

@media (min-width: 1280px) {
  .lp-hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
  .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .expect {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
    align-items: start;
  }
}