/* Gmaven CRE for brokers. Scoped under #page-brokers. Mirrors funds.css:
   ported from the prototype with raw hex swapped for tokens (#fff to var(--bg),
   #5bc7df to var(--cyan-pale), #b6c8d4 to var(--cta-text-soft)); the pain-list
   cross is muted grey per CI-5. The .fstat-gold go-live stat is the page's one
   personality-B gold element. Shared chrome (header, buttons, eyebrow, ownership
   key, band-soft, footer, breadcrumb) lives in chrome.css; the hero and section
   rhythm below are page-scoped. The tools, painlist and silo components are
   shared with the funds page but scoped per page: the homepage uses .chip/.chips
   for a different component, so they cannot be promoted to generic selectors. */

/* Hero and section rhythm (not in chrome.css) */
#page-brokers .hero{padding-top:78px;padding-bottom:14px}
#page-brokers .hero h1{font-size:clamp(33px,5vw,48px);font-weight:700;max-width:780px}
#page-brokers .hero p.lead{font-size:19px;max-width:660px;margin-top:22px;color:var(--slate)}
#page-brokers .sec{padding-top:58px;padding-bottom:58px}
#page-brokers .sec>h2,#page-brokers .band-soft h2{font-size:clamp(26px,3.2vw,34px);font-weight:700;max-width:720px}
#page-brokers .sec>.sub,#page-brokers .band-soft .sub{font-size:16px;max-width:660px;margin-top:8px;color:var(--slate)}
#page-brokers p.body{font-size:15.5px;color:var(--slate);line-height:1.65;margin-top:16px;max-width:780px}
#page-brokers p.body b,#page-brokers p.body strong{color:var(--navy);font-weight:600}

/* The problem: pain list (grey crosses, palette-safe) */
#page-brokers .painlist{margin-top:22px;max-width:720px}
#page-brokers .painlist li{list-style:none;padding:10px 0 10px 30px;position:relative;font-size:15px;color:var(--slate);border-bottom:.5px solid var(--line)}
#page-brokers .painlist li::before{content:"✕";position:absolute;left:4px;color:var(--muted);font-weight:700;font-size:13px}

/* Tools grid (feature cards and the toolkit) */
#page-brokers .tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:28px}
#page-brokers .tool{border:.5px solid var(--line);border-radius:12px;background:var(--bg);padding:20px}
#page-brokers .tool h3{font-size:15.5px;font-weight:600;color:var(--navy);margin-bottom:6px}
#page-brokers .tool p{font-size:13.5px;line-height:1.55;color:var(--slate)}

/* Stock-feed stat band (the fourth stat is the gold go-live accent) */
#page-brokers .feedstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:26px;max-width:820px}
#page-brokers .fstat{border:.5px solid var(--line);border-radius:12px;background:var(--bg);padding:16px 18px}
#page-brokers .fstat .v{font-family:var(--display);font-weight:800;font-size:24px;color:var(--navy)}
#page-brokers .fstat .l{font-size:12.5px;color:var(--slate);margin-top:4px;line-height:1.4}
#page-brokers .fstat-gold{border-left:4px solid var(--gold);background:var(--gold-tint)}

/* The fix: before/after silo */
#page-brokers .silo{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;margin-top:30px}
#page-brokers .silo .side{border:.5px solid var(--line);border-radius:14px;background:var(--bg);padding:22px}
#page-brokers .silo .side.after{background:var(--navy);border-color:var(--navy)}
#page-brokers .silo .s-h{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
#page-brokers .silo .after .s-h{color:var(--cyan-pale)}
#page-brokers .silo .chips{display:flex;flex-wrap:wrap;gap:8px}
#page-brokers .silo .chip{font-size:12.5px;color:var(--slate);border:.5px solid var(--line);border-radius:999px;padding:6px 12px;background:var(--bg-soft)}
#page-brokers .silo .after .chip{color:var(--bg);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
#page-brokers .silo .s-arrow{align-self:center;font-size:26px;color:var(--cyan-ink);font-weight:700}
#page-brokers .silo .after p{color:var(--cta-text-soft);font-size:13.5px;margin-top:14px;line-height:1.55}

@media(max-width:760px){
  #page-brokers .silo{grid-template-columns:1fr}
  #page-brokers .silo .s-arrow{transform:rotate(90deg);justify-self:center}
}