@font-face{font-family:Cleo;src:url('assets/cleo-variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
/* Self-hosted (assets/, not a CDN) — used ONLY inside phone-mockup interiors
   (.exp-* content) to match the real app's UI font; the site's display font
   (Cleo) is unchanged everywhere else. */
@font-face{font-family:'DM Sans';src:url('assets/dm-sans-variable.woff2') format('woff2');font-weight:100 1000;font-display:swap}
:root{--ink:#2b2321;--paper:#fbfaf8;--peach:#e5b292;--blue:#c9dce0;--radius:38px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Cleo,Arial,sans-serif;font-weight:400;overflow-x:hidden}a{color:inherit;text-decoration:none}.loader{position:fixed;inset:0;background:#1b2b3a;z-index:999;display:grid;place-items:center;transition:opacity 1s ease,visibility 1s}.loader.hide{opacity:0;visibility:hidden}.loader span{width:126px;height:62px;border:3px solid #ffffff45;border-radius:34px 34px 34px 0;position:relative}.loader span:after{content:'';position:absolute;inset:-3px;border:3px solid transparent;border-top-color:#fff;border-left-color:#fff;border-radius:inherit;animation:load 1.3s ease-in-out infinite}@keyframes load{to{transform:rotate(360deg)}}
.nav{position:fixed;z-index:50;left:32px;right:32px;top:32px;display:flex;align-items:center;justify-content:space-between;color:white;mix-blend-mode:difference;pointer-events:none}.nav>*{pointer-events:auto}.logo{font-size:40px;font-weight:650;letter-spacing:-2px;line-height:1;background:#ffffff17;border:1px solid #ffffff66;border-radius:22px 22px 22px 0;padding:2px 11px 5px}.nav-pill,.glass-btn{border:1px solid #ffffff55;background:#1d161533;backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 #ffffff22;border-radius:36px}.nav-pill{padding:18px 44px;display:flex;gap:72px}.nav-pill a{font-size:16px}.glass-btn{padding:18px 46px;font-size:15px}.hero-scroll{height:2600px}.hero-sticky{height:100vh;position:sticky;top:0;overflow:hidden;background:#c4d9dd}.scene{position:absolute;inset:-4%;background-position:center;background-size:cover;will-change:transform,filter,opacity}.scene-sky{background-image:url('assets/sky.avif');filter:brightness(.35) blur(9px);transform:scale(1.1)}.scene-land{background-image:url('assets/ground-far.avif');filter:brightness(.32) blur(9px);transform:scale(1.09)}.scene-grass{background-image:url('assets/ground-near.avif');filter:brightness(.3) blur(9px);transform:scale(1.18)}.scene-shade{position:absolute;inset:0;background:#14253899}.hero-phone{position:absolute;left:50%;top:48%;height:112vh;max-width:none;transform:translate(-50%,-26%) scale(1.35);opacity:0;will-change:transform,opacity}.hero-copy{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:white;z-index:5}.hero-copy h1{font-size:clamp(44px,5.2vw,76px);font-weight:350;letter-spacing:-3px;margin:0}.hero-copy p{font-size:30px;margin:94px 0 0}.dot-arrow{display:inline-grid;place-items:center;width:32px;height:32px;margin-left:6px;border-radius:50%;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:5px 5px}
section{position:relative}.intro{min-height:640px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px}.intro h2,.autopilot>h2,.latest>h2,.reviews>h2{font-size:clamp(43px,5vw,72px);font-weight:350;letter-spacing:-3px;margin:0}.intro em,.immersive em,.reviews em,.latest em{font-style:normal;color:var(--peach)}.intro h2{font-size:clamp(36px,5vw,72px)}.intro h2 em{display:block;white-space:nowrap}
.machine-intro h2{font-size:clamp(40px,5.5vw,84px);white-space:nowrap}
.machine-intro p{font-size:20px;line-height:1.4;color:#6b5c56;max-width:680px;margin:26px auto 0}
.inbox-screen{padding:46px 10px 0;text-align:left}
.personalized-screen.inbox-screen h4{font-size:26px;font-weight:500;letter-spacing:-1px;margin:0 0 10px;color:#302724}
.personalized-screen.inbox-screen p{background:none;border-radius:0;padding:0;box-shadow:none;font-size:11px;line-height:1.4;margin:0;color:#3c322d}
.personalized-screen.inbox-screen button{width:auto;background:#fff;color:#5d4f49;border:1px solid #d9cfc8;padding:6px 10px;border-radius:10px;margin-top:8px;font-size:9px}
.personalized-screen.inbox-screen button.go{background:#0F766E;border-color:#0F766E;color:#fff}
.personalized-screen.inbox-screen .inbox-actions button{margin-top:0}
.inbox-sec{font-size:8px;letter-spacing:1.4px;color:#7a6a63;margin:10px 2px 6px;display:flex;gap:5px}
.inbox-sec span{color:#b0a49d}
.inbox-card{background:#fff;border:1px solid #e8e0da;border-radius:14px;padding:10px 11px;margin-bottom:8px;box-shadow:0 8px 18px #60473d0f}
.inbox-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.inbox-pill{font-size:8px;padding:3px 7px;border-radius:999px;background:#f1ece7;color:#6d5d56}
.inbox-badge{font-size:8px;padding:3px 7px;border-radius:999px;background:#e7f4f2;color:#0F766E;font-weight:600}
.inbox-time{font-size:8px;color:#a3968f}
.inbox-item{font-size:11px;line-height:1.4;margin:0;color:#3c322d}
.inbox-actions{display:flex;gap:6px;margin-top:8px}
.inbox-btn{font:inherit;font-size:9px;padding:6px 10px;border-radius:10px;border:1px solid #d9cfc8;background:#fff;color:#5d4f49;margin-top:8px}
.inbox-actions .inbox-btn{margin-top:0}
.inbox-btn.go{background:#0F766E;border-color:#0F766E;color:#fff}.intro p{font-size:20px;line-height:1.3;color:#6b5c56}.soft-btn{display:inline-block;border:1px solid #a49791;padding:20px 48px;border-radius:34px;margin-top:28px;box-shadow:0 8px 22px #37201b17;transition:.35s}.soft-btn:hover{transform:translateY(-4px);box-shadow:0 14px 30px #37201b25}.rounded{margin:0 8px;border-radius:var(--radius);overflow:hidden}.statement{background:linear-gradient(160deg,#65787c,#b5c8ca);color:white;padding:58px 56px 70px;min-height:760px}.eyebrow{text-transform:uppercase;font-size:12px;letter-spacing:1.5px}.eyebrow.dark{color:#5f504c}.statement>h2{font-size:clamp(54px,7vw,106px);font-weight:350;line-height:.93;letter-spacing:-5px;margin:105px 0}.statement-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #ffffff66}.statement article{padding:32px 8% 0 0;display:grid;grid-template-columns:50px 1fr;gap:0 24px}.statement article+article{border-left:1px solid #ffffff66;padding-left:7%}.statement h3{font-size:36px;font-weight:400;line-height:1;margin:0}.statement article p{grid-column:2;max-width:430px;line-height:1.4;color:#eef4f4}.immersive{height:100vh;margin:8px;overflow:hidden;border-radius:var(--radius);color:white}.immersive img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s cubic-bezier(.2,.8,.2,1)}.immersive.visible img{transform:scale(1.06)}.immersive:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#1118,#0000 55%)}.immersive-copy{position:absolute;left:5%;bottom:8%;z-index:2}.immersive h2{font-size:clamp(38px,5vw,72px);font-weight:350;line-height:1;letter-spacing:-3px}.autopilot{text-align:center;padding:100px 30px 0;min-height:930px;background:#f2eeea}.autopilot>h2{margin:28px 0}.orbit{height:520px;margin-top:20px;position:relative;overflow:hidden}.orb{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:350px;height:350px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff,#e8b997 38%,#7052a7 70%,#1d2634);box-shadow:0 30px 90px #644e9166;animation:float 5s ease-in-out infinite}.orbit:before,.orbit:after{content:'';position:absolute;left:50%;top:52%;border:1px solid #907d7755;border-radius:50%;transform:translate(-50%,-50%) rotate(-16deg)}.orbit:before{width:720px;height:290px}.orbit:after{width:900px;height:390px}.orbit-card{position:absolute;z-index:3;background:#faf9f6cc;backdrop-filter:blur(14px);padding:22px;border-radius:20px;box-shadow:0 20px 40px #34242022;text-align:left;width:190px;animation:float 4s ease-in-out infinite}.orbit-card>*{display:block}.orbit-card small{font-size:10px;letter-spacing:1px}.orbit-card strong{font-size:28px;margin:12px 0}.orbit-card span{font-size:12px;color:#76645e}.card-a{left:17%;top:20%;transform:rotate(-7deg)}.card-b{right:17%;top:48%;transform:rotate(6deg);animation-delay:-1.5s}@keyframes float{50%{translate:0 -12px}}
.smart{background:#20282e;color:white;min-height:720px;padding:64px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px}.smart-copy h2{font-size:clamp(64px,8vw,112px);font-weight:350;line-height:.86;letter-spacing:-6px;margin:70px 0 32px}.smart-copy p{font-size:19px;line-height:1.45;max-width:500px;color:#d8dedd}.smart img{width:100%;height:580px;object-fit:cover;border-radius:28px}.glass-btn.inline{display:inline-block;margin-top:20px;border-color:#ffffff55}.reviews{background:#bfd2d5;padding:100px 0;min-height:850px}.reviews>h2{text-align:center}.marquee{overflow:hidden;margin-top:110px}.review-track{display:flex;gap:24px;width:max-content;animation:marquee 32s linear infinite}.review-track blockquote{width:420px;min-height:280px;background:#f6f4f0;border-radius:28px;margin:0;padding:42px;font-size:27px;line-height:1.2;box-shadow:0 18px 40px #334b5020}.review-track cite{display:block;font-size:13px;margin-top:38px;font-style:normal;text-transform:uppercase;letter-spacing:1px}@keyframes marquee{to{transform:translateX(-50%)}}.feature-list{padding:130px 7%}.feature-list>h2{font-size:clamp(58px,7vw,104px);font-weight:350;line-height:.92;letter-spacing:-5px;margin:0 0 70px}.feature-row{display:grid;grid-template-columns:70px 1fr 1fr;padding:32px 0;border-top:1px solid #9c908b;align-items:center}.feature-row h3{font-size:36px;font-weight:400;margin:0}.feature-row p{font-size:17px;line-height:1.4;max-width:450px}.latest{background:#262d31;color:white;padding:100px 5%}.latest>h2{text-align:center}.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:80px}.media-grid article{height:520px;background-size:cover;background-position:center;border-radius:28px;padding:34px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.media-grid article:before{content:'';position:absolute;inset:0;background:linear-gradient(#0000,#000b)}.media-grid article>*{position:relative}.media-grid span{font-size:30px;margin-bottom:auto}.media-grid h3{font-size:40px;font-weight:400;margin:0}.faq{padding:130px 10%;background:#f2eeea}.faq>h2{font-size:clamp(70px,9vw,130px);font-weight:350;letter-spacing:-6px;margin:0 0 60px}.faq details{border-top:1px solid #9d918d;padding:28px 0}.faq summary{list-style:none;font-size:29px;display:flex;justify-content:space-between;cursor:pointer}.faq summary i{font-style:normal}.faq details p{font-size:18px;max-width:720px;line-height:1.5;color:#6e605b}.download{background:linear-gradient(135deg,#e7b795,#b9d1d5);padding:100px 6%;min-height:520px}.download h2{font-size:clamp(68px,9vw,130px);font-weight:350;letter-spacing:-6px;line-height:.9;margin:0 0 70px}.store{display:inline-block;background:#171717;color:white;padding:18px 26px;border-radius:10px;margin-right:10px}.qr{float:right;font-size:120px;line-height:.5}footer{background:#272326;color:white;padding:80px 5% 35px}.footer-logo{display:inline-block}.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:70px 0}.footer-grid b,.footer-grid a{display:block;margin:12px 0}.footer-grid b{font-size:12px;letter-spacing:1px;color:#aaa}.reveal{opacity:0;filter:blur(12px);transform:translateY(45px);transition:opacity 1s,filter 1.1s,transform 1.1s cubic-bezier(.2,.8,.2,1)}.reveal.visible{opacity:1;filter:blur(0);transform:none}
@media(max-width:800px){.nav{left:14px;right:14px;top:14px}.nav-pill{display:none}.logo{font-size:30px}.glass-btn{padding:14px 22px}.hero-scroll{height:2100px}.hero-phone{height:90vh}.statement{padding:42px 24px}.statement>h2{margin:80px 0}.statement-grid,.smart,.media-grid{grid-template-columns:1fr}.statement article+article{border-left:0;border-top:1px solid #ffffff55;padding:30px 0}.smart{padding:40px 24px}.smart img{height:420px}.orbit-card{display:none}.feature-row{grid-template-columns:45px 1fr}.feature-row p{grid-column:2}.media-grid article{height:400px}.footer-grid{grid-template-columns:1fr}.qr{display:none}.rounded{border-radius:26px}.intro br{display:none}}
#hero-fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen}.water-glints{position:absolute;z-index:1;left:0;right:0;bottom:0;height:48%;opacity:.48;background:repeating-radial-gradient(ellipse at 50% 115%,transparent 0 16px,#eaffd922 17px 18px,transparent 19px 38px);filter:blur(1px);animation:glint-drift 7s linear infinite}/* Hero phone frame — ONE consolidated rule (fixed 330x610, scaled as a unit by GSAP). */
.hero-device{position:absolute;left:50%;top:48%;width:330px;height:610px;display:flex;flex-direction:column;border:8px solid #262525;border-radius:55px;background:#FAFAF9;box-shadow:0 25px 70px #0008,inset 0 0 0 2px #a9a6a4;transform:translate(-50%,-18%) scale(1.7);opacity:0;overflow:hidden;color:#2d2523;padding:0;z-index:2;will-change:transform,opacity}.hero-notch{position:absolute;top:13px;left:50%;translate:-50%;width:83px;height:24px;border-radius:14px;background:#1b1b1b}.hero-status{font-size:11px;display:flex;justify-content:space-between;padding:0 8px}.hero-screen{padding:50px 6px 0}.hero-screen h3{font-size:35px;font-weight:400;margin:0 0 30px}.hero-screen .bubble{background:white;border-radius:16px 16px 3px 16px;font-size:11px;padding:10px;width:max-content;margin-left:auto}.hero-screen p{font-size:12px;line-height:1.55}.hero-screen p span{display:block}.typing{display:flex;gap:3px;margin-top:9px;opacity:0}.typing i{width:4px;height:4px;border-radius:50%;background:#685953;animation:typing 1.1s infinite}.typing i:nth-child(2){animation-delay:.16s}.typing i:nth-child(3){animation-delay:.32s}.hero-input{position:absolute;left:16px;right:16px;bottom:66px;background:#ffffffbb;border:1px solid #ddd;border-radius:24px;padding:14px;font-size:11px}.hero-input b{float:right;font-size:17px}.hero-dock{position:absolute;bottom:13px;left:20px;right:20px;display:flex;justify-content:space-between;text-align:center}.hero-dock span{font-size:18px}.hero-dock small{display:block;font-size:8px;margin-top:5px}.talk-film{height:720px;position:relative;color:white}.talk-video,.cinema-card>video,.cinema-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.talk-video{transform:scale(1.015)}.talk-film:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#14212670,transparent 68%),linear-gradient(0deg,#0004,transparent 45%)}.film-grain{position:absolute;inset:0;z-index:1;opacity:.18;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");animation:grain .24s steps(2) infinite}.talk-copy{position:absolute;z-index:2;left:56px;top:56px;width:58%}.talk-copy h2{font-size:clamp(52px,6vw,92px);font-weight:350;line-height:.92;letter-spacing:-5px;margin:74px 0 0}.immersive-pair{height:720px;margin:8px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.cinema-card{position:relative;overflow:hidden;border-radius:var(--radius);color:white}.cinema-card>img,.cinema-card>video{transition:transform 1.7s cubic-bezier(.2,.8,.2,1)}.immersive-pair.visible .cinema-card>img,.immersive-pair.visible .cinema-card>video{transform:scale(1.045)}.card-sheen{position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,#111b),linear-gradient(120deg,#dff7ff1a,transparent 40%)}.cinema-copy{position:absolute;z-index:1;left:40px;right:40px;bottom:38px}.cinema-copy h3{font-size:25px;font-weight:400;margin:0 0 15px}.cinema-copy p{font-size:16px;line-height:1.4;max-width:390px;margin:0;color:#f2eeee}.machine-intro{height:548px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:50px}.machine-intro h2{font-size:clamp(50px,6vw,88px);font-weight:350;line-height:.94;letter-spacing:-3px;margin:0}.machine-intro em{font-style:normal;color:var(--peach)}.autopilot-film{height:720px;position:relative;color:white}.autopilot-film>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 2s cubic-bezier(.2,.8,.2,1)}.autopilot-film.visible>img{transform:scale(1.075)}.autopilot-film:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#111a,transparent 72%)}.autopilot-haze{position:absolute;inset:-20%;z-index:1;background:radial-gradient(circle at 68% 35%,#fff5 0 3%,transparent 22%),radial-gradient(circle at 75% 60%,#efc28a33,transparent 28%);animation:haze 8s ease-in-out infinite alternate}.autopilot-copy{position:absolute;z-index:2;left:56px;top:55px;max-width:720px}.autopilot-copy h2{font-size:clamp(52px,6vw,88px);font-weight:350;line-height:.94;letter-spacing:-5px;margin:76px 0 30px}@keyframes glint-drift{to{background-position:60px 18px}}@keyframes typing{50%{transform:translateY(-3px);opacity:.35}}@keyframes grain{0%{transform:translate(0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}}@keyframes haze{to{transform:translate3d(-4%,3%,0) scale(1.06)}}@media(max-width:800px){.talk-film,.immersive-pair,.autopilot-film{height:640px}.talk-copy,.autopilot-copy{left:25px;top:35px;width:90%}.talk-copy h2,.autopilot-copy h2{letter-spacing:-3px}.immersive-pair{height:auto;grid-template-columns:1fr}.cinema-card{height:620px}.machine-intro{height:430px;padding:28px}.machine-intro h2{white-space:normal}.cinema-copy{left:25px;right:25px}}
.talk-film.reveal,.immersive-pair.reveal,.autopilot-film.reveal{opacity:1;filter:none;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}.reveal{opacity:1;filter:none;transform:none}.loader{display:none}}

/* Current lower-page treatment */
.reviews{min-height:0;padding:105px 0 90px;background:linear-gradient(180deg,#fbfaf8 0 24%,#f9ede5 62%,#f3d8c7 100%)}
.review-head{max-width:1180px;margin:auto;padding:0 38px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.review-head h2{font-size:clamp(58px,7vw,102px);font-weight:350;line-height:.9;letter-spacing:-5px;margin:0;text-align:left}
.review-head em{font-style:normal;color:var(--peach)}
.carousel-controls,.drag-hint{display:flex;align-items:center;gap:8px;text-transform:uppercase;font-size:11px;letter-spacing:1.2px}
.carousel-controls button,.drag-hint button{width:46px;height:46px;border:1px solid #9d918c;border-radius:50%;background:#fbfaf8;color:var(--ink);font-size:19px;cursor:pointer;transition:transform .25s,background .25s,color .25s}
.carousel-controls button:hover,.drag-hint button:hover{background:var(--ink);color:white;transform:translateY(-3px)}
.review-viewport,.feature-viewport{overflow-x:hidden;scrollbar-width:none;cursor:grab;user-select:none;touch-action:pan-y;overscroll-behavior-x:contain}
.review-viewport::-webkit-scrollbar,.feature-viewport::-webkit-scrollbar{display:none}
.review-viewport.dragging,.feature-viewport.dragging{cursor:grabbing;scroll-snap-type:none}
.review-viewport{padding:85px max(32px,calc((100vw - 1180px)/2)) 40px;scroll-snap-type:x mandatory}
.review-track{display:flex;gap:24px;width:max-content;animation:none!important;will-change:transform}
.review-card{width:min(600px,80vw);min-height:330px;flex:0 0 auto;background:#fbfaf8;border-radius:46px;display:flex;align-items:center;overflow:hidden;scroll-snap-align:center;box-shadow:0 22px 60px #633b2920;border:1px solid #fff}
.review-card blockquote{width:auto;min-height:0;background:none;border-radius:0;margin:0;padding:50px 54px;font-size:clamp(21px,1.9vw,26px);line-height:1.22;box-shadow:none}
.review-card cite{display:block;font-size:11px;margin-top:34px;font-style:normal;text-transform:uppercase;letter-spacing:1.2px;color:#756761}
.review-portrait{height:100%;border-radius:50%;display:grid;place-items:center;position:relative;overflow:hidden;isolation:isolate}
.review-portrait:before,.review-portrait:after{content:'';position:absolute;border-radius:50%;z-index:-1}
.review-portrait:before{width:66%;height:78%;background:#342d3e;bottom:-8%;box-shadow:0 -65px 0 -24px #e9aa86}
.review-portrait:after{width:46%;height:46%;background:radial-gradient(circle at 37% 43%,#2e2727 0 3%,transparent 3.8%),radial-gradient(circle at 63% 43%,#2e2727 0 3%,transparent 3.8%),radial-gradient(ellipse at 50% 66%,transparent 0 10%,#2e2727 11% 14%,transparent 15%),#e7ad8b;top:16%;box-shadow:0 -38px 0 -8px #342d3e}
.review-portrait span{position:absolute;right:15%;top:16%;font-size:25px;color:white}
.portrait-one{background:linear-gradient(145deg,#ddad8b,#c78568)}.portrait-two{background:linear-gradient(145deg,#ccdce0,#71959e)}.portrait-two:before{background:#4e5e4d}.portrait-three{background:linear-gradient(145deg,#e4d6f1,#8d72aa)}.portrait-three:before{background:#342c48}.portrait-four{background:linear-gradient(145deg,#f0c894,#cc7c57)}.portrait-four:before{background:#253e4a}

.brand-film{height:720px;margin-top:8px;color:white;position:relative;isolation:isolate}
.brand-film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 2.4s cubic-bezier(.2,.8,.2,1)}
.brand-film.visible img{transform:scale(1.075)}
.brand-film-shade{position:absolute;inset:0;background:linear-gradient(90deg,#17202699 0 34%,transparent 74%),linear-gradient(0deg,#16100d55,transparent 56%)}
.brand-film h2{position:absolute;left:4.5%;top:7%;margin:0;font-size:clamp(48px,5vw,76px);font-weight:350;line-height:1.02;letter-spacing:-4px;max-width:780px}
.brand-film-mark{position:absolute;left:4.5%;bottom:5%;font-size:42px;font-weight:650;letter-spacing:-2px;border:1px solid #ffffff88;background:#ffffff20;backdrop-filter:blur(14px);padding:0 12px 5px;border-radius:22px 22px 22px 0}

.feature-orbit{min-height:790px;padding:125px 0 80px;background:radial-gradient(circle at 58% 40%,#e6a97755,transparent 25%),#fbfaf8;overflow:hidden}
.feature-orbit-head{max-width:1180px;margin:auto;padding:0 38px 20px;display:flex;justify-content:space-between;align-items:center}
.feature-viewport{perspective:1150px;scroll-snap-type:x mandatory;padding:38px 0 70px}
.feature-track{width:max-content;display:flex;gap:88px;padding:0 calc(50vw - 190px);transform-style:preserve-3d;will-change:transform}
.feature-card{--tilt:0deg;--depth:0px;position:relative;flex:0 0 380px;height:480px;border-radius:42px;overflow:hidden;color:white;padding:30px;background-image:var(--card-image),linear-gradient(145deg,#45404e,#171a20);background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:flex-end;scroll-snap-align:center;transform:rotateY(var(--tilt)) translateZ(var(--depth));transform-style:preserve-3d;transition:transform .16s linear,filter .3s,opacity .3s;box-shadow:0 30px 65px #49302628}
.feature-card-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0000 32%,#111d 100%)}
.feature-card>*{position:relative}.feature-card b{position:absolute;top:28px;right:30px;font-weight:400;font-size:12px;letter-spacing:1px}.feature-card p{font-size:11px;text-transform:uppercase;letter-spacing:1.3px;margin:0 0 8px}.feature-card h3{font-size:36px;line-height:.95;font-weight:400;margin:0 0 16px;letter-spacing:-1px}.feature-card span{font-size:16px;line-height:1.28;max-width:290px;color:#f6f1ee}.feature-card-copy{background:#d99b78;color:#2b2321}.feature-card-copy span{color:#463530}.feature-card-blue{background:#b9d2d7}.feature-symbol{position:absolute;left:0;right:0;top:74px;text-align:center;font-size:82px;letter-spacing:-8px}.feature-progress{width:min(360px,55vw);height:2px;background:#d2c7c1;margin:auto}.feature-progress i{display:block;width:20%;height:100%;background:#493a36;transition:transform .15s}
/* Feature cards that show a small real-app UI snippet on a soft gradient
   instead of a photo (see --card-image inline style: a gradient value works
   as the same background layer a photo url() would). Dark ink text, same as
   .feature-card-copy, so it reads against the light gradient. */
.feature-card-ui{color:#2b2321}
.feature-card-ui span{color:#463530}
/* Positioned like .feature-symbol (top area of the padding box, clear of the
   numeral badge), sized by its own content so it never clips at the card's
   two fixed widths (380px desktop / 310px mobile, set in the media query). */
.feature-snip{position:absolute;left:0;right:0;top:58px;display:flex;flex-direction:column;gap:8px}
.feature-snip>.exp-pill{align-self:flex-end}

.latest{background:#f1efec;color:var(--ink);padding:120px 4.5% 110px;margin-top:8px;overflow:hidden}
.latest-head{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;margin-bottom:80px}.latest-head h2{font-size:clamp(58px,7vw,100px);font-weight:350;line-height:.9;letter-spacing:-5px;margin:0;text-align:right}.latest-head em{color:var(--peach)}
.latest .media-grid{gap:8px;margin:0}.latest .media-grid article{height:590px;border-radius:38px;color:white;padding:36px}.latest .media-grid article:before{background:linear-gradient(#0000 36%,#000c)}.latest .media-grid span{width:54px;height:54px;border:1px solid #ffffff99;border-radius:50%;display:grid;place-items:center;backdrop-filter:blur(10px);font-size:15px}.latest .media-grid h3{font-size:42px;letter-spacing:-1.5px}.news{padding:115px 0 125px;background:var(--paper);overflow:hidden}
.news-head{text-align:center;margin-bottom:64px;padding:0 24px}
.news-head h2{font-size:clamp(48px,6vw,92px);font-weight:350;letter-spacing:-4px;margin:16px 0 0}
.news-track{display:flex;width:max-content;animation:news-drift 55s linear infinite}
.news-marquee:hover .news-track{animation-play-state:paused}
.news-pill{flex:0 0 auto;display:flex;align-items:center;gap:36px;height:130px;margin-right:10px;padding:0 58px 0 46px;border-radius:80px;max-width:660px;transition:transform .3s}
.news-pill:hover{transform:translateY(-5px)}
.news-pill small{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:1.4px;white-space:nowrap;color:#4a342c}
.news-pill span{font-size:25px;line-height:1.12;letter-spacing:-.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-pill:nth-child(odd){background:linear-gradient(90deg,#fdefe2,#eec19d)}
.news-pill:nth-child(even){background:#edeae6}
@keyframes news-drift{to{transform:translateX(-50%)}}

.faq{margin:8px;padding:95px max(5%,60px);background:#f2f0ed;display:grid;grid-template-columns:.8fr 1.2fr;gap:10%;border-radius:var(--radius);min-height:690px}
.faq-title h2{font-size:clamp(78px,9vw,132px);font-weight:350;line-height:.84;letter-spacing:-7px;margin:80px 0 34px}.faq-title p{font-size:18px;line-height:1.4;max-width:300px;color:#756862}.faq-list{padding-top:76px}.faq details{border:0;padding:0;margin:0 0 12px;background:#fbfaf8;border-radius:0 30px 30px 30px;box-shadow:0 10px 24px #57413818;overflow:hidden}.faq summary{font-size:17px;padding:22px 24px;align-items:center}.faq summary i{width:35px;height:35px;display:grid;place-items:center;border:1px solid #c9bdb7;border-radius:50%}.faq details p{font-size:15px;margin:0;padding:0 70px 24px 24px}.faq details[open] summary i{transform:rotate(45deg)}

.download{min-height:670px;margin-top:8px;padding:90px 6%;display:grid;grid-template-columns:1fr 380px;align-items:center;background:radial-gradient(circle at 78% 35%,#fff8,transparent 20%),linear-gradient(135deg,#f5e4da,#c4d8db)}
.download h2{font-size:clamp(78px,10vw,142px);line-height:.82;margin:72px 0 62px}.qr-card{width:310px;height:370px;justify-self:center;background:#fbfaf8;border-radius:28px;padding:28px;transform:rotate(4deg);box-shadow:0 30px 80px #50372e24;display:flex;flex-direction:column;gap:18px}.qr-pattern{flex:1;background:repeating-conic-gradient(#302626 0 25%,transparent 0 50%) 0/22px 22px;border:18px solid #fbfaf8;outline:3px solid #302626}.qr-card small{text-align:center;font-size:10px;letter-spacing:1.5px}

@media(max-width:800px){.review-head{align-items:flex-start}.carousel-controls{display:none}.review-head h2{letter-spacing:-3px}.review-viewport{padding-top:55px}.review-card{width:86vw;min-height:0;border-radius:32px}.review-card blockquote{padding:34px 30px;font-size:21px}.review-card cite{margin-top:15px}.brand-film{height:650px}.brand-film h2{left:25px;top:40px;letter-spacing:-3px}.feature-orbit{padding-top:90px}.feature-orbit-head{padding:0 24px}.drag-hint{font-size:0}.feature-track{gap:38px;padding:0 calc(50vw - 155px)}.feature-card{flex-basis:310px;height:430px}.latest{padding:90px 8px 0}.latest-head{padding:0 20px;display:block}.latest-head h2{text-align:left;margin-top:55px;letter-spacing:-3px}.latest .media-grid{grid-template-columns:1fr}.latest .media-grid article{height:500px}.news{padding:80px 0 90px}.news-head{margin-bottom:44px}.news-head h2{letter-spacing:-3px}.news-pill{height:96px;gap:18px;margin-right:8px;padding:0 36px 0 28px;max-width:82vw}.news-pill span{font-size:18px}.faq{padding:70px 22px;grid-template-columns:1fr;gap:0}.faq-title h2{margin:48px 0 20px;letter-spacing:-4px}.faq-list{padding-top:35px}.download{grid-template-columns:1fr;padding:75px 24px}.download h2{letter-spacing:-5px}.qr-card{display:none}}
/* Short-landscape phones/tablets (e.g. 730x384): the fixed 650px mobile
   height above is much taller than the viewport, so scrolling through the
   section shows nothing but the photo's blank phone screen for most of the
   scroll — headline and the bottom "eol" mark scroll out of view together.
   Sizing the section to the viewport itself keeps headline, phone, and mark
   in one frame (matching how the 720px desktop height already reads at
   1280x800), and nudging the photo's focal point up trims some of the
   blank screen in favor of the sky/headline area above it. */
@media(max-width:800px) and (max-height:480px){.brand-film{height:100vh}.brand-film img{object-position:center 25%}}

@media(prefers-reduced-motion:reduce){.feature-card{transform:none!important}.news-track{animation:none}.review-viewport,.feature-viewport{scroll-behavior:auto}}

/* Cloud-led hero and HTML/CSS talk-therapy scene */
.scene-sky,.scene-cloud-mid,.scene-cloud-near{background-image:url('assets/cloudscape-scroll-v2.png');background-size:cover;background-repeat:no-repeat}
.scene-sky{background-position:center 48%;filter:brightness(.42) saturate(.78) blur(8px);transform:scale(1.13)}
.scene-cloud-mid{background-position:62% 44%;opacity:.28;mix-blend-mode:screen;filter:brightness(.46) blur(12px);transform:scale(1.31);mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 72%,transparent 100%)}
.scene-cloud-near{background-position:34% 62%;opacity:.42;mix-blend-mode:screen;filter:brightness(.5) blur(14px);transform:scale(1.48);mask-image:linear-gradient(to bottom,transparent 0 36%,#000 70%,#000 100%)}
.cloud-haze{position:absolute;inset:-25%;z-index:1;pointer-events:none;background:radial-gradient(circle at 18% 62%,#fff9,transparent 21%),radial-gradient(circle at 78% 28%,#ffe7d577,transparent 24%);filter:blur(16px);mix-blend-mode:soft-light;animation:cloud-breathe 9s ease-in-out infinite alternate}
@keyframes cloud-breathe{to{transform:translate3d(-2.5%,1.5%,0) scale(1.035);opacity:.72}}

.talk-film{height:auto;min-height:780px;background:#bfcfd6;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 24px 60px;box-sizing:border-box}
.talk-cloud-bg,.talk-cloud-near{position:absolute;inset:-5%;background-image:url('assets/cloudscape-scroll-v2.png');background-size:cover;background-repeat:no-repeat;will-change:transform,filter}
.talk-cloud-bg{background-position:center;filter:brightness(.74) saturate(.72);transform:scale(1.08)}
.talk-cloud-near{inset:-12%;background-position:25% 72%;opacity:.38;filter:blur(8px) brightness(1.08);transform:scale(1.34);mix-blend-mode:screen;mask-image:linear-gradient(to bottom,transparent 0 36%,#000 72%)}
.talk-film:after{z-index:1;background:linear-gradient(180deg,#17202d80,#17202d40 42%,#17202d8c)}
.talk-copy{position:static;z-index:3;width:auto;max-width:820px;margin:0 auto}.talk-copy .eyebrow{margin-bottom:12px}.talk-copy h2{text-shadow:0 3px 28px #24374544;margin:16px auto 0;font-size:clamp(44px,5vw,74px)}
.talk-sub{margin:22px auto 0;font-size:clamp(16px,1.5vw,19px);line-height:1.4;color:rgba(255,255,255,.82);max-width:34ch;text-shadow:0 2px 16px #24374555}

/* Features section stage — the interactive phone + day-type chips, on the dark backdrop. */
.talk-stage{position:static;z-index:3;margin:38px auto 0;display:flex;flex-direction:column;align-items:center;gap:22px}
.talk-phone-mount{will-change:transform,opacity}
.talk-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
/* Chips restyled for contrast on the dark/bluish backdrop: translucent-white idle,
   solid-white (teal text) active. Do NOT reuse the light-section dark-teal chip. */
.talk-chip{font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;border-radius:999px;
  padding:9px 16px;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(6px);transition:transform .15s,background .2s,color .2s,box-shadow .2s}
.talk-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.24)}
.talk-chip[aria-pressed=true]{background:#fff;color:#0F766E;border-color:#fff;box-shadow:0 8px 22px rgba(20,33,45,.35)}
.talk-chip:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media(max-width:800px){.scene-cloud-mid{opacity:.22}.scene-cloud-near{opacity:.32}.talk-film{height:880px}.talk-copy{width:90%;z-index:4}.talk-copy h2{font-size:47px}}
/* Narrow phones only (not the 730-800px tablet/landscape range, which has room
   for the three chips on one line) — let them wrap gracefully. */
@media(max-width:600px){.talk-chips{max-width:340px}}
@media(prefers-reduced-motion:reduce){.cloud-haze{animation:none}}

/* Video-free personalized feature scene */
.personalized-card{background:radial-gradient(circle at 72% 18%,#627584 0,transparent 28%),radial-gradient(circle at 20% 82%,#b77a8c55,transparent 34%),#18232d}
.personalized-scene{position:absolute;inset:0;overflow:hidden;transform:scale(1.015);transition:transform 1.7s cubic-bezier(.2,.8,.2,1)}
.immersive-pair.visible .personalized-scene{transform:scale(1.045)}
.personalized-orbit{position:absolute;left:50%;top:43%;translate:-50% -50%;border:1px solid #d7edee33;border-radius:50%;animation:personalized-spin 18s linear infinite}.personalized-orbit:after{content:'';position:absolute;width:9px;height:9px;border-radius:50%;background:#f0c098;box-shadow:0 0 25px #f0c098;left:8%;top:18%}.personalized-orbit.orbit-one{width:540px;height:250px;rotate:-14deg}.personalized-orbit.orbit-two{width:660px;height:330px;rotate:26deg;animation-direction:reverse;animation-duration:26s}
.personalized-phone{position:absolute;z-index:2;left:50%;top:42px;width:275px;height:540px;translate:-50%;border:8px solid #17191c;border-radius:48px;background:linear-gradient(160deg,#f0c3a7,#f8eee7 62%);box-shadow:0 42px 90px #0008,inset 0 0 0 2px #ada8a5;overflow:hidden;padding:29px 17px;transform:rotate(3deg);animation:personalized-float 6s ease-in-out infinite}
.personalized-notch{position:absolute;left:50%;top:11px;translate:-50%;width:74px;height:22px;border-radius:14px;background:#181818}.personalized-status{display:flex;justify-content:space-between;font-size:9px;padding:0 6px}.personalized-screen{padding:55px 3px 0;color:#302724}.personalized-screen>small{font-size:8px;letter-spacing:1.6px}.personalized-screen h4{font-size:36px;font-weight:400;line-height:.91;letter-spacing:-2px;margin:25px 0 38px}.personalized-screen p{background:#fff;border-radius:15px 15px 15px 3px;padding:14px;font-size:11px;line-height:1.38;box-shadow:0 12px 25px #60473d14}.personalized-screen button{width:100%;border:0;background:#a676d3;color:white;padding:14px;border-radius:18px;margin-top:20px;font:inherit;font-size:11px}
.memory-chip{position:absolute;z-index:3;width:154px;padding:17px;background:#f7f4f0dd;color:#302724;border:1px solid #ffffff80;border-radius:18px;box-shadow:0 20px 45px #0005;backdrop-filter:blur(14px);animation:memory-float 5s ease-in-out infinite}.memory-chip>*{display:block}.memory-chip small{font-size:7px;letter-spacing:1.3px}.memory-chip strong{font-size:17px;font-weight:400;margin:9px 0 4px}.memory-chip span{font-size:9px;color:#75655f}.chip-coffee{left:6%;top:23%;rotate:-7deg}.chip-payday{right:5%;top:49%;rotate:7deg;animation-delay:-2.2s}
@keyframes personalized-spin{to{transform:rotate(360deg)}}@keyframes personalized-float{50%{transform:rotate(-1deg) translateY(-13px)}}@keyframes memory-float{50%{translate:0 -12px}}
@media(max-width:800px){.personalized-phone{width:245px;height:500px}.memory-chip{width:128px;padding:12px}.chip-coffee{left:-3%}.chip-payday{right:-3%}.personalized-screen h4{font-size:31px}}
@media(prefers-reduced-motion:reduce){.personalized-orbit,.personalized-phone,.memory-chip{animation:none}}

/* Responsive hero composition */
.nav>.glass-btn{padding:14px 26px;font-size:14px;white-space:nowrap}
.hero-copy{place-content:start center;padding:clamp(118px,19vh,164px) 24px 0}
.hero-copy h1{width:min(1180px,calc(100vw - 48px));font-size:clamp(40px,min(5.2vw,8.2vh),76px);line-height:.97;letter-spacing:-.045em}
.hero-copy p{margin-top:clamp(34px,5vh,52px);font-size:clamp(16px,2vw,20px);color:rgba(255,255,255,.62);letter-spacing:.02em}
.scene-sky{inset:-9% -12% -14%;background-repeat:no-repeat}
/* .scene-land (treeline+meadow) and .scene-grass (close-up grass, drawn on
   top) are two wide bottom-anchored strips instead of a repeat-x tile: each
   is `background-size:cover` against its own box, which by construction
   scales to fill that box with no gap and no repeat seam at any aspect
   ratio. Anchoring both to the hero's own bottom edge (left/right/bottom:0)
   guarantees grass always reaches the viewport bottom. Heights are simple
   vh fractions (not container %, not per-breakpoint), so the strips keep a
   consistent proportion of the screen everywhere; .scene-grass is shorter
   and overlaps the lower part of .scene-land, and its own feathered
   (transparent-to-opaque) top edge blends the two together instead of a
   hard seam. Do not go back to repeat-x/tiling here: any visible tile
   boundary in the source crop shows as a hard vertical line. */
.scene-land,.scene-grass{position:absolute;left:0;right:0;bottom:0;top:auto;background-repeat:no-repeat;background-position:center bottom;background-size:cover}
/* `background-size:cover` anchored to the bottom can crop straight through a
   strip's own top edge at some aspect ratios (the source art's feathered top
   only survives the crop sometimes), which reintroduces a hard horizontal
   line. A percentage-based mask fade on the box itself (not the source
   image) guarantees a soft top at every size instead of relying on the
   source crop landing right. */
.scene-land{height:42vh;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20%);mask-image:linear-gradient(to bottom,transparent 0,#000 20%)}
.scene-grass{height:30vh;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%);mask-image:linear-gradient(to bottom,transparent 0,#000 26%)}
@media(max-aspect-ratio:4/3){.hero-copy{padding-top:clamp(100px,16vh,145px)}.hero-copy h1{width:min(92vw,720px);font-size:clamp(34px,min(9.4vw,6.8vh),62px);line-height:.96}.hero-copy p{margin-top:clamp(30px,4.5vh,46px)}}
/* Wide-short windows (min-aspect-ratio 7/4, e.g. 1536x720) make the box
   noticeably wider relative to its own height than the source art's aspect
   ratio, so `cover` crops deeper into .scene-land's feathered/transparent
   top before the box even starts — the mask above then fades already-solid
   canopy instead of the source's soft edge, which reads as a hard blurred
   band. Same box-vs-source-aspect mismatch, just further along, so it takes
   a taller fade to land back in already-faint content. */
@media(min-aspect-ratio:7/4){.scene-land{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 46%);mask-image:linear-gradient(to bottom,transparent 0,#000 46%)}}
@media(max-width:520px){.nav>.glass-btn{padding:12px 20px}.hero-copy{padding-inline:16px}.hero-copy h1{width:94vw;letter-spacing:-.035em}}

/* === added: hero headline two-beat + typing/word reveal === */
.hero-copy h1{display:flex;flex-direction:column;align-items:center}
.hl1{font-size:1em;color:var(--peach);line-height:1.06;transform-origin:center;will-change:transform,opacity}
.hl-caret{display:inline-block;width:.05em;height:.86em;margin-left:.04em;vertical-align:-.05em;background:var(--peach);animation:hl-blink 1s steps(1) infinite}
.hl-caret.hide{opacity:0;animation:none}
.hl-rule{width:1.1em;height:2px;border-radius:2px;background:var(--peach);margin:.24em 0;box-shadow:0 0 12px rgba(229,178,146,.6);opacity:0;transform:scaleX(0);will-change:transform,opacity}
.hl2{color:#fff}
.hl2 .w{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(.18em);will-change:opacity,filter,transform}
.dot-arrow{display:inline;color:inherit;background:none;width:auto;height:auto;margin-left:.18em;border-radius:0}
@keyframes hl-blink{50%{opacity:0}}

/* === added: experiment mockup inside the phone === */
.hero-screen.exp{padding:16px 4px 0;display:flex;flex-direction:column;gap:7px}
.exp-row{display:flex;gap:6px;align-items:flex-start}
.exp-row.me{justify-content:flex-end}
.exp-row.eli{justify-content:flex-start}
.exp-av{width:20px;height:20px;border-radius:7px;flex-shrink:0;background:linear-gradient(135deg,#e8f5f4,#c8e8e5);border:1px solid rgba(15,118,110,.15);display:grid;place-items:center;font-size:11px}
.exp-bub{font-size:10px;line-height:1.45;padding:8px 9px;max-width:82%}
/* Dense variant (item.dense:true) — a notch smaller, for screens that stack
   more conversational beats than usual and need every row to fit the fixed
   phone height without clipping anything. */
.exp-bub.dense{font-size:9px;line-height:1.25;padding:5px 8px}
/* User bubble: teal, with the app's layered depth (inset top highlight + soft
   drop shadow) and its asymmetric radius, scaled down for the mockup. */
.exp-bub.me{background:#0F766E;color:#fff;border-radius:14px 14px 4px 14px;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 4px 12px rgba(15,118,110,.35)}
/* WhatsApp-channel variant: same bubble shape as .me, WhatsApp green instead
   of the app's teal (used only in the "It lives in WhatsApp too" feature card). */
.exp-bub.wa{background:#25D366;color:#0b3b1e;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 4px 12px rgba(37,211,102,.35)}
/* Assistant bubble: white card with hairline border + soft shadow, matching radius. */
.exp-bub.eli{background:#fff;color:#22303b;border:1px solid #e7e5e4;border-radius:14px 14px 14px 4px;box-shadow:0 2px 12px rgba(15,23,42,.06)}
.exp-bub.eli b{color:#0F766E;font-weight:700}
.exp-card{margin-top:6px;border:1px solid #e7e5e4;background:#f6f5f4;border-radius:10px;padding:9px 10px;overflow:hidden}
/* A card that's only a focus-timer widget skips the grey chrome — the timer's
   own cream panel (see .exp-focus) is the card, so it isn't double-boxed.
   overflow:visible (not the base card's :hidden, which exists only to mask
   .exp-hdr's negative-margin bleed under the rounded corners): a chip row
   must sit fully in normal flow, sized by its own content, and never get
   silently clipped if a widget's content runs a little wider/taller than
   expected (e.g. a font-fallback moment before the interior font loads). */
.exp-card.exp-card-plain{background:none;border:0;padding:3px;box-shadow:none;overflow:visible}
/* Card header: teal-tinted strip spanning the card (like the app's section header). */
.exp-hdr{margin:-9px -10px 7px;padding:6px 10px;background:rgba(15,118,110,.08);
  border-bottom:1px solid rgba(15,118,110,.14);font-size:8px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:#0F766E}
/* Key/value row — small teal icon tile before the text, hairline separator. */
.exp-kv{display:flex;align-items:flex-start;gap:6px;font-size:9.5px;line-height:1.4;color:#5a6672;
  padding:5px 0;border-bottom:1px solid #ededec}
.exp-kv:last-child{border-bottom:0}
.exp-kv .ico{flex:0 0 auto;width:16px;height:16px;margin-top:1px;border-radius:5px;display:grid;place-items:center;
  font-size:9px;line-height:1;background:rgba(15,118,110,.1);color:#0F766E}
.exp-kv .txt{flex:1 1 auto;min-width:0}
.exp-kv b{color:#22303b;font-weight:600}
.exp-eyebrow{font-size:8px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#9aa3ad;margin:7px 0 5px}
.exp-src{display:flex;align-items:center;justify-content:space-between;gap:6px;background:#fff;border:1px solid #e7e5e4;border-radius:8px;padding:5px 7px;margin:4px 0;font-size:9.5px;font-weight:600;color:#22303b}
.exp-pill{font-size:8px;font-weight:600;color:#0F766E;background:rgba(15,118,110,.08);border:1px solid rgba(15,118,110,.28);border-radius:999px;padding:2px 6px;white-space:nowrap}
.exp-goal .exp-pill.energy{font-size:9px;color:#92400e;background:#fef3c7;border-color:#fcd34d;padding:3px 8px}
.exp-goal{border-bottom:1px solid #ece4de;padding-bottom:7px;margin-bottom:2px}
.exp-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
/* Primary CTA: solid teal pill, white text (like the app's "Approve selected").
   When it's the card's only chip it goes full-width; paired with a ghost chip
   it stays inline but keeps the same solid treatment. */
.exp-chip{font-size:9.5px;font-weight:600;border-radius:999px;padding:7px 12px;text-align:center}
.exp-chip.go{color:#fff;background:#0F766E;border:1px solid #0F766E;box-shadow:0 2px 8px rgba(15,118,110,.28)}
.exp-chip.ghost{color:#5a6672;background:#fff;border:1px solid #e7e5e4}
.exp-chips.solo{display:block}
.exp-chips.solo .exp-chip{width:100%}

/* === in-phone feature widgets (extend the .exp-card vocabulary; teal-only, ≤12px) === */
/* Health-data metrics (wearable sync) — icon tile, key left, value right. */
.exp-metric{display:flex;align-items:center;gap:6px;padding:5px 0;border-bottom:1px solid #ededec;font-size:9.5px;line-height:1.35}
.exp-metric:last-child{border-bottom:0}
.exp-metric .ico{flex:0 0 auto;width:16px;height:16px;border-radius:5px;display:grid;place-items:center;
  font-size:9px;line-height:1;background:rgba(15,118,110,.1);color:#0F766E}
.exp-metric .k{flex:1 1 auto;color:#5a6672;font-weight:600}
.exp-metric .v{color:#22303b;font-weight:700}
.exp-metric .v.down{color:#0F766E}
/* Day-plan list — icon tile, label → change (teal). */
.exp-plan{display:flex;align-items:center;gap:6px;padding:5px 0;border-bottom:1px solid #ededec;font-size:9.5px;line-height:1.35}
.exp-plan:last-child{border-bottom:0}
.exp-plan .ico{flex:0 0 auto;width:16px;height:16px;border-radius:5px;display:grid;place-items:center;
  font-size:9px;line-height:1;background:rgba(15,118,110,.1);color:#0F766E}
.exp-plan .k{color:#22303b;font-weight:700;flex:0 0 auto}
.exp-plan .arr{color:#0F766E;font-weight:700}
.exp-plan .v{color:#0F766E;font-weight:600}
/* Task-breakdown steps — teal number badge (already an icon tile) + duration pill. */
.exp-step{display:flex;align-items:center;gap:7px;padding:5px 0;border-bottom:1px solid #ededec;font-size:9.5px;line-height:1.3}
.exp-step:last-child{border-bottom:0}
.exp-step .n{flex:0 0 auto;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:8px;font-weight:700;color:#fff;background:#0F766E}
.exp-step .lbl{flex:1 1 auto;color:#22303b;font-weight:600}
.exp-step .dur{flex:0 0 auto;font-size:8px;font-weight:600;color:#0F766E;background:rgba(15,118,110,.08);border:1px solid rgba(15,118,110,.28);border-radius:999px;padding:2px 6px}
/* Focus-session card — mini version of the app's real focus-timer popup: warm
   cream card, a purple SVG progress ring with an emoji centered in it, large
   bold digits, and a small dark play button (not the old flat teal pill). */
.exp-focus{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;
  padding:12px 8px 11px;margin:2px 0 0;border-radius:9px;
  background:linear-gradient(160deg,#f8f6f0,#f0ece4);border:1px solid #ece7db}
.exp-focus .ring{position:relative;width:40px;height:40px;display:grid;place-items:center;margin-bottom:2px}
.exp-focus .ring svg{width:40px;height:40px;transform:rotate(-90deg)}
.exp-focus .ring circle{fill:none;stroke-width:3.5}
.exp-focus .ring circle.track{stroke:#e7e0d2}
.exp-focus .ring circle.arc{stroke:#B090D4;stroke-linecap:round}
.exp-focus .ring .emoji{position:absolute;font-size:15px;line-height:1}
.exp-focus .digits{font-size:19px;font-weight:700;color:#22303b;letter-spacing:.01em;line-height:1}
.exp-focus .target{font-size:9.5px;font-weight:600;color:#5a6672;margin-top:1px}
.exp-focus .play{width:22px;height:22px;margin-top:5px;border:0;border-radius:50%;
  background:#22303b;color:#fff;font-size:8px;display:grid;place-items:center;padding-left:1px}
.exp-focus .meta{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;font-size:8.5px;font-weight:600;color:#5a6672;margin-top:4px}
/* Compact variant (card.compact:true) — a notch smaller in every dimension,
   for conversations that stack more than one rich widget in one screen and
   need each beat to fit the fixed phone height without clipping anything. */
.exp-card.exp-card-compact{margin-top:3px;padding:6px 8px}
.exp-card.exp-card-compact .exp-focus{padding:8px 6px 7px;gap:2px;margin-top:0}
.exp-card.exp-card-compact .exp-focus .ring,.exp-card.exp-card-compact .exp-focus .ring svg{width:30px;height:30px}
.exp-card.exp-card-compact .exp-focus .ring .emoji{font-size:12px}
.exp-card.exp-card-compact .exp-focus .digits{font-size:15px}
.exp-card.exp-card-compact .exp-focus .target{display:none}
.exp-card.exp-card-compact .exp-focus .play{width:18px;height:18px;margin-top:3px}
.exp-card.exp-card-compact .exp-plan{padding:3px 0}
.exp-card.exp-card-compact .exp-chips{margin-top:5px}
.exp-card.exp-card-compact .exp-chip{padding:5px 10px}

/* === added: app header === */
.exp-appheader{display:flex;align-items:center;gap:8px;padding:0 4px 9px;margin-bottom:3px;border-bottom:1px solid #ededec}
.exp-appheader .tile{width:26px;height:26px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;font-size:14px;background:linear-gradient(135deg,#e8f5f4,#c8e8e5);border:1px solid rgba(15,118,110,.15)}
.exp-appheader .name{font-size:12px;font-weight:700;color:#22303b;letter-spacing:-.2px;line-height:1.1}
.exp-appheader .sub{font-size:9px;font-weight:600;color:#0F766E;margin-top:1px;line-height:1.1}

/* === hero phone interior: flex-column layout (frame itself is defined once, above) === */
.hero-notch{top:10px;height:14px;width:66px}
.hero-status{position:static;flex:0 0 auto;padding:15px 16px 8px;font-size:11px}
.hero-screen.exp{position:static;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;
  overflow-y:hidden;overflow-x:hidden;padding:4px 12px 6px;gap:7px;-ms-overflow-style:none;scrollbar-width:none;
  text-align:left;font-family:'DM Sans',Arial,sans-serif}
.hero-screen.exp::-webkit-scrollbar{width:0;height:0}
.hero-screen.exp>.exp-appheader{flex:0 0 auto}
.hero-input{position:static;flex:0 0 auto;margin:5px 13px 13px}
/* Rows wrapper (hero phone only): a separate flex column translated upward via
   GSAP `transform` as later beats reveal, so earlier chat content scrolls out
   the top like a real chat — never native scroll, never a phone resize. */
.exp-rows{display:flex;flex-direction:column;gap:7px;will-change:transform}
/* In-chat day divider, like a chat app's date pill — small, centered, muted. */
.exp-row.exp-sep{justify-content:center;padding:2px 0}
.exp-daypill{font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#94a3b8;background:#ececeb;border-radius:999px;padding:3px 10px;line-height:1}

/* === Features section: stack copy above the phone/chips once the two-column layout
   runs out of room (mirrors the old talk-film breakpoint that prevented overlap). === */
@media(max-width:1024px){
  /* .talk-film already carries its own top/bottom padding (64px/60px) — don't
     stack a second top offset on .talk-copy here, that's what pushed the whole
     block down and made the section read bottom-heavy. */
  .talk-film{height:auto;min-height:820px;padding-bottom:64px}
  .talk-copy{position:static;width:auto;padding:0 25px;text-align:center}
  .talk-copy h2{margin-top:0}
  .talk-sub{margin-left:auto;margin-right:auto}
  .talk-stage{position:static;margin:34px auto 0;right:auto;top:auto}
}
@media(max-width:380px){.talk-phone-mount{transform:scale(.86);transform-origin:top center;margin-bottom:-84px}}

/* === coherent app-style input pill for the phone (matches the chat) === */
.hero-input{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:#fff;border:1px solid #e7e5e4;border-radius:22px;padding:10px 9px 10px 15px;
  font-size:11px;color:#94a3b8;box-shadow:0 1px 5px rgba(15,23,42,.05);line-height:1}
.hero-input .send{display:grid;place-items:center;flex:0 0 auto;
  width:24px;height:24px;border-radius:50%;background:#0F766E;color:#fff;font-size:13px;font-weight:700;float:none}

/* === GSAP-driven hero (script.js). Scene brightness/blur ride a single --rev
   variable that the scroll timeline animates 0 -> 1; transforms stay on GSAP. === */
.scene-sky,.scene-land,.scene-grass{filter:brightness(calc(.34 + var(--rev,0) * .66)) blur(calc((1 - var(--rev,0)) * 5px))}
/* Headline emphasis on the key phrase (peach, matching line one). */
.hl2 .w.hl-em{color:var(--peach)}
/* Reduced motion: no scrubbed animation, so show the hero fully assembled. */
@media(prefers-reduced-motion:reduce){
  .scene-sky,.scene-land,.scene-grass{--rev:1}
  .scene-shade{opacity:0}
  .hero-device{opacity:1;transform:translate(-50%,-30%) scale(1)}
  .hero-device .exp-row{opacity:1!important;filter:none!important;transform:none!important}
  .hl-rule{opacity:1;transform:scaleX(1)}
  .hl2 .w{opacity:1;filter:none;transform:none}
}

/* === Interactive day-type phone (frame 'adapt', lives in the features section) ==
   Same phone as the hero (values copied from .hero-device), but positioned in
   normal flow instead of absolutely inside the sticky hero. Interior chrome
   reuses the hero's .hero-notch/.hero-status/.hero-screen.exp/.hero-input rules.
   Sits assembled by default so it's visible with JS off / reduced motion; the
   GSAP entrance sets the hidden start state itself. */
.adapt-device{position:relative;margin:0 auto;width:330px;height:610px;display:flex;flex-direction:column;
  border:8px solid #262525;border-radius:55px;background:#FAFAF9;
  box-shadow:0 25px 70px #0008,inset 0 0 0 2px #a9a6a4;overflow:hidden;color:#2d2523;padding:0;
  will-change:transform,opacity}

/* .intro h2: balance line breaks across its own fluid width so no single
   trailing word ever strands as a widow, at any width -- not a per-breakpoint
   font-size/width override. text-wrap:balance is the primary fix; the
   max-width just keeps line count sane on very wide screens. */
.intro h2{max-width:20ch;margin-inline:auto;text-wrap:balance}