/* ============================================================
   HOW IT WORKS — dark terminal world · copy left, living scene right
   ============================================================ */
.s-howdark{position:relative;background:radial-gradient(ellipse 80% 50% at 50% 0%,#0b1a3e 0%,#070d22 45%,#040818 100%)}
.how{position:relative;max-width:1240px;margin:0 auto;padding:96px 24px 110px;overflow:hidden}
#howRain{position:absolute;inset:0;z-index:0;pointer-events:none}
.hw-scan{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(148,184,255,.025) 0 1px,transparent 1px 3px)}
.how > *{position:relative;z-index:1}

/* inverted glitch: light teeth biting into the dark */
.tglitch.inv .t1{background:repeating-linear-gradient(90deg,
    #e9f1fe 0 26px,transparent 26px 27px,
    #e9f1fe 27px 41px,transparent 41px 43px,
    #dbe9fd 43px 78px,transparent 78px 80px,
    #e9f1fe 80px 122px,transparent 122px 125px)}
.tglitch.inv .t2{background:repeating-linear-gradient(90deg,
    transparent 0 52px,#e9f1fe 52px 66px,transparent 66px 140px,#d7e6fd 140px 190px,transparent 190px 260px)}
.tglitch.inv .t4{background:repeating-linear-gradient(90deg,transparent 0 80px,rgba(4,8,24,.9) 80px 112px,transparent 112px 150px,rgba(125,211,252,.7) 150px 178px,transparent 178px 300px)}
.tglitch.inv b{color:rgba(125,211,252,.5)}

/* shell */
.hw-shell{display:flex;align-items:center;gap:2px;margin:-52px 0 52px;padding:0 2px 14px;
  font-family:ui-monospace,Menlo,monospace;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  border-bottom:1px solid rgba(96,165,250,.22);
  mask-image:linear-gradient(90deg,#000 82%,transparent);
  -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent)}
.hw-shell .hu{color:#5eead4}
.hw-shell .hs{color:#5f7cae}
.hw-shell .hp{color:#9fc4f8}
.hw-caret{display:inline-block;width:8px;height:15px;margin-left:9px;background:#38bdf8;
  box-shadow:0 0 10px rgba(56,189,248,.7);animation:caretBlink 1.1s steps(1) infinite}
.hw-shell .hr{margin-left:auto;font-size:10.5px;color:rgba(125,211,252,.35);letter-spacing:.14em}

.how-head{text-align:center;margin-bottom:70px}
.hw-h2{font-family:var(--font-d);font-size:clamp(30px,3.4vw,44px);font-weight:800;letter-spacing:-.024em;color:#fff}
.hw-h2 .rot{font-size:clamp(24px,2.9vw,38px)}
.hw-sub{margin:16px auto 0;max-width:560px;font-size:16px;line-height:1.6;color:#94a3b8}

/* step rows */
.hwstep{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center;
  padding:44px 0;opacity:0;transform:translateY(26px);
  transition:opacity .6s ease,transform .65s var(--ease-pop)}
.hwstep.live{opacity:1;transform:none}
.hwstep + .hwstep{border-top:1px solid rgba(96,165,250,.1)}

.hw-cmd{font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:700;color:#9fc4f8;margin-bottom:12px}
.hw-cmd .pr{color:#38bdf8;font-weight:800}
.hw-ct{display:inline-block;width:7px;height:13px;margin-left:3px;vertical-align:-2px;background:#38bdf8;
  box-shadow:0 0 8px rgba(56,189,248,.6);animation:caretBlink 1.1s steps(1) infinite}
.hw-copy h3{font-family:var(--font-d);font-size:clamp(24px,2.3vw,32px);font-weight:800;letter-spacing:-.016em;color:#fff;margin-bottom:18px}
.hw-bullets{list-style:none;display:flex;flex-direction:column;gap:13px}
.hw-bullets li{display:flex;gap:12px;font-size:15px;line-height:1.65;color:#a9bcd8;
  opacity:0;transform:translateX(-10px);transition:opacity .45s ease,transform .5s var(--ease-pop)}
.hwstep.live .hw-bullets li{opacity:1;transform:none}
.hwstep.live .hw-bullets li:nth-child(1){transition-delay:.25s}
.hwstep.live .hw-bullets li:nth-child(2){transition-delay:.45s}
.hwstep.live .hw-bullets li:nth-child(3){transition-delay:.65s}
.hw-bullets i{font-style:normal;color:#38bdf8;font-family:ui-monospace,Menlo,monospace;font-weight:800;
  text-shadow:0 0 10px rgba(56,189,248,.6)}
.hw-bullets b{color:#fff}

/* ---------- scenes (right) ---------- */
.hw-scene{position:relative;min-height:340px;display:flex;align-items:center;justify-content:center}
.sc{position:relative;width:100%;max-width:470px}
.sc-ai{position:absolute;top:-26px;right:-8px;z-index:3;width:54px;height:54px;border-radius:44% 56% 50% 50%/52% 46% 54% 48%;
  display:grid;place-items:center;
  background:linear-gradient(150deg,#10284d,#091a33);
  border:1px solid rgba(96,165,250,.45);
  box-shadow:inset 0 1px 0 rgba(148,184,255,.2),0 0 26px -4px rgba(56,189,248,.55);
  animation:aiBob2 5s ease-in-out infinite alternate}
@keyframes aiBob2{from{transform:translateY(-4px) rotate(-2deg)}to{transform:translateY(4px) rotate(2deg)}}
.sc-ai img{width:24px;height:24px;filter:drop-shadow(0 0 8px rgba(56,189,248,.5))}
.sc-ai::after{content:"";position:absolute;inset:-7px;border-radius:inherit;border:1px solid rgba(56,189,248,.25);
  animation:aiPing 3s ease-out infinite}
.sc-ai.duo{width:auto;height:auto;border-radius:16px;padding:8px 10px;display:flex;gap:10px}
.sc-ai.duo img{width:22px;height:22px}

/* scene 1: priority lists build */
.sc1 .sc-list{margin-bottom:14px}
.sc-tag{display:inline-flex;align-items:center;gap:7px;margin-bottom:9px;
  font-family:ui-monospace,Menlo,monospace;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7dd3fc}
.sc-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#38bdf8;box-shadow:0 0 9px #38bdf8}
.sc-tag.t2{color:#5eead4}
.sc-tag.t2::before{background:#34d399;box-shadow:0 0 9px #34d399}
.sc-rows{display:flex;flex-direction:column;gap:8px;min-height:44px}
.scrow{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#cbd5e1;padding:9px 13px;border-radius:11px;
  background:linear-gradient(180deg,rgba(30,58,138,.24),rgba(10,19,42,.66));
  border:1px solid rgba(96,165,250,.22);
  box-shadow:0 14px 30px -16px rgba(0,0,0,.7);
  opacity:0;transform:translateX(-12px)}
.scrow.in{animation:rowIn2 .45s var(--ease-pop) forwards}
@keyframes rowIn2{to{opacity:1;transform:none}}
.scrow i{font-style:normal;flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--cy-hot);box-shadow:0 0 7px var(--cy-hot)}
.sc1 .sc-list:nth-child(3) .scrow i{background:#34d399;box-shadow:0 0 7px rgba(52,211,153,.8)}
.scrow b{color:#fff;font-weight:700}
.scrow .sm{margin-left:auto;font-family:ui-monospace,Menlo,monospace;font-size:9.5px;color:#64748b;white-space:nowrap}
.sc-verify{display:inline-flex;align-items:center;gap:9px;font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:700;
  color:#5eead4;padding:8px 14px;border-radius:9px;
  background:rgba(16,64,50,.45);border:1px solid rgba(52,211,153,.4);
  opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .45s var(--ease-pop)}
.sc-verify.in{opacity:1;transform:none}
.sc-verify b{color:#34d399}

/* scene 2: the outreach */
.sc-mail{position:relative;padding:4px 2px}
.m-to{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:#7ea2d4;margin-bottom:8px}
.m-to b{color:#dbeafe;background:rgba(59,130,246,.14);border:1px solid rgba(96,165,250,.3);
  border-radius:999px;padding:3px 12px;font-weight:600;margin-left:5px}
.m-sub{font-family:var(--font-d);font-size:18px;font-weight:800;color:#fff;min-height:24px;
  border-top:1px solid rgba(96,165,250,.18);padding-top:9px;
  mask-image:linear-gradient(90deg,#000 85%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent)}
.m-line{font-size:13px;color:#a9bcd8;line-height:1.6;min-height:40px;padding:5px 0;max-width:54ch}
.m-artwrap{position:relative;height:200px;border-radius:14px;overflow:hidden;margin:4px 0 10px;
  border:1px solid rgba(96,165,250,.24);
  box-shadow:0 26px 55px -24px rgba(0,0,0,.85),0 10px 36px -12px rgba(37,99,235,.35)}
.sa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);
  transition:opacity .45s ease,transform .8s var(--ease-pop)}
.sa.show{opacity:1;transform:scale(1)}
.sa.a-merch{object-position:center 28%}
.m-scan2{position:absolute;left:0;right:0;top:-14%;height:12%;opacity:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(125,211,252,.4),transparent)}
.m-scan2.go{animation:mockScan2 1.2s cubic-bezier(.3,.6,.3,1) forwards}
@keyframes mockScan2{0%{opacity:1;top:-14%}95%{opacity:1}100%{opacity:0;top:100%}}
.m-foot{display:flex;align-items:center;gap:12px}
.m-send{display:inline-flex;align-items:center;padding:8px 20px;border-radius:11px;font-size:12.5px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#38bdf8,#1d4ed8);
  box-shadow:0 10px 24px -8px rgba(37,99,235,.7),inset 0 1px 0 rgba(255,255,255,.3)}
.m-sent{font-size:11.5px;font-weight:800;color:#5eead4;opacity:0;transform:translateY(4px);
  transition:opacity .3s ease,transform .35s var(--ease-pop)}
.m-sent.in{opacity:1;transform:none}

/* scene 3: bookings land */
.sc-reply{min-height:38px;margin-bottom:14px}
.sc-reply span{display:inline-block;font-size:13px;color:#dbeafe;padding:9px 15px;border-radius:13px 13px 13px 4px;
  background:linear-gradient(180deg,rgba(30,58,138,.35),rgba(10,19,42,.7));
  border:1px solid rgba(96,165,250,.3);
  opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .4s var(--ease-pop)}
.sc-reply.in span{opacity:1;transform:none}
.sc-week{display:flex;flex-direction:column;gap:9px;min-height:150px}
.sc-slot{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;
  background:linear-gradient(180deg,rgba(30,58,138,.24),rgba(10,19,42,.66));
  border:1px solid rgba(96,165,250,.22);
  box-shadow:0 14px 30px -16px rgba(0,0,0,.7);
  opacity:0;transform:translateY(10px) scale(.97)}
.sc-slot.in{animation:slotIn .5s cubic-bezier(.3,1.3,.4,1) forwards}
@keyframes slotIn{to{opacity:1;transform:none}}
.sc-slot .d{font-family:ui-monospace,Menlo,monospace;font-size:10px;font-weight:800;letter-spacing:.12em;color:#7dd3fc;
  padding:7px 9px;border-radius:8px;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.32)}
.sc-slot .t{display:flex;flex-direction:column;gap:1px}
.sc-slot .t b{font-size:12.5px;color:#fff;font-weight:700}
.sc-slot .t span{font-size:10.5px;color:#8aa5cc}
.sc-slot .ok{margin-left:auto;font-size:10px;font-weight:800;color:#5eead4}
.sc-won{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-family:var(--font-d);font-size:15px;font-weight:800;color:#fff;
  padding:10px 16px;border-radius:12px;
  background:linear-gradient(180deg,rgba(6,60,44,.55),rgba(5,32,26,.65));
  border:1px solid rgba(52,211,153,.45);
  box-shadow:0 0 30px -8px rgba(16,185,129,.5);
  opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .45s var(--ease-pop)}
.sc-won.in{opacity:1;transform:none}
.sc-won b{font-family:ui-monospace,Menlo,monospace;font-size:18px;color:#34d399;text-shadow:0 0 16px rgba(52,211,153,.6);
  font-variant-numeric:tabular-nums}

.how-cta{text-align:center;margin-top:40px}

@media (max-width:960px){
  .hwstep{grid-template-columns:1fr;gap:30px}
  .hw-scene{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .hwstep,.hw-bullets li{opacity:1!important;transform:none!important;transition:none}
  .scrow,.sc-slot{opacity:1;transform:none;animation:none}
  .sc-verify,.m-sent,.sc-won,.sc-reply span{opacity:1;transform:none}
  .sc-ai{animation:none}
  .hw-caret,.hw-ct{animation:none}
}

/* ============================================================
   CINEMA LAYER
   ============================================================ */
/* ghost step digits floating behind each scene */
.hwstep{position:relative}
.hwstep::before{content:"0" attr(data-step);position:absolute;right:-10px;top:50%;transform:translateY(-50%);z-index:0;
  font-family:ui-monospace,Menlo,monospace;font-size:clamp(120px,14vw,190px);font-weight:800;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(96,165,250,.14);
  pointer-events:none;user-select:none;
  animation:ghostDrift 9s ease-in-out infinite alternate}
.hwstep:nth-child(odd)::before{animation-delay:-4s}
@keyframes ghostDrift{from{transform:translateY(-54%)}to{transform:translateY(-46%)}}
.hwstep.live::before{-webkit-text-stroke-color:rgba(96,165,250,.22);
  text-shadow:0 0 60px rgba(37,99,235,.12)}
.hw-scene{z-index:1}

/* pipeline spine: one machine, data flowing through all steps */
.how-steps-spine{position:absolute;left:50%;top:340px;bottom:200px;width:2px;z-index:0;
  background:rgba(96,165,250,.08);overflow:hidden}
.how-steps-spine::after{content:"";position:absolute;left:0;right:0;top:-15%;height:15%;
  background:linear-gradient(180deg,transparent,#38bdf8,transparent);
  box-shadow:0 0 12px rgba(56,189,248,.7);
  animation:spineFlow 4.5s cubic-bezier(.4,0,.6,1) infinite}
@keyframes spineFlow{to{top:110%}}

.sc1{position:relative}

/* scene 2: plane flies off after send */
.m-plane{position:absolute;right:10px;bottom:14px;width:14px;height:14px;pointer-events:none;opacity:0;z-index:5}
.m-plane svg{width:100%;height:100%;fill:none;stroke:#7dd3fc;stroke-width:2;stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(56,189,248,.8))}
.m-plane.fly{animation:planeAway 1.1s cubic-bezier(.4,0,.7,.3) forwards}
@keyframes planeAway{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}100%{opacity:0;transform:translate(180px,-130px) rotate(24deg) scale(.5)}}

/* scene 3: burst on close */
.sc-won{position:relative}
.sc-won .bs{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#6ee7b7;
  box-shadow:0 0 8px rgba(52,211,153,.9);opacity:0;pointer-events:none}
.sc-won.in .bs{animation:wonBurst .7s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes wonBurst{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by))) scale(.3)}}

@media (max-width:960px){
  .hwstep::before{display:none}
  .how-steps-spine{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hwstep::before,.how-steps-spine::after,.sc1::after,.m-plane,.sc-won .bs{animation:none}
}

/* ============================================================
   V3 — gutter · spine scrub · radar · toasts · punchline · focus
   ============================================================ */
/* editor gutter */
.hw-gutter{position:absolute;left:6px;top:90px;bottom:40px;width:30px;z-index:0;overflow:hidden;
  font-family:ui-monospace,Menlo,monospace;font-size:10px;line-height:26px;color:rgba(96,165,250,.16);text-align:right}
/* shell progress */
.hw-prog{margin-left:18px;font-size:10.5px;font-weight:800;letter-spacing:.1em;color:#5eead4}

/* spine with scroll-scrubbed packet */
.spine{position:absolute;left:50%;top:330px;bottom:230px;width:2px;z-index:0;background:rgba(96,165,250,.09)}
.spk{position:absolute;left:50%;top:0;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);
  background:#7dd3fc;box-shadow:0 0 16px 3px rgba(56,189,248,.8);
  transition:top .18s linear}
.spk::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(56,189,248,.4);
  animation:aiPing 2.4s ease-out infinite}
@media (max-width:960px){.spine,.hw-gutter{display:none}}

/* one scene hot at a time */
.hw-scene{transition:opacity .5s ease,filter .5s ease}
.hwstep:not(.hot) .hw-scene{opacity:.45;filter:saturate(.7)}
.hwstep.hot .hw-scene{opacity:1;filter:none}

/* hard-locked scene heights: content can NEVER shift the page */
.sc1,.sc2,.sc3{height:570px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:10px 0}
.sc-rows{transition:opacity .25s ease}
.sc-rows.fade{opacity:0}

/* scene 1 additions */
.radar{position:absolute;right:-26px;top:-30px;width:170px;height:170px;border-radius:50%;z-index:0;pointer-events:none;
  border:1px solid rgba(56,189,248,.16);
  background:radial-gradient(circle,rgba(37,99,235,.06) 0%,transparent 70%)}
.radar::before{content:"";position:absolute;inset:26px;border-radius:50%;border:1px solid rgba(56,189,248,.12)}
.radar::after{content:"";position:absolute;inset:56px;border-radius:50%;border:1px solid rgba(56,189,248,.1)}
.radar .sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(56,189,248,.22) 0deg,transparent 70deg);
  animation:radarSweep 3.4s linear infinite}
@keyframes radarSweep{to{transform:rotate(360deg)}}
.radar .bl{position:absolute;width:6px;height:6px;border-radius:50%;background:#7dd3fc;opacity:0;
  box-shadow:0 0 10px rgba(125,211,252,.9)}
.radar .b1{left:36%;top:28%}.radar .b2{left:62%;top:52%}.radar .b3{left:30%;top:64%}
.radar .bl.on{animation:blipOn 1.6s ease forwards}
@keyframes blipOn{0%{opacity:0;transform:scale(.4)}15%{opacity:1;transform:scale(1.4)}35%{transform:scale(1)}100%{opacity:.25}}
.s1top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;min-height:40px}
.crm-chip{display:inline-flex;align-items:center;gap:7px;font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:700;
  color:#9fc4f8;padding:8px 13px;border-radius:9px;
  background:linear-gradient(180deg,rgba(30,58,138,.3),rgba(10,19,42,.7));
  border:1px solid rgba(96,165,250,.3);
  opacity:0;transform:translateY(-8px);transition:opacity .4s ease,transform .45s var(--ease-pop)}
.crm-chip b{color:#5eead4;font-weight:800}
.crm-chip.in{opacity:1;transform:none}
.zi-card{position:relative;display:inline-flex;flex-direction:column;gap:1px;font-family:ui-monospace,Menlo,monospace;
  padding:7px 30px 7px 13px;border-radius:9px;
  background:rgba(30,41,66,.5);border:1px solid rgba(148,163,184,.25);
  opacity:0;transform:translateY(-8px);transition:opacity .4s ease,transform .45s var(--ease-pop),filter .4s ease}
.zi-card.in{opacity:.85;transform:none}
.zi-card b{font-size:10.5px;font-weight:700;color:#8ea0bd}
.zi-card span{font-size:9px;color:#5b6b8c}
.zi-card i{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-style:normal;font-weight:800;color:#f87171;
  text-shadow:0 0 8px rgba(248,113,113,.6)}
.zi-card.dead{opacity:.35;filter:grayscale(1)}
.zi-card.dead::after{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;background:rgba(248,113,113,.7);
  transform:rotate(-4deg);box-shadow:0 0 8px rgba(248,113,113,.5)}

/* scene 2 additions */
.m-ptag{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#5eead4;
  background:rgba(16,64,50,.5);border:1px solid rgba(52,211,153,.4);border-radius:5px;padding:2.5px 8px;margin-right:8px}
.m-ptag.p1{color:#7dd3fc;background:rgba(30,58,138,.4);border-color:rgba(96,165,250,.4)}
.m-line em.sig{font-style:normal;color:#7dd3fc;font-weight:700;text-shadow:0 0 12px rgba(56,189,248,.5)}
.m-artwrap{max-height:280px;transition:max-height .5s var(--ease-pop),opacity .4s ease,margin .4s ease}
.m-artwrap.off{max-height:0;opacity:0;margin:0;border-width:0;overflow:hidden}
#s2gem{transition:transform .6s cubic-bezier(.4,.1,.3,1)}
#s2gem.fly{transform:translate(-150px,150px) scale(1.35) rotate(-8deg)}
.dg{font-family:ui-monospace,Menlo,monospace;font-size:10px;font-weight:800;color:#5eead4;
  background:rgba(16,64,50,.45);border:1px solid rgba(52,211,153,.4);border-radius:7px;padding:5px 10px;
  opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .4s var(--ease-pop)}
.dg.in{opacity:1;transform:none}

/* scene 3: toasts + persistent stats + punchline */
.toasts{display:flex;flex-direction:column;gap:8px;min-height:96px;margin-bottom:12px}
.toast{display:flex;align-items:flex-start;gap:9px;max-width:330px;padding:9px 13px;border-radius:12px;font-size:12.5px;line-height:1.5;
  opacity:0;transform:translateX(16px)}
.toast.in{animation:toastIn .4s cubic-bezier(.3,1.2,.4,1) forwards}
@keyframes toastIn{to{opacity:1;transform:none}}
.toast.them{align-self:flex-start;color:#dbeafe;border-radius:12px 12px 12px 4px;
  background:linear-gradient(180deg,rgba(30,58,138,.35),rgba(10,19,42,.7));border:1px solid rgba(96,165,250,.3)}
.toast.us{align-self:flex-end;color:#0b1730;font-weight:600;border-radius:12px 12px 4px 12px;
  background:linear-gradient(180deg,#e0edff,#bfdbfe);border:1px solid rgba(191,219,254,.7)}
.s3stats{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.st-chip{display:inline-flex;align-items:baseline;gap:8px;font-size:11px;font-weight:700;color:#8aa5cc;
  padding:8px 14px;border-radius:10px;
  background:linear-gradient(180deg,rgba(30,58,138,.24),rgba(10,19,42,.66));
  border:1px solid rgba(96,165,250,.22)}
.st-chip b{font-family:ui-monospace,Menlo,monospace;font-size:15px;color:#fff;font-variant-numeric:tabular-nums}
.st-chip.green b{color:#34d399;text-shadow:0 0 14px rgba(52,211,153,.5)}
.wk-full{font-family:ui-monospace,Menlo,monospace;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#5eead4;opacity:0;transition:opacity .4s ease}
.wk-full.in{opacity:1}
.punch{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(4,8,24,.94);border-radius:18px;opacity:0;pointer-events:none;transition:opacity .5s ease}
.punch.in{opacity:1}
.punch .pn{display:flex;align-items:center;gap:13px;padding:15px 22px;border-radius:15px;
  background:linear-gradient(180deg,rgba(30,58,138,.4),rgba(10,19,42,.8));
  border:1px solid rgba(96,165,250,.4);
  box-shadow:0 0 44px -8px rgba(37,99,235,.5)}
.punch .pn i{font-style:normal;font-size:20px}
.punch .pn b{display:block;font-family:var(--font-d);font-size:15.5px;color:#fff}
.punch .pn span{font-size:11.5px;color:#8aa5cc}
.punch .pc{font-family:ui-monospace,Menlo,monospace;font-size:12px;font-weight:700;letter-spacing:.14em;color:#7dd3fc}

/* deploy line */
.deployline{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:56px;
  font-family:ui-monospace,Menlo,monospace;font-size:15px;font-weight:800;color:#e2e8f0}
.deployline .pr{color:#38bdf8}

@media (prefers-reduced-motion:reduce){
  .radar .sweep,.spk::after{animation:none}
  .crm-chip,.zi-card,.dg,.wk-full{opacity:1;transform:none}
  .hwstep:not(.hot) .hw-scene{opacity:1;filter:none}
}

/* ============================================================
   V4 — electro rig · real email · reply→calendar→won
   ============================================================ */
/* ---------- scene 1: energy rig ---------- */
.rig{position:relative;height:190px;flex:none;margin-bottom:8px}
.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wr{fill:none;stroke:rgba(96,165,250,.14);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:4 9;transition:stroke .4s ease,opacity .4s ease}
.rig.on .wr{stroke:#7dd3fc;filter:drop-shadow(0 0 5px rgba(56,189,248,.8));
  animation:wflow .42s linear infinite,wflick 2.1s steps(2) infinite}
.rig.on .w2{animation-delay:.12s,.4s}.rig.on .w3{animation-delay:.2s,.9s}.rig.on .w4{animation-delay:.32s,1.4s}
@keyframes wflow{to{stroke-dashoffset:-13}}
@keyframes wflick{0%,88%{opacity:1}92%{opacity:.35}96%{opacity:1}}
.zap{fill:none;stroke:#a5e0fc;stroke-width:1.4;stroke-linejoin:round;opacity:0}
.rig.on .zap{animation:zapPop 2.8s steps(1) infinite}
.rig.on .z2{animation-delay:1.3s}
@keyframes zapPop{0%,86%{opacity:0}88%,93%{opacity:.9}95%{opacity:0}}
.tnode{position:absolute;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,rgba(15,26,53,.95) 40%,rgba(10,19,42,.7));
  border:1px solid rgba(96,165,250,.25);
  box-shadow:0 0 0 4px rgba(37,99,235,.06),0 10px 26px -12px rgba(0,0,0,.8)}
.tnode img{width:24px;height:24px;border-radius:50%;object-fit:cover;filter:saturate(.85)}
.tn1{left:38px;top:4px}.tn2{left:28px;top:52px}.tn3{left:32px;top:100px}.tn4{left:46px;top:144px}
.rig.on .tnode{border-color:rgba(125,211,252,.55);animation:tnodeDrain 2.1s ease-in-out infinite}
.rig.on .tn2{animation-delay:.3s}.rig.on .tn3{animation-delay:.6s}.rig.on .tn4{animation-delay:.9s}
@keyframes tnodeDrain{0%,100%{box-shadow:0 0 0 4px rgba(37,99,235,.06),0 10px 26px -12px rgba(0,0,0,.8)}
  50%{box-shadow:0 0 0 4px rgba(56,189,248,.16),0 0 22px -2px rgba(56,189,248,.45),0 10px 26px -12px rgba(0,0,0,.8)}}
.ainode{position:absolute;left:296px;top:66px;width:64px;height:64px;border-radius:19px;display:grid;place-items:center;
  background:linear-gradient(180deg,#13234a,#0a132a);
  border:1px solid rgba(96,165,250,.4);
  box-shadow:0 14px 34px -12px rgba(0,0,0,.85)}
.ainode img{width:34px;height:34px;position:relative;z-index:2}
.ainode .halo{position:absolute;inset:-9px;border-radius:24px;border:1px solid rgba(56,189,248,.0);pointer-events:none}
.rig.on .ainode{border-color:rgba(125,211,252,.8);
  animation:aiCharge 2.1s ease-in-out infinite}
.rig.on .ainode .halo{border-color:rgba(56,189,248,.5);animation:haloPulse 2.1s ease-in-out infinite}
@keyframes aiCharge{0%,100%{box-shadow:0 14px 34px -12px rgba(0,0,0,.85),0 0 18px -4px rgba(56,189,248,.4)}
  50%{box-shadow:0 14px 34px -12px rgba(0,0,0,.85),0 0 42px -2px rgba(56,189,248,.85)}}
@keyframes haloPulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.14);opacity:.15}}
.rig.blast .ainode{animation:aiBlast .5s var(--ease-pop)}
@keyframes aiBlast{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}

/* prospect list — bare lines, no boxes */
.plist{position:relative;padding-left:6px}
.pl-head{font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:700;color:#5f7ba8;margin-bottom:10px}
.pl-head span{color:#7dd3fc}
.pl-head b{color:#34d399;opacity:0;transition:opacity .4s ease}
.pl-head b.in{opacity:1}
.prow{position:relative;padding:11px 4px 12px;opacity:0;transform:translateY(10px);
  transition:opacity .45s ease,transform .5s var(--ease-pop)}
.prow + .prow{border-top:1px solid rgba(96,165,250,.1)}
.prow.in{opacity:1;transform:none}
.prow::before{content:"";position:absolute;left:-6px;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,#38bdf8,transparent);opacity:0;transition:opacity .4s ease}
.prow.in::before{opacity:.8}
.pr-1{font-size:13.5px;color:#c7d7f2}
.pr-1 b{color:#fff;font-weight:800}
.pr-2{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:#5f7ba8;margin-top:3px}
.pr-3{font-size:12px;color:#7dd3fc;margin-top:6px;line-height:1.45}
.pr-3 i{font-style:normal;font-weight:800;color:#34d399;margin-right:4px}

/* ---------- scene 2: the actual email ---------- */
.em{position:relative;border-radius:16px;padding:16px 18px 14px;
  background:linear-gradient(180deg,#fdfefe,#eef4fc);color:#111b2e;
  border:1px solid rgba(148,184,255,.5);
  box-shadow:0 24px 60px -22px rgba(2,6,18,.9),0 0 0 1px rgba(255,255,255,.06)}
.em-top{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid rgba(17,27,46,.08)}
.em-av{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--font-d);font-size:14px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#2563eb,#38bdf8)}
.em-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.em-meta b{font-size:12.5px;font-weight:800;color:#111b2e}
.em-meta span{font-size:11px;color:#5b6b8c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.em-meta span b{font-weight:700;color:#1d2b47;font-size:11px}
.em-time{margin-left:auto;font-size:10.5px;color:#8494b3;flex:none}
.em-sub{font-family:var(--font-d);font-size:15px;font-weight:800;color:#0b1730;margin:11px 0 7px;min-height:20px}
.em-body{font-size:12.75px;line-height:1.62;color:#2a3a58;min-height:63px}
.em-body p{margin:0 0 6px;opacity:0;transform:translateY(5px);transition:opacity .4s ease,transform .45s var(--ease-pop)}
.em-body p.in{opacity:1;transform:none}
.em-body em.sig{font-style:normal;font-weight:800;color:#0369a1;
  background:linear-gradient(180deg,transparent 62%,rgba(56,189,248,.28) 62%)}
.em .m-artwrap{margin:6px 0 10px;border-radius:11px;border:1px solid rgba(17,27,46,.1)}
.em-foot{position:relative;display:flex;align-items:center;gap:10px;padding-top:10px;border-top:1px solid rgba(17,27,46,.08)}
.em-send{font-size:12px;font-weight:800;color:#fff;padding:7px 18px;border-radius:99px;
  background:linear-gradient(180deg,#2563eb,#1d4ed8);box-shadow:0 8px 18px -8px rgba(37,99,235,.7)}
.em-dg{font-family:ui-monospace,Menlo,monospace;font-size:10px;font-weight:800;color:#047857;
  background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);border-radius:99px;padding:4.5px 10px;
  opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .4s var(--ease-pop)}
.em-dg.in{opacity:1;transform:none}
.em-sent{margin-left:auto;font-size:11.5px;font-weight:800;color:#059669;opacity:0;transition:opacity .35s ease}
.em-sent.in{opacity:1}
.em-plane{position:absolute;right:8px;top:12px;width:17px;height:17px;opacity:0;pointer-events:none}
.em-plane svg{width:100%;height:100%;fill:#2563eb}
.em-plane.fly{animation:emFly 1s cubic-bezier(.3,.4,.2,1) forwards}
@keyframes emFly{0%{opacity:0;transform:translate(0,0) scale(.7) rotate(0)}
  15%{opacity:1}100%{opacity:0;transform:translate(130px,-90px) scale(1.1) rotate(12deg)}}

/* ---------- scene 3: reply → calendar → won ---------- */
.tl{position:relative;padding-left:34px;display:flex;flex-direction:column;gap:26px}
.tl-line{position:absolute;left:12px;top:12px;bottom:12px;width:2px;background:rgba(96,165,250,.12);border-radius:2px}
.tl-line b{position:absolute;left:0;top:0;width:100%;height:0;border-radius:2px;
  background:linear-gradient(180deg,#38bdf8,#34d399);
  box-shadow:0 0 12px rgba(56,189,248,.6);transition:height .55s var(--ease-pop)}
.tl-item{position:relative;opacity:0;transform:translateY(12px);
  transition:opacity .45s ease,transform .5s var(--ease-pop)}
.tl-item.in{opacity:1;transform:none}
.tl-item::before{content:"";position:absolute;left:-26px;top:16px;width:10px;height:10px;border-radius:50%;
  background:#0a132a;border:2px solid rgba(96,165,250,.35);transition:border-color .3s ease,box-shadow .3s ease}
.tl-item.in::before{border-color:#38bdf8;box-shadow:0 0 10px rgba(56,189,248,.7)}
/* chat bubble */
.bub{display:flex;align-items:flex-end;gap:9px;max-width:330px}
.bub-av{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:10.5px;font-weight:800;color:#dbeafe;
  background:linear-gradient(135deg,#334c7d,#1e3160)}
.bub p{position:relative;margin:0;font-size:13px;line-height:1.5;color:#eef4ff;padding:10px 15px;
  background:linear-gradient(180deg,#33415e,#28344d);border-radius:17px 17px 17px 5px;
  box-shadow:0 12px 28px -14px rgba(0,0,0,.8)}
.tl-item.in .bub p{animation:bubPop .45s var(--ease-pop)}
@keyframes bubPop{0%{transform:scale(.85)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
/* google calendar event */
.gcal{position:relative;display:flex;align-items:center;gap:12px;max-width:340px;padding:12px 16px 12px 18px;
  background:#fff;border-radius:12px;
  box-shadow:0 18px 44px -18px rgba(2,6,18,.95)}
.gc-bar{position:absolute;left:7px;top:9px;bottom:9px;width:4px;border-radius:4px;background:#4285f4}
.gcal img{width:26px;height:26px;flex:none}
.gc-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.gc-meta b{font-size:13px;font-weight:800;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-meta span{font-size:11px;color:#5f6b7a}
/* hubspot won */
.hsdeal{position:relative;display:flex;align-items:center;gap:12px;max-width:340px;padding:12px 16px;
  border-radius:13px;
  background:linear-gradient(180deg,rgba(255,122,89,.12),rgba(10,19,42,.4));
  border:1px solid rgba(255,122,89,.4)}
.hsdeal img{width:26px;height:26px;flex:none;filter:drop-shadow(0 0 10px rgba(255,122,89,.5))}
.hs-meta{display:flex;flex-direction:column;gap:1px}
.hs-meta b{font-size:12px;font-weight:800;color:#ffd9cf}
.hs-meta span{font-family:ui-monospace,Menlo,monospace;font-size:16px;font-weight:800;color:#34d399;
  text-shadow:0 0 16px rgba(52,211,153,.5)}
.hs-won{margin-left:auto;font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:800;letter-spacing:.14em;
  color:#34d399;border:1.5px solid rgba(52,211,153,.65);border-radius:6px;padding:3px 9px;transform:rotate(-6deg);
  opacity:0;transition:opacity .3s ease}
.tl-item.in .hs-won{animation:wonStamp .5s var(--ease-pop) .35s forwards}
@keyframes wonStamp{0%{opacity:0;transform:rotate(-6deg) scale(1.8)}100%{opacity:1;transform:rotate(-6deg) scale(1)}}

@media (max-width:520px){
  .ainode{left:auto;right:12px}
  .rig{height:170px}
}
@media (prefers-reduced-motion:reduce){
  .rig.on .wr,.rig.on .zap,.rig.on .tnode,.rig.on .ainode,.rig.on .ainode .halo{animation:none}
  .rig.on .wr{stroke:#7dd3fc}
  .prow,.tl-item,.em-body p,.em-dg,.em-sent{opacity:1;transform:none}
  .hs-won{opacity:1}
}

/* v4 fixes */
.sc2 .sc-ai.duo{top:6px;right:6px}

/* rig: Claude in brand color + prospect avatars & company marks */
.ainode img{filter:drop-shadow(0 0 12px rgba(217,119,87,.55))}
.prow{display:flex;gap:13px;align-items:flex-start}
.pr-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;margin-top:3px;
  border:1px solid rgba(148,184,255,.35);
  box-shadow:0 0 0 3px rgba(37,99,235,.12),0 10px 22px -10px rgba(0,0,0,.8)}
.pr-main{min-width:0;flex:1}
.pr-co{display:inline-flex;align-items:center;gap:6px;color:#e2ecfb;font-weight:700}
.pr-co img{width:16px;height:16px;border-radius:4.5px;box-shadow:0 3px 8px -2px rgba(0,0,0,.6)}

/* prospects & signals: louder */
.pr-av{width:46px;height:46px}
.pr-1{font-size:14.5px}
.pr-1 b{font-size:15px}
.pr-2{font-size:11px;margin-top:4px}
.pr-3{font-size:13.5px;margin-top:8px;color:#a5e0fc;font-weight:600;text-shadow:0 0 18px rgba(56,189,248,.35)}
.pr-3 i{font-size:15px;margin-right:6px}
.pr-3 em{font-style:normal;font-weight:800;color:#fff;
  background:linear-gradient(180deg,transparent 60%,rgba(56,189,248,.32) 60%)}
.prow{padding:13px 4px 14px}