/* SF Pro Expanded uses wdth=132, matching the app’s native .expanded width. */
:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-stretch:132%;font-synthesis:none;--ink:#edf3f8;--muted:#92a7b8;--surface-top:#0b1722;--accent:#abcce4;color:var(--ink);background:var(--surface-top)}
/* Clip only sideways page overflow, without adding a body scroll container
   or blocking vertical overscan, pinch zoom, or the nested card carousel. */
html{overflow-x:clip;overscroll-behavior-x:none}
.highlight-track{overscroll-behavior-x:contain}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;background:#0b1722}img{display:block;max-width:100%}h1,h2,h3,p,figure{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}p{line-height:1.55}button,a{-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid #b0dcff;outline-offset:6px}
.shell{width:min(1180px,calc(100% - 96px));margin-inline:auto}.section-space{padding-block:140px}h1,h2,h3{letter-spacing:-.045em;line-height:1.06;font-weight:600;text-wrap:balance}h2{font-size:clamp(44px,5.8vw,84px)}h3{font-size:27px}h2 span{color:var(--accent)}.eyebrow{font-size:17px;font-weight:600;color:var(--muted);margin-bottom:22px}.lead{font-size:23px;font-weight:500;max-width:640px;color:var(--muted);margin:28px auto 0}.centered{text-align:center}.chapter-heading{margin-bottom:80px}.section-top{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:60px}.section-top h2{font-size:56px}.section-top>p{font-size:17px;color:var(--muted)}.button{display:inline-flex;justify-content:center;align-items:center;padding:13px 24px;border-radius:30px;background:#acd0e9;color:#112c40;font-size:15px;font-weight:500;white-space:nowrap}.button:hover{background:#d2e8f7}.button.small{font-size:12px;padding:9px 18px}.fine{display:block;font-size:11px;color:var(--muted);margin-top:12px}.text-link{display:inline-block;color:#c4e3f8;margin-top:25px;font-size:15px}.text-link:hover{text-decoration:underline}.footnote{font-size:12px;color:var(--muted);margin-top:48px}.skip{position:fixed;top:-80px;left:16px;padding:15px;background:#fff;color:#111;z-index:100}.skip:focus{top:10px}
/* One phone model: 880×1912 screen + an even 13-unit bezel on every side.
   Rounded corners share the same centre (118 outside, 105 on the screen).
   Never fit a screenshot into a differently proportioned black rectangle. */
.device{position:relative;aspect-ratio:906/1938;background:#080d12;border:0;border-radius:13.0243% / 6.08875%;padding:0;box-shadow:0 28px 55px -18px #0007,inset 0 0 0 .75px #a9bbc980;overflow:hidden}
.device>img{position:absolute;left:1.4348786%;top:.6707946%;width:97.1302428%;height:98.6584108%;max-width:none;aspect-ratio:880/1912;object-fit:fill;border-radius:11.931818% / 5.491632%}
.device:after{content:"";position:absolute;top:2.1671827%;left:50%;transform:translateX(-50%);width:28.6975717%;height:3.9215686%;border-radius:999px;background:#030507;pointer-events:none}
.hero{--surface-top:#102b40;position:relative;background:#102b40;isolation:isolate}.hero-stage{height:max(780px,100svh);position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 63%,#285e8150,transparent 65%)}.hero-map-background{position:absolute;inset:-28px;z-index:-1;filter:blur(14px);opacity:.12;overflow:hidden;container-type:size}.hero-map-crop{position:absolute;width:max(100cqw,102.3256cqh);aspect-ratio:880/860;left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden}.hero-map-crop img{position:absolute;width:100%;top:-74.4186%;max-width:none}
.hero-masthead{position:absolute;top:130px;left:0;width:100%;text-align:center}.hero-masthead p{font-size:16px;font-weight:500;color:#a4c5dd;letter-spacing:.02em;margin-bottom:4px}.hero-masthead h1{font-size:clamp(110px,17vw,240px);font-weight:650;letter-spacing:-.035em;line-height:1;color:#a8c8df}
.hero-product{position:absolute;top:59%;left:50%;width:clamp(190px,24svh,290px);transform:translate(-50%,-50%);z-index:2}
.hero-bottom{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);display:flex;align-items:end;justify-content:space-between;gap:32px;z-index:3}.hero-bottom>p{font-size:clamp(27px,3.2vw,45px);font-weight:600;line-height:1.05;letter-spacing:-.045em}.hero-bottom>p span{color:#9dbfd7}.hero-bottom>div{text-align:right}.hero-scroll-cue{display:none}
.hero.is-cinematic{height:220svh;min-height:1600px}.is-cinematic .hero-stage{position:sticky;top:0;height:100svh;min-height:650px}.is-cinematic .hero-product{top:50%;transform:translate(-50%,-50%) translateY(var(--hero-y,32svh)) scale(var(--hero-scale,2.6));will-change:transform}.is-cinematic .hero-bottom{opacity:var(--hero-copy,0);visibility:hidden}.is-cinematic.is-revealed .hero-bottom{visibility:visible}.is-cinematic .hero-scroll-cue{display:flex;position:absolute;z-index:3;bottom:34px;left:50%;transform:translateX(-50%);gap:12px;align-items:center;color:#d0e3f0;font-size:12px;opacity:var(--hero-cue,1)}.is-cinematic.is-revealed .hero-scroll-cue{visibility:hidden}
.highlights{--surface-top:#101820;background:var(--surface-top);overflow:hidden}.highlight-track{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:max(48px,calc((100vw - 1180px)/2));padding-bottom:10px;scroll-padding-inline:48px}.highlight-track::-webkit-scrollbar{display:none}.highlight-card{position:relative;isolation:isolate;flex:0 0 min(680px,76vw);height:650px;overflow:hidden;border-radius:28px;scroll-snap-align:center}.highlight-copy{position:relative;z-index:3;padding:44px;max-width:480px}.highlight-copy h3{font-size:36px}.highlight-copy .eyebrow{font-size:15px;margin-bottom:14px;color:inherit;opacity:.7}.highlight-card .device{position:absolute;width:280px;left:50%;top:220px;transform:translateX(-50%)}.highlight-day{background:linear-gradient(135deg,#173d58,#3176a0);color:#d4e9f7}.highlight-orange{background:linear-gradient(135deg,#713316,#a65d34);color:#f9dbc2}.highlight-orange .device{transform:translateX(-50%) rotate(-6deg);width:300px;top:235px}.highlight-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% center;z-index:-2}.highlight-car:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#000c,transparent 70%)}.round-link{position:absolute;bottom:25px;right:25px;display:grid;place-items:center;border-radius:50%;width:42px;height:42px;background:#e7eff1;color:#15212a;font-size:24px;z-index:4}.gallery-controls{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:28px}.gallery-controls p{font-size:11px;color:var(--muted);max-width:520px}.gallery-controls>div{display:flex;gap:12px}.gallery-controls button{border:0;width:40px;height:40px;border-radius:50%;background:#29343e;color:#e9f1f7;font-size:21px}.gallery-controls button:disabled{opacity:.3;cursor:default}
.departure-section{--surface-top:#0c1823;--accent:#8caec8;background:var(--surface-top)}.departure-composition{display:grid;grid-template-columns:1.1fr 1fr;gap:100px;align-items:center}.paired-phones{height:690px;position:relative}.paired-phones .device{position:absolute;width:270px;top:0}.phone-back{left:0;transform:rotate(-9deg);opacity:.78}.phone-front{right:0;top:75px!important;transform:rotate(5deg)}.editorial-copy{max-width:470px}.editorial-copy p,.editorial-grid p{font-size:18px;color:var(--muted);margin-top:14px}.text-feature{margin-top:40px}.text-feature h3{font-size:23px}.editorial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:55px}.editorial-grid h3{font-size:23px}
.queue-section{--surface-top:#311b13;--accent:#e8a678;--muted:#c7a692;background:var(--surface-top);color:#fae8dc;padding-bottom:0;overflow:hidden}.queue-cinema{position:relative;isolation:isolate;height:730px;overflow:hidden;margin-bottom:85px;background:#5d2b16}.queue-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(4px);opacity:.36;z-index:-2}.queue-cinema:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#311b13e0,transparent 70%),linear-gradient(0deg,#311b13,transparent 20%)}.report-product{position:absolute;width:350px;left:60%;top:60px;transform:rotate(7deg)}.queue-caption{position:absolute;top:40%;left:max(48px,calc((100vw - 1180px)/2));max-width:40%}.queue-caption>span{font-size:16px;color:#deb799;display:block;margin-bottom:20px}.queue-caption strong{font-size:clamp(36px,4vw,60px);line-height:1.05;letter-spacing:-.045em;font-weight:600}.report-detail{margin-top:120px;display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;max-height:660px;overflow:hidden;border-top:1px solid #dec1a525;padding-top:70px}.report-detail-copy{align-self:start;padding-top:40px;max-width:430px}.report-detail-copy h3{font-size:45px}.report-detail-copy p:not(.eyebrow){font-size:18px;margin-top:25px;color:var(--muted)}.report-detail .device{width:285px;justify-self:center}
.crossing-section{--surface-top:#0d1e2d;--accent:#90adc8;background:var(--surface-top)}.crossing-map{position:relative;height:600px;overflow:hidden;margin-bottom:80px}.crossing-map>img{width:100%;height:100%;object-fit:cover;object-position:50% 48%}.crossing-map:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0d1e2ded,transparent 85%),linear-gradient(0deg,#0d1e2d,transparent 28%)}.crossing-map-copy{position:absolute;left:max(48px,calc((100vw - 1180px)/2));top:40%;z-index:1}.crossing-map-copy p{font-size:14px;color:#9fbbd0;margin-bottom:22px}.crossing-map-copy h3{font-size:clamp(40px,4.5vw,64px);max-width:570px}
.outside-section{--surface-top:#0d1e2d;--muted:#a4b8ca;--accent:#9abbd6;background:radial-gradient(ellipse at 18% 40%,#28567470,transparent 52%),radial-gradient(ellipse at 85% 58%,#263a5945,transparent 48%),linear-gradient(180deg,#0d1e2d 0%,#101e2c 55%,#100f10 100%);overflow:clip}
.widget-showcase{display:grid;grid-template-columns:.7fr 1.1fr 1.1fr;gap:28px;padding-block:35px 60px}
.widget-stage{height:230px;display:flex;align-items:center;justify-content:center}
.widget-preview{position:relative;isolation:isolate;overflow:hidden;height:168px;border-radius:25px;background:#18517a;color:#d8efff;box-shadow:0 20px 45px #06121e66;display:flex;flex-direction:column;justify-content:space-between;padding:12px}
.widget-map{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.widget-preview:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#103853e6,transparent 48%,#10385355)}
.widget-small{width:168px;flex-shrink:0}.widget-medium,.activity-preview{width:100%;max-width:350px}.activity-preview{height:160px;border-radius:30px}
.widget-countdown{display:flex;flex-direction:column;gap:1px;align-items:flex-start;font-stretch:132%}.widget-countdown>span{font-size:11px;font-weight:500;color:#bdd9ec}.widget-countdown strong{font-size:20px;line-height:1.2;letter-spacing:-.5px;font-weight:600}
.widget-status{align-self:center;max-width:100%;padding:7px 12px;border-radius:24px;background:#18517acc;font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-stretch:132%;font-size:12px;line-height:1.3;font-weight:400;text-align:center}
.widget-medium .widget-status{font-size:13px;padding:9px 16px;max-width:calc(100% - 24px)}
.activity-preview.activity-screenshot{display:block;height:auto;padding:0;aspect-ratio:1236/479;border-radius:22px;background:none}
.activity-screenshot:before{display:none}
.activity-screenshot img{display:block;width:100%;height:auto}
.widget-example figcaption{font-size:16px;font-weight:500;text-align:center}.widget-example figcaption span{display:block;font-size:13px;color:var(--muted);margin-top:7px}.widget-example-note{font-size:11px;color:var(--muted);text-align:center;margin-bottom:70px}
.notification-detail{display:grid;grid-template-columns:1fr 2fr;gap:50px;margin-top:70px;border-top:1px solid #ffffff20;padding-top:35px}.notification-detail p{font-size:18px;color:var(--muted)}
.carplay-section{--surface-top:#100f10;--muted:#c8c3be;--accent:#d1c5ba;background:var(--surface-top);color:#f2eee9;overflow:hidden}.carplay-scene{position:relative;isolation:isolate;min-height:700px;aspect-ratio:1672/1020;display:grid;align-items:start;overflow:hidden}.carplay-scene>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center bottom;z-index:-2}.carplay-scene:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#100f10ed 0%,#100f10db 25%,#100f10b8 38%,#100f1059 50%,transparent 61%),linear-gradient(0deg,#100f10,transparent 12%);pointer-events:none}.carplay-heading{display:grid;grid-template-columns:1fr;gap:28px;align-self:center;padding-block:64px}.carplay-heading>div{max-width:min(420px,42vw)}.carplay-heading h2{font-size:clamp(42px,4.4vw,68px)}.carplay-copy>p{font-size:19px}.carplay-copy .detail{font-size:12px;line-height:1.55;color:var(--muted);margin-top:20px}.carplay-figure figcaption{font-size:11px;color:var(--muted);line-height:1.6;padding-block:24px 40px}.carplay-figure figcaption a{text-decoration:underline}
.themes-section{--surface-top:#102f45;--ink:#d2e8f7;--muted:#a6c5da;--accent:#8ab6d5;background:var(--surface-top);color:var(--ink);transition:background .45s,color .45s;overflow:hidden}.themes-section[data-theme=night]{--surface-top:#0e1b2c;--ink:#ccdded;--muted:#9cb2ca;--accent:#7d9dbd}.themes-section[data-theme=orange]{--surface-top:#52290f;--ink:#fae2cc;--muted:#dfb18c;--accent:#edb17e}.themes-section .chapter-heading{margin-bottom:36px}.themes-section h2 span{transition:color .45s}.theme-picker{display:flex;justify-content:center;gap:10px}.theme-picker button{background:none;color:var(--muted);border:1px solid transparent;border-radius:35px;display:flex;gap:9px;align-items:center;padding:10px 15px;font-size:13px}.theme-picker button[aria-pressed=true]{border-color:currentColor;color:var(--ink);background:#ffffff0b}.swatch{width:20px;height:20px;border-radius:50%;border:1px solid #ffffff40}.swatch.day{background:#548db8}.swatch.night{background:#182f46}.swatch.orange{background:#c17041}.theme-product{position:relative;isolation:isolate;margin:70px auto 60px;width:290px}.theme-aura{position:absolute;z-index:-1;inset:-80px -230px;background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 20%,transparent),transparent 67%)}.theme-notes{display:grid;grid-template-columns:1fr 1fr;gap:60px;text-align:center;font-size:18px;color:var(--muted)}
.faq{padding-block:140px;max-width:950px}.faq h2{font-size:48px;margin-bottom:55px}.faq details{border-bottom:1px solid #8cabb62b;padding-block:25px}.faq summary{font-size:20px;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";color:#96b3c8;font-size:25px}.faq details[open] summary:after{content:"−"}.faq details p{max-width:730px;color:var(--muted);font-size:17px;margin-top:20px}.faq a{text-decoration:underline}.download-section{background:var(--surface-top);text-align:center;padding:100px 24px}.download-section img{width:70px;height:auto;margin:0 auto 26px;-webkit-mask:url('assets/app-icon-mask.svg') center/contain no-repeat;mask:url('assets/app-icon-mask.svg') center/contain no-repeat}.download-section h2{font-size:48px;margin-bottom:30px}.footer{display:flex;justify-content:space-between;gap:30px;padding-block:30px;font-size:11px;color:var(--muted)}.footer>div{display:flex;gap:25px}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}.js .reveal.visible{opacity:1;transform:none}
.nav-wrap{position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(920px,100%);height:110px;z-index:30;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none}
.nav{position:absolute;inset:20px 24px auto;height:64px;padding:0 20px;gap:32px;width:auto;margin:0;border-radius:999px;isolation:isolate;pointer-events:auto;color:#e1eff8;background:#ffffff08;border:1px solid #ffffff38;box-shadow:0 5px 20px #0001,inset 0 1px 0 #ffffff28;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav.glass-ready{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav:not(.glass-ready)>canvas{visibility:hidden}
.nav>*:not(canvas){position:relative;z-index:1}
/* Match the app's clear.tint(glassRGB.opacity(0.65)) and 1.2pt inset. */
.nav:after{content:"";position:absolute;inset:1.2px;border-radius:inherit;background:color-mix(in srgb,var(--glass-theme,#18517a) 65%,transparent);transition:background .3s ease;z-index:0;pointer-events:none}
.nav .brand{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.nav .brand img{width:34px;height:34px;object-fit:contain;border-radius:0;filter:none}
.nav .button{background:color-mix(in srgb,currentColor 18%,transparent);color:inherit;box-shadow:inset 0 1px 0 #ffffff12}
.nav[data-tone=light]{color:#343735;background:#ffffff0a}
.nav[data-tone=light].glass-ready{background:transparent}
.nav[data-tone=light] .brand img{filter:brightness(.25)}
.nav[data-tone=light] .button{background:#34373514;color:inherit}
.nav[data-tone=light] .nav-links a:hover{color:#151817}
/* Source pixels for the WebGL shader only; never painted over the real page. */
.nav-scene{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
@media(max-width:800px){.nav{gap:20px}.nav-links{gap:20px}}
@media(max-width:600px){.nav-wrap{height:98px}.nav{inset:14px 16px auto;height:60px;padding:0 15px}.nav-links{display:flex;gap:16px;font-size:12px}.nav-links a:not(:first-child){display:none}.nav .brand img{width:31px;height:31px}}
@media(prefers-reduced-transparency:reduce){.nav{background:#182f46;backdrop-filter:none;-webkit-backdrop-filter:none}.nav[data-tone=light]{background:#f0eee7}}
@media(prefers-reduced-motion:reduce){.nav:after{transition:none}}

.nav{display:flex;align-items:center;font-size:13px}.nav .brand{gap:10px;margin-right:auto;font-weight:600;font-size:19px;letter-spacing:-.035em}.nav-links{display:flex;gap:28px;align-items:center}.nav .brand img{width:28px;height:28px}.nav{height:58px}.nav-wrap{width:min(960px,100%)}.nav-links a:hover{color:#fff}
@media(max-width:1000px){.departure-composition{gap:50px;grid-template-columns:1fr 1fr}.paired-phones{height:550px}.paired-phones .device{width:210px}.editorial-grid{gap:30px}.report-product{left:57%}.report-detail{gap:60px}.highlight-card{height:600px}.widget-showcase{grid-template-columns:1fr 1fr}.widget-example:last-child{grid-column:1/-1;width:350px;max-width:100%;justify-self:center}}
@media(max-width:700px){.shell{width:calc(100% - 40px)}.section-space{padding-block:85px}h2{font-size:44px}.chapter-heading{margin-bottom:48px}.eyebrow{font-size:14px;margin-bottom:17px}.lead{font-size:19px}.section-top{display:block;margin-bottom:35px}.section-top h2{font-size:36px}.section-top>p{font-size:14px;margin-top:18px}.hero-stage{height:850px}.hero-masthead{top:125px}.hero-masthead p{font-size:13px}.hero-masthead h1{font-size:36vw}.hero-product{width:clamp(142px,36vw,190px);top:55%}.hero-bottom{bottom:48px;align-items:center;flex-direction:column;gap:20px;text-align:center}.hero-bottom>p{font-size:28px}.hero-bottom>div{text-align:center}.hero-bottom .fine{font-size:10px}.hero.is-cinematic{min-height:1500px;height:220svh}.is-cinematic .hero-stage{min-height:650px}.highlight-track{padding-inline:20px;gap:16px;scroll-padding-inline:20px}.highlight-card{flex-basis:86vw;height:560px;border-radius:23px}.highlight-copy{padding:30px}.highlight-copy h3{font-size:29px}.highlight-card .device{width:235px;top:200px}.gallery-controls p{max-width:230px;font-size:10px}.departure-composition{display:flex;flex-direction:column;gap:45px}.paired-phones{width:100%;max-width:360px;height:530px}.paired-phones .device{width:205px}.editorial-copy p,.editorial-grid p{font-size:16px}.editorial-copy{max-width:none}.editorial-grid{grid-template-columns:1fr;gap:38px}.editorial-grid h3{font-size:23px}.queue-section{padding-bottom:0}.queue-cinema{height:650px;margin-bottom:50px}.queue-caption{top:40px;left:24px;max-width:90%}.queue-caption>span{font-size:12px;margin-bottom:12px}.queue-caption strong{font-size:32px}.report-product{left:38%;top:200px;width:250px}.report-detail{display:flex;flex-direction:column;gap:40px;margin-top:65px;padding-top:45px;max-height:900px}.report-detail-copy{padding:0;max-width:none}.report-detail-copy h3{font-size:36px}.report-detail-copy p:not(.eyebrow){font-size:16px}.report-detail .device{width:250px;flex-shrink:0}.crossing-map{height:470px;margin-bottom:45px}.crossing-map>img{width:160%;max-width:none;object-position:center}.crossing-map-copy{left:24px;top:40%}.crossing-map-copy h3{font-size:36px}.crossing-map-copy p{font-size:11px}.widget-showcase{grid-template-columns:1fr;gap:30px;padding-block:0 40px}.widget-stage{height:190px}.widget-example:last-child{grid-column:auto}.widget-example{width:100%;max-width:350px;justify-self:center}.notification-detail{grid-template-columns:1fr;gap:18px;margin-top:40px}.notification-detail p{font-size:16px}.carplay-scene{aspect-ratio:auto;min-height:0}.carplay-heading{gap:24px;padding-block:55px calc(80vw + 32px)}.carplay-heading>div{max-width:100%}.carplay-heading h2{font-size:44px}.carplay-copy>p{font-size:17px}.carplay-scene>img{inset:auto auto 0 50%;transform:translateX(-50%);width:160%;height:auto}.carplay-scene:after{background:linear-gradient(#100f10 0%,#100f10f5 33%,transparent 66%,transparent 91%,#100f10)}.theme-product{width:245px;margin-block:45px}.theme-notes{grid-template-columns:1fr;gap:24px;font-size:16px}.faq{padding-block:80px}.faq h2{font-size:36px;margin-bottom:35px}.faq summary{font-size:17px}.faq details p{font-size:16px}.download-section h2{font-size:36px}.footer{flex-direction:column;gap:20px}.nav .brand span{display:none}.nav-links{gap:15px}.nav-links a:not(:first-child){display:none}.nav .brand img{width:28px;height:28px}}
/* Product screens stay complete: only the opening zoom deliberately crops. */
.highlight-card{display:flex;flex-direction:column;padding:36px;gap:25px}
.highlight-copy{padding:0;max-width:none;flex-shrink:0}
.highlight-copy h3{font-size:34px}
.highlight-card .device{position:absolute;inset:auto;min-height:0;width:auto;max-width:none}
.highlight-day,.highlight-orange,.highlight-appearance{flex-basis:min(500px,78vw);height:660px;padding:32px}
.highlight-appearance{background:linear-gradient(145deg,#303d49,#3e4d5a);color:#dde8f2}
.highlight-appearance .device{height:auto}
.highlight-appearance .appearance-map{width:30%;max-width:150px;left:auto;right:48%;bottom:110px;z-index:1;transform:rotate(-7deg)}
.highlight-appearance .appearance-classic{width:36%;max-width:180px;left:46%;right:auto;bottom:30px;z-index:2;transform:rotate(-7deg)}
.highlight-description{font-size:16px;line-height:1.45;max-width:365px;margin-top:15px;color:inherit;opacity:.82}
.highlight-day .device{height:60%;right:12%;bottom:24px;transform:rotate(7deg)}
.highlight-day .card-companion{height:45%;left:14%;right:auto;bottom:105px;transform:rotate(-9deg)}
.highlight-orange .device{height:62%;right:42px;left:auto;bottom:24px;transform:rotate(-6deg)}
.highlight-orange .highlight-copy{text-align:left}
.highlight-map{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;z-index:-2}
.highlight-day:before,.highlight-appearance:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.highlight-day:before{background:linear-gradient(180deg,#173d58f5 0%,#173d58d9 27%,#245a7a38 68%,#173d5833)}
.highlight-appearance:before{background:linear-gradient(180deg,#303d49f5 0%,#303d49d9 27%,#3e4d5a38 68%,#303d4933)}
.highlight-orange:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#54270ef5 0%,#54270ed9 26%,#71331638 65%,#3e210e33)}
.highlight-card .round-link{bottom:22px;right:22px;background:transparent;color:inherit;border:1px solid currentColor}
/* The decorative glow overlaps the pickers at compact spacing; never intercept taps. */
.theme-aura{pointer-events:none}
.view-picker{display:flex;justify-content:center;gap:6px;width:fit-content;max-width:100%;margin:20px auto 0;padding:5px;border-radius:999px;background:#0002}
.view-picker button{border:0;border-radius:999px;background:transparent;color:var(--ink);padding:11px 22px;font-size:14px}
.view-picker button[aria-pressed=true]{background:color-mix(in srgb,var(--ink) 16%,transparent)}
.view-picker button:hover{background:color-mix(in srgb,var(--ink) 10%,transparent)}
.highlight-day .round-link,.highlight-orange .round-link,.highlight-appearance .round-link{right:auto;left:22px}
.highlight-car{background:#100f10}
.highlight-car .highlight-photo{inset:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:76% center}
.highlight-car:after{background:linear-gradient(180deg,#100f10d9,transparent 48%,#100f1026)}
.queue-features{padding-bottom:80px}
.queue-features .text-link{font-size:15px;margin-top:18px;color:inherit}
@media(max-width:700px){.queue-features{padding-bottom:55px}.highlight-car .highlight-photo{object-position:76% center}}
.paired-phones{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);align-items:center;gap:48px;height:auto;max-width:580px;padding:32px 22px 86px}
.paired-phones .device{position:relative;inset:auto;top:auto!important;transform:none;opacity:1;width:100%}
.paired-phones .phone-back{transform:translateY(-36px) rotate(-5deg)}
.paired-phones .phone-front{transform:translateY(54px) rotate(4deg)}
.queue-cinema{height:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px;padding:90px max(48px,calc((100vw - 1180px)/2)) 110px}
.report-product{position:relative;inset:auto;transform:rotate(-7deg);width:min(360px,100%);justify-self:center;grid-column:1;grid-row:1}
.queue-caption{position:relative;inset:auto;max-width:470px;grid-column:2;grid-row:1}
.queue-caption h2{font-size:clamp(36px,4vw,60px);line-height:1.05}
.crossing-section.section-space{padding-top:0}
.departure-section.section-space,.outside-section.section-space{padding-top:0}
.download-section{padding-top:0}
/* Only exposed document canvas (initial top / overscroll) needs a fallback.
   Never cover the actual section artwork behind Safari's floating controls. */
:root,body{background-color:var(--page-canvas,#0b1722)}
main,.footer{background-color:#0b1722}
.themes-section[data-theme=cloudy]{--surface-top:#303d49;--ink:#dde8f2;--muted:#afbfce;--accent:#9eacb8}
.themes-section[data-theme=monochrome]{--surface-top:#deddd7;--ink:#343735;--muted:#545753;--accent:#626461}
.theme-picker{flex-wrap:wrap}
.swatch.cloudy{background:#9eacb8}
.swatch.monochrome{background:#deddd7;border-color:#626461}
.footer.shell{width:100%;margin-inline:0;padding-inline:max(48px,calc((100% - 1180px)/2))}
.feedback-section[hidden]{display:none}
@media(max-width:700px){.footer.shell{padding-inline:20px}}
/* At scrollY=0 Safari exposes the page canvas above the document. The map's
   blur and radial light must meet that exact colour at the document edge.
   This belongs to the scene (never fixed) and sits below all hero content. */
.hero-stage::before{content:"";position:absolute;inset:0 0 auto;height:220px;background:linear-gradient(to bottom,#102b40 0 48px,rgba(16,43,64,0) 100%);pointer-events:none;z-index:0}
/* The blurred map overscans the scene by 28px. With the scene unclipped,
   mask that overscan too: otherwise it paints ABOVE the matching top blend.
   These stops align with the blend's 48/220px stops in scene coordinates.
   Mask only the backdrop, never the phones or the viewport. */
.hero-map-background{-webkit-mask-image:linear-gradient(to bottom,transparent 0 76px,#000 248px);mask-image:linear-gradient(to bottom,transparent 0 76px,#000 248px)}
/* The scene must paint beyond its viewport-height box, beneath Safari's
   floating address bar. Clip at the whole section, not at the scene edge.
   overflow:clip does not create a new scroll container for the sticky anchor. */
.hero{overflow:clip}
.hero-stage{overflow:visible}
/* Only a zero-size anchor is sticky, not the full-screen painted scene.
   This avoids a viewport-sized fixed container at either browser edge.
   The shortened track preserves the original release point of the scene. */
.nav-wrap{top:calc(28px + env(safe-area-inset-top,0px));height:90px}
.nav{top:0}
.hero-pin-track,.hero-pin{display:contents}
.is-cinematic .hero-pin-track{display:block;position:relative;container-type:inline-size;height:var(--hero-pin-distance,0px);z-index:-1}
.is-cinematic .hero-pin{display:block;position:sticky;top:0;width:0;height:0}
.is-cinematic .hero-stage{position:relative;top:0;width:100vw;width:100cqw;height:100lvh;min-height:650px;z-index:auto}
/* Native fixed navigation and sticky hero avoid the counter-scroll
   animation jitter confirmed by the local A/B test. */
.is-cinematic .hero-bottom{bottom:calc(48px + env(safe-area-inset-bottom,0px))}
.footer{padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}
@media(max-width:600px){.nav-wrap{height:84px}.nav{top:0}}
.hero-masthead{z-index:1}
.is-cinematic .hero-product{transform:translate(-50%,-50%) translate(var(--hero-x,0px),var(--hero-y,32svh)) rotate(var(--hero-roll,0deg)) scale(var(--hero-scale,2.6))}
.crossing-map-copy{right:24px;z-index:2}
/* Same intrinsic map aspect, crop and responsive sizing as the base image.
   Exported directly from the app's vessel paths and metre-based scale. */
.crossing-map>.crossing-ferries{position:absolute;inset:0;z-index:1;pointer-events:none}
.crossing-map-copy h2{font-size:clamp(40px,4.5vw,64px);max-width:570px}
.queue-cinema:after{background:linear-gradient(270deg,#311b13dc,transparent 75%),linear-gradient(0deg,#311b13,transparent 20%)}
.report-detail{max-height:none;overflow:visible;padding-bottom:100px}
.report-detail .device{width:225px;justify-self:end;margin-right:12%}
.theme-product{width:clamp(260px,28vw,360px)}
.carplay-scene{aspect-ratio:1672/941;min-height:0}
.nav-wrap{overflow:clip}.widget-showcase{grid-template-columns:minmax(0,.7fr) minmax(0,1.1fr) minmax(0,1.1fr)}.widget-example{min-width:0}
@media(max-width:1000px){.widget-showcase{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .highlight-card{padding:28px 25px;gap:24px}
  .highlight-copy h3{font-size:27px}
  .highlight-day,.highlight-orange,.highlight-appearance{flex-basis:86vw;height:600px;padding:28px 25px}
  .highlight-description{font-size:14px;line-height:1.4;margin-top:12px}
  .highlight-day .device{height:auto;width:44%;right:10%;bottom:10%;transform:rotate(6deg)}
  .highlight-day .card-companion{width:27%;left:12%;right:auto;bottom:26%;transform:rotate(-8deg)}
  .highlight-orange .device{height:58%;right:8%;left:auto;bottom:30px}
  .highlight-appearance .appearance-map{width:32%;max-width:125px;bottom:125px}
  .highlight-appearance .appearance-classic{width:40%;max-width:155px;bottom:55px}
  .paired-phones{gap:28px;max-width:440px;padding:25px 12px 60px}
  .paired-phones .phone-back{transform:translateY(-22px) rotate(-5deg)}
  .paired-phones .phone-front{transform:translateY(32px) rotate(4deg)}
  .queue-cinema{display:flex;flex-direction:column;gap:45px;padding:40px 35px 75px}
  .queue-caption{order:-1;width:100%}
  .queue-caption h2{font-size:32px}
  .crossing-map-copy h2{font-size:36px}
  .report-product{width:min(310px,70vw)}
  .report-detail{padding-bottom:70px}
  .report-detail .device{width:min(210px,54vw);align-self:flex-end;margin-right:20px}
  .report-detail-copy h3{font-size:32px}
  .carplay-scene{aspect-ratio:auto}
  .carplay-heading{padding-bottom:calc(56.3vw + 48px)}
  .carplay-scene>img{width:100%}
  .carplay-scene:after{background:linear-gradient(#100f10 0%,#100f10 45%,transparent 70%,transparent 95%,#100f10)}
  .widget-showcase{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:360px){.highlight-day,.highlight-orange{height:540px}.highlight-orange .device{height:54%}}
/* Two-line headline sits behind the phone; keep room to reveal it on short screens. */
.hero-masthead h1{font-size:min(clamp(112px,15.6vw,220px),24svh);padding-inline:0}
@media(min-width:701px){
  .hero-masthead{top:150px}
  .hero-masthead h1{font-size:min(clamp(112px,16.5vw,236px),25.5svh)}
}
.hero-masthead h1 span{display:block;position:relative;left:50%;width:max-content;white-space:nowrap;transform:translate(calc(-50% + var(--hero-word-x,0px)),var(--hero-word-y,0px))}
.hero-bottom .hero-caption .hero-route{display:block;font-size:14px;font-weight:400;letter-spacing:0;line-height:1.5;max-width:490px;margin:12px auto 0;color:#a8c8df}
.is-cinematic .hero-masthead{transform:scale(var(--hero-title-scale,1));transform-origin:50% 0;will-change:transform}
/* Short screens and reduced motion use normal flow, so the larger heading
   never collides with the phone or download controls when scrolling is off. */
.hero:not(.is-cinematic) .hero-stage{height:auto;min-height:100svh;padding:130px 20px 48px}
.hero:not(.is-cinematic) .hero-masthead{position:relative;top:auto}
.hero:not(.is-cinematic) .hero-product{position:relative;top:auto;left:auto;transform:none;width:min(190px,32vw);margin:28px auto 42px}
.hero:not(.is-cinematic) .hero-bottom{position:relative;bottom:auto;left:auto;transform:none}
@media(max-width:700px){
  .hero-masthead h1{font-size:min(30vw,24svh)}
  .hero-bottom{gap:32px}
  .is-cinematic .hero-bottom{top:var(--hero-copy-top);bottom:auto}
}
.nav-current{display:none;white-space:nowrap}
.nav-feedback{display:none;white-space:nowrap}
#feedback{scroll-margin-top:140px}
@media(max-width:700px){.nav.has-section-nav .nav-links{display:none}.nav.has-section-nav .nav-current{display:block;font-size:12px}}
@media(max-width:700px){.nav:has(.nav-feedback){gap:12px}.nav-feedback{display:block;font-size:12px}}
.nav:has(.nav-current[href="#feedback"]) .nav-feedback{display:none}
.hero-viewport{position:absolute;top:0;left:0;width:0;height:100vh;height:100svh;visibility:hidden;pointer-events:none;overflow:hidden}
.hero-fleet{display:contents}
.hero-companion{position:absolute;left:50%;top:50%;width:clamp(190px,24svh,290px);z-index:2;pointer-events:none;opacity:0}
.hero-companion.hero-outer{z-index:1}
.hero-fleet .hero-product{z-index:3}
.is-cinematic .hero-companion{opacity:var(--fan-opacity,0);transform:translate(-50%,-50%) translate(var(--fan-x,0px),var(--fan-y,32svh)) scale(var(--fan-scale,2.3));will-change:transform,opacity}
.hero:not(.is-cinematic) .hero-fleet{display:block;position:relative;margin:28px auto 42px}
.hero:not(.is-cinematic) .hero-fleet .hero-product{width:min(190px,18vw);margin:0 auto}
.hero:not(.is-cinematic) .hero-companion{width:min(190px,18vw);opacity:1;transform:translate(calc(-50% + var(--slot)*100%),-50%) scale(.88)}
@media(max-width:700px){.hero-companion{width:clamp(142px,36vw,190px)}}
/* Render at maximum hero size; scroll transforms only shrink these layers. */
.is-cinematic .hero-product,.is-cinematic .hero-companion{width:clamp(494px,62.4svh,754px)}
.is-cinematic .hero-product{--hero-scale:1}
.is-cinematic .hero-companion{--fan-scale:1}
.is-cinematic .hero-fleet .device{--turn-perspective:3640px;box-shadow:0 72.8px 143px -46.8px #0007,inset 0 0 0 1.95px #a9bbc980}
@media(max-width:700px){.is-cinematic .hero-product,.is-cinematic .hero-companion{width:clamp(369.2px,93.6vw,494px)}}
/* Slow axial turns, with each composition retaining its own roll and offset.
   Only transforms animate: the large screenshot and shadow remain cached. */
.device.phone-motion,.widget-preview.phone-motion{
  --pose-roll:0deg;--pose-lift:0px;--yaw-a:-12deg;--yaw-b:12deg;--pitch-a:3deg;--pitch-b:-3deg;
  animation:phone-axial-turn var(--turn-duration,24s) ease-in-out var(--turn-phase,0s) infinite;
  animation-play-state:paused;transform-origin:50% 50%;backface-visibility:hidden;
}
.device.phone-motion.motion-active,.widget-preview.phone-motion.motion-active{animation-play-state:running;will-change:transform}
.widget-small.phone-motion{--pose-roll:-2deg;--yaw-a:-13deg;--yaw-b:11deg;--pitch-a:5deg;--pitch-b:-4deg;--turn-duration:26s;--turn-phase:-3s}
.widget-medium.phone-motion{--pose-roll:1.5deg;--yaw-a:10deg;--yaw-b:-10deg;--pitch-a:-4deg;--pitch-b:5deg;--turn-duration:30s;--turn-phase:-10s}
.activity-preview.phone-motion{--pose-roll:-1deg;--yaw-a:-10deg;--yaw-b:12deg;--pitch-a:4deg;--pitch-b:-5deg;--turn-duration:28s;--turn-phase:-16s}
.hero-product .phone-motion{--yaw-a:-16deg;--yaw-b:9deg;--pitch-a:4deg;--pitch-b:-2deg;--turn-duration:28s;--turn-phase:-4s}
.highlight-day .phone-motion{--pose-roll:7deg;--turn-duration:24s;--turn-phase:-2s}
.highlight-day .card-companion.phone-motion{--pose-roll:-9deg;--yaw-a:9deg;--yaw-b:-9deg;--turn-duration:28s;--turn-phase:-8s}
.highlight-orange .phone-motion{--pose-roll:-6deg;--yaw-a:15deg;--yaw-b:-10deg;--turn-duration:29s;--turn-phase:-8s}
.highlight-appearance .appearance-map.phone-motion{--pose-roll:-7deg;--yaw-a:10deg;--yaw-b:-8deg;--turn-duration:28s;--turn-phase:-5s}
.highlight-appearance .appearance-classic.phone-motion{--pose-roll:-7deg;--yaw-a:-9deg;--yaw-b:11deg;--turn-duration:32s;--turn-phase:-14s}
/* The timetable pair uses the same idle turn as the other phones, but with
   gentler angles and offset phases so the screens stay easy to read. */
.paired-phones .phone-back.phone-motion{--pose-roll:-5deg;--pose-lift:-36px;--yaw-a:8deg;--yaw-b:-8deg;--pitch-a:2deg;--pitch-b:-2deg;--turn-duration:26s;--turn-phase:-5s}
.paired-phones .phone-front.phone-motion{--pose-roll:4deg;--pose-lift:54px;--yaw-a:-8deg;--yaw-b:8deg;--pitch-a:-2deg;--pitch-b:2deg;--turn-duration:30s;--turn-phase:-11s}
.report-product .phone-motion{--yaw-a:-16deg;--yaw-b:14deg;--pitch-a:4deg;--pitch-b:-3deg;--turn-duration:30s;--turn-phase:-6s}
.report-detail .phone-motion{--yaw-a:9deg;--yaw-b:-8deg;--pitch-a:2deg;--pitch-b:-2deg;--turn-duration:26s;--turn-phase:-3s}
.theme-product .phone-motion{--yaw-a:-11deg;--yaw-b:11deg;--pitch-a:1deg;--pitch-b:-1deg;--turn-duration:32s;--turn-phase:-8s}
@keyframes phone-axial-turn{
  0%,100%{transform:perspective(var(--turn-perspective,1400px)) translateY(var(--pose-lift)) rotateZ(var(--pose-roll)) rotateX(var(--pitch-a)) rotateY(var(--yaw-a))}
  50%{transform:perspective(var(--turn-perspective,1400px)) translateY(var(--pose-lift)) rotateZ(var(--pose-roll)) rotateX(var(--pitch-b)) rotateY(var(--yaw-b))}
}
.gallery-controls .gallery-caption{display:block}
.gallery-controls .motion-toggle,.widget-example-note .motion-toggle{width:auto;height:auto;border:0;border-radius:0;padding:8px 0 0;background:none;color:#c1d3e1;font-size:12px;text-align:left;text-decoration:underline;text-underline-offset:3px}
.motion-toggle[hidden]{display:none}
@media(max-width:700px){
  .highlight-day .phone-motion{--pose-roll:6deg}
  .highlight-day .card-companion.phone-motion{--pose-roll:-8deg}
  .paired-phones .phone-back.phone-motion{--pose-lift:-22px}
  .paired-phones .phone-front.phone-motion{--pose-lift:32px}
}
@media(prefers-reduced-motion:reduce){.device.phone-motion,.widget-preview.phone-motion{animation:none;will-change:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none;transition:none}.themes-section,.themes-section h2 span{transition:none}.hero-product{will-change:auto}}
/* Centered caption from the 3D study, shared by desktop and mobile. */
.hero-bottom{align-items:center;flex-direction:column;justify-content:flex-start;text-align:center;gap:24px}
.hero-bottom>p.hero-caption{font-size:clamp(22px,3vw,38px);font-weight:600;letter-spacing:-.03em;line-height:1.15;color:#c4dbe9}
.hero-bottom>p.hero-caption span{color:inherit}
.hero-bottom>div{text-align:center}
.is-cinematic .hero-bottom{top:var(--hero-copy-top);bottom:auto}
@media(max-width:700px){.hero-bottom{gap:32px}.hero-bottom>p.hero-caption{font-size:22px}.hero-caption span{display:block}}
/* Explicit radii keep the glow inside the scene at every aspect ratio.
   The default farthest-corner ellipse still painted light at the bottom,
   leaving a seam against the solid #102b40 canvas beneath Safari's toolbar. */
.hero-stage{background:radial-gradient(ellipse 75% 38% at 50% 50%,#548eb780 0%,#285e8140 53%,#102b4000 100%)}
/* Keep the scroll invitation readable over the phone, not just the backdrop.
   Its scrim fades out with the cue as the visitor starts scrolling.
   Extend the dark tail beyond the scene so Safari's address-bar area does
   not meet a cut-off scrim. Do not fade back to the bright phone at the bottom.
   Only the section clips this overscan; scene height and pinning stay intact. */
.is-cinematic .hero-scroll-cue{justify-content:center;width:42px;height:42px;isolation:isolate;padding:0}
.is-cinematic .hero-scroll-cue::before{--scrim-fade:clamp(180px,28svh,300px);--scrim-bleed:calc(200px + env(safe-area-inset-bottom,0px));content:"";position:absolute;z-index:-1;pointer-events:none;left:50%;bottom:calc(-34px - var(--scrim-bleed));transform:translateX(-50%);width:100vw;height:calc(var(--scrim-fade) + var(--scrim-bleed));background:linear-gradient(to bottom,#02080e00 0px,#02080e38 calc(var(--scrim-fade)*.35),#02080edb var(--scrim-fade),#02080edb 100%)}
/* One continuous stroke in each direction: no intermediate easing stop on
   the way up. Sine-like easing keeps velocity smooth at both turning points. */
.hero-scroll-cue>.round-link{position:relative;inset:auto;flex-shrink:0;background:#a8c8df;animation:hero-scroll-bounce 1.8s cubic-bezier(.37,0,.63,1) infinite}
@keyframes hero-scroll-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){.hero-scroll-cue>.round-link{animation:none}}
.hero-models{position:absolute;inset:0 0 -160px;z-index:2;pointer-events:none;opacity:var(--hero-model-opacity,0)}
/* Opacity advances in the existing 3D loop after two warm-up frames. */
@media(prefers-reduced-motion:reduce){.has-3d .hero-models{opacity:1}}
.hero-models canvas{display:block;width:100%;height:100%}
.has-3d .hero-product,.has-3d .hero-companion{opacity:0!important}
.has-3d .hero-fleet .phone-motion{animation-play-state:paused;will-change:auto}
/* Editorial phones retain layout/roll, but their yaw/pitch now rotate the mesh. */
.device.model-phone{background:transparent;box-shadow:none;overflow:visible}
.device.section-phone-pending:not(.model-phone){visibility:hidden}
.device.model-phone.phone-motion{animation:none;will-change:auto;transform:translateY(var(--pose-lift,0px)) rotate(var(--pose-roll,0deg))}
.device.model-phone>img{opacity:0}
.device.model-phone:after{display:none}
.section-phone-canvas{display:none;position:absolute;left:-12%;top:-6%;width:124%;height:112%;max-width:none;pointer-events:none}
.model-phone>.section-phone-canvas{display:block}
@media(max-width:700px){
  .hero.is-cinematic{height:var(--hero-total-height,220svh);min-height:0}
  .is-cinematic .hero-pin-track{height:var(--hero-scroll-distance,120svh)}
  .hero:not(.is-cinematic) .hero-stage{min-height:0}
}

/* Native compositor glass: no JavaScript rasterisation or refraction shader.
   Keep blur on the inset capsule, never on the full-width safe-area wrapper. */
/* Borderless capsule: ease the section tint in as it reaches the menu.
   Keep the native blur unchanged; no capture canvas or refraction renderer. */
.nav.nav-native{background:color-mix(in srgb,var(--glass-theme,#182f46) 65%,transparent);-webkit-backdrop-filter:blur(18px) saturate(130%);backdrop-filter:blur(18px) saturate(130%);border:1px solid transparent;box-shadow:0 5px 20px #0001;transition:background-color .4s ease,color .4s ease}
.nav.nav-native:after{display:none}
.nav.nav-native[data-tone=light]{background:color-mix(in srgb,var(--glass-theme,#f0eee7) 65%,transparent);border-color:transparent;box-shadow:0 5px 20px #0001}
@media(prefers-reduced-motion:reduce){.nav.nav-native{transition:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav.nav-native{background:#182f46}.nav.nav-native[data-tone=light]{background:#f0eee7}}
@media(prefers-reduced-transparency:reduce){.nav.nav-native{background:var(--glass-theme,#182f46);-webkit-backdrop-filter:none;backdrop-filter:none}.nav.nav-native[data-tone=light]{background:#f0eee7}}