/* 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(56px,4.5vw,68px)/1.04 var(--serif);letter-spacing:-.055em;margin:22px 0 24px}
h1 em{font-weight:400;white-space:nowrap;color:#f2eae3}
#hero-title em{display:block;white-space:normal;color:var(--accent)}
.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(43px,8.8vw,61px);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:37px}}

/* Native map preview; website controls stay outside the app frame. */
.hero{position:relative;isolation:isolate;padding-top:120px;gap:42px;grid-template-columns:1fr 1.25fr}
.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:37px}}

/* 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:32px 0;border-top:1px solid color-mix(in srgb,var(--accent) 16%,transparent)}
.features-intro h2{font:400 clamp(28px,3.2vw,42px)/1.2 var(--serif);letter-spacing:-.03em;max-width:1040px;margin:0;color:var(--ink);text-wrap:balance}
.features-intro h2 .site-icon{display:inline-block;width:.85em;height:.85em;margin-right:.25em;vertical-align:-.06em;color:var(--accent)}
.features-intro .theme-highlight{color:var(--accent)}
.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:24px;height:24px;flex-shrink:0;color:var(--accent)}
.highlights .feature-number{font:600 20px/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,.outlook-toggle[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,.outlook-toggle[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-direction:column;align-items:stretch;width:fit-content;gap:12px}
.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:16px;line-height:1.5;white-space:normal;color:#c9d4df;text-align:center}
.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}.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:center;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);justify-content:center;gap:8px;width:100%;max-width:390px}.outlook-switcher>span{display:block;margin:0;max-width:none;grid-column:1/-1;text-align:center}.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;width:auto}.platform-note{text-align:center}.store-button{min-width:220px;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-join{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}}

/* Phones: one circle shows the current outlook and opens the picker; the scenes rotate on their own until a visitor picks one.
   The wordmark and tagline are centered over dimmer art, and the map controls sit under the map. */
