/* NIO Journey — Stage 4 Home | CLEAN-50
   Consolidated responsive Home styles; canonical component rules live together. */
:root{
  --nio-home-bg:#080808;
  --nio-home-panel:#151515;
  --nio-home-panel-2:#202020;
  --nio-home-line:rgba(255,255,255,.13);
  --nio-home-muted:#a5a5a5;
  --nio-home-white:#f5f4f0;
  --nio-home-orange:#e88a45;
  --nio-home-content:760px;
}
#view:has(.home-welcome){
  box-sizing:border-box;
  width:min(100%,var(--nio-home-content));
  max-width:var(--nio-home-content);
  min-width:0;
  margin:0 auto;
  padding:22px 16px calc(126px + env(safe-area-inset-bottom,0px));
  overflow-x:clip;
}
#view .home-welcome{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:clamp(12px,3vw,22px);
  min-width:0;
  margin:0 0 26px;
  padding:0 2px;
}
#view .home-welcome-copy{flex:1 1 auto;width:auto;min-width:0}
#view .home-kicker{
  display:block;
  margin:0 0 7px;
  color:#a3a3a3;
  font-size:9px;
  font-weight:700;
  letter-spacing:.2em;
}
#view .home-welcome h1{
  display:block;
  max-width:100%;
  margin:0;
  color:var(--nio-home-white);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(25px,6.3vw,30px);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.035em;
  text-wrap:balance;
  overflow-wrap:normal;
}
#view .home-welcome h1 span[aria-hidden="true"]{
  display:inline-block;
  transform-origin:75% 80%;
  animation:nio-home-wave 2.4s ease-in-out infinite;
}
#view .home-welcome-notice{
  position:relative;display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;margin:10px 0 0;padding:0;
  border:1px solid rgba(255,255,255,.15);border-radius:50%;background:linear-gradient(145deg,#202020,#101010);color:#f4f4f4;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
#view .home-welcome-notice>.nio-icon{display:block;width:23px;height:23px}
#view .home-welcome-notice::after{content:"";position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:#d87980;box-shadow:0 0 0 2px #171717}
#view .home-welcome-notice:focus-visible{outline:2px solid #eee;outline-offset:3px}
@keyframes nio-home-wave{
  0%,58%,100%{transform:rotate(0)}
  8%,22%,36%{transform:rotate(16deg)}
  15%,29%,43%{transform:rotate(-9deg)}
  50%{transform:rotate(5deg)}
}
#view .home-welcome-copy>p{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:12px;
  margin:16px 0 0;
  color:#c1c1c1;
  font-size:14px;
  line-height:1.4;
}
#view .home-audience{
  display:block;
  flex:0 0 auto;
  font-size:1.1em;
  line-height:1.35;
}
#view .home-location{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  gap:8px;
  color:#bdbdbd;
  font-size:inherit;
  line-height:1.35;
  white-space:nowrap;
}
#view .home-location-icon{
  display:block;
  flex:0 0 16px;
  width:16px;
  height:16px;
  color:#b8b8b8;
  stroke-width:1.8;
  transform:none;
}
#view .home-location>span{
  display:inline-block;
  min-width:0;
  line-height:1.35;
}
#view .home-for-you,
#view .home-explore,
#view .home-progress,
#view .home-products{
  min-width:0;
  margin:0 0 25px;
}
#view .home-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  margin:0 0 12px;
}
#view .home-section-head>div{min-width:0}
#view .home-section-head h2{
  margin:0;
  color:var(--nio-home-white);
  font-size:clamp(16px,4.3vw,19px);
  font-weight:650;
  line-height:1.22;
  letter-spacing:-.02em;
}
#view .home-see-all{
  flex:0 0 auto;
  margin:0;
  padding:5px 0;
  border:0;
  background:transparent;
  color:#bcbcbc;
  font-size:11px;
  line-height:1.25;
  white-space:nowrap;
}
#view .home-products-subtitle{
  max-width:360px;
  margin:5px 0 0;
  color:var(--nio-home-muted);
  font-size:11px;
  line-height:1.4;
}
#view .home-category-row{
  display:flex;
  align-items:center;
  gap:7px;
  overflow-x:auto;
  padding:1px 0 12px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
