/* dossier-pages.css · v10.332
 *
 * Industry-grade financial dossier system for ISPO Dashboard / Stake AST1
 * / Stake AST2. Distinct from the product pages (.prod-page / .ph-*) but
 * not editorial-literary · financial-document register (Stripe, Vercel,
 * Linear, Mercury family).
 *
 * v10.332 typography pivot · top-1% industry-grade pass:
 *   - Display: Instrument Serif → GEIST SANS (Vercel's font; the actual
 *     industry standard for modern fintech / dev-tool premium pages.
 *     Free on Google Fonts, variable, ranges 100-900). Replaces the
 *     v10.329 serif which read more editorial/literary than financial.
 *   - All sans family · same family Vercel/Stripe/Linear use for
 *     financial-grade UI. Geist + Geist Mono are siblings (paired axes).
 *   - Italic emphasis preserved via the italic axis (brand-purple still
 *     anchors the key word in display headlines)
 *   - Drop-cap dropped · that's a serif convention; with sans it
 *     reads heavy-handed
 *   - Number kerning kept tabular + lining (tnum + lnum)
 *   - Tracking tightened harder for sans display (-.04em vs serif's -.022em)
 *
 * Key contrasts vs product pages:
 *   bg          off-white #F8F8FB (cool)   →  warm paper  #F6F5F1
 *   display     Inter (weight 720)         →  Geist Sans (weight 500-600)
 *   numerics    Inter                      →  Geist Mono (true tabular)
 *   rhythm      bento + steps + tiers      →  long-form prose + KV tables
 *   accent      brand-purple blocks/borders→  brand-purple hairlines + italics
 *
 * Geist + Geist Mono loaded via Google Fonts injected by builder (on
 * these 3 pages only · site chrome stays on self-hosted Inter).
 * Preconnect hints + onload swap so they don't block first paint. */

/* FOUC kill · override the shared inline dark critical CSS before first paint. */
html:has(main.dossier),
html:has(main.dossier) body,
body.has-dossier{
  background:#F6F5F1 !important;
  color:#0F0E0C !important;
}

/* v10.339 · premium paper bg. Replaces the flat #F6F5F1 with a layered
 * paper-feel: warm radial highlight at top-left, very subtle bottom
 * vignette, and a SVG grain texture at 1.5% opacity (data-URI inline so
 * no extra request). Same atmospheric depth Anthropic / Stripe Atlas /
 * Mercury use on their cream document pages. */
body.has-dossier::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    /* Top-left warm light source */
    radial-gradient(75% 55% at 12% -8%,
      rgba(255,232,180,0.32) 0%,
      rgba(246,245,241,0.0) 55%),
    /* Soft brand-violet wash on right side, very faint */
    radial-gradient(60% 70% at 92% 18%,
      rgba(111,0,255,0.05) 0%,
      rgba(246,245,241,0.0) 60%),
    /* Bottom edge vignette · barely visible warm shadow */
    radial-gradient(110% 50% at 50% 110%,
      rgba(80,60,30,0.10) 0%,
      rgba(246,245,241,0.0) 60%),
    #F6F5F1;
}
body.has-dossier::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0.018;
  mix-blend-mode:multiply;
  /* SVG fractal noise · 1.5% opacity layer for "paper grain" texture.
   * Inline data URI so it's part of the CSS payload, no extra HTTP. */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

.dossier{
  --paper:#F6F5F1;
  --paper-2:#F1EFE8;
  --ink:#0F0E0C;
  --ink-2:#3A3833;
  --ink-3:#6B6862;
  --ink-4:#9C988F;
  --hair:#E2DFD7;
  --hair-soft:#ECE9E2;
  --brand:#6F00FF;
  --brand-soft:#F1E8FF;
  --brand-hover:#5800CC;
  /* v10.332 · display font swapped from Instrument Serif (editorial)
   * to Geist Sans (industry-standard fintech / Vercel family). Variable
   * naming kept as `--serif` for diff-cleanness; it's a sans now. */
  --serif:"Geist","Inter Variable","Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"Geist Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);

  background:var(--paper);
  color:var(--ink);
  font-family:"Inter Variable","Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-variation-settings:"wght" 400;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01" 1, "cv11" 1;
}
.dossier *,
.dossier *::before,
.dossier *::after{box-sizing:border-box;}
.dossier a{color:inherit;text-decoration:none;}
.dossier p{color:var(--ink-2);margin:0;}
.dossier ul,.dossier ol{margin:0;padding:0;list-style:none;}

