:root{--paper:#0a0a0b;--card:#141518;--card2:#1c1e23;--ink:#f5f7fa;--slate:#9aa4af;--line:#2a2d33;--blue:#0a84fe;--blue-ink:#5aacff;--red:#ff453a;--green:#30d158;color-scheme:dark;--head:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;--body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;--r:14px;
--wm:url("https://firebasestorage.googleapis.com/v0/b/yappapp-c5e15.appspot.com/o/brand%2Fyapp-logo.png?alt=media&token=8b086d44-dde8-463d-860e-c10ed8b29f56");--wmb:url("https://firebasestorage.googleapis.com/v0/b/yappapp-c5e15.appspot.com/o/brand%2Fyapp-bubble.png?alt=media&token=fe902326-00c7-407c-a688-7bdbd4df86be")}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 var(--body);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img{display:block;max-width:100%}
a{color:var(--blue-ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
h1,h2,h3{font-family:var(--head);margin:0}

/* header */
.bar{position:sticky;top:0;z-index:30;background:#000;border-bottom:1px solid #1b1d21}
.bar .wrap{display:flex;align-items:center;gap:20px;min-height:60px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{height:60px;width:auto}.car{position:relative;border-radius:16px;overflow:hidden;background:#0b0b0d;margin:0 0 18px}.car .track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}.car .track::-webkit-scrollbar{display:none}.car .slide{flex:0 0 100%;scroll-snap-align:center;position:relative;aspect-ratio:4/3;background:#111;display:flex;align-items:center;justify-content:center}.car .slide img{width:100%;height:100%;object-fit:cover}.car .slide.more{flex-direction:column;gap:12px;text-align:center;padding:20px}.car .cnt{position:absolute;right:10px;top:10px;background:rgba(0,0,0,.65);color:#fff;font:600 12px/1 system-ui;padding:6px 9px;border-radius:99px}.car .vp{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.65);color:#fff;font:600 12px/1 system-ui;padding:6px 9px;border-radius:99px}.mx{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.mxc{font:600 11px/1 system-ui;background:#1c1f26;color:#cfd6e4;border:1px solid #2c313b;border-radius:99px;padding:5px 8px}.mxb{display:inline-block;font:600 12px/1 system-ui;background:#2f7cf6;color:#fff;border-radius:8px;padding:7px 10px;cursor:pointer;text-decoration:none;border:0}.mxb.bad{background:#3a1d1d;color:#ff9b9b}.mxa{display:flex;gap:6px;flex-wrap:wrap}.mbox{margin:18px 0;padding:14px 16px;border:1px solid #2c313b;border-radius:12px;background:#12141a}.mbox h2{margin:0 0 8px;font-size:16px}.mxc-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.mbox dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 12px;font-size:14px}.mbox dt{color:#8b93a3}.mbox dd{margin:0}.flist{list-style:none;margin:8px 0 0;padding:0}.flist li{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid #22252c;font-size:14px}.flist .fn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flist .rm{background:none;border:0;color:#ff9b9b;cursor:pointer}.ck{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45}.ck input{margin-top:3px;width:18px;height:18px}input[type=file]{padding:10px;width:100%}.f.chk[hidden]{display:none}
.nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav::-webkit-scrollbar{display:none}
.nav a{color:#dfe5ec;text-decoration:none;font-weight:600;font-size:15.5px;padding:8px 12px;border-radius:999px;white-space:nowrap}
.nav a:hover{background:#16181c}
.nav a[aria-current=page]{background:var(--card2);color:#fff}
@media (max-width:760px){.bar .wrap{gap:4px}.nav{margin-left:0;width:100%;order:3;padding-bottom:2px}.logo img{height:46px}}

/* hero */
.hero{padding:34px 0 8px}
.hero h1{font:800 clamp(30px,5vw,48px)/1.05 var(--head);font-stretch:80%;letter-spacing:-.4px;max-width:20ch}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero p{color:var(--slate);max-width:56ch;margin:12px 0 0;font-size:18px}
.pulse{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;margin-top:14px;color:var(--ink)}
.pulse:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--blue);animation:ping 2.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(10,132,254,.5)}70%{box-shadow:0 0 0 10px rgba(10,132,254,0)}100%{box-shadow:0 0 0 0 rgba(10,132,254,0)}}

/* chips */
#chips{padding:14px 0 4px}
.chiprow{display:flex;gap:8px;align-items:center;overflow-x:auto;padding:4px 0;scrollbar-width:none}
.chiprow::-webkit-scrollbar{display:none}
.chiplabel{color:var(--slate);font-size:14px;font-weight:600;flex:0 0 auto;min-width:64px}
.chip{flex:0 0 auto;border:1px solid var(--line);background:var(--card);color:var(--slate);border-radius:999px;padding:6px 14px;font:600 14.5px var(--body);cursor:pointer;min-height:36px}
.chip:hover{color:var(--ink)}
.chip.on{background:#fff;border-color:#fff;color:#000}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:24px 20px;padding:18px 0 40px}
.card{display:block;text-decoration:none;color:inherit}
.card[hidden]{display:none}
.shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:#1a1c20;border-radius:12px;user-select:none;-webkit-user-select:none}
.shot img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;transition:transform .5s ease}
.card:hover .shot img{transform:scale(1.03)}
.shot:after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--wm) center/46% auto no-repeat;opacity:.2}
.shot:before{content:"";position:absolute;right:3%;bottom:4%;width:5.5%;min-width:22px;aspect-ratio:200/156;z-index:1;pointer-events:none;background:var(--wmb) center/contain no-repeat}
.cbody{padding-top:10px}
.card h3{font:700 19px/1.22 var(--head);font-stretch:90%;margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card:hover h3{color:var(--blue-ink)}
.meta{color:var(--slate);font-size:14.5px;display:flex;gap:6px 12px;flex-wrap:wrap}
.meta .area{color:var(--blue-ink);font-weight:700}
.meta time{font-variant-numeric:tabular-nums}
.empty{color:var(--slate);padding:30px 0}
.empty b{display:block;color:var(--ink);font:800 22px var(--head);margin-bottom:6px}

/* article */
.page{max-width:760px;margin:0 auto;padding:30px 16px 56px}
.page.wide{max-width:900px}
.page h1{font:800 clamp(28px,4.6vw,42px)/1.1 var(--head);font-stretch:85%;letter-spacing:-.3px;margin:0 0 10px}
.page h2{font:800 22px/1.2 var(--head);margin:30px 0 8px}
.page .lead{font-size:19px;color:#cfd6de}
.page .meta{margin:0 0 16px}
.shot.big{border-radius:var(--r);margin:0 0 22px;aspect-ratio:16/10;max-height:70vh}
.prose p{margin:0 0 1em;color:#dfe5ec;font-size:18px}
.crumbs{font-size:14.5px;margin-bottom:14px}
.legal h2{font-size:20px;margin:26px 0 6px}
.legal p{color:#cdd4dc;font-size:16.5px;margin:0 0 .9em}

/* buttons, store badges, CTA */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);color:#fff;border:0;border-radius:999px;padding:12px 22px;font:700 16.5px var(--body);text-decoration:none;cursor:pointer;min-height:46px}
.btn:hover{filter:brightness(1.1)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px #3a3e45;color:#fff}
.badges{display:flex;gap:12px;flex-wrap:wrap}
.badge{display:inline-flex;flex-direction:column;justify-content:center;background:#000;color:#fff;text-decoration:none;border:1px solid #4a4e56;border-radius:12px;padding:6px 18px 7px;min-height:52px;min-width:168px;line-height:1.15}
.badge small{font-size:12px;color:#c9d0d8}
.badge b{font:700 20px var(--head);font-stretch:90%}
.badge:hover{border-color:#fff}
.appcta{margin:34px 0 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px}
.appcta h2{margin:0 0 6px}
.appcta p{margin:0 0 16px;color:#cfd6de}
.band{border-top:1px solid var(--line);background:var(--card);padding:34px 0}
.band .wrap{display:flex;gap:20px 40px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.band h2{font:800 24px/1.15 var(--head)}
.band p{margin:6px 0 0;color:var(--slate);max-width:48ch}

/* cards/notes on info pages */
.note{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin:18px 0}
.quote{border-left:4px solid var(--blue);padding:6px 0 6px 18px;margin:20px 0;font:600 clamp(20px,3vw,26px)/1.35 var(--head);font-stretch:92%}
.list{padding-left:1.2em}.list li{margin:.4em 0}

/* form */
form .f{margin:0 0 16px}
label{display:block;font-weight:700;font-size:15.5px;margin-bottom:5px}
label small{font-weight:400;color:var(--slate)}
input,textarea{width:100%;background:var(--card2);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:17px var(--body)}
textarea{min-height:170px;resize:vertical}
input:focus,textarea:focus{border-color:var(--blue)}
.hint{color:var(--slate);font-size:14.5px;margin:4px 0 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formmsg{min-height:1.4em;margin:10px 0 0;font-weight:600}
.formmsg.bad{color:#ff8d85}
.done{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 20px}
.done h2{margin-top:0}
.done:focus{outline:none}

/* footer */
footer{background:#000;border-top:1px solid var(--line);color:var(--slate);font-size:15px;padding:30px 0 40px;margin-top:0}
footer .wrap{display:flex;flex-direction:column;gap:20px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 22px}
footer a{color:#d6dde5;text-decoration:none}
footer a:hover{text-decoration:underline}
footer .copy{font-size:14px}
.badge{position:relative;transition:transform .15s,box-shadow .15s,border-color .15s;background:linear-gradient(180deg,#15171b,#000);padding-left:62px;min-width:190px;min-height:58px}.badge:hover,.badge:focus-visible{transform:translateY(-3px);border-color:#5aacff;box-shadow:0 10px 28px rgba(10,132,254,.35)}.badge:active{transform:translateY(0)}.badge:before{content:"";position:absolute;left:18px;top:50%;width:30px;height:30px;margin-top:-15px;background:#fff;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}.badge.apple{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v11m0 0l-4-4m4 4l4-4M5 18h14' stroke='%23000' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}.badge.play{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3.5l14 8.5-14 8.5z' fill='%23000'/%3E%3C/svg%3E")}.badge.play:before{background:#34d399}@media(prefers-reduced-motion:reduce){.badge{transition:none}}
.hero3{position:relative;background:#000;overflow:hidden;border-bottom:1px solid #15171a}.hbg{position:absolute;inset:0;pointer-events:none;contain:strict}.mont{position:absolute;inset:-20px;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:50%;opacity:.08;filter:blur(14px) saturate(1.1);transform:translateZ(0)}.mont i{background-size:cover;background-position:center;display:block}.mapfx{position:absolute;inset:0;width:100%;height:100%}.mapfx .rg{transform-origin:center;transform-box:fill-box;animation:rgp 6s ease-in-out infinite}@keyframes rgp{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.hrow{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;min-height:300px}.hcopy{padding:34px 0 36px;max-width:600px;align-self:center}.kick{display:inline-block;font:600 13px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-ink);margin-bottom:10px}.hero3 h1{font:800 clamp(32px,5vw,50px)/1.04 var(--head);font-stretch:80%;letter-spacing:-.4px}.hero3 h1 em{font-style:normal;color:var(--blue)}.hero3 .lead{color:#b6bec8;margin:12px 0 18px;font-size:18px;max-width:52ch}
.phones{--u:1px;position:relative;flex:0 0 330px;width:330px;height:300px;margin-right:10px}.ph{position:absolute;bottom:-70px;border-radius:calc(34*var(--u));background:#0b0b0d;padding:calc(5*var(--u));box-shadow:0 0 0 1.5px #3a3d44,0 18px 40px rgba(0,0,0,.6)}.ph.ios{width:calc(188*var(--u));left:6px;z-index:2;transform:rotate(4deg);border-radius:calc(38*var(--u));background:#101114;box-shadow:0 0 0 2px #50545c,0 0 0 4px #15161a,0 20px 44px rgba(0,0,0,.7)}.ph.and{width:calc(176*var(--u));right:0;bottom:-96px;z-index:1;transform:rotate(-9deg);box-shadow:0 0 0 2px #3c4047,0 16px 36px rgba(0,0,0,.6)}.ph .scr{position:relative;overflow:hidden;border-radius:calc(33*var(--u));background:#000}.ph.and .scr{border-radius:calc(26*var(--u))}
.px{container-type:inline-size;aspect-ratio:457/986;overflow:hidden;position:relative;background:#000}.px img{position:absolute;max-width:none;width:139.9cqw;left:-17.9cqw;top:-88cqw;height:auto}.isl{position:absolute;z-index:3;top:calc(9*var(--u));left:50%;width:calc(54*var(--u));height:calc(16*var(--u));margin-left:calc(-27*var(--u));background:#000;border-radius:99px}.sb{position:absolute;z-index:3;left:0;right:0;top:0;height:calc(22*var(--u));background:#000}.sb .pun{position:absolute;left:50%;top:calc(6*var(--u));width:calc(9*var(--u));height:calc(9*var(--u));margin-left:calc(-4.5*var(--u));border-radius:50%;background:#15171c;box-shadow:inset 0 0 0 1.5px #262a31}.ph.and .px{margin-top:calc(22*var(--u))}
.btn1,.btn2,.btn3,.btn4{position:absolute;background:#4a4e56;width:3px;border-radius:2px}.ios .btn1{left:-4px;top:70px;height:22px}.ios .btn2{left:-4px;top:104px;height:36px}.ios .btn3{left:-4px;top:148px;height:36px}.ios .btn4{right:-4px;top:116px;height:56px}.and .btn1{right:-4px;top:80px;height:34px}.and .btn2{right:-4px;top:126px;height:50px}
@media (max-width:860px){.hrow{flex-direction:column;align-items:stretch;gap:0}.hcopy{padding:26px 0 8px}.phones{flex:none;width:100%;max-width:330px;height:200px;margin:0 auto}.ph.ios{left:calc(50% - 150px);bottom:-216px}.ph.and{right:calc(50% - 150px);bottom:-228px}}
.finder{padding:22px 0 0}.lat{font:800 clamp(26px,4vw,34px)/1.1 var(--head);font-stretch:85%;margin-bottom:12px}.sbar{display:flex;gap:10px}.sbar input{flex:1;min-width:0;height:52px;border-radius:999px;border:1.5px solid #3a3e45;background:var(--card);color:var(--ink);font:17px var(--body);padding:0 20px}.sbar input:focus{border-color:var(--blue);outline:0;box-shadow:0 0 0 3px rgba(10,132,254,.3)}.sbar .btn{border-radius:999px;padding:0 26px;height:52px}
.filters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;padding:12px 0 2px}.sel{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--slate);font-weight:600}.sel select,.sel input{height:40px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:15px var(--body);padding:0 10px;min-width:150px}.cust{display:flex;gap:10px}.clr{height:40px;background:none;border:0;color:var(--blue-ink);font:600 15px var(--body);cursor:pointer;text-decoration:underline}.rcount{color:var(--slate);font-size:14.5px;margin:6px 0 0;min-height:22px}.more{text-align:center;padding:0 0 36px}.more .hint{color:var(--slate);font-size:14.5px;margin:8px 0 0}
.tell{display:grid;grid-template-columns:1.2fr 1fr;gap:20px 36px;align-items:center;border:1px solid var(--line);background:var(--card);border-radius:20px;padding:30px;margin:10px 0 40px}.tell h2{font:800 28px/1.12 var(--head);font-stretch:85%}.tell p{color:var(--slate);margin:10px 0 0}.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}.steps li{display:flex;align-items:center;gap:12px;font-weight:600}.steps b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;font:800 15px var(--head)}.tr{grid-column:1/-1;display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:760px){.tell{grid-template-columns:1fr;padding:22px}.sbar .btn{padding:0 18px}.sel select,.sel input{min-width:130px}}
@media (prefers-reduced-motion:reduce){.mapfx .rg{animation:none}*{scroll-behavior:auto!important}}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}