/* frenlock.fun · landing v2.14 · plain CSS, no build step.
   Sizes are fluid against the page itself (container units on .fl), so the same file renders the site and the review board.
   Browsers without container queries (before 2023) get the one-column layout, which is complete.
   Shipped from the handoff (docs/design/handoff/web/public) with one patch, at .get-desktop: on a computer the download block
   takes the QR grid's own 620, and a narrow card shrinks its tile, so "frenlock.fun/android" stays inside its card at every width. */

@font-face{font-family:Geist;src:url(fonts/Geist-Regular.woff2) format("woff2"),url(fonts/Geist-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Geist;src:url(fonts/Geist-Medium.woff2) format("woff2"),url(fonts/Geist-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:Geist;src:url(fonts/Geist-SemiBold.woff2) format("woff2"),url(fonts/Geist-SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/GeistMono-Medium.woff2) format("woff2"),url(fonts/GeistMono-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Geist Fallback";src:local("Arial"),local("Helvetica Neue"),local("Roboto");size-adjust:104%;ascent-override:92%;descent-override:22%;line-gap-override:0%}

*,*::before,*::after{box-sizing:border-box}
html{background:#0B0B0C;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0}
.fl{--u:1vw;container-type:inline-size;position:relative;overflow-x:clip;background:#0B0B0C;color:#F5F5F2;font-family:Geist,"Geist Fallback",system-ui,sans-serif;font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased;--pad:clamp(20px,5 * var(--u),72px)}
@supports (width:1cqi){.fl{--u:1cqi}}
.fl a{color:#F5F5F2}
.fl a:hover{color:#FFFFFF}
.fl button{font-family:inherit}
.fl :focus-visible{outline:2px solid #F5F5F2;outline-offset:3px}
.fl .close :focus-visible{outline-color:#0B0B0C}
.mono{font:500 12px/16px "Geist Mono",ui-monospace,monospace}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-64px;z-index:50;padding:10px 16px;border-radius:999px;background:#F5F5F2;color:#0B0B0C!important;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
fren-mascot{display:block;aspect-ratio:260/230}

@keyframes fl-in{from{opacity:0}to{opacity:1}}
@keyframes fl-drop{from{transform:translateY(-28px);opacity:0}to{transform:none;opacity:1}}
@keyframes fl-pop{0%{transform:scale(.9)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes fl-lift{from{transform:translateY(26px)}to{transform:none}}
@keyframes fl-sheet{from{transform:translateY(80px)}to{transform:none}}
@keyframes fl-ring{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.14);opacity:0}}
@keyframes fl-blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes fl-breathe{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.08);opacity:.9}}
@keyframes push-loop{0%{transform:translateY(-22px);opacity:0}5%,90%{transform:none;opacity:1}97%,100%{transform:translateY(-6px);opacity:0}}

/* header */
.hd{position:relative;z-index:2;max-width:1424px;margin:0 auto;height:clamp(64px,6 * var(--u),84px);padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none}
.logo span{font-size:22px;font-weight:600;letter-spacing:-1px;line-height:1}
.pill{font:500 12px/16px "Geist Mono",ui-monospace,monospace;color:#A1A1A6;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.07);white-space:nowrap}

/* hero */
.hero{position:relative;max-width:1424px;margin:0 auto;padding:4px var(--pad) clamp(48px,7 * var(--u),96px)}
.hero-txt{position:relative;z-index:1;display:flex;flex-direction:column;max-width:600px}
.h1{margin:0;font-weight:600;letter-spacing:-.045em}
.h1a{display:block;font-size:clamp(64px,20 * var(--u),104px);line-height:.9}
.h1b{display:block;margin-top:.17em;font-size:clamp(40px,11.8 * var(--u),64px);line-height:.98}
.hero-fren{position:absolute;right:-12px;top:-4px;width:clamp(92px,27 * var(--u),124px)}
.push-fig{margin:22px 0 0}
.push-slot{position:relative;min-height:90px}
.push{display:flex;align-items:center;gap:12px;padding:13px 14px 13px 13px;border-radius:24px;background:#26262A;box-shadow:inset 0 .5px 0 rgba(255,255,255,.18),0 8px 20px rgba(0,0,0,.3);color:#FFFFFF;animation:push-loop 8s cubic-bezier(.2,.8,.2,1) infinite}
.push-ios{font-family:-apple-system,"SF Pro Text",system-ui,sans-serif}
.push-and{display:none;align-items:flex-start;gap:14px;padding:16px 18px 16px 16px;border-radius:28px;background:#28282C;font-family:system-ui,sans-serif}
.fl[data-platform=android] .push-ios{display:none}
.fl[data-platform=android] .push-and{display:flex}
.push-fig figcaption{position:relative;z-index:1;margin-top:10px;color:#A1A1A6}
.push-ic{display:block;width:38px;height:38px;border-radius:9px;background:#C8FF3D;overflow:hidden;flex:none}
.push-ic svg{display:block}
.push-ic-and{width:40px;height:40px;border-radius:50%;background:#C8FF3D;display:flex;align-items:center;justify-content:center;flex:none}
.push-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.push-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-width:0}
.push-top b,.push-body>b{min-width:0;font-size:15px;font-weight:600;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.push-now{font-size:13px;color:rgba(255,255,255,.55);flex:none}
.push-txt{font-size:15px;line-height:20px;color:rgba(255,255,255,.86);text-wrap:pretty}
.push-meta{font-size:13px;line-height:17px;color:rgba(255,255,255,.6);margin-bottom:2px}
.push-and .push-body>b{font-size:16px;line-height:21px}
.push-and .push-txt{color:rgba(255,255,255,.75)}
.sub{margin:16px 0 0;max-width:540px;font-size:clamp(16px,4.1 * var(--u),21px);line-height:1.45;color:#A1A1A6;text-wrap:pretty}

/* get the app: the server picks the layout with data-platform */
.get{display:none;flex-direction:column;margin-top:22px;max-width:560px}
.fl[data-platform=ios] .get-ios,.fl[data-platform=android] .get-android,.fl[data-platform=desktop] .get-desktop{display:flex}
.btn-ink{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;padding:0 24px 0 28px;border-radius:999px;background:#F5F5F2;color:#0B0B0C!important;text-decoration:none;transition:transform .12s,background .15s}
.btn-ink:hover{background:#FFFFFF}
.btn-ink:active,.btn-ctl:active,.qr:active{transform:scale(.97)}
.btn-ink b{display:block;font-size:17px;font-weight:600;line-height:21px}
.btn-ink small{display:block;font-size:13px;line-height:17px;color:rgba(11,11,12,.62)}
.get-alt{min-height:44px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500;color:#A1A1A6!important;text-decoration:none}
.get-alt:hover{color:#F5F5F2!important}
.get-help{justify-content:flex-start;padding-left:8px}
.get-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:10px}
.btn-ctl{flex:1 1 160px;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px;padding:0 18px 0 22px;border-radius:999px;background:#242426;color:#F5F5F2;text-decoration:none;transition:transform .12s,background .15s}
.btn-ctl:hover{background:#2C2C2E}
.btn-ctl b,.slot b{display:block;font-size:15px;font-weight:600;line-height:19px;white-space:nowrap}
.btn-ctl small,.slot small{display:block;font-size:12px;line-height:16px;color:#A1A1A6;white-space:nowrap}
.btn-ctl svg{color:#A1A1A6;flex:none}
.slot{flex:1 1 160px;min-width:0;display:flex;flex-direction:column;justify-content:center;height:56px;padding:0 22px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);text-decoration:none}
.slot-live{display:none;flex:none;height:56px;border-radius:12px;text-decoration:none}
.badge-ph{width:188px;height:56px;border-radius:12px;background:repeating-linear-gradient(135deg,#1C1C1E 0 6px,#161617 6px 12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;padding:0 12px;text-align:center;font:500 11px/14px "Geist Mono",ui-monospace,monospace;color:#A1A1A6}
.fl[data-dapp=live] .slot-review{display:none}
.fl[data-dapp=live] .slot-live{display:block}
.dapp-live-txt{display:none}
.fl[data-dapp=live] .dapp-review-txt{display:none}
.fl[data-dapp=live] .dapp-live-txt{display:inline}
.get-note{font-size:14px;line-height:20px;color:#A1A1A6}
.apk-card{display:none;align-items:flex-start;gap:14px;padding:14px 18px 4px 14px;border-radius:24px;background:#161617;animation:fl-drop .45s cubic-bezier(.2,.8,.2,1)}
.apk-ic{width:40px;height:40px;flex:none;border-radius:50%;background:#242426;display:flex;align-items:center;justify-content:center}
.apk-card b{display:block;font-size:17px;line-height:22px}
.apk-card>span>span{display:block;margin-top:2px;font-size:15px;line-height:21px;color:#A1A1A6;text-wrap:pretty}
.apk-card a{min-height:44px;display:inline-flex;align-items:center;font-size:15px;font-weight:600;text-decoration:none}
.fl[data-apk=started] .apk-card{display:flex}
.fl[data-apk=started] .get-help{display:none}
/* The patch (see the header): two cards of 304 hold "frenlock.fun/android" (144 in Geist Mono) beside a 112 tile; 100cqi is the
   card's content box, so a narrower card gets a smaller tile and keeps 2 px to spare. */
.get-desktop{max-width:620px}
.qr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:12px;max-width:620px}
.qr{display:flex;align-items:center;gap:16px;padding:12px 18px 12px 12px;border-radius:28px;background:#161617;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);text-decoration:none;transition:background .15s,transform .12s;container-type:inline-size}
.qr:hover{background:#1C1C1E}
.qr-tile{width:112px;width:clamp(80px,calc(100cqi - 162px),112px);flex:none;padding:12px;border-radius:18px;background:#F5F5F2;display:block}
.qr-tile img{display:block;width:100%;height:auto}
.qr b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:25px}
.qr small{display:block;font-size:14px;line-height:19px;color:#A1A1A6}
.qr .mono{display:block;margin-top:10px;color:#A1A1A6}
.get-desktop .get-row{margin-top:12px}

.hero-art{display:none}
.ghost{position:absolute;right:-90px;bottom:-150px;z-index:0;font-size:clamp(300px,36 * var(--u),520px);line-height:1;font-weight:600;letter-spacing:-.06em;color:#131315;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.hero-phone{position:absolute;right:4%;top:50%;z-index:1;transform:translateY(-50%) rotate(-4deg)}
.art-fren{position:absolute;left:-2%;bottom:4%;z-index:3;width:clamp(170px,15 * var(--u),214px)}
.bubble{position:absolute;z-index:4;background:#F5F5F2;color:#0B0B0C;font-size:clamp(17px,1.4 * var(--u),20px);line-height:1.3;font-weight:600;padding:.4em .78em;border-radius:18px 18px 18px 6px;white-space:nowrap}
.hero-art .bubble{left:12%;bottom:calc(4% + clamp(150px,13 * var(--u),190px))}

@container (min-width:1000px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) clamp(390px,40 * var(--u),560px);gap:40px;align-items:center;min-height:clamp(640px,calc(100svh - 84px),900px)}
  .hero-txt{max-width:720px}
  .hero-fren,.push-fig{display:none}
  .h1a{font-size:clamp(120px,13.6 * var(--u),196px);line-height:.84}
  .h1b{margin-top:.16em;font-size:clamp(64px,6.95 * var(--u),100px);line-height:.94}
  .sub{margin-top:30px}
  .get{margin-top:36px}
  .hero-art{display:block;position:relative;align-self:stretch;min-height:680px}
}

/* the phones: drawn at 390 × 844 and scaled. --k = screen width / 390 for each phone width */
.ph{--pw:230px;--k:.554359;width:var(--pw);flex:none}
.ph[data-plat=android]{--k:.563795}
.ph-b{padding:calc(var(--pw) * .03);border-radius:15.5% / 7.3%;background:#1A1A1C;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 30px 70px rgba(0,0,0,.55)}
.ph[data-plat=android] .ph-b{padding:calc(var(--pw) * .022);border-radius:11% / 5%}
.ph-s{position:relative;width:calc(var(--pw) * .94);height:calc(var(--pw) * .94 * 2.164103);border-radius:13% / 6%;overflow:hidden;background:#0B0B0C;transform:translateZ(0)}
.ph[data-plat=android] .ph-s{width:calc(var(--pw) * .956);height:calc(var(--pw) * .956 * 2.164103);border-radius:9% / 4%}
.ph-in{position:absolute;left:0;top:0;width:390px;height:844px;transform:scale(var(--k));transform-origin:0 0;overflow:hidden;background:#0B0B0C;color:#F5F5F2;font-family:Geist,"Geist Fallback",system-ui,sans-serif;font-size:17px;line-height:1.25;text-align:left;font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none}
.ph-in b{font-weight:600}
.ph-hero{--pw:300px;--k:.723077}
@container (min-width:1200px){.ph-hero{--pw:330px;--k:.795385}}

.ph .s{position:absolute;inset:0;display:none;animation:fl-in .25s}
.ph-a[data-screen=pos] .s[data-s=pos],.ph-a[data-screen=take] .s[data-s=take],.ph-a[data-screen=wait] .s[data-s=wait],.ph-a[data-screen=yes] .s[data-s=yes],.ph-a[data-screen=ended] .s[data-s=ended],.ph-a[data-screen=out] .s[data-s=out],.ph-l[data-screen=lock] .s-lock,.ph-l[data-screen=push] .s-lock,.ph-l[data-screen=decide] .s[data-s=decide],.ph-l[data-screen=saidyes] .s[data-s=saidyes],.ph-l[data-screen=saidwait] .s[data-s=saidwait]{display:block}
.s-lock>div.ios-only,.s-lock>div.and-only{display:flex}
.ph[data-plat=android] .ios-only,.ph[data-plat=ios] .and-only{display:none!important}
.ph[data-plat=android] .sb-ios,.ph[data-plat=android] .isl,.ph[data-plat=android] .hb-ios,.ph[data-plat=ios] .sb-and,.ph[data-plat=ios] .punch,.ph[data-plat=ios] .hb-and{display:none}
.ph-l[data-plat=ios][data-screen=lock] .sb-t,.ph-l[data-plat=ios][data-screen=push] .sb-t{visibility:hidden}
.sb{position:absolute;left:0;right:0;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;color:#FFFFFF;pointer-events:none}
.sb-ios{height:54px;padding:0 30px 0 48px;font:600 17px/1 -apple-system,"SF Pro Text",system-ui,sans-serif}
.sb-and{height:40px;padding:0 24px;font:500 14px/1 system-ui,sans-serif}
.sb-ic{display:flex;align-items:center;gap:6px}
.isl{position:absolute;top:11px;left:133px;z-index:21;width:124px;height:36px;border-radius:20px;background:#000}
.hb-ios{position:absolute;bottom:8px;left:128px;z-index:21;width:134px;height:5px;border-radius:3px;background:rgba(245,245,242,.92);pointer-events:none}
.punch{position:absolute;top:13px;left:188px;z-index:21;width:14px;height:14px;border-radius:50%;background:#000;box-shadow:0 0 0 1.5px #1A1A1C}
.hb-and{position:absolute;bottom:9px;left:141px;z-index:21;width:108px;height:4px;border-radius:2px;background:rgba(245,245,242,.75);pointer-events:none}

.pt{padding-top:58px}
.ph[data-plat=android] .pt{padding-top:48px}
.pb34{padding-bottom:34px}
.p-col{height:100%;padding-left:20px;padding-right:20px;display:flex;flex-direction:column}
.p-mid{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.p-nav{height:44px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;flex:none}
.p-gb{width:44px;height:44px;border-radius:50%;background:rgba(60,60,64,.5);box-shadow:inset 0 .5px 0 rgba(255,255,255,.3),0 6px 16px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center}
.p-title{text-align:center;font-size:17px;font-weight:600;letter-spacing:-.2px}
.s[data-s=take],.s[data-s=decide]{background:#000}
.p-strip{position:absolute;left:14px;right:14px;top:50px;height:40px;border-radius:26px 26px 0 0;background:#1C1C1E}
.p-sheet{position:absolute;left:0;right:0;top:60px;bottom:0;border-radius:38px 38px 0 0;background:#121213;box-shadow:inset 0 .5px 0 rgba(255,255,255,.1);padding:7px 20px 28px;display:flex;flex-direction:column;animation:fl-sheet .38s cubic-bezier(.2,.8,.2,1)}
.p-grab{width:36px;height:5px;border-radius:3px;background:rgba(255,255,255,.24);margin:0 auto 8px;flex:none}
.ph[data-plat=android] .p-strip,.ph[data-plat=android] .p-grab{display:none}
.ph[data-plat=android] .p-sheet{top:0;border-radius:0;background:#0B0B0C;box-shadow:none;padding-top:48px}
.p-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;padding:0;border:0;border-radius:999px;font:600 17px/1.2 Geist,"Geist Fallback",system-ui,sans-serif;color:inherit;flex:none;cursor:pointer}
.p-lime{background:#C8FF3D;color:#0B0B0C}
.p-ink{background:#F5F5F2;color:#0B0B0C}
.p-ctl{background:#242426;color:#F5F5F2}
.p-raised{background:#1C1C1E;color:#F5F5F2}
.p-off{background:#242426;color:#6B6B70;cursor:default}
.p-two{height:62px;flex-direction:column;gap:0}
.p-two b{font-size:17px;line-height:21px}
.p-two small{font-size:13px;font-weight:500;line-height:17px;color:#A1A1A6}
.p-link{height:40px;border:0;background:none;color:#A1A1A6;font:500 15px Geist,"Geist Fallback",system-ui,sans-serif;cursor:pointer;flex:none;align-items:center;justify-content:center}
.p-ring{position:absolute;inset:-6px;display:none;border-radius:999px;border:2px solid rgba(245,245,242,.75);pointer-events:none;animation:fl-ring 1.6s ease-out infinite}
.p-ring.lime{border-color:rgba(200,255,61,.75)}
.ph[data-hint=takeout] [data-r=takeout],.ph[data-hint=ask] [data-r=ask],.ph[data-hint=within] [data-r=within],.ph[data-hint=push] [data-r=push],.ph[data-hint=approve] [data-r=approve],.ph[data-hint=takeit] [data-r=takeit],.ph[data-hint=done] [data-r=done]{display:block}
.p-row{display:flex;justify-content:space-between;padding:13px 0}
.p-row>span:first-child{color:#A1A1A6}
.p-hr{height:1px;background:rgba(255,255,255,.07)}
.dot{width:8px;height:8px;border-radius:50%}
.dot7{width:7px;height:7px;border-radius:50%}
.face26,.face28,.face44{border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;flex:none}
.face26{width:26px;height:26px;font-size:14px}
.face28{width:28px;height:28px;font-size:15px}
.face44{width:44px;height:44px;font-size:23px}
.p-pill{height:32px;padding:0 12px;border-radius:999px;background:#1C1C1E;align-items:center;gap:7px;font-size:14px;color:#A1A1A6}
.amt-big{font-size:76px;font-weight:600;letter-spacing:-3.6px;line-height:80px}
.ph-a[data-t=zero] .amt-big{color:#A1A1A6}
.t-zero,.t-within,.t-friend{display:none!important}
.ph-a[data-t=zero] .t-zero,.ph-a[data-t=within] .t-within,.ph-a[data-t=friend] .t-friend{display:flex!important}
.keys{display:grid;grid-template-columns:repeat(3,1fr);flex:none}
.keys button{height:54px;padding:0;border:0;border-radius:16px;background:none;color:#F5F5F2;font:500 28px Geist,"Geist Fallback",system-ui,sans-serif;display:flex;align-items:center;justify-content:center;cursor:pointer}
.keys button:active{background:#1C1C1E}
.lk232{position:relative;width:232px;height:290px;flex:none}
.glow{position:absolute;left:-84px;top:-30px;width:400px;height:400px;border-radius:50%;animation:fl-breathe 4.5s ease-in-out infinite}
.lk-body{position:absolute;left:0;top:110px;width:232px;height:180px;border-radius:64px;display:flex;align-items:center;justify-content:center;font-size:100px;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.lk-badge{position:absolute;right:-8px;bottom:-8px;width:60px;height:60px;border-radius:50%;background:#F5F5F2;box-shadow:0 0 0 5px #0B0B0C;display:flex;align-items:center;justify-content:center;color:#0B0B0C}
.lk144{position:relative;width:144px;height:180px;flex:none}
.glow144{position:absolute;left:-58px;top:-10px;width:260px;height:260px;border-radius:50%}
.lk-body144{position:absolute;left:0;top:68px;width:144px;height:112px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-size:62px;line-height:1}
.pop{animation:fl-pop .6s cubic-bezier(.2,.8,.2,1)}
.lift{animation:fl-lift .5s cubic-bezier(.2,.8,.2,1)}
.blink{animation:fl-blink 1.4s infinite}
.p-h34{font-size:34px;font-weight:600;letter-spacing:-1.2px;line-height:40px}
.p-h28{font-size:28px;font-weight:600;letter-spacing:-.9px;line-height:34px}
.p-sub{margin-top:8px;max-width:300px;font-size:17px;line-height:24px;color:#A1A1A6;text-wrap:pretty}
.p-num{font-size:44px;font-weight:600;letter-spacing:-1.8px;line-height:48px}
.p-unit{margin:0 12px 0 3px;font-size:22px;font-weight:500;color:#A1A1A6}
.p-chip{margin-top:22px;height:36px;padding:0 14px 0 6px;border-radius:999px;background:#161617;display:flex;align-items:center;gap:8px;font-size:14px;color:#A1A1A6}
.p-card{flex:none;display:flex;align-items:baseline;padding:16px 18px;border-radius:24px;background:#161617;font-size:17px}
.p-card span{margin-left:auto;font-size:13px;color:#A1A1A6}
.out-tick{width:96px;height:96px;border-radius:50%;background:#C8FF3D;color:#0B0B0C;display:flex;align-items:center;justify-content:center}
.out-friend{display:none;flex:none;align-items:center;gap:12px;margin-bottom:12px;padding:14px 14px 14px 16px;border-radius:24px;background:#161617}
.ph-a[data-out=friend] .out-friend{display:flex}
.lock-bg{position:absolute;inset:0;background:linear-gradient(170deg,#2B303B 0%,#161920 45%,#0B0B0C 100%)}
.lock-btn{position:absolute;bottom:50px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.lock-fp{position:absolute;left:171px;bottom:64px;width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center}
.p-push{position:absolute;display:none;border:0;color:#FFFFFF;text-align:left;cursor:pointer;animation:fl-drop .5s cubic-bezier(.2,.8,.2,1)}
.p-push-ios{left:10px;right:10px;top:300px;align-items:center;gap:12px;padding:14px 16px 15px 14px;border-radius:26px;background:rgba(52,52,58,.62);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);box-shadow:inset 0 .5px 0 rgba(255,255,255,.18);font-family:-apple-system,"SF Pro Text",system-ui,sans-serif}
.p-push-and{left:12px;right:12px;top:290px;align-items:flex-start;gap:14px;padding:16px 18px 18px 16px;border-radius:28px;background:rgba(40,40,44,.94);font-family:system-ui,sans-serif}
.p-push-and .push-body>b{font-size:17px;line-height:22px}
.p-push-and .push-txt{line-height:21px;color:rgba(255,255,255,.75)}
.ph-l[data-screen=push][data-plat=ios] .p-push-ios,.ph-l[data-screen=push][data-plat=android] .p-push-and{display:flex}
.ph-hero .p-push{display:flex;animation:push-loop 8s cubic-bezier(.2,.8,.2,1) infinite}

/* sections */
.eyebrow{margin:0;font:500 13px/16px "Geist Mono",ui-monospace,monospace;color:#A1A1A6}
.play h2,.sec-head h2{margin:10px 0 0;font-size:clamp(31px,7.6 * var(--u),64px);line-height:1.02;font-weight:600;letter-spacing:-.045em;text-wrap:balance}
.lead{margin:12px 0 0;max-width:520px;font-size:clamp(15px,3.9 * var(--u),18px);line-height:1.5;color:#A1A1A6;text-wrap:pretty}
.sec-head{max-width:760px}

/* the played app */
.play{position:relative;max-width:1424px;margin:0 auto;padding:clamp(56px,9 * var(--u),120px) var(--pad) 0;display:flex;flex-direction:column}
.play-txt{display:contents}
.play .eyebrow{order:1}.play h2{order:2}.play .lead{order:3}.play-stage{order:4}.cap{order:5}.acts{order:6}.dump{order:7}.seg{order:8}.story{order:9}.why{order:10}
.clock-big{display:none}
.play-stage{display:flex;flex-direction:column;align-items:center;margin-top:20px}
.seat{align-self:stretch;height:34px;display:flex;align-items:center;justify-content:space-between}
.seat-chip{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.seat-face{width:28px;height:28px;border-radius:50%;background:#173331;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;flex:none;transition:background .3s}
.clock-sm{font-variant-numeric:tabular-nums}
.clock-sm span{margin-right:6px;font-size:14px;color:#A1A1A6}
.clock-sm b{font-size:26px;font-weight:600;letter-spacing:-.03em}
.phones{display:flex;justify-content:center;gap:44px;margin-top:10px}
.ph-col{display:flex;flex-direction:column;align-items:center;gap:12px;transition:opacity .4s}
.play[data-seat=a] .ph-col-l,.play[data-seat=l] .ph-col-a{display:none}
.ph-tag{display:none;align-items:center;gap:8px;height:30px;padding:0 12px 0 3px;border-radius:999px;background:#161617;font-size:14px;font-weight:600}
.ph-tag .seat-face{width:24px;height:24px;font-size:13px}
.play .ph{--pw:230px;--k:.554359}
.play .ph[data-plat=android]{--k:.563795}
.scrub{align-self:stretch;margin-top:18px}
.scrub-lbl{display:flex;justify-content:space-between;gap:8px;font:500 11px/14px "Geist Mono",ui-monospace,monospace;color:#A1A1A6}
.wide-only{display:none}
.scrub-track{position:relative;height:30px;margin-top:10px}
.scrub-rail{position:absolute;left:0;right:0;top:13px;height:4px;border-radius:2px;background:#303034}
.scrub-fill{position:absolute;left:0;top:13px;height:4px;border-radius:2px;background:#F5F5F2;transition:width .15s}
.scrub-thumb{position:absolute;top:0;width:30px;height:30px;margin-left:-15px;border-radius:50%;background:#F5F5F2;box-shadow:0 2px 10px rgba(0,0,0,.5);transition:left .15s;pointer-events:none}
.scrub input{position:absolute;left:-15px;top:-8px;width:calc(100% + 30px);height:46px;margin:0;opacity:0;cursor:pointer}
.scrub-track:has(input:focus-visible) .scrub-thumb{outline:2px solid #F5F5F2;outline-offset:3px}
.cap{margin-top:20px;min-height:66px;font-size:17px;line-height:23px}
.cap b{display:block;font-weight:600}
.cap span{color:#A1A1A6}
.acts{display:flex;gap:10px;margin-top:12px}
.act{flex:1;min-width:0;height:52px;padding:0 14px;border:0;border-radius:999px;background:#242426;color:#F5F5F2;font-size:16px;font-weight:600;cursor:pointer;transition:transform .12s,background .15s}
.act-1{flex:1.25;background:#F5F5F2;color:#0B0B0C}
.act-1.is-lime{background:#C8FF3D}
.act:active,.act-s:active,.btn-onlime:active{transform:scale(.97)}
.act[hidden]{display:none}
.dump{margin-top:16px;display:flex;align-items:center;gap:14px;padding:16px 16px 16px 18px;border-radius:24px;background:#161617;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:box-shadow .3s}
.dump>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dump b{font-size:17px;font-weight:600}
.dump>span>span{font-size:15px;line-height:21px;color:#A1A1A6;text-wrap:pretty}
.play[data-beat=out500] .dump,.play.is-dump .dump{box-shadow:inset 0 0 0 1.5px #F5F5F2}
.act-s{flex:none;height:44px;padding:0 16px;border:0;border-radius:999px;background:#242426;color:#F5F5F2;font-size:15px;font-weight:600;cursor:pointer;transition:transform .12s}
.seg{margin-top:16px;display:flex;align-items:center;gap:12px;font-size:14px;color:#A1A1A6}
.seg-in{display:flex;padding:3px;border-radius:999px;background:#161617}
.seg button{height:38px;padding:0 15px;border:0;border-radius:999px;background:transparent;color:#A1A1A6;font-size:14px;font-weight:600;cursor:pointer}
.seg button[aria-pressed=true]{background:#F5F5F2;color:#0B0B0C}
.story{display:none;margin:20px 0 0;padding-left:20px;font-size:16px;line-height:24px;color:#A1A1A6}
.story li{margin:6px 0}
html:not(.js) .story{display:block}
html:not(.js) .acts,html:not(.js) .act-s,html:not(.js) .seg,html:not(.js) .scrub input,html:not(.js) .cap{display:none}
.why{margin:32px 0 0;max-width:720px;font-size:15px;line-height:22px;color:#A1A1A6}
.why b{color:#F5F5F2;font-weight:600}
.cite{display:block;margin-top:4px;font:500 12px/16px "Geist Mono",ui-monospace,monospace}
@container (min-width:760px){
  .play .ph{--pw:270px;--k:.650769}
  .play .ph[data-plat=android]{--k:.661846}
}
@container (min-width:1180px){
  .play{display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);column-gap:64px;align-items:start}
  .play-txt{display:flex;flex-direction:column}
  .play-stage{margin-top:0}
  .clock-big{order:4;display:flex;align-items:baseline;gap:16px;margin-top:38px;font-variant-numeric:tabular-nums}
  .clock-big span{font-size:30px;font-weight:500;color:#A1A1A6}
  .clock-big b{font-size:clamp(110px,9.4 * var(--u),136px);line-height:.9;font-weight:600;letter-spacing:-.05em}
  .seat{display:none}
  .play[data-seat] .ph-col-a,.play[data-seat] .ph-col-l{display:flex}
  .play[data-seat=l] .ph-col-a,.play[data-seat=a] .ph-col-l{opacity:.5}
  .ph-tag{display:inline-flex}
  .phones{margin-top:0}
  .play .ph{--pw:300px;--k:.723077}
  .play .ph[data-plat=android]{--k:.735385}
  .scrub{margin-top:28px}
  .scrub-lbl{font-size:12px;line-height:16px}
  .wide-only{display:inline}
  .cap{margin-top:24px;min-height:86px;font-size:18px;line-height:25px}
  .cap b{margin-bottom:4px;font-size:22px;line-height:28px;letter-spacing:-.02em}
  .acts{margin-top:14px}
  .act{height:56px;font-size:17px}
  .why{grid-column:1 / -1;margin-top:40px}
}

/* the app */
.app,.safe,.faq,.droid{max-width:1424px;margin:0 auto;padding:clamp(72px,10 * var(--u),140px) var(--pad) 0}
.app-grid{margin-top:32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;align-items:start}
.shot{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.shot figcaption{font:500 13px/16px "Geist Mono",ui-monospace,monospace;color:#A1A1A6}
.bz{position:relative;width:100%;max-width:300px;padding:3%;border-radius:15.5% / 7.3%;background:#1A1A1C;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 30px 70px rgba(0,0,0,.55)}
.bz img{display:block;width:100%;height:auto;aspect-ratio:390 / 844;object-fit:cover;object-position:top;border-radius:13% / 6%;background:#0B0B0C}
.bz-and{padding:2.2%;border-radius:11% / 5%}
.bz-and img{border-radius:9% / 4%}
.isl-o{position:absolute;left:35%;top:2.6%;width:30%;aspect-ratio:124 / 36;border-radius:999px;background:#000}
.punch-o{position:absolute;left:48.4%;top:2.1%;width:3.4%;aspect-ratio:1;border-radius:50%;background:#000;box-shadow:0 0 0 1px #1A1A1C}
.vid{grid-column:1 / -1;display:flex;flex-direction:column;gap:22px}
.video{display:none;position:relative;aspect-ratio:16 / 9;flex-direction:column;justify-content:space-between;gap:16px;padding:clamp(18px,2.4 * var(--u),32px);border-radius:28px;background:#121213;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);text-decoration:none}
.fl[data-video=walkthrough] .v-walkthrough,.fl[data-video=demo] .v-demo,.fl[data-video=mv] .v-mv{display:flex}
.video .mono{color:#A1A1A6}
.v-title{max-width:13ch;font-size:clamp(28px,7 * var(--u),46px);line-height:1.02;font-weight:600;letter-spacing:-.035em;text-wrap:balance}
.v-go{display:flex;align-items:center;gap:14px;font-size:15px;font-weight:600}
.v-play{width:clamp(52px,5 * var(--u),72px);height:clamp(52px,5 * var(--u),72px);border-radius:50%;background:#F5F5F2;color:#0B0B0C;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.video:hover .v-play{transform:scale(1.06)}
.facts{list-style:none;margin:0;padding:0}
.facts li{padding:14px 0;border-top:1px solid rgba(255,255,255,.08);font-size:16px;line-height:23px;color:#A1A1A6}
.facts b{color:#F5F5F2;font-weight:600}
.slot-live-sm{margin-top:12px}
@container (min-width:760px) and (max-width:1179.98px){
  .app-grid{grid-template-columns:repeat(2,minmax(0,260px));justify-content:start;gap:28px}
  .vid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:start;width:calc(100cqi - 2 * var(--pad))}
  .video{aspect-ratio:auto;min-height:220px}
  .v-title{font-size:clamp(28px,3.6 * var(--u),46px)}
}
@container (min-width:1180px){
  .app-grid{grid-template-columns:300px 300px minmax(0,1fr);gap:40px}
  .vid{grid-column:auto}
  .v-title{font-size:clamp(28px,2.9 * var(--u),46px)}
}

/* safe */
.safe .sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ext{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:600;text-decoration:underline;text-decoration-color:rgba(245,245,242,.4);text-underline-offset:4px}
.rows{margin:24px 0 0;display:grid;grid-template-columns:minmax(0,1fr);column-gap:40px}
.rows>div{padding:18px 0;border-top:1px solid rgba(255,255,255,.08)}
.rows dt{font-size:clamp(19px,4.6 * var(--u),22px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.rows dd{margin:6px 0 0;max-width:520px;font-size:16px;line-height:23px;color:#A1A1A6;text-wrap:pretty}
@container (min-width:760px){.rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:1180px){.safe{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:64px;align-items:start}.rows{margin-top:0}}

/* questions */
.qs{margin-top:24px;max-width:900px}
.qs details{border-top:1px solid rgba(255,255,255,.08)}
.qs details:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.qs summary{min-height:64px;padding:12px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer;font-size:clamp(19px,4.6 * var(--u),24px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.qs summary::-webkit-details-marker{display:none}
.plus{position:relative;width:34px;height:34px;flex:none;border-radius:50%;background:#1C1C1E;transition:transform .25s}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:2px;margin:-1px 0 0 -6.5px;border-radius:1px;background:#F5F5F2}
.plus::after{transform:rotate(90deg)}
.qs details[open] .plus{transform:rotate(45deg)}
.qs details p{margin:0 0 20px;max-width:640px;font-size:16px;line-height:24px;color:#A1A1A6;text-wrap:pretty}
@container (min-width:1180px){.faq{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:64px;align-items:start}.qs{margin-top:0}}

/* android */
.droid{scroll-margin-top:16px}
.droid-body{margin-top:24px;display:grid;gap:22px}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:14px;padding:16px 0;border-top:1px solid rgba(255,255,255,.08)}
.steps .sn{grid-row:1 / 3;width:32px;height:32px;border-radius:50%;background:#1C1C1E;display:flex;align-items:center;justify-content:center;margin:0;font:500 13px "Geist Mono",ui-monospace,monospace;color:#A1A1A6}
.steps b{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.steps span{margin-top:3px;font-size:16px;line-height:23px;color:#A1A1A6}
.droid-side{display:flex;flex-direction:column;align-items:stretch;gap:14px;max-width:380px}
.xiaomi{margin:0;padding:16px 18px;border-radius:24px;background:#161617;font-size:16px;line-height:23px;color:#A1A1A6}
.xiaomi b{color:#F5F5F2;font-weight:600}
.droid .btn-ctl{flex:none}
@container (min-width:760px){.droid-body{grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:48px;align-items:start}}

/* bring a fren: the lime close, with the news and the footer */
.close{margin-top:clamp(80px,11 * var(--u),150px);background:#C8FF3D;color:#0B0B0C}
.close a{color:#0B0B0C}
.close-in{max-width:1424px;margin:0 auto;padding:clamp(56px,8 * var(--u),112px) var(--pad) 0;display:grid;gap:8px;align-items:end}
.close h2{margin:0;font-size:clamp(52px,13 * var(--u),124px);line-height:.92;font-weight:600;letter-spacing:-.045em}
.close-main p{margin:16px 0 0;max-width:520px;font-size:clamp(17px,4.4 * var(--u),22px);line-height:1.45;color:rgba(11,11,12,.72);text-wrap:pretty}
.share{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.btn-onlime{display:inline-flex;align-items:center;gap:10px;height:60px;padding:0 26px 0 22px;border:0;border-radius:999px;background:#0B0B0C;color:#F5F5F2;font-size:17px;font-weight:600;cursor:pointer;transition:transform .12s}
.l-copy,.l-done,.i-copy{display:none}
.fl[data-platform=desktop] .l-share,.fl[data-platform=desktop] .i-share{display:none}
.fl[data-platform=desktop] .l-copy,.fl[data-platform=desktop] .i-copy{display:inline}
.btn-onlime.is-done .l-share,.btn-onlime.is-done .l-copy{display:none!important}
.btn-onlime.is-done .l-done{display:inline}
.share-url{font-size:14px;color:rgba(11,11,12,.72)}
.close-fren{position:relative;justify-self:end;width:clamp(150px,40 * var(--u),300px);margin-top:-8px}
.bubble-ink{right:68%;top:2%;background:#0B0B0C;color:#F5F5F2}
@container (min-width:760px){.close-in{grid-template-columns:minmax(0,1fr) auto;gap:40px}.close-fren{margin-top:0}}

.news{position:relative;max-width:1424px;margin:clamp(28px,4 * var(--u),48px) auto 0;padding:24px var(--pad) 0;display:grid;gap:14px 40px}
.news::before,.ft::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:rgba(11,11,12,.16)}
.news-txt b{display:block;font-size:17px;font-weight:600}
.news-txt span{display:block;margin-top:2px;max-width:520px;font-size:15px;line-height:21px;color:rgba(11,11,12,.72)}
.news-form{display:flex;flex-wrap:wrap;gap:10px;max-width:560px}
.news-form input[type=email]{flex:999 1 240px;min-width:0;height:56px;padding:0 22px;border:0;border-radius:999px;background:rgba(11,11,12,.08);color:#0B0B0C;font:400 17px Geist,"Geist Fallback",system-ui,sans-serif;outline:none}
.news-form input::placeholder{color:rgba(11,11,12,.5)}
.news-form input[type=email]:focus,.fl[data-news=invalid] .news-form input[type=email]{box-shadow:inset 0 0 0 1.5px #0B0B0C}
.news-btn{flex:1 1 180px;min-width:180px;height:56px;border:0;border-radius:999px;background:#0B0B0C;color:#F5F5F2;font-size:17px;font-weight:600;white-space:nowrap;cursor:pointer}
.news-btn:disabled{opacity:.7;cursor:default}
.t-busy{display:none}
.fl[data-news=sending] .t-idle{display:none}
.fl[data-news=sending] .t-busy{display:inline}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.news-msg{display:none;margin:0;font-size:15px;line-height:21px;font-weight:500;color:#0B0B0C}
.fl[data-news=invalid] .m-invalid,.fl[data-news=error] .m-error{display:block}
.news-done{display:none;align-items:center;gap:14px;max-width:560px;padding:14px 18px 14px 14px;border-radius:24px;background:#0B0B0C;color:#F5F5F2}
.fl[data-news=done] .news-done{display:flex}
.fl[data-news=done] .news-form{display:none}
.tick{width:36px;height:36px;flex:none;border-radius:50%;background:#C8FF3D;color:#0B0B0C;display:flex;align-items:center;justify-content:center}
.news-done b{display:block;font-size:17px}
.news-done span span{font-size:15px;line-height:21px;color:#A1A1A6}
@container (min-width:760px){.news{grid-template-columns:minmax(0,1fr) minmax(0,560px);align-items:center}.news-msg,.news-done{grid-column:2}}

.ft{position:relative;max-width:1424px;margin:clamp(36px,5 * var(--u),64px) auto 0;padding:20px var(--pad) 28px;font:500 13px/18px "Geist Mono",ui-monospace,monospace;color:rgba(11,11,12,.72)}
.ft-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.logo-ink{gap:8px;color:#0B0B0C}
.logo-ink span{font-family:Geist,"Geist Fallback",system-ui,sans-serif;font-size:18px}
.ft-links{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:8px}
.ft-links a{min-height:44px;display:inline-flex;align-items:center;color:rgba(11,11,12,.72);text-decoration:none}
.ft-links a:hover{color:#0B0B0C}
.ft-bot{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:4px}

/* reduced motion: still, with nothing lost */
@media (prefers-reduced-motion:reduce){.fl *,.fl *::before,.fl *::after{animation:none!important;transition:none!important}}
.fl[data-motion=reduce] *,.fl[data-motion=reduce] *::before,.fl[data-motion=reduce] *::after{animation:none!important;transition:none!important}