/* OUNTERNET blog infographics + post hero + sources v1 (pass AH). Used by Article v23 (and any page that renders post html).
   Blocks are static HTML (see blog-cms-schema-v1.md). Final state is the default; html.ig-anim (set only when IntersectionObserver
   exists and reduced motion is off) hides the start state until blog-ig-v1.js adds .is-in to the figure. */
@property --igp{syntax:"<number>";inherits:false;initial-value:0}
.post-hero{position:relative;max-width:1200px;margin:6px auto 0;padding:0 var(--container-pad,20px)}
.post-hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:22px;border:1px solid rgba(0,128,195,.35);box-shadow:0 0 0 1px rgba(255,255,255,.03),0 30px 80px -30px rgba(0,128,195,.55),0 0 120px -40px rgba(0,128,195,.45);transform:translate3d(0,var(--py,0px),0) scale(1.03);transform-origin:50% 50%;will-change:transform;background:#0b1220}
.ig{position:relative;margin:30px 0;padding:clamp(18px,3vw,28px);border-radius:20px;border:1px solid rgba(0,128,195,.28);background:linear-gradient(160deg,rgba(0,128,195,.12),rgba(13,18,28,.72) 45%,rgba(13,18,28,.9));box-shadow:0 24px 60px -36px rgba(0,128,195,.6),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden;color:var(--fg-1,#e9eef5)}
.ig figcaption{margin:0 0 18px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#4FB6E8}
.ig ol,.ig ul{list-style:none;margin:0;padding:0}
.ig .ig-src{margin:16px 0 0;font-size:12.5px;line-height:1.5;color:var(--fg-3,#9aa4b4)}
.ig .ig-k{display:block;font-weight:700;color:var(--fg-1,#fff)}
.ig .ig-v{display:block;color:var(--fg-2,#c5ccd8)}
/* steps */
.ig-steps ol{position:relative;display:grid;gap:14px;counter-reset:igs}
.ig-steps ol::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:linear-gradient(#0080C3,#00A551);transform-origin:top;border-radius:2px}
.ig-steps li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;align-items:start;counter-increment:igs}
.ig-steps li::before{content:counter(igs);grid-row:1/3;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;color:#0b1220;background:#FCB913;box-shadow:0 0 0 4px rgba(252,185,19,.15);position:relative;z-index:1}
.ig-steps .ig-k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#4FB6E8;padding-top:2px}
.ig-steps .ig-v{font-size:16px;line-height:1.45;color:var(--fg-1,#fff)}
/* timeline */
.ig-timeline ol{position:relative;display:grid;gap:16px;padding-left:26px}
.ig-timeline ol::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:rgba(0,128,195,.45);transform-origin:top}
.ig-timeline li{position:relative}
.ig-timeline li::before{content:"";position:absolute;left:-26px;top:4px;width:16px;height:16px;border-radius:50%;background:#0080C3;box-shadow:0 0 0 4px rgba(0,128,195,.2),0 0 18px rgba(0,128,195,.8)}
.ig-timeline li:last-child::before{background:#FCB913;box-shadow:0 0 0 4px rgba(252,185,19,.18),0 0 18px rgba(252,185,19,.7)}
.ig-timeline .ig-k{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:#4FB6E8}
.ig-timeline .ig-v{font-size:15px;line-height:1.45}
@media (min-width:960px){.ig-timeline.ig-h ol{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:14px;padding:30px 0 0}
.ig-timeline.ig-h ol::before{left:8px;right:8px;top:7px;bottom:auto;width:auto;height:2px;transform-origin:left}
.ig-timeline.ig-h li::before{left:0;top:-30px}}
/* bars */
.ig-bars ul{display:grid;gap:14px}
.ig-bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k v" "b b";gap:6px 12px;align-items:baseline}
.ig-bars .ig-k{grid-area:k;font-weight:500;font-size:15px}
.ig-bars .ig-v{grid-area:v;font-weight:800;font-size:16px;color:#FCB913;font-variant-numeric:tabular-nums}
.ig-bars .ig-bar{grid-area:b;position:relative;display:block;height:10px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.ig-bars .ig-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v) / var(--max, 100) * 100%);border-radius:99px;background:linear-gradient(90deg,#0080C3,#38b3f0);box-shadow:0 0 14px rgba(0,128,195,.7)}
.ig-bars li:last-child .ig-bar::after{background:linear-gradient(90deg,#0080C3,#FCB913)}
/* compare */
.ig-compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.ig-compare figcaption{grid-column:1/-1;margin-bottom:4px}
.ig-col{padding:18px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.ig-col+.ig-col{border-color:rgba(0,128,195,.6);background:linear-gradient(160deg,rgba(0,128,195,.22),rgba(0,128,195,.06));box-shadow:0 0 40px -12px rgba(0,128,195,.6)}
.ig-col h4{margin:0 0 12px;font-size:17px;font-weight:800;color:var(--fg-1,#fff)}
.ig-col+.ig-col h4{color:#FCB913}
.ig-col ul{display:grid;gap:9px}
.ig-col li{position:relative;padding-left:20px;font-size:15px;line-height:1.45;color:var(--fg-2,#c5ccd8)}
.ig-col li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3)}
.ig-col+.ig-col li{color:var(--fg-1,#fff)}
.ig-col+.ig-col li::before{background:#00A551;box-shadow:0 0 8px rgba(0,165,81,.8)}
/* gauges */
.ig-gauges ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;text-align:center}
.ig-gauges li{display:grid;justify-items:center;gap:10px;--igp:var(--v)}
.ig-gauges .ig-ring{order:1;width:clamp(84px,18vw,120px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,#0e1522 74%,transparent 75% 100%),conic-gradient(#0080C3 calc(var(--igp) * 1%),rgba(255,255,255,.08) 0);box-shadow:0 0 30px -8px rgba(0,128,195,.7)}
.ig-gauges li:nth-child(2) .ig-ring{background:radial-gradient(closest-side,#0e1522 74%,transparent 75% 100%),conic-gradient(#00A551 calc(var(--igp) * 1%),rgba(255,255,255,.08) 0)}
.ig-gauges li:nth-child(3) .ig-ring{background:radial-gradient(closest-side,#0e1522 74%,transparent 75% 100%),conic-gradient(#FCB913 calc(var(--igp) * 1%),rgba(255,255,255,.08) 0)}
.ig-gauges .ig-v{order:2;font-size:22px;font-weight:800;color:var(--fg-1,#fff);font-variant-numeric:tabular-nums}
.ig-gauges .ig-k{order:3;font-size:14px;color:var(--fg-2,#c5ccd8);font-weight:500}
/* animation states (only with html.ig-anim) */
html.ig-anim .ig{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
html.ig-anim .ig.is-in{opacity:1;transform:none}
html.ig-anim .ig-steps ol::before,html.ig-anim .ig-timeline ol::before{transform:scaleY(0);transition:transform 1.4s cubic-bezier(.4,0,.2,1) .2s}
html.ig-anim .ig-timeline.ig-h ol::before{transform:scaleX(0)}
html.ig-anim .ig.is-in ol::before{transform:none}
html.ig-anim .ig-steps li,html.ig-anim .ig-timeline li{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i,0) * 160ms + 250ms)}
html.ig-anim .ig.is-in li{opacity:1;transform:none}
html.ig-anim .ig-timeline li::before{filter:grayscale(1) brightness(.5);transition:filter .5s ease;transition-delay:calc(var(--i,0) * 220ms + 400ms)}
html.ig-anim .ig-timeline.is-in li::before{filter:none}
html.ig-anim .ig-bars .ig-bar::after{transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 120ms + 200ms)}
html.ig-anim .ig-bars.is-in .ig-bar::after{transform:none}
html.ig-anim .ig-gauges li{--igp:0;transition:--igp 1.6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 150ms + 200ms)}
html.ig-anim .ig-gauges.is-in li{--igp:var(--v)}
html.ig-anim .ig-compare .ig-col{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
html.ig-anim .ig-compare .ig-col+.ig-col{transition-delay:.25s}
html.ig-anim .ig-compare.is-in .ig-col{opacity:1;transform:none}
@media (max-width:640px){.ig-compare{grid-template-columns:minmax(0,1fr)}.ig-gauges ul{gap:8px}.ig-gauges .ig-v{font-size:18px}.ig-gauges .ig-k{font-size:12.5px}.ig{margin:24px 0;border-radius:16px}.post-hero img{border-radius:16px}}
@media (prefers-reduced-motion:reduce){.post-hero img{transform:none!important}}
/* sources */
.post-sources{margin-top:40px;padding-top:20px;border-top:1px solid var(--border-1,rgba(255,255,255,.1))}
.post-sources h2{font-size:20px;margin:0 0 12px}
.post-sources ol{margin:0;padding-left:22px;display:grid;gap:8px;font-size:14px;line-height:1.5;color:var(--fg-3,#9aa4b4)}
.post-sources li::marker{color:#4FB6E8;font-weight:700}
.post-sources a{color:var(--fg-2,#c5ccd8);text-decoration:underline;text-decoration-color:rgba(0,128,195,.6);text-underline-offset:3px;overflow-wrap:anywhere}
.post-sources a:hover{color:#4FB6E8}