/* The opening: the headline in the top left (where the eye starts), one line that follows the phone, the badge. */
.hero { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hero > * { pointer-events: auto; }
.hero-h1, .curtain .hero-h1 {
  position: absolute; left: clamp(28px, 6.4vw, 120px); top: clamp(92px, 13.5vh, 150px);
  font-size: clamp(60px, min(7.4vw, 12.4vh), 124px); font-weight: 820; font-stretch: 112%; line-height: 0.93; letter-spacing: -0.042em;
  color: var(--ink);
}
.hero-h1 span { display: block; will-change: transform, opacity; }
.hero-lines { position: absolute; left: clamp(28px, 6.4vw, 120px); top: calc(clamp(92px, 13.5vh, 150px) + clamp(60px, min(7.4vw, 12.4vh), 124px) * 2.79 + clamp(22px, 3.4vh, 38px)); width: min(30vw, 410px); height: 6.4em; font-size: clamp(16px, min(1.3vw, 2.3vh), 19px); }
.hero-line, .curtain .hero-line { position: absolute; left: 0; top: 0; line-height: 1.45; color: rgba(var(--ink-rgb), var(--soft)); font-weight: 430; text-wrap: pretty; }
.hero-line b, .curtain .hero-line b { color: var(--ink); font-weight: 680; }
.hero-get, .curtain .hero-get { position: absolute; left: clamp(28px, 6.4vw, 120px); top: calc(clamp(92px, 13.5vh, 150px) + clamp(60px, min(7.4vw, 12.4vh), 124px) * 2.79 + clamp(22px, 3.4vh, 38px) + clamp(16px, min(1.3vw, 2.3vh), 19px) * 6.6); display: flex; align-items: center; gap: 16px; }
.hero-get small { font-size: 13.5px; color: var(--ink-2); line-height: 1.38; max-width: 18ch; }

/* the cards a list's rows become: a 393 × 52 strip laid onto a quad in 3D */
.hc {
  --card: 0; --dia: 0; position: absolute; left: 0; top: 0; width: 393px; height: 52px; transform-origin: 0 0; visibility: hidden;
  display: flex; align-items: center; padding-left: 56px; font: 16.5px/1 var(--sf); letter-spacing: -0.01em; white-space: nowrap; color: #1c1c1e;
  border-radius: 15px; background: rgba(255, 255, 255, calc(var(--card) * 0.97));
  box-shadow: 0 calc(var(--card) * 16px) calc(var(--card) * 34px) rgba(20, 45, 30, calc(var(--card) * 0.18)), inset 0 0 0 calc(var(--card) * 0.6px) rgba(0, 0, 0, 0.06);
}
.hc-c { position: absolute; left: 20px; top: 50%; width: 21px; height: 21px; margin-top: -10.5px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px #c7c7cc; opacity: calc(1 - var(--dia)); }
.hc-d { position: absolute; left: 29px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 2px; transform: rotate(45deg);
  background: linear-gradient(135deg, #8fd3ff, #1a8cf6 55%, #0a63c6); opacity: var(--dia); }
.hc[data-q="tl"] span { color: color-mix(in oklab, #1c1c1e calc((1 - var(--dia)) * 100%), #1e4d2b); }
.hc[data-q="tr"] span, .hc[data-q="bl"] span { color: color-mix(in oklab, #1c1c1e calc((1 - var(--dia)) * 100%), #5b4810); }
.hc[data-q="br"] span { color: color-mix(in oklab, #1c1c1e calc((1 - var(--dia)) * 100%), #7b2f2c); }

/* the curtain: the first paint, the hero's own words in their own places, under the warming stage */
.curtain { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(172deg, #f5f8f4 0%, #eef4ef 52%, #f6f2e4 100%); }
.curtain .hero-h1 span { display: block; }
.curtain .hero-lines { position: absolute; }