.story{display:grid;grid-template-columns:minmax(0,1fr);--sh:min(61svh,515px);--pw:min(90vw,calc((var(--sh) - 14px)*393/745));--u:calc(var(--pw)/393)}
.lede{padding:.3rem 1rem .95rem}.lede h1{font-size:clamp(2rem,8.8vw,4.5rem);max-width:13em}
.stage{position:relative;height:var(--sh);overflow:hidden;background:#2a3347;display:flex;justify-content:center}
.stage::before{content:"";position:absolute;inset:-60px;background:url(/img/wallpaper.webp) center/cover;filter:blur(38px) saturate(1.15) brightness(.82)}
.wall{position:absolute;inset:0;z-index:-1;background:url(/img/wallpaper.webp) center/cover}
.wall::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,24,44,.44) 0,rgba(18,24,44,.3) 26%,rgba(18,24,44,0) 48%,rgba(10,14,28,.2) 70%,rgba(10,14,28,.55) 100%)}
.phone{position:relative;flex:none;width:var(--pw);height:calc(852*var(--u));margin-top:14px;border-radius:calc(58*var(--u));background:#0b0b0c;padding:calc(6*var(--u));box-shadow:0 0 0 calc(1.5*var(--u)) #3b3b3f,0 calc(30*var(--u)) calc(70*var(--u)) calc(-20*var(--u)) rgba(0,0,0,.6)}
.screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(52*var(--u));color:#fff;font-family:var(--sans);isolation:isolate;text-shadow:0 1px 8px rgba(8,12,28,.35)}
.island{position:absolute;left:50%;top:calc(11*var(--u));width:calc(122*var(--u));height:calc(35*var(--u));transform:translateX(-50%);background:#000;border-radius:99px}
.status{position:absolute;right:calc(26*var(--u));top:calc(20*var(--u));display:flex;gap:calc(5*var(--u));align-items:center}
.status svg{height:calc(12*var(--u));width:auto;display:block}
.carrier{position:absolute;left:calc(30*var(--u));top:calc(19*var(--u));font-size:calc(14*var(--u));font-weight:600;opacity:.9}
.lock{position:absolute;left:0;right:0;top:calc(70*var(--u));text-align:center}
.date{font-size:calc(22*var(--u));font-weight:500;line-height:1.2;opacity:.95}
.clock{font-size:calc(104*var(--u));font-weight:300;letter-spacing:-.02em;line-height:1.04;font-variant-numeric:tabular-nums}
.wr{position:absolute;left:calc(26*var(--u));right:calc(26*var(--u));top:calc(664*var(--u));display:flex;justify-content:space-between;gap:calc(8*var(--u))}
.w{position:relative;width:calc(165*var(--u));height:calc(72*var(--u));text-align:left;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.wt{font:500 calc(15*var(--u))/1.2 var(--serif);letter-spacing:-.003em;display:block;text-wrap:pretty}
.wt span{display:inline-block}
.wb{font-size:calc(11*var(--u));font-weight:600;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
#sr .st{font:500 calc(11.5*var(--u))/1.22 var(--serif);flex:1;display:flex;align-items:flex-end}
#sr .sf{display:flex;justify-content:space-between;font-size:calc(11*var(--u));font-weight:600;opacity:.8;margin-top:calc(3*var(--u));font-variant-numeric:tabular-nums}
.corner{position:absolute;bottom:calc(32*var(--u));width:calc(50*var(--u));height:calc(50*var(--u));border-radius:50%;background:rgba(40,40,44,.42);backdrop-filter:blur(10px);display:grid;place-items:center;color:#fff}
.corner svg{width:calc(22*var(--u));height:calc(22*var(--u))}.corner.l{left:calc(40*var(--u))}.corner.r{right:calc(40*var(--u))}
.bar{position:absolute;left:50%;bottom:calc(9*var(--u));width:calc(138*var(--u));height:calc(5*var(--u));border-radius:9px;background:currentColor;opacity:.85;transform:translateX(-50%)}

.pz,.vp{position:absolute;z-index:3;right:12px;bottom:12px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(20,20,24,.5);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px);transition:transform 140ms var(--out)}
.pz:active,.vp:active{transform:scale(.92)}.pz svg,.vp svg{width:14px;height:14px;fill:currentColor}
.pz .i-play{display:none}.pz[aria-pressed=true] .i-play{display:block}.pz[aria-pressed=true] .i-pause{display:none}
.pz:focus-visible,.vp:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pz[hidden],.vp[hidden]{display:none}

.hero{padding:1.2rem 1rem 3rem}
.now{font:500 clamp(1.7rem,7.2vw,3.2rem)/1.15 var(--serif);letter-spacing:-.016em;margin:0 0 .5rem;white-space:nowrap;min-height:1.15em}
.buy{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:0}
.price-line{font-size:.94rem;line-height:1.3;margin:.55rem 0 0}
.price-line a{white-space:nowrap}


.feat{border-top:1px solid var(--line);padding:3.4rem 0}
.feat-in,.film-in{display:grid;grid-template-columns:minmax(0,1fr);gap:2.2rem}
.txt{min-width:0}
.txt h2{margin-bottom:.8rem;max-width:14em}
.txt p{max-width:32rem}
.txt>:last-child{margin-bottom:0}


.dev{--w:min(68vw,272px);width:var(--w);margin:0;justify-self:center;padding:calc(var(--w)*.026);border-radius:calc(var(--w)*.15);background:#0b0b0c;box-shadow:0 0 0 1px #3b3b3f,0 26px 50px -28px rgba(16,18,26,.55)}
.scr{position:relative;overflow:hidden;border-radius:calc(var(--w)*.126);background:#E9E8E3;isolation:isolate}
.scr img,.scr video{display:block;width:100%;height:auto}
.isl{position:absolute;left:50%;top:1.25%;width:31%;aspect-ratio:122/35;transform:translateX(-50%);background:#000;border-radius:99px}
.wall-list{list-style:none;padding:0;margin:1.2rem 0 0;font:500 clamp(1.25rem,4.6vw,1.75rem)/1.3 var(--serif);letter-spacing:-.01em}
.wall-list li{display:inline}.wall-list li:not(:last-child)::after{content:"\00b7";color:var(--muted);margin:0 .28em}
.wall-list a{white-space:nowrap;color:var(--fg);text-decoration-color:var(--line);text-underline-offset:.16em}
@media (hover:hover) and (pointer:fine){.wall-list a:hover{color:var(--a);text-decoration-color:currentColor}}
.note{font-size:.92rem;color:var(--muted);margin-top:1.1rem}
.cmp2{margin:1.2rem 0 0;max-width:32rem}.cmp2 div{border-top:1px solid var(--line);padding:.7rem 0}
.cmp2 dt{font-weight:600}.cmp2 dd{margin:.1rem 0 0;color:var(--muted)}


.film{border-top:1px solid var(--line);padding:3.4rem 0}
.film .txt{text-align:center;justify-self:center}.film .txt h2,.film .txt p{margin-left:auto;margin-right:auto}
.dev.vid{--w:min(72vw,300px)}
.scr video{aspect-ratio:720/1566;background:#E9E8E3}
.vp.big{right:50%;bottom:50%;transform:translate(50%,50%);width:64px;height:64px;background:rgba(20,20,24,.62)}
.vp.big:active{transform:translate(50%,50%) scale(.94)}.vp.big svg{width:22px;height:22px;margin-left:3px}
.vp .i-pause{display:none}.vp[aria-pressed=true] .i-pause{display:block}.vp[aria-pressed=true] .i-play{display:none}

.duo{background:#171a22;color:#E8E6DF;padding:3.6rem 0}
.duo-in{display:grid;gap:2.2rem;align-items:center}
.duo h2{margin-bottom:.7rem}.duo p{max-width:30rem;color:#c7c8cf}
.duo-pics{display:flex;align-items:center;gap:.9rem;justify-self:center}
.dev.duo-c{--w:min(27vw,150px);box-shadow:0 0 0 1px #4a4a50}
.fold{--w:min(57vw,340px);width:var(--w);margin:0;padding:calc(var(--w)*.016);border-radius:calc(var(--w)*.06);background:#050506;box-shadow:0 0 0 1px #4a4a50,0 26px 50px -28px rgba(0,0,0,.7)}
.fold .scr{border-radius:calc(var(--w)*.046)}
.fold .scr::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:6%;transform:translateX(-50%);background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.07) 45%,rgba(255,255,255,.12) 50%,rgba(0,0,0,.07) 55%,rgba(0,0,0,0));pointer-events:none}

.price{padding:4rem 0;border-top:1px solid var(--line)}
.duo+.price{border-top:0}
.plans{display:grid;gap:0;margin:1.4rem 0 1.2rem}
.plan{padding:1.1rem 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:.1rem 1rem;align-items:baseline}
.plan h3{font:600 1.02rem var(--sans);letter-spacing:0}
.plan .amt{font:500 clamp(2rem,6.4vw,3rem)/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:lining-nums;white-space:nowrap}
.plan .amt small{font:400 .9rem var(--sans);letter-spacing:0;color:var(--muted);margin-left:.2em}
.plan p{grid-column:1/-1;margin:.25rem 0 0;font-size:.95rem;color:var(--muted);line-height:1.4}
.plan.best{border-top:2px solid var(--fg)}
.faqs{padding:1rem 0 3rem}

@media(min-width:900px){
.story{grid-template-columns:minmax(0,1fr) minmax(0,46%);--sh:min(calc(100svh - 64px),940px);--pw:min(380px,calc((var(--sh) - 40px)*393/852),40vw);--u:calc(var(--pw)/393)}
.lede{grid-area:1/1/2/2;padding:8vh 3rem 0;align-self:end}.lede h1{font-size:clamp(2.6rem,4.3vw,4.4rem)}
.stage{grid-area:1/2/3/3;height:var(--sh);align-items:center}
.phone{margin-top:0}
.pz{right:18px;bottom:18px}
.hero{grid-area:2/1/3/2;padding:2.2rem 3rem 3rem}
.now{font-size:clamp(2.2rem,3.6vw,3.4rem)}
.feat{padding:5rem 0}
.feat-in{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5rem;max-width:66rem}
.feat .dev{--w:288px}
.film{padding:5rem 0}
.dev.vid{--w:310px}
.duo{padding:5rem 0}
.duo-in{grid-template-columns:minmax(0,1fr) auto;gap:4rem;max-width:66rem}
.dev.duo-c{--w:160px}.fold{--w:400px}.duo-pics{gap:1.4rem}
.plans{grid-template-columns:repeat(4,1fr);gap:0 2rem}
.plan{grid-template-columns:1fr;align-content:start}
}
@media (prefers-reduced-motion:reduce){.pz{display:none}}
@media (prefers-reduced-transparency:reduce){.corner,.pz,.vp{backdrop-filter:none;background:#333}}
@media (prefers-color-scheme:dark){.dev{box-shadow:0 0 0 1px #4a4a50,0 26px 50px -28px rgba(0,0,0,.8)}}