/* ===== LOOK 5r (mock): original pre-look5m hero (5f30dce .stage, untouched CSS) on desktop + live main chart/chips/CTA =====
   Only overrides; the hero-name/rule/lede CSS is main's own inline <style> (identical to 5f30dce). */

/* Desktop: bring back the original .stage hero (main hides it at >=861) */
@media (min-width:861px){
  .stage{display:grid}
}

/* Header: brand docks in the CENTER track; nav + mode stay right. Equal 1fr side tracks => page-centered. */
@media (min-width:861px){
  header{container-type:inline-size;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  header>div:not(.right){grid-column:1;grid-row:1}
  header>.right{grid-column:3;grid-row:1}
  header .brand{
    grid-column:2;grid-row:1;justify-self:center;text-align:center;white-space:nowrap;
    transform-origin:50% 50%;
    transform:translateY(10px) scale(.86);
    transition:opacity .26s ease,transform .32s cubic-bezier(.2,.75,.25,1)
  }
  header .brand.on{transform:none}
}
/* Narrow desktop: keep >= 16px brand-to-nav gap. Brand size fitted to the header's own content width (cqw). */
@media (min-width:861px) and (max-width:1199px){
  header nav{gap:14px;font-size:12px}
  header .right{gap:16px}
  header .brand{letter-spacing:.1em;font-size:clamp(10.5px,calc((100cqw - 672px) / 15.65),13px)}
}
@media (min-width:861px) and (max-width:1023px){
  header{padding-left:32px;padding-right:32px}
  header nav{gap:12px}
  header .right{gap:12px}
  header .brand{letter-spacing:.08em;font-size:clamp(10px,calc((100cqw - 644px) / 15.2),12.5px)}
}

/* Reduced motion: instant swap, no rise/scale */
@media (prefers-reduced-motion:reduce){
  header .brand,header .brand.on,body.home header .brand,body.home header .brand.on{transition:none!important}
}
@media (min-width:861px) and (prefers-reduced-motion:reduce){
  header .brand,header .brand.on{transform:none!important}
}

/* Phones: main's centered dock brand (phone.css) kept as-is, only its size is fitted so it clears the mode button by >= 16px
   (main's 15px brand sits 11.5px from the button at 375 and touches it at 320). Brand width ~= 16.5 x font-size;
   budget: 100vw - 2 x (16px pad + 36px button + 16px gap) - 8px safety. */
@media (max-width:860px){
  body.home header .brand{font-size:min(15px,calc((100vw - 144px) / 16.6));white-space:nowrap}
}