/* CounterX · home sections: the strip, No. 01 floor + size bands, No. 03 window, No. 04 steps + fees. */
.hstrip { border-bottom: 1px solid var(--line1); background: var(--bg2); }
.strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.strip > div { display: flex; flex-direction: column; gap: 8px; padding: 20px 16px 20px 18px; border-left: 1px solid var(--line1); min-width: 0; }
.strip > div:first-child { border-left: 0; padding-left: 0; }
.strip .lbl { font-size: 10.5px; line-height: 1.35; min-height: 2.7em; }
.strip .v { font: 500 22px/1.1 var(--fm); letter-spacing: -.01em; white-space: nowrap; }
.strip .v small { display: block; margin-top: 4px; font: 400 11px var(--fm); letter-spacing: 0; color: var(--ink3); }
.strip .v.au { color: var(--au2); }
.strip-note { margin: 0; padding: 0 0 14px; font: 400 11px var(--fm); color: var(--ink3); }

.pgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.bands .panel-h .t { font-size: 13px; }
.bands-hero { display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; border-bottom: 1px solid var(--line2); }
.bands-hero .v { font: 500 40px/1 var(--fm); letter-spacing: -.02em; }
.bands-hero .s { font: 400 12px var(--fm); color: var(--ink3); }
.bt td { height: 52px; }
.bt .sz { font: 500 12px var(--fm); color: var(--ink2); }
.bt .m { display: block; font: 500 14px var(--fm); color: var(--dn); }
.bt .p { display: block; font: 400 10.5px var(--fm); color: var(--ink3); }
.bands-lost { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-top: 1px solid var(--line2); }
.bands-lost b { font: 500 22px var(--fm); }
.bands-lost .s { font-size: 12px; color: var(--ink3); line-height: 1.45; }
.bands-otc { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line2); background: rgba(201, 162, 90, .06); }
.bands-otc b { font: 500 18px var(--fm); color: var(--au2); }

.bgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line2); background: var(--bg2); }
.how li { padding: 24px 22px 28px; border-left: 1px solid var(--line2); display: flex; flex-direction: column; gap: 10px; }
.how li:first-child { border-left: 0; }
.how .n { font: 500 11px var(--fm); color: var(--au); letter-spacing: .1em; }
.how b { font: italic 500 24px/1.1 var(--fd); }
.how p { color: var(--ink2); font-size: 14px; line-height: 1.55; }
.fees { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 20px; border: 1px solid var(--line2); }
.fees > div { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; border-left: 1px solid var(--line2); }
.fees > div:first-child { border-left: 0; }
.fees b { font: 500 30px/1 var(--fm); color: var(--au2); letter-spacing: -.02em; }
.fees span:last-child { font-size: 13px; color: var(--ink3); }

@media (max-width: 1599px) { .strip .v { font-size: 20px; } }
@media (max-width: 1279px) {
  .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .strip > div:nth-child(5) { border-left: 0; padding-left: 0; }
  .strip > div:nth-child(n+5) { border-top: 1px solid var(--line1); }
  .pgrid { grid-template-columns: minmax(0, 1fr) 300px; }
  .how, .fees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how li:nth-child(3), .fees > div:nth-child(3) { border-left: 0; }
  .how li:nth-child(n+3), .fees > div:nth-child(n+3) { border-top: 1px solid var(--line2); }
}
@media (max-width: 1099px) {
  .pgrid, .bgrid { grid-template-columns: minmax(0, 1fr); }
  .bands { display: grid; grid-template-columns: 1fr 1fr; }
  .bands .panel-h { grid-column: 1 / -1; }
  .bands .bt { grid-row: span 2; border-left: 1px solid var(--line2); }
  .bands-hero { border-bottom: 0; }
  .bands-otc { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip > div { padding: 14px 12px; border-left: 1px solid var(--line1); }
  .strip > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .strip > div:nth-child(5) { border-left: 0; }
  .strip > div:nth-child(n+3) { border-top: 1px solid var(--line1); }
  .strip > div:last-child { grid-column: 1 / -1; }
  .strip .v { font-size: 18px; }
  .bands { display: block; } .bands .bt { border-left: 0; }
  .how, .fees { grid-template-columns: minmax(0, 1fr); }
  .how li, .fees > div { border-left: 0 !important; }
  .how li + li, .fees > div + div { border-top: 1px solid var(--line2); }
  .fees b { font-size: 26px; }
}

/* what-if framing: real floor data, re-quoted at the counter, never presented as CounterX trades */
.wif { display: inline-block; vertical-align: middle; font: 600 9px/1 var(--fm); letter-spacing: .1em; color: var(--au2); border: 1px dashed var(--au3); padding: 3px 5px; margin-left: 6px; white-space: nowrap; }
.wif-note { margin: -8px 0 16px; font-size: 13px; color: var(--ink3); max-width: 900px; }
.wif-note .wif { margin: 0 10px 0 0; }
.strip-note code { font: inherit; color: var(--au2); }
.strip-note .live-dot { width: 5px; height: 5px; margin-right: 6px; }