@property --phone-scale-angle{syntax:"<angle>";inherits:true;initial-value:45deg}[data-landing=stage]{background:radial-gradient(130% 60% at 50% 42%, color-mix(in oklab, var(--foreground) 7%, var(--background)) 0%, var(--background) 65%)}[data-landing=headline]{font-size:clamp(3.2rem,14vw,8rem);line-height:.86}[data-landing=title]{text-wrap:balance;font-size:clamp(2.7rem,12vw,5rem);line-height:.86}[data-landing=counter]{--landing-hit:var(--primary);inset-inline:0;font-family:var(--font-display), var(--font-sans);font-variant-numeric:tabular-nums;color:#0000;-webkit-text-stroke:2px color-mix(in oklab, var(--primary) 42%, transparent);transform-origin:50% 40%;-webkit-user-select:none;user-select:none;pointer-events:none;justify-content:center;align-items:flex-start;font-size:clamp(8.5rem,40vw,30rem);font-weight:900;line-height:.8;display:flex;position:absolute;top:13svh}[data-landing=counter] small{-webkit-text-stroke-width:1.5px;margin:.12em 0 0 .08em;font-size:.2em}[data-landing=counter][data-plate=red]{--landing-hit:var(--plate-red)}[data-landing=counter][data-plate=blue]{--landing-hit:var(--plate-blue)}[data-landing=counter][data-plate=green]{--landing-hit:var(--plate-green)}[data-landing=counter][data-hit]{animation:.7s cubic-bezier(.2,.7,.2,1) landing-hit}@keyframes landing-hit{0%{color:color-mix(in oklab, var(--landing-hit) 60%, transparent);-webkit-text-stroke-color:var(--landing-hit);transform:scale(1.09)}}[data-landing=cue]:after{content:"";vertical-align:middle;transform-origin:top;background:currentColor;width:1px;height:1.4em;margin-left:.75em;animation:1.6s ease-in-out infinite landing-cue;display:inline-block}@keyframes landing-cue{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}@media not (min-width:40rem){[data-section=plate],[data-section=lock],[data-section=lift]{padding-bottom:calc(4.75rem + env(safe-area-inset-bottom))}}[data-landing=phone-section]{overflow-x:clip}[data-landing=phone-pin]{--phone-top:calc(max(1rem, env(safe-area-inset-top)) + 3.75rem);--phone-bottom:calc(4.1rem + env(safe-area-inset-bottom));min-height:100svh;padding:var(--phone-top) 1rem var(--phone-bottom);pointer-events:none;flex-direction:column;justify-content:center;gap:2rem;display:flex;position:relative}[data-landing=phone-scrim]{background:color-mix(in oklab, var(--background) 88%, transparent);opacity:0;position:absolute;inset:0}[data-landing=phone-copy]{position:relative}[data-landing=phone]{--phone-h:min(76svh, calc(100svh - var(--phone-top) - var(--phone-bottom)), calc((100vw - 2.5rem) * 888 / 429), 52rem);--phone-u:calc(var(--phone-h) / 888);--phone-scale-angle:atan2(var(--phone-h), 888px);isolation:isolate;width:calc(429 * var(--phone-u));height:var(--phone-h);padding:calc(7 * var(--phone-u));border-radius:calc(73 * var(--phone-u));pointer-events:auto;flex:none;align-self:center;position:relative}[data-landing=phone]:before,[data-landing=phone]:after{content:"";pointer-events:none;position:absolute}[data-landing=phone]:before{z-index:-2;background:radial-gradient(closest-side, color-mix(in oklab, var(--plate-red) 48%, transparent), color-mix(in oklab, var(--plate-red) 20%, transparent) 58%, transparent);inset:-14% -45%}[data-landing=phone]:after{z-index:-1;border-radius:inherit;background:linear-gradient(152deg, var(--device-frame-edge) 0%, var(--device-frame) 9%, var(--device-frame-shade) 30%, var(--device-frame) 52%, var(--device-frame-shade) 74%, var(--device-frame) 90%, var(--device-frame-edge) 100%);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--device-frame-edge) 75%, transparent), inset 0 0 0 2px var(--device-frame-shade), 0 0 0 1px color-mix(in oklab, var(--device-shadow) 55%, transparent), 0 calc(14 * var(--phone-u)) calc(28 * var(--phone-u)) calc(-4 * var(--phone-u)) color-mix(in oklab, var(--device-shadow) 55%, transparent), 0 calc(44 * var(--phone-u)) calc(80 * var(--phone-u)) calc(-16 * var(--phone-u)) color-mix(in oklab, var(--device-shadow) 70%, transparent);inset:0}[data-landing=phone-key]{z-index:-1;width:calc(5 * var(--phone-u));border-radius:calc(2 * var(--phone-u));background:linear-gradient(90deg, var(--device-frame-shade), var(--device-frame-edge) 45%, var(--device-frame) 70%, var(--device-frame-shade));position:absolute}[data-landing=phone-key][data-key=action]{top:calc(160 * var(--phone-u));height:calc(34 * var(--phone-u));left:calc(-3.5 * var(--phone-u))}[data-landing=phone-key][data-key=volume-up]{top:calc(232 * var(--phone-u));height:calc(62 * var(--phone-u));left:calc(-3.5 * var(--phone-u))}[data-landing=phone-key][data-key=volume-down]{top:calc(310 * var(--phone-u));height:calc(62 * var(--phone-u));left:calc(-3.5 * var(--phone-u))}[data-landing=phone-key][data-key=side]{top:calc(268 * var(--phone-u));height:calc(102 * var(--phone-u));right:calc(-3.5 * var(--phone-u))}[data-landing=phone-glass]{height:100%;padding:calc(11 * var(--phone-u));border-radius:calc(66 * var(--phone-u));background:var(--device-bezel);box-shadow:0 0 0 1px color-mix(in oklab, var(--device-shadow) 80%, transparent)}[data-landing=phone-screen]{isolation:isolate;border-radius:calc(55 * var(--phone-u));background:var(--background);height:100%;color:var(--foreground);position:relative;overflow:hidden}[data-landing=phone-app]{width:393px;height:852px;transform:scale(tan(var(--phone-scale-angle)));transform-origin:0 0;position:absolute;top:0;left:0}[data-landing=phone-status]{justify-content:space-between;align-items:center;height:54px;padding:3px 26px 0 50px;font-size:17px;line-height:1;display:flex;position:relative}[data-landing=phone-island]{background:radial-gradient(circle at 84% 50%, color-mix(in oklab, var(--device-frame) 55%, var(--device-island)) 0 3px, transparent 4.5px), var(--device-island);border-radius:999px;width:125px;height:37px;position:absolute;top:11px;left:50%;translate:-50%}[data-landing=phone-home]{z-index:1;background:var(--foreground);border-radius:999px;width:139px;height:5px;position:absolute;bottom:8px;left:50%;translate:-50%}[data-landing=phone-glare]{z-index:2;border-radius:inherit;background:linear-gradient(116deg, var(--device-glare) 0%, transparent 30%, transparent 58%, color-mix(in oklab, var(--device-glare) 50%, transparent) 70%, transparent 84%);pointer-events:none;position:absolute;inset:0}[data-landing=phone] [aria-pressed=true]{animation:.55s cubic-bezier(.3,1.5,.5,1) landing-tick}@keyframes landing-tick{0%{box-shadow:0 0 0 0 color-mix(in oklab, var(--success) 70%, transparent);scale:.72}70%{box-shadow:0 0 0 .6rem #0000}to{scale:1}}@media (min-width:900px){[data-landing=headline]{font-size:clamp(4rem,8vw,8rem)}[data-landing=title]{font-size:clamp(3rem,5.5vw,5rem)}[data-landing=counter]{font-size:clamp(10rem,30vw,30rem);top:9svh}[data-landing=phone-pin]{--phone-top:6rem;--phone-bottom:3.5rem;padding:var(--phone-top) max(2rem, 7vw) var(--phone-bottom) 2rem;flex-direction:row;justify-content:space-between;align-items:center}[data-landing=phone-scrim]{display:none}[data-landing=phone-copy]{align-self:flex-end}[data-landing=phone]{--phone-h:min(calc(100svh - var(--phone-top) - var(--phone-bottom)), 48rem)}}@supports (animation-timeline:view()){[data-landing=copy],[data-landing=copy-first],[data-landing=copy-last]{animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:cover}[data-landing=copy]{animation-name:landing-copy}[data-landing=copy-first]{animation-name:landing-copy-out}[data-landing=copy-last]{animation-name:landing-copy-in}@media (prefers-reduced-motion:no-preference){[data-landing=phone-section]{--phone-run:350svh;min-height:var(--phone-run);view-timeline:--phone block}[data-landing=phone-pin]{height:100svh;min-height:0;animation:linear both landing-phone-pin;animation-timeline:--phone;animation-range:cover;display:grid}[data-landing=phone-copy],[data-landing=phone]{grid-area:1/1}[data-landing=phone-copy]{align-self:end}[data-landing=phone]{justify-self:center}[data-landing=phone-scrim],[data-landing=phone-copy],[data-landing=phone]{animation-timing-function:linear;animation-fill-mode:both,forwards;animation-timeline:--phone,--phone}[data-landing=phone-scrim]{animation-name:landing-fade-in,landing-fade-out;animation-range:entry 40% entry 75%,exit 10% exit 45%}[data-landing=phone-copy]{animation-name:landing-rise-in,landing-rise-out;animation-range:entry 55% entry 95%,contain 14% contain 24%}[data-landing=phone]{animation-name:landing-phone-in,landing-phone-out;animation-range:contain 22% contain 40%,contain 88% exit 25%}@media (min-width:900px){[data-landing=phone-pin]{display:flex}[data-landing=phone-copy],[data-landing=phone]{grid-area:auto}[data-landing=phone-copy]{align-self:flex-end;animation-range:entry 55% entry 95%,contain 88% exit 25%}[data-landing=phone]{animation-range:entry 50% contain 8%,contain 90% exit 30%}}}}@keyframes landing-phone-pin{0%{translate:0 -100dvh}to{translate:0 var(--phone-run)}}@keyframes landing-fade-in{0%{opacity:0}to{opacity:1}}@keyframes landing-fade-out{0%{opacity:1}to{opacity:0}}@keyframes landing-rise-in{0%{opacity:0;translate:0 1.5rem}to{opacity:1;translate:0}}@keyframes landing-rise-out{0%{opacity:1;translate:0}to{opacity:0;translate:0 -2rem}}@keyframes landing-phone-in{0%{visibility:hidden;opacity:0;animation-timing-function:cubic-bezier(.2,.7,.2,1);translate:0 70svh;scale:.9}to{visibility:visible;opacity:1;translate:0;scale:1}}@keyframes landing-phone-out{0%{visibility:visible;opacity:1;animation-timing-function:cubic-bezier(.6,0,.8,.3);translate:0;scale:1}to{visibility:hidden;opacity:0;translate:0 -18svh;scale:.94}}@keyframes landing-copy{0%{opacity:0;translate:0 1.5rem}18%,40%{opacity:1;translate:0}52%,to{opacity:0;translate:0 -1.5rem}}@keyframes landing-copy-out{0%,34%{opacity:1}46%,to{opacity:0}}@keyframes landing-copy-in{0%{opacity:0;translate:0 1.5rem}20%,to{opacity:1;translate:0}}@media (prefers-reduced-motion:reduce){[data-landing=counter][data-hit],[data-landing=cue]:after,[data-landing=copy],[data-landing=copy-first],[data-landing=copy-last],[data-landing=phone] [aria-pressed=true]{animation:none}}@supports not (animation-timeline:view()){[data-landing=phone-section]{z-index:1;background:linear-gradient(to bottom, transparent, var(--background) 12rem, var(--background) calc(100% - 12rem), transparent);padding-block:10rem;position:relative}}
