/* ZARYA V28.78 — Unified Chapter Navigation: Minimal x Champagne, left gold rule, subtle pop-up.
   Scoped exclusively to six chapter navigation bands. No content or controller changes. */
:root {
  --z78-ink:#0B1728;
  --z78-muted:#617087;
  --z78-gold:#A9742D;
  --z78-gold-text:#95631F;
  --z78-champagne:#F6F0E6;
  --z78-surface:#FCFBF9;
  --z78-divider:#E6E0D7;
  --z78-shadow:0 7px 18px rgba(18,29,43,.075),0 2px 5px rgba(18,29,43,.03);
}
/* Common five/four-story band: its established tab controllers keep working unchanged. */
html body .zj-band {background:var(--z78-surface);}
html body .zj-band .zj-tabs {align-items:stretch; padding-block:5px; gap:0; scroll-padding-inline:16px;}
html body .zj-band .zj-tab {
  position:relative; isolation:isolate; min-height:78px; padding:14px 18px;
  border-radius:0; border-right:1px solid var(--z78-divider);
  background:transparent; box-shadow:none; transform:none;
  color:var(--z78-muted);
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
html body .zj-band .zj-tab:last-child{border-right:0;}
html body .zj-band .zj-tab b {font-family:"Inter ZARYA",Inter,sans-serif;font-weight:600;font-size:16px;line-height:1.15;letter-spacing:0;color:var(--z78-muted);margin-bottom:6px;}
html body .zj-band .zj-tab span {font-family:"Inter ZARYA",Inter,sans-serif;font-weight:500;font-size:12px;line-height:1.28;letter-spacing:.008em;color:var(--z78-muted);}
html body .zj-band .zj-tab:hover:not(.is-active){background:#F8F5EF;}
html body .zj-band .zj-tab.is-active,
html body .zj-band .zj-tab[aria-selected="true"]{
  z-index:1;background:var(--z78-champagne);border-radius:8px;
  box-shadow:var(--z78-shadow);transform:translateY(-3px);
  border-right-color:transparent;
}
html body .zj-band .zj-tab.is-active b,
html body .zj-band .zj-tab[aria-selected="true"] b{color:var(--z78-gold-text);font-weight:600;}
html body .zj-band .zj-tab.is-active span,
html body .zj-band .zj-tab[aria-selected="true"] span{color:var(--z78-ink);font-weight:600;}
/* Delete old bottom rule and draw the new inset left rule. */
html body .zj-band .zj-tab::after {
  content:"";position:absolute;left:0;top:12px;bottom:12px;right:auto;
  width:3px;height:auto;background:var(--z78-gold);border-radius:0 3px 3px 0;
  transform:scaleY(0);transform-origin:center;opacity:0;
  transition:transform .18s ease,opacity .18s ease;
}
html body .zj-band .zj-tab.is-active::after,
html body .zj-band .zj-tab[aria-selected="true"]::after{transform:scaleY(1);opacity:1;}
html body .zj-band .zj-tab::before{content:none;}
html body .zj-band .zj-tab:focus-visible{outline:2px solid var(--z78-gold);outline-offset:-4px;}
/* Approved Owner Stories imagery is retained; only band treatment changes. */
html body .zj-band--owners .zj-tab{display:flex;align-items:center;gap:11px;min-height:84px;}
html body .zj-band--owners .zj-tab .zj-tt{min-width:0;}
html body .zj-band--owners .zj-tab .zj-tt b{margin-bottom:5px;}
/* How It Works uses an independent, nine-stage journey controller. */
html body .integrated-journey .journey{padding:5px 2px!important;background:var(--z78-surface)!important;min-height:88px!important;overflow-x:auto;scroll-padding-inline:12px;}
html body .integrated-journey .journey button{
  position:relative!important;isolation:isolate;min-height:78px!important;
  padding:14px 14px!important;border-right:1px solid var(--z78-divider)!important;
  background:transparent!important;border-radius:0!important;box-shadow:none!important;transform:none!important;
  transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease!important;
}
html body .integrated-journey .journey button:last-child{border-right:0!important;}
html body .integrated-journey .journey button:hover:not(.active){background:#F8F5EF!important;}
html body .integrated-journey .journey button b{
  font-family:"Inter ZARYA",Inter,sans-serif!important;font-size:16px!important;
  font-weight:600!important;letter-spacing:0!important;line-height:1.15!important;
  margin-bottom:6px!important;color:var(--z78-muted)!important;
}
html body .integrated-journey .journey button span{
  font-family:"Inter ZARYA",Inter,sans-serif!important;font-size:12px!important;font-weight:500!important;
  line-height:1.28!important;letter-spacing:0!important;color:var(--z78-muted)!important;
}
html body .integrated-journey .journey button.active{
  z-index:1!important;background:var(--z78-champagne)!important;
  box-shadow:var(--z78-shadow)!important;border-radius:8px!important;
  transform:translateY(-3px)!important;border-right-color:transparent!important;
}
html body .integrated-journey .journey button.active b{color:var(--z78-gold-text)!important;}
html body .integrated-journey .journey button.active span{color:var(--z78-ink)!important;font-weight:600!important;}
html body .integrated-journey .journey button::after{
  content:""!important;position:absolute!important;left:0!important;top:12px!important;bottom:12px!important;
  right:auto!important;width:3px!important;height:auto!important;background:var(--z78-gold)!important;
  border-radius:0 3px 3px 0!important;transform:scaleY(0)!important;opacity:0!important;
  transition:transform .18s ease,opacity .18s ease!important;
}
html body .integrated-journey .journey button.active::after{transform:scaleY(1)!important;opacity:1!important;}
html body .integrated-journey .journey button:focus-visible{outline:2px solid var(--z78-gold)!important;outline-offset:-4px;}
@media (max-width:1199px){
 html body .zj-band .zj-tabs{display:flex;overflow-x:auto;overscroll-behavior-x:contain;}
 html body .zj-band .zj-tab{flex:0 0 168px;min-width:168px;}
 html body .integrated-journey .journey button{flex:0 0 164px!important;min-width:164px!important;}
}
@media (max-width:767px){
 html body .zj-band .zj-tab{min-height:72px;padding:12px 15px;flex-basis:155px;min-width:155px;}
 html body .zj-band .zj-tab b{font-size:14px;}
 html body .zj-band .zj-tab span{font-size:12px;}
 html body .zj-band--owners .zj-tab{min-height:76px;flex-basis:180px;min-width:180px;}
 html body .integrated-journey .journey{min-height:76px!important;}
 html body .integrated-journey .journey button{min-height:70px!important;flex-basis:155px!important;min-width:155px!important;padding:12px 14px!important;}
 html body .integrated-journey .journey button b{font-size:14px!important;}
 html body .integrated-journey .journey button span{font-size:12px!important;}
}
@media (prefers-reduced-motion: reduce){
 html body .zj-band .zj-tab,html body .zj-band .zj-tab::after,
 html body .integrated-journey .journey button,html body .integrated-journey .journey button::after{transition:none!important;}
}
