/* ==========================================================================
   GLS Equity - The Wheel Score explained (/wheel-score, 27 Oct 2026)
   Page layout only; cards, pills, buttons and the sign-up box come from styles.css.
   ========================================================================== */
.ws-page { max-width: 920px; }
.ws-hero { padding: 8px 0 18px; }
.ws-eyebrow { margin: 0 0 4px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #059669; }
.ws-hero .page-title { margin: 0 0 10px; }
.ws-lead { margin: 0; font-size: 1.15rem; line-height: 1.6; color: #1e293b; }

.ws-sec { margin-bottom: 18px; }
.ws-sec h2 { margin: 0 0 10px; font-size: 1.2rem; }
.ws-sec p { line-height: 1.6; color: #334155; }

/* the funnel: five boxes joined by arrows, stacked on a phone */
.ws-flow { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.ws-flow li { position: relative; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 10px; text-align: center; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.ws-flow li + li::before { content: "→"; position: absolute; left: -18px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-weight: 800; }
.ws-flow b { font-size: 1.25rem; color: #0f172a; }
.ws-flow span { font-size: 0.85rem; color: #475569; line-height: 1.35; }
.ws-flow small { color: #64748b; }
.ws-flow li.is-pass { background: #eff6ff; border-color: #bfdbfe; }
.ws-flow li.is-scan { background: #ecfdf5; border-color: #a7f3d0; }
.ws-flow li.is-scan b { color: #047857; }
.ws-flow-note { margin: 0; }

.ws-filters, .ws-steps { margin: 8px 0 0 22px; padding: 0; line-height: 1.55; color: #334155; }
.ws-filters li, .ws-steps li { margin-bottom: 6px; }
.ws-filters strong { color: #0f172a; }

.ws-rank { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 22px; }
.ws-rank li { display: flex; flex-direction: column; border-left: 3px solid #10b981; padding: 2px 0 2px 10px; }
.ws-rank strong { color: #0f172a; }
.ws-rank span { font-size: 0.9rem; color: #475569; }

.ws-bands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 8px 0 10px; }
.ws-bands > div { background: #f8fafc; border-radius: 10px; padding: 10px 12px; }
.ws-bands p { margin: 6px 0 0; font-size: 0.9rem; }

.ws-sec details { border-top: 1px solid #f1f5f9; padding: 10px 0; }
.ws-sec details summary { cursor: pointer; font-weight: 700; color: #0f172a; }
.ws-sec details p { margin: 8px 0 0; }

.ws-cta { background: #0f172a; color: #e2e8f0; }
.ws-cta h2 { color: #fff; }
.ws-cta .text-sm-muted { color: #cbd5e1; }
.ws-cta .text-sm-muted a { color: #6ee7b7; }

@media (max-width: 768px) {
    .ws-lead { font-size: 1.05rem; }
    .ws-flow { grid-template-columns: 1fr; gap: 18px; }
    .ws-flow li + li::before { content: "↓"; left: 50%; top: -17px; transform: translateX(-50%); }
    .ws-rank { grid-template-columns: 1fr; }
    .ws-bands { grid-template-columns: repeat(2, 1fr); }
}