/* Feature Bands — any section marked data-fb becomes a full-width color (or photo) band.
   Colors come from the section's inline --fb-* values, set in Wilder Creative → Feature Bands. */

html,body{overflow-x:clip}

[data-fb]{
  position:relative;isolation:isolate;
  padding-top:84px !important;padding-bottom:84px !important;
  border-top:0 !important;border-bottom:0 !important;
}
[data-fb]:before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;z-index:-2;
  background:var(--fb-bg);
}
[data-fb-img]:before{
  background:var(--fb-img) center/cover no-repeat,var(--fb-bg);
}
[data-fb-img]:after{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;z-index:-1;
  background:var(--fb-bg);opacity:var(--fb-dim,.78);
}
/* A band that follows a band gets a hairline so the two do not melt together. */
[data-fb] + [data-fb]:before{box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
/* The section after a band does not need its own top rule. */
[data-fb] + .cap3,[data-fb] + section{border-top-color:transparent}

/* ---------- dark bands (light text) ---------- */
[data-fb="dk"]{
  --ink:#FFFFFF;--navy:#FFFFFF;
  --rule:rgba(255,255,255,.18);
  --paper:color-mix(in srgb,var(--fb-bg) 86%,#fff);
  --paper2:color-mix(in srgb,var(--fb-bg) 90%,#fff);
  --chart-ink:var(--fb-lb);--chart-dk:var(--fb-lb);
  --rust:var(--fb-a2);--cyan:var(--fb-a1);--amber:var(--fb-a2);
  --link:#BFD8FF;--body:rgba(236,242,250,.84);
  color:rgba(236,242,250,.84);
}
[data-fb="dk"] p,[data-fb="dk"] li{color:inherit}
[data-fb="dk"] h1 em,[data-fb="dk"] h2 em,[data-fb="dk"] h3 em,
[data-fb="dk"] .rtx h2 em{color:var(--fb-em)}
[data-fb="dk"] .lbl,[data-fb="dk"] .lbl.q{color:var(--fb-lb)}
[data-fb="dk"] .lbl.q:before{background:var(--fb-lb) !important}
[data-fb="dk"] .mn,[data-fb="dk"] .skey{color:rgba(236,242,250,.62)}
[data-fb="dk"] .lnk{color:#fff;border-color:rgba(255,255,255,.4)}
[data-fb="dk"] .lnk:hover{color:var(--fb-a2);border-color:var(--fb-a2)}
[data-fb="dk"] .cards li.ask{background:rgba(0,0,0,.22)}
[data-fb="dk"] .cards p,[data-fb="dk"] .c3f,[data-fb="dk"] .qs p{color:#fff}
[data-fb="dk"] .cc ul li{border-bottom-color:rgba(255,255,255,.14)}
[data-fb="dk"] .ct.br,[data-fb="dk"] .ct.dm,[data-fb="dk"] .ct.bl{color:#fff}
[data-fb="dk"] .rimg img{border-color:rgba(255,255,255,.2)}
[data-fb="dk"] .rcap{color:rgba(236,242,250,.7)}
[data-fb="dk"] .moves:before{opacity:.45}

/* White cards keep their own light look inside a dark band. */
[data-fb="dk"] .wk,[data-fb="dk"] .tier{
  --ink:#0F2430;--navy:#023047;--rule:#D4D1CA;--link:#1F6FD0;
  --chart-ink:#5E6D00;--chart-dk:#A8BF00;--rust:#B75E00;--cyan:#219EBC;--amber:#FFB703;
  --body:#3C4A54;color:#3C4A54;
}
[data-fb="dk"] .wk .lbl,[data-fb="dk"] .tier .lbl,[data-fb="dk"] .tier .lbl.q{color:#5E6D00}
[data-fb="dk"] .tier .lbl.q:before{background:#A8BF00 !important}
[data-fb="dk"] .tier h3 em,[data-fb="dk"] .wk h3 em{color:#4393F4}
[data-fb="dk"] .wk:hover{border-color:#fff}
[data-fb="dk"] .tier.hi{border-color:#fff}

/* ---------- light bands (dark text) ---------- */
[data-fb="lt"]{
  --rule:rgba(15,36,48,.16);
  --paper:color-mix(in srgb,var(--fb-bg) 72%,#fff);
  --paper2:color-mix(in srgb,var(--fb-bg) 60%,#fff);
  --chart-ink:var(--fb-lb);
  --cyan:var(--fb-a1);--amber:var(--fb-a2);
  --chart-dk:rgba(15,36,48,.4);--body:#26343D;
  color:#26343D;
}
[data-fb="lt"] h1 em,[data-fb="lt"] h2 em,[data-fb="lt"] h3 em,
[data-fb="lt"] .rtx h2 em{color:var(--fb-em)}
[data-fb="lt"] .lbl,[data-fb="lt"] .lbl.q{color:var(--fb-lb)}
[data-fb="lt"] .mn,[data-fb="lt"] .skey{color:#46545E}
[data-fb="lt"] .lnk{color:#0F2430;border-color:rgba(15,36,48,.35)}
[data-fb="lt"] .cc ul li{border-bottom-color:rgba(15,36,48,.12)}

@media (max-width:720px){
  [data-fb]{padding-top:58px !important;padding-bottom:58px !important}
}