/* Preserve intrinsic logo ratio and use the actual header height on short screens. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.home-header { flex: 0 0 auto; margin: 0 auto; }
.home-main { display: grid; flex: 1 0 auto; min-height: 0; place-items: center; }
.home-centerpiece { padding: 20px 0 22px; }
.home-centerpiece > .home-eyebrow { margin-bottom: 12px; }
.home-logo { width: min(340px, 70vw); height: auto; max-height: none; }
.home-centerpiece h1 { margin-top: 12px; }
.home-actions { margin-top: 22px; }
@media (min-width: 761px) and (min-height: 780px) {
  .home-main { position: relative; }
  /* Reserve the credits' former flow space so the centerpiece stays put. */
  .home-centerpiece { padding-bottom: 78px; }
  .home-credits {
    position: absolute;
    right: 0;
    bottom: clamp(18px, 2.4vh, 32px);
    left: 0;
    width: min(100%, 920px);
    margin: 0 auto;
  }
}
@media(max-width: 760px) {
  .home-centerpiece { min-height: 0; padding: 16px 0 max(14px, env(safe-area-inset-bottom)); }
  .home-centerpiece > .home-eyebrow { margin-bottom: 10px; }
  .home-logo { width: min(270px, 76vw); height: auto; }
  .home-centerpiece h1 { margin-top: 10px; }
  .home-slogan { margin-top: 8px; }
  .home-actions { margin-top: 18px; }
}
@media(max-width: 760px) and (max-height: 650px) {
  .home-centerpiece { padding-top: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .home-centerpiece > .home-eyebrow { margin-bottom: 6px; }
  .home-logo { width: min(250px, 72vw); }
  .home-centerpiece h1 { margin-top: 6px; }
  .home-actions { margin-top: 12px; }
}
/* Smaller iPhones with browser controls visible: reduce spacing, never clip content. */
@media(max-width: 760px) and (max-height: 600px) {
  .home-centerpiece { padding-top: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .home-centerpiece > .home-eyebrow { margin-bottom: 4px; }
  .home-logo { width: min(230px, 72vw); }
  .home-centerpiece h1 { margin-top: 4px; }
  .home-slogan { margin-top: 6px; }
  .home-actions { margin-top: 8px; }
  .home-actions .home-action { min-height: 64px; padding-block: 10px; }
}