.outlook-toggle{display:none}
@media(max-width:760px){:root{--header-height:auto}.site-header{padding:64px 0 0}.hero-art{opacity:.76}.outlook-toggle{position:absolute;top:16px;right:0;display:block;width:40px;height:40px;padding:2px;border:1px solid var(--accent);border-radius:50%;background:var(--surface);box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--accent)}.outlook-toggle img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:66% center}[data-scenario=mountains] .outlook-toggle img{object-position:50% center}.outlook-toggle:focus-visible{outline:2px solid #fff;outline-offset:5px}.outlook-switcher{display:none}.outlook-switcher[data-open=true]{position:absolute;top:66px;right:0;z-index:5;display:grid;width:auto;padding:12px 14px 14px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:20px;background:var(--surface);box-shadow:0 18px 44px #000a}.brand{flex-direction:column;gap:8px}.brand-wordmark{width:212px}.brand-description{border-left:0;padding-left:0;margin-left:0;font-size:16px;text-align:center;text-shadow:0 1px 3px color-mix(in srgb,var(--paper) 80%,transparent),0 0 16px color-mix(in srgb,var(--paper) 70%,transparent)}.brand-description br{display:none}.product-preview{display:flex;flex-direction:column}.demo-layers{order:1;padding:14px 0 0}#demo-disclosure{order:2}}
@media(max-width:760px) and (prefers-reduced-motion:no-preference){.outlook-switcher[data-open=true]{animation:outlook-open 160ms ease-out}}
@keyframes outlook-open{from{opacity:0;transform:translateY(-6px)}}

/* The header on a wide screen is the site's capsule (site-menu.css), with the outlook between the menu and Get the App.
   The outlook is a single circle whose ring fills while the scenes rotate; hovering, clicking or pressing Enter on it opens a card
   of all six with their paintings, names and quips. Phones keep their own header (above). */
.outlook-ring,.hero-eyebrow,.outlook-switcher .outlook-card,.outlook-switcher .outlook-name,.outlook-quip{display:none}
/* The outlook sits in the site bar, between the menu and Get the App, so the keyboard meets them in the order they appear.
   Phones hide the bar's menu and button but keep the outlook circle, at the header's top right. */
@media(max-width:760px){.site-header .site-bar{display:contents}.site-header .site-menu,.site-header .site-bar-app{display:none}}
@media(min-width:761px){
  :root{--header-height:56px}
  .outlook-toggle{position:relative;display:block;flex:none;width:40px;height:40px;padding:4px;border:0;border-radius:50%;background:none;cursor:pointer;transition:background .15s}
  .outlook-toggle img{display:block;width:32px;height:32px;max-width:none;border-radius:50%;object-fit:cover;object-position:66% center}
  [data-scenario=mountains] .outlook-toggle img{object-position:50% center}
  .outlook-toggle:hover,.outlook-toggle[aria-expanded=true]{background:#ffffff14}
  .outlook-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .outlook-ring{position:absolute;inset:0;display:block;width:40px;height:40px;transform:rotate(-90deg);fill:none;stroke-width:2;pointer-events:none}
  .outlook-ring circle:first-child{stroke:#ffffff2e}
  .outlook-ring circle+circle{stroke:var(--accent);stroke-dasharray:119.4;stroke-dashoffset:0}
  /* Two names for one animation, so a new rotation restarts it. */
  .outlook-toggle[data-cycle=a] .outlook-ring circle+circle{animation:outlook-cycle-a 9s linear forwards}
  .outlook-toggle[data-cycle=b] .outlook-ring circle+circle{animation:outlook-cycle-b 9s linear forwards}
  .outlook-switcher{position:absolute;top:calc(100% + 10px);right:0;z-index:6;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:min(540px,calc(100vw - 32px));
    padding:16px;border:1px solid #ffffff22;border-radius:18px;background:var(--paper);box-shadow:0 24px 60px #0009;white-space:normal;
    opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility 0s .18s}
  .outlook-switcher[data-open=true]{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s}
  .outlook-switcher>span{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:2px 4px 2px;font:600 14px/1.3 var(--sans);color:#eef0f5}
  .outlook-quip{display:block;font:italic 400 13px/1.3 var(--serif);color:#c9d3dd;text-align:right}
  .outlook-switcher button{display:block;width:auto;height:auto;padding:5px;border:1px solid transparent;border-radius:12px;background:none;color:#eef0f5;text-align:left;box-shadow:none}
  .outlook-switcher button img{display:none}
  .outlook-switcher button .outlook-card{display:block;width:100%;max-width:none;height:auto;aspect-ratio:2/1;border-radius:8px;object-fit:cover}
  .outlook-switcher .outlook-name{display:block;padding:7px 3px 2px;font:600 13px/1.2 var(--sans)}
  .outlook-switcher button:hover{border-color:transparent;background:#ffffff0d}
  .outlook-switcher button[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:none}
  .outlook-switcher button[aria-pressed=true] .outlook-name{color:var(--accent)}
  .outlook-switcher button[aria-busy=true]::after{inset:12px 12px auto auto;width:16px;height:16px}
  .hero-eyebrow{display:block;margin:0 0 18px;font:500 15px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
  .hero-eyebrow+h1{margin-top:0}
}
@keyframes outlook-cycle-a{from{stroke-dashoffset:119.4}to{stroke-dashoffset:0}}
@keyframes outlook-cycle-b{from{stroke-dashoffset:119.4}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.outlook-switcher,.outlook-switcher[data-open=true]{transition:none}}

/* Get the App in the hero: the app's icon, the words and a download arrow, in the outlook's highlight color. */
.store-button{gap:12px;padding:8px 20px 8px 8px;border-radius:14px;font-size:19px;font-weight:700}
.store-button img{width:44px;height:44px;max-width:none;flex:none}
.primary-button.store-button .site-icon{width:26px;height:26px}