.welcome {
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}
.welcome-card {
  width: min(390px, 100%); grid-template-areas: "heading" "art" "actions";
  grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px;
}
.welcome-heading, .welcome-actions { align-self: auto; }
.welcome-brand img { width: 160px; }
.welcome-kicker { margin-top: 8px; }
.welcome-heading h1 { margin: 6px 0 5px; font-size: 27px; line-height: 1.18; }
.welcome-art { padding: 8px; }
.welcome-art-head { padding-bottom: 6px; }
.welcome-caption { margin-top: 8px; }
.welcome-actions { margin-top: 0; }

@media (max-height: 620px) {
  .welcome-card { gap: 8px; padding: 12px 14px; }
  .welcome-brand img { width: 96px; }
  .welcome-kicker { margin-top: 4px; font-size: 14px; }
  .welcome-heading h1 { margin: 4px 0; font-size: 24px; line-height: 1.13; }
  .welcome-art { padding: 6px; }
  .welcome-art-head { padding-bottom: 4px; }
  .welcome-caption { margin-top: 6px; font-size: 12px; }
}

@media (min-width: 480px) and (max-height: 500px) and (orientation: landscape) {
  .welcome { padding: max(8px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom)); }
  .welcome-card {
    width: min(800px, 100%); grid-template-areas: "heading art" "actions art";
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 8px 18px; padding: 14px;
  }
  .welcome-heading { align-self: end; }
  .welcome-actions { align-self: start; }
  .welcome-brand img { width: 96px; }
  .welcome-heading h1 { font-size: 22px; }
  .welcome-buttons { grid-template-columns: minmax(0, 1.4fr) minmax(72px, .7fr); gap: 8px; }
  .welcome-buttons .primary, .welcome-login { min-height: 44px; padding: 8px 6px; font-size: 14px; }
}