/* Blackstone Point Holdings - one stylesheet for the marketing pages.
   The page is built like a printed prospectus: an ink band that runs the full
   width at the top and the bottom, white leaves in between. Hierarchy comes
   from one serif at three sizes and from rule-work, not from a second colour.
   The motif is the point mark - a small filled square set beside the wordmark
   and in front of every plain statement.

   The band keeps its ink in BOTH themes on purpose. It is the brand's one fixed
   surface, so --band / --on-band are declared once and never redefined; only the
   page around it flips. A token that flipped underneath fixed rgba() text is how
   a header ends up with invisible links in one theme. */
:root{
  --band:#17111F; --on-band:#F6F4F8; --band-line:rgba(255,255,255,.14);
  --leaf:#FBFAF9; --card:#FFFFFF; --ink:#17111F; --text:#3B3543; --quiet:#726B7C;
  --rule:#E6E2EA; --rule-firm:#CFC8D6; --wash:#F3F0F6;
  --display:"Spectral",Georgia,"Times New Roman",serif;
  --body:"Hind","Segoe UI",system-ui,-apple-system,sans-serif;
  --measure:1080px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --leaf:#131017; --card:#1B1622; --ink:#F0ECF4; --text:#C0B9C8; --quiet:#8B8397;
    --rule:#2C2534; --rule-firm:#3E3548; --wash:#1F1927;
  }
}
:root[data-theme="dark"]{
  --leaf:#131017; --card:#1B1622; --ink:#F0ECF4; --text:#C0B9C8; --quiet:#8B8397;
  --rule:#2C2534; --rule-firm:#3E3548; --wash:#1F1927;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--leaf);color:var(--text);
  font-family:var(--body);font-size:17.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);color:var(--ink);font-weight:600;margin:0;
  text-wrap:balance;letter-spacing:-.008em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}

.frame{width:100%;max-width:var(--measure);margin:0 auto;padding-inline:30px}

/* ---- the point mark ------------------------------------------------------ */
.pt{display:inline-block;width:7px;height:7px;background:currentColor;
  vertical-align:.14em;margin-right:10px;flex:none}

/* ---- masthead + opening, both on the ink band ---------------------------- */
.masthead{background:var(--band);color:var(--on-band);
  border-bottom:1px solid rgba(255,255,255,.07)}
/* Scoped to the wordmark and the nav on purpose. `.masthead a` would be one
   specificity step above `.press`, which sets its own colour - the button then
   inherits the band's ink and renders its label in the same colour as its own
   background. */
.masthead .mark,.masthead .ways a{color:inherit;text-decoration:none}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:26px 0 22px;border-bottom:1px solid var(--band-line)}
.mark{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:.02em;
  display:inline-flex;align-items:center;white-space:nowrap}
.ways{display:flex;align-items:center;gap:26px;font-size:15px;flex-wrap:wrap}
.ways a{opacity:.78}
.ways a:hover{opacity:1}
.ways .go{opacity:1;border:1px solid rgba(255,255,255,.4);border-radius:2px;
  padding:9px 18px;font-weight:600;letter-spacing:.01em}
.ways .go:hover{background:var(--on-band);color:var(--band);border-color:var(--on-band)}

.opening{padding:74px 0 82px}
.opening h1{color:var(--on-band);font-size:clamp(34px,5.2vw,58px);line-height:1.07;
  letter-spacing:-.022em;max-width:17ch}
.standfirst{color:rgba(246,244,248,.72);font-size:clamp(17px,1.5vw,20px);line-height:1.62;
  max-width:56ch;margin:22px 0 0}
.begin{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:34px}
.press{display:inline-block;background:var(--on-band);color:var(--band);text-decoration:none;
  font-weight:600;font-size:16px;padding:14px 30px;border-radius:2px;letter-spacing:.01em}
.press:hover{background:#fff}
.aside{color:rgba(246,244,248,.55);font-size:14.5px}

/* ---- leaves -------------------------------------------------------------- */
.leaf{padding:64px 0;border-bottom:1px solid var(--rule)}
.leaf:last-of-type{border-bottom:0}
.num{display:block;font-family:var(--body);font-size:12.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);margin:0 0 14px}
.leaf h2{font-size:clamp(25px,3vw,33px);line-height:1.16;max-width:24ch}
.intro{margin:14px 0 0;max-width:62ch}

