/* Gmaven CRE for property funds and managers. Scoped under #page-funds.
   Ported from the prototype; raw hex swapped for tokens for the identity-token
   check (#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, not the
   prototype's brick red. The .proof gold left bar 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, as on the other pages. The
   painlist, silo, tools and baton components are shared with the future
   brokers page and will be reconciled when that page is built. */

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

/* The problem: pain list (grey crosses, palette-safe) */
#page-funds .painlist{margin-top:22px;max-width:720px}
#page-funds .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-funds .painlist li::before{content:"✕";position:absolute;left:4px;color:var(--muted);font-weight:700;font-size:13px}

/* The fix: before/after silo */
#page-funds .silo{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;margin-top:30px}
#page-funds .silo .side{border:.5px solid var(--line);border-radius:14px;background:var(--bg);padding:22px}
#page-funds .silo .side.after{background:var(--navy);border-color:var(--navy)}
#page-funds .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-funds .silo .after .s-h{color:var(--cyan-pale)}
#page-funds .silo .chips{display:flex;flex-wrap:wrap;gap:8px}
#page-funds .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-funds .silo .after .chip{color:var(--bg);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
#page-funds .silo .s-arrow{align-self:center;font-size:26px;color:var(--cyan-ink);font-weight:700}
#page-funds .silo .after p{color:var(--cta-text-soft);font-size:13.5px;margin-top:14px;line-height:1.55}

/* Onboarding: three colour-keyed cards */
#page-funds .onb{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;margin-top:30px}
#page-funds .onb .o-card{border:.5px solid var(--line);border-radius:14px;padding:22px;background:var(--bg);border-top:4px solid var(--c,var(--muted))}
#page-funds .onb .o-lab{font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#page-funds .onb h3{font-size:17px;font-weight:600;color:var(--navy);margin:8px 0 6px}
#page-funds .onb p{font-size:13.5px;color:var(--slate);line-height:1.55}
#page-funds .onb .o-arrow{font-size:26px;color:var(--cyan-ink);font-weight:700}

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

/* Proof: the fund success story, gold left bar */
#page-funds .proof{border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:14px;background:var(--bg);padding:28px;margin-top:30px;max-width:820px}
#page-funds .proof .p-stat{font-family:var(--display);font-weight:800;font-size:clamp(30px,4vw,42px);color:var(--navy)}
#page-funds .proof .p-stat span{color:var(--cyan-ink)}
#page-funds .proof p{font-size:15px;color:var(--slate);line-height:1.65;margin-top:12px}
#page-funds .proof .p-note{font-size:12.5px;color:var(--muted);margin-top:12px}

/* Baton pass strip */
#page-funds .baton{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:22px;font-size:14.5px;color:var(--slate)}
#page-funds .baton .b-chip{font-family:var(--display);font-weight:600;font-size:13px;border-radius:999px;padding:8px 16px}

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