/* Product pages and self-contained interactive sections on existing landing pages. */
.portfolio-page{margin:0;background:#0c1019;color:#f2f2f6;font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:clip}
.portfolio-page *,.p-experience *{box-sizing:border-box}
.portfolio-page a{color:inherit;text-decoration:none}
.portfolio-page button,.p-experience button,.p-experience input,.p-experience select{font:inherit}
.portfolio-page button,.p-experience button{cursor:pointer}
.portfolio-page :focus-visible,.p-experience :focus-visible{outline:3px solid var(--p-accent,#a9a7ff);outline-offset:5px}
.p-wrap{width:min(1180px,calc(100% - 64px));margin-inline:auto}
.p-header{height:98px;display:flex;align-items:center;gap:44px;position:relative;z-index:4}
.p-brand{font-weight:800;font-size:25px;letter-spacing:-1.2px;white-space:nowrap}.p-brand span{color:var(--p-accent);padding-left:10px}
.p-header>nav{margin-left:auto;display:flex;gap:30px;font-size:13px;color:#b0b5c6}
.p-header nav a:hover{color:#fff}.p-language{position:relative;font-size:12px}.p-language summary{cursor:pointer;list-style:none}.p-language nav{position:absolute;right:0;top:35px;background:#1c2130;border:1px solid #404757;border-radius:14px;padding:15px;width:160px;display:grid;gap:8px}
.p-skip{position:fixed;top:-100px;left:20px;z-index:20;background:#fff;color:#111!important;padding:12px}.p-skip:focus{top:10px}
.p-hero{min-height:690px;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:48px;padding-block:68px 100px}
.p-kicker{text-transform:uppercase;letter-spacing:2px;font-size:10px!important;font-weight:700;line-height:1.8;color:#afb5c7;margin:0 0 28px!important}
.p-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--p-accent,#a9a7ff);margin:0 7px 2px 0;box-shadow:0 0 14px color-mix(in srgb,var(--p-accent,#a9a7ff),transparent 45%)}
.p-app-icon{border-radius:23%;box-shadow:0 10px 40px #0004}.p-product-name{font-weight:650;font-size:18px;margin:20px 0 12px;letter-spacing:-.3px}
.p-hero h1{font-weight:730;letter-spacing:-3px;line-height:1.06;font-size:clamp(42px,5vw,72px);margin:0 0 28px;max-width:650px}
.p-lede{font-size:17px;color:#b5bacb;max-width:490px;line-height:1.8}
.p-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-top:32px}
.p-button{display:inline-flex;align-items:center;gap:20px;background:var(--p-accent,#a9a7ff);border:0;border-radius:99px;padding:14px 25px;color:#141827!important;font-weight:750;font-size:13px;min-height:48px;text-decoration:none;transition:transform .2s,box-shadow .2s}
.p-button:hover{transform:translateY(-3px);box-shadow:0 8px 30px color-mix(in srgb,var(--p-accent),transparent 80%)}
.p-button.p-quiet{background:#22283a;color:#fff!important}.p-text-link{font-size:13px;text-decoration:none!important;color:#ced2df!important}.p-note{font-size:12px;max-width:390px;color:#adb4c8}
.p-hero-visual{min-height:480px;display:grid;place-items:center;position:relative;perspective:900px;isolation:isolate}
.p-hero-visual:before{content:"";position:absolute;inset:5%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--p-accent),transparent 73%),transparent 69%);z-index:-1;filter:blur(16px)}
.p-hero-screen{width:100%;max-height:480px;object-fit:contain;border-radius:18px;transform:rotate(-3deg) rotateX(var(--px,0deg)) rotateY(var(--py,0deg));filter:drop-shadow(0 24px 32px #0006);transition:transform .3s;z-index:1}
.p-hero-emblem{width:min(70%,330px);height:auto;border-radius:25%;transform:rotate(-9deg) rotateX(var(--px,0deg)) rotateY(var(--py,0deg));box-shadow:0 30px 60px #0005;z-index:1;transition:transform .3s}
.p-orbit{position:absolute;width:95%;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--p-accent),transparent 75%);border-radius:50%;transform:rotateX(25deg) rotate(-20deg)}
.p-orbit-two{width:115%;transform:rotateX(60deg) rotate(28deg);border-style:dashed;opacity:.5}

.p-marquee{overflow:hidden;border-block:1px solid #ffffff14;padding:19px 0;color:var(--p-accent);font-size:14px;letter-spacing:2px;white-space:nowrap;text-align:center}
.p-experience{background:#0e1320;color:#edf0f8;padding-block:30px 75px;font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;isolation:isolate;text-align:left}
.p-experience a{color:var(--p-accent,#b4b7ff)}.p-experience [hidden]{display:none!important}
.p-section-heading{display:flex;align-items:flex-end;gap:50px;justify-content:space-between;margin:60px 0 30px}.p-section-heading h2{font-size:clamp(29px,3vw,43px)!important;line-height:1.15;letter-spacing:-1.5px;color:#edf0f8!important;margin:0!important;font-weight:720!important}.p-section-heading p{max-width:360px;color:#a8b0c5;font-size:13px;margin:0;line-height:1.7}.p-section-heading .p-kicker{margin-bottom:12px!important}
.p-demo{border:1px solid #ffffff18;border-radius:28px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;min-height:390px;background:linear-gradient(135deg,#171e2e,#111724);position:relative}
.p-demo-stage{display:flex;align-items:center;justify-content:center;flex-direction:column;padding:42px;min-height:330px;position:relative;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--p-accent),transparent 89%),transparent 70%);overflow:hidden}
.p-demo-controls{padding:42px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;border-left:1px solid #ffffff12;gap:16px;position:relative;z-index:1}
.p-demo-controls h3{color:#f0f2fa!important;font-size:23px!important;line-height:1.3;margin:0!important;letter-spacing:-.6px}.p-demo-controls p{font-size:14px;color:#b1bbd1;margin:0!important;line-height:1.6}.p-demo-controls label{color:#e0e5f0;font-size:14px;display:flex;align-items:center;gap:12px;max-width:100%}.p-demo-controls input[type=range]{width:100%;min-height:44px;accent-color:var(--p-accent)}.p-demo-controls input[type=text],.p-demo-controls input[type=date],.p-demo-controls select{background:#222c40;color:#fff;border:1px solid #526078;padding:12px;border-radius:10px;width:100%;min-height:44px;color-scheme:dark}
.p-demo-controls input[type=checkbox]{width:20px;height:20px;accent-color:var(--p-accent);flex-shrink:0}.p-demo-controls button:not(.p-button){padding:11px 18px;border-radius:12px;border:1px solid #68738b;background:#202a3f;color:#fff;min-height:44px;font-size:14px}.p-demo-controls button:hover{border-color:var(--p-accent)}.p-demo-controls button[aria-pressed=true]{background:var(--p-accent);color:#141827;border-color:transparent}.p-demo-controls button:disabled{opacity:.5;cursor:default}
.p-demo-output{color:var(--p-accent)!important;min-height:46px;font-size:13px!important;max-width:100%}.p-demo-tag{position:absolute;top:20px;left:25px;font-size:9px;text-transform:uppercase;letter-spacing:2px;color:#c1c9da}.p-demo-actions{display:flex;flex-wrap:wrap;gap:9px}
.p-big-value{font-size:76px;font-weight:780;letter-spacing:-4px;line-height:1.1;color:var(--p-accent)}.p-value-label{color:#b5c0d6;font-size:12px;margin-top:12px}.p-demo-icon{width:110px;height:110px;border-radius:26%;margin-bottom:24px;filter:drop-shadow(0 15px 20px #0003);transition:transform .6s}
.p-demo-stage.is-celebrating .p-demo-icon{transform:rotate(-12deg) scale(1.14)}
.p-demo-card{background:#f7eddd;color:#283244;box-shadow:0 18px 40px #0004;width:min(100%,310px);padding:30px;border-radius:18px;transform:rotate(-4deg);text-align:center;transition:transform .5s,background .5s;overflow-wrap:anywhere}.p-demo-card strong{font-size:24px;display:block;line-height:1.35;color:inherit}.p-demo-card small{display:block;margin-bottom:18px;letter-spacing:2px;color:#786451}.p-demo-card p{color:#475369;font-size:15px;line-height:1.65}.p-demo-card.is-open{transform:rotate(2deg);background:#fff5e8}
.p-burst{position:absolute;width:7px;height:13px;background:var(--p-accent);left:50%;top:40%;animation:p-confetti 900ms ease-out both;pointer-events:none}
@keyframes p-confetti{from{transform:translate(0,0) rotate(0);opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}
.p-knock-card{border:2px solid var(--p-accent);background:#1b263b;border-radius:22px;padding:35px;width:100%;text-align:center}.p-knock-card strong{display:block;font-size:62px;letter-spacing:-3px;color:var(--p-accent)}.p-knock-card small{font-size:12px;color:#c5cede}.p-knocking{animation:p-knock .4s 2}@keyframes p-knock{25%{transform:translateX(-8px)}75%{transform:translateX(6px)}}
.p-orbit-demo{position:relative;width:270px;height:270px;border:1px solid #63738766;border-radius:50%;display:grid;place-items:center}.p-orbit-demo:before{content:"";position:absolute;width:170px;height:170px;border:1px dashed #8a9bb566;border-radius:50%}.p-sun{width:56px;height:56px;background:#eec89a;border-radius:50%;box-shadow:0 0 60px #eec89a44}.p-planet{position:absolute;width:35px;height:35px;border-radius:50%;background:var(--p-accent);left:var(--planet-x,70%);top:var(--planet-y,12%);box-shadow:inset -9px -5px 0 #0005,0 0 30px #98c7ed30;transition:all .7s}
.p-orbit-label{position:absolute;bottom:-37px;color:#d0d9ea;font-size:14px;letter-spacing:2px}
.p-progress{width:100%;height:10px;border-radius:12px;background:#3b4962;overflow:hidden;margin-top:24px}.p-progress span{display:block;width:0;height:100%;background:var(--p-accent);transition:width .5s}.p-demo-stage ol{padding-left:20px;font-size:14px;color:#d5dcee;max-height:150px;overflow:auto;align-self:stretch}.p-demo-stage ol li{padding:5px}
.p-plant{width:160px;height:180px;position:relative;margin:20px}.p-pot{position:absolute;bottom:0;left:35px;width:90px;height:75px;background:#ce8d6a;clip-path:polygon(0 0,100% 0,85% 100%,15% 100%);border-top:9px solid #e6a780}.p-stem{height:125px;width:7px;background:#99ba89;position:absolute;left:78px;bottom:58px;transform:rotate(var(--lean,0deg));transform-origin:bottom;transition:transform .5s}.p-leaf{position:absolute;width:66px;height:42px;border-radius:85% 5% 85% 5%;background:#a9c391;left:-60px;top:33px;transform:rotate(12deg)}.p-leaf:nth-child(2){left:5px;top:2px;transform:rotate(-7deg);background:#6d936c}.p-leaf:nth-child(3){left:3px;top:67px;transform:rotate(-10deg);background:#7ca17a}
.p-moon{width:110px;height:110px;background:#f8e2b6;border-radius:50%;box-shadow:0 0 65px #efd2a129;position:relative;transition:opacity .5s}.p-moon:after{content:"";width:92px;height:92px;background:#182238;position:absolute;top:-15px;right:-15px;border-radius:50%}.p-stars{color:#fff1bb;letter-spacing:24px;font-size:22px;margin-bottom:30px}.p-demo[data-demo=bedtime] .p-demo-stage{background:#182238;transition:background .6s}.p-room-rest{font-size:14px;color:#d3cce9;margin-top:30px}
.p-gallery{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 4px 24px;scrollbar-color:var(--p-accent) #242c3b}.p-gallery figure{margin:0;flex:0 0 auto;max-width:78%;scroll-snap-align:center}.p-shot{display:block;padding:0!important;border:1px solid #ffffff22!important;border-radius:17px!important;overflow:hidden;background:#1a2232!important;cursor:zoom-in!important}.p-shot img{height:390px;max-width:100%;width:auto;object-fit:contain;display:block;transition:transform .4s}.p-shot:hover img{transform:scale(1.015)}.p-gallery figcaption{font-size:10px;color:#aab3c5;text-transform:uppercase;letter-spacing:1px;margin-top:12px}
.p-availability{border-top:1px solid #ffffff19;padding-top:25px;font-size:12px;color:#c8cddd;margin-top:28px}.p-lightbox{background:#101726;color:#fff;border:1px solid #536177;border-radius:16px;max-width:94vw;max-height:94vh;padding:50px 15px 15px;overflow:auto}.p-lightbox::backdrop{background:#070b12eb;backdrop-filter:blur(12px)}.p-lightbox img{max-width:85vw;max-height:76vh;object-fit:contain;display:block;margin:auto}.p-lightbox form{position:absolute;top:8px;right:10px}.p-lightbox button{background:#333e54;color:#fff;border:0;border-radius:50%;width:36px;height:36px;font-size:23px}.p-lightbox p{margin:10px 0 0;text-align:center;font-size:12px;color:#b1bbd0}
.p-features{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;padding-block:90px}.p-features article{border-top:1px solid #ffffff26;padding-top:25px}.p-features span{color:var(--p-accent);font-size:12px}.p-features h2{font-size:24px;font-weight:550;letter-spacing:-.6px;margin-top:30px;line-height:1.35}.p-next{padding-block:55px 100px}.p-next h2{font-size:45px;letter-spacing:-2px;line-height:1.2}.p-related{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.p-related a{background:#171e2c;border:1px solid #ffffff14;border-radius:16px;padding:20px;display:flex;align-items:center;gap:16px;font-size:15px}.p-related img{border-radius:14px}.p-related a span:last-child{margin-left:auto;color:var(--p-accent)}.p-related a:hover{border-color:var(--p-accent)}.p-footer{border-top:1px solid #ffffff20;padding-block:40px;display:flex;align-items:center;justify-content:space-between;gap:25px}.p-footer p,.p-footer nav{font-size:11px;color:#a1abc1}.p-footer nav{display:flex;gap:20px}
.p-motion [data-p-reveal]{opacity:0;transform:translateY(22px);transition:opacity .65s,transform .65s}.p-motion [data-p-reveal].p-visible{opacity:1;transform:none}
@media(max-width:800px){.p-wrap{width:calc(100% - 40px)}.p-header{height:80px;gap:20px}.p-header>nav{gap:15px}.p-header>nav a:nth-child(3){display:none}.p-hero{grid-template-columns:1fr;gap:25px;padding-block:42px 60px;min-height:0}.p-hero-copy{max-width:620px}.p-hero h1{font-size:clamp(39px,8vw,62px);letter-spacing:-2px}.p-hero-visual{min-height:400px;max-width:550px;width:100%;margin:auto}.p-hero-screen{max-height:360px}.p-orbit-two{width:100%}.p-section-heading{display:block;margin-top:45px}.p-section-heading>p{margin-top:18px}.p-demo{grid-template-columns:1fr}.p-demo-stage{padding:40px 25px;min-height:330px}.p-demo-controls{border-left:0;border-top:1px solid #ffffff12;padding:26px}.p-features{gap:22px;padding-block:55px}.p-features h2{font-size:20px}.p-related{grid-template-columns:1fr}.p-next h2{font-size:35px}.p-shot img{height:330px}.p-footer{flex-wrap:wrap}.p-footer nav{width:100%}}
@media(max-width:420px){.p-wrap{width:calc(100% - 32px)}.p-header{gap:15px}.p-brand{font-size:20px}.p-header>nav{gap:12px;font-size:10px}.p-header>nav a:nth-child(2){display:none}.p-hero-visual{min-height:330px}.p-hero-screen{max-height:290px}.p-kicker{font-size:9px!important;letter-spacing:1px}.p-features{grid-template-columns:1fr;padding-block:35px}.p-features h2{margin-top:15px}.p-gallery figure{max-width:90%}.p-shot img{height:290px}.p-actions{gap:18px}.p-demo-controls{padding:24px 20px}.p-orbit-demo{width:235px;height:235px}}
@media(prefers-reduced-motion:reduce){.portfolio-page *,.p-experience *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.p-motion [data-p-reveal]{opacity:1;transform:none}.p-hero-screen,.p-hero-emblem{transform:none}.p-burst{display:none}}

/* Keep decorative orbits inside their column; galleries scroll in their own rail. */
.p-hero-visual{overflow:clip}
.p-demo-section,.p-inside{scroll-margin-top:100px}

/* Why Me: a website illustration, independent of the native app UI. */
.p-demo[data-demo=table]{--p-accent:#f5a524;background:#1c1916}
.p-demo[data-demo=table] .p-demo-stage{background:radial-gradient(ellipse,#6b482a30,transparent 70%)}
.p-friends-table{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:38px 65px;padding:20px 0;max-width:100%}
.p-coaster{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:108px;height:108px;border:5px double #c4a47b;border-radius:50%;background:#e9d4ad;color:#3e3024;transform:rotate(-8deg);transition:transform .35s,box-shadow .35s}
.p-coaster:nth-child(even){transform:rotate(9deg)}.p-coaster strong{font-size:14px}.p-coaster-face{font-size:38px;line-height:1}
.p-table-bell{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#f5a524;font-size:28px}
.p-coaster.is-picked{outline:3px solid #f5a524;outline-offset:6px;transform:rotate(0) scale(1.08);box-shadow:0 0 40px #f5a52430}
.is-drawing .p-coaster{animation:p-coaster-light .3s 3 alternate}.is-drawing .p-coaster:nth-child(even){animation-delay:.1s}
@keyframes p-coaster-light{to{box-shadow:0 0 25px #f5a52455;transform:translateY(-5px)}}
@media(max-width:420px){.p-friends-table{gap:35px 45px}.p-coaster{width:92px;height:92px}}