/* Website-reference blue with unframed original product cutouts. */
:root{--paper:#1F6CB8;--ink:#FFFFFF;--muted:#FFFFFF;--text-gold:#FFFFFF;--focus:#FFFFFF}
html{background:#1F6CB8}
body{color:#FFFFFF;background:#1F6CB8}
.landing{background:none}
.brand-lettering{filter:none;background:transparent;box-shadow:none}
.brand-eyebrow{color:#FFFFFF;margin-left:auto;margin-right:auto}
.brand-eyebrow,.download-heading,.signoff{width:fit-content;background:#1F6CB8;box-shadow:0 0 6px 4px #1F6CB8}
@media(max-width:900px){.brand-eyebrow,.download-heading,.signoff{margin-left:auto;margin-right:auto}}
.tracker-pill{box-shadow:0 1px 0 #FFFFFF80,0 5px 14px #07396730}
.intro{background:#1F6CB8;box-shadow:0 0 20px 12px #1F6CB8}
h2,h2 span{color:#FFFFFF}
.route-pattern{background-image:url('assets/hero-route-pattern-blue.svg?v=20261002-routes-1');opacity:1;filter:none;mix-blend-mode:normal}
.benefits li{background:linear-gradient(145deg,#FFFFFFF5,#EDF5FFEB);border-color:#FFFFFFA6;box-shadow:inset 0 1px 0 #FFFFFF,0 10px 22px -12px #062B5B80;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.store-button{background:linear-gradient(150deg,#232A33,#101419 60%,#090D12);border-color:#FFFFFF70;box-shadow:inset 0 1px 0 #FFFFFF26,0 9px 20px -10px #05284C99}
.store-button:hover{background:linear-gradient(150deg,#303C49,#17212B 60%,#101821);border-color:#FFFFFF}
.app-qr{box-shadow:0 0 0 1px #FFFFFF80,0 12px 25px -12px #05284C80}
.art-stage::before{display:none}
.art-stage::after{left:4%;right:-4%;bottom:-3%;height:12%;background:radial-gradient(ellipse,#00162866,transparent 70%)}
.phone{border-color:#DDEFFF;box-shadow:0 26px 42px -12px #061E4899,0 1px 3px #FFFFFF55,inset 0 0 0 2px #56758D}
.coffee-art .cup{filter:none}
.coffee-beans{width:74%;left:28%;z-index:0;filter:drop-shadow(0 6px 7px #05244866)}
@media(max-width:480px){.phone{box-shadow:0 17px 28px -12px #061E4899,inset 0 0 0 1px #56758D}.coffee-art .cup{filter:none}}
@media(forced-colors:active){
 body{background:Canvas;color:CanvasText}
 .landing{background:none}
 .brand-lettering{filter:brightness(0);background:none;box-shadow:none}
 .intro{background:Canvas;box-shadow:none}
 .brand-eyebrow,h2,h2 span{color:CanvasText}
 .brand-eyebrow,.download-heading,.signoff{background:Canvas;box-shadow:none}
 .benefits li{background:Canvas;border-color:CanvasText;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
 .store-button,.store-button:hover{background:Canvas;color:LinkText;border-color:LinkText;box-shadow:none}
 .art-stage::before,.art-stage::after{display:none}
}

/* The extra fleet scene is only used below the mobile download controls. */
.download-fleet{display:none}
/* Mobile: message, products, scan/tap choices, separate neighborhoods, benefits. */
@media(max-width:900px){
 .hero{display:flex;flex-direction:column;align-items:center;gap:0;max-width:550px}
 .hero-copy{display:contents}
 .intro{order:0;width:100%;text-align:center}
 .intro-copy{margin-left:auto;margin-right:auto}
 h2 span{margin-left:auto;margin-right:auto;transform-origin:center}
 .coffee-art{order:1;width:min(100%,530px);margin:22px auto 48px;padding-top:0}
 .download{order:2;padding-top:0;text-align:center}
 .download-heading{display:block}
 .coffee-art .mobile-fleet{display:none}
 .download-fleet{display:block;position:relative;order:3;flex:none;left:auto;top:auto;width:100vw;height:clamp(145px,36vw,220px);margin:20px 0 0;z-index:0}
 .download-fleet .neighborhood{height:100%;width:40vw;max-width:290px}
 .app-benefits{order:4;margin-top:20px}
 .signoff{order:5;margin-top:20px;text-align:center}
}
@media(max-width:480px){
 .coffee-art{margin-top:18px;margin-bottom:28px}
 .download-fleet .neighborhood{width:45vw;max-width:none}
}