#view .home-category-row::-webkit-scrollbar{display:none}
#view .home-category{
  flex:0 0 auto;
  min-height:34px;
  margin:0;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:#171717;
  color:#c5c5c5;
  font-size:11px;
  line-height:1.2;
  white-space:nowrap;
}
#view .home-category.active{
  border-color:#f0efec;
  background:#f0efec;
  color:#111;
  font-weight:650;
}
#view .home-promo-viewport{
  position:relative;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scroll-padding-inline:0;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
}
#view .home-promo-viewport::-webkit-scrollbar{display:none}
#view .home-promo-track{
  display:flex;
  flex-flow:row nowrap;
  align-items:stretch;
  gap:12px;
  width:max-content;
  min-width:100%;
  margin:0;
  padding:0;
}
#view .home-promo-track .home-promo{
  position:relative;
  isolation:isolate;
  display:flex;
  flex:0 0 100%;
  align-items:center;
  justify-content:flex-start;
  box-sizing:border-box;
  width:100%;
  min-width:100%;
  max-width:100%;
  height:var(--promo-card-height,240px);
  min-height:200px;
  margin:0;
  padding:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  background:#151515;
  color:var(--nio-home-white);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
  scroll-snap-align:start;
  scroll-snap-stop:always;
  text-align:left;
  cursor:pointer;
}
#view .home-promo-track .home-promo>img{
  position:absolute;
  z-index:0;
  inset:0;
  display:block;
  width:100%;
  min-width:100%;
  max-width:none;
  height:100%;
  max-height:none;
  margin:0;
  padding:0;
  border-radius:0;
  object-fit:cover;
  object-position:var(--promo-image-x,70%) var(--promo-image-y,50%);
  opacity:1;
  filter:saturate(.84) contrast(1.04) brightness(.88);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 100%);
  transition:transform .28s ease,filter .28s ease;
}
#view .home-promo-track .home-promo::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(9,9,9,.46) 0%,rgba(9,9,9,.16) 54%,rgba(9,9,9,.03) 100%);
}
#view .home-promo-track .home-promo::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:var(--promo-gradient-image,linear-gradient(90deg,rgba(10,10,10,.82) 0%,rgba(10,10,10,.36) 40%,transparent 100%));
}
#view .home-promo-track .home-promo-copy{
  position:absolute;
  z-index:2;
  top:50%;
  left:clamp(16px,3vw,30px);
  right:auto;
  bottom:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:9px;
  width:var(--promo-copy-width,68%);
  max-width:min(78%,520px);
  min-width:0;
  margin:0;
  transform:translateY(-50%);
  text-align:var(--promo-text-align,left);
  text-shadow:0 1px 10px rgba(0,0,0,.18);
}
#view .home-promo-track .home-promo-copy small{
  display:inline-flex;
  align-items:center;
  min-height:14px;
  margin:0;
  padding:2px 0;
  border:0;
  border-left:0;
  border-radius:0;
  background:transparent;
  color:rgba(247,245,239,.9);
  font-size:9px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:.12em;
}
#view .home-promo-track .home-promo-copy strong{
  display:block;
  max-width:100%;
  margin:0;
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(25px,4.6vw,34px);
  font-weight:500;
  line-height:1.04;
  letter-spacing:-.035em;
  text-wrap:balance;
  overflow-wrap:normal;
  word-break:normal;
}
#view .home-promo-track .home-promo-copy p{
  max-width:100%;
  margin:0;
  color:rgba(247,245,239,.88);
  font-size:11.5px;
  line-height:1.4;
}
#view .home-promo-track .home-promo-copy em{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  gap:9px;
  width:max-content;
  max-width:100%;
  min-height:36px;
  margin:3px 0 0;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:999px;
  background:rgba(245,244,240,.96);
  color:#171717;
  font-size:10.5px;
  font-style:normal;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  text-shadow:none;
}
#view .home-promo-track .home-promo:focus-visible{
  outline:2px solid #f3f3f3;
  outline-offset:3px;
}
#view .home-promo-track .home-promo:active{transform:scale(.995)}
#view .home-promo-track .home-promo:hover>img{
  transform:scale(1.025);
  filter:saturate(.92) contrast(1.05) brightness(.92);
}
#view .home-promo-hint{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:18px;
  margin:11px 0 0;
  padding:0;
}
#view .home-promo-hint-copy,
#view .home-promo-counter{display:none}
#view .home-promo-indicators{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:max-content;
  margin:0 auto;
  gap:7px;
}
#view .home-promo-dot{
  appearance:none;
  -webkit-appearance:none;
  display:block;
  flex:0 0 7px;
  width:7px;
  height:7px;
  min-width:7px;
  margin:0;
  padding:0;
  border:0;
  border-radius:999px;
  background:#68686e;
  opacity:.78;
  cursor:pointer;
  transition:width .22s ease,background-color .22s ease,opacity .22s ease;
}
#view .home-promo-dot.active{
  flex-basis:22px;
  width:22px;
  background:#f0f0f0;
  opacity:1;
}
#view .home-promo-dot[hidden]{display:none}
#view .home-explore-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  width:100%;
  min-width:0;
}
#view .home-explore-tile{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:10px;
  align-items:center;
  min-width:0;
  min-height:82px;
  padding:12px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:linear-gradient(145deg,#202020,#141414);
  color:var(--nio-home-white);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  text-align:left;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
#view .home-explore-tile:active{
  transform:scale(.985);
  background:#252525;
}
#view .home-explore-icon{
  grid-row:1/3;
  display:grid;
  place-items:center;
  box-sizing:border-box;
  width:40px;
  height:40px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:13px;
  background:linear-gradient(145deg,#303030,#1c1c1c);
  color:#f2f2f2;
}
#view .home-explore-icon svg{display:block;width:21px;height:21px}
#view .home-explore-tile strong{
  display:block;
  min-width:0;
  font-size:11.5px;
  font-weight:650;
  line-height:1.25;
  overflow-wrap:anywhere;
}
#view .home-explore-tile small{
  display:block;
  margin-top:4px;
  color:#a5a5a5;
  font-size:9.5px;
  line-height:1.3;
}
#view .home-progress-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:0;
  padding:15px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  background:linear-gradient(145deg,#202020,#131313);
  color:var(--nio-home-white);
}
#view .home-progress-mark{
  display:grid;
  place-items:center;
  flex:0 0 42px;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:linear-gradient(145deg,#303030,#1b1b1b);
  color:#f2f2f2;
}
#view .home-progress-mark svg{display:block;width:22px;height:22px}
#view .home-progress-copy{flex:1 1 auto;min-width:0}
#view .home-progress-copy strong{
  display:block;
  font-size:13px;
  font-weight:650;
  line-height:1.3;
}
#view .home-progress-copy p{
  margin:5px 0 0;
  color:#aaa;
  font-size:11px;
  line-height:1.4;
}
#view .home-progress-eyebrow{
  display:block;
  margin:0 0 6px;
  color:#a9a9a9;
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
}
#view .home-progress-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
  width:100%;
  margin:8px 0;
}
#view .home-progress-steps span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:28px;
  padding:5px 3px;
  border:1px solid #29292e;
  border-radius:8px;
  background:#101012;
  color:#929299;
  font-size:9px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
}
#view .home-progress-steps span.active{
  border-color:#dedee2;
  background:#e9e9eb;
  color:#121214;
}
#view .home-progress-track{
  height:4px;
  overflow:hidden;
  border-radius:99px;
  background:#333;
}
#view .home-progress-track span{
  display:block;
  width:33.333%;
  height:100%;
  border-radius:99px;
  background:#e5e5e5;
}
#view .home-progress-card>button{
  display:grid;
  place-items:center;
  align-self:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  min-width:38px;
  margin:0;
  padding:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:#242424;
  color:#f4f4f4;
  line-height:0;
  text-align:center;
}
#view .home-progress-card>button:focus-visible{outline:2px solid #f3f3f3;outline-offset:3px}
#view .home-progress-card>button .nio-icon{
  display:block;
  flex:0 0 22px;
  width:22px;
  height:22px;
  margin:0;
  transform:none;
}
#view .home-product-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  grid-auto-rows:1fr;
  gap:11px;
  min-width:0;
}
#view .home-product-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-width:0;
  overflow:hidden;
  margin:0;
  padding:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:linear-gradient(145deg,#202020,#141414);
  color:var(--nio-home-white);
  text-align:left;
  transition:transform .18s ease,border-color .18s ease;
}
#view .home-product-card:active{transform:scale(.985)}
#view .home-product-art{
  display:block;
  flex:0 0 auto;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  min-width:0;
  overflow:hidden;
  background:#1e1e1e;
}
#view .home-product-art img{
  display:block;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  object-fit:cover;
  object-position:center;
}
#view .home-product-card strong{
  display:block;
  margin:10px 11px 0;
  padding:0;
  font-size:11px;
  font-weight:650;
  line-height:1.3;
}
#view .home-product-card small{
  display:block;
  margin:5px 11px 12px;
  padding:0;
  color:#a5a5a5;
  font-size:9.5px;
  line-height:1.4;
}
.safe-bottom{height:10px}
.topbar .top-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:0!important;min-width:42px}
.topbar .home-menu-action{box-sizing:border-box;width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;padding:0!important;border-radius:15px!important}
.topbar .home-menu-action>svg{display:block!important;width:22px!important;height:22px!important;margin:auto!important}
.top-actions .home-menu-action:focus-visible{outline:2px solid #f3f3f3;outline-offset:3px}

/* Shared bottom dock: the Finder control is raised, but its label stays in its own lane. */
.bottom-nav{
  position:fixed;
  z-index:999;
  left:50%;
  right:auto;
  top:auto;
  bottom:max(8px,env(safe-area-inset-bottom));
  display:flex;
  flex-direction:row;
  align-items:stretch;
  justify-content:space-between;
  box-sizing:border-box;
  width:min(94%,520px);
  max-width:520px;
  height:auto;
  margin:0;
  padding:5px;
  gap:3px;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  background:rgba(8,8,8,.97);
  box-shadow:0 -10px 24px rgba(0,0,0,.34);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
nav.bottom-nav>a[data-route]{
  position:relative;
  display:flex;
  flex:1 1 0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:auto;
  min-width:0;
  height:66px;
  min-height:66px;
  margin:0;
  padding:7px 2px;
  gap:4px;
  border:1px solid transparent;
  border-radius:14px;
  background:transparent;
  color:#aaa;
  font-size:10px;
  line-height:1.1;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  overflow:visible;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
nav.bottom-nav>a[data-route] .nav-symbol{
  position:static;
  display:inline-grid;
  place-items:center;
  flex:0 0 25px;
  width:25px;
  height:25px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  box-shadow:none;
  font-style:normal;
  line-height:0;
}
nav.bottom-nav>a[data-route] .nav-symbol svg{display:block;width:24px;height:24px}
nav.bottom-nav>a[data-route]>span{
  position:static;
  display:block;
  max-width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  color:inherit;
  font-size:10px;
  line-height:1.1;
  text-overflow:ellipsis;
}
nav.bottom-nav>a[data-route].active:not(.nav-finder){
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.085);
  color:#f4f4f4;
  box-shadow:none;
}
nav.bottom-nav>a[data-route].active:not(.nav-finder)::before{
  content:"";
  position:absolute;
  top:4px;
  left:50%;
  width:13px;
  height:2px;
  border-radius:9px;
  background:#c6c6c6;
  transform:translateX(-50%);
}
nav.bottom-nav>a.nav-finder{
  position:relative;
  overflow:visible;
  padding-top:12px;
  background:transparent;
  color:#cfcfcf;
  box-shadow:none;
}
nav.bottom-nav>a.nav-finder .nav-symbol{
  position:absolute;
  z-index:1;
  top:-12px;
  left:50%;
  display:grid;
  place-items:center;
  flex:0 0 42px;
  width:42px;
  height:42px;
  border:1.5px solid #777;
  border-radius:14px;
  background:linear-gradient(145deg,#242424,#111);
  color:#eee;
  box-shadow:0 5px 13px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateX(-50%);
}
nav.bottom-nav>a.nav-finder>span{
  position:absolute;
  right:0;
  bottom:7px;
  left:0;
  display:block;
  color:inherit;
  text-align:center;
  font-size:10px;
  line-height:1.1;
  font-weight:500;
  overflow:visible;
}
nav.bottom-nav>a.nav-finder.active{background:transparent;color:#fff}
nav.bottom-nav>a.nav-finder.active .nav-symbol{
  border-color:#f2f2f2;
  background:linear-gradient(145deg,#fff,#dedede);
  color:#171717;
  box-shadow:0 5px 13px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.95);
}
nav.bottom-nav>a[data-route]:focus-visible,
nav.bottom-nav .sidebar-utility-item:focus-visible,
nav.bottom-nav .sidebar-profile:focus-visible{
  outline:2px solid #f3f3f3;
  outline-offset:2px;
}
nav.bottom-nav .sidebar-utility{display:none}

/* Small phones */
@media(max-width:430px){
  #view .home-welcome h1{
    font-size:clamp(22px,6.7vw,28px);
    letter-spacing:-.04em;
    white-space:nowrap;
  }
  #view .home-product-art{height:auto;aspect-ratio:1/1}
}
@media(max-width:380px){
  #view .home-welcome{gap:9px}
  #view .home-welcome-notice{flex-basis:40px;width:40px;height:40px;min-width:40px;min-height:40px}
  #view .home-welcome-notice>.nio-icon{width:21px;height:21px}
  #view .home-welcome-copy>p{gap:10px;margin-top:14px}
  #view .home-location{gap:7px}
  #view .home-location-icon{flex-basis:16px;width:16px;height:16px}
  #view:has(.home-welcome){padding-right:14px;padding-left:14px}
  #view .home-category{padding-right:10px;padding-left:10px;font-size:11px}
  #view .home-explore-grid{gap:7px}
  #view .home-explore-tile{
    grid-template-columns:34px minmax(0,1fr);
    column-gap:7px;
    min-height:76px;
    padding:10px 8px;
  }
  #view .home-explore-icon{width:34px;height:34px;border-radius:11px}
  #view .home-explore-tile strong{font-size:10px;line-height:1.12}
  #view .home-explore-tile small{font-size:9px}
  #view .home-promo-track .home-promo{height:208px;min-height:208px;padding:15px}
  #view .home-promo-track .home-promo-copy{left:14px;max-width:80%;gap:7px}
  #view .home-promo-track .home-promo-copy strong{font-size:23px}
  #view .home-promo-track .home-promo-copy p{font-size:10.5px;line-height:1.3}
  #view .home-product-art{height:auto;aspect-ratio:1/1}
}
@media(max-width:699px){
  #view .home-promo-track .home-promo{height:220px;min-height:220px;padding:18px}
  #view .home-promo-track .home-promo-copy{left:18px;width:var(--promo-copy-width,68%);max-width:78%;gap:8px}
  #view .home-promo-track .home-promo-copy small{font-size:8px;letter-spacing:.12em}
  #view .home-promo-track .home-promo-copy strong{font-size:clamp(23px,6.2vw,28px);line-height:1.02}
  #view .home-promo-track .home-promo-copy p{font-size:11px;line-height:1.34}
  #view .home-promo-track .home-promo-copy em{min-height:34px;padding:7px 11px;font-size:10px}
  nav.bottom-nav>a.nav-finder .nav-symbol{top:-11px;width:40px;height:40px;flex-basis:40px;border-radius:13px}
}
@media(min-width:700px) and (max-width:1179px){
  #view:has(.home-welcome){
    width:min(calc(100vw - 48px),960px);
    max-width:960px;
    padding:24px 0 calc(126px + env(safe-area-inset-bottom,0px));
  }
  #view .home-welcome{margin-bottom:26px}
  #view .home-welcome h1{font-size:34px}
  #view .home-section-head h2{font-size:21px}
  #view .home-for-you,
  #view .home-explore,
  #view .home-progress,
  #view .home-products{margin-bottom:21px}
  #view .home-promo-track .home-promo{height:248px;min-height:248px;padding:24px}
  #view .home-promo-track .home-promo-copy{left:26px;max-width:76%}
  #view .home-promo-track .home-promo-copy small{font-size:10px;letter-spacing:.14em}
  #view .home-promo-track .home-promo-copy strong{font-size:clamp(30px,3.4vw,42px);line-height:1.03}
  #view .home-promo-track .home-promo-copy p{max-width:94%;font-size:13px;line-height:1.4}
  #view .home-explore-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  #view .home-explore-tile{
    grid-template-columns:1fr;
    grid-template-rows:40px auto auto;
    gap:7px;
    min-height:90px;
    padding:12px 10px;
  }
  #view .home-explore-icon{grid-row:1;width:40px;height:40px}
  #view .home-explore-tile strong{font-size:11px}
  #view .home-explore-tile small{margin-top:0;font-size:9px}
  #view .home-product-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  #view .home-product-art{height:auto;aspect-ratio:1/1}
  #view .home-product-card strong{margin:12px 13px 0;font-size:13px}
  #view .home-product-card small{margin:6px 13px 14px;font-size:11px;line-height:1.45}
  .bottom-nav{
    width:min(calc(100vw - 32px),620px);
    max-width:620px;
    bottom:12px;
    padding:8px;
    gap:6px;
  }
  nav.bottom-nav>a.nav-finder .nav-symbol{top:-13px;width:44px;height:44px;flex-basis:44px;border-radius:14px}
}
@media(min-width:1180px){
  .topbar{
    position:sticky!important;
    top:0!important;
    left:0!important;
    right:0!important;
    z-index:60!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    box-sizing:border-box!important;
    width:100%!important;
    height:68px!important;
    margin:0!important;
    padding:0 28px 0 244px!important;
    border-bottom:1px solid rgba(240,242,246,.12)!important;
    background:rgba(10,10,10,.98)!important;
  }
  .topbar .brand{
    position:absolute!important;
    top:50%!important;
    left:24px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:176px!important;
    height:44px!important;
    margin:0!important;
    transform:translateY(-50%)!important;
  }
  .topbar .brand-lockup{width:78px!important;max-height:42px!important;object-fit:contain}
  .topbar .top-actions{
    position:absolute!important;
    top:50%!important;
    right:28px!important;
    left:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:12px!important;
    margin:0!important;
    transform:translateY(-50%)!important;
  }
  nav.bottom-nav{
    position:fixed!important;
    top:68px!important;
    right:auto!important;
    bottom:0!important;
    left:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    box-sizing:border-box!important;
    width:220px!important;
    max-width:220px!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:26px 12px!important;
    gap:7px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    transform:none!important;
    border:0!important;
    border-right:1px solid rgba(240,242,246,.12)!important;
    border-radius:0!important;
    background:#0b0b0b!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  nav.bottom-nav>a[data-route]{
    position:relative!important;
    display:flex!important;
    flex:0 0 auto!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    height:auto!important;
    margin:0!important;
    padding:11px 13px!important;
    gap:11px!important;
    border:1px solid transparent!important;
    border-radius:12px!important;
    background:transparent!important;
    color:#a9a9a9!important;
    font-size:12px!important;
    line-height:1.25!important;
    text-align:left!important;
    white-space:normal!important;
  }
  nav.bottom-nav>a[data-route].active:not(.nav-finder){
    border-color:rgba(255,255,255,.1)!important;
    background:#f2f2f3!important;
    color:#111!important;
    box-shadow:none!important;
  }
  nav.bottom-nav>a[data-route] .nav-symbol{
    position:static!important;
    display:inline-grid!important;
    place-items:center!important;
    flex:0 0 25px!important;
    width:25px!important;
    height:25px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:inherit!important;
    box-shadow:none!important;
    transform:none!important;
  }
  nav.bottom-nav>a[data-route] .nav-symbol svg{display:block!important;width:24px!important;height:24px!important}
  nav.bottom-nav>a[data-route]>span{
    position:static!important;
    display:inline!important;
    max-width:none!important;
    overflow:visible!important;
    margin:0!important;
    padding:0!important;
    color:inherit!important;
    font-size:12px!important;
    line-height:1.25!important;
    text-align:left!important;
    text-overflow:clip!important;
  }
  nav.bottom-nav>a.nav-finder{
    padding-top:11px!important;
    background:transparent!important;
    color:#a9a9a9!important;
  }
  nav.bottom-nav>a.nav-finder .nav-symbol{
    position:static!important;
    flex-basis:25px!important;
    width:25px!important;
    height:25px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  nav.bottom-nav>a.nav-finder>span{
    position:static!important;
    display:inline!important;
    color:inherit!important;
    text-align:left!important;
  }
  nav.bottom-nav>a.nav-finder::before{display:none!important}
  nav.bottom-nav>a.nav-finder.active{background:#f2f2f3!important;color:#111!important;border-color:rgba(255,255,255,.14)!important}
  nav.bottom-nav>a.nav-finder.active .nav-symbol{
    border:0!important;
    background:transparent!important;
    color:inherit!important;
  }
  nav.bottom-nav .sidebar-utility{
    display:flex!important;
    flex:0 0 auto!important;
    flex-direction:column!important;
    gap:5px!important;
    width:100%!important;
    margin-top:auto!important;
    padding-top:20px!important;
  }
  nav.bottom-nav .sidebar-utility-divider{
    height:1px!important;
    width:100%!important;
    margin:0 0 10px!important;
    background:rgba(240,242,246,.13)!important;
  }
  nav.bottom-nav .sidebar-utility-item{
    display:flex!important;
    align-items:center!important;
    gap:11px!important;
    width:100%!important;
    min-height:43px!important;
    padding:10px 13px!important;
    border:1px solid transparent!important;
    border-radius:11px!important;
    background:transparent!important;
    color:#aaa!important;
    font-size:11px!important;
    text-align:left!important;
  }
  nav.bottom-nav .sidebar-utility-icon{
    display:grid!important;
    place-items:center!important;
    width:24px!important;
    height:24px!important;
    flex:0 0 24px!important;
  }
  nav.bottom-nav .sidebar-profile{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
    margin-top:12px!important;
    padding:12px 10px!important;
    border:1px solid rgba(240,242,246,.12)!important;
    border-radius:13px!important;
    background:linear-gradient(145deg,#1e1e1e,#111)!important;
    color:#eee!important;
    text-align:left!important;
  }
  nav.bottom-nav .sidebar-profile-avatar{
    display:grid!important;
    place-items:center!important;
    width:31px!important;
    height:31px!important;
    flex:0 0 31px!important;
    border-radius:10px!important;
    background:#efeff1!important;
    color:#111!important;
    font-size:12px!important;
    font-weight:750!important;
  }
  nav.bottom-nav .sidebar-profile-copy{
    display:flex!important;
    flex:1!important;
    min-width:0!important;
    flex-direction:column!important;
    gap:3px!important;
  }
  nav.bottom-nav .sidebar-profile-copy b{font-size:11px!important;font-weight:650!important}
  nav.bottom-nav .sidebar-profile-copy small{font-size:10px!important;color:#929298!important}
  nav.bottom-nav .sidebar-profile-arrow{font-size:14px!important;color:#9b9ba1!important}
  main#view:has(.home-welcome){
    box-sizing:border-box!important;
    width:min(calc(100vw - 300px),1360px)!important;
    max-width:none!important;
    margin:0 32px 0 260px!important;
    padding:30px 0 48px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.72fr) minmax(320px,.88fr)!important;
    column-gap:28px!important;
    row-gap:26px!important;
    align-content:start!important;
    overflow-x:clip!important;
  }
  #view .home-welcome{grid-column:1/-1!important;grid-row:1!important;margin-bottom:0!important}
  #view .home-welcome h1{font-size:clamp(34px,2.5vw,42px)!important;line-height:1.08!important}
  #view .home-welcome-notice{flex-basis:46px;width:46px;height:46px;min-width:46px;min-height:46px}
  #view .home-welcome-copy>p{gap:8px!important;margin-top:13px!important;font-size:17px!important;line-height:1.35!important}
  #view .home-welcome-copy .home-location{font-size:14px!important;line-height:1.4!important}
  #view .home-for-you{grid-column:1!important;grid-row:2!important;width:100%!important;margin:0!important}
  #view .home-progress{grid-column:2!important;grid-row:2!important;min-width:0!important;width:100%!important;margin:0!important;align-self:stretch!important}
  #view .home-progress-card{
    min-height:0!important;
    height:100%!important;
    box-sizing:border-box!important;
    padding:22px 18px!important;
    align-items:flex-start!important;
    gap:14px!important;
  }
  #view .home-progress-mark{width:54px!important;height:54px!important;flex-basis:54px!important;border-width:2px!important}
  #view .home-progress-mark svg{width:27px!important;height:27px!important}
  #view .home-progress-copy{padding-right:0!important}
  #view .home-progress-copy strong{font-size:16px!important;line-height:1.35!important}
  #view .home-progress-copy p{font-size:12px!important;line-height:1.5!important}
  #view .home-progress-card>button{
    position:absolute!important;
    right:16px!important;
    bottom:16px!important;
    top:auto!important;
    display:grid!important;
    place-items:center!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    flex:0 0 38px!important;
    margin:0!important;
    transform:none!important;
  }
  #view .home-explore{grid-column:1/-1!important;grid-row:3!important;min-width:0!important;margin:0!important}
  #view .home-explore-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}
  #view .home-explore-tile{
    grid-template-columns:42px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:11px!important;
    min-height:84px!important;
    padding:15px!important;
  }
  #view .home-explore-icon{grid-row:1/3!important;width:42px!important;height:42px!important}
  #view .home-explore-tile strong{font-size:12px!important;line-height:1.25!important}
  #view .home-explore-tile small{font-size:10px!important}
  #view .home-products{grid-column:1/-1!important;grid-row:4!important;width:100%!important;margin:0 0 30px!important}
  #view .home-product-row{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}
  #view .home-product-art{height:auto!important;aspect-ratio:1/1!important}
  #view .home-product-card strong{margin:12px 13px 0!important;font-size:13px!important;line-height:1.3!important}
  #view .home-product-card small{margin:6px 13px 14px!important;font-size:11px!important;line-height:1.45!important}
  #view .home-promo-track .home-promo{height:260px!important;min-height:260px!important;padding:24px!important}
  #view .home-promo-track .home-promo-copy{left:24px!important;max-width:76%!important;gap:10px!important}
  #view .home-promo-track .home-promo-copy small{font-size:10px!important;line-height:1.35!important;letter-spacing:.085em!important}
  #view .home-promo-track .home-promo-copy strong{font-size:clamp(27px,2vw,34px)!important;line-height:1.06!important;letter-spacing:-.03em!important}
  #view .home-promo-track .home-promo-copy p{max-width:90%!important;font-size:12px!important;line-height:1.4!important}
  #view .home-promo-track .home-promo-copy em{font-size:11px!important;padding:8px 11px!important}
  #view .home-promo-track .home-promo>img{height:100%!important;object-fit:cover!important;object-position:var(--promo-image-x,70%) var(--promo-image-y,50%)!important}
  #view .home-for-you,#view .home-explore,#view .home-progress,#view .home-products{margin-bottom:30px!important}
}
/* Compact journey summary for mobile, tablet, and compact desktop. */
@media(max-width:1399px){
  #view .home-progress-eyebrow,
  #view .home-progress-steps,
  #view .home-progress-track{display:none!important}
  #view .home-progress-card{
    box-sizing:border-box;
    width:100%;
    min-height:0!important;
    height:auto!important;
    padding:13px;
  }
}
@media(min-width:1180px) and (max-width:1399px){
  #view .home-progress-card{padding:14px!important}
  #view .home-progress-card>button{position:static!important;transform:none!important}
}
@media(min-width:1400px){
  #view .home-progress-card{min-height:310px!important;padding:22px 18px!important}
  #view .home-progress-copy{padding-right:48px!important}
  #view .home-progress-card>button{top:50%!important;right:18px!important;bottom:auto!important;transform:translateY(-50%)!important}
}
@media(prefers-reduced-motion:reduce){
  #view .home-welcome h1 span[aria-hidden="true"]{animation:none!important}
  #view .home-promo-viewport{scroll-behavior:auto!important}
  #view .home-promo-track .home-promo>img,
  #view .home-promo-dot,
  #view .home-explore-tile,
  #view .home-product-card,
  nav.bottom-nav>a[data-route],
  nav.bottom-nav>a[data-route] *{transition:none!important}
}