/* ── Layout ────────────────────────────────────────────────────────── */
.dossier .ds-wrap{max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,72px);}
.dossier .ds-wrap--narrow{max-width:760px;}

/* ── Top meta strip (above hero) ───────────────────────────────────── */
.dossier .ds-meta{
  padding:clamp(80px,12vw,140px) 0 0;
}
.dossier .ds-meta__row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:48px;
}
.dossier .ds-meta__row::before{
  content:"";width:24px;height:1px;background:var(--brand);display:inline-block;
}
.dossier .ds-meta__row .sep{opacity:.4;}

/* ── Hero (long-form serif title) ──────────────────────────────────── */
.dossier .ds-hero{
  padding:0 0 clamp(80px,12vw,140px);
  border-bottom:1px solid var(--hair);
}
.dossier .ds-hero__title{
  font-family:var(--serif);
  font-weight:540;
  font-size:clamp(2.75rem,6.8vw,5.5rem);
  line-height:1.02;
  letter-spacing:-.04em;
  color:var(--ink);
  margin:0;
  text-wrap:balance;
  max-width:14ch;
}
/* v10.332 · italic dropped on emphasis (Geist Sans on Google Fonts
 * has no italic axis; synthesized italic looks cheap on display sans).
 * Brand-purple + same weight carries emphasis cleanly. */
.dossier .ds-hero__title em{
  font-style:normal;
  font-weight:540;
  color:var(--brand);
  letter-spacing:-.04em;
}
.dossier .ds-hero__lede{
  font-size:clamp(1.18rem,1.7vw,1.45rem);
  line-height:1.5;
  font-weight:400;
  color:var(--ink-2);
  margin:40px 0 0;
  max-width:42ch;
  text-wrap:pretty;
  letter-spacing:-.006em;
}
.dossier .ds-hero__ctas{
  display:flex;flex-wrap:wrap;align-items:center;gap:28px;
  margin-top:44px;
}

/* ── Stats strip (mono tabular numbers under hero) ─────────────────── */
.dossier .ds-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;
  padding:48px 0;
  border-bottom:1px solid var(--hair);
}
.dossier .ds-stats__item{
  display:flex;flex-direction:column;gap:8px;
  padding:0 24px;
  border-left:1px solid var(--hair);
}
.dossier .ds-stats__item:first-child{border-left:none;padding-left:0;}
.dossier .ds-stats__label{
  font-family:var(--mono);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}
.dossier .ds-stats__value{
  font-family:var(--mono);
  font-size:clamp(1.25rem,2.1vw,1.65rem);
  font-weight:500;
  letter-spacing:-.012em;
  color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1, "lnum" 1, "ss02" 1;
}
.dossier .ds-stats__value--brand{color:var(--brand);}

