/* Healthspan's Leaky Bucket story and the opportunity chart: four scenes each, one point per scene. Text on the left, the drawing on the right,
   changing together. Complete and readable before script loads. */
.bucket-story{margin-top:112px;padding:80px 0 56px;background:var(--cream);color:var(--ink)}
.bucket-stage{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px;align-items:center;margin-top:40px;scroll-margin-top:96px}
.bucket-figure{margin:0;width:100%}
.bucket-figure svg{display:block;width:100%;height:auto;overflow:visible;font-family:Satoshi,"Helvetica Neue",Arial,sans-serif}
/* The bucket is framed like a camera shot: pours enter from above the frame, never over the heading. */
.bucket-story .bucket-figure svg{overflow:hidden}

/* Drawing */
.bk-handle{fill:none;stroke:#7d9c8d;stroke-width:2.2;stroke-linecap:round}
.bk-grip{fill:none;stroke:var(--green-800);stroke-width:7;stroke-linecap:round}
.bk-pour{fill:url(#bk-pour)}
.bk-body{stroke:none}
.bk-rim-back{fill:none;stroke:var(--green-800);stroke-width:1.2;stroke-opacity:.4}
.bk-surface-edge{fill:none;stroke:#b5d7c4;stroke-width:1;stroke-opacity:.8}
.bk-ripple{fill:none;stroke:#d3e8db;stroke-width:1}
.bk-shine{fill:none;stroke:#fff;stroke-opacity:.34;stroke-width:8;stroke-linecap:round}
.bk-shine-thin{stroke-width:2;stroke-opacity:.5}
.bk-foot{fill:none;stroke:var(--green-800);stroke-opacity:.22;stroke-width:1}
.bk-outline{fill:none;stroke:var(--green-800);stroke-width:1.6;stroke-linejoin:round}
.bk-rim{fill:none;stroke:var(--green-800);stroke-width:3.2;stroke-linecap:round}
.bk-ear{fill:#fff;stroke:var(--green-800);stroke-width:1.4}
.bk-flow{fill:#3b6549}
.bk-stream-shine{fill:none;stroke:#b9dccb;stroke-opacity:.55;stroke-width:2;stroke-linecap:round;stroke-dasharray:46 64}
.bk-flow-shine{fill:none;stroke:#b9dccb;stroke-opacity:.6;stroke-width:1.2;stroke-linecap:round;stroke-dasharray:18 30}
.bk-pool{fill:#3b6549;fill-opacity:.75}
.bk-ring{fill:none;stroke:#3b6549;stroke-width:1}
.bk-collar{fill:var(--green-800)}

/* The opportunity chart uses the same stage, scene text and progress. Type sizes are set in px by the script. */
.opp-chart{width:100%}
.op-grid{fill:none;stroke:var(--line);stroke-width:1}
.op-tick{fill:var(--muted);font-variant-numeric:tabular-nums}
.op-line{fill:none;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round}
.op-dot{stroke:var(--paper);stroke-width:2}
.op-start{fill:var(--ink);stroke:var(--paper);stroke-width:2}
.op-val{font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.op-sub{fill:var(--muted)}
.op-band{fill:var(--green-700);fill-opacity:.1}
.op-bracket{fill:none;stroke:var(--green-800);stroke-width:1.5}
.op-gap{fill:var(--green-800);font-weight:700;letter-spacing:-.02em;paint-order:stroke;stroke:var(--paper);stroke-width:6px;stroke-linejoin:round}
.opp-note{margin-top:12px;font-size:13px;line-height:1.5;color:var(--muted);max-width:62ch}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Scene text. Without motion, all four scenes read in order. */
.bucket-captions{list-style:none;margin:0;padding:0;display:grid;gap:36px}
.story-beat h3{font-size:clamp(24px,2.3vw,32px);font-weight:400;letter-spacing:-.025em;line-height:1.15;text-wrap:balance}
.story-beat p{margin-top:14px;font-size:17px;line-height:1.55;color:var(--muted);max-width:40ch}

/* Running: one scene at a time, in step with the drawing */
.bucket-running .bucket-captions{display:block;position:relative;min-height:390px}
.bucket-running .story-beat{position:absolute;inset:50% 0 auto;opacity:0;visibility:hidden;transform:translateY(calc(-50% - 6px));transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease),visibility 0s linear var(--t-base)}
.bucket-running .story-beat.is-current{opacity:1;visibility:visible;transform:translateY(-50%);transition:opacity var(--t-move) var(--ease) var(--t-base),transform var(--t-move) var(--ease) var(--t-base),visibility 0s}
.bucket-running .story-beat h3{font-size:clamp(30px,3vw,42px)}
#leak.bucket-running :is(.leak-key,.bridge-key) li{opacity:0;visibility:hidden;clip-path:inset(0 0 100%);transition:none}
#leak.bucket-running .story-beat.is-current :is(.leak-key,.bridge-key) li.is-on{opacity:1;visibility:visible;clip-path:inset(0);transition:clip-path .4s var(--ease),opacity .25s ease}

@media(max-width:999px){
  .bucket-stage{grid-template-columns:minmax(0,1fr);row-gap:28px;margin-top:28px}
  .bucket-figure{order:-1;max-width:600px;margin:0 auto}
  .bucket-captions{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
  .bucket-running .bucket-captions{min-height:330px}
  .bucket-running .story-beat{inset:0 0 auto;transform:translateY(-6px)}
  .bucket-running .story-beat.is-current{transform:none}
}
@media(max-width:649px){
  .bucket-story{margin-top:80px;padding:56px 0 36px}
  .bucket-captions{grid-template-columns:minmax(0,1fr);gap:28px}
  .bucket-running .bucket-captions{min-height:350px}
  .bucket-running .story-beat h3{font-size:28px}
  .story-beat p{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.bucket-story *{transition:none!important}}

/* Editorial graphics: a steady model, restrained materials, and intrinsic scene height. */
#risk-chart>.wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);grid-template-rows:auto 1fr;column-gap:56px;row-gap:32px;align-items:start}
:is(#risk-chart,#leak) .opportunity-heading{grid-column:1;grid-row:1}
#risk-chart .opp-stage{display:contents}
#risk-chart .bucket-story-copy{grid-column:1;grid-row:2;min-width:0}
#risk-chart .opp-figure{grid-column:2;grid-row:1 / span 2;max-width:none;margin:0;align-self:center}
#risk-chart .opp-chart svg{overflow:visible}
#risk-chart.bucket-running .bucket-captions,#leak.bucket-running .bucket-captions{display:grid;grid-template-columns:minmax(0,1fr);min-height:0;align-items:start}
#risk-chart.bucket-running .story-beat,#leak.bucket-running .story-beat{grid-area:1/1;position:relative;inset:auto;transform:none;transition:opacity .35s ease,visibility .35s;align-self:start}
#risk-chart.bucket-running .story-beat.is-current,#leak.bucket-running .story-beat.is-current{transform:none;transition:opacity .45s ease,visibility 0s}
#risk-chart .story-beat h3,#leak .story-beat h3{font-size:30px;line-height:1.16;letter-spacing:-.025em;font-weight:400}
#risk-chart .story-beat p,#leak .story-beat p{font-size:17px;line-height:1.55}
:is(#risk-chart,#leak) .opportunity-controls{display:block;margin-top:28px}
:is(#risk-chart,#leak) .opportunity-controls[hidden]{display:none}
:is(#risk-chart,#leak) .opportunity-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
:is(#risk-chart,#leak) .opportunity-steps button{position:relative;min-height:44px;padding:12px 0 8px;text-align:left;border:0;border-top:1px solid #bbc9be;background:none;color:#4b6255;font:inherit;font-size:14px;line-height:1.3;white-space:normal}
:is(#risk-chart,#leak) .opportunity-steps button::after{content:'';position:absolute;inset:-1px 0 auto;height:2px;background:#315b43;transform:scaleX(var(--step-progress,0));transform-origin:left}
:is(#risk-chart,#leak) .opportunity-steps button[aria-pressed=true]{color:#121f16;font-weight:500}
:is(#risk-chart,#leak) .opportunity-steps button:focus-visible{outline:2px solid #315b43;outline-offset:4px}
#leak .bucket-stage{align-items:center;column-gap:56px}
.bk-handle{stroke:#627f6c;stroke-width:1.4}
.bk-grip{stroke:#294831;stroke-width:4}
.bk-pour{fill:#31563d}
.bk-outline,.bk-rim-back,.bk-rim,.bk-foot,.bk-ear{stroke:#294831;stroke-width:1.25;vector-effect:non-scaling-stroke}
.bk-rim{stroke-width:1.6}
.bk-rim-back{stroke-opacity:.5}
.bk-ear{fill:#dce7d6}
.bk-surface-edge{stroke:#9cbaa3;stroke-width:1}
.bk-ripple{stroke:#9cbaa3;stroke-opacity:.6;stroke-width:.8}
/* Water stays within the Healthspan green palette throughout the bucket story. */
.bk-flow{fill:#3b6549}
.bk-pool{fill:#3b6549;fill-opacity:.55}
.bk-ring{stroke:#3b6549;stroke-opacity:.6;stroke-width:.8}
.bk-collar{fill:#294831}
.bk-shine,.bk-stream-shine,.bk-flow-shine{display:none}
.op-context{fill:none;stroke-width:1.3;stroke-opacity:.24;stroke-linecap:round;stroke-linejoin:round}
.op-line{stroke-width:2.4}
.op-leader{fill:none;stroke-width:1}
.op-grid{stroke:#d8e0d6;stroke-width:.8}
.op-tick,.op-sub{fill:#526457}
.op-val{font-weight:500;letter-spacing:-.02em}
.op-gap{fill:#315b43;font-weight:500;stroke-width:5}
.op-bracket{stroke:#315b43;stroke-width:1}
.op-band{fill:#557f60;fill-opacity:.09}
.op-static-narrow{display:none!important}
@media(max-width:1000px){
 #risk-chart>.wrap{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;row-gap:28px}
 :is(#risk-chart,#leak) .opportunity-heading{grid-column:1;grid-row:1;max-width:650px}
 #risk-chart .opp-figure{grid-column:1;grid-row:2;width:100%;max-width:760px;margin:0 auto}
 #risk-chart .bucket-story-copy{grid-column:1;grid-row:3;display:flex;flex-direction:column;max-width:760px;width:100%;margin:0 auto}
 :is(#risk-chart,#leak) .opportunity-controls{order:-1;margin:0 0 24px}
 #leak .bucket-stage{row-gap:28px}
}
@media(max-width:650px){
 #risk-chart>.wrap{row-gap:24px}
 #risk-chart .story-beat h3,#leak .story-beat h3{font-size:28px}
 #risk-chart .story-beat p,#leak .story-beat p{font-size:16px}
 :is(#risk-chart,#leak) .opportunity-steps{gap:8px 16px}
 :is(#risk-chart,#leak) .opportunity-steps button{font-size:13px;min-height:46px}
 #risk-chart .opp-note{margin-top:10px;font-size:13px}
 .op-static-wide{display:none!important}.op-static-narrow{display:block!important}
}
@media(prefers-reduced-motion:reduce){
 #risk-chart .bucket-captions,#leak .bucket-captions{display:grid!important;gap:28px}
 #risk-chart .story-beat,#leak .story-beat{position:static!important;grid-area:auto!important;opacity:1!important;visibility:visible!important;transform:none!important}
 :is(#risk-chart,#leak) .opportunity-controls{display:none!important}
}
/* Hide the outgoing scene immediately, so two arguments never overlap. */
#risk-chart.bucket-running .story-beat:not(.is-current),#leak.bucket-running .story-beat:not(.is-current){transition:none;opacity:0;visibility:hidden}
#risk-chart.bucket-running .story-beat.is-current,#leak.bucket-running .story-beat.is-current{transition:none;opacity:1;visibility:visible}
/* Static mobile charts retain the same readable type as the scripted plot. */
@media(max-width:650px){
 #risk-chart:not(.chart-enhanced) .op-static-narrow .op-val{font-size:16px}
 #risk-chart:not(.chart-enhanced) .op-static-narrow .op-sub,#risk-chart:not(.chart-enhanced) .op-static-narrow .op-tick{font-size:13px}
 #risk-chart:not(.chart-enhanced) .op-static-narrow .op-gap{font-size:30px}
}
@media(max-width:650px){
 #leak.bucket-running .bucket-story-copy{display:flex;flex-direction:column}
 #leak.bucket-running .story-beat:not(.is-current){display:block}
}

/* Opportunity chart and bucket story: unnumbered progress segments and a pause control for presenters. */
:is(#risk-chart,#leak) .opportunity-controls{display:flex;align-items:center;gap:16px;margin-top:32px}
:is(#risk-chart,#leak) .opportunity-controls[hidden]{display:none}
:is(#risk-chart,#leak) .opportunity-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;flex:1;max-width:320px}
:is(#risk-chart,#leak) .opportunity-steps button{position:relative;min-height:24px;padding:0;border:0;background:none;cursor:pointer;white-space:normal}
:is(#risk-chart,#leak) .opportunity-steps button::before{content:'';position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#cfdad1}
:is(#risk-chart,#leak) .opportunity-steps button::after{inset:50% 0 auto;height:2px;margin-top:-1px}
:is(#risk-chart,#leak) .opportunity-steps button:hover::before{background:#9fb3a5}
.opportunity-pause{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid #bbc9be;border-radius:50%;background:none;color:#315b43;cursor:pointer}
.opportunity-pause span{display:block;width:8px;height:10px;border-left:2.5px solid currentColor;border-right:2.5px solid currentColor}
.opportunity-pause[aria-pressed=true] span{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor;margin-left:2px}
.opportunity-pause:hover{border-color:#315b43}
.opportunity-pause:focus-visible,:is(#risk-chart,#leak) .opportunity-steps button:focus-visible{outline:2px solid var(--green-700);outline-offset:3px}
.op-name{fill:#526457}
.op-gap{fill:#315b43;font-weight:500;letter-spacing:-.03em;paint-order:stroke;stroke:#f3f6f1;stroke-width:6px;stroke-linejoin:round}
.op-band{fill:#557f60;fill-opacity:.16}
.op-bracket{fill:none;stroke:#315b43;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.op-line{stroke-width:2.75}

/* The bucket story shares the opportunity chart's layout: heading and scene text on the left, the drawing on the right. */
#leak>.wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);column-gap:56px;row-gap:32px;align-items:start}
#leak .opportunity-heading{grid-column:1;grid-row:1}
#leak .bucket-stage{display:contents}
#leak .bucket-story-copy{grid-column:1;grid-row:2;min-width:0;display:flex;flex-direction:column}
#leak .opportunity-controls{order:-1;margin:0 0 24px}
#leak .bucket-figure{grid-column:2;grid-row:1 / span 2;max-width:none;margin:0;align-self:center}
/* Each tile enters at its event in the drawing; positions stay fixed through the sequence. */
#leak :is(.leak-key,.bridge-key){list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0 0;padding:0;border:0}
#leak :is(.leak-key,.bridge-key) li{display:flex;align-items:center;min-width:0;min-height:96px;padding:18px;border:1px solid #c5d4c8;background:#e9f0e7;color:#213e2d;font-size:18px;line-height:1.35;font-weight:500;letter-spacing:-.01em;text-wrap:pretty;transform:none}
#leak .bridge-key li{border-color:#c5d4c8;background:#e9f0e7;color:#213e2d}
@media(max-width:1000px){
 #leak>.wrap{grid-template-columns:minmax(0,1fr);row-gap:28px}
 #leak .opportunity-heading{grid-column:1;grid-row:1;max-width:650px}
 #leak .bucket-figure{grid-column:1;grid-row:2;width:100%;max-width:760px;margin:0 auto}
 #leak .bucket-story-copy{grid-column:1;grid-row:3;display:flex;flex-direction:column;max-width:760px;width:100%;margin:0 auto}
 #leak .opportunity-controls{order:-1;margin:0 0 24px}
}
@media(max-width:650px){#leak>.wrap{row-gap:24px}#leak :is(.leak-key,.bridge-key){gap:10px}#leak :is(.leak-key,.bridge-key) li{padding:14px;font-size:18px;min-height:106px}}
@media(max-width:359px){#leak :is(.leak-key,.bridge-key){grid-template-columns:minmax(0,1fr)}#leak :is(.leak-key,.bridge-key) li{min-height:64px}}
@media(prefers-reduced-motion:reduce){#leak .opportunity-controls{display:none!important}}

/* The metaphor distinguishes account ownership from assets leaving the firm. */
#leak .bucket-context{font-size:14px;line-height:1.5;color:var(--muted);max-width:58ch;margin:18px auto 0}
.bk-label{font:500 26px Satoshi,sans-serif;fill:#213e2d}