/* CLEAN-50: align Explore icon scale, welcome notification, and raised Finder tile. */
#view .home-explore-tile{grid-template-columns:50px minmax(0,1fr);column-gap:12px}
#view .home-explore-icon{width:50px;height:50px;border-radius:15px}
#view .home-explore-icon svg{width:28px;height:28px}
#view .home-welcome-notice{margin-top:2px}
@media(max-width:380px){
  #view .home-explore-tile{grid-template-columns:42px minmax(0,1fr);column-gap:8px}
  #view .home-explore-icon{width:42px;height:42px;border-radius:13px}
  #view .home-explore-icon svg{width:24px;height:24px}
  #view .home-welcome-notice{margin-top:1px}
  nav.bottom-nav>a.nav-finder .nav-symbol{top:-7px}
}
@media(min-width:381px) and (max-width:699px){
  nav.bottom-nav>a.nav-finder .nav-symbol{top:-7px}
}
@media(min-width:700px) and (max-width:1179px){
  #view .home-explore-tile{grid-template-rows:50px auto auto}
  #view .home-explore-icon{grid-row:1;width:50px;height:50px}
  #view .home-explore-icon svg{width:28px;height:28px}
  nav.bottom-nav>a.nav-finder .nav-symbol{top:-8px}
}


/* CLEAN-52: mirror the live app's active-tab treatment; monochrome white replaces orange. */
@media(max-width:1179px){
  nav.bottom-nav>a[data-route].active:not(.nav-finder){
    background:#f2f2f3!important;
    border-color:#f2f2f3!important;
    color:#111!important;
    box-shadow:0 5px 14px rgba(0,0,0,.2)!important;
  }
  nav.bottom-nav>a[data-route].active:not(.nav-finder)::before{display:none!important}
  nav.bottom-nav>a[data-route].active:not(.nav-finder) .nav-symbol{
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:inherit!important;
    box-shadow:none!important;
  }
  nav.bottom-nav>a.nav-finder{padding-top:12px!important;background:transparent!important;color:#bdbdbd!important}
  nav.bottom-nav>a.nav-finder .nav-symbol{
    position:absolute!important;top:-9px!important;left:50%!important;
    flex:0 0 44px!important;width:44px!important;height:44px!important;
    border:1px solid rgba(255,255,255,.35)!important;border-radius:14px!important;
    background:linear-gradient(145deg,#242424,#111)!important;color:#eee!important;
    box-shadow:0 4px 10px rgba(0,0,0,.3)!important;transform:translateX(-50%)!important;
  }
  nav.bottom-nav>a.nav-finder>span{
    position:absolute!important;right:0!important;bottom:7px!important;left:0!important;
    display:block!important;color:inherit!important;text-align:center!important;font-size:10px!important;
  }
  nav.bottom-nav>a.nav-finder.active{background:transparent!important;color:#fff!important}
  nav.bottom-nav>a.nav-finder.active .nav-symbol{
    border-color:#fff!important;background:linear-gradient(145deg,#fff,#dedede)!important;
    color:#111!important;box-shadow:0 4px 12px rgba(0,0,0,.32)!important;
  }
}
@media(min-width:1180px){
  nav.bottom-nav>a[data-route].active:not(.nav-finder){
    background:#f2f2f3!important;border-color:#f2f2f3!important;color:#111!important;
    box-shadow:0 5px 14px rgba(0,0,0,.2)!important;
  }
  nav.bottom-nav>a[data-route].active:not(.nav-finder)::before{display:none!important}
  nav.bottom-nav>a[data-route].active:not(.nav-finder) .nav-symbol{
    border:0!important;border-radius:0!important;background:transparent!important;color:inherit!important;box-shadow:none!important;
  }
  nav.bottom-nav>a.nav-finder{background:transparent!important;color:#bdbdbd!important}
  nav.bottom-nav>a.nav-finder .nav-symbol{
    position:static!important;flex:0 0 25px!important;width:25px!important;height:25px!important;
    border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:inherit!important;transform:none!important;
  }
  nav.bottom-nav>a.nav-finder.active{background:#f2f2f3!important;color:#111!important;border-color:#f2f2f3!important}
  nav.bottom-nav>a.nav-finder.active .nav-symbol{
    border:0!important;border-radius:0!important;background:transparent!important;color:inherit!important;box-shadow:none!important;
  }
}

/* CLEAN-53: remove the leftover outline around the raised Finder tab; keep the white Finder icon tile. */
@media(max-width:1179px){
  nav.bottom-nav>a.nav-finder,
  nav.bottom-nav>a.nav-finder.active{
    border:1px solid transparent!important;
    outline:none!important;
    box-shadow:none!important;
  }
}