/* header-fx.css: sticky header (nav + stats bar), slim-on-scroll, stats bar layout and motion.
   Motion lives in the block marked MOTION at the bottom. Replace that block (and header-fx.js) to restyle the motion. */
html{scroll-padding-top:120px}
.sticky-hd{position:sticky;top:0;z-index:60;background:var(--dk)}
.sticky-hd .hdr{position:static}
.sticky-hd .hdr-in{transition:height .3s ease}
.sticky-hd.is-slim .hdr-in{height:48px}
.sticky-hd.is-slim .brand{font-size:1.05rem}
.sticky-hd .brand{transition:font-size .3s ease}
.sticky-hd.is-slim{box-shadow:0 2px 14px rgba(8,10,24,.45)}

.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* stats bar */
.sbar{position:relative;overflow:hidden;background:var(--ink);color:#F6F7FB;border-bottom:1px solid #2B3050}
.sbar-in{max-width:1200px;margin:0 auto;padding:0 var(--gut);min-height:40px;display:flex;align-items:center;gap:24px;position:relative;transition:min-height .3s ease}
.is-slim .sbar-in{min-height:28px}
.sb-live{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#C9CDF0;flex:none}
.sb-live i{width:8px;height:8px;border-radius:50%;background:#59C98A;flex:none}
.sb-row{display:flex;align-items:center;gap:0;margin:0;padding:0;list-style:none;min-width:0;font:400 13px/1 var(--f-mono);transition:font-size .3s ease}
.is-slim .sb-row{font-size:12px}
.sb-i{display:flex;align-items:baseline;gap:6px;flex:none;color:#C9CDF0;padding:0 18px;border-left:1px solid #2B3050;position:relative}
.sb-i:first-child{border-left:0;padding-left:0}
.sb-i:last-child{padding-right:0}
.sb-n{font-weight:600;color:#fff;font-variant-numeric:tabular-nums;display:inline-block}

@media (max-width:640px){
  .sbar-in{padding:12px 12px 2px;gap:0;min-height:54px;align-items:flex-end}
  .sb-live{position:absolute;left:12px;top:3px;gap:5px;font-size:9px}
  .sb-live i{width:6px;height:6px}
  .sb-row{display:grid;grid-template-columns:repeat(4,1fr);width:100%;font-size:14px}
  .sb-i{flex-direction:column;align-items:center;gap:3px;padding:4px 2px;text-align:center}
  .sb-i:first-child{padding-left:2px}.sb-i:last-child{padding-right:2px}
  .sb-l{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#9EA5D8}
  .is-slim .sbar-in{min-height:38px;padding-top:2px}
  .is-slim .sb-live{display:none}
  .is-slim .sb-row{font-size:12px}
  .is-slim .sb-l{font-size:9px}
}
@media (max-width:360px){.sb-row{font-size:13px}.sb-l{font-size:9px;letter-spacing:.03em}}

/* ===== R7 dark header (shared, all pages) ===== */
:root{--dk:#12152A;--dk2:#1A1D2E;--cy:#7FD4FF;--amber:#F2B24A;--ease:cubic-bezier(.2,.7,.2,1)}
.sticky-hd .hdr{background:var(--dk);color:#EEF0FA;border-bottom:1px solid #262b52}
.sticky-hd .brand{color:#EEF0FA}
.sticky-hd .brand::before{background:var(--cy);box-shadow:inset -4px -4px 0 var(--amber);border-radius:0}
.sticky-hd .nav a:not(.btn){color:#C9CEF5}
.sticky-hd .nav a:not(.btn):hover,.sticky-hd .nav a[aria-current]{color:#fff}
.sticky-hd .nav a[aria-current]::after{background:var(--cy)}
.sticky-hd .nav-cta.btn-ghost{background:var(--steel);border-color:var(--steel);color:#fff;border-radius:2px;font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;position:relative;overflow:hidden}
.sticky-hd .nav-cta.btn-ghost:hover{background:#4a5be0;transform:none}
.sticky-hd .menu-btn{color:#EEF0FA;border-color:#6d77b8}
.sticky-hd .mb-bars i{background:#EEF0FA}
.sbar{background:#0D1022}
.sbar-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:#1d2246}
.sbar-prog b{display:block;height:100%;background:var(--cy);transform-origin:0 50%;transform:scaleX(0);-webkit-mask:repeating-linear-gradient(90deg,#000 0 10px,transparent 10px 13px);mask:repeating-linear-gradient(90deg,#000 0 10px,transparent 10px 13px)}
@media (max-width:860px){
  .js .sticky-hd .nav{background:var(--dk);border-bottom:1px solid #262b52}
  .js .sticky-hd .nav a:not(.btn){border-bottom:1px solid #262b52}
}
/* ===== MOTION (compile family: stepped, chunky) ===== */
@media (prefers-reduced-motion:no-preference){
  .sb-live i{animation:fxBlink 1.6s steps(2) infinite}
  .sticky-hd .nav-cta.btn-ghost::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 12px,transparent 12px 24px);clip-path:inset(0 100% 0 0);pointer-events:none}
  .sticky-hd .nav-cta.btn-ghost:hover::after{animation:fxFill .6s steps(8) forwards}
  .brand::before{animation:fxChunk .5s steps(3) both}
  .fx-tick{animation:fxTick .4s steps(4)}
  .sticky-hd .hdr-in{transition:height .45s var(--ease)}
  .sbar-in{transition:min-height .45s var(--ease)}
}
@keyframes fxBlink{50%{opacity:.25}}
@keyframes fxFill{to{clip-path:inset(0)}}
@keyframes fxChunk{from{opacity:0}to{opacity:1}}
@keyframes fxTick{0%{color:var(--cy)}100%{color:#fff}}
@media (prefers-reduced-motion:reduce){
  .sb-live i,.fx-tick,.brand::before{animation:none}
  .sticky-hd .hdr-in,.sbar-in,.sb-row,.sticky-hd .brand{transition:none}
}

/* R8: estimate and minimum markers on the stats bar numbers */
.sb-n.sb-est::before{content:"~"}
.sb-n.sb-min::after{content:"+"}