/* The opening: the headline, then two lines beside the phone while it wakes at 11:48 pm and Per Push opens. */
.hero { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hero-head { position: absolute; left: 0; right: 0; top: clamp(92px, 12.5vh, calc(134 * var(--u))); display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 4vw; }
.hero h1, .curtain .hero-h1 {
  font-size: clamp(52px, min(6.1vw, 9.4vh), calc(106 * var(--u))); font-weight: 860; font-stretch: 125%; line-height: 0.94; letter-spacing: -0.042em; color: var(--ink);
}
.hero h1 span, .curtain .hero-h1 span { display: inline-block; }
.curtain .hero-head { position: absolute; left: 0; right: 0; top: clamp(92px, 12.5vh, calc(134 * var(--u))); text-align: center; padding: 0 4vw; }
.curtain .hero-h1 { color: #f4f1ea; }
.hero-sub {
  margin-top: clamp(18px, 3vh, calc(30 * var(--u))); max-width: 44ch; font-size: clamp(16px, min(1.3vw, 2.2vh), calc(19.5 * var(--u))); line-height: 1.5; font-weight: 420;
  color: rgba(var(--ink-rgb), var(--soft)); text-wrap: pretty;
}
.hero-sub b { color: var(--ink); font-weight: 680; }
.hero-get { margin-top: clamp(16px, 2.8vh, calc(26 * var(--u))); display: flex; align-items: center; gap: 14px; pointer-events: auto; }
.hero-get small { font-size: calc(13.5 * var(--u)); color: var(--ink-3); }

.hero-cap { position: absolute; left: clamp(28px, 6.4vw, calc(120 * var(--u))); top: 50%; width: clamp(330px, 31vw, calc(470 * var(--u))); visibility: hidden; }
.hero-cap p { font-size: clamp(30px, min(3.2vw, 5.4vh), calc(54 * var(--u))); font-weight: 800; font-stretch: 125%; line-height: 1.02; letter-spacing: -0.034em; color: rgba(var(--ink-rgb), 0.62); text-wrap: balance; }
.hero-cap p b { color: var(--ink); font-weight: inherit; }

/* ——— the phone's screen: the Lock Screen, the Home Screen, and Per Push's first page ——— */
.hz { color: #fff; }
.hz-wall {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 120% 52% at 50% 104%, rgba(232, 101, 31, 0.55), rgba(232, 101, 31, 0) 70%), radial-gradient(ellipse 90% 60% at 20% 10%, #2a3a7a, rgba(42, 58, 122, 0) 70%), linear-gradient(180deg, #0c1334 0%, #18225a 46%, #2b2556 74%, #43284a 100%);
}
.hz-sb { position: absolute; left: 0; top: 0; width: 393px; color: #fff; z-index: 6; }
.hz-lock { position: absolute; inset: 0; z-index: 3; }
.hz-date { position: absolute; left: 0; right: 0; top: 74px; text-align: center; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; opacity: 0.92; }
.hz-clock { position: absolute; left: 0; right: 0; top: 92px; text-align: center; font-size: 104px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.94); }
.hz-notes { position: absolute; left: 14px; top: 426px; width: 365px; }
.hz-note {
  position: absolute; left: 0; top: 0; width: 365px; height: 76px; border-radius: 22px; padding: 13px 14px 0 64px; visibility: hidden;
  background: rgba(244, 242, 248, 0.86); color: #1a1a1c; box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.5);
}
.hz-note .hz-nt { position: absolute; left: 13px; top: 14px; width: 38px; height: 38px; border-radius: 9px; }
.hz-note b { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.hz-note em { position: absolute; right: 15px; top: 14px; font-style: normal; font-size: 13px; color: rgba(26, 26, 28, 0.5); }
.hz-note span { display: block; margin-top: 2px; font-size: 15px; letter-spacing: -0.01em; color: rgba(26, 26, 28, 0.86); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz-btn { position: absolute; top: 792px; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: rgba(20, 22, 40, 0.42); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2); font-size: 20px; color: #fff; }
.hz-torch { left: 46px; }
.hz-cam { left: 297px; }

.hz-home { position: absolute; inset: 0; z-index: 2; visibility: hidden; }
.hz-app { position: absolute; width: 62px; display: flex; flex-direction: column; align-items: center; gap: 6px; transform-origin: 50% 31px; }
.hz-app span { font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.hz-search { position: absolute; left: 146px; top: 736px; width: 101px; height: 32px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 5px; background: rgba(255, 255, 255, 0.18); font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.hz-search .sy { font-size: 13px; }
.hz-dock { position: absolute; left: 16px; top: 788px; width: 361px; height: 88px; border-radius: 36px; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.22); }
.hz-dk { position: absolute; top: 13px; width: 62px; height: 62px; }
.hz-pp { border-radius: 14px; }
.hz-pp::after { content: ""; position: absolute; inset: 0; border-radius: 14px; background: #000; opacity: calc(var(--press, 0) * 0.3); }
.hz-dim { position: absolute; inset: 0; background: #000; opacity: 0; }

.hz-splash { position: absolute; left: 0; top: 0; width: 393px; height: 886px; z-index: 8; visibility: hidden; transform-origin: 0 0; overflow: hidden; background: #fefaf5; color: #1c1108; }
.hz-sp { position: absolute; left: 0; top: 0; width: 393px; height: 886px; }
.hz-sb2 { position: absolute; left: 0; top: 0; width: 393px; color: #1c1108; }
.hz-brand { position: absolute; left: 0; right: 0; top: 300px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hz-logo { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 6px 10px rgba(217, 79, 10, 0.12); }
.hz-brand b { margin-top: 16px; font-size: 36px; font-weight: 900; letter-spacing: -1.2px; line-height: 1.1; }
.hz-brand span { margin-top: 6px; font-size: 16px; font-weight: 500; line-height: 1.32; color: #a07858; }
.hz-get { position: absolute; left: 24px; top: 784px; width: 345px; height: 58px; }
.hz-fly { position: absolute; left: 0; top: 0; z-index: 9; width: 62px; height: 62px; transform-origin: 0 0; visibility: hidden; }
.hz-fly .pp-icon { width: 62px; height: 62px; }
.hz-bar { position: absolute; left: 126px; top: 872px; z-index: 10; width: 141px; height: 5px; border-radius: 3px; background: #fff; opacity: 0.9; }