/* Splash page layout (/, D45): the shared top bar and hero, sign-up first. Mobile first:
   hero text, the app in its iPhone, the form; from 960px text and form on the left, the phone on the right.
   Tokens only, no nesting, no !important. */

.splash__hero { grid-template-areas: "text" "device" "signup"; }
.splash__hero .hero__text { grid-area: text; }
.splash__hero .hero__device { grid-area: device; }
.splash__signup { grid-area: signup; width: 100%; max-width: 32rem; padding: var(--space-6); background: var(--bg-void);
  border: 1px solid var(--border-light); border-top: 2px solid var(--live); }
.splash__signup-title { margin: 0; }
.splash__signup-lead { margin: var(--space-2) 0 var(--space-4); font-size: var(--fs-small); color: var(--text-secondary); }

@media (min-width: 960px) {
  .splash__hero { grid-template-areas: "text device" "signup device"; grid-template-rows: auto 1fr; row-gap: var(--space-8); }
  .splash__hero .hero__text { align-self: end; }
  .splash__hero .hero__device { align-self: center; }
  .splash__signup { align-self: start; }
  .splash__jump { display: none; }
}