/* Fybr · Invest: the range (a scenario tree in fibres), the work, the scope, the questions. Loads after base.css. */

/* ============================== THE RANGE ============================== */
.inv-range{position:relative;background:radial-gradient(120% 90% at 70% 45%,#0F151C 0%,#080B0F 60%)}
.inv-range__sticky{position:relative;padding:calc(var(--header-h) + clamp(40px,7vw,90px)) 0 0}
.inv-range__canvas{display:block;width:100%;height:min(72svh,640px);margin-top:30px;touch-action:pan-y}
.inv-range__shade,.inv-tip{display:none}
.inv-beat{padding:0 var(--gutter);max-width:760px;margin-bottom:clamp(40px,6vw,70px)}
.inv-beat--hero h1{font-size:clamp(2.8rem,5.2vw,5.1rem);line-height:.98;letter-spacing:-.035em;margin:22px 0 24px}
.inv-beat--hero .deck{font-size:clamp(1.02rem,1.25vw,1.16rem);color:#D6DEE7;max-width:34rem;margin-bottom:30px;line-height:1.55}
.inv-beat h2{font-size:clamp(2.2rem,4.2vw,4rem);line-height:1.02;letter-spacing:-.03em;margin-bottom:20px}
.inv-beat p:not(.eyebrow):not(.deck){color:#D0D8E1;max-width:30rem;line-height:1.6;margin-bottom:18px}
.inv-beat b{font-weight:500;color:var(--brass-hi)}
.inv-range__note{padding:12px var(--gutter) 0;font-size:.84rem;line-height:1.5;color:var(--ink-mid);max-width:52rem}
.inv-links{display:flex;flex-wrap:wrap;gap:14px 30px}

/* Compare the eight cases: the same outcomes in words, behind a disclosure after the range */
.inv-compare{padding:22px 0 clamp(50px,7vw,90px);background:#080B0F}
.inv-compare summary{font-size:1.05rem;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.inv-table[open] summary{border-bottom-color:transparent}
.inv-table table{width:100%;border-collapse:collapse;font-size:.92rem;margin:6px 0 10px}
.inv-table caption{text-align:left;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-low-text);padding-bottom:12px}
.inv-table th,.inv-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-soft)}
.inv-table th{font-weight:500;color:var(--ink-mid)}
.inv-table td:last-child{font-family:var(--mono);color:var(--brass-hi)}
.range-flow .inv-range__canvas{margin-top:0;height:clamp(420px,72svh,640px)}   /* close outcomes need the height to keep their figures apart */

/* Pinned: the section becomes a stage with cued beats over one canvas */
.range-on .inv-range{height:320svh}
.range-on .inv-range__sticky{position:sticky;top:0;height:100svh;overflow:hidden;padding:0}
.range-on .inv-range__canvas{position:absolute;inset:0;height:100%;margin:0}
.range-on .inv-range__shade{display:block;position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 90% at 0% 45%,rgba(7,9,12,.55),rgba(7,9,12,0) 60%)}
.range-on .inv-beat{position:absolute;left:0;top:calc(var(--header-h) + 13svh);max-width:min(36rem,44vw);margin:0;padding:0 0 0 var(--gutter);opacity:0;visibility:hidden;will-change:opacity,transform}
.range-on .inv-beat.is-live{visibility:visible}
.range-on .inv-range__note{position:absolute;left:0;bottom:18px;padding:0 var(--gutter)}
.range-on .inv-tip{display:block;position:absolute;left:0;top:0;max-width:300px;padding:10px 12px;border-radius:4px;background:rgba(16,21,27,.94);border:1px solid rgba(95,168,184,.3);font-size:.78rem;line-height:1.45;color:var(--ink);pointer-events:none;opacity:0;transition:opacity .2s var(--ease-out)}
.range-on .inv-tip.is-on{opacity:1}

/* ============================== THE WORK ============================== */
.inv-work{padding:clamp(90px,11vw,150px) 0;background:var(--ground);border-top:1px solid var(--line-soft)}
.inv-work__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:end;margin-bottom:clamp(44px,5vw,70px)}
.inv-work__head h2{font-size:clamp(2.3rem,4.2vw,4rem);line-height:1;letter-spacing:-.03em}
.inv-work__head p{color:var(--ink-mid);max-width:30rem;line-height:1.6}
.inv-work__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.inv-card{padding:26px 24px 28px;border:1px solid var(--line-soft);border-radius:6px;background:linear-gradient(180deg,rgba(20,26,33,.7),rgba(13,18,24,.7))}
.inv-card__art{width:120px;height:60px;margin-bottom:22px;fill:none;stroke:var(--teal);stroke-width:1.6;stroke-linecap:round}
.inv-card__art circle{fill:var(--teal);stroke:none}
.inv-card__art circle.owner{fill:#fff}
.inv-card__art .dim{stroke:rgba(95,168,184,.35)}
.inv-card:nth-child(2) .inv-card__art{stroke:#A9B39A}.inv-card:nth-child(2) .inv-card__art circle{fill:none;stroke:#A9B39A}
.inv-card:nth-child(3) .inv-card__art{stroke:var(--brass)}.inv-card:nth-child(3) .inv-card__art circle:not(.owner){fill:var(--brass)}
.inv-card__kind{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.inv-card h3{font-size:clamp(1.45rem,1.9vw,1.8rem);line-height:1.1;margin-bottom:12px}
.inv-card p:last-child{color:var(--ink-mid);line-height:1.6;font-size:.95rem}
.js .inv-card[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js .inv-card[data-reveal].is-in{opacity:1;transform:none}
.js .inv-card:nth-child(2)[data-reveal]{transition-delay:.1s}.js .inv-card:nth-child(3)[data-reveal]{transition-delay:.2s}

/* ============================== SCOPE, QUESTIONS ============================== */
.inv-role{padding:clamp(90px,10vw,150px) 0;background:var(--deep);border-top:1px solid var(--line-soft)}
.inv-role__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,110px);align-items:start}
.inv-role h2{font-size:clamp(2.3rem,4vw,3.8rem);line-height:1;letter-spacing:-.03em;margin-top:20px}
.inv-role__body p{color:var(--ink-mid);max-width:36rem;line-height:1.65;margin-bottom:22px}
.inv-role__body h3{font-size:clamp(1.4rem,2vw,1.8rem);margin:34px 0 14px}
.inv-faq{padding:clamp(80px,9vw,140px) 0;background:var(--ground);border-top:1px solid var(--line-soft)}
.inv-faq__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,90px);align-items:start}
.inv-faq h2{font-size:clamp(2.2rem,3.8vw,3.6rem);line-height:1;letter-spacing:-.03em}
.inv-faq .detail-body a{color:var(--ink);border-bottom:1px solid rgba(234,240,246,.45)}

/* ============================== RESPONSIVE ============================== */
@media (max-width:1080px){
  .inv-work__grid{grid-template-columns:1fr}
  .inv-work__head,.inv-role__grid,.inv-faq__grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .range-on .inv-beat{top:calc(var(--header-h) + 3svh);max-width:none;right:0;padding-right:var(--gutter)}
  .range-on .inv-beat--hero h1{font-size:clamp(2.6rem,11.5vw,3.6rem);margin:14px 0 16px}
  .range-on .inv-beat--hero .deck{font-size:.98rem;margin-bottom:20px}
  .range-on .inv-beat h2{font-size:clamp(1.9rem,8.6vw,2.6rem)}
  .range-on .inv-range__shade{background:linear-gradient(180deg,rgba(7,9,12,.7),rgba(7,9,12,0) 50%)}
  .range-on .inv-range__note{bottom:12px;font-size:.8rem;line-height:1.45}
  .inv-table table{font-size:.84rem}
  .inv-table th,.inv-table td{padding:8px 6px}
}
@media (max-height:720px) and (min-width:761px){
  .range-on .inv-beat{top:calc(var(--header-h) + 3svh)}
  .range-on .inv-beat--hero h1{font-size:clamp(2.4rem,10svh,4.4rem);margin:12px 0 14px}
}
/* Flow (reduced motion): the headline first, then the tree, then the argument */
.range-flow .inv-range__sticky,.no-js .inv-range__sticky{display:flex;flex-direction:column}
.range-flow .inv-range__canvas,.no-js .inv-range__canvas{order:2;margin-bottom:30px}
.range-flow .inv-beat,.no-js .inv-beat{order:3}
.range-flow .inv-beat--hero,.no-js .inv-beat--hero{order:1}
.range-flow .inv-range__note,.no-js .inv-range__note{order:4}
.range-flow .inv-tip,.range-flow .inv-range__shade{order:5}