/*
 * The landing's own composition. Every primitive here comes from ui.css and
 * every value from tokens.css; this sheet only arranges them into a poster.
 *
 * Everything is scoped under `.landing`. Turbo's head merge copies a page sheet
 * in and never takes it back out, so an unscoped rule here would follow the
 * visitor through the whole session, and every visitor enters through this page.
 */

.landing {
  gap: var(--space-7);
}

/* The front door is where the mark introduces itself, so it is set larger
   here than in the app chrome. */
.landing .wordmark {
  font-size: var(--text-title);
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.landing .hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.landing .hero__title {
  color: var(--amarillo);
}

.landing .hero__line {
  display: block;
}

.landing .hero__line--accent {
  color: var(--rosa);
}

.landing .hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ── Steps ─────────────────────────────────────────────────────────────── */

.landing .steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.landing .step {
  display: grid;
  grid-template-columns: var(--tap) 1fr;
  gap: var(--space-1) var(--space-3);
  counter-increment: step;
}

.landing .step::before {
  content: counter(step);
  display: flex;
  grid-row: 1 / span 2;
  grid-column: 1;
  align-items: center;
  justify-content: center;
  height: var(--tap);
  background: var(--amarillo);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font: 400 var(--text-title) / 1 var(--font-display);
}

.landing .step > * {
  grid-column: 2;
}

/* ── Stats ─────────────────────────────────────────────────────────────── */

/* A row header here names the stat rather than labelling a column, so it wears
   the body face instead of the table's mono caps. */
.landing .stats th[scope="row"] {
  font: 800 var(--text-body) / var(--leading-tight) var(--font-body);
  letter-spacing: normal;
  text-transform: none;
  color: var(--texto);
  white-space: nowrap;
  vertical-align: top;
}

/* ── Fight ─────────────────────────────────────────────────────────────── */

/* "Primero quiero ver una pelea" promises to take you somewhere; a jump cut
   reads as a broken link. ui.css forces `auto` under prefers-reduced-motion. */
html:has(.landing) {
  scroll-behavior: smooth;
}

.landing .fight {
  scroll-margin-block-start: var(--space-5);
}

/* ── Pledge ────────────────────────────────────────────────────────────── */

.landing .pledge {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing .pledge__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.landing .pledge__mark {
  color: var(--menta);
}