/* Growth Lab website, the 2 November 2026 sections: the hero's building blocks, the index and the five strips.
   Rules: DESIGN_SYSTEM.md. Tokens: tokens.css, plus lime, the third accent from the Figma CI. */
:root { --gl-lime: #ECFF76; }

/* Hero (version 3, approved 2 November 2026): the headline and lead in one column, the value cube on its panel
   with the four building blocks beneath it, AI throughout. The cube loop is extended, not doubled: site.js */
.hero h1 { font-size: clamp(34px, 3.6vw, 50px); line-height: 1.06; max-width: 12em; }
.lead .promise { font-weight: var(--gl-weight-semibold); color: var(--gl-ink); }
.blocks { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--gl-line); }
.blocks svg { display: block; width: 100%; height: auto; overflow: visible; }
.blocks polygon { stroke-linejoin: round; }
.blk { transition: opacity 0.5s var(--gl-ease); }
.building .blk:not(.on) { opacity: 0.28; }
.data .t-top { fill: var(--gl-core-top); } .data .t-left { fill: var(--gl-core-left); } .data .t-right { fill: var(--gl-core-right); }
.proc .t-top { fill: var(--gl-purple-strong); } .proc .t-left { fill: #5340C9; } .proc .t-right { fill: #4433A3; }
.jour .t-top { fill: var(--gl-purple); } .jour .t-left { fill: #6351D3; } .jour .t-right { fill: #5041AB; }
.expe .t-top { fill: var(--gl-purple-soft); } .expe .t-left { fill: #B4AED3; } .expe .t-right { fill: #918CA9; }
.ai-line { fill: none; stroke: var(--gl-purple-strong); stroke-width: 2; stroke-linecap: round; }
.ai-pulse { fill: var(--gl-purple-strong); opacity: 0; }
.blk-lbl { font-family: var(--gl-font); font-size: 15px; font-weight: var(--gl-weight-semibold); fill: var(--gl-ink); text-anchor: middle; }
.lbl-ai { font-family: var(--gl-font); font-size: 15px; font-weight: var(--gl-weight-semibold); fill: var(--gl-purple-strong); letter-spacing: -0.005em; text-anchor: middle; transition: opacity 0.5s; }
.building .lbl-ai:not(.on) { opacity: 0.35; }
@media (max-width: 560px) { .blocks { margin-top: 24px; padding-top: 18px; } .blk-lbl, .lbl-ai { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .blk, .lbl-ai { transition: none; } }

/* The first white section after the strips keeps a hairline above it */
.after-strips .plain-body { border-top: 1px solid var(--gl-line); }
/* The black index */
.index{background:var(--gl-black);color:#fff;padding:clamp(72px,10vw,96px) 0 88px}
.index :focus-visible{outline-color:var(--gl-purple-soft)}
.index h2{display:flex;align-items:center;gap:16px;font-size:clamp(30px,2.9vw,40px);line-height:1.1;letter-spacing:-0.02em;font-weight:600}
.index h2 svg{flex:none;width:36px;height:36px;color:var(--gl-purple)}
.index .index-lede{margin-top:18px;max-width:34em;font-size:clamp(18px,1.5vw,20px);line-height:1.55;color:var(--gl-on-black)}
.menu{margin-top:56px;border-top:1px solid var(--gl-line-on-black)}
.menu li{display:grid;grid-template-columns:72px 260px 1fr;gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--gl-line-on-black)}
.menu a{color:inherit;text-decoration:none}
.menu .n{font-size:20px;font-weight:600;color:var(--gl-purple-soft)}
.menu .name{font-size:26px;line-height:1.2;letter-spacing:-0.02em;font-weight:600;color:#fff}
.menu .what{font-size:18px;line-height:1.5;color:var(--gl-on-black)}
@media (max-width:760px){.menu li{grid-template-columns:48px 1fr;grid-template-areas:"n name" ". what"}.menu .what{grid-area:what}}

/* Strips */
.strip{padding:80px 0}
.strip + .strip .wrap{border-top:1px solid var(--gl-line);padding-top:80px}
.strip + .strip{padding-top:0}
.grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px;align-items:start}
@media (max-width:999px){.grid{grid-template-columns:minmax(0,1fr);row-gap:36px}}
.num{font-size:15px;font-weight:600;color:var(--gl-purple-strong)}
.strip h3{margin-top:10px;font-size:clamp(30px,2.9vw,40px);line-height:1.1;letter-spacing:-0.02em;font-weight:600;text-wrap:balance}
.strip .say{margin-top:20px;font-size:18px;line-height:1.55;color:var(--gl-ink-2);max-width:30em;text-wrap:pretty}
.strip .say strong{color:var(--gl-ink);font-weight:600}
.strip .get{margin-top:20px;font-size:18px;line-height:1.55;color:var(--gl-ink);font-weight:600;max-width:30em;text-wrap:pretty}
.strip .link{display:inline-block;margin-top:24px;font-size:17px;font-weight:500;color:var(--gl-purple-strong);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.strip .link:hover{text-decoration-thickness:2px}
/* Who is behind the score: two cards, as in the carousel */
.cred{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.card{background:#fff;border-radius:14px;padding:16px 18px}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px}
.card-top img.logo-mt{height:20px;width:auto}
.card-top img.logo-cmo{height:34px;width:auto}
.card-top img.face{width:36px;height:36px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.card p{margin-top:12px;font-size:14.5px;line-height:1.45;color:var(--gl-ink-2)}
.card strong{font-weight:600;color:var(--gl-ink)}
@media (max-width:640px){.cred{grid-template-columns:minmax(0,1fr)}}
.strip .proof{margin-top:16px;font-size:13px;line-height:1.5;color:var(--gl-ink-3);max-width:34em}

/* The Score panel: four views in one frame, a carousel with paddles and dots at the foot */
.panel{border-radius:28px;padding:8px}
.lime{background:var(--gl-lime)}
.sc-views{display:grid;padding:28px 28px 10px;touch-action:pan-y}
.sc-view{grid-area:1 / 1;display:grid;gap:20px;min-width:0;align-content:start}
.sc-view[data-active="false"]{visibility:hidden}
.sc-view[data-active="true"]{animation:sc-in .28s var(--gl-ease)}
@keyframes sc-in{from{opacity:0}}
.sc-title{font-size:22px;line-height:1.25;letter-spacing:-0.015em;font-weight:600;color:var(--gl-ink);text-wrap:balance}
.sc-lede{font-size:16px;line-height:1.5;color:var(--gl-ink-2);text-wrap:pretty;max-width:36em}
.sc-credit{font-size:13px;line-height:1.5;color:var(--gl-ink-2)}
.sc-nav{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:12px;padding:12px 20px 20px}
.paddle{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--gl-ink);cursor:pointer;transition:background-color .2s,opacity .2s}
.paddle:hover:not([disabled]){background:var(--gl-purple);color:#fff}
.paddle[disabled]{cursor:default;opacity:.35}
.paddle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dots{display:flex;justify-content:center;align-items:center}
.dot{position:relative;width:24px;height:24px;padding:0;border:0;border-radius:999px;background:transparent;cursor:pointer;transition:width .28s var(--gl-ease)}
.dot::before{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:999px;background:rgba(17,17,17,.28);transform:translate(-50%,-50%);transition:width .28s var(--gl-ease),background-color .2s}
.dot[aria-current="true"]{width:44px;cursor:default}
.dot[aria-current="true"]::before{width:28px;background:var(--gl-purple)}
.dot:hover:not([aria-current="true"])::before{background:rgba(17,17,17,.5)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media (max-width:640px){.sc-views{padding:20px 16px 6px}.sc-nav{padding:12px 14px 16px}}

/* View 1: the gauge */
.gauge{display:grid;grid-template-columns:minmax(0,1fr) 236px;column-gap:28px;align-items:center;padding:4px 0}
@media (max-width:640px){.gauge{grid-template-columns:minmax(0,1fr)}}
.gauge svg{display:block;width:100%;max-width:540px;height:auto;overflow:visible;margin:0 auto}
.g-track{fill:none;stroke:#111;stroke-opacity:.12;stroke-width:28}
.g-you{fill:none;stroke:var(--gl-purple);stroke-width:28;stroke-dasharray:471.24;stroke-dashoffset:471.24}
.g-best{fill:none;stroke:var(--gl-coral);stroke-width:28;stroke-dasharray:471.24;stroke-dashoffset:471.24}
.g-tick{stroke:#111;stroke-width:2.5;stroke-linecap:round}
.g-big{font-family:"Geist",Arial,sans-serif;font-size:80px;font-weight:600;letter-spacing:-0.03em;fill:#111;text-anchor:middle}
.g-sub{font-family:"Geist",Arial,sans-serif;font-size:15px;font-weight:500;fill:#111;text-anchor:middle}
.g-lbl{font-family:"Geist",Arial,sans-serif;font-size:14px;font-weight:600;fill:#111}
.g-lbl.small{font-weight:500;fill:var(--gl-ink-2);font-size:13px}
.key{display:grid;gap:14px}
.key li{display:flex;align-items:flex-start;gap:12px;font-size:17px;line-height:1.35;font-weight:500;color:#111}
.key i{flex:none;margin-top:5px;width:12px;height:12px;border-radius:3px;background:var(--gl-purple)}
.key .b i{background:var(--gl-coral)} .key .a i{background:#111}
.key strong{font-weight:600}
.is-live .g-you{transition:stroke-dashoffset .9s var(--gl-ease)}
.is-live .g-best{transition:stroke-dashoffset .6s var(--gl-ease) .9s}
.is-live.is-on .g-you{stroke-dashoffset:221.5}
.is-live.is-on .g-best{stroke-dashoffset:164.9}

/* View 2: the matrix. Four positions, each with its icon tile in the matrix colour, one line each */
.qm{display:grid;gap:10px;margin-top:-4px}
.qm-plot{position:relative;aspect-ratio:1.9 / 1;background:#fff;border-radius:14px;overflow:hidden}
.qm-goal{position:absolute;left:50%;right:0;top:0;bottom:50%;background:rgba(217,211,255,.4)}
.qm-v{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--gl-line)}
.qm-h{position:absolute;top:50%;left:0;right:0;height:1px;background:var(--gl-line)}
.q{position:absolute;width:44%;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:10px;align-items:start}
.q .qi{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#fff}
.q .qi svg{width:17px;height:17px}
.q b{display:block;font-size:14px;font-weight:600;color:var(--gl-ink);line-height:1.3}
.q span{display:block;font-size:12.5px;line-height:1.4;color:var(--gl-ink-2);margin-top:2px}
.q-ob{top:14px;left:14px} .q-ph{top:14px;right:14px} .q-ub{bottom:14px;left:14px} .q-pr{bottom:14px;right:14px}
.q-ph,.q-pr{grid-template-columns:minmax(0,1fr) 30px;text-align:right}
.q-ph .qi,.q-pr .qi{order:2}
.c-ob{background:var(--gl-amber);color:#111!important} .c-ph{background:var(--gl-purple)} .c-ub{background:var(--gl-ink-3)} .c-pr{background:var(--gl-coral)}
.qm-dot{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;opacity:.45}
.qm-dot.ob{background:var(--gl-amber);opacity:.85} .qm-dot.ph{background:var(--gl-purple);opacity:1} .qm-dot.ub{background:var(--gl-ink-3)} .qm-dot.pr{background:var(--gl-coral);opacity:.7}
.qm-you{position:absolute;left:31%;top:64%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--gl-field-line);font-size:13px;font-weight:600;color:var(--gl-ink);white-space:nowrap}
.qm-you i{width:12px;height:12px;border-radius:50%;background:var(--gl-coral)}
.qm-path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.qm-path path{fill:none;stroke:var(--gl-coral);stroke-width:1.5;stroke-dasharray:4 5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.qm-path polygon{fill:var(--gl-coral)}
.qm-axes{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--gl-ink)}
.qm-axes span{display:flex;align-items:center;gap:6px}
.qm-axes svg{width:12px;height:12px;fill:var(--gl-purple)}

/* View 3: fix these first */
.sv{display:grid;gap:18px}
.sv-head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
.sv-stat{display:flex;flex-direction:column;gap:2px;font-size:15px;line-height:1.3;font-weight:500;color:var(--gl-ink-2)}
.sv-label{display:inline-flex;align-items:center;gap:8px}
.sv-label::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--gl-purple)}
.sv-goal .sv-label::before{background:var(--gl-coral)}
.sv-value strong{font-size:36px;line-height:1.15;letter-spacing:-0.02em;font-weight:700;color:var(--gl-ink)}
.sv-meter{position:relative;height:12px;border-radius:999px;background:rgba(17,17,17,.12);overflow:hidden}
.sv-meter span{position:absolute;top:0;bottom:0}
.sv-now{left:0;width:53%;background:var(--gl-purple)}
.sv-gain{left:53%;width:12%;background:var(--gl-coral)}
.sv-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:4px}
.sv-col{background:#fff;border-radius:14px;padding:14px 16px}
.sv-col h4{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:2px solid var(--acc);font-size:15px;font-weight:600}
.sv-col h4 small{font-size:14px;font-weight:600}
.sv-fix{--acc:var(--gl-coral)} .sv-strong{--acc:var(--gl-purple)}
.sv-col li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--gl-line);font-size:15px;font-weight:600}
.sv-col li:first-child{border-top:0}
.pts{flex:none;min-width:38px;text-align:center;padding:3px 8px;border-radius:999px;font-size:13px;font-weight:700;background:#FFDCDC}
.sv-strong .pts{background:#E4E0FF}
@media (max-width:640px){.sv-cols,.sv-head{grid-template-columns:minmax(0,1fr)}}

/* View 4: what you get, one list in one card, an icon tile per line as in the carousel */
.gets{background:#fff;border-radius:14px;padding:6px 20px}
.gets li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;align-items:center;padding:12px 0;border-top:1px solid var(--gl-line)}
.gets li:first-child{border-top:0}
.gets .tile{display:grid;place-items:center;width:44px;height:44px;border-radius:12px}
.gets .tile svg{width:22px;height:22px}
.t-purple{background:var(--gl-purple);color:#fff} .t-coral{background:var(--gl-coral);color:#fff}
.gets .tile svg *{stroke-width:1.9}
.gets b{display:block;font-size:17px;font-weight:600;color:var(--gl-ink);line-height:1.3}
.gets span{display:block;font-size:14px;line-height:1.45;color:var(--gl-ink-2);margin-top:2px}

/* Strip 2: the stack on a purple panel. White boxes, white lines, the gaps in lime until the reader switches the value on */
.stack{padding:28px 28px 20px}
.stack-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.st-title{font-size:20px;line-height:1.25;letter-spacing:-0.015em;font-weight:600;color:#fff;margin:0}
.seg{display:inline-flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.18)}
.seg-btn{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 14px;border:0;border-radius:999px;background:transparent;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s,color .2s}
.seg-btn::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gl-amber)}
#seg-fixed::before{background:var(--gl-lime)}
.seg-btn:hover{background:rgba(255,255,255,.14)}
.seg-btn[aria-pressed="true"]{background:#fff;color:#111;cursor:default}
.seg-btn:focus-visible{outline-color:#fff}
.stack-svg{display:block;width:100%;height:auto;overflow:visible;font-family:"Geist",Arial,sans-serif}
.stack-svg text{text-anchor:middle;fill:#111}
.stack-svg .src rect,.stack-svg .chan rect{fill:#fff}
.stack-svg .src text{font-size:12.5px;font-weight:600}
.stack-svg .chan text{font-size:11.5px;font-weight:600}
.stack-svg .box{fill:#fff}
.stack-svg .box.dark{fill:#111}
.stack-svg .t1{font-size:14px;font-weight:600}
.stack-svg .t2{font-size:11.5px;fill:var(--gl-ink-2)}
.stack-svg .onblack{fill:#fff}
.stack-svg .chips rect{fill:var(--gl-purple-soft)}
.stack-svg .src text{text-anchor:start}
.stack-svg .ico{color:var(--gl-ink);overflow:visible}
.stack-svg .tile-data{fill:var(--gl-purple-soft)} .stack-svg .tile-ico-data{color:var(--gl-purple-strong)}
.stack-svg .tile-decide{fill:var(--gl-coral)} .stack-svg .tile-ico-white{color:#fff}
.stack-svg .tile-engage{fill:var(--gl-lime)}
.stack-svg .lime-ico{color:var(--gl-ink)}
.stack-svg .onblack-ico{color:#fff}
.stack-svg .frame{fill:rgba(255,255,255,.12);stroke:#fff;stroke-width:1.2}
.stack-svg .frame-lbl{font-size:11px;font-weight:600;fill:#fff;text-anchor:start}
.stack-svg #decisions .tile-decide{transition:opacity .28s var(--gl-ease);opacity:.45}
.stack.is-on #decisions .tile-decide{opacity:1}
.stack-svg .chips text{font-size:11px;font-weight:600}
.stack-svg .lines path,.stack-svg .fixed path,.stack-svg .today .gap{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.stack-svg .today .gap{stroke:var(--gl-amber);stroke-dasharray:3 5}
.stack-svg .today .pill{fill:var(--gl-amber)}
.stack-svg .today .pt{font-size:11px;font-weight:600}
.stack-svg #decisions .box{fill:rgba(255,255,255,.45)}
.stack-svg #decisions text{fill:#111;opacity:.7}
.stack-svg .today,.stack-svg #decisions .box,.stack-svg #decisions text{transition:opacity .28s var(--gl-ease)}
.stack.is-on .today{opacity:0}
/* first view: the flow draws in, left to right, then the gaps appear */
.stack-svg .lines path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--gl-ease)}
.stack-svg .lines path:nth-child(1),.stack-svg .lines path:nth-child(2),.stack-svg .lines path:nth-child(3){transition-delay:.1s}
.stack-svg .lines path:nth-child(5){transition-delay:.3s}
.stack-svg .lines path:nth-child(4){transition-delay:.5s}
.stack-svg .lines path:nth-child(6){transition-delay:.8s}
.stack-svg .lines path:nth-child(7){transition-delay:1.05s}
.stack.is-seen .lines path{stroke-dashoffset:0}
.stack.is-drawn .arr{marker-end:url(#ah)}
.stack.is-drawn .arr-amber{marker-end:url(#ah-amber)}
.stack-svg .today .gp{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.8);transition:opacity .35s var(--gl-ease),transform .35s var(--gl-ease)}
.stack-svg .today .gp:nth-child(2){transition-delay:.5s} .stack-svg .today .gp:nth-child(3){transition-delay:1s}
.stack.is-drawn .today .gp{opacity:1;transform:none}
/* switched on: the three connections draw, one after another */
.stack-svg .fixed path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .72s var(--gl-ease)}
.stack-svg .fixed path:nth-child(2){transition-delay:.15s}
.stack-svg .fixed path:nth-child(3){transition-delay:.3s}
.stack.is-on .fixed path{stroke-dashoffset:0}
.stack:not(.is-on) .fixed path{transition-duration:.25s;transition-delay:0s}
.stack:not(.is-on) .fixed .arr{marker-end:none}
.stack-svg .pulse{fill:#fff;opacity:0}
.stack-svg .pulse.go{opacity:1}
.stack.is-on #decisions .box{fill:#fff}
.stack.is-on #decisions text{opacity:1}
.caption{margin-top:14px;font-size:13px;line-height:1.5;color:var(--gl-ink-3)}
@media (prefers-reduced-motion:reduce){.stack-svg .today,.stack-svg #decisions .box,.stack-svg #decisions text,.stack-svg .lines path,.stack-svg .fixed path,.stack-svg .today .gp,.seg-btn{transition:none}}

.purple{background:var(--gl-purple);color:#fff}

/* Strip 3: the lifetime value map on a coral panel. Ink text on coral, white surfaces, one moment picked at a time */
.coral{background:var(--gl-coral)}
.grow{padding:28px 28px 20px}
.grow-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.grow-head .st-title{color:#111}
.grow-key{display:flex;gap:16px;font-size:13px;font-weight:600;color:#111}
.grow-key span{display:inline-flex;align-items:center;gap:7px}
.grow-key i{width:18px;height:0;border-top:2.4px solid #fff;border-radius:2px}
.grow-key .k-a i{border-top:2px dashed #111}
.moments{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin-top:20px;padding:4px;border-radius:999px;background:rgba(255,255,255,.22)}
.mo{min-height:36px;padding:6px 4px;border:0;border-radius:999px;background:transparent;color:#111;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s}
.mo:hover{background:rgba(255,255,255,.3)}
.mo[aria-pressed="true"]{background:var(--gl-lime);cursor:default}
.mo:focus-visible{outline-color:#111}
.lv{display:block;width:100%;height:auto;overflow:visible;margin-top:6px;font-family:"Geist",Arial,sans-serif}
.lv text{fill:#111;font-size:12.5px;font-weight:600}
.lv .axis{stroke:#111;stroke-opacity:.35;stroke-width:1}
.lv .fill{fill:var(--gl-lime);fill-opacity:.32;transition:fill-opacity .5s var(--gl-ease) 1.3s;fill-opacity:0}
.lv .cb{fill:none;stroke:var(--gl-lime);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.lv .ca{fill:none;stroke:#111;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4 5;opacity:.85}
.lv .cb,.lv .ca{stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--gl-ease)}
.lv .ca{stroke-dasharray:1}
.lv .cb{transition-delay:.25s}
.grow.is-seen .lv .cb,.grow.is-seen .lv .ca{stroke-dashoffset:0}
.grow.is-seen .lv .ca{stroke-dasharray:4 5}
.grow.is-seen .lv .fill{fill-opacity:.32}
.lv .db{fill:var(--gl-lime);stroke:var(--gl-coral);stroke-width:1.4} .lv .da{fill:#111}
.lv .arrow{fill:none;stroke:#111;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.lv .dots,.lv .ends{opacity:0;transition:opacity .4s var(--gl-ease) 1.2s}
.grow.is-seen .lv .dots,.grow.is-seen .lv .ends{opacity:1}
.lv .pick{opacity:0;transition:opacity .28s var(--gl-ease)}
.grow.is-seen .lv .pick.is-active{opacity:1;transition-delay:1.5s}
.grow.is-drawn .lv .pick.is-active{transition-delay:0s}
.lv .pick line{stroke:var(--gl-lime);stroke-width:1.6}
.lv .pick .rb{fill:none;stroke:var(--gl-lime);stroke-width:2.4}
.lv .pick .ra{fill:none;stroke:#111;stroke-width:1.6}
.lv .pick .gap{stroke:#111;stroke-width:1.2;stroke-dasharray:2 3}
.lv .lbl{font-size:12px}
.mcards{display:grid;margin-top:18px}
.mcard{grid-area:1 / 1;background:#fff;border-radius:14px;padding:16px 20px 18px;min-width:0}
.mcard[data-active="false"]{visibility:hidden}
.mcard[data-active="true"]{animation:sc-in .28s var(--gl-ease)}
.mcard-top{display:flex;align-items:baseline;gap:10px 14px;flex-wrap:wrap}
.mcard-top b{font-size:18px;font-weight:600;color:var(--gl-ink)}
.mcard-top small{font-size:13px;font-weight:500;color:var(--gl-ink-3)}
.mcard-top span{flex:1 1 100%;font-size:15px;line-height:1.45;color:var(--gl-ink-2)}
.mcard-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin-top:12px;padding-top:12px;border-top:1px solid var(--gl-line)}
.mcard-two h5{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--gl-ink-3)}
.mcard-two h5::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gl-amber)}
.mcard-two .run h5::before{background:var(--gl-purple)}
.mcard-two p{margin-top:4px;font-size:14.5px;line-height:1.45;color:var(--gl-ink)}
@media (max-width:640px){.grow{padding:20px 16px 16px}.moments{grid-template-columns:repeat(3,minmax(0,1fr));border-radius:20px}.mo{font-size:13px}.mcard-two{grid-template-columns:minmax(0,1fr)}.lv .pick line:first-child{display:none}}
@media (prefers-reduced-motion:reduce){.lv .cb,.lv .ca,.lv .fill,.lv .dots,.lv .ends,.lv .pick,.mo{transition:none}.mcard[data-active="true"]{animation:none}}


/* Strip 4: the campaign line on a light panel. White stations, a track beneath, the token runs once when first seen */
.light{background:var(--gl-panel)}
.auto{padding:28px 28px 24px}
.auto-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.who{display:flex;gap:16px;margin-top:8px;font-size:13px;font-weight:600;color:var(--gl-ink-2)}
.who span{display:inline-flex;align-items:center;gap:7px}
.who i{width:9px;height:9px;border-radius:50%;background:var(--gl-coral)}
.who .w-agent i{background:var(--gl-purple)} .who .w-both i{background:var(--gl-lime);box-shadow:0 0 0 1px rgba(17,17,17,.25)}
.auto-head .st-title{color:#111}
.replay{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 14px 6px 12px;border:0;border-radius:999px;background:#111;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s,opacity .2s}
.replay:hover{background:var(--gl-purple-strong)}
.replay[disabled]{opacity:.4;cursor:default}
.replay svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stations{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:18px}
.stn{position:relative;background:#fff;border-radius:12px;padding:12px 10px 14px;min-width:0;box-shadow:0 0 0 0 var(--gl-purple-strong);transition:box-shadow .25s var(--gl-ease)}
.stn.is-live{box-shadow:0 0 0 2px var(--gl-purple-strong)}
.stn.team.is-live{box-shadow:0 0 0 2px var(--gl-coral)}
.stn .tile{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--gl-purple);color:#fff}
.stn.team .tile{background:var(--gl-coral)}
.stn.both .tile{background:var(--gl-lime);color:#111}
.stn .tile svg{width:16px;height:16px}
.stn b{display:block;margin-top:10px;font-size:14px;line-height:1.25;font-weight:600;color:var(--gl-ink);text-wrap:balance}
.stn span{display:block;margin-top:4px;font-size:12.5px;line-height:1.35;color:var(--gl-ink-2);text-wrap:pretty}
.track{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;height:28px;margin:6px 0 0}
.track::before{content:"";position:absolute;left:calc((100% - 40px) / 12);right:calc((100% - 40px) / 12);top:13px;height:2px;background:rgba(17,17,17,.14);border-radius:1px}
.track i{position:relative;justify-self:center;top:10px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px rgba(17,17,17,.3)}
.token{position:absolute;top:6px;left:0;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--gl-purple-strong);box-shadow:0 0 0 3px #fff;opacity:0;transition:left .4s var(--gl-ease),opacity .25s var(--gl-ease)}
.auto.is-running .token{opacity:1}
.bars{display:grid;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--gl-line)}
.bar{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:14px;font-size:14px;font-weight:600;color:var(--gl-ink)}
.bar em{font-style:normal;color:var(--gl-ink-2);font-weight:500}
.bar i{display:block;height:12px;border-radius:999px;background:var(--gl-amber);width:0;transition:width 1.4s var(--gl-ease)}
.bar.fast i{background:var(--gl-lime);box-shadow:inset 0 0 0 1px rgba(17,17,17,.12);transition-duration:.5s}
.auto.is-timed .bar.slow i{width:100%}
.auto.is-timed .bar.fast i{width:22%;transition-delay:1.5s}
@media (max-width:760px){.stations{grid-template-columns:repeat(3,minmax(0,1fr))}.track{display:none}.bar{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.auto{padding:20px 16px 18px}}
@media (prefers-reduced-motion:reduce){.stn,.token,.bar i,.replay{transition:none}}


/* Strip 5: the decision board on a black panel. Four columns split by hairlines, the items land once when first seen */
.black{background:var(--gl-black);color:#fff}
.board{padding:28px 28px 24px}
.board .st-title{color:#fff}
.board-sub{margin-top:6px;font-size:14px;line-height:1.5;color:var(--gl-on-black)}
.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 20px;margin-top:22px}
.col{min-width:0;padding-left:16px;border-left:1px solid var(--gl-line-on-black)}
.col:first-child{padding-left:0;border-left:0}
.col h5{display:inline-flex;align-items:center;min-height:32px;padding:5px 13px;border-radius:999px;font-size:14px;font-weight:600;color:#111;white-space:nowrap}
.c-invest h5{background:var(--gl-purple);color:#fff} .c-on h5{background:var(--gl-lime)} .c-fix h5{background:var(--gl-amber)} .c-stop h5{background:var(--gl-coral);color:#fff}
.col ul{margin-top:16px;border-top:1px solid var(--gl-line-on-black)}
.col li{padding:12px 0;border-bottom:1px solid var(--gl-line-on-black);opacity:0;transform:translateY(8px);transition:opacity .4s var(--gl-ease),transform .4s var(--gl-ease)}
.board.is-seen .col li{opacity:1;transform:none}
.col li b{display:block;font-size:14px;line-height:1.3;font-weight:600;color:#fff;transition:color .35s var(--gl-ease)}
.c-invest li.is-hot b{color:var(--gl-purple-soft)} .c-on li.is-hot b{color:var(--gl-lime)} .c-fix li.is-hot b{color:var(--gl-amber)} .c-stop li.is-hot b{color:var(--gl-coral)}
.col li span{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:var(--gl-on-black)}
.col h5{opacity:0;transition:opacity .35s var(--gl-ease)}
.board.is-seen .col h5{opacity:1}
@media (max-width:999px){.cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}.col:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:640px){.board{padding:20px 16px 18px}.cols{grid-template-columns:minmax(0,1fr)}.col{padding-left:0;border-left:0}}
@media (prefers-reduced-motion:reduce){.col li,.col h5{transition:none}}

@media (prefers-reduced-motion:reduce){.paddle,.dot{transition:none}.sc-view[data-active="true"]{animation:none}.is-live .g-you,.is-live .g-best{transition:none}}