/* Theory of change (home page) */
.tocx{--t-faint:#9AA2B6;--t-navy:#2E3F80;--t-teal:#3E9EA3;--t-green:#079247;--t-grey:#B9C0CD;--t-rule:var(--ink);--t-hair:var(--line);--t-body:var(--muted);
  --t-tint-navy:rgba(46,63,128,.10);--t-tint-teal:rgba(62,158,163,.10);--t-tint-green:rgba(7,146,71,.07)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tocx{--t-navy:#8C9BF0;--t-teal:#5CC8C8;--t-green:#3FCF7D;--t-grey:#4A5470;
  --t-tint-navy:rgba(140,155,240,.14);--t-tint-teal:rgba(92,200,200,.12);--t-tint-green:rgba(63,207,125,.09)}}
:root[data-theme="dark"] .tocx{--t-navy:#8C9BF0;--t-teal:#5CC8C8;--t-green:#3FCF7D;--t-grey:#4A5470;
  --t-tint-navy:rgba(140,155,240,.14);--t-tint-teal:rgba(92,200,200,.12);--t-tint-green:rgba(63,207,125,.09)}
.tocx h2,.tocx h3,.tocx p,.tocx dl{margin-top:0}

.tocx{padding-block:clamp(56px,8vw,104px);color:var(--t-body);font-family:"Source Sans 3",system-ui,sans-serif}
.tocx *{box-sizing:border-box}

.tocx-eyebrow{font-family:"Source Sans 3",sans-serif;font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--t-body);margin:0 0 14px}
.tocx-head{display:grid;gap:24px;align-items:end;margin-bottom:48px}
@media (min-width:960px){.tocx-head{grid-template-columns:1.25fr 1fr;gap:64px}}
.tocx-title{font-family:Poppins,sans-serif;font-weight:700;color:var(--t-navy);font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.06;letter-spacing:-.02em;margin:0}
.tocx-title span{color:var(--t-green)}
.tocx-intro{margin:0;font-size:1.05rem;max-width:46ch}

/* rail */
.tocx-rail{display:flex;gap:0;border-top:2px solid var(--t-rule);overflow-x:auto;scrollbar-width:none;margin-bottom:40px}
.tocx-rail::-webkit-scrollbar{display:none}
.tocx-step{flex:1 0 118px;align-self:stretch;padding-bottom:4px;background:none;border:0;padding:16px 16px 0 0;text-align:left;cursor:pointer;color:var(--t-faint);font:inherit;position:relative}
.tocx-step .bar{position:absolute;top:-2px;left:0;height:2px;width:0;background:var(--c,var(--t-navy))}
.tocx-step.done .bar{width:100%}
.tocx-step.active .bar{animation:fill var(--dur,7s) linear forwards}
.tocx.paused .tocx-step.active .bar{animation-play-state:paused}
.tocx.static .tocx-step.active .bar{animation:none;width:100%}
@keyframes fill{from{width:0}to{width:100%}}
.tocx-step .n{display:block;font-family:Poppins,sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.08em}
.tocx-step .l{display:block;font-family:Poppins,sans-serif;font-weight:600;font-size:.98rem;line-height:1.25;margin-top:2px}
.tocx-step.active,.tocx-step.done{color:var(--ink)}
.tocx-step.active .n{color:var(--c,var(--t-navy))}
.tocx-step:focus-visible{outline:2px solid var(--t-teal);outline-offset:4px}

/* stage */
.tocx-stage{display:grid;gap:40px;align-items:center}
@media (min-width:960px){.tocx-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}}
.tocx-fig{position:relative;width:100%;max-width:560px;margin:0 auto}
.tocx-fig svg{display:block;width:100%;height:auto;overflow:visible}

/* diagram */
.ring-base{fill:none;stroke:var(--t-grey);stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round;transition:opacity .6s}
.ring-on{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1.4s cubic-bezier(.6,.05,.25,1)}
.disk{opacity:0;transition:opacity 1s ease .3s}
.lvl.on .disk{opacity:1}
.lvl.on .ring-base{opacity:0}
.ring-label{font-family:Poppins,sans-serif;font-weight:600;font-size:13px;letter-spacing:.28em;fill:var(--muted);transition:fill .6s}
.lvl.on .ring-label{fill:var(--c)}
.lvl.focus .ring-on{stroke-width:9}

.core{fill:var(--ink);transition:fill .6s}
.core-pulse{fill:none;stroke:var(--ink);stroke-width:1.5;opacity:0}
.fig-ready .core-pulse{animation:corepulse 2.6s ease-out infinite}
.core-pulse{transform-box:fill-box;transform-origin:center;vector-effect:non-scaling-stroke}
@keyframes corepulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(3.5);opacity:0}}
.core-label{font-family:"Source Sans 3",sans-serif;font-size:13px;fill:var(--t-body);letter-spacing:.04em}

