/* The first screen holds while the next surface covers it. */
.homepage { --header-height:57px; --hero-height:calc(100svh - var(--header-height)); }
.homepage .hero {
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  min-height:var(--hero-height); box-sizing:border-box;
  padding-block:clamp(40px,7vh,90px); padding-inline:var(--gutter);
}
.homepage .hero h1 {
  margin:0; max-width:100%; font:400 clamp(56px,min(6.6vw,12svh),104px)/1.04 Plex,sans-serif;
  letter-spacing:-.055em;
}
.homepage .hero h1 span { display:block; }
.homepage .hero .hero-tagline {
  max-width:40ch; margin:28px 0 0; color:var(--ink);
  font:400 var(--fs-row)/1.2 Plex,sans-serif; letter-spacing:-.02em;
  white-space:normal; text-wrap:balance;
}
.homepage .hero-actions { display:flex; flex-direction:row; justify-content:flex-start; flex-wrap:wrap; align-items:center; gap:16px 40px; margin-top:36px; }
.homepage .hero-actions .text-link { color:var(--ink); }
.home-content { position:relative; z-index:2; background:var(--paper); }
.home-content > .platform-overview { padding-top:48px; }
.home-content > .platform-overview h2 { border-top:0; padding-top:0; }
@media(min-width:900px) {
  .homepage .hero { height:var(--hero-height); min-height:520px; }
}
@media(min-width:900px) and (min-height:650px) and (prefers-reduced-motion:no-preference) {
  .hero-stage { height:calc(var(--hero-height) + var(--hero-height) + 20svh); position:relative; z-index:1; }
  .homepage .hero { position:sticky; top:var(--header-height); }
  .home-content { margin-top:calc(0px - var(--hero-height)); border-top:1px solid var(--line); }
  .home-content > .platform-overview { padding-top:clamp(48px,8vh,90px); }
}
@media(max-width:899px) {
  .homepage .hero h1 { font-size:clamp(40px,10.4vw,72px); }
  .homepage .hero .hero-tagline { max-width:34ch; }
  .homepage .hero-actions { gap:12px 24px; margin-top:28px; }
  .home-content { border-top:1px solid var(--line); }
}
@media(max-width:899px) { .homepage { --header-height:53px; } }