/* A quiet product page: app first, decorative scenes at their native ratio. */
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{background:radial-gradient(ellipse at 75% 10%,#23304755,transparent 45%),var(--paper)}
.site-header,main,footer{width:min(1280px,calc(100% - 96px));margin-inline:auto}
.site-header{height:112px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #9baec21c}
.brand{display:flex;align-items:center;gap:9px;font-size:29px;font-weight:800;letter-spacing:-.055em}
.brand-wordmark{display:block;width:246px;height:auto;flex:none}
.brand-description{font:400 14px/1.3 var(--sans);letter-spacing:0;color:#d8e1e9;border-left:1px solid #94a6be4d;padding-left:12px;margin-left:5px}
.header-note{font:italic 15px/1.5 var(--serif);color:#a9b5c5}
.hero{display:grid;grid-template-columns:.83fr 1.17fr;align-items:center;gap:54px;padding:76px 0 64px}
.hero-content{padding-bottom:22px}
h1{font:400 clamp(58px,5.7vw,84px)/1.04 var(--serif);letter-spacing:-.055em;margin:22px 0 24px}
h1 em{font-weight:400;white-space:nowrap;color:#f2eae3}
.hero-description{max-width:360px;font-size:17px;line-height:1.75;color:#b4c1ce}
.hero-actions{display:flex;align-items:center;gap:17px;margin-top:29px}
.platform-note{font-size:11px;color:#94a5b9;white-space:nowrap}
.product-preview{min-width:0;position:relative}
.product-preview::before{content:'';position:absolute;inset:10% 4%;background:#728cb720;filter:blur(60px);z-index:-1}
.preview-zoom{position:relative;display:block;width:100%;padding:0;background:#0e1729;border:1px solid #a2bad33d;border-radius:13px;overflow:hidden;box-shadow:0 26px 70px #03091270,0 2px 8px #0005;transition:transform .25s,border-color .25s}
.preview-zoom:hover{transform:translateY(-4px);border-color:#a2bad380}
.preview-zoom img{display:block;width:100%;height:auto}
.zoom-hint{position:absolute;right:14px;bottom:14px;background:#0d1a2ceb;border:1px solid #a8bac540;padding:8px 10px;border-radius:5px;font-size:10px;opacity:0;transition:opacity .2s}
.preview-zoom:hover .zoom-hint,.preview-zoom:focus-visible .zoom-hint{opacity:1}
figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 3px 0;color:#8598ae;font:10px/1.5 var(--sans)}
figcaption>span:first-child{font:9px/1.5 var(--mono);letter-spacing:.09em;color:#c1cad5}
.highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:52px;padding:32px 0 44px;border-top:1px solid #9baec225}
.highlights h3{font-size:15px;font-weight:500;margin-bottom:10px;letter-spacing:-.01em}
.highlights p{font-size:13px;line-height:1.8;color:#96a7bb;max-width:310px}
.scene-gallery{margin-top:38px}
.scene-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px}
.scene-toolbar h2{font:400 28px/1.2 var(--serif);letter-spacing:-.025em}
.scene-toolbar p{font-size:12px;line-height:1.6;color:#99abbd;margin-top:8px}
.scene-controls{display:flex;gap:12px;align-items:center}
.scene-controls label{display:flex;align-items:center;gap:8px;color:#8194ab;font:10px var(--sans)}
.scene-controls select{font-size:12px;max-width:200px;background:#1a2636;border:1px solid #99abc12e;border-radius:5px;padding:10px 11px;color:#d4dce5;cursor:pointer;min-height:40px}
.app-artwork{width:100%;max-width:1600px;aspect-ratio:40/11;margin-inline:auto;background-size:100% 100%;background-position:center;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px #a0b8cd22}
.app-artwork iframe{display:block;width:100%;height:100%;border:0;pointer-events:none}
.scene-note{font-size:11px;text-align:center;color:#8091a8;margin-top:17px}
.feature-details{margin:43px 0 0;border-block:1px solid #9baec225}
.feature-details summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;padding:24px 0;font-size:13px;color:#b6c5d5}
.feature-details summary::-webkit-details-marker{display:none}
.feature-details summary>span{font-size:22px;font-weight:300}.feature-details[open] summary>span{transform:rotate(45deg)}
.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 52px;margin:4px 0 24px}
.feature-list dt{font-size:14px;margin-bottom:8px;color:#e0e6ed}.feature-list dd{margin:0;font-size:13px;line-height:1.8;color:#99aabc}
.features-platform{font-size:12px;line-height:1.6;color:#879bb1;padding-bottom:24px}
footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:28px 42px;font-size:10px;line-height:1.6;color:#71849c}
.image-dialog{width:min(1200px,calc(100% - 32px));padding:12px}
.image-dialog-heading{display:flex;align-items:center;justify-content:space-between;padding:0 5px 9px;font-size:12px;color:#bdc9d6}
.image-dialog-heading button{background:none;border:0;font-size:27px;width:40px;height:40px}
.image-dialog img{display:block;width:100%;height:auto;max-height:calc(100svh - 160px);object-fit:contain;border-radius:8px;background:#0f1829}
.image-dialog>p{font-size:11px;line-height:1.6;color:#99aabd;padding:12px 5px 3px}
@media(max-width:1100px){.site-header,main,footer{width:calc(100% - 64px)}.hero{gap:30px;padding-block:56px}.hero-actions{align-items:flex-start;flex-direction:column;gap:12px}h1{font-size:clamp(49px,6vw,68px)}.hero-description{font-size:15px}.highlights{gap:28px}}
@media(max-width:760px){.site-header,main,footer{width:calc(100% - 40px)}.site-header{height:88px}.brand{font-size:25px}.brand-mark{font-size:29px}.header-note{display:none}.hero{grid-template-columns:1fr;gap:36px;padding:44px 0 34px}.hero-content{padding:0}h1{font-size:clamp(54px,11vw,76px);margin:18px 0 19px}.hero-description{font-size:15px;max-width:410px}.hero-actions{flex-direction:row;align-items:center;gap:16px;margin-top:24px}.primary-button{padding:14px 17px;font-size:13px;gap:18px}.platform-note{font-size:10px}.highlights{grid-template-columns:1fr;gap:23px;padding:28px 0}.highlights h3{margin-bottom:5px}.highlights p{max-width:100%;font-size:13px}.scene-gallery{margin-top:24px}.scene-toolbar{align-items:flex-start;flex-direction:column;gap:17px}.scene-toolbar h2{font-size:27px}.scene-controls{width:100%;justify-content:space-between;gap:8px}.scene-controls label{gap:6px}.scene-controls select{padding:9px 8px;font-size:11px;max-width:168px}.app-artwork{border-radius:6px}.scene-note{font-size:10px}.feature-details{margin-top:28px}.feature-list{grid-template-columns:1fr;gap:23px}footer{align-items:flex-start;flex-direction:column;gap:6px;padding-block:24px 30px}figcaption{font-size:9px;gap:9px;margin-top:14px}figcaption>span:first-child{font-size:8px}.zoom-hint{display:none}}
@media(max-width:360px){.hero-actions{gap:12px}.primary-button{padding:13px;font-size:12px;gap:12px}.scene-controls label{flex-direction:column;align-items:flex-start}.scene-controls label:first-child{flex:1}.scene-controls select{max-width:100%;width:100%}h1{font-size:47px}}

/* Native map preview; website controls stay outside the app frame. */
.hero{position:relative;isolation:isolate;padding-top:120px;gap:42px;grid-template-columns:.76fr 1.24fr}
.hero-art{position:absolute;z-index:-1;pointer-events:none;top:-62px;left:50%;transform:translateX(-50%);width:min(1800px,100vw);aspect-ratio:40/11;min-height:350px;background:url('assets/app-scenes/asteroid/night.webp') center/cover;opacity:.7;mask-image:linear-gradient(#000 35%,transparent 100%)}
.hero-art::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#111a29de 5%,#111a2955 45%,#111a2911 80%,#111a2980)}
.hero-art iframe{width:100%;height:100%;border:0;display:block}.hero-content{padding-bottom:0}.hero-description{color:#c2cbd7}.product-preview{--app-scale:.75}.radar-demo{border:1px solid #75899b88;border-radius:14px;overflow:hidden;background:#10192d;box-shadow:0 28px 80px #030814b3,0 0 0 1px #050b1866}
.demo-map{position:relative;width:100%;height:490px;overflow:hidden;background:#10192d;font-family:-apple-system,BlinkMacSystemFont,sans-serif;color:#eef0f5}
#demo-map-canvas{position:absolute;inset:0}.maplibregl-canvas{outline-offset:-3px!important}.app-chrome{position:absolute;inset:0;pointer-events:none;z-index:2}
.app-window-dots{position:absolute;left:calc(14px * var(--app-scale));top:calc(14px * var(--app-scale));display:flex;gap:calc(8px * var(--app-scale))}.app-window-dots i{width:calc(12px * var(--app-scale));height:calc(12px * var(--app-scale));border-radius:50%;background:#ff6059}.app-window-dots i:nth-child(2){background:#ffbd2e}.app-window-dots i:nth-child(3){background:#28c840}
.app-header-handle{position:absolute;top:calc(34px * var(--app-scale));left:50%;transform:translateX(-50%);width:calc(34px * var(--app-scale));height:calc(20px * var(--app-scale));border-radius:calc(6px * var(--app-scale));background:#142536e0;display:grid;place-items:center}.app-header-handle img{width:calc(12px * var(--app-scale));height:calc(12px * var(--app-scale))}
.app-weather{position:absolute;top:calc(46px * var(--app-scale));left:calc(16px * var(--app-scale));display:flex;align-items:center;gap:calc(10px * var(--app-scale));width:calc(240px * var(--app-scale));padding:calc(12px * var(--app-scale));border:calc(1px * var(--app-scale)) solid #75899b8c;border-radius:calc(8px * var(--app-scale));background:#142536}.app-weather-icon{width:calc(30px * var(--app-scale));height:calc(30px * var(--app-scale));filter:brightness(0) saturate(100%) invert(87%) sepia(24%) saturate(743%) hue-rotate(324deg)}.app-weather strong{display:flex;align-items:center;gap:calc(7px * var(--app-scale));font-size:calc(28px * var(--app-scale));line-height:1.15;font-weight:600;letter-spacing:calc(-0.5px * var(--app-scale))}.app-weather strong img{width:calc(12px * var(--app-scale));height:calc(12px * var(--app-scale));opacity:.7}.app-weather b,.app-weather span{display:block;font-size:calc(12px * var(--app-scale));margin-top:calc(4px * var(--app-scale));line-height:1.25}.app-weather b{font-weight:500}.app-weather span{color:#a8bbc3}
.app-toolbar{position:absolute;top:calc(46px * var(--app-scale));right:calc(16px * var(--app-scale));display:flex;align-items:center;gap:calc(4px * var(--app-scale));padding:calc(4px * var(--app-scale));border:calc(1px * var(--app-scale)) solid #75899b8c;border-radius:calc(12px * var(--app-scale));background:#142536}.app-toolbar img,.app-toolbar svg{width:calc(44px * var(--app-scale));height:calc(44px * var(--app-scale));padding:calc(10px * var(--app-scale))}.app-toolbar img:last-child{padding:calc(12px * var(--app-scale))}
.app-radar-status{position:absolute;top:calc(156px * var(--app-scale));left:calc(16px * var(--app-scale));padding:calc(6px * var(--app-scale)) calc(8px * var(--app-scale)) calc(13px * var(--app-scale));display:flex;align-items:center;gap:calc(6px * var(--app-scale));border:calc(1px * var(--app-scale)) solid #75899b8c;border-radius:calc(8px * var(--app-scale));background:#142536;font:calc(11px * var(--app-scale)) var(--mono)}.app-radar-status span{font-size:calc(9px * var(--app-scale));color:#a8bbc3}.app-radar-status b{font-weight:600;margin-right:calc(10px * var(--app-scale))}.app-radar-status img{width:calc(28px * var(--app-scale));height:calc(28px * var(--app-scale));padding:calc(7px * var(--app-scale))}.app-radar-status>i{position:absolute;bottom:calc(9px * var(--app-scale));left:calc(8px * var(--app-scale));right:calc(8px * var(--app-scale));height:calc(3px * var(--app-scale));background:#75899b66;border-radius:calc(4px * var(--app-scale))}.app-radar-status em{display:block;height:100%;background:#ffcc9f;border-radius:calc(4px * var(--app-scale))}
.app-location{width:12px;height:12px;border:2px solid #eef0f5;border-radius:50%;background:#5199cf;box-shadow:0 0 0 5px #5199cf33;pointer-events:none}
.demo-legend{position:absolute;left:13px;bottom:14px;width:170px;padding:12px;background:#142536ed;border:1px solid #75899b8c;border-radius:8px;pointer-events:none;font:11px -apple-system,BlinkMacSystemFont,sans-serif;color:#eef0f5}.demo-legend strong{font-weight:600;display:block;font-size:11px}.demo-legend>i{display:block;height:5px;border-radius:3px;margin:10px 0 6px;background:linear-gradient(90deg,#245d79,#449aaf,#63c8b9,#d6e990,#ffb66d,#f26067,#e89bc2,#f6deed)}.demo-legend>div{display:flex;justify-content:space-between;font-size:10px}.demo-legend small{display:flex;align-items:center;gap:7px;font-size:10px;margin-top:6px}.demo-legend small em{display:block;width:70px;height:5px;border-radius:3px;background:linear-gradient(90deg,#cad9d9,#68bfff,#052aff)}
.app-wordmark{position:absolute;left:200px;bottom:16px;font-size:14px;font-weight:800;letter-spacing:-.3px;pointer-events:none}
.demo-alert-marker{width:27px;height:27px;padding:5px;border-radius:50%;border:1px solid #efba56;background:#5d4724;box-shadow:0 2px 9px #0005}.demo-alert-marker img{width:100%;height:100%}.demo-alert-card{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);width:min(260px,calc(100% - 40px));border:1px solid #dfb16b88;border-radius:8px;background:#142536f5;box-shadow:0 8px 25px #0006;padding:17px;z-index:3}.demo-alert-card strong{font-size:13px;color:#f2cf92}.demo-alert-card p{font-size:11px;line-height:1.7;color:#bbcbd8;margin-top:8px}.demo-alert-card button{position:absolute;right:4px;top:2px;border:0;background:none;font-size:21px;padding:5px;color:#c3d0da}
.demo-loading{position:absolute;inset:0;display:grid;place-content:center;padding:28px;background:#10192d;color:#b7ccd9;font-size:13px;line-height:1.6;text-align:center;z-index:5}
.demo-layers{display:flex;align-items:center;gap:8px;padding-bottom:14px}.demo-layers>span{font:8px var(--mono);letter-spacing:.1em;color:#b1bdcd;margin-right:auto}.demo-layers button{display:flex;align-items:center;gap:6px;justify-content:center;padding:9px 12px;border:1px solid #9ab4c640;border-radius:7px;background:#14253699;color:#bbc8d4;font-size:11px;transition:background .18s,border-color .18s}.demo-layers button[aria-pressed=true]{color:#ffdcc0;background:#624b393d;border-color:#ffcc9f88}.demo-layers button:hover{border-color:#ffcc9f}.ui-icon{width:18px;height:18px;object-fit:contain;opacity:.9}
.demo-playback{display:flex;flex-wrap:wrap;align-items:center;margin-top:14px;gap:10px}.demo-timeline{display:flex;align-items:center;gap:11px;flex:1;min-width:160px}.demo-timeline>button{flex:none;width:32px;height:32px;border:1px solid #9db8c438;border-radius:6px;background:#233748;color:#e1eced;display:grid;place-items:center}.demo-timeline>button img{width:16px;height:16px}.demo-timeline>div{flex:1;min-width:0}.demo-time-labels{display:flex;justify-content:space-between;font:8px var(--mono);color:#849aaf;margin-bottom:5px}.demo-time-labels>span:first-child{color:#d0dedf}.demo-timeline input{display:block;appearance:none;width:100%;height:3px;margin:8px 0;background:#526878;border-radius:4px;accent-color:#ffcc9f;cursor:pointer}.demo-timeline input::-webkit-slider-thumb{appearance:none;width:10px;height:10px;border-radius:50%;background:#ffcc9f}.demo-timeline input::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:#ffcc9f}.demo-timeline input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.demo-zoom{order:2;display:flex;border:1px solid #a3b8c92b;border-radius:5px;overflow:hidden}.demo-zoom button{display:grid;place-items:center;width:30px;height:30px;padding:7px;border:0;border-right:1px solid #a3b8c922;background:transparent}.demo-zoom button:last-child{border-right:0}.demo-zoom img{width:100%;height:100%}.demo-credits{flex-basis:100%;order:3;font-size:8px;line-height:1.6;color:#8397ad}.demo-credits a:hover{text-decoration:underline}#demo-disclosure{font-size:10px;line-height:1.5;color:#8599ae;margin:6px 0 0}
@media(max-width:1100px) and (min-width:761px){.hero{gap:26px}.demo-map{height:430px}.demo-layers>span{display:none}.demo-layers button{flex:1;padding:9px 7px}.demo-legend{width:140px;font-size:9px}.demo-legend strong{font-size:10px}.app-wordmark{left:167px;font-size:12px}}
@media(max-width:760px){.hero{grid-template-columns:1fr;padding-top:64px;gap:38px}.hero-art{top:-40px;min-height:300px;opacity:.7;width:100vw;aspect-ratio:1.7;max-height:360px}.hero-art::after{background:linear-gradient(90deg,#111a29a0,#111a2944)}.demo-map{height:420px}.demo-layers>span{display:none}.demo-layers button{flex:1;padding:9px 6px;font-size:10px}.ui-icon{width:16px;height:16px}.demo-layers{gap:6px}.demo-legend{width:145px;padding:10px}.demo-legend strong{font-size:10px}.demo-legend>div,.demo-legend small{font-size:9px}.app-wordmark{left:173px;font-size:12px}.demo-credits{font-size:7px}#demo-disclosure{font-size:9px}}
@media(max-width:360px){.demo-map{height:390px}.demo-layers button{gap:3px;font-size:9px;padding-inline:4px}.ui-icon{width:14px;height:14px}.app-wordmark{font-size:10px;left:170px}.demo-time-labels{font-size:7px}.demo-zoom button{width:27px;height:29px}}
.site-header{position:relative;z-index:2}.hero-art{mask-image:linear-gradient(transparent 0%,#000 14%,#000 35%,transparent 100%)}
.app-wordmark{width:130px;height:auto}
@media(max-width:1100px){.app-wordmark{width:110px}}
@media(max-width:360px){.app-wordmark{width:90px}}
.demo-storm-marker{border-color:#ad98e6;background:#45385d}.demo-fire-marker{border-color:#ff8c55;background:#643926}
.demo-alert-eyebrow{display:block;font:7px var(--mono);letter-spacing:.09em;color:#9dafbf;margin-bottom:7px}.demo-alert-card[data-kind=storm]{border-color:#ad98e688}.demo-alert-card[data-kind=storm] strong{color:#cab8fa}.demo-alert-card[data-kind=fire]{border-color:#ff8c5588}.demo-alert-card[data-kind=fire] strong{color:#ffb592}.demo-alert-card button{right:7px;top:7px;width:28px;height:28px;padding:7px}.demo-alert-card button img{display:block;width:100%;height:100%}
/* Four coordinated page looks. The app's map and radar use the same selection. */
:root{--surface:#142536}.site-header,footer,.highlights,.feature-details{border-color:color-mix(in srgb,var(--accent) 15%,transparent)}
body{background:radial-gradient(ellipse at 75% 10%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 45%),var(--paper);transition:none}
.hero{padding-top:112px;padding-bottom:62px}.hero-content{min-width:0}.hero-description{max-width:375px}.hero-art::after{background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 87%,transparent) 5%,color-mix(in srgb,var(--paper) 33%,transparent) 45%,color-mix(in srgb,var(--paper) 7%,transparent) 80%,color-mix(in srgb,var(--paper) 50%,transparent))}
.theme-picker{margin-top:34px;max-width:400px}.theme-picker>p:first-child{font:8px var(--mono);letter-spacing:.12em;color:#a5b4c4;margin-bottom:12px}.theme-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.theme-options button{border:1px solid #a5b9ca30;border-radius:7px;padding:0;background:color-mix(in srgb,var(--surface) 78%,transparent);overflow:hidden;min-width:0;transition:border-color .2s,transform .2s}.theme-options button img{display:block;width:100%;height:47px;object-fit:cover;object-position:65% 50%;opacity:.65;transition:opacity .2s}.theme-options button span{display:block;font-size:9px;line-height:1.2;padding:10px 3px;color:#b6c3d2;white-space:nowrap}.theme-options button[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent)}.theme-options button[aria-pressed=true] img,.theme-options button:hover img{opacity:1}.theme-options button[aria-pressed=true] span{color:var(--accent)}.theme-options button:hover{transform:translateY(-2px);border-color:var(--accent)}#theme-quip{font:italic 12px/1.6 var(--serif);color:#aebccc;margin-top:12px;min-height:38px}
.demo-layers>span{font-size:7px}.demo-layers button[aria-pressed=true]{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}.demo-layers button:hover{border-color:var(--accent)}.demo-layers .demo-motion{width:34px;padding:9px;flex:none;margin-left:2px}.demo-motion img{width:12px;height:16px;object-fit:contain}.demo-credits{margin-top:11px;font-size:7px;opacity:.85}.demo-legend>i{background:var(--radar-gradient)}
.app-weather,.app-toolbar,.app-radar-status,.demo-layers button,.demo-alert-card{background:var(--surface)}.app-header-handle,.demo-legend{background:color-mix(in srgb,var(--surface) 94%,transparent)}.app-radar-status em{background:var(--accent)}.app-weather-icon{filter:none;object-fit:contain;opacity:0}.app-weather{position:absolute}.app-weather::before{content:'';position:absolute;left:calc(12px * var(--app-scale));width:calc(30px * var(--app-scale));height:calc(30px * var(--app-scale));background:var(--accent);mask:url('assets/app-ui/cloud.png') center/contain no-repeat}
.feature-number{display:block;font:8px var(--mono);letter-spacing:.1em;color:var(--accent);margin-bottom:17px}.highlights{padding-top:36px}.highlights h3{font:400 24px/1.2 var(--serif);margin-bottom:13px}.highlights p{font-size:13px;max-width:340px}.scene-current{font:9px var(--mono);letter-spacing:.06em;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);padding:10px 13px;border-radius:20px;white-space:nowrap}.scene-toolbar h2{font-size:30px}
@media(max-width:1100px) and (min-width:761px){.theme-options{grid-template-columns:repeat(2,minmax(0,1fr));max-width:290px}.theme-options button{display:flex;align-items:center}.theme-options button img{width:38px;height:40px;flex:none}.theme-options button span{white-space:normal;text-align:left;padding:6px;font-size:9px}.demo-layers .demo-motion{width:30px;padding:7px}}
@media(max-width:760px){.hero{padding-top:54px;padding-bottom:34px;gap:24px}.theme-picker{margin-top:26px;max-width:410px}.theme-options button span{font-size:8px}.theme-options button img{height:43px}#theme-quip{min-height:20px;margin-top:10px}.hero-art::after{background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 68%,transparent),color-mix(in srgb,var(--paper) 30%,transparent))}.demo-layers{gap:5px}.demo-layers button{padding:9px 5px;font-size:10px}.demo-layers .demo-motion{width:28px;margin-left:0;padding:6px}.feature-number{margin-bottom:8px}.highlights h3{font-size:23px}.scene-toolbar{gap:12px}.scene-toolbar h2{font-size:27px}.scene-current{font-size:8px;padding:7px 10px}}
@media(max-width:360px){.theme-options{gap:5px}.theme-options button span{font-size:7px;padding:9px 2px}.demo-layers .ui-icon{width:12px}.demo-layers button{font-size:9px;gap:3px;padding-inline:3px}.demo-layers .demo-motion{width:25px}.hero h1{font-size:46px}}

/* A compact outlook control keeps the hero focused on the weather. */
.outlook-switcher{display:flex;align-items:center;gap:9px;flex:none;color:#acbbc9}
.outlook-switcher>span{font:8px var(--mono);letter-spacing:.12em}
.outlook-switcher>span{margin-right:7px}
.outlook-switcher button{width:42px;height:42px;padding:3px;border:1px solid #abc0d344;border-radius:50%;background:var(--surface);cursor:pointer;transition:border-color .18s,box-shadow .18s}
.outlook-switcher button img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:66% center}
.outlook-switcher button[data-site-theme=mountains] img{object-position:50% center}
.outlook-switcher button[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--accent)}
.outlook-switcher button:hover{border-color:var(--accent)}
.outlook-switcher button:focus-visible{outline:2px solid #fff;outline-offset:5px}
.demo-layers button[aria-pressed=true]{background:color-mix(in srgb,var(--surface) 88%,var(--accent))}
.hero{padding-top:100px;align-items:center}
.hero-content{text-shadow:0 2px 18px color-mix(in srgb,var(--paper) 65%,transparent)}
.hero-art{opacity:1;mask-image:linear-gradient(transparent 0%,#000 10%,#000 68%,transparent 100%)}
.hero-art::after{background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 62%,transparent) 5%,color-mix(in srgb,var(--paper) 22%,transparent) 36%,transparent 62%,color-mix(in srgb,var(--paper) 12%,transparent))}
#theme-quip{margin-top:23px;min-height:0;color:#bac6d1}
@media(max-width:760px){.site-header{gap:10px}.brand{font-size:22px}.brand-mark{font-size:26px}.brand-description{display:none}.outlook-switcher{gap:6px}.outlook-switcher>span{display:none}.outlook-switcher button{width:36px;height:36px;padding:2px}.hero{padding-top:60px;gap:32px}.hero-art{opacity:1;mask-image:linear-gradient(transparent,#000 8%,#000 65%,transparent)}.hero-art::after{background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 52%,transparent),color-mix(in srgb,var(--paper) 10%,transparent))}#theme-quip{font-size:12px;margin-top:21px}}
@media(max-width:360px){.brand{font-size:18px;gap:5px}.brand-mark{font-size:23px}.outlook-switcher{gap:4px}.outlook-switcher button{width:32px;height:32px}.hero{padding-top:46px}}

/* Open feature layout: one visual surface, with unboxed editorial copy. */
.features-intro{padding:38px 0 30px;border-top:1px solid color-mix(in srgb,var(--accent) 16%,transparent)}
.features-intro .eyebrow{font-size:14px;letter-spacing:.1em;margin-bottom:15px}
.features-intro h2{font:400 clamp(32px,3.1vw,44px)/1.14 var(--serif);letter-spacing:-.03em;margin-bottom:15px}
.features-intro h2 em{font-weight:400;color:var(--accent)}
.features-intro>p:last-child{font-size:16px;line-height:1.7;color:#bdc9d7;max-width:540px}
.highlights{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 36px;padding:0 0 40px;border:0;align-items:start}
.highlights article{min-width:0;overflow:visible;border:0;border-radius:0;background:none;box-shadow:none}
.feature-copy{padding:24px 0 0}
.highlights h3{font:400 clamp(26px,2.2vw,31px)/1.2 var(--serif);letter-spacing:-.025em;margin:0 0 12px}
.highlights .feature-copy>p{font-size:16px;line-height:1.7;max-width:none;margin:0;color:#bdc9d7}
.highlights .feature-kicker{display:flex;align-items:center;gap:10px;margin:0 0 15px}
.highlights .feature-kicker .site-icon{width:20px;height:20px;color:var(--accent)}
.highlights .feature-number{font:500 14px/1.4 var(--sans);letter-spacing:.015em;margin:0;color:var(--accent)}
.feature-visual{aspect-ratio:16/10;margin:0;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;border-radius:20px;padding:32px;background:radial-gradient(ellipse at 50% 0%,#50698755,transparent 72%),linear-gradient(145deg,#27374c,#111c2c);border:0;box-shadow:none}
/* Draw above every image/canvas and inside the clipped edge. A fixed color
   keeps the highlight identical across artwork, scene themes and focus states. */
.feature-visual::after{content:'';position:absolute;inset:0;z-index:10;pointer-events:none;border:1px solid #405368;border-radius:inherit;transition:border-color 180ms}
.feature-card:focus-within .feature-visual::after{border-color:#dce7f2}
.feature-capture{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border:0;border-radius:8px;box-shadow:0 16px 32px #0005}
.forecast-captures{display:flex;flex-direction:column;gap:14px;width:72%;max-width:380px;max-height:100%;padding:16px;background:#152435;overflow:hidden;border-radius:12px;box-shadow:0 18px 36px #0004}
.forecast-captures img{display:block;min-height:0;max-width:100%;width:100%;height:auto;object-fit:contain}
.alerts-visual{background:radial-gradient(ellipse at 15% 15%,#783c5333,transparent 55%),radial-gradient(ellipse at 85% 85%,#307e9633,transparent 55%),#142333}
.event-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.2vw,18px) 12px;width:100%;max-width:480px;padding:0;border:0;background:none;box-shadow:none}
.event-type{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;font-size:14px;line-height:1.3;color:#e5edf4;--event:#f1a8b8}
.event-symbol{display:grid;place-items:center;width:clamp(34px,3.3vw,48px);height:clamp(34px,3.3vw,48px);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--event) 19%,transparent),color-mix(in srgb,var(--event) 5%,transparent));color:var(--event)}
.event-symbol .site-icon,.event-symbol img{width:24px;height:24px;object-fit:contain}
.event-type.flood{--event:#89ceec}.event-type.tropical{--event:#c7aff8}.event-type.fire{--event:#ffb282}.event-type.lightning{--event:#f5d27b}.event-type.winter{--event:#a6e4ea}
.mac-visual .feature-capture{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:calc(100% - 64px);width:auto;max-width:calc(100% - 64px)}
.radar-visual{padding:0;display:flex;flex-direction:column;background:#122333}
.palette-map{position:relative;width:100%;min-height:0;flex:1;overflow:hidden}
.palette-map canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.palette-fallback{width:100%;height:100%;object-fit:contain}
.palette-ready canvas{opacity:1}.palette-ready .palette-fallback{visibility:hidden}
.mac-visual,.notifications-visual{isolation:isolate;background:#253b50}
.mac-visual::before,.notifications-visual::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,#2d496980,#142c3e99),url('assets/app-scenes/mountains/dawn.webp') center/cover;opacity:.6}
.notifications-visual::before{background:linear-gradient(135deg,#274554aa,#152e4099),url('assets/app-scenes/deeptrouble/dusk.webp') center/cover;opacity:.5}
.event-type.tropical .event-symbol img{filter:brightness(0) saturate(100%) invert(80%) sepia(25%) saturate(806%) hue-rotate(210deg)}
.notification-sample{display:flex;align-items:center;gap:14px;width:min(100%,410px);padding:22px;border:1px solid #d1deeb3d;border-radius:18px;background:linear-gradient(120deg,#34495eed,#20394eeb);box-shadow:0 20px 44px #07162555;color:#eef0f5}
.notification-sample>img{width:40px;height:40px;flex:none;object-fit:contain}.notification-sample>div{flex:1;min-width:0}
.notification-sample span{display:block;font-size:14px;color:#d1dce7;margin-bottom:7px}.notification-sample small{float:right;font-size:14px;color:#b9c6d6}
.notification-sample strong{display:block;font-size:16px}.notification-sample p{font:14px/1.5 var(--sans);margin:4px 0 0;color:#d6deea}
.highlights .feature-copy>.coming-soon{margin:14px 0 0;font-size:14px;color:var(--accent)}
@media(hover:hover){.feature-card:hover .feature-visual::after{border-color:#dce7f2}}
@media(max-width:760px){.highlights{grid-template-columns:1fr;gap:36px}.feature-copy{padding:22px 0 0}.feature-visual{padding:24px}.forecast-captures{width:76%;padding:12px;gap:10px}.radar-visual{padding:0}.event-preview{gap:12px 8px}.notification-sample{padding:15px;gap:10px}.notification-sample>img{width:30px;height:30px}}
@media(max-width:380px){.feature-visual{padding:20px;aspect-ratio:4/3}.forecast-captures{width:82%;padding:10px;gap:8px}.radar-visual{padding:0}.feature-copy{padding:20px 0 0}.event-preview{gap:8px 6px}.notification-sample{padding:12px}.notification-sample small{display:none}}

/* Lucide vectors for the website; the app mockup retains native SF Symbols. */
.site-icon{display:block;flex:none;width:24px;height:24px;color:currentColor}
.feature-kicker{display:flex;align-items:center;gap:13px;margin-bottom:19px}
.feature-kicker .feature-number{margin:0}
.feature-symbol{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.feature-symbol .site-icon{width:25px;height:25px}
.demo-layers .site-icon{width:16px;height:16px;opacity:1}
.demo-layers .demo-motion .site-icon{width:14px;height:16px}
.primary-button .site-icon{width:18px;height:18px}
.dialog-close{display:grid;place-items:center;height:40px}.dialog-close .site-icon{width:20px;height:20px}
@media(max-width:760px){.feature-kicker{gap:11px;margin-bottom:14px}.feature-symbol{width:40px;height:40px}.feature-symbol .site-icon{width:23px;height:23px}.demo-layers .site-icon{width:14px;height:14px}}
@media(max-width:360px){.demo-layers .site-icon{width:12px;height:12px}.demo-layers .demo-motion .site-icon{width:12px;height:14px}}

/* Decoded artwork takes over without an opacity transition on the iframe. */
.hero-art{isolation:isolate}
.hero-art iframe{position:absolute;inset:0;}
.hero-art::after{z-index:1;pointer-events:none}
#theme-quip{min-height:40px}

/* Keep artwork in a normal stacking layer; avoid masking a live SVG iframe. */
.hero{isolation:auto}
.hero-art{z-index:0;left:calc((100% - min(1800px,100vw)) / 2);transform:none;mask-image:none;isolation:auto}
.hero-art::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(var(--paper) 0%,transparent 12%,transparent 68%,var(--paper) 100%);pointer-events:none}
.hero-art iframe{will-change:auto}
.hero-content,.product-preview{position:relative;z-index:1}
.product-preview::before{display:none}

/* Immediate feedback while the chosen scene prepares, without emptying the hero. */
.outlook-switcher button{position:relative}
.outlook-switcher button[aria-busy=true]::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 20%,transparent);border-top-color:var(--accent);border-right-color:var(--accent);animation:outlook-loading 850ms linear infinite;pointer-events:none}
@keyframes outlook-loading{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.outlook-switcher button[aria-busy=true]::after{animation:none;border-style:dotted;border-color:var(--accent)}}

/* Readable website typography; decorative micro-labels have been removed. */
:root{--header-height:112px}
body{background:var(--paper);position:relative}
.site-header{height:var(--header-height);border:0}
.outlook-switcher>span{display:block;font:500 14px/1.4 var(--sans);letter-spacing:0;color:var(--ink);margin-right:10px}
.outlook-switcher button{width:44px;height:44px}
.hero-art{top:0;width:100%;left:0;height:480px;min-height:0;max-height:none;aspect-ratio:auto}
.hero-art::before{background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 28%,transparent),transparent 25%,transparent 53%,var(--paper) 98%)}
.hero-art::after{background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 62%,transparent),color-mix(in srgb,var(--paper) 15%,transparent) 50%,transparent 80%)}
.hero-content .eyebrow{font-size:14px;letter-spacing:.08em}
.hero-actions{flex-wrap:wrap;gap:16px}
.store-button{gap:14px;padding:14px 20px;border-radius:11px;font-size:19px;line-height:1.25;text-align:left}
.store-button span{display:block}.store-button small{display:block;font-size:14px;font-weight:400;margin-bottom:4px}
.primary-button.store-button .site-icon{width:24px;height:24px}
.platform-note{font-size:14px;line-height:1.7;white-space:normal;color:#bdc9d7}
.platform-note small{display:block;font-size:14px;color:#bdc9d7}
#theme-quip{font-size:16px;line-height:1.6;color:#c2cbd7}
.demo-layers{justify-content:flex-end;gap:7px;flex-wrap:wrap}
.demo-layers button{font-size:14px;min-height:42px;gap:6px;padding:10px}
.demo-layers .demo-motion{width:42px;min-height:42px;padding:10px;margin-left:0}
.demo-credits{font-size:14px;line-height:1.6;color:#afbdce;opacity:1;margin-top:14px}
.demo-credits a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:#afbdce66}
#demo-disclosure{font-size:14px;line-height:1.6;color:#afbdce;margin-top:7px}
.demo-loading{font-size:14px}.demo-alert-card{width:min(330px,calc(100% - 32px));padding:18px}
.demo-alert-card strong{display:block;font-size:16px;line-height:1.4}.demo-alert-card p{font-size:14px}.demo-alert-eyebrow{font:14px/1.4 var(--sans);letter-spacing:0;padding-right:25px}
.app-weather{width:190px;padding:10px;gap:9px}.app-weather b,.app-weather span{font-size:14px;line-height:1.3}
.app-radar-status{top:142px;font-size:14px;gap:6px;padding:7px 9px 15px}.app-radar-status span{font-size:14px}
.demo-legend{width:206px;padding:12px;font-size:14px}.demo-legend strong,.demo-legend>div,.demo-legend small{font-size:14px}
.app-wordmark{left:auto;right:14px;width:130px;bottom:16px}
footer{font-size:14px;color:#aebdce;border-top:1px solid color-mix(in srgb,var(--accent) 15%,transparent)}footer nav{display:flex;flex-wrap:wrap;gap:12px 24px}footer a{color:inherit;text-decoration:none}footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}.download-status{font-size:14px;gap:15px;flex-wrap:wrap}.download-dialog .eyebrow{font-size:14px;letter-spacing:.06em}
@media(max-width:1100px) and (min-width:761px){.hero{grid-template-columns:1fr;gap:32px;padding-top:50px}.hero-content{max-width:650px}.hero-description{max-width:550px}.hero-actions{flex-direction:row;align-items:center}.demo-map{height:510px}.demo-layers button{flex:none}.hero-art{height:500px}}
@media(max-width:1100px) and (min-width:761px){.outlook-switcher{display:grid;grid-template-columns:repeat(6,44px);gap:8px}.outlook-switcher>span{grid-column:1/-1;text-align:right;margin:0}}
@media(max-width:760px){:root{--header-height:180px}.site-header{flex-direction:column;align-items:flex-start;justify-content:center;gap:20px}.brand{font-size:26px}.brand-mark{font-size:30px}.brand-description{display:block;font-size:14px;padding-left:10px;margin-left:2px}.outlook-switcher{display:grid;grid-template-columns:repeat(6,40px);gap:8px;width:100%;max-width:390px}.outlook-switcher>span{display:block;margin:0;max-width:none;grid-column:1/-1}.outlook-switcher button{width:40px;height:40px}.hero{padding-top:24px}.hero-art{height:450px}.hero-content .eyebrow{max-width:280px}.hero-actions{align-items:center;flex-direction:column}.platform-note{text-align:center}.store-button{font-size:19px;padding:14px 20px;gap:14px}.demo-layers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 42px;gap:5px}.demo-layers button{flex-direction:column;gap:5px;padding:8px 2px}.demo-layers .demo-motion{height:100%}.demo-layers .site-icon{width:18px;height:18px}.app-toolbar{top:35px;right:12px;flex-direction:column;padding:3px;gap:3px}.app-header-handle{display:none}.app-toolbar img,.app-toolbar svg{width:27px;height:27px;padding:6px}.app-toolbar img:last-child{padding:7px}.app-wordmark{width:110px;bottom:14px}.demo-legend{bottom:48px}.demo-map{height:450px}}

.primary-button.dialog-dismiss{font-size:14px}

.app-weather strong{font-size:clamp(24px,calc(28px * var(--app-scale)),28px)}

@media(max-width:380px){.brand{font-size:23px;gap:6px}.brand-mark{font-size:27px}.outlook-switcher{gap:7px;grid-template-columns:repeat(6,38px)}.outlook-switcher button{width:38px;height:38px}}

/* Phone previews keep a generous image area and never squeeze their labels. */
@media(max-width:480px){.feature-visual{aspect-ratio:6/5;min-height:230px}.event-preview{gap:10px 6px}}


/* A full-bleed radar image with a quiet palette caption and motion control. */
.palette-toggle{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #73889b55;border-radius:50%;background:#132435;color:#eef3f7;cursor:pointer;transition:background .2s}
.palette-toggle .site-icon{width:18px;height:18px}.palette-toggle:hover{background:#294158}.palette-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.palette-toggle:disabled{opacity:.5;cursor:default}
@media(max-width:760px){footer{align-items:center;text-align:center;gap:18px}footer nav{justify-content:center;gap:12px 20px}}

/* Native identity and a compact, selectable palette strip inside the preview. */
.radar-first{display:flex;align-items:center;gap:10px}.radar-first .site-icon{width:22px;height:22px}
.hero-content .radar-first{max-width:none;letter-spacing:.06em}
.palette-tray{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 8px 6px;border:1px solid #73889b55;border-radius:20px;background:#132435f5;color:#eef3f7;max-width:calc(100% - 20px)}
#palette-name{font:500 14px/1.4 var(--sans)}
.palette-choices{display:flex;gap:2px}.palette-choices button{display:grid;place-items:center;width:40px;height:40px;flex:none;padding:4px;background:none;border:1px solid transparent;border-radius:50%;cursor:pointer;transition:border-color .2s,background .2s}
.palette-choices button span{display:block;width:30px;height:30px;border-radius:50%;background:var(--palette-swatch,#71849c);box-shadow:inset 0 0 0 1px #ffffff3b}
.palette-choices button[aria-pressed=true]{border-color:#eef3f7;background:#eef3f714}.palette-choices button:hover{border-color:#a6bdcf}.palette-choices button:focus-visible{outline:2px solid #eef3f7;outline-offset:2px}.palette-choices button:disabled{opacity:.45;cursor:default}
.event-type.gust{--event:#b0d8c8}.event-type.heat{--event:#f3b474}.event-type.fog{--event:#b6c5df}
@media(max-width:760px){.brand-wordmark{width:180px}.hero-content .radar-first{font-size:14px;letter-spacing:.025em}.alerts-visual{padding:20px}}
@media(max-width:480px){.alerts-visual{padding:16px}.event-preview{gap:8px 6px}.event-symbol{width:34px;height:34px}}
@media(max-width:380px){.brand-wordmark{width:170px}.radar-first{gap:7px}.radar-first .site-icon{width:20px;height:20px}.palette-choices button{width:34px;height:36px;padding:3px}.palette-choices button span{width:28px;height:28px}}

/* Static native forecast backdrop with the readable details in the foreground. */
.forecast-visual{isolation:isolate;background:#182b3e;clip-path:inset(0 round 20px)}
.forecast-background{position:absolute;inset:-3%;width:106%;height:106%;max-width:none;object-fit:cover;object-position:40% 45%;filter:blur(5px);opacity:.85;z-index:-2}
.forecast-visual::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,#1c304333,#11243866)}
.forecast-captures{background:#152435f5;box-shadow:0 16px 40px #05102080,0 0 0 1px #d9e9f21a}

/* Offline Colorado geography with separately composited surface wind trails. */
.wind-visual{padding:0;background:#2b4053;isolation:isolate}
.wind-geography,.wind-visual canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wind-geography{opacity:.85}.wind-cities{position:absolute;inset:0;pointer-events:none}
.wind-cities span{position:absolute;font:500 14px/1.2 var(--sans);white-space:nowrap;color:#e2edf3;text-shadow:0 1px 3px #132435,1px 0 3px #132435,-1px 0 3px #132435;transform:translate(-50%,-100%)}
.wind-cities span::after{content:'';position:absolute;left:50%;bottom:-7px;width:4px;height:4px;background:#d5e7ee;border-radius:50%}
.wind-cities .wind-location{font-weight:600;color:#fff}.wind-cities .wind-location::after{width:7px;height:7px;bottom:-10px;box-shadow:0 0 0 3px #9dd6f540;background:#b8e6fa}
.wind-caption{position:absolute;top:20px;left:20px;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:#172d41ed;color:#eff4f8;font:500 16px/1.35 var(--sans)}
.wind-caption .site-icon{width:25px;height:25px;color:#a9d4e4}.wind-caption small{display:block;font-size:14px;font-weight:400;color:#bad0df}
.wind-attribution{position:absolute;bottom:10px;right:12px;padding:4px 7px;border-radius:6px;background:#183044e8;color:#d3e2ed;font:14px/1.2 var(--sans);text-decoration:none}
.wind-attribution:hover{text-decoration:underline}.wind-attribution:focus-visible{outline:2px solid #e2edf3;outline-offset:3px}
.demo-map-credits{position:absolute;right:12px;top:8px;z-index:4;padding:4px 8px;border-radius:8px;background:#132435ed;color:#d3e2ed;font:14px/1.3 var(--sans);text-decoration:none}
.demo-map-credits:hover{text-decoration:underline}.demo-map-credits:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:480px){.wind-city-secondary{display:none}.wind-caption{top:14px;left:14px;padding:8px 10px}.wind-caption .site-icon{width:20px;height:20px}}