/* Home only: keep the four links below the video on all screen sizes. */
@media (min-width: 1000px) {
  .hero { --nav-height: 160px; background: #f3f7fc; }
  .hero__bg { bottom: var(--nav-height); }
  .hero__fade { bottom: var(--nav-height); height: 160px; }
  .hero__ui {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    grid-template-rows: 1fr auto var(--nav-height);
    align-items: stretch;
    min-height: max(740px, 100svh);
    padding-top: 160px;
    padding-bottom: 0;
  }
  .hero__col { display: contents; }
  .hero__lead { align-self: end; }
  .hero__sub { margin-bottom: 64px; }
  .hero__nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 0;
    padding: 32px 0 40px;
  }
  .hero__nav .hb { background: #fff; border-color: #dae5f1; }
  .hero__nav .hb:hover { background: #edf5ff; }
  .hero + .joint { margin-top: 0; border-radius: 0; }
}

@media (max-width: 999px) {
  .hero { --nav-height: calc(240px + env(safe-area-inset-bottom)); background: #f3f7fc; }
  .hero__bg { bottom: var(--nav-height); }
  .hero__fade { bottom: var(--nav-height); height: 120px; }
  .hero__ui {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto var(--nav-height);
    justify-content: stretch;
    align-items: stretch;
    min-height: max(700px, 100svh);
    padding-top: 140px;
    padding-bottom: 0;
  }
  .hero__col { display: contents; }
  .hero__lead { align-self: end; }
  .hero__sub { margin-bottom: 40px; }
  .hero__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
    padding: 24px 0 calc(40px + env(safe-area-inset-bottom));
  }
  .hero__nav .hb { min-width: 0; background: #fff; border-color: #dae5f1; }
  .hero__nav .hb:hover { background: #edf5ff; }
  .hero + .joint { margin-top: 0; border-radius: 0; }
}