/* 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:64px;padding-bottom:64px}
#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 (muted-red crosses via --pain-icon, consistent with solar/wheeling) */
#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(--pain-icon);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-ink);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: one three-step sequence, colour-keyed, with an arrow between each
   step. It was two separate grids with a single arrow, which read as loose
   blocks rather than a story. Cards stretch to a common height so the row reads
   as one run. */
#page-funds .onb{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:stretch;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-top{display:flex;align-items:center;gap:10px}
/* Step counter. Kept one flat navy for all three, as on find me customers, so it
   reads as a number in a series; the ownership colour code stays with the top
   border and the key below. */
#page-funds .onb .o-num{font-family:var(--display);font-weight:700;font-size:13px;color:var(--bg);background:var(--navy);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
#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-ink)}
#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;align-self:center}
/* The steps arrive in order, card then arrow then card, riding the shared
   .reveal transition in chrome.css. No JavaScript, or reduced motion set, and
   the whole sequence is simply drawn at once. */
#page-funds .onb>.reveal:nth-child(2){transition-delay:.12s}
#page-funds .onb>.reveal:nth-child(3){transition-delay:.24s}
#page-funds .onb>.reveal:nth-child(4){transition-delay:.36s}
#page-funds .onb>.reveal:nth-child(5){transition-delay:.48s}

/* The tools grid. Two cards per row, not three: at three across the screenshot
   in each card was only about 237px wide, too small to read anything in a
   product screen. */
#page-funds .tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px;margin-top:28px}
#page-funds .tool{border:.5px solid var(--line);border-radius:12px;background:var(--bg);padding:20px;display:flex;flex-direction:column}
#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);margin-bottom:14px}
/* Each tool card carries a placeholder for its product screenshot, the same tile
   solar and wheeling use. Unlike those pages the description sits above it, so
   the card is a column and the tile is pushed to the bottom: that way the tiles
   line up across a row even though the descriptions differ in length. */
#page-funds .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-funds .tool .shot{margin-top:auto;border:.5px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg-soft)}
#page-funds .tool .shot a{display:block}
#page-funds .tool .shot a:hover{opacity:.9}
#page-funds .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-funds .shotbox{display:none}
#page-funds .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:64px;padding-bottom:26px;padding-left:26px;padding-right:26px}
#page-funds .shot-scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(8,46,74,.86)}
#page-funds .shot-frame{position:relative;width:100%;max-width:1180px}
#page-funds .shot-frame img{display:block;width:100%;height:auto;max-height:80vh;object-fit:contain;border-radius:10px}
/* The close button sits above the picture, not on it: inside the frame it
   covered the last column of the deal board. */
#page-funds .shot-close{position:absolute;top:-42px;right:0;background:var(--cyan);color:var(--ink-on-cyan);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-funds .shot-close:hover{background:var(--cyan-light)}

/* Seven cards over two columns leaves one on its own, so the last card runs the
   full width and takes the brochure, the tool that most needs the room. Its
   text sits beside the picture rather than above it. */
#page-funds .tool.wide{grid-column:1 / -1;flex-direction:row;align-items:stretch;gap:22px}
#page-funds .tool.wide .w-text{flex:2 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center}
/* The picture takes the larger share: splitting the card in half left the
   brochure only 440px, barely more than a standard card, which defeats the
   point of the wide card. */
#page-funds .tool.wide .imgspec{flex:3 1 0;margin-top:0;min-height:300px}
#page-funds .tool.wide .shot{flex:3 1 0;margin-top:0;align-self:center}

/* 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-ink);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}

/* The onboarding row now carries three cards and two arrows, so it runs out of
   width before the two-panel silo does. Stack it into a top-to-bottom sequence
   earlier, arrows turned to point down. */
@media(max-width:900px){
  #page-funds .onb{grid-template-columns:1fr}
  #page-funds .onb .o-arrow{transform:rotate(90deg);justify-self:center}
}
@media(max-width:760px){
  #page-funds .silo{grid-template-columns:1fr}
  #page-funds .silo .s-arrow{transform:rotate(90deg);justify-self:center}
  /* On a phone the wide card has no room for a side-by-side picture. */
  #page-funds .tool.wide{flex-direction:column;gap:0}
  #page-funds .tool.wide .imgspec{flex:none;align-self:stretch;margin-top:14px}
  #page-funds .tool.wide .shot{flex:none;align-self:stretch;margin-top:14px}
}