.pillar line{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.1s ease,opacity .6s}
.pillar text{font-family:Poppins,sans-serif;font-weight:700;font-size:15px;letter-spacing:.16em;fill:var(--ink);opacity:0;transition:opacity .6s}
.pillar .arrow{fill:var(--ink);opacity:0;transition:opacity .4s ease .9s}
.pillars.on .pillar line{stroke-dashoffset:0}
.pillars.on .pillar text,.pillars.on .pillar .arrow{opacity:1}
.pillars.on .pillar:nth-child(2) line{transition-delay:.15s}
.pillars.on .pillar:nth-child(3) line{transition-delay:.3s}
.pillars.on .pillar:nth-child(4) line{transition-delay:.45s}
.pillars.dim .pillar line,.pillars.dim .pillar .arrow{opacity:.18}
.pillars.dim .pillar text{opacity:.4}

.barrier{font-family:"Source Sans 3",sans-serif;font-size:12px;font-weight:600;fill:var(--muted);letter-spacing:.06em;transition:opacity .6s}
.barriers{opacity:0;transition:opacity .6s}
.barriers.on{opacity:1}

.ripple circle{fill:none;stroke:var(--t-green);stroke-width:1.5;opacity:0}
.ripple.on circle{animation:ripple 3.6s ease-out infinite}
.ripple.on circle:nth-child(2){animation-delay:1.2s}
.ripple.on circle:nth-child(3){animation-delay:2.4s}
.ripple circle{transform-box:fill-box;transform-origin:center;vector-effect:non-scaling-stroke}
@keyframes ripple{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.23);opacity:0}}
.sat{fill:var(--t-green);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:opacity .4s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.sats.on .sat{opacity:1;transform:scale(1)}
.sats.on .sat:nth-child(2){transition-delay:.15s}.sats.on .sat:nth-child(3){transition-delay:.3s}
.sats.on .sat:nth-child(4){transition-delay:.45s}.sats.on .sat:nth-child(5){transition-delay:.6s}
.sats.on .sat:nth-child(6){transition-delay:.75s}

/* panel */
.tocx-panel{display:flex;flex-direction:column;justify-content:center}
@media (min-width:960px){.tocx-panel{min-height:660px}}
.tocx-panel .inner{animation:in .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.p-eyebrow{font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--c);font-weight:600;margin:0 0 12px}
.p-title{font-family:Poppins,sans-serif;font-weight:700;color:var(--ink);font-size:clamp(1.45rem,2.4vw,1.95rem);line-height:1.2;letter-spacing:-.01em;margin:0 0 16px}
.p-lead{margin:0 0 24px;max-width:52ch}
.p-rows{margin:0;border-top:1px solid var(--t-hair)}
.p-row{display:grid;grid-template-columns:1fr;gap:2px;padding:12px 0;border-bottom:1px solid var(--t-hair)}
@media (min-width:560px){.p-row{grid-template-columns:150px 1fr;gap:20px}}
.p-row dt{font-family:Poppins,sans-serif;font-weight:600;font-size:.9rem;color:var(--c)}
.p-row dd{margin:0;font-size:1rem;line-height:1.5}
.p-stat{display:flex;align-items:baseline;gap:16px;margin-top:24px;flex-wrap:wrap}
.p-num{font-family:Poppins,sans-serif;font-weight:700;font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;color:var(--c);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.p-num-label{max-width:24ch;font-size:.98rem;line-height:1.35;color:var(--ink)}

.tocx-controls{display:flex;align-items:center;gap:16px;margin-top:28px}
.tocx-btn{font:600 .85rem/1 Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:none;border:2px solid var(--ink);padding:12px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.tocx-btn:hover{background:var(--ink);color:var(--bg)}
.tocx-btn:focus-visible{outline:2px solid var(--t-teal);outline-offset:3px}
.tocx-btn svg{width:12px;height:12px;fill:currentColor}
.tocx-nav{background:none;border:0;color:var(--t-body);font:600 .85rem Poppins,sans-serif;cursor:pointer;padding:8px 4px}
.tocx-nav:hover{color:var(--ink)}
.tocx-nav[disabled]{opacity:.3;cursor:default}

/* outcome band */
.tocx-goal{margin-top:72px;border-top:2px solid var(--t-rule);padding-top:28px;display:grid;gap:12px}
@media (min-width:960px){.tocx-goal{grid-template-columns:260px 1fr;gap:48px}}
.tocx-goal p{margin:0}
.tocx-goal .k{font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;padding-top:8px}
.tocx-goal .v{font-family:Poppins,sans-serif;font-weight:600;color:var(--t-green);font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.35;max-width:40ch}

@media (prefers-reduced-motion:reduce){
  .tocx *{animation:none!important;transition:none!important}
}