/* Network page: editorial copy, quiet outcome curves, and a compact pilot offer. */
.networks .hero.network-hero{padding:170px 0 85px}
.networks .network-hero-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:64px;align-items:center}
.networks .network-hero-copy{text-align:left}
.networks .network-hero h1{font-size:clamp(35px,3.5vw,53px)!important;line-height:1.12;font-weight:400;letter-spacing:-.055em;max-width:17ch}
.networks .network-hero h1 em{font-family:'Instrument Serif',serif;font-weight:400;font-size:1.09em;letter-spacing:-.025em;display:block;margin-top:15px}
.networks .network-hero .lede{font-size:16px;line-height:1.8;margin:27px 0 28px;max-width:38ch}
.networks .network-effect{margin:0;min-width:0;padding-top:12px}
.networks .effect-graph{width:100%;height:auto;display:block;overflow:visible;margin-top:25px}
.networks .graph-axis{fill:none;stroke:var(--line);stroke-width:1}
.networks .metric-line{fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round}
.networks .retention{color:var(--text)}
.networks .count{color:color-mix(in srgb,var(--text) 70%,var(--bg))}
.networks .nps{color:color-mix(in srgb,var(--text) 34%,var(--bg))}
.networks .time{color:color-mix(in srgb,var(--text) 48%,var(--bg))}
.networks .graph-labels{font-family:var(--body);font-size:15px;letter-spacing:-.02em}
.networks .graph-labels text{fill:currentColor}
/* The graph axis starts at x=24 in its 760-unit viewBox. */
.networks .network-effect figcaption{font-size:10px;color:var(--faint);margin-top:12px;margin-left:calc(100% * 24 / 760);text-align:left;letter-spacing:.025em}
.networks .graph-legend{display:none}
.networks .vs2 .voice-comparison{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.networks .vs2 .voice-comparison li{counter-increment:none}
.networks .vs2 .voice-comparison li:before{display:none;content:none}
.networks .comparison-mark{font-family:var(--body);font-size:24px;font-weight:500;line-height:1.15;color:var(--text)}
.networks .dim .comparison-mark{color:var(--muted)}
/* Alternate the page sections in their current reading order. */
.networks .network-hero,.networks #voice,.networks #pilot{background:var(--bg)}
.networks #value,.networks #how{background:var(--bg-2)}
.networks .outcome-explorer{background:transparent}
.networks .pilot-block{max-width:900px;margin:0 auto;text-align:left}
.networks .pilot-block>.eyebrow{display:block;margin-bottom:25px}
.networks .pilot-block h2{font-size:clamp(40px,5.5vw,72px);font-weight:400;line-height:1.08;letter-spacing:-.055em}
.networks .pilot-block h2 em{font-family:'Instrument Serif',serif;font-weight:400;letter-spacing:-.025em}
.networks .pilot-intro{font-size:17px;line-height:1.8;max-width:58ch;color:var(--muted);margin:26px 0 30px}
.networks .pilot-benefits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;max-width:720px;border-top:1px solid var(--line-strong)}
.networks .pilot-benefits li{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line-strong);color:var(--muted);font-size:15px;line-height:1.7}
.networks .pilot-benefits svg{flex:none;margin-top:6px}
.networks .pilot-action{margin-top:28px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.networks .pilot-action p{font-size:15px;line-height:1.75;max-width:53ch;color:var(--muted)}
@media(max-width:1100px){.networks .network-hero-grid{gap:38px;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}}
@media(max-width:900px){.networks .hero.network-hero{padding-top:145px}.networks .network-hero-grid{grid-template-columns:1fr;gap:50px}.networks .network-hero h1{max-width:22ch}.networks .network-hero .lede{max-width:55ch}.networks .network-effect{max-width:760px;width:100%}}
@media(max-width:600px){.networks .hero.network-hero{padding-bottom:60px}.networks .graph-labels{display:none}.networks .effect-graph{width:132%;max-width:none;clip-path:inset(0 24% 0 0);margin-bottom:-4px}.networks .network-effect{overflow:hidden}.networks .graph-legend{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:11px;line-height:1.5;color:var(--muted)}.networks .graph-legend li{display:flex;gap:8px;align-items:flex-start}.networks .graph-legend i{width:16px;border-top:2px solid currentColor;flex:none;margin-top:7px}.networks .network-effect figcaption{font-size:9px;margin-top:20px;margin-left:calc(132% * 24 / 760)}.networks .pilot-block h2{font-size:43px}}

/* Match the member page's solid gray emphasis in both themes. */
.networks .grad{background:none;color:var(--muted);-webkit-text-fill-color:currentColor}

/* Four outcomes, one spacious canvas. */
.networks .network-effect{padding:0}
.networks .effect-graph{margin-top:0}
.networks .metric-line{stroke-width:1.8;vector-effect:non-scaling-stroke}


@media(prefers-reduced-motion:reduce){.networks .swapline span.on{animation:none}}

/* A little breathing room; one quiet drawing sequence, no loop. */
.networks .hero.network-hero{padding-top:200px}
.networks .network-effect{padding-top:24px}
.networks .graph-labels{fill:currentColor}
.networks .metric-curve{transition:color .2s,opacity .2s}
.networks .metric-line{transition:stroke-width .2s}
.networks .curve-hit{fill:none;stroke:transparent;stroke-width:40;vector-effect:non-scaling-stroke;pointer-events:stroke}
.networks .metric-curve:is(:hover,:focus-visible){color:var(--text);outline:none}
.networks .metric-curve:is(:hover,:focus-visible) .metric-line{stroke-width:3.8}
.networks .metric-curve:is(:hover,:focus-visible) .graph-labels{font-weight:600}
.networks .effect-graph:has(.metric-curve:is(:hover,:focus-visible)) .metric-curve:not(:hover):not(:focus-visible){opacity:.28}
.networks .graph-ready .metric-line,.networks .graph-ready .curve-hit{clip-path:var(--curve-clip)}
.networks .graph-ready .curve-reveal{width:0}
.networks .graph-ready .graph-labels,.networks .graph-ready .graph-legend li{opacity:0}
.networks .is-drawn .curve-reveal{animation:effect-reveal 2.4s cubic-bezier(.3,0,.25,1) both;animation-delay:var(--curve-delay)}
.networks .is-drawn .metric-line{animation:effect-tone 2.4s ease both;animation-delay:var(--curve-delay)}
.networks .is-drawn .graph-labels,.networks .is-drawn .graph-legend li{animation:effect-label .4s ease both;animation-delay:calc(2.4s + var(--curve-delay,0ms))}
@keyframes effect-reveal{from{width:0}to{width:545px}}
@keyframes effect-tone{0%,70%{stroke:var(--text)}100%{stroke:currentColor}}
@keyframes effect-label{from{opacity:0}to{opacity:1}}
@media(max-width:900px){.networks .hero.network-hero{padding-top:165px}.networks .network-effect{padding-top:12px}}
@media(prefers-reduced-motion:reduce){.networks .graph-ready .metric-line{animation:none;clip-path:none}.networks .graph-ready .curve-reveal{animation:none;width:545px}.networks .graph-ready .graph-labels,.networks .graph-ready .graph-legend li{animation:none;opacity:1}.networks .metric-curve,.networks .metric-line{transition:none}}

.networks .graph-legend li:nth-child(2){--curve-delay:180ms}
.networks .graph-legend li:nth-child(3){--curve-delay:360ms}

/* Invisible label padding complements the 40px-wide curve hit area. */
.networks .label-hit{fill:transparent;pointer-events:all}
@media(max-width:600px){.networks .label-hit{display:none}}

.networks #voice h2 .grad{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;letter-spacing:-.025em}

/* Small, abstract setup symbols; no labels or illustration cards. */
.networks #how .process-visual{margin-top:auto;padding-top:12px;width:220px;max-width:100%}
.process-visual svg{display:block;width:100%;height:72px}
.process-links{stroke:var(--line-strong);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.process-node{fill:var(--muted)}
.process-muted-nodes{fill:var(--muted);opacity:.35}
.process-match{stroke:var(--muted);stroke-width:1.4;stroke-linecap:round}
.process-bars{fill:var(--muted)}
.process-bars rect:nth-child(odd){opacity:.45}
.process-bars rect:nth-child(2){opacity:.65}
/* Slow repeating gestures, active only while the symbols are visible. */
.process-signal{stroke:var(--muted);stroke-width:1.4;stroke-linecap:round}
.process-signal path{opacity:0;stroke-dasharray:70;stroke-dashoffset:70}
.process-impulse{fill:var(--text);opacity:0}
.process-bars rect{transform-box:fill-box;transform-origin:center bottom}
.process-animated .process-signal path{animation:process-link-cycle 6.8s ease-in-out infinite;animation-delay:var(--phase)}
.process-animated .process-impulse{animation:process-impulse-cycle 6.4s ease-in-out infinite}
.process-animated:has(.process-match) .process-node circle{animation:process-endpoint-cycle 6.4s ease-in-out infinite}
.process-animated:has(.process-match) .process-node circle:last-child{animation-delay:2.8s}
.process-animated .process-bars rect{animation:process-insight-cycle 7.2s ease-in-out infinite}
.process-animated .process-bars rect:nth-child(2){animation-delay:-1.1s}
.process-animated .process-bars rect:nth-child(3){animation-delay:-2.2s}
.process-animated .process-bars rect:nth-child(4){animation-delay:-3.3s}
.process-animated .process-bars rect:nth-child(5){animation-delay:-4.4s}
.process-visual:not(.process-running) *{animation-play-state:paused!important}
@keyframes process-link-cycle{0%,8%{stroke-dashoffset:70;opacity:0}14%{opacity:.7}36%,60%{stroke-dashoffset:0;opacity:.7}78%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes process-impulse-cycle{0%,16%{transform:translateX(0);opacity:0}23%{opacity:.85}64%{transform:translateX(115px);opacity:.85}72%,100%{transform:translateX(115px);opacity:0}}
@keyframes process-endpoint-cycle{0%,12%,55%,100%{opacity:.65}22%,32%{opacity:1}}
@keyframes process-insight-cycle{0%,100%{transform:scaleY(.72)}32%{transform:scaleY(1)}68%{transform:scaleY(.84)}}
@media(max-width:860px){.networks #how .stp p{max-width:55ch}}
@media(prefers-reduced-motion:reduce){.process-visual *{animation:none!important}.process-signal,.process-impulse{display:none}.process-bars rect{transform:none}}

/* Member-provided context stays quiet and readable below the voice comparison. */
.networks .sources{padding-top:40px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.networks .sources p{color:var(--muted);font-size:15px;line-height:1.75;max-width:64ch}
.networks .sources p b{font-weight:600}
.networks .source-groups{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;color:var(--muted);font-size:14px;line-height:1.6}
@media(max-width:760px){.networks .sources{text-align:left;align-items:flex-start;padding-top:32px;gap:16px}.networks .source-groups{display:grid;gap:8px}}