/* Landing page (index.html, plus the /install 503 page for the footer), loaded after style.css.
   Uses the theme's tokens and components; no new colours except the illustration's own. */

/* ---- Hero ----------------------------------------------------------------------- */
.hero {
  display: grid; gap: var(--space-6); align-items: center;
  padding: var(--space-4) 0 var(--space-6);
}
@media (min-width: 840px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    padding-top: var(--space-5); padding-bottom: var(--space-5);
  }
}
.hero__text > * { margin: 0; }
.hero__text > * + * { margin-top: var(--space-4); }
.hero__brand {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-lg); font-weight: 700; color: var(--accent);
}
.hero__brand .brand__icon { width: var(--icon-lg); height: var(--icon-lg); }
.hero__text > .hero__brand + h1 { margin-top: var(--space-2); }
.hero h1 { font-size: var(--text-2xl); letter-spacing: -0.01em; }
.hero__lead { font-size: var(--text-lg); line-height: 1.4; color: var(--muted); max-width: 36ch; }
.hero .actions { margin-top: var(--space-5); }
.hero__hint { font-size: var(--text-sm); color: var(--muted); max-width: 52ch; }
.hero__hint b { color: var(--fg); font-weight: 600; }
.hero__art { margin: 0; max-width: 560px; } /* one column (< 840px): not wider than on desktop */
.hero__art svg { display: block; width: 100%; height: auto; }

/* ---- Steps ---------------------------------------------------------------------- */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); align-content: start; }
.step__icon {
  grid-row: span 2;
  width: var(--icon-lg); height: var(--icon-lg); border-radius: var(--radius-full);
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--link);
}
.step h3 { margin: 0; align-self: end; }
.step p { margin: 0; font-size: var(--text-sm); color: var(--muted); }
.step p b { color: var(--fg); font-weight: 600; }

/* ---- Screenshots ---------------------------------------------------------------- */
.shots { margin-top: var(--space-6); }
.shots__grid { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 840px) {
  /* Column widths in proportion to each image's aspect ratio (611/629, 978/766) give both the same height. */
  .shots__grid { grid-template-columns: minmax(0, 0.971fr) minmax(0, 1.277fr); }
}
.shot { margin: 0; max-width: 560px; }
@media (min-width: 840px) { .shot { max-width: none; } } /* a cap would break the equal heights */
.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2);
}
.shot figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--muted); }

.landing__note { margin-top: var(--space-5); }
.landing__note a { color: var(--link); }
.repo-link { display: inline-flex; align-items: center; gap: var(--space-1); }
@media (pointer: coarse) { .repo-link { min-height: var(--control-md); } }

main.landing { padding-bottom: var(--space-6); }

/* ---- Illustration (inline SVG in index.html) ------------------------------------ */
.art {
  --art-sun: #e0a53a;
  --art-hill: #7b86e8;
  font-family: var(--font);
}
@media (prefers-color-scheme: dark) {
  .art { --art-sun: #f0c164; --art-hill: #8e97f5; }
}
.art-panel { fill: var(--surface); stroke: var(--border); }
.art-device { fill: var(--surface); stroke: var(--border-strong); stroke-width: 2; }
.art-tile { fill: var(--surface-2); }
.art-bar { fill: var(--border); }
.art-bar--strong { fill: var(--border-strong); }
.art-avatar { fill: var(--surface-2); stroke: var(--border-strong); }
.art-avatar--bot { fill: var(--accent); stroke: none; }
.art-bot-glyph { fill: none; stroke: var(--accent-fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.art-pill { fill: var(--surface-2); }
.art-sun { fill: var(--art-sun); }
.art-hill { fill: var(--art-hill); }
.art-gif { fill: var(--muted); font-size: 15px; font-weight: 700; }
.art-play-bg { fill: var(--overlay); }
.art-play { fill: var(--overlay-fg); }
.art-btn { fill: var(--accent); }
.art-btn--secondary { fill: var(--surface); stroke: var(--border-strong); }
.art-btn-label { fill: var(--accent-fg); font-size: 13px; font-weight: 600; }
.art-btn-label--secondary { fill: var(--fg); }
.art-caption { fill: var(--muted); font-size: 12px; }
.art-arrow { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.art-ok { fill: var(--success-bg); }
.art-check { fill: none; stroke: var(--success-fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }