/* 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:64px;padding-bottom:64px}
#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 (muted-red crosses via --pain-icon, consistent with solar/wheeling) */
#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(--pain-icon);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)}

/* The toolkit grid, which carries the product screenshots. Everything below is
   scoped to #tools so the two differentiator cards higher up the page, which
   carry no picture, keep exactly the look they have. Two cards per row, not
   three, matching the funds page: at three across the picture in each card was
   only about 237px wide, too small to read anything in a product screen. Six
   cards over two columns is exactly three rows, so unlike funds there is no odd
   card left over and no full-width card is needed. */
#page-brokers #tools .tools{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
#page-brokers #tools .tool{display:flex;flex-direction:column}
#page-brokers #tools .tool p{margin-bottom:14px}
/* The description sits above the picture, so the card is a column and the
   picture is pushed to the bottom: that way the pictures line up across a row
   even though the descriptions differ in length. */
#page-brokers #tools .tool .imgspec{min-height:190px;display:flex;flex-direction:column;justify-content:center;padding:18px;margin-top:auto}
/* A card holding a real screenshot: no dashed placeholder frame, and the picture
   sits flush inside a hairline border. Clicking it opens the full view. */
#page-brokers #tools .tool .shot{margin-top:auto;border:.5px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg-soft)}
#page-brokers #tools .tool .shot a{display:block}
#page-brokers #tools .tool .shot a:hover{opacity:.9}
#page-brokers #tools .tool .shot img{display:block;width:100%;height:auto}

/* Click to enlarge, with no JavaScript: the overlay is hidden until its own id
   is the address in the bar, which a plain link sets. Closing links back to the
   tools section, so the browser's back button closes it too. */
#page-brokers .shotbox{display:none}
#page-brokers .shotbox:target{display:flex;align-items:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;padding-top:26px;padding-bottom:26px;padding-left:26px;padding-right:26px}
#page-brokers .shot-scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(8,46,74,.86)}
#page-brokers .shot-frame{position:relative;width:100%;max-width:1180px}
#page-brokers .shot-frame img{display:block;width:100%;height:auto;max-height:84vh;object-fit:contain;border-radius:10px}
#page-brokers .shot-close{position:absolute;top:12px;right:12px;background:var(--navy);color:var(--bg);border-radius:999px;padding-top:7px;padding-bottom:7px;padding-left:16px;padding-right:16px;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
#page-brokers .shot-close:hover{background:var(--cyan);color:var(--ink-on-cyan)}

/* 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}
}