:root{color-scheme:dark;--ink:#111a17;--bg:#101716;--panel:#1c2723;--white:#f2f2e9;--muted:#aebbb1;--mint:#b5f1d7;--line:#334139}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--white);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,summary:focus-visible{outline:2px solid #68b69c;outline-offset:6px;border-radius:3px}img,svg{max-width:100%;display:block}.wrap{width:min(1280px,calc(100% - 112px));margin-inline:auto}.skip{position:absolute;top:-100px;left:20px;z-index:10;background:var(--mint);color:var(--ink);padding:15px}.skip:focus{top:10px}.site-header{height:108px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:25px}.brand{flex-shrink:0}.site-header nav{display:flex;align-items:center;gap:40px;font-size:13px}.nav-features{color:var(--muted)}.nav-beta{border:1px solid #526458;border-radius:6px;padding:13px 18px;transition:background .2s}.nav-beta:hover{background:#24372d}.nav-beta span{margin-left:18px}.hero{display:grid;grid-template-columns:1.08fr 1fr;gap:30px;align-items:center;min-height:720px;padding-block:80px 85px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:600;display:flex;align-items:center;gap:10px;margin:0 0 28px;color:var(--mint);line-height:1.7}.dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:var(--mint)}h1{font-size:clamp(48px,5.8vw,84px);font-weight:500;line-height:1.04;letter-spacing:-5px;margin:0}h1 em{color:var(--mint);font-style:normal}h2{font-weight:500;letter-spacing:-2px;font-size:clamp(32px,3.8vw,53px);line-height:1.12;margin:0}h3{font-weight:500}p{line-height:1.7}.hero-intro{max-width:390px;color:var(--muted);font-size:15px;margin:28px 0 30px}.hero-actions{display:flex;gap:26px;align-items:center;flex-wrap:wrap}.button{display:inline-flex;gap:32px;align-items:center;justify-content:center;border-radius:5px;padding:18px 23px;font-size:13px;font-weight:600;min-height:50px;transition:transform .2s,background .2s}.primary{background:var(--mint);color:var(--ink)}.primary:hover{background:#d2fbe9;transform:translateY(-2px)}.text-link{font-size:13px;padding-block:12px;border-bottom:1px solid #61776a;display:inline-flex;gap:22px;align-items:center;transition:color .2s}.text-link:hover{color:var(--mint)}.availability{color:#a0afa5;font-size:10px;margin-top:22px}.product-scene{position:relative;isolation:isolate;padding:34px 0 45px 12px;min-width:0}.product-panel{position:relative;background:linear-gradient(135deg,#2a3930,#192520 80%);padding:22px 26px 24px;border:1px solid #586657;border-radius:15px;box-shadow:0 40px 75px #0005;transform:perspective(1400px) rotateY(-6deg) rotateX(2deg);z-index:1}.panel-top{display:flex;align-items:center;gap:8px;color:#cad6ca;font-size:8px;letter-spacing:1px}.preview-tag{margin-left:auto;font-size:8px;letter-spacing:0;color:#bec9be;border:1px solid #536150;border-radius:3px;padding:5px}.car-title{display:flex;align-items:center;justify-content:space-between;margin:23px 0 0}.car-title h2{font-size:31px;letter-spacing:-1px}.car-title p{font-size:11px;color:#b6c3b5;margin:4px 0}.car-state{display:flex;align-items:center;gap:7px;font-size:10px;color:#d4dcca}.car-state .dot{background:#b7bb8f;width:5px;height:5px}.car-art{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;margin:16px 0 20px;border-radius:10px;background:#141414}.preview-metrics{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin:8px 0 22px}.metric-label{font-size:8px;letter-spacing:1.3px;color:#bac5b7;display:block;margin-bottom:10px}.preview-metrics strong{display:block;font-size:37px;font-weight:400;letter-spacing:-1.5px}.preview-metrics strong span{font-size:17px;letter-spacing:0;color:#c6d2c1}.preview-metrics p{font-size:9px;color:#b1beb0;margin:9px 0 0}.battery-track{height:3px;border-radius:2px;background:#4b5a49;width:100%;margin-top:15px}.battery-track i{display:block;width:78%;height:100%;background:var(--mint)}.preview-status{display:flex;justify-content:space-between;gap:8px;font-size:9px;border-top:1px solid #43513f;border-bottom:1px solid #43513f;padding:16px 0;color:#c9d2c3}.preview-status b{font-weight:400;color:#edf1e6}.tiny-icon{font-size:14px;margin-right:4px}.preview-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:20px;font-size:8px;color:#aebeaa}.mock-action{border:1px solid #607157;padding:10px;border-radius:5px;color:#dce8d3;font-size:9px}.mock-action span{margin-left:8px}.voice-strip{position:relative;z-index:2;display:flex;align-items:center;gap:18px;margin: -3px -8px 0 48px;padding:20px 23px;background:#ecf0df;color:#1a3025;border-radius:9px;box-shadow:0 16px 35px #0004;transform:rotate(-3deg)}.voice-strip span{font-size:7px;letter-spacing:1.3px;color:#496551}.voice-strip p{font-size:16px;letter-spacing:-.3px;margin:5px 0 0}.wave{height:32px;display:flex;align-items:center;gap:3px;flex-shrink:0}.wave i{height:10px;width:3px;border-radius:2px;background:#447f63;animation:pulse 3.2s ease-in-out infinite}.wave i:nth-child(2n){height:20px;animation-delay:.3s}.wave i:nth-child(3n){height:30px;animation-delay:.6s}.wave i:nth-child(4){height:24px;animation-delay:.9s}.scene-coordinate{position:absolute;right:0;top:-10px;font-size:8px;letter-spacing:2px;color:#a2b19f}.orbit{position:absolute;inset:-28px 20px -13px 50px;border:1px solid #51674945;border-radius:48% 48% 28% 30%;transform:rotate(25deg);z-index:-1}.orbit-two{inset:-53px -6px -38px 23px;border-color:#51674925}.principles{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:26px 0 38px;font-size:11px;color:#c6cfc4}.principles b{font-weight:400;color:#7a917e;margin-right:12px;font-size:9px}.features-section{background:#e9ebe1;color:var(--ink);padding:96px 0 100px}.feature-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:85px}.feature-intro .eyebrow{color:#4d6f5a;margin-top:7px}.feature-intro p:not(.eyebrow){max-width:310px;color:#536557;font-size:14px;margin-top:25px}.section-index{display:block;font-size:9px;letter-spacing:2px;color:#607463;margin-top:72px}.feature-list{border-top:1px solid #9dab99;min-width:0}details{border-bottom:1px solid #bdc6b7}summary{list-style:none;cursor:pointer;display:flex;gap:18px;align-items:center;min-height:81px;font-size:21px;letter-spacing:-.6px;padding:15px 0}summary::-webkit-details-marker{display:none}.feature-number{font-size:10px;color:#5a7261;letter-spacing:0}.feature-badge{margin-left:auto;font-size:8px;letter-spacing:0;background:#d6ddce;color:#355443;padding:5px 8px;border-radius:3px;white-space:nowrap}.feature-badge.planned{background:transparent;border:1px solid #a5b39c}.plus{font-size:22px;color:#566d5a;transition:transform .2s}details[open] .plus{transform:rotate(45deg)}.feature-body{padding:0 20px 26px 32px;max-width:480px}.feature-body h3{font-size:17px;margin:0 0 8px;letter-spacing:-.4px}.feature-body p{color:#526556;font-size:13px;margin:0 0 18px}.feature-meta{display:block;color:#49694f;font-size:8px;letter-spacing:1px;margin-bottom:18px}.feature-body small{color:#4c7258;font-size:11px}summary:hover{color:#397958}.connection{display:grid;grid-template-columns:1fr 1fr;gap:100px;padding-block:105px}.connection-copy>p{font-size:16px;color:#bac6ba;margin:0 0 30px}.trust-note{display:flex;align-items:flex-start;gap:18px;padding-top:25px;border-top:1px solid var(--line)}.trust-note img{flex-shrink:0;margin-top:3px}.trust-note h3{font-size:14px;margin:0 0 10px}.trust-note p{font-size:12px;color:var(--muted);margin:0 0 14px}.closing{position:relative;text-align:center;border:1px solid #344b3b;border-radius:10px;padding:68px 25px 56px;background:linear-gradient(110deg,#1b2e24,#17221d);overflow:hidden}.closing:before,.closing:after{content:"";position:absolute;width:300px;height:700px;border:1px solid #758c6526;border-radius:50%;top:-260px;left:-100px;transform:rotate(-35deg);pointer-events:none}.closing:after{left:auto;right:-100px;transform:rotate(35deg)}.closing .eyebrow{justify-content:center;font-size:9px}.closing h2{font-size:clamp(36px,4.5vw,60px);margin-bottom:30px}.closing p:last-child{font-size:11px;color:#a7b9a6;margin-top:22px}footer{padding-block:65px 25px}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-bottom:30px}.footer-top nav{display:flex;gap:30px;font-size:12px;color:#c1cbbf}footer>p{font-size:10px;color:#97a895;max-width:840px;margin:0 0 30px}.footer-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;gap:20px;font-size:9px;color:#a1b19e}.footer-bottom>span:last-child{letter-spacing:1.5px;font-size:8px}@keyframes pulse{0%,100%{transform:scaleY(.7)}50%{transform:scaleY(1)}}
@media(min-width:1500px){.hero{min-height:790px}.product-scene{padding-left:20px}}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.hero{gap:18px}h1{letter-spacing:-3px}.hero-actions{gap:16px}.feature-layout{gap:45px}.connection{gap:45px}.product-panel{padding:19px}.voice-strip{padding:17px;margin-left:30px}.voice-strip p{font-size:14px}}
@media(max-width:800px){.wrap{width:calc(100% - 48px)}.site-header{height:85px}.brand img{width:155px;height:auto}.site-header nav{gap:0}.nav-features{display:none}.nav-beta{font-size:11px;padding:11px 12px}.nav-beta span{margin-left:8px}.hero{grid-template-columns:1fr;padding-block:55px 40px;gap:48px;min-height:0}.hero-copy{max-width:560px}h1{font-size:clamp(49px,8.8vw,72px);letter-spacing:-3px}.hero-intro{max-width:450px}.product-scene{width:min(530px,100%);margin-inline:auto;padding:25px 8px 35px 0}.scene-coordinate{top:0;right:10px}.product-panel{transform:none}.voice-strip{margin-left:38px;margin-right:-1px}.orbit{inset:0 30px}.orbit-two{inset:-20px 10px}.principles{gap:20px;flex-wrap:wrap;font-size:10px;padding-bottom:28px}.principles span{flex:1 1 150px}.features-section{padding-block:62px}.feature-layout{grid-template-columns:1fr;gap:32px}.feature-intro p:not(.eyebrow){max-width:400px}.section-index{display:none}.connection{grid-template-columns:1fr;padding-block:65px;gap:30px}.connection-copy{max-width:550px}.closing{padding-block:48px 36px}.footer-top{align-items:flex-start}.footer-top nav{gap:15px;flex-wrap:wrap;justify-content:flex-end;font-size:11px}.footer-bottom{flex-wrap:wrap}.footer-bottom>span:last-child{display:none}}
@media(max-width:400px){.site-header{gap:12px}.brand img{width:130px}.nav-beta{font-size:10px;padding:11px 9px}.nav-beta span{margin-left:3px}h1{font-size:46px;letter-spacing:-2.8px}.hero-actions{gap:18px}.button{padding:16px 18px;gap:20px}.text-link{font-size:12px;gap:10px}.hero-intro{font-size:14px}.eyebrow{font-size:9px;letter-spacing:1.5px}.product-panel{padding:16px}.preview-status{font-size:8px}.voice-strip{margin-left:14px;padding:14px;gap:10px}.voice-strip p{font-size:13px}.voice-strip span{font-size:6px}.preview-metrics strong{font-size:32px}.preview-metrics{gap:20px}summary{font-size:17px;gap:12px}.feature-badge{font-size:7px;padding:4px}.footer-top{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Keep road lines inside the scene so product layers remain fully visible. */
.orbit { inset: -18px 12px -5px; transform: none; }
.orbit-two { inset: -38px 0 -24px; }

/* Portrait device presentation: slim metal rails and a centered punch-hole camera. */
.product-scene { padding: 35px 0 58px; }
.phone-frame { position: relative; width: 342px; max-width: calc(100% - 24px); margin-inline: auto; padding: 6px; border: 2px solid #86938e; border-radius: 38px; background: linear-gradient(110deg,#5a645f,#181c1a 18%,#59615d 90%,#a1aaa5); box-shadow: 0 35px 65px #0007, inset 0 0 0 2px #121614; transform: perspective(1500px) rotateY(-8deg) rotateZ(2deg); }
.phone-frame:before,.phone-frame:after { content:""; position:absolute; right:-4px; width:3px; background:#a0aaa3; border-radius:0 2px 2px 0; }
.phone-frame:before { top:125px; height:58px; }
.phone-frame:after { top:206px; height:35px; }
.product-panel { min-height:655px; padding:12px 21px 15px; border:0; border-radius:30px; background:linear-gradient(155deg,#2a3930,#192520 85%); box-shadow:none; transform:none; overflow:hidden; display:flex; flex-direction:column; }
.phone-status { height:37px; display:flex; align-items:flex-start; justify-content:space-between; font-size:10px; font-weight:600; padding:2px 2px 0; position:relative; }
.phone-camera { position:absolute; top:0; left:50%; transform:translateX(-50%); width:11px; height:11px; border-radius:50%; background:#080d0b; box-shadow:inset 0 0 0 3px #111916; }
.phone-indicators { font-size:9px; letter-spacing:1px; }
.phone-indicators b { margin-left:3px; font-size:13px; font-weight:400; }
.panel-top { font-size:7px; gap:5px; }
.panel-top img { width:22px; height:22px; }
.preview-tag { font-size:6px; padding:4px; }
.car-title { margin-top:24px; }
.car-title h2 { font-size:30px; }
.car-state { font-size:9px; }
.car-art { width:116%; max-width:none; height:auto; margin:20px -8% 24px; background:transparent; border-radius:0; object-fit:contain; }
.preview-metrics { gap:23px; margin-top:0; margin-bottom:23px; }
.preview-metrics strong { font-size:35px; }
.preview-metrics strong span { font-size:14px; }
.metric-label { font-size:7px; letter-spacing:1px; }
.preview-status { display:grid; grid-template-columns:1fr 1fr; padding:16px 0; row-gap:14px; font-size:10px; }
.preview-status>span:first-child { grid-column:1/-1; }
.preview-status>span:last-child { text-align:right; }
.preview-bottom { margin-top:auto; padding-top:22px; flex-direction:column; gap:16px; font-size:8px; }
.mock-action { width:100%; text-align:center; padding:13px; background:#b5f1d7; border:0; color:#173126; font-size:11px; font-weight:600; border-radius:7px; }
.phone-navigation { width:85px; height:3px; border-radius:3px; margin:23px auto 0; background:#ced8ca; opacity:.7; }
.voice-strip { position:absolute; bottom:47px; left:8px; right:8px; width:max-content; max-width:100%; margin:0 auto; transform:rotate(-3deg); padding:18px 22px; }
.scene-coordinate { top:8px; right:24px; }
@media(max-width:800px){.product-scene{padding-top:30px;padding-bottom:66px}.phone-frame{transform:none;width:330px}.voice-strip{bottom:24px;left:0;right:0}.scene-coordinate{right:12px;top:0}}
@media(max-width:400px){.phone-frame{max-width:calc(100% - 6px);border-radius:32px;padding:5px}.product-panel{border-radius:25px;padding-inline:16px;min-height:620px}.preview-tag{font-size:5.5px}.voice-strip{padding:14px;gap:10px}.voice-strip p{font-size:12px}.voice-strip span{font-size:6px}.preview-metrics strong{font-size:31px}}

/* Match the car's studio backdrop to the screen and keep the voice concept below the device. */
.product-panel { background:#233228; }
.product-scene { padding-bottom:105px; }
.voice-strip { bottom:6px; }
.car-art { mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent); mask-composite:intersect; }

/* Extend only the softly blurred backdrop; the vehicle itself stays sharp. */
.car-stage { position:relative; isolation:isolate; width:116%; margin:20px -8% 24px; }
.car-stage:before { content:""; position:absolute; inset:-24px -10px; z-index:-1; background:url('/css/brand/cherry-final.png') center / 100% auto no-repeat; filter:blur(22px); opacity:.45; mask-image:linear-gradient(to bottom,transparent, #000 32%,#000 68%,transparent),linear-gradient(to right,transparent,#000 20%,#000 80%,transparent); mask-composite:intersect; pointer-events:none; }
.car-stage .car-art { width:100%; max-width:100%; margin:0; mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.3) 3%,rgba(0,0,0,.8) 7%,#000 12%,#000 88%,rgba(0,0,0,.8) 93%,rgba(0,0,0,.3) 97%,transparent),linear-gradient(to bottom,transparent,rgba(0,0,0,.15) 3%,rgba(0,0,0,.5) 7%,rgba(0,0,0,.85) 12%,#000 18%,#000 82%,rgba(0,0,0,.85) 88%,rgba(0,0,0,.5) 93%,rgba(0,0,0,.15) 97%,transparent); mask-composite:intersect; }
