/* The landing page (app/templates/public/landing.html), after public.css and public-sky.css, which it loads only there:
   the app's sky, its words and its star-gold Get the app, and the store panorama under its three lines. Words take the
   palette's tokens, as on every public page, so they keep their contrast on every colour of the sky
   (tests/test_public_landing.py). Nothing here moves: the sky's own stars are the only animation. */

/* Wider than a pin's page, so the panorama has room. */
.page { max-width: 70rem; }

.lead {
  margin: 20px 0 0;
  text-align: center;
  font: 400 34px/1.1 var(--serif);
  letter-spacing: -.01em;
}

/* The tour: on a phone, the three panels one under another, each under its whole line. */
.tour {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.tour li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.line {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 4px 14px;
  text-align: center;
}

.line h2 {
  margin: 0;
  font: 400 28px/1.1 var(--serif);
}

.line p {
  margin: 6px 0 0;
  color: var(--ink2);
  font-size: 15px;
}

/* One picture, the whole panorama, in each panel: each shows its own third (the panel is a third as wide). */
.pano {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  aspect-ratio: 1320 / 2468;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 18px 36px -22px var(--glass-shadow);
}

.tour li:nth-child(1) .pano { object-position: 0% 0; }
.tour li:nth-child(2) .pano { object-position: 50% 0; }
.tour li:nth-child(3) .pano { object-position: 100% 0; }

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}

.cta .get {
  min-height: 50px;
  padding: 0 32px;
  border-radius: 25px;
  font-size: 18px;
}

/* Before launch: the news in place of the button, as words, not something to tap. */
.soon {
  margin: 0;
  font: italic 400 28px/1.15 var(--serif);
  text-align: center;
}

.cta .help {
  color: var(--link);
  font-size: 16px;
}

.cta .help:focus-visible,
.foot a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.foot {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 36px;
}

.foot a { color: var(--ink2); font-size: 14px; }

/* Wide enough for the whole panorama: the three panels meet again as one picture, the lines above their thirds. */
@media (min-width: 720px) {
  .page { padding-left: 24px; padding-right: 24px; }

  .lead { margin-top: 28px; font-size: 46px; }

  .tour {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 0;
    max-width: 1080px;
    margin: 28px auto 0;
  }

  .tour li {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    align-items: stretch;
  }

  /* The lines sit at the foot of their row, so the three panels start level. */
  .line { padding: 0 16px 18px; }

  .line h2 { font-size: 32px; }

  .pano { max-width: none; border-radius: 0; box-shadow: none; }

  .tour li:nth-child(1) .pano { border-radius: 24px 0 0 24px; }
  .tour li:nth-child(3) .pano { border-radius: 0 24px 24px 0; }

  .cta { margin-top: 32px; }
}