/* ── Section (long-form prose blocks) ──────────────────────────────── */
.dossier .ds-section{
  padding:clamp(72px,10vw,112px) 0;
  border-bottom:1px solid var(--hair);
}
.dossier .ds-section:last-of-type{border-bottom:none;}
.dossier .ds-section__eyebrow{
  font-family:var(--mono);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 24px;
  display:flex;align-items:center;gap:12px;
}
.dossier .ds-section__eyebrow::before{
  content:"";width:18px;height:1px;background:var(--brand);
}
.dossier .ds-section__title{
  font-family:var(--serif);
  font-weight:540;
  font-size:clamp(1.95rem,3.6vw,3rem);
  line-height:1.06;
  letter-spacing:-.032em;
  color:var(--ink);
  margin:0 0 28px;
  text-wrap:balance;
  max-width:22ch;
}
.dossier .ds-section__title em{
  font-style:normal;font-weight:540;color:var(--brand);letter-spacing:-.032em;
}
.dossier .ds-section__lede{
  font-size:1.125rem;line-height:1.6;
  color:var(--ink-2);
  max-width:60ch;
  margin:0;
}
.dossier .ds-section__body{
  margin-top:40px;
  max-width:58ch;
}
.dossier .ds-section__body p{
  font-size:1.0625rem;line-height:1.65;
  margin:0 0 20px;
  color:var(--ink-2);
}
.dossier .ds-section__body p:last-child{margin-bottom:0;}
.dossier .ds-section__body p em{font-style:italic;color:var(--ink);}
.dossier .ds-section__body p strong{font-weight:600;color:var(--ink);}
.dossier .ds-section__body p a{
  color:var(--brand);
  border-bottom:1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  transition:border-color .2s var(--ease);
}
.dossier .ds-section__body p a:hover{border-bottom-color:var(--brand);}

/* v10.332 · drop cap removed (was a serif-only editorial convention;
 * with Geist Sans it reads heavy-handed). .ds-section__body--editorial
 * modifier kept as no-op so existing markup doesn't break · could host
 * future opt-in prose tweaks. */

