:root{--ink:#1c1730;--muted:#736b83;--paper:#f8f7fb;--lavender:#d6c7ff;--violet:#8669d6;--mint:#ccefe5;--line:rgba(41,31,73,.15);--shell:1160px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;background:#211b36}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Pretendard,"Apple SD Gothic Neo",sans-serif;word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #8460ed;outline-offset:4px}[hidden]{display:none!important}
.site-header{position:fixed;z-index:100;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;height:76px;padding:0 max(28px,calc((100vw - var(--shell))/2));background:rgba(248,247,251,.78);backdrop-filter:blur(18px);transition:transform .32s cubic-bezier(.22,1,.36,1),background .25s ease,box-shadow .25s ease}
.site-header.is-scrolled{background:rgba(248,247,251,.94);box-shadow:0 1px 0 var(--line)}.site-header.is-hidden:not(.menu-open){transform:translateY(-105%)}
.brand{display:inline-flex;align-items:center;justify-content:center;width:58px;height:40px;flex:none}.brand img{display:block;width:58px;height:auto}
.site-nav{display:flex;align-items:center;gap:34px;font-size:14px;font-weight:700}.site-nav>a:not(.nav-pill){transition:color .2s ease}.site-nav>a:not(.nav-pill):hover{color:var(--violet)}
.nav-pill{display:inline-flex;align-items:center;gap:18px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff}.nav-pill:hover{background:#584499}.menu-toggle{display:none}
main{position:relative;z-index:2;background:var(--paper)}
.hero{position:relative;display:grid;place-items:center;min-height:clamp(660px,calc(100svh - 24px),900px);margin:12px 18px 0;overflow:hidden;border-radius:32px 32px 84px 84px;background:#e9e1fa;isolation:isolate}
.hero-media{position:absolute;inset:0;border:0!important;border-radius:inherit;background:radial-gradient(circle at 15% 75%,#b5eddc 0,transparent 28%),radial-gradient(circle at 85% 25%,#cdc1ff 0,transparent 30%),linear-gradient(130deg,#e9e3fa,#f4e4ef 54%,#d5edec)}
.asset-slot{position:relative;display:grid;place-items:center;overflow:hidden;border:1.5px dashed rgba(73,57,115,.36);background:linear-gradient(140deg,rgba(216,205,245,.58),rgba(236,241,248,.65));color:#695985}
.asset-slot:after{content:"";position:absolute;inset:12px;border:1px solid rgba(88,68,135,.12);border-radius:inherit;pointer-events:none}.asset-label{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 15px;border:1px solid rgba(75,57,117,.22);border-radius:12px;background:rgba(255,255,255,.62);color:#685784;text-align:center;font-size:11px;font-weight:850;letter-spacing:.12em;white-space:nowrap;backdrop-filter:blur(8px)}.asset-label small{font-size:10px;font-weight:650;letter-spacing:.02em;text-transform:none}
.hero .hero-media{position:absolute;inset:0;width:100%;height:100%}
.hero-media>.asset-label{position:absolute;top:96px;left:42px;align-items:flex-start}.hero-media:after{inset:24px;border-radius:24px 24px 64px 64px}.hero-shape{position:absolute;display:block;border:1px dashed rgba(95,75,144,.32);border-radius:38% 62% 54% 46%;background:rgba(255,255,255,.24)}.hero-shape-a{width:34vw;height:34vw;left:-5%;bottom:-18%;transform:rotate(18deg)}.hero-shape-b{width:25vw;height:25vw;right:-3%;top:8%;transform:rotate(-24deg)}.hero-shape-c{width:14vw;height:14vw;right:12%;bottom:8%;border-radius:50%;background:rgba(153,235,211,.25)}
.eyebrow{display:block;font-size:12px;font-weight:850;letter-spacing:.15em}.scroll-cue{position:absolute;z-index:4;bottom:28px;left:50%;display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(28,23,48,.25);border-radius:50%;font-size:24px;transform:translateX(-50%);animation:cue-bob 2.4s ease-in-out infinite}@keyframes cue-bob{50%{translate:0 8px}}
.intro{position:relative;overflow:hidden;padding:145px 24px 120px;background:#fff}.section-heading{text-align:center}.section-heading .eyebrow{color:#8063bd}.section-heading h2{margin:22px auto 0;max-width:900px;font-size:clamp(42px,5vw,70px);font-weight:850;line-height:1.25;letter-spacing:-.065em}.section-heading p{margin:22px auto 0;color:var(--muted);font-size:18px;line-height:1.7}.text-link{display:inline-flex;align-items:center;gap:16px;margin-top:26px;padding-bottom:5px;border-bottom:1px solid currentColor;font-size:15px;font-weight:760}.text-link:hover{color:var(--violet)}
.product-universe{position:relative;width:min(100%,1120px);height:800px;margin:30px auto 0}.orbit{position:absolute;top:48%;left:50%;border:1px solid rgba(134,105,214,.17);border-radius:50%;transform:translate(-50%,-50%)}.orbit-outer{width:88%;height:70%}.orbit-inner{width:64%;height:48%}
.character-slot{position:absolute;z-index:2;width:150px;aspect-ratio:1;border-radius:42px;box-shadow:0 18px 40px rgba(56,41,101,.08);transform:translateY(var(--float-y,0));transition:transform .6s cubic-bezier(.22,1,.36,1)}.character-slot .asset-label{font-size:9px;padding:7px}.character-slot .asset-label small{font-size:8px}.character-one{top:12%;left:13%;rotate:-10deg}.character-two{top:10%;right:15%;rotate:11deg}.character-three{top:43%;left:0;rotate:7deg}.character-four{top:44%;right:0;rotate:-8deg}.character-five{bottom:9%;left:15%;rotate:12deg}
.phone-shell{position:absolute;z-index:3;top:7%;left:50%;width:302px;height:636px;padding:16px 14px 18px;border:7px solid #2a2541;border-radius:48px;background:#faf9fd;box-shadow:0 36px 90px rgba(44,29,95,.2);transform:translateX(-50%)}.phone-top{display:flex;align-items:center;justify-content:space-between;height:24px;padding:0 5px;font-size:11px;font-weight:750}.phone-island{width:74px;height:20px;border-radius:999px;background:#2a2541}.phone-title{display:flex;align-items:center;justify-content:space-between;height:54px;font-size:16px}.phone-title>span{font-size:27px}.phone-demo{height:470px}.demo-scene{width:100%;height:100%;border-radius:25px;background:radial-gradient(circle at 45% 35%,#f7dcec,transparent 35%),linear-gradient(145deg,#e3d9fc,#d9edf2)}.demo-scene:nth-child(2){background:radial-gradient(circle at 60% 35%,#d2f2e7,transparent 38%),linear-gradient(145deg,#d8ecfa,#eadff6)}.demo-scene:nth-child(3){background:radial-gradient(circle at 35% 60%,#f7e9d5,transparent 40%),linear-gradient(145deg,#f7dfe9,#e4dffc)}.demo-scene .asset-label{font-size:10px}.phone-input{display:flex;justify-content:space-between;align-items:center;height:42px;margin-top:10px;padding:0 14px;border-radius:999px;background:#eeeaf6;color:#9187a4;font-size:11px}.phone-input span{color:var(--violet);font-size:19px}
.feature-picker{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;max-width:1000px;margin:-40px auto 0}.feature-picker button{min-height:50px;padding:0 22px;border:1px solid #d8d3e2;border-radius:999px;background:#fff;color:#6f667b;font-size:14px;font-weight:750;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s}.feature-picker button:hover{border-color:#8673b4;transform:translateY(-3px)}.feature-picker button[aria-selected=true]{border-color:var(--ink);background:var(--ink);color:#fff}.feature-copy{min-height:36px;margin-top:22px;text-align:center}.feature-copy p{margin:0;color:var(--muted);font-size:15px}
.story{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(50px,8vw,120px);min-height:750px;padding:90px max(36px,calc((100vw - var(--shell))/2));background:radial-gradient(circle at 12% 35%,#40315f,transparent 40%),#211b36;color:#fff}.story-media{height:570px;border-color:rgba(213,195,255,.35);border-radius:26px;background:linear-gradient(160deg,#614e89,#2d254b 65%,#1c1730);color:#e2d9f3}.story-media:after{border-color:rgba(213,195,255,.18)}.story-media .asset-label{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)}.story-copy .eyebrow{color:#c1aef2}.story h2{margin:20px 0 0;font-size:clamp(38px,4vw,60px);line-height:1.3;letter-spacing:-.06em}.story-copy p{margin:22px 0 0;color:#c7bfd5;font-size:17px;line-height:1.7}.story .text-link{margin-top:32px}

.faq-inline{margin-top:116px}.faq-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:30px}.faq-heading h2{margin:0;font-size:clamp(30px,3vw,42px);letter-spacing:-.05em}.faq-heading .text-link{margin:0}.faq-list{border-top:1px solid rgba(255,255,255,.22)}.faq-list details{border-bottom:1px solid rgba(255,255,255,.22)}.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:86px;list-style:none;cursor:pointer;font-size:19px;font-weight:700}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{font-size:29px;font-weight:350;transition:transform .25s}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list details p{max-width:720px;margin:0;padding:0 0 26px;color:#bdb3ce;font-size:15px;line-height:1.8}.faq-list details p a{text-decoration:underline;text-underline-offset:3px}
.outro{position:sticky;z-index:1;bottom:0;min-height:600px;background:#d8c8fa;color:var(--ink)}.outro-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:420px;padding:90px 24px;text-align:center}.outro-cta .eyebrow{color:#665092}.outro h2{margin:20px 0 0;font-size:clamp(44px,5.5vw,78px);line-height:1.18;letter-spacing:-.07em}.site-footer{padding:38px max(28px,calc((100vw - var(--shell))/2)) 30px;border-top:1px solid rgba(28,23,48,.17);background:#d8c8fa}.footer-top,.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:28px}.footer-top nav{display:flex;flex-wrap:wrap;gap:14px 24px;font-size:13px;font-weight:650}.footer-top nav a:hover{text-decoration:underline;text-underline-offset:3px}.footer-bottom{margin-top:34px;color:#5f5378;font-size:11px}
[data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}[data-reveal].is-visible{opacity:1;transform:translateY(0)}
@media(max-width:1000px){.site-header{padding:0 28px}.site-nav{gap:22px}.character-one{left:5%}.character-two{right:5%}.character-three{left:-2%}.character-four{right:-2%}.character-five{left:7%}.story{padding-inline:48px}}
@media(max-width:700px){html{scroll-padding-top:70px}.site-header{height:68px;padding:0 20px}.brand{font-size:25px}.menu-toggle{position:relative;z-index:2;display:block;width:44px;height:44px;border:0;background:transparent;cursor:pointer}.menu-toggle span{position:absolute;left:9px;width:26px;height:2px;background:var(--ink);transition:transform .25s,top .25s}.menu-toggle span:first-child{top:17px}.menu-toggle span:last-child{top:26px}.menu-toggle[aria-expanded=true] span:first-child{top:21px;transform:rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{top:21px;transform:rotate(-45deg)}.site-nav{position:fixed;top:68px;left:0;right:0;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:18px 22px 28px;background:#f8f7fb;box-shadow:0 20px 30px rgba(28,23,48,.12);visibility:hidden;opacity:0;transform:translateY(-12px);transition:visibility .25s,opacity .25s,transform .25s}.site-nav.is-open{visibility:visible;opacity:1;transform:translateY(0)}.site-nav>a{display:flex;align-items:center;min-height:55px;border-bottom:1px solid var(--line);font-size:19px}.site-nav .nav-pill{justify-content:space-between;margin-top:18px;padding-inline:20px;border:0;font-size:16px}.hero{min-height:720px;margin:8px 8px 0;border-radius:22px 22px 50px 50px}.hero-media>.asset-label{top:78px;left:16px}.hero-media:after{inset:12px;border-radius:14px 14px 40px 40px}.hero-shape-a{width:65vw;height:65vw}.hero-shape-b{width:52vw;height:52vw}.hero-shape-c{width:35vw;height:35vw}.intro{padding:104px 18px 95px}.section-heading h2{font-size:clamp(35px,8vw,52px)}.section-heading p{font-size:15px}.product-universe{height:720px;margin-top:22px}.phone-shell{top:11%;width:265px;height:565px}.phone-demo{height:405px}.character-slot{width:100px;border-radius:26px}.character-one{top:10%;left:-2%}.character-two{top:14%;right:-2%}.character-three{top:49%;left:-3%}.character-four{top:50%;right:-3%}.character-five{bottom:4%;left:2%}.character-slot .asset-label{font-size:7px;white-space:normal}.character-slot .asset-label small{font-size:7px}.feature-picker{margin:-2px auto 0;gap:8px}.feature-picker button{min-height:44px;padding:0 13px;font-size:12px}.feature-copy p{font-size:13px}.story{grid-template-columns:1fr;gap:35px;padding:80px 28px 95px}.story-media{height:440px;max-width:520px;width:100%;margin:auto}.story-copy{max-width:520px;margin:auto}.story h2{font-size:clamp(36px,7vw,50px)}.faq-inline{margin-top:80px}.faq-list summary{min-height:75px;font-size:16px}.outro{min-height:560px}.outro-cta{min-height:410px}.outro h2{font-size:clamp(40px,8vw,62px)}.site-footer{padding:30px 24px}.footer-top,.footer-bottom{align-items:flex-start;flex-direction:column}.footer-top nav{gap:12px 18px}.footer-bottom{gap:7px;margin-top:28px}}
@media(max-width:430px){.hero{min-height:690px}.product-universe{height:620px}.phone-shell{top:10%;width:225px;height:490px;padding:12px 10px;border-width:5px;border-radius:37px}.phone-title{height:43px;font-size:13px}.phone-title>span{font-size:21px}.phone-demo{height:350px}.phone-input{height:36px;margin-top:7px}.character-slot{width:78px;border-radius:20px}.character-one{left:0;top:7%}.character-two{right:0;top:12%}.character-three{left:-3%;top:51%}.character-four{right:-3%;top:52%}.character-five{left:4%;bottom:5%}.feature-picker{display:grid;grid-template-columns:1fr 1fr;width:min(100%,340px)}.feature-picker button:last-child{grid-column:1/-1}.story-media{height:350px}.faq-heading{align-items:start;flex-direction:column}.faq-heading .text-link{margin-top:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}[data-reveal]{opacity:1;transform:none}.scroll-cue{animation:none}}
.demo-scene:not([hidden]){animation:demo-in .42s cubic-bezier(.22,1,.36,1) both}.feature-copy p:not([hidden]){animation:demo-in .35s ease both}@keyframes demo-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.store-links{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:32px auto 0;scroll-margin-top:110px}.store-button{display:inline-flex;align-items:center;gap:11px;min-width:180px;min-height:56px;padding:8px 16px;border:1px solid #d6cfe6;border-radius:15px;background:#f7f5fb;color:var(--ink);text-align:left;text-decoration:none;font-family:inherit;font-size:17px;font-weight:800;line-height:1.15;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}.store-button:hover{transform:translateY(-3px);background:#fff;box-shadow:0 10px 24px rgba(42,33,69,.12)}.store-button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.store-button span:last-child{display:flex;flex-direction:column}.store-button small{margin-bottom:2px;color:#857996;font-size:10px;font-weight:700}.store-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#2a2145;color:#fff;font-size:18px;font-weight:900;line-height:1}.play-icon{font-size:16px}.store-links-outro{margin-top:28px}.store-links-outro .store-button{border-color:rgba(28,23,48,.2);background:rgba(255,255,255,.42)}@media(max-width:430px){.store-links{width:min(100%,330px)}.store-button{flex:1 1 145px;min-width:0;min-height:53px;padding:8px 10px;font-size:13px}.store-button small{font-size:8px}.store-icon{width:26px;height:26px;font-size:15px}}
.asset-slot>img,.asset-slot>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.character-slot>img,.character-slot>video{object-fit:contain}.asset-slot:has(>img):after,.asset-slot:has(>video):after{display:none}
.hero-media{background:#08070b url("./landing-media/hero-19-poster.jpg") center/cover no-repeat}.hero-media::after{content:"";position:absolute;inset:0;border:0;border-radius:inherit;background:linear-gradient(90deg,rgba(249,246,255,.62),rgba(249,246,255,.35) 55%,rgba(249,246,255,.55))}.hero-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.character-slot{overflow:visible;border:0;background:none;box-shadow:none}.character-slot img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 20px 22px rgba(63,42,110,.18))}
.demo-scene{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:10px;overflow:hidden;padding:14px 12px 20px;background:#e4d6fb url("./chat-character-chat05-character01-default.png") center/cover no-repeat}.demo-scene:nth-child(2),.demo-scene:nth-child(3){background:#e4d6fb url("./chat-character-chat05-character01-default.png") center/cover no-repeat}.demo-character,.demo-feature-art{position:absolute;z-index:0;top:7%;left:50%;width:75%;height:52%;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 14px 16px rgba(80,52,131,.15))}.demo-feature-art{top:9%;width:67%;height:45%}.chat-message{position:relative;z-index:1;max-width:86%;padding:10px 12px;border-radius:14px;background:#fff;color:#30284c;font-size:11px;font-weight:650;line-height:1.4;box-shadow:0 5px 16px rgba(63,42,110,.1)}.from-me{align-self:flex-end;border-bottom-right-radius:4px;background:#ded0ff}.from-wenny{border-bottom-left-radius:4px}
.story-media{overflow:hidden;border:0}.story-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
@media(max-width:700px){.hero-media::after{background:linear-gradient(180deg,rgba(249,246,255,.58),rgba(249,246,255,.32) 50%,rgba(249,246,255,.6))}.hero-video{object-position:center}.chat-message{font-size:10px;padding:9px 10px}}
@media(max-width:430px){.demo-scene{gap:8px;padding:10px 8px 14px}.demo-character{top:5%;height:48%}.demo-feature-art{top:7%;height:42%}.chat-message{font-size:9px;max-width:90%;padding:8px 9px}}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}

/* Pickle-inspired navigation and download controls. */
html,body,button,input,select,textarea{font-family:Pretendard,"Apple SD Gothic Neo",sans-serif}
.section-heading h2,.story h2,.outro h2{margin-top:0}
.site-header{height:76px;padding:0 40px;background:transparent;backdrop-filter:none;box-shadow:none}
.site-header.is-scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(16px);box-shadow:none}
.site-nav{gap:24px;margin-left:auto;margin-right:26px;font-size:16px;font-weight:650}
.site-nav>a:not(.nav-pill):hover{color:#555}
.header-actions{display:flex;align-items:center;gap:16px}
.nav-pill{display:inline-flex;align-items:center;justify-content:center;min-width:112px;min-height:48px;padding:0 18px;border:0;border-radius:90px;background:#050507;color:#fff;font-size:16px;font-weight:650;white-space:nowrap;transition:background .18s ease,transform .14s cubic-bezier(.23,1,.32,1)}
.nav-pill:hover{background:#18181c}.nav-pill:active,.store-button:active{transform:scale(.97)}
.mobile-download{display:none}
.download-control{position:relative}
.download-control>.nav-pill{cursor:pointer}
.download-popover{position:absolute;z-index:120;top:calc(100% + 14px);right:-40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:446px;max-width:calc(100vw - 24px);padding:18px;border:1px solid rgba(255,255,255,.78);border-radius:28px;background:rgba(255,255,255,.92);color:#1c1730;box-shadow:0 24px 70px rgba(0,0,0,.28);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);visibility:hidden;opacity:0;transform:translateY(-12px) scale(.97);transform-origin:top right;pointer-events:none;transition:opacity .24s ease,transform .32s cubic-bezier(.22,1,.36,1),visibility 0s linear .32s}
.download-control.is-open .download-popover{visibility:visible;opacity:1;transform:translateY(0) scale(1);pointer-events:auto;transition:opacity .24s ease,transform .32s cubic-bezier(.22,1,.36,1),visibility 0s}
.download-qr-card{display:flex;flex-direction:column;align-items:center;gap:0;min-width:0;padding:18px 12px;border:1px solid rgba(28,23,48,.1);border-radius:20px;background:#fff;text-align:center}
.download-qr-icon{display:block;width:34px;height:34px;object-fit:contain}
.download-qr-label{display:block;margin-top:4px;font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap}
.download-qr-image{display:block;width:100%;max-width:174px;height:auto;aspect-ratio:1;image-rendering:pixelated}
.mobile-download-dialog{position:fixed;z-index:99;inset:62px 0 auto;width:100%;max-width:none;max-height:calc(100dvh - 62px);margin:0;padding:14px 20px 22px;overflow:auto;border:0;border-radius:0 0 24px 24px;background:#fff;color:#000;box-shadow:0 16px 24px rgba(0,0,0,.12);transition:height .25s cubic-bezier(.22,1,.36,1)}
.mobile-download-dialog[data-view="menu"]{height:88px}
.mobile-download-dialog[data-view="download"]{height:156px}
.mobile-download-dialog:focus{outline:none}
.mobile-download-dialog[open]{animation:mobile-download-in .25s cubic-bezier(.22,1,.36,1) both}
.mobile-download-dialog.is-closing{animation:mobile-download-out .22s ease both}
.mobile-overlay-menu,.mobile-download-content{animation:mobile-overlay-content-in .2s ease both}
.mobile-overlay-menu,.mobile-download-dialog[data-view="menu"] .mobile-download-content,.mobile-download-dialog[data-view="download"] .mobile-overlay-menu{display:none}
.mobile-download-dialog[data-view="menu"] .mobile-overlay-menu{display:block}
.mobile-overlay-menu a{display:flex;align-items:center;min-height:52px;color:#000;font-size:18px;font-weight:650}
.mobile-download-x{display:none;font-size:19px;font-weight:500;line-height:1}
.mobile-download-stores{display:grid;gap:0}
.mobile-download-stores a{display:flex;align-items:center;gap:14px;min-height:60px;padding:14px 4px;border:0;color:#000;font-size:16px;font-weight:650}
.mobile-download-stores a+a{border-top:1px solid #dedede}
.mobile-download-stores a:active{background:#f3f3f3}
.mobile-download-stores img{width:28px;height:28px;object-fit:contain}
@keyframes mobile-download-in{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}
@keyframes mobile-download-out{to{opacity:0;transform:translateY(-24px)}}
@keyframes mobile-overlay-content-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:701px){.mobile-download-dialog{display:none}}
@media(prefers-reduced-motion:reduce){.download-popover{transition:none}}
@media(prefers-reduced-motion:reduce){.mobile-download-dialog{transition:none}.mobile-download-dialog[open],.mobile-download-dialog.is-closing,.mobile-overlay-menu,.mobile-download-content{animation:none}}
.store-button{justify-content:center;gap:10px;min-width:165px;min-height:53px;padding:0 16px;border:0;border-radius:16px;background:#f7f7f7;color:#181818;font-size:18px;font-weight:600;white-space:nowrap;box-shadow:none;transition:background .18s ease,transform .14s cubic-bezier(.23,1,.32,1)}
.store-button svg{display:block;flex:none}.store-button:hover{background:#ededed;box-shadow:none}
@media(max-width:700px){
  .site-header{height:62px;padding:0 18px;background:rgba(255,255,255,.82);backdrop-filter:blur(12px)}
  .site-nav{position:fixed;top:62px;left:0;right:0;gap:0;margin:0;padding:8px 20px 14px;border-radius:0 0 24px 24px;background:#fff;box-shadow:0 16px 24px rgba(28,23,48,.1)}
  .site-nav>a{min-height:52px;border-bottom:1px solid #efefef;font-size:18px}.site-nav>a:last-child{border-bottom:0}
  .header-actions{gap:14px}.header-actions>.download-control{display:none}.mobile-download{display:inline-flex;min-width:0;min-height:38px;padding:0 15px;font-size:13px}
  .menu-toggle{width:34px;height:38px}.menu-toggle span{left:6px;width:22px}.menu-toggle span:first-child{top:13px}.menu-toggle span:last-child{top:23px}.menu-toggle[aria-expanded=true] span:first-child,.menu-toggle[aria-expanded=true] span:last-child{top:18px}
  .store-button{min-width:140px;min-height:50px;padding:0 12px;font-size:15px}.store-button svg{width:20px;height:20px}
}
@media(max-width:430px){.site-header{padding:0 17px}.store-links{width:min(100%,330px)}.store-button{flex:1 1 145px;font-size:14px}}

/* Dark canvas lets the trailer and character art carry the colour. */
:root{--ink:#f8f6fb;--muted:#aaa4b5;--paper:#08070b;--line:rgba(255,255,255,.14)}
html,body,main,.intro{background:#08070b;color:#f8f6fb}
.hero{background:#08070b}.hero-media{background:#08070b url("./landing-media/hero-19-poster.jpg") center/cover no-repeat}
.hero-media::after{background:linear-gradient(180deg,rgba(4,3,7,.64),rgba(4,3,7,.12) 50%,rgba(4,3,7,.12) 76%,rgba(4,3,7,.38))}


.scroll-cue{border-color:rgba(255,255,255,.7);color:#fff;background:rgba(0,0,0,.24)}
.site-header{color:#fff}.site-header.is-scrolled{background:rgba(10,9,14,.88);color:#fff}
.brand img{filter:brightness(0) invert(1)}
.site-nav>a:not(.nav-pill):hover{color:#ddd7ea}.site-header .menu-toggle{color:#fff}.menu-toggle span{background:currentColor}
.section-heading .eyebrow{color:#bba3ed}.section-heading p,.feature-copy p{color:#aaa4b5}
.orbit{border-color:rgba(204,178,255,.2)}
.feature-picker button{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.075);color:#ddd7e7;backdrop-filter:blur(14px)}
.feature-picker button:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.13);color:#fff}
.feature-picker button[aria-selected=true]{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.23);color:#fff}
.character-slot{filter:drop-shadow(0 18px 24px rgba(133,70,201,.16))}
.phone-shell{color:#1c1730}
.story{background:radial-gradient(circle at 16% 38%,#281735,transparent 45%),#08070b}


.faq-list details{border-color:rgba(255,255,255,.17)}
.outro,.site-footer{background:#08070b;color:#f8f6fb}.outro{border-top:1px solid rgba(255,255,255,.12)}.outro h2{color:#fff}.site-footer{border-color:rgba(255,255,255,.15)}.footer-bottom{color:#aaa4b5}

@media(max-width:700px){.site-header{background:rgba(9,8,13,.6)}.site-nav{background:#141219;color:#fff}.site-nav>a{border-color:rgba(255,255,255,.1)}.hero-media::after{background:linear-gradient(180deg,rgba(4,3,7,.65),rgba(4,3,7,.08) 57%,rgba(4,3,7,.3))}}

/* Full-bleed trailer hero and longer experience labels. */
.hero{width:100%;min-height:100svh;margin:0;border-radius:0}
.scroll-cue{bottom:calc(26px + env(safe-area-inset-bottom))}
.feature-picker{max-width:1120px;padding-inline:18px}
.feature-picker button{flex:1 1 300px;min-height:64px;padding:12px 18px;line-height:1.35;white-space:normal}
@media(max-width:700px){.hero{min-height:100svh;margin:0;border-radius:0}.feature-picker{margin-top:0}}
@media(max-width:430px){.hero{min-height:100svh}.feature-picker{grid-template-columns:1fr;width:min(100%,360px);padding-inline:12px}.feature-picker button:last-child{grid-column:auto}.feature-picker button{min-height:54px}}
.intro{padding-top:56px}
.product-universe{margin-top:0}
@media(max-width:700px){.intro{padding-top:32px}}

/* The last CTA opens into the supplied bright looping sky. */
.outro{background:#08070b}
.outro-cta{position:relative;isolation:isolate;min-height:620px;background:#ebc9e8 url("./landing-media/outro-dreamscape.webp") center/cover no-repeat;color:#211929}
.outro-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,250,255,.16);pointer-events:none}
.outro h2{color:#211929;text-shadow:0 1px 14px rgba(255,255,255,.44)}


.site-footer{background:#08070b;color:#f8f6fb}
@media(max-width:700px){.outro-cta{min-height:560px;background-position:center}.outro h2{font-size:clamp(40px,8vw,62px)}}
@media(prefers-reduced-motion:reduce){.outro-cta{background-image:url("./landing-media/outro-sky-still.jpg")}}

/* Give the footer its own spacious, full-width finish. */
.site-footer{display:flex;flex-direction:column;justify-content:space-between;min-height:360px;padding:66px clamp(28px,5vw,88px) 38px;border-top:1px solid rgba(255,255,255,.18)}
.footer-top{align-items:flex-start}
.footer-top .brand{width:96px;height:58px;justify-content:flex-start}
.footer-top .brand img{width:96px}
.footer-top nav{max-width:760px;gap:22px 38px;font-size:15px;line-height:1.5}
.footer-bottom{align-items:flex-end;gap:40px;margin-top:112px;padding-top:26px;border-top:1px solid rgba(255,255,255,.18);color:#aaa4b5;font-size:12px;line-height:1.65}
@media(max-width:700px){
  .site-footer{min-height:0;padding:54px 24px 32px}
  .footer-top{align-items:flex-start;flex-direction:row;gap:18px}
  .footer-top .brand{width:64px;height:38px}.footer-top .brand img{width:64px}
  .footer-top nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 12px;width:auto;max-width:230px;margin-left:auto;font-size:12px;font-weight:500;text-align:right}
  .footer-bottom{align-items:flex-start;gap:12px;margin-top:76px;padding-top:24px;font-size:11px}
}

/* The message rises as an opaque section over the full-screen trailer. */
.hero{position:sticky;top:0;z-index:0}
.hero-media::after{background:linear-gradient(0deg,rgba(4,3,7,.28),transparent 25%)}
.hero-message{position:relative;z-index:2;display:grid;place-items:center;min-height:100svh;padding:24px;border-radius:48px 48px 0 0;background:#08070b;color:#f8f6fb;box-shadow:0 -20px 54px rgba(0,0,0,.18)}
.hero-message-inner{width:min(100%,1050px);text-align:center}
.hero-message-wenny{display:block;width:190px;max-width:50vw;height:auto;margin:0 auto 28px}
.hero-message h1{margin:0;font-size:clamp(48px,6.2vw,88px);font-weight:800;line-height:1.2;letter-spacing:-.075em}
.hero-message p{margin:20px 0 0;color:#bcb6c6;font-size:clamp(17px,1.55vw,22px);line-height:1.65}
.intro,.story{position:relative;z-index:2}
@media(max-width:700px){.hero-message{min-height:100svh;padding:24px 22px;border-radius:30px 30px 0 0}.hero-message-wenny{width:148px;margin-bottom:24px}.hero-message h1{font-size:clamp(38px,8.2vw,58px)}.hero-message p{font-size:16px}}
@media(max-width:430px){.hero-message h1{font-size:clamp(35px,9vw,43px)}.hero-message p{max-width:29ch;margin-inline:auto}}

/* FAQ follows the video section. */
.faq-section{position:relative;z-index:2;padding:130px max(28px,calc((100vw - var(--shell))/2)) 155px;background:#08070b;color:#f8f6fb}
.faq-inline{max-width:1160px;margin:0 auto}
.faq-heading{margin-bottom:34px}
.faq-heading h2{font-size:clamp(42px,4.5vw,64px);line-height:1.18;letter-spacing:-.06em}
@media(max-width:700px){.faq-section{padding:95px 24px 115px}.faq-inline{margin:0}.faq-heading h2{font-size:clamp(34px,8vw,46px)}}

/* Let the final download prompt flow directly into the footer, as in Pickle. */
.outro{background-color:#ebc9e8;background-image:linear-gradient(to bottom,rgba(255,255,255,0) 48%,rgba(255,255,255,.28) 100%),url("./landing-media/outro-dreamscape.webp");background-position:center,center bottom;background-size:cover;background-repeat:no-repeat;color:#211929}
.outro-cta{min-height:390px;padding:125px 24px 0;background:none}
.outro-cta::before{display:none}
.site-footer{min-height:265px;padding:0 clamp(28px,5vw,88px) 38px;border-top:0;background:none;color:#211929}
.site-footer .brand img{filter:none}
.footer-bottom{margin-top:70px;border-color:rgba(33,25,41,.22);color:#44374b}
@media(max-width:700px){
  .outro-cta{min-height:365px;padding:105px 24px 0;background:none}
  .site-footer{min-height:0;padding:0 24px 32px}
  .footer-top{gap:18px}
  .footer-bottom{margin-top:54px;border-color:rgba(33,25,41,.22);color:#44374b}
}
@media(prefers-reduced-motion:reduce){.outro{background-image:linear-gradient(to bottom,rgba(255,255,255,0) 48%,rgba(255,255,255,.28) 100%),url("./landing-media/outro-sky-still.jpg")}}

/* The trailer and title are consecutive sections in the normal scroll flow. */
.hero{position:relative;top:auto;z-index:auto}
.hero-message{border-radius:0;box-shadow:none}
.hero-store-links{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:46px}
.hero-store-links a{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:216px;min-height:62px;padding:11px 26px;border:1px solid rgba(255,255,255,.48);border-radius:999px;background:rgba(255,255,255,.09);color:#fff;font-size:18px;font-weight:400;transition:background .2s ease,border-color .2s ease,color .2s ease}
.hero-store-links a:hover,.hero-store-links a:focus-visible{border-color:transparent;background:#fff;color:#08070b}
.store-link-icon{display:block;flex:none;width:24px;height:24px;filter:brightness(0) invert(1)}
.hero-store-links a:hover .store-link-icon,.hero-store-links a:focus-visible .store-link-icon{filter:none}
.store-link-label{white-space:nowrap}
.outro-store-links{margin-top:28px}
.hero-store-links.outro-store-links a{border-color:#050507;background:#050507;color:#fff}
.hero-store-links.outro-store-links a:hover,.hero-store-links.outro-store-links a:focus-visible{border-color:transparent;background:#fff;color:#050507}
@media(max-width:700px){.hero-message{border-radius:0}.hero-message h1{font-size:clamp(30px,8vw,44px)}.hero-store-links{gap:8px;margin-top:38px}.hero-store-links a{min-width:150px;min-height:56px;gap:8px;padding:9px 14px;font-size:16px}.store-link-icon{width:21px;height:21px}}
@media(max-width:700px){.outro-store-links{margin-top:28px}}
@media(max-width:430px){.hero-message h1{font-size:clamp(29px,7.6vw,35px)}}

/* Keep the footer navigation 16px above the company information. */
.site-footer{justify-content:flex-end}
.footer-top{position:static}
.footer-bottom{margin-top:16px;padding-top:0;border-top:0}
@media(min-width:701px){.site-footer{min-height:425px;padding-top:160px}}

/* Center the final call to action in its own viewport-height panel. */
.outro{position:relative;bottom:auto}
.outro-cta{min-height:100svh;padding:0 24px}
@media(max-width:700px){.outro-cta{min-height:100svh;padding:0 24px}}

/* Strong glass blur with no colour layer behind the header. */
.site-header,.site-header.is-scrolled{background:transparent;backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);box-shadow:none}
@media(max-width:700px){
  .site-header.menu-open,.site-header.menu-open.is-scrolled,.site-header.download-open,.site-header.download-open.is-scrolled,.site-header.menu-open .site-nav{background:#fff;color:#000}
  .site-header .site-nav{display:none}
  .site-header.menu-open .brand img,.site-header.download-open .brand img{filter:none}
  .site-header.menu-open .menu-toggle,.site-header.download-open .menu-toggle{color:#000}
  .site-header.menu-open .site-nav>a{border-color:#e5e5e5}
  .site-header.menu-open .site-nav>a:hover{color:#555}
  .site-header.menu-open .mobile-download,.site-header.download-open .mobile-download{background:#000;color:#fff}
  .site-header.menu-open .header-actions .mobile-download:hover,.site-header.menu-open .header-actions .mobile-download:focus-visible,.site-header.download-open .header-actions .mobile-download:hover,.site-header.download-open .header-actions .mobile-download:focus-visible{background:#111;color:#fff}
}

/* Figma experience mockups. */
.experience-gallery{max-width:1280px;margin:0 auto 48px}
.experience-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:start;padding:8px 12px 20px}
.experience-shape{position:absolute;width:0;height:0;overflow:hidden}
.experience-phone{position:relative;min-width:0;overflow:hidden;border:0;border-radius:10% / 4.6%;background:transparent;-webkit-clip-path:url(#experience-phone-curve);clip-path:url(#experience-phone-curve);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.experience-phone.is-active{transform:translateY(-10px)}
.experience-phone>img{display:block;width:100%;height:auto;aspect-ratio:790/1700;object-fit:cover;pointer-events:none}
.feature-picker{margin:0 auto}
@media(max-width:800px){
  .experience-gallery{width:calc(100vw - 36px);max-width:none;margin-bottom:34px}
  .experience-track{display:flex;gap:18px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:16px max(12px,calc((100% - 270px)/2)) 22px}
  .experience-track::-webkit-scrollbar{display:none}
  .experience-phone{flex:0 0 270px;scroll-snap-align:center}
}
@media(max-width:430px){.experience-gallery{width:calc(100vw - 20px)}.experience-track{padding-inline:max(10px,calc((100% - 240px)/2))}.experience-phone{flex-basis:240px}}
@media(prefers-reduced-motion:reduce){.experience-phone{transition:none}.experience-phone.is-active{transform:none}}

/* Each chapter fills the canvas; proximity snapping keeps long content scrollable. */
html{scroll-snap-type:y proximity;scroll-padding-top:0}
body,main,.outro,[data-scroll-section]{width:100%;min-width:0}
[data-scroll-section]{min-height:100svh;scroll-snap-align:start;filter:brightness(.72);transition:filter .48s ease}
[data-scroll-section].is-section-focused{filter:brightness(1)}
.hero{height:100svh;min-height:100svh}
.hero-message{min-height:100svh}
.intro{display:flex;flex-direction:column;justify-content:center;min-height:100svh;padding:60px 24px}
.experience-gallery{width:min(100%,1280px);margin-bottom:16px}
.experience-track{max-width:1060px;margin-inline:auto;justify-items:center}
.experience-phone{width:min(100%,26svh)}
.story{min-height:100svh}
.faq-section{display:flex;align-items:center;min-height:100svh}
.faq-inline{width:100%}
.outro-cta{min-height:100svh}
@media(max-width:800px){
  html{scroll-snap-type:none}
  .intro{min-height:100svh;padding:70px 18px}
  .experience-gallery{width:calc(100vw - 36px);margin-bottom:22px}
  .experience-track{max-width:none}
  .experience-phone{width:auto}
  .story{min-height:100svh}
  .faq-section{min-height:100svh}
}
@media(max-width:430px){.experience-gallery{width:calc(100vw - 20px)}}
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:none}[data-scroll-section]{filter:none;transition:none}}

/* One centered app preview at a time, following Pickle's showcase rhythm. */
.intro{padding:34px 24px}
.experience-gallery{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 8px}
.experience-track{position:relative;z-index:1;display:block;width:min(23vw,28svh,260px);height:auto;aspect-ratio:790/1700;max-width:none;margin:0;padding:0;overflow:visible;filter:drop-shadow(0 24px 30px rgba(0,0,0,.32))}
.experience-phone,.experience-phone.is-active{position:absolute;inset:0;width:100%;height:100%;max-width:none;transform:translateY(22px) scale(.96);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .42s ease,transform .42s cubic-bezier(.22,1,.36,1),visibility .42s}
.experience-phone.is-active{z-index:2;transform:none;opacity:1;visibility:visible;pointer-events:auto}
.experience-phone>img{height:100%}
.feature-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,1100px);max-width:1100px;gap:12px;margin:0 auto}
.feature-picker button{min-height:56px;flex:none}
.feature-copy{min-height:24px;margin-top:12px}
.story{padding-block:clamp(36px,6svh,80px)}
.story-media{height:min(570px,calc(100svh - 120px))}
@media(max-width:800px){
  .intro{padding:40px 18px}
  .experience-gallery{width:100%;margin-bottom:6px}
  .experience-track{display:block;width:min(24svh,210px);height:auto;padding:0;overflow:visible}
  .experience-phone{flex:none;scroll-snap-align:none}
  .feature-picker{grid-template-columns:1fr;width:min(100%,480px);gap:8px;padding:0}
  .feature-picker button{min-height:50px}
  .feature-copy{margin-top:10px}
  .story{padding-block:54px}
  .story-media{height:min(440px,45svh)}
}
@media(max-width:430px){.intro{padding:30px 16px}.feature-picker{width:min(100%,360px)}}
@media(prefers-reduced-motion:reduce){.experience-phone,.experience-phone.is-active{transition:none}.experience-phone.is-active{transform:none}}

/* Four Figma headlines map directly to the four rotating screens. */
.feature-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
.feature-picker button{min-height:76px;font-size:16px;line-height:1.3}
@media(max-width:800px){.feature-picker{grid-template-columns:1fr}.feature-picker button{min-height:58px;font-size:14px}}

/* Section 03: one preview, with its numbered picker above the mockup. */
.intro{display:block;height:500svh;min-height:0;padding:0;overflow:visible}
.experience-sticky{position:sticky;top:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;height:100svh;padding:24px;overflow:hidden}
.experience-title{width:min(100%,1100px);min-height:1.2em;margin:0;text-align:center;text-wrap:balance;font-size:clamp(32px,3.8vw,54px);font-weight:780;line-height:1.17;letter-spacing:-.055em}
.experience-gallery{display:grid;place-items:center;width:100%;max-width:none;margin:0;overflow:visible}
.experience-track{position:relative;display:block;width:min(32vw,29svh,350px);max-width:none;height:auto;min-height:0;margin:0;padding:0;aspect-ratio:790/1700;overflow:visible;filter:drop-shadow(0 24px 30px rgba(0,0,0,.3))}
.experience-track .experience-phone{position:absolute;inset:0;width:100%;height:100%;max-width:none;opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,28px,0) scale(.72);filter:none;transition:opacity .55s ease,transform .6s cubic-bezier(.22,1,.36,1),visibility 0s linear .6s}
.experience-track .experience-phone.is-prev,.experience-track .experience-phone.is-next{z-index:1;opacity:.18;visibility:visible;filter:blur(6px) brightness(.65);transition:opacity .55s ease,transform .6s cubic-bezier(.22,1,.36,1),visibility 0s}
.experience-track .experience-phone.is-prev{transform:translate3d(calc(-92% - 20px),28px,0) scale(.78)}
.experience-track .experience-phone.is-next{transform:translate3d(calc(92% + 20px),28px,0) scale(.78)}
.experience-track .experience-phone.is-active{z-index:2;opacity:1;visibility:visible;transform:none;filter:none;transition:opacity .55s ease,transform .6s cubic-bezier(.22,1,.36,1),visibility 0s}
.experience-phone>img{width:100%;height:100%;object-fit:cover}
.experience-screen-mask{position:absolute;z-index:2;right:0;left:0;pointer-events:none}
.experience-motion{position:absolute;z-index:3;display:block;opacity:0;pointer-events:none}
.experience-phone.is-prev .experience-screen-mask,.experience-phone.is-next .experience-screen-mask{display:none}
.experience-chat-phone .experience-chat-static,.experience-chat-phone .experience-chat-layer,.experience-chat-phone .experience-chat-typing-group{display:none}
.experience-chat-phone.is-active .experience-chat-complete{display:none}
.experience-chat-phone.is-active .experience-chat-static,.experience-chat-phone.is-active .experience-chat-layer,.experience-chat-phone.is-active .experience-chat-typing-group{display:block}
.experience-chat-phone>img{object-fit:fill}
.experience-chat-phone .experience-chat-layer{inset:0;width:100%;height:100%;object-fit:fill}
.experience-chat-typing-group{inset:0;width:100%;height:100%}
.experience-chat-typing-group>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill}
.experience-chat-phone.is-active .experience-chat-dot{animation:experience-chat-dot-hop .9s 3.8s ease-in-out infinite}
.experience-chat-phone.is-active .experience-chat-dot-two{animation-delay:3.95s}
.experience-chat-phone.is-active .experience-chat-dot-three{animation-delay:4.1s}
.experience-chat-phone.is-active .experience-chat-video{animation:experience-chat-layer-rise .55s .1s cubic-bezier(.22,1,.36,1) both}
.experience-chat-phone.is-active .experience-chat-feedback{animation:experience-chat-layer-rise .55s .85s cubic-bezier(.22,1,.36,1) both}
.experience-chat-phone.is-active .experience-chat-reply-one{animation:experience-chat-layer-rise .55s 1.65s cubic-bezier(.22,1,.36,1) both}
.experience-chat-phone.is-active .experience-chat-reply-two{animation:experience-chat-layer-rise .55s 2.45s cubic-bezier(.22,1,.36,1) both}
.experience-chat-phone.is-active .experience-chat-typing-group{animation:experience-chat-layer-rise .55s 3.25s cubic-bezier(.22,1,.36,1) both}
.character-preview{position:relative;width:100%;height:100%;overflow:hidden;border-radius:10% / 4.7%}
.character-figma-complete,.character-figma-static,.character-bubble{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill}
.character-figma-static,.character-greeting,.character-bubble{display:none}
.experience-character-phone.is-active .character-figma-complete{display:none}
.experience-character-phone.is-active .character-figma-static,.experience-character-phone.is-active .character-greeting,.experience-character-phone.is-active .character-bubble{display:block}
.character-greeting{position:absolute;z-index:2;top:17.5%;left:3.8%;width:132%;height:auto;pointer-events:none}
.character-greeting img{display:block;width:100%;height:auto}
.character-bubble{z-index:3;pointer-events:none}
.experience-character-phone.is-active .character-bubble{animation:experience-chat-layer-rise .6s cubic-bezier(.22,1,.36,1) both}
.experience-character-phone.is-active .character-bubble-one{animation-delay:.15s}
.experience-character-phone.is-active .character-bubble-two{animation-delay:.85s}
@media(prefers-reduced-motion:reduce){.experience-character-phone.is-active .character-figma-complete{display:block}.experience-character-phone.is-active .character-figma-static,.experience-character-phone.is-active .character-greeting,.experience-character-phone.is-active .character-bubble{display:none}}
.experience-diary-phone{aspect-ratio:791/1721}
.experience-diary-phone>img{position:absolute;inset:0;display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:fill}
.experience-diary-phone .experience-diary-base,.experience-diary-phone .experience-diary-ink{display:none}
.experience-diary-phone.is-active .experience-diary-complete{display:none}
.experience-diary-phone.is-active .experience-diary-base,.experience-diary-phone.is-active .experience-diary-ink{display:block}
.experience-diary-phone.is-active .experience-diary-ink{animation:experience-diary-write 1.15s steps(32,end) both}
.experience-diary-phone.is-active .experience-diary-line-one{animation-delay:.35s}
.experience-diary-phone.is-active .experience-diary-line-two{animation-delay:1.9s}
.experience-diary-phone.is-active .experience-diary-line-three{animation-delay:3.45s}
.experience-diary-phone.is-active .experience-diary-line-four{animation-delay:5s}
.experience-diary-phone.is-active .experience-diary-line-five{animation-delay:6.55s}
@keyframes experience-chat-layer-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes experience-chat-dot-hop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.experience-chat-phone.is-active .experience-chat-complete{display:block}.experience-chat-phone.is-active .experience-chat-static,.experience-chat-phone.is-active .experience-chat-layer,.experience-chat-phone.is-active .experience-chat-typing-group{display:none}}
@keyframes experience-diary-write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.intro:not(.is-in-view) .experience-motion,.intro:not(.is-in-view) .experience-chat-dot,.intro:not(.is-in-view) .character-bubble,.intro:not(.is-in-view) .experience-diary-ink,.intro:not(.is-in-view) .experience-home-layer{animation-play-state:paused}
.experience-picker{display:flex;align-items:center;justify-content:center;gap:8px;width:min(100%,780px);margin:0 auto -8px}
.experience-picker-item{position:relative;display:flex;align-items:stretch;flex:none;min-height:60px;border:1px solid transparent;border-radius:999px;color:#fff;overflow:hidden;transition:background .2s ease,color .2s ease}
.experience-picker-item.is-active{background:#ffffff80;color:#08070b}
.experience-picker-item>button{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:12px;min-width:54px;min-height:60px;padding:10px 12px;border:0;border-radius:999px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.experience-picker-item>button[data-experience-select]:hover:not([aria-pressed="true"]){background:rgba(255,255,255,.12)}
.experience-picker-item>button:focus-visible{outline:2px solid currentColor;outline-offset:-4px}
.experience-picker-item.is-active>button[data-experience-select]{padding-inline:24px}
.experience-picker-index{position:relative;z-index:1;flex:none;font-size:20px;font-weight:750;line-height:1}
.experience-picker-title{display:none;text-align:left;font-size:clamp(14px,1.5vw,18px);font-weight:600;line-height:1.25;white-space:nowrap}
.experience-picker-item.is-active .experience-picker-title{display:block}
.experience-play-shape{display:none}
.experience-chip-progress{position:absolute;z-index:1;inset:0 auto 0 0;width:0;background:#fff;pointer-events:none}
.experience-picker-item.is-active .experience-chip-progress{width:var(--experience-step-progress,6%)}
.video-section{display:grid;place-items:center;min-height:100svh;padding:92px 24px 36px;background:#08070b}
.video-frame{width:min(100%,1200px,calc((100svh - 128px)*16/9));aspect-ratio:16/9;overflow:hidden;border-radius:22px;background:#17131f;box-shadow:0 28px 90px rgba(0,0,0,.4)}
.video-frame iframe{display:block;width:100%;height:100%;border:0}
@media(max-width:700px){
  .intro{height:500svh;min-height:0;padding:0}
  .experience-sticky{gap:16px;padding:24px 16px}
  .experience-title{width:min(100%,360px);min-height:2.34em;padding:0 8px;font-size:clamp(26px,6vw,34px);line-height:1.17}
  .intro:has(.experience-character-phone.is-active) .experience-title{width:min(100%,240px)}
  .experience-gallery{width:100%;max-width:none;overflow:visible;scroll-snap-type:none}
  .experience-track{width:min(68vw,27svh,280px);min-width:0;height:auto;min-height:0;padding:0}
  .experience-track .experience-phone{flex:none;scroll-snap-align:none}
  .experience-track .experience-phone.is-prev{transform:translate3d(calc(-100% - 16px),0,0)}
  .experience-track .experience-phone.is-next{transform:translate3d(calc(100% + 16px),0,0)}
  .experience-picker{gap:5px;width:100%}
  .experience-picker-item:not(.is-active):not(.is-prev):not(.is-next){display:none}
  .experience-picker-item.is-prev{order:0}
  .experience-picker-item.is-active{order:1;max-width:calc(100vw - 132px)}
  .experience-picker-item.is-next{order:2}
  .experience-picker-item>button{min-width:36px;min-height:58px;gap:6px;padding:8px 5px}
  .experience-picker-item.is-active>button[data-experience-select]{min-width:0;padding-inline:12px}
  .experience-picker-index{font-size:17px}
  .experience-picker-title{max-width:calc(100vw - 210px);overflow:hidden;text-overflow:ellipsis;font-size:12px}
  .video-section{padding:80px 16px 32px}
  .video-frame{width:100%;border-radius:14px}
}
@media(prefers-reduced-motion:reduce){.experience-track .experience-phone,.experience-picker button{transition:none}.experience-screen-mask{display:none}.experience-diary-phone.is-active .experience-diary-complete{display:block}.experience-diary-phone.is-active .experience-diary-base,.experience-diary-phone.is-active .experience-diary-ink{display:none}.experience-motion,.experience-motion-chat i{animation:none!important;opacity:0!important}}

/* 01: the curved Figma screen stays still while its feed layers move. */
.experience-phone[data-experience-screen="0"]{overflow:visible;clip-path:none;-webkit-clip-path:none}
.experience-track{filter:none}
.experience-home-visual{position:absolute;top:-7%;left:-16%;width:132%;height:116%;overflow:visible;clip-path:url(#experience-home-curve);-webkit-clip-path:url(#experience-home-curve)}
.experience-home-visual>img{display:block;width:100%;height:100%;object-fit:fill}
.experience-home-clear{position:absolute;background:#f5f5f5;pointer-events:none}
.experience-home-clear-card{top:39.5%;right:17%;bottom:26%;left:15%}
.experience-home-clear-answer-one{top:73%;right:39%;bottom:18%;left:16%}
.experience-home-clear-answer-two{top:73%;right:14.5%;bottom:18%;left:59%}
.experience-home-clear-lower-content{top:81.5%;right:14.5%;bottom:7.5%;left:14.5%}
.experience-home-layer{position:absolute;inset:0;background:url("./landing-media/experience/home-2356-2617.png") center / 100% 100% no-repeat;opacity:0;pointer-events:none}
.experience-home-card{clip-path:inset(40% 19% 26.5% 16% round 5% / 3%)}
.experience-home-answer-one{clip-path:inset(73.5% 39.8% 19% 17% round 5% / 3%)}
.experience-home-answer-two{clip-path:inset(73.5% 15.5% 19% 60.5% round 5% / 3%)}
.experience-home-lower-content{inset:auto 15.5% 7.7% 15.5%;height:10.5%;border-radius:9% / 26%;background:linear-gradient(180deg,#eaeaea 0%,#efefef 75%,#f5f5f5 100%);box-shadow:0 5px 13px rgba(0,0,0,.05)}
.experience-home-navigation-fixed{position:absolute;inset:0;background:url("./landing-media/experience/home-2356-2617.png") center / 100% 100% no-repeat;clip-path:inset(83.5% 15% 9% 15% round 6% / 8%);pointer-events:none}
.experience-phone.is-active .experience-home-layer{animation:experience-home-rise .75s cubic-bezier(.22,1,.36,1) both}
.experience-phone.is-active .experience-home-card{animation-duration:.9s}
.experience-phone.is-active .experience-home-answer-one{animation-delay:.95s}
.experience-phone.is-active .experience-home-answer-two{animation-delay:1.75s}
.experience-phone.is-active .experience-home-lower-content{animation-delay:2.55s;animation-duration:.8s}
.intro,.intro.is-section-focused{filter:none}
@keyframes experience-home-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.experience-phone.is-prev .experience-home-clear,.experience-phone.is-next .experience-home-clear,.experience-phone.is-prev .experience-home-navigation-fixed,.experience-phone.is-next .experience-home-navigation-fixed{display:none}
@media(prefers-reduced-motion:reduce){.experience-home-clear,.experience-home-layer,.experience-home-navigation-fixed{display:none}}

/* Header and FAQ controls. */
.site-header .header-actions .nav-pill:hover,.site-header .header-actions .nav-pill:focus-visible{background:#fff;color:#050507;box-shadow:inset 0 0 0 1px #fff}
.faq-inline{display:grid;grid-template-columns:minmax(0,1fr) auto}
.faq-heading{grid-column:1;grid-row:1}
.faq-list{grid-column:1/-1;grid-row:2}
.faq-inline>.faq-more{grid-column:2;grid-row:1;align-self:end;display:inline-flex;align-items:center;justify-content:center;min-width:116px;min-height:48px;margin-bottom:30px;padding:0 22px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:transparent;color:#fff;font-size:16px;font-weight:600;white-space:nowrap;transition:background .2s ease,color .2s ease,border-color .2s ease}
.faq-inline>.faq-more:hover,.faq-inline>.faq-more:focus-visible{border-color:#fff;background:#fff;color:#08070b}
.faq-list details p{overflow:hidden}

/* The FAQ lifts over the final scene; the footer shares that scene. */
main{background:transparent}
.faq-section{z-index:3;margin-bottom:-72px;padding-bottom:calc(155px + 72px);clip-path:url(#faq-bottom-curve)}
.outro{min-height:100svh}
.outro-cta{min-height:100svh}
.site-footer{position:absolute;right:0;bottom:0;left:0;min-height:0;padding:0 clamp(28px,5vw,88px) 38px;border:0;background:transparent}
.footer-bottom{margin-top:20px}
@media(max-width:700px){
  .hero-message h1,.experience-title,.faq-heading h2,.outro h2{text-align:center}
  .faq-section{margin-bottom:-52px;padding-bottom:calc(115px + 52px)}
  .faq-inline{grid-template-columns:1fr}
  .faq-heading{align-items:center;justify-content:center;flex-direction:column;gap:20px;text-align:center}
  .faq-inline>.faq-more{grid-column:1;grid-row:3;justify-self:center;align-self:auto;min-width:98px;min-height:44px;margin:28px 0 0;padding:0 16px;font-size:14px}
  .outro{min-height:max(100svh,760px)}
  .outro-cta{min-height:max(100svh,760px)}
  .site-footer{padding:0 24px 28px}
  .footer-bottom{margin-top:20px}
}

/* Section 04: one player, two selectable films. */
.video-section{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:92px 24px 48px}
.video-frame{width:min(100%,1100px,110.2svh)}
.video-picker{display:flex;justify-content:center;gap:10px;width:min(100%,800px)}
.video-picker button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:12px 24px;border:1px solid transparent;border-radius:999px;background:transparent;color:#fff;font:inherit;font-size:16px;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.video-picker button:hover:not([aria-pressed="true"]){background:rgba(255,255,255,.12)}
.video-picker button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.video-picker button[aria-pressed="true"]{border-color:#fff;background:#fff;color:#08070b}
.video-picker-index{font-size:20px;font-weight:750;line-height:1;opacity:1}
.video-picker-mobile-label{display:none}
@media(max-width:700px){
  .video-section{gap:16px;padding:80px 16px 56px}
  .video-picker{justify-content:flex-start;gap:8px;width:100%;max-width:500px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .video-picker::-webkit-scrollbar{display:none}
  .video-picker button{flex:none;gap:7px;min-height:42px;padding:8px 13px;border-color:rgba(255,255,255,.24);font-size:13px;white-space:nowrap}
  .video-picker-index{font-size:14px}
  .video-picker-desktop-label{display:none}
  .video-picker-mobile-label{display:inline}
  .video-section>.video-frame{display:block;width:100%}
}
@media(prefers-reduced-motion:reduce){.video-picker button{transition:none}}

/* Section 06 stays beneath the FAQ and is revealed as section 05 leaves. */
main{position:relative;z-index:2}
.faq-section{margin-bottom:0;padding-bottom:155px;clip-path:none;border-radius:0 0 var(--faq-radius,0px) var(--faq-radius,0px);overflow:hidden}
.outro{position:sticky;bottom:0;z-index:1}
.outro-cta{scroll-snap-align:none}
[data-outro-reveal]{opacity:var(--outro-opacity,1);transform:translate3d(0,var(--outro-shift,0px),0)}
@media(max-width:700px){.faq-section{margin-bottom:0;padding-bottom:115px}}
@media(prefers-reduced-motion:reduce){[data-outro-reveal]{opacity:1;transform:none;transition:none}}

/* Footer links use a filled, stationary hover treatment. */
.site-footer .footer-top nav a{display:inline-flex;align-items:center;min-height:38px;margin:0;padding:7px 12px;border-radius:999px;text-decoration:none;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:background-color .18s ease,color .18s ease,backdrop-filter .18s ease}
.site-footer .footer-top nav a:hover,.site-footer .footer-top nav a:focus-visible{background:rgba(0,0,0,.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:inherit;text-decoration:none}

/* Keep mobile controls comfortable to tap without changing their visual weight. */
@media(max-width:700px){
  .site-header .brand{min-height:44px}
  .site-header .mobile-download{min-height:44px}
  .site-header.download-open .mobile-download{gap:8px}
  .site-header.download-open .mobile-download-x{display:inline}
  .site-header .header-actions .mobile-download.is-pointer-activated:focus{outline:none;box-shadow:none}
  .site-header.download-open .header-actions .mobile-download.is-pointer-activated:focus-visible{outline:none;background:#000;color:#fff;box-shadow:none}
  .site-header .menu-toggle{width:44px;height:44px}
  .site-header .menu-toggle span{left:11px}
  .site-header .menu-toggle span:first-child{top:16px}
  .site-header .menu-toggle span:last-child{top:26px}
  .site-header .menu-toggle[aria-expanded=true] span:first-child,
  .site-header .menu-toggle[aria-expanded=true] span:last-child{top:21px}
  .experience-picker-item{min-height:52px}
  .experience-picker-item>button{min-width:44px;min-height:52px}
  .experience-picker-item.is-active>button[data-experience-select]{padding-inline:12px}
  .experience-picker-index{font-size:16px}
  .faq-inline>.faq-more{min-height:44px}
  .site-footer .footer-top nav a{min-height:44px}
  .site-footer .footer-top .brand{min-height:44px}
  .site-footer .footer-top nav{max-width:340px;gap:8px}
}