.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 46px;margin-top:38px}
.pair h3{font-size:19px;line-height:1.3;margin-bottom:8px}
.pair p{font-size:16.5px;line-height:1.65}

.ladder{list-style:none;margin:38px 0 0;padding:0}
.ladder li{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:26px 0;
  border-top:1px solid var(--rule)}
.ladder li:last-child{border-bottom:1px solid var(--rule)}
.ladder .step{font-family:var(--display);font-size:26px;color:var(--quiet);line-height:1}
.ladder h3{font-size:19.5px;margin-bottom:7px}
.ladder p{font-size:16.5px;margin:0}

.plate{background:var(--card);border:1px solid var(--rule);border-radius:3px;
  padding:30px 32px;margin-top:34px}
.plate ul{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.plate li{display:flex;gap:2px;font-size:16.5px;line-height:1.6}
.plate .pt{margin-top:.6em}

.asked{margin-top:34px;border-top:1px solid var(--rule)}
.asked details{border-bottom:1px solid var(--rule)}
.asked summary{cursor:pointer;list-style:none;padding:19px 34px 19px 0;position:relative;
  font-family:var(--display);font-size:18.5px;color:var(--ink);font-weight:500}
.asked summary::-webkit-details-marker{display:none}
.asked summary::after{content:"+";position:absolute;right:4px;top:17px;font-size:21px;
  color:var(--quiet);font-family:var(--body);font-weight:400}
.asked details[open] summary::after{content:"\2013"}
.asked .body{padding:0 0 20px;max-width:70ch;font-size:16.5px}

.onward{margin-top:26px;font-size:16px}
.onward a{font-weight:600;text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--rule-firm)}
.onward a:hover{text-decoration-color:currentColor}

.reach{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;margin-top:34px;align-items:start}
.reach dl{margin:0;border-top:1px solid var(--rule)}
.reach dt{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);
  padding-top:16px}
.reach dd{margin:3px 0 16px;border-bottom:1px solid var(--rule);padding-bottom:16px;
  font-size:16.5px;color:var(--ink)}
.reach dd:last-of-type{border-bottom:0}

/* ---- prose pages --------------------------------------------------------- */
.page{padding:58px 0 20px}
.page h1{font-size:clamp(30px,4vw,44px);line-height:1.1;max-width:20ch}
.page .standfirst{color:var(--text);margin-top:18px}
.prose{padding:8px 0 70px;max-width:74ch}
.prose h2{font-size:23px;margin:44px 0 12px}
.prose h3{font-size:18.5px;margin:28px 0 8px}
.prose ul,.prose ol{margin:0 0 1.1em;padding-left:22px}
.prose li{margin-bottom:8px}
.prose .stamp{font-size:14.5px;color:var(--quiet);margin-bottom:34px}
.prose .flag{background:var(--wash);border-left:2px solid var(--rule-firm);
  padding:16px 20px;margin:26px 0;font-size:16.5px}

/* ---- footer -------------------------------------------------------------- */
footer{background:var(--band);color:rgba(246,244,248,.62);padding:38px 0 46px;font-size:14.5px}
footer a{color:rgba(246,244,248,.85);text-decoration:none}
footer a:hover{color:var(--on-band);text-decoration:underline}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:20px;border-bottom:1px solid var(--band-line)}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.fine{margin:20px 0 0;max-width:90ch;line-height:1.6;color:rgba(246,244,248,.55)}

@media (max-width:820px){
  .bar{flex-wrap:wrap;row-gap:14px}
  .ways{width:100%;justify-content:flex-start}
  .pair{grid-template-columns:1fr;gap:26px}
  .reach{grid-template-columns:1fr;gap:28px}
  .opening{padding:52px 0 58px}
  .leaf{padding:48px 0}
  .bar{padding:20px 0 18px}
  .ways{gap:18px;font-size:14.5px}
  .ladder li{grid-template-columns:40px 1fr;gap:14px}
}
@media (max-width:520px){
  .frame{padding-inline:20px}
  .mark{font-size:17px}
  .ways{gap:14px;font-size:14px}
  .ways .go{padding:8px 14px}
}