/* ── Copyable pool ID block ────────────────────────────────────────── */
.dossier .ds-copyable{
  display:flex;align-items:stretch;
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:10px;
  overflow:hidden;
  margin-top:24px;
  max-width:100%;
}
.dossier .ds-copyable__id{
  flex:1;min-width:0;
  padding:14px 18px;
  font-family:var(--mono);
  font-size:.875rem;
  color:var(--ink);
  overflow-x:auto;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.dossier .ds-copyable__btn{
  appearance:none;border:none;
  background:var(--ink);color:#fff;
  font-family:inherit;font-size:.85rem;font-weight:500;
  padding:0 22px;
  cursor:pointer;
  transition:background .2s var(--ease);
}
.dossier .ds-copyable__btn:hover{background:#1F1E1B;}
.dossier .ds-copyable__btn.is-copied{background:var(--brand);}

/* ── Pull-quote / press reference ──────────────────────────────────── */
.dossier .ds-quote{
  margin-top:40px;
  padding:32px 0 0;
  border-top:1px solid var(--hair);
}
.dossier .ds-quote__text{
  font-family:var(--serif);
  font-style:normal;
  font-weight:500;
  font-size:clamp(1.35rem,2.2vw,1.75rem);
  line-height:1.3;
  letter-spacing:-.028em;
  color:var(--ink);
  max-width:32ch;
  margin:0;
}
.dossier .ds-quote__cite{
  display:block;margin-top:16px;
  font-family:var(--mono);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
  font-style:normal;
}
.dossier .ds-quote__cite a{color:var(--brand);}

/* ── Steps (numbered list, prose) ──────────────────────────────────── */
.dossier .ds-steps{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:32px 48px;
  margin-top:40px;
}
.dossier .ds-steps__item{
  display:flex;flex-direction:column;gap:8px;
}
.dossier .ds-steps__num{
  font-family:var(--mono);
  font-size:.78rem;font-weight:500;
  letter-spacing:.1em;color:var(--brand);
  padding-bottom:12px;
  margin-bottom:8px;
  border-bottom:1px solid var(--brand);
  width:fit-content;
}
.dossier .ds-steps__title{
  font-family:var(--serif);
  font-weight:540;
  font-size:1.25rem;line-height:1.2;
  color:var(--ink);margin:0;
  letter-spacing:-.022em;
}
.dossier .ds-steps__title em{font-style:normal;font-weight:540;color:var(--brand);}
.dossier .ds-steps__body{
  font-size:.98rem;line-height:1.55;color:var(--ink-2);margin:0;
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.dossier .ds-btn{
  display:inline-flex;align-items:center;gap:10px;
  height:50px;padding:0 28px;
  background:var(--ink);color:#fff!important;
  font-family:inherit;font-size:1rem;font-weight:500;
  border:none;border-radius:999px;
  cursor:pointer;
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.dossier .ds-btn:hover{background:#1F1E1B;transform:translateY(-1px);}
.dossier .ds-btn--brand{background:var(--brand);}
.dossier .ds-btn--brand:hover{background:var(--brand-hover);}
.dossier .ds-btn svg{width:14px;height:14px;}
.dossier .ds-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--ink);font-size:1rem;font-weight:500;
  border-bottom:1px solid var(--hair);
  padding-bottom:2px;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.dossier .ds-link:hover{color:var(--brand);border-color:var(--brand);}
.dossier .ds-link::after{
  content:"↗";font-size:.9em;opacity:.7;
}

/* ── Closing CTA ───────────────────────────────────────────────────── */
.dossier .ds-final{
  padding:clamp(80px,12vw,140px) 0;
  background:var(--paper-2);
  border-top:1px solid var(--hair);
}
.dossier .ds-final__title{
  font-family:var(--serif);
  font-weight:540;
  font-size:clamp(2.25rem,4.4vw,3.75rem);
  line-height:1.04;
  letter-spacing:-.036em;
  color:var(--ink);margin:0;
  max-width:14ch;
  text-wrap:balance;
}
.dossier .ds-final__title em{font-style:normal;font-weight:540;color:var(--brand);}
.dossier .ds-final__sub{
  font-size:1.125rem;color:var(--ink-2);
  margin:20px 0 0;max-width:48ch;
}
.dossier .ds-final__ctas{
  display:flex;flex-wrap:wrap;align-items:center;gap:24px;
  margin-top:36px;
}

/* ── Reveal (compositor-only fade-in on scroll) ────────────────────── */
@keyframes ds-rise{
  from{opacity:0;transform:translate3d(0,16px,0);}
  to{opacity:1;transform:translate3d(0,0,0);}
}
.dossier .ds-hero > .ds-wrap > *{
  animation:ds-rise .7s cubic-bezier(.2,.7,.2,1) both;
}
.dossier .ds-hero > .ds-wrap > :nth-child(1){animation-delay:.05s;}
.dossier .ds-hero > .ds-wrap > :nth-child(2){animation-delay:.15s;}
.dossier .ds-hero > .ds-wrap > :nth-child(3){animation-delay:.25s;}
.dossier .ds-hero > .ds-wrap > :nth-child(4){animation-delay:.35s;}

.dossier .ed-reveal{opacity:0;}
.dossier .ed-reveal.is-revealed{
  animation:ds-rise .7s cubic-bezier(.2,.7,.2,1) both;
}

/* ── Focus ─────────────────────────────────────────────────────────── */
.dossier a:focus-visible,
.dossier button:focus-visible{
  outline:2px solid var(--brand);outline-offset:3px;border-radius:4px;
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .dossier *,.dossier *::before,.dossier *::after{
    animation:none!important;transition:none!important;
  }
  .dossier .ed-reveal,
  .dossier .ds-hero > .ds-wrap > *{opacity:1!important;transform:none!important;}
}

/* ── Mobile ────────────────────────────────────────────────────────── */
@media (max-width:768px){
  .dossier{font-size:16px;}
  .dossier .ds-wrap{padding:0 20px;}
  .dossier .ds-meta{padding:64px 0 0;}
  .dossier .ds-meta__row{margin-bottom:32px;}
  .dossier .ds-hero{padding:0 0 56px;}
  .dossier .ds-section{padding:64px 0;}
  .dossier .ds-stats{grid-template-columns:repeat(2,1fr);gap:24px 0;}
  .dossier .ds-stats__item{padding:16px 16px;border-left:none;border-top:1px solid var(--hair);}
  .dossier .ds-stats__item:first-child,
  .dossier .ds-stats__item:nth-child(2){border-top:none;padding-top:0;}
  .dossier .ds-steps{grid-template-columns:1fr;gap:32px;}
  .dossier .ds-hero__ctas,
  .dossier .ds-final__ctas{flex-direction:column;align-items:stretch;width:100%;gap:14px;}
  .dossier .ds-btn{width:100%;justify-content:center;}
}