:root { --bg:#0e0e14; --card:#181822; --fg:#f2f2f7; --muted:#a3a3b8; --accent:#ff3d7f; --line:#262634; color-scheme: dark; }
@media (prefers-color-scheme: light) { :root { --bg:#faf9fc; --card:#fff; --fg:#1b1b24; --muted:#63637a; --line:#e6e6ef; color-scheme: light; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
a { color:var(--accent); }
.wrap { width:100%; max-width:880px; margin:0 auto; padding-left:max(20px, env(safe-area-inset-left)); padding-right:max(20px, env(safe-area-inset-right)); }
header.site { padding-block:22px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.logo { font-weight:800; font-size:22px; letter-spacing:-.02em; color:var(--fg); text-decoration:none; }
.logo img { display:block; width:140px; height:auto; }
nav a { color:var(--muted); text-decoration:none; margin-left:18px; font-size:15px; }
nav a:hover { color:var(--fg); }
.hero { padding-block:56px 36px; text-align:center; }
.hero h1 { font-size:clamp(36px,7vw,60px); line-height:1.05; margin:0 0 16px; letter-spacing:-.03em; text-wrap:balance; }
.hero h1 em { font-style:normal; color:var(--accent); }
.hero p { margin:0 auto; max-width:34em; color:var(--muted); font-size:19px; text-wrap:balance; }
.pill { display:inline-block; margin-top:26px; padding:11px 20px; border-radius:999px; background:var(--accent); color:#fff; font-weight:700; text-decoration:none; }
.soon { display:inline-block; margin-top:10px; font-size:14px; color:var(--muted); }
.grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); padding-block:26px 12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px; }
.card h3 { margin:0 0 6px; font-size:18px; }
.card p { margin:0; color:var(--muted); font-size:15.5px; }
.band { text-align:center; padding-block:40px; color:var(--muted); }
footer.site { border-top:1px solid var(--line); padding-block:26px 40px; color:var(--muted); font-size:14px; display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between; }
footer.site a { color:var(--muted); }
main.doc { padding-block:18px 60px; }
main.doc h1 { font-size:34px; letter-spacing:-.02em; margin:.2em 0 .1em; }
main.doc h2 { font-size:21px; margin:1.8em 0 .4em; }
main.doc p, main.doc li { color:var(--fg); }
main.doc li { margin:.3em 0; }
.draft { background:rgba(255,61,127,.12); border:1px solid var(--accent); border-radius:14px; padding:14px 16px; margin:14px 0 8px; font-size:15px; }
.muted { color:var(--muted); }
.hero { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:clamp(24px,5vw,56px); text-align:left; padding-block:40px 56px; }
.hero p { margin:0; max-width:30em; }
.hero h1 { text-wrap:balance; }
.hero-phone { display:flex; justify-content:center; }
.device { position:relative; width:min(290px,72vw); aspect-ratio:620/1108; padding:0; filter:drop-shadow(0 34px 40px rgba(0,0,0,.45)); transform:rotate(3deg); }
.bezel { position:absolute; inset:0; border-radius:15%/8.6%; background:linear-gradient(145deg,#3a3a44,#15151b 40%,#2c2c35); padding:3.2%; box-shadow:inset 0 0 0 1.5px #585863, inset 0 0 0 4px #0a0a0e; }
.screen { position:relative; width:100%; height:100%; border-radius:12.2%/6.9%; overflow:hidden; background:#000; }
.slide { position:absolute; left:0; top:4.5%; width:100%; height:95.5%; object-fit:cover; object-position:top; opacity:0; transition:opacity .9s ease; }
.slide.on { opacity:1; }
.island { position:absolute; top:2.2%; left:50%; width:30%; height:3.2%; transform:translateX(-50%); background:#000; border-radius:999px; }
.glare { position:absolute; inset:0; background:linear-gradient(115deg,rgba(255,255,255,.16),rgba(255,255,255,0) 32%); pointer-events:none; }
.btn { position:absolute; width:1.4%; background:linear-gradient(#4a4a55,#22222a); border-radius:2px; }
.b1 { left:-1%; top:17%; height:3.5%; } .b2 { left:-1%; top:24%; height:7%; } .b3 { left:-1%; top:33%; height:7%; } .b4 { right:-1%; top:27%; height:11%; }
@media (max-width:760px) { .hero { grid-template-columns:1fr; text-align:center; } .hero p { margin-inline:auto; } .device { transform:none; } }
@media (max-width:480px) { nav a { margin-left:12px; font-size:14px; } .logo img { width:112px; } }

/* ---- hero explainers ---- */
.hero-phone { position:relative; }
.screen { container-type:inline-size; background:#0b0b10; }
.sc { position:absolute; inset:0; padding:calc(11 * var(--u)) calc(4 * var(--u)) 0; opacity:0; visibility:hidden; transition:opacity .45s, visibility .45s; color:#fff; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; overflow:hidden; }
.sc.on { opacity:1; visibility:visible; }
.sc b { font-weight:700; } .sc h4,.sc h5,.sc p { margin:0; }
.top { display:flex; align-items:center; justify-content:center; height:calc(9 * var(--u)); margin-bottom:calc(2.4 * var(--u)); position:relative; }
.top .ttl { font-weight:700; font-size:calc(3.8 * var(--u)); } .top .host { position:absolute; right:calc(1 * var(--u)); color:#ff3d81; font-weight:700; font-size:calc(3 * var(--u)); }
.seg { position:relative; display:flex; background:#14141c; border-radius:99px; padding:calc(.8 * var(--u)); font-size:calc(3.2 * var(--u)); }
.seg b { position:relative; z-index:1; width:calc(16 * var(--u)); text-align:center; padding:calc(1.7 * var(--u)) 0; color:#8a8aa0; }
.seg b:first-of-type { color:#fff; }
.seg-pill { position:absolute; left:calc(.8 * var(--u)); top:calc(.8 * var(--u)); bottom:calc(.8 * var(--u)); width:calc(16 * var(--u)); background:#ff3d81; border-radius:99px; }
.sc.on .seg-pill { animation:segmove .5s 3.8s both ease; }
.sc.on .seg b:first-of-type { animation:tog1 .3s 3.8s both; } .sc.on .seg b:last-of-type { animation:tog2 .3s 3.8s both; }
@keyframes segmove { to { transform:translateX(100%); } } @keyframes tog1 { to { color:#8a8aa0; } } @keyframes tog2 { to { color:#fff; } }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:calc(2.6 * var(--u)) calc(2.4 * var(--u)); padding:0 calc(1.5 * var(--u)); }
.grid3 figure { margin:0; text-align:center; } .grid3 img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:50%; display:block; }
.grid3 figcaption { font-weight:600; font-size:calc(3 * var(--u)); margin-top:calc(.8 * var(--u)); } .grid3 small { display:block; color:#8a8aa0; font-weight:500; font-size:calc(2.4 * var(--u)); }
.sc.on .grid3 figure { animation:pop .55s var(--d) both cubic-bezier(.2,1.4,.4,1); }
.sc.on .grid3 { animation:gout .3s 4.2s both; }
@keyframes pop { from { opacity:0; transform:scale(.3); } } @keyframes gout { to { opacity:0; transform:scale(.95); } }
.mapv { position:absolute; left:0; right:0; top:calc(6 * var(--u)); bottom:0; z-index:2; opacity:0; background:#0b0b10; }
.mapv img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.sc.on .mapv { animation:mapin .6s 3.8s both; } @keyframes mapin { from { opacity:0; transform:scale(1.05); } to { opacity:1; transform:none; } }
.ping { position:absolute; width:calc(12 * var(--u)); height:calc(12 * var(--u)); margin:calc(-6 * var(--u)) 0 0 calc(-6 * var(--u)); border-radius:50%; border:calc(.8 * var(--u)) solid #ff3d81; opacity:0; }
.sc.on .ping { animation:ping 2.2s 4.4s infinite; } @keyframes ping { 0% { transform:scale(.3); opacity:.9; } 100% { transform:scale(2.4); opacity:0; } }
.sec { font-size:calc(3.6 * var(--u)); font-weight:800; margin:calc(1 * var(--u)) 0 calc(2.4 * var(--u)) !important; }
.ev { background:#181822; border:1px solid #262634; border-radius:calc(3.6 * var(--u)); overflow:hidden; margin-bottom:calc(3 * var(--u)); }
.ev img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.evt { padding:calc(2.4 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u)); } .evt small { color:#ff3d81; font-weight:700; font-size:calc(2.7 * var(--u)); }
.evt h4 { font-size:calc(4 * var(--u)); font-weight:800; margin-top:calc(.6 * var(--u)); } .evt p { color:#8a8aa0; font-size:calc(2.8 * var(--u)); margin-top:calc(.5 * var(--u)); }
.sc.on .e1 { animation:up .6s .3s both; } .sc.on .e2 { animation:up .6s .85s both; }
@keyframes up { from { opacity:0; transform:translateY(calc(9 * var(--u))); } }
.cnt { display:inline-block; height:1.4em; line-height:1.4em; overflow:hidden; vertical-align:top; } .cnt b { display:block; color:#fff; }
.sc.on .cnt b:first-child { animation:roll .4s 3.4s both; } @keyframes roll { to { margin-top:-1.4em; } }
.mine { color:#ff3d81; font-weight:700; } .sc.on .mine { animation:fadein .4s 3.6s both; } @keyframes fadein { from { opacity:0; } }
.tap { position:absolute; width:calc(11 * var(--u)); height:calc(11 * var(--u)); margin:calc(-5.5 * var(--u)) 0 0 calc(-5.5 * var(--u)); border-radius:50%; background:rgba(255,255,255,.35); border:calc(.5 * var(--u)) solid #fff; opacity:0; z-index:5; }
.t-event { left:calc(28 * var(--u)); top:calc(96 * var(--u)); } .t-tr { left:calc(34 * var(--u)); top:calc(24 * var(--u)); } .t-acc { left:calc(75 * var(--u)); top:calc(49 * var(--u)); }
.sc.on .t-event { animation:tap .9s 3.2s both; } .sc.on .t-tr { animation:tap .9s 2.9s both; } .sc.on .t-acc { animation:tap .9s 2.8s both; }
@keyframes tap { 0% { opacity:0; transform:scale(.4); } 30% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(1.5); } }
.chead { display:flex; align-items:center; gap:calc(3 * var(--u)); padding-bottom:calc(3 * var(--u)); border-bottom:1px solid #262634; }
.chead img { width:calc(10 * var(--u)); height:calc(10 * var(--u)); border-radius:50%; object-fit:cover; } .chead b { display:block; font-size:calc(3.8 * var(--u)); }
.trbtn { display:inline-block; margin-top:calc(.6 * var(--u)); font-size:calc(2.7 * var(--u)); color:#8a8aa0; font-weight:600; padding:calc(.8 * var(--u)) calc(2 * var(--u)); border-radius:99px; background:#14141c; }
.sc.on .trbtn { animation:trp .4s 3.1s both; } @keyframes trp { to { color:#fff; background:#ff3d81; } }
.msgs { display:flex; flex-direction:column; gap:calc(2.6 * var(--u)); padding-top:calc(4 * var(--u)); }
.bub { max-width:78%; padding:calc(2.6 * var(--u)) calc(3.2 * var(--u)); border-radius:calc(4 * var(--u)); font-size:calc(3.3 * var(--u)); line-height:1.35; }
.in { background:#1f1f2b; align-self:flex-start; border-bottom-left-radius:calc(1 * var(--u)); } .out { background:#ff3d81; align-self:flex-end; border-bottom-right-radius:calc(1 * var(--u)); }
.bub em { display:block; font-style:normal; font-size:calc(2.4 * var(--u)); color:#8a8aa0; margin-top:calc(1.2 * var(--u)); }
.de { display:block; max-height:0; opacity:0; overflow:hidden; } .en { display:block; }
.sc.on .de { animation:hidede .5s 3.5s both; } .sc.on .en { animation:showen .5s 3.5s both; } .sc.on .b1 em { animation:showen .5s 3.5s both; }
@keyframes hidede { from { max-height:14em; opacity:1; } to { max-height:0; opacity:0; } } @keyframes showen { from { max-height:0; opacity:0; } to { max-height:14em; opacity:1; } }
.dots { display:none; align-self:flex-start; gap:calc(1.2 * var(--u)); background:#1f1f2b; padding:calc(3 * var(--u)) calc(3.6 * var(--u)); border-radius:calc(4 * var(--u)); }
.dots i { width:calc(1.7 * var(--u)); height:calc(1.7 * var(--u)); border-radius:50%; background:#8a8aa0; animation:blink 1s infinite; } .dots i:nth-child(2) { animation-delay:.15s; } .dots i:nth-child(3) { animation-delay:.3s; }
.sc.on .dots { display:flex; animation:dotsgo 1.5s .2s both; } @keyframes blink { 50% { opacity:.25; } }
@keyframes dotsgo { 0% { opacity:0; } 12%,85% { opacity:1; max-height:calc(9 * var(--u)); } 100% { opacity:0; max-height:0; padding:0; margin:calc(-1.3 * var(--u)) 0; } }
.sc.on .b1 { animation:up .5s 1.5s both; } .sc.on .b2 { animation:up .5s 4.9s both; } .sc.on .b3 { animation:up .5s 6.3s both; }
.tabs { display:flex; background:#14141c; border-radius:calc(3 * var(--u)); padding:calc(.8 * var(--u)); margin:calc(1.5 * var(--u)) 0 calc(3 * var(--u)); font-size:calc(3 * var(--u)); }
.tabs b { flex:1; text-align:center; padding:calc(2 * var(--u)) 0; color:#8a8aa0; border-radius:calc(2.4 * var(--u)); } .tabs b.on { background:#ff3d81; color:#fff; }
.row { display:flex; align-items:center; gap:calc(3 * var(--u)); background:#181822; border:1px solid #262634; border-radius:calc(3.6 * var(--u)); padding:calc(2.4 * var(--u)); margin-bottom:calc(2.2 * var(--u)); }
.row img { width:calc(11 * var(--u)); height:calc(11 * var(--u)); border-radius:50%; object-fit:cover; flex:none; } .row b { display:block; font-size:calc(3.7 * var(--u)); } .row small { display:block; color:#8a8aa0; font-size:calc(2.8 * var(--u)); overflow:hidden; }
.acc { margin-left:auto; display:flex; gap:calc(1.6 * var(--u)); max-width:0; opacity:0; overflow:hidden; white-space:nowrap; }
.a-btn,.d-btn { font-style:normal; font-weight:700; font-size:calc(2.8 * var(--u)); padding:calc(1.8 * var(--u)) calc(3 * var(--u)); border-radius:calc(2.4 * var(--u)); background:#262634; } .a-btn { background:#ff3d81; }
.s-a { max-height:0; opacity:0; } .s-b { max-height:calc(4 * var(--u)); }
.sc.on .acc { animation:accgo .35s 3.4s both; } .sc.on .a-btn { animation:press .5s 2.9s both; }
.sc.on .s-a { animation:hidesa .35s 3.4s both; } .sc.on .s-b { animation:showsb .35s 3.4s both; }
@keyframes accgo { from { opacity:1; max-width:calc(40 * var(--u)); } to { opacity:0; max-width:0; } } @keyframes press { 40% { transform:scale(.88); filter:brightness(1.3); } }
@keyframes hidesa { from { max-height:calc(4 * var(--u)); opacity:1; } to { max-height:0; opacity:0; } } @keyframes showsb { from { max-height:0; opacity:0; } to { max-height:calc(4 * var(--u)); opacity:1; } }
.sc.on .row.req { animation:up .5s .3s both, glow 1s 3.4s both; } @keyframes glow { 50% { border-color:#ff3d81; box-shadow:0 0 0 calc(.8 * var(--u)) rgba(255,61,129,.25); } }
.sc.on .row:nth-of-type(2) { animation:up .5s .45s both; } .sc.on .row:nth-of-type(3) { animation:up .5s .6s both; } .sc.on .row:nth-of-type(4) { animation:up .5s .75s both; } .sc.on .row:nth-of-type(5) { animation:up .5s .9s both; }
/* chips */
.chips { position:absolute; inset:0; pointer-events:none; z-index:4; }
.chip { position:absolute; display:flex; align-items:center; gap:10px; background:rgba(24,24,34,.94); border:1px solid #34344a; color:#fff; padding:8px 16px 8px 8px; border-radius:99px; font-size:14px; box-shadow:0 14px 34px rgba(0,0,0,.45); opacity:0; transform:translateY(14px) scale(.9); transition:opacity .45s, transform .55s cubic-bezier(.2,1.3,.4,1); white-space:nowrap; }
.chip img { width:30px; height:30px; border-radius:50%; object-fit:cover; } .chip>span:only-child { padding-left:8px; }
.chip.on { opacity:1; transform:none; transition-delay:var(--cd,1s); }
.chip.l { left:-6%; } .chip.r { right:-8%; }
.c0.l { top:27%; --cd:1.3s; } .c0.m2 { top:63%; --cd:4.6s; } .c1.r { top:40%; --cd:3.5s; } .c2.l { top:50%; --cd:3.9s; } .c3.r { top:34%; --cd:3.7s; }
.stack { display:flex; } .stack img { width:26px; height:26px; margin-left:-9px; border:2px solid #181822; } .stack img:first-child { margin-left:0; }
/* stepper */
.steps { list-style:none; margin:30px 0 0; padding:0; display:grid; gap:4px; max-width:31em; }
.steps button { all:unset; box-sizing:border-box; display:grid; grid-template-columns:30px 1fr; gap:12px; width:100%; padding:11px 14px; border-radius:14px; cursor:pointer; position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent; }
.steps button:hover { background:rgba(127,127,160,.08); } .steps button:focus-visible { outline:2px solid var(--accent); }
.steps .n { width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; font-size:13px; font-weight:700; color:var(--muted); transition:.3s; }
.steps .t b { display:block; font-size:16.5px; color:var(--muted); transition:color .3s; } .steps .t small { display:block; font-size:14.5px; line-height:1.4; color:var(--muted); max-height:0; opacity:0; overflow:hidden; transition:max-height .5s, opacity .4s; }
.steps button.on { background:var(--card); box-shadow:0 0 0 1px var(--line); } .steps button.on .n { background:var(--accent); border-color:var(--accent); color:#fff; } .steps button.on .t b { color:var(--fg); }
.steps button.on .t small { max-height:5em; opacity:1; margin-top:3px; }
.steps .bar { position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--accent); } .steps button.on .bar { animation:fill 9s linear both; } @keyframes fill { to { width:100%; } }
.hero-copy { min-width:0; }
@media (max-width:760px) { .steps { margin-inline:auto; text-align:left; } .chip { font-size:12px; } .chip.l { left:-2%; } .chip.r { right:-2%; } .hero-phone { padding-bottom:10px; } }
@media (prefers-reduced-motion: reduce) { .sc,.sc * { animation:none !important; } .chip { transition:none; } }
.grid3 img, .ev img { height:auto; }

.sc.on .row { animation:up .5s calc(.35s + var(--r,0)*.11s) both; }
.sc.on .row.req { animation:up .5s .3s both, glow 1s 3.4s both; }
.ok { margin-left:auto; color:#2ee59d; font-weight:800; font-size:calc(4 * var(--u)); padding-right:calc(1 * var(--u)); }
.sc.on .ok { animation:okpop .4s 3.5s both cubic-bezier(.2,1.6,.4,1); } @keyframes okpop { from { opacity:0; transform:scale(.2); } }
.row.req .acc { margin-left:auto; }
.bub { font-size:calc(3.7 * var(--u)); } .bub em { font-size:calc(2.7 * var(--u)); }
.comp { position:absolute; left:calc(4 * var(--u)); right:calc(4 * var(--u)); bottom:calc(5 * var(--u)); display:flex; align-items:center; justify-content:space-between; background:#14141c; border-radius:99px; padding:calc(2 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u)) calc(4 * var(--u)); color:#6c6c82; font-size:calc(3.4 * var(--u)); }
.comp i { width:calc(7 * var(--u)); height:calc(7 * var(--u)); border-radius:50%; background:#ff3d81; color:#fff; display:grid; place-items:center; font-style:normal; font-weight:800; }

.hero:not(.ready) .sc[data-i="0"] { opacity:1; visibility:visible; }
.cr-head { display:flex; flex-direction:column; align-items:center; gap:calc(1 * var(--u)); text-align:center; margin-bottom:calc(2 * var(--u)); }
.cr-head img { width:calc(20 * var(--u)); height:calc(20 * var(--u)); border-radius:50%; object-fit:cover; } .cr-head b { font-size:calc(5 * var(--u)); font-weight:800; } .cr-head u { text-decoration:none; color:#ff3d81; }
.handle { color:#ff3d81; font-size:calc(2.9 * var(--u)); }
.bio { font-size:calc(3.2 * var(--u)); line-height:1.4; text-align:center; margin:0 calc(4 * var(--u)) !important; } .cats { color:#8a8aa0; font-size:calc(2.8 * var(--u)); text-align:center; margin-top:calc(1 * var(--u)) !important; }
.sec2 { font-size:calc(3.4 * var(--u)); font-weight:700; margin:calc(3.2 * var(--u)) 0 calc(1.6 * var(--u)) !important; }
.lnk { background:#181822; border:1px solid #262634; border-radius:calc(3 * var(--u)); padding:calc(2 * var(--u)) calc(3 * var(--u)); margin-bottom:calc(1.6 * var(--u)); } .lnk b { display:block; font-size:calc(3.2 * var(--u)); } .lnk small { color:#8a8aa0; font-size:calc(2.5 * var(--u)); }
.open { color:#2ee59d; font-weight:600; font-size:calc(3 * var(--u)); }
.msgbox { background:#181822; border:1px solid #262634; border-radius:calc(3 * var(--u)); padding:calc(3 * var(--u)); margin-top:calc(2 * var(--u)); min-height:calc(11 * var(--u)); font-size:calc(3 * var(--u)); }
.typed { display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom; max-width:100%; }
.sc.on .typed { animation:typing 1.8s 3s steps(38,end) both; } @keyframes typing { from { max-width:0; } to { max-width:100%; } }
.reqbtn { position:relative; margin-top:calc(2.4 * var(--u)); height:calc(10 * var(--u)); border-radius:calc(3 * var(--u)); background:#ff3d81; display:grid; place-items:center; font-weight:700; font-size:calc(3.2 * var(--u)); overflow:hidden; }
.reqbtn span { grid-area:1/1; } .r-b { opacity:1; } .r-a { opacity:0; }
.sc.on .r-a { animation:ra 5.6s 0s both; } .sc.on .r-b { animation:rb .4s 5.9s both; } .sc.on .reqbtn { animation:up .5s 2.7s both, rbtn .5s 5.9s both; }
@keyframes ra { 0%,98% { opacity:1; } 100% { opacity:0; } } @keyframes rb { from { opacity:0; transform:translateY(100%); } } @keyframes rbtn { to { background:#1d8f66; } }
.t-req { left:calc(48 * var(--u)); top:calc(133 * var(--u)); } .sc.on .t-req { animation:tap .9s 5.4s both; }
.sc.on .cr-head { animation:up .6s .2s both; } .sc.on .bio,.sc.on .cats { animation:fadein .6s .7s both; } .sc.on .lnk:nth-of-type(1) { animation:up .5s 1.1s both; } .sc.on .lnk:nth-of-type(2) { animation:up .5s 1.3s both; } .sc.on .open { animation:fadein .5s 2s both; } .sc.on .msgbox { animation:up .5s 2.4s both; }
.c4.l { top:auto; bottom:-5%; left:8%; --cd:6.3s; }

/* creator scene, matched to the app's Creator screen */
.back { position:absolute; left:calc(1 * var(--u)); color:#ff3d81; font-size:calc(6 * var(--u)); line-height:1; }
.cr-av { display:flex; justify-content:center; margin:calc(1 * var(--u)) 0 calc(2.4 * var(--u)); } .cr-av img { width:calc(19 * var(--u)); height:calc(19 * var(--u)); border-radius:50%; object-fit:cover; }
.cr-name { font-size:calc(5.4 * var(--u)); font-weight:800; } .cr-name u { text-decoration:none; }
.handle { color:#ff3d81; font-size:calc(3 * var(--u)); margin-top:calc(.6 * var(--u)); text-align:left; }
.bio { text-align:left; margin:calc(1.4 * var(--u)) 0 0 !important; font-size:calc(3.2 * var(--u)); } .cats { text-align:left; margin-top:calc(.8 * var(--u)) !important; color:#8a8aa0; font-size:calc(2.9 * var(--u)); }
.sec2 { font-size:calc(3.8 * var(--u)); margin:calc(3.4 * var(--u)) 0 calc(1.8 * var(--u)) !important; }
.lnk { padding:calc(2.2 * var(--u)) calc(3 * var(--u)); } .lnk b { font-size:calc(3.2 * var(--u)); } .lnk small { font-size:calc(2.6 * var(--u)); display:block; margin-top:calc(.4 * var(--u)); }
.open { font-size:calc(3.2 * var(--u)); }
.hint { color:#8a8aa0; font-size:calc(2.6 * var(--u)); line-height:1.35; margin-top:calc(2 * var(--u)); }
.reqbtn { margin-top:calc(2.4 * var(--u)); height:calc(9.5 * var(--u)); border-radius:calc(3 * var(--u)); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:calc(2 * var(--u)); margin-top:calc(2.4 * var(--u)); } .two i { font-style:normal; font-weight:700; font-size:calc(3 * var(--u)); text-align:center; padding:calc(2.6 * var(--u)) 0; background:#181822; border:1px solid #262634; border-radius:calc(3 * var(--u)); }
.sc.on .cr-av { animation:up .6s .2s both; } .sc.on .cr-name,.sc.on .handle { animation:fadein .5s .5s both; }
.sc.on .hint { animation:fadein .5s 2.6s both; } .sc.on .two { animation:fadein .5s 3s both; }

/* ---- modern iPhone, larger, untilted ---- */
.wrap { max-width:960px; }
.screen { --u:1.3cqw; }
.hero { grid-template-columns:minmax(0,1fr) auto; }
.hero-phone { display:flex; justify-content:center; }
.device { --w:min(350px,80vw); width:var(--w); aspect-ratio:9/19.5; transform:none; filter:none; position:relative; }
.bezel { position:absolute; inset:0; border-radius:calc(var(--w) * .15); padding:calc(var(--w) * .024);
  background:linear-gradient(145deg,#52545c 0%,#1a1b20 16%,#30323a 48%,#15161a 80%,#464851 100%);
  box-shadow:inset 0 0 0 1px #6a6c75, inset 0 0 0 calc(var(--w) * .007) #0a0a0c, 0 50px 70px -28px rgba(0,0,0,.5), 0 22px 34px -14px rgba(0,0,0,.35); }
.screen { border-radius:calc(var(--w) * .126); }
.island { top:1.2%; width:31%; height:3.7%; }
.btn { width:calc(var(--w) * .011); } .b1 { left:calc(var(--w) * -.009); top:13%; height:2.6%; } .b2 { left:calc(var(--w) * -.009); top:19%; height:5.2%; } .b3 { left:calc(var(--w) * -.009); top:26%; height:5.2%; } .b4 { right:calc(var(--w) * -.009); top:23%; height:8%; }
.sbar { position:absolute; left:0; right:0; top:1.2%; height:3.7%; display:flex; align-items:center; justify-content:space-between; padding:0 calc(var(--w) * .085); z-index:6; font:600 calc(var(--w) * .043)/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif; color:#fff; pointer-events:none; }
.sbar .r { display:flex; align-items:center; gap:calc(var(--w) * .014); }
.sbar .sig { display:flex; align-items:flex-end; gap:1.5px; height:calc(var(--w) * .03); } .sbar .sig i { width:calc(var(--w) * .009); background:#fff; border-radius:1px; } .sbar .sig i:nth-child(1) { height:35%; } .sbar .sig i:nth-child(2) { height:55%; } .sbar .sig i:nth-child(3) { height:75%; } .sbar .sig i:nth-child(4) { height:100%; }
.sbar .bat { width:calc(var(--w) * .062); height:calc(var(--w) * .03); border:1.3px solid rgba(255,255,255,.55); border-radius:calc(var(--w) * .009); padding:1.5px; box-sizing:border-box; } .sbar .bat::after { content:""; display:block; width:78%; height:100%; background:#fff; border-radius:1px; }
.sc { padding-top:calc(14 * var(--u)); padding-bottom:0; }
.tabbar { position:absolute; left:0; right:0; bottom:0; z-index:4; display:flex; justify-content:space-around; align-items:flex-start; padding:calc(2.2 * var(--u)) calc(1 * var(--u)) calc(6 * var(--u)); background:#0d0d13; border-top:1px solid #1d1d28; }
.tabbar span { display:flex; flex-direction:column; align-items:center; gap:calc(.7 * var(--u)); font-size:calc(2.6 * var(--u)); color:#7b7b92; font-weight:500; } .tabbar span.on { color:#ff3d81; }
.tabbar svg { width:calc(6.4 * var(--u)); height:calc(6.4 * var(--u)); }
.mapv { top:calc(10 * var(--u)); bottom:0; }
.sc[data-i="2"] .msgs { padding-top:calc(3 * var(--u)); } .sc[data-i="2"] .comp { bottom:calc(7 * var(--u)); }
/* steps: no height change when a step is selected, so nothing shifts */
.steps .t small { display:block !important; max-height:none !important; opacity:1 !important; margin-top:2px; font-size:14px; color:var(--muted); } .steps button.on .t small { color:var(--fg); }
.stepdesc { margin:14px 0 0; padding:0 14px; color:var(--muted); font-size:15.5px; line-height:1.5; max-width:31em; min-height:4.6em; transition:opacity .35s; } .stepdesc.sw { opacity:0; }
@media (max-width:760px) { .hero { grid-template-columns:1fr; } .device { --w:min(310px,78vw); } .stepdesc { text-align:left; } }

.steps { gap:2px; } .steps button { padding:10px 14px; }
.steps .t b { transition:none; }

@media (max-width:760px) { .steps button { padding:9px 12px; } }

@media (max-width:760px) {
  .hero { display:flex; flex-direction:column; align-items:center; gap:0; }
  .hero-copy { display:contents; }
  .hero h1,.hero p,.hero .soon { text-align:center; }
  .hero .pill { align-self:center; }
  .hero br { display:none; }
  .hero .soon { margin-bottom:10px; }
  .hero-phone { order:5; margin:26px 0 8px; } .steps { order:6; width:100%; margin-top:22px; }
}

/* dark colour-blocked features section, full width */
.features { background:#0b0b11; box-shadow:0 0 0 100vmax #0b0b11; clip-path:inset(0 -100vmax); margin-top:24px; padding-block:48px 8px; }
.features .grid { padding-block:0 12px; }
.features .card { background:#171722; border-color:#2a2a3a; }
.features .card h3 { color:#f4f4f8; } .features .card p { color:#b3b3c6; }
.features .band { color:#9a9ab0; padding-block:36px 40px; margin:0; }
@media (prefers-color-scheme: dark) { .features,.features { background:#07070b; box-shadow:0 0 0 100vmax #07070b; } }

/* launch screen intro */
.sc.splash { background:#0b0b10; display:grid; place-items:center; padding:0; }
.splash img { width:46%; height:auto; border-radius:22%; position:relative; z-index:1; }
.splash .glow { position:absolute; left:50%; top:50%; width:90%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,rgba(255,61,129,.42),rgba(255,61,129,0) 65%); opacity:0; }
.sc.splash.on img { animation:splashin 1s .15s both cubic-bezier(.2,1.25,.4,1); }
.sc.splash.on .glow { animation:glowin 2.2s .1s both ease-out; }
@keyframes splashin { from { opacity:0; transform:scale(.6); } }
@keyframes glowin { 0% { opacity:0; transform:translate(-50%,-50%) scale(.5); } 40% { opacity:1; } 100% { opacity:.55; transform:translate(-50%,-50%) scale(1.1); } }

/* one step card at a time (all stacked in one cell so the height never changes) */
.hero-copy { align-self:center; }
.steps { display:grid; gap:0; margin-top:30px; }
.steps li { grid-area:1/1; opacity:0; visibility:hidden; transition:opacity .45s, visibility .45s; }
.steps li:has(button.on), .hero:not(.ready) .steps li:first-child { opacity:1; visibility:visible; }
.steps button { cursor:default; padding:16px 18px; }
.steps button, .steps button.on { background:var(--card); box-shadow:0 0 0 1px var(--line), 0 14px 34px -18px rgba(0,0,0,.35); }
.steps button.on .n { background:var(--accent); border-color:var(--accent); color:#fff; }
.steps .t b { color:var(--fg); font-size:17.5px; } .steps .t small { color:var(--muted); font-size:15px; }
.steps button.on .t small { color:var(--muted); }
.stepnav { display:flex; align-items:center; gap:14px; margin-top:14px; padding-left:4px; }
.stepnav .arr { all:unset; box-sizing:border-box; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; cursor:pointer; font-size:22px; line-height:1; color:var(--fg); border:1px solid var(--line); background:var(--card); -webkit-tap-highlight-color:transparent; }
.stepnav .arr:hover { border-color:var(--accent); color:var(--accent); } .stepnav .arr:focus-visible, .stepnav .dot:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.pager { display:flex; align-items:center; gap:10px; }
.dot { all:unset; box-sizing:border-box; height:9px; width:9px; border-radius:99px; background:rgba(127,127,160,.4); cursor:pointer; position:relative; overflow:hidden; transition:width .35s, background .3s; }
.dot.on { width:32px; } .dot.on::after { content:""; position:absolute; inset:0; width:0; background:var(--accent); border-radius:99px; animation:fill 9s linear both; }
/* phone back on an angle */
.device { transform:rotate(3deg); }
@media (max-width:760px) { .device { transform:rotate(2deg); } .stepnav { order:7; width:100%; justify-content:center; } .steps { order:6; } }

/* arrows only, appear once the first feature has loaded */
.stepnav { gap:10px; opacity:0; visibility:hidden; transition:opacity .6s, visibility .6s; }
.hero.live .stepnav { opacity:1; visibility:visible; }
.hero:not(.ready) .stepnav { display:none; }
.pager { display:none; }

.c4.r { top:9%; bottom:auto; left:auto; right:-8%; --cd:6.3s; }
@media (max-width:760px) { .c4.r { top:6%; right:-2%; } }