/* Landing page for visitors without an account. Read in one go, not worked
   in: wider spacing than the app's pages, headings in the display face. */
.landing {
  --landing-sky: #c3c3c8;
  --landing-sky-top: #e4e5e9;
  --landing-ink: #1c2a17;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}
/* The room the floating actions need on a list page; there are none here,
   and the last band runs straight into the footer. */
main.container:has(.landing) { padding-bottom: 0; }
/* 100vw counts the scrollbar, so the full-width bands would scroll sideways. */
body:has(.landing) { overflow-x: clip; }
body:has(.landing) .site-footer { margin-top: 0; }
.landing h1,
.landing h2 {
  font-family: var(--display-font);
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--landing-ink);
}
.landing h2 { font-size: 2.25rem; line-height: 1.1; margin-bottom: 0.75rem; }
.landing p { max-width: 65ch; }
/* Pico spaces sections apart; here the flex gap does. */
.landing > section { margin-bottom: 0; }

/* Bands across the whole window, out of the container they sit in. */
.landing-hero,
.landing-broker {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* The band in the grey of the video's sky, text on the left, the video on
   the right standing on the band's lower edge. */
.landing-hero { background: linear-gradient(var(--landing-sky-top), var(--landing-sky)); }
.landing-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 2rem;
  align-items: end;
}
.landing-sky { align-self: center; padding: 2.5rem 0; color: var(--landing-ink); }
.landing-sky h1 {
  max-width: 22ch;
  margin-bottom: 1rem;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1;
}
.landing-sky p { font-size: 1.25rem; line-height: 1.45; color: var(--landing-ink); }
.landing-sky .actions { gap: 0.75rem; margin-top: 1.5rem; }
/* On grey, Pico's outline secondary is too faint to read as a button. */
.landing-sky .secondary.outline {
  --pico-color: var(--landing-ink);
  --pico-border-color: var(--landing-ink);
}
/* What is kept and on offer here, quiet, under the buttons. */
.landing-count { margin: 1.25rem 0 0; padding: 0; font-size: 0.9rem; opacity: 0.8; }
.landing-count li { list-style: none; margin-bottom: 0.15rem; }
/* Wide enough to carry the band, cut so the way runs into the picture.
   Its sky fades into the band. */
.landing-video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  mask-image: linear-gradient(transparent, #000 25%);
}
@media (max-width: 768px) {
  .landing-hero-inner { grid-template-columns: 1fr; gap: 0; }
  .landing-sky { padding-bottom: 1rem; }
  .landing-video { aspect-ratio: 16 / 9; mask-image: linear-gradient(transparent, #000 35%); }
}

/* One column per thing to do, marked by its colour. */
.landing-sides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
}
.landing-side { padding-left: 1.25rem; border-left: 4px solid var(--landing-ink); }
.landing-side.is-offer { border-left-color: var(--brand-green); }
.landing-side.is-search { border-left-color: var(--brand-blue); }
.landing-side h2 { font-size: 1.75rem; }
.landing-side.is-offer h2 { color: var(--brand-green-dark); }
.landing-side.is-search h2 { color: var(--brand-blue-dark); }
.landing-side ul { margin: 0; padding: 0; }
.landing-side li { list-style: none; margin-bottom: 0.6rem; line-height: 1.5; }

/* Three steps beside the aerial picture. The number is the step's own,
   set in the display face so it reads as part of the heading. */
.landing-steps {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 2.5rem;
  align-items: center;
}
.landing-steps ol { margin: 0; padding: 0; counter-reset: step; }
.landing-steps li {
  list-style: none;
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  column-gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.landing-steps li::before {
  content: counter(step);
  grid-row: span 2;
  font-family: var(--display-font);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--brand-green);
}
.landing-steps li strong { color: var(--landing-ink); }
.landing-steps li span { color: var(--pico-muted-color); line-height: 1.5; }
.landing-steps img { width: 100%; height: auto; border-radius: var(--pico-border-radius); }
@media (max-width: 768px) {
  .landing-steps { grid-template-columns: 1fr; }
}

/* iTerra's own offer, on the grey of the sky: a different speaker than the
   rest of the page. */
.landing-broker { padding: 3rem 0; background: var(--mist); }
.landing-broker ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.landing-broker li { margin-bottom: 0.4rem; }
.landing-broker-contact { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; font-weight: 600; }