/* /how-it-works (v2) — one detection walked as a numbered journey (journey.css
   rail + chapters), then the incident timeline and the division of labour. */

/* hero */
.hw-hero .wrap>*{min-width:0}
.hw-hero .trust li{display:flex;align-items:center;gap:6px}
.hw-route{padding:22px}
.hw-route-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid var(--line);margin-bottom:12px}
.hw-route-h b{font:600 13.5px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hw-route ol{position:relative;display:grid;gap:4px}
.hw-route ol::before{content:"";position:absolute;left:26px;top:18px;bottom:18px;width:2px;background:linear-gradient(var(--v2),var(--green) 75%,var(--teal))}
.hw-route li{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 10px;border-radius:12px}
.hw-route li>i{position:relative;z-index:1;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#16102e;border:1px solid var(--line2);color:var(--v2);font-size:15px}
.hw-route li span{font-size:13px;color:var(--muted);min-width:0}
.hw-route li span b{display:block;color:#fff;font-size:13.5px}
.hw-route li em{font:600 11.5px var(--mono);font-style:normal;color:var(--faint)}
.hw-route li.ok>i{color:#fff;background:linear-gradient(135deg,#17a86a,var(--green));border-color:transparent;box-shadow:0 0 18px -4px rgba(47,220,142,.8)}
.hw-route li.ok em{color:var(--green)}
.hw-route li.watch>i{color:var(--teal)}
.hw-route li.watch em{color:var(--teal)}
.hw-route-f{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.hw-route-f strong{font-size:30px;font-weight:800;color:#fff;letter-spacing:-.03em}

/* journey (no audience bar above it, so the rail sits higher) */
.hw{padding-top:60px}
.hw .j-rail{top:110px}
.hw .j-rail h3{font-size:26px}
.hw-t{display:flex;align-items:center;gap:12px}
.hw-t i{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;font-size:19px;color:#fff;background:linear-gradient(135deg,var(--v),var(--v2));box-shadow:0 10px 30px -10px rgba(146,81,255,.9)}

.hw-stage{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;align-items:stretch}
.hw-does{display:flex;flex-direction:column;gap:14px;min-width:0}
.hw-draw{flex:1;display:grid;place-items:center;padding:18px;min-height:150px}
.hw-out{display:flex;flex-direction:column;gap:16px;padding:20px;min-width:0;background:linear-gradient(160deg,rgba(146,81,255,.1),rgba(0,0,0,.2))}
.hw-k{display:flex;align-items:center;gap:8px;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.hw-flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}
.hw-flow>div{min-width:0}
.hw-flow strong{display:block;font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1.05}
.hw-flow>div:last-of-type strong{color:var(--teal)}
.hw-flow>div>span{display:block;font-size:12px;color:var(--muted);line-height:1.35;margin-top:4px}
.hw-arrow{color:var(--v2);font-size:15px}
.hw-note{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:auto}
.hw-tl3{grid-template-columns:repeat(3,minmax(0,1fr));margin:6px 0 0}
.hw-tl3::before,.hw-tl3 .fill{left:16.6%;right:16.6%}
.hw-tl3 b{font-family:var(--mono)}

/* the stage drawings */
.sd{width:100%;max-width:220px;height:auto;overflow:visible}
.sd-dot{fill:var(--line2)}
.sd-arc{stroke:var(--v2);stroke-width:1.4;opacity:.85}
.sd-arc--2{opacity:.6}.sd-arc--3{opacity:.4}
.sd-hit{fill:var(--red)}
.sd-ring{stroke:var(--red);stroke-width:1.2;opacity:.6;transform-origin:94px 60px;animation:hw-ping 2.2s ease-out infinite}
@keyframes hw-ping{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.7);opacity:0}}
.sd-track{fill:rgba(255,255,255,.06)}
.sd-bar{stroke-width:10;stroke-linecap:round}
.sd-bar--a{stroke:var(--red)}.sd-bar--b{stroke:var(--amber)}.sd-bar--c{stroke:var(--v2)}
.sd-thresh{stroke:var(--teal);stroke-width:1.4;stroke-dasharray:3 4}
.sd-t{fill:var(--faint);font:600 9px var(--mono)}
.sd-t--hero{fill:#fff;font:800 16px var(--sans)}
.sd-sheet{stroke:var(--line2);stroke-width:1.2;fill:#120e26}
.sd-sheet--1{fill:#18123a;stroke:rgba(169,92,255,.5)}
.sd-line{stroke:var(--muted);stroke-width:2;stroke-linecap:round;opacity:.55}
.sd-seal{fill:rgba(47,220,142,.15);stroke:var(--green);stroke-width:1.4}
.sd-tick{stroke:var(--green);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sd-rail{stroke:var(--line2);stroke-width:2}
.sd-run{stroke:var(--v2);stroke-width:2.4}
.sd-node{fill:#120e26;stroke:var(--v2);stroke-width:1.6}
.sd-node--c{fill:var(--green);stroke:var(--green)}
.sd-tick--end{stroke:#07060f}

/* 05 refusal ladder */
.hw-ref{display:grid;gap:12px;position:relative}
.hw-ref-c{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start;padding:16px 18px;border-left:3px solid var(--e,var(--amber))}
.hw-ref-c.e1{--e:#ff8a4c}.hw-ref-c.e2{--e:var(--amber)}.hw-ref-c.e3{--e:var(--red)}
.hw-ref-i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:17px;color:var(--e);background:rgba(255,255,255,.05);border:1px solid var(--line)}
.hw-ref-c b{display:block;font-size:15px;margin-bottom:4px}
.hw-ref-c p{color:var(--muted);font-size:13.5px}
.hw-ref-end{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font:600 12px var(--mono);color:var(--e)}

/* 06 after removal */
.hw-after{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:center}
.hw-after-n p{color:var(--muted);font-size:14px;margin-bottom:18px}

/* incident timeline */
.hw-inc{padding:30px}
.hw-bands{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px}
.hw-band{min-width:0;padding:18px;border-radius:16px;border:1px solid var(--line);background:rgba(0,0,0,.18)}
.hw-band.theirs{background:repeating-linear-gradient(135deg,rgba(255,179,64,.04) 0 10px,transparent 10px 20px),rgba(0,0,0,.18)}
.hw-band-h{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}
.hw-band-h b{display:block;font-size:16px}
.hw-band-h div span{font-size:12.5px;color:var(--faint)}
.hw-ev{position:relative;display:grid;gap:2px}
.hw-ev::before{content:"";position:absolute;left:54px;top:12px;bottom:12px;width:1px;background:var(--line2)}
.hw-ev li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:22px;align-items:center;padding:9px 6px;border-radius:10px;font-size:13.5px;color:var(--muted)}
.hw-ev li::before{content:"";position:absolute;left:51px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--v2)}
.hw-band.theirs .hw-ev li::before{background:var(--amber)}
.hw-ev li:last-child::before{background:var(--green);box-shadow:0 0 10px var(--green)}
.hw-ev li.you{background:rgba(67,227,191,.07);border:1px solid rgba(67,227,191,.25)}
.hw-ev li.you::before{background:var(--teal);box-shadow:0 0 10px var(--teal)}
.hw-ev time{font:600 12px var(--mono);color:var(--faint)}
.hw-ev b{color:#fff}
.hw-ev em{font-style:normal}
.hw-scale{margin-top:24px;display:grid;gap:12px}
.hw-scale-bar{display:flex;height:14px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.06);gap:2px}
.hw-scale-bar i{display:block;height:100%;width:var(--w,0)}
.hw-scale-bar .ours,.hw-scale-l i.ours{background:linear-gradient(90deg,var(--v),var(--v2))}
.hw-scale-bar .theirs,.hw-scale-l i.theirs{background:linear-gradient(90deg,rgba(255,179,64,.5),rgba(255,179,64,.25))}
.hw-scale-l{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.hw-scale-l span{display:flex;gap:8px;align-items:center}
.hw-scale-l i{width:12px;height:12px;border-radius:4px;flex:none}
.hw-scale-l b{color:#fff}
.hw-total{display:flex;gap:20px;align-items:center;margin-top:22px;padding:18px 20px;border-radius:16px;background:linear-gradient(90deg,rgba(146,81,255,.18),rgba(67,227,191,.08));border:1px solid rgba(169,92,255,.35)}
.hw-total strong{font-size:56px;font-weight:800;letter-spacing:-.05em;line-height:1;flex:none}
.hw-total>span{color:var(--muted);font-size:14.5px;max-width:620px}

/* division of labour */
.hw-duty-c{padding:26px;display:flex;flex-direction:column}
.hw-duty-c.you{border-color:rgba(67,227,191,.4);box-shadow:0 0 0 1px rgba(67,227,191,.15),0 24px 60px -24px rgba(67,227,191,.35)}
.hw-duty-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.hw-duty-h b{display:flex;gap:10px;align-items:center;font-size:20px}
.hw-duty-h b i{color:var(--v2)}
.hw-duty-c.you .hw-duty-h b i{color:var(--teal)}
.hw-duty-c ol{display:grid;gap:10px}
.hw-duty-c ol.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.hw-duty-c li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;padding:12px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.18)}
.hw-duty-c li span{font-size:13px;color:var(--muted)}
.hw-duty-c li b{display:block;color:#fff;font-size:14.5px;margin-bottom:2px}
.hw-n{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font:700 14px var(--mono);font-style:normal;background:rgba(146,81,255,.16);color:var(--v2)}
.you .hw-n{background:linear-gradient(135deg,#1fb894,var(--teal));color:#07060f}
.hw-duty-f{margin-top:auto;padding-top:16px;font-size:13.5px;color:var(--faint)}
.hw-duty-f b{color:#fff}

@media (max-width:1100px){.hw-stage{grid-template-columns:minmax(0,1fr)}.hw-draw{min-height:130px}}
@media (max-width:860px){
  .hw-bands,.hw-after,.hw-duty-c ol.two{grid-template-columns:minmax(0,1fr)}
  .hw-inc{padding:20px}
  .hw-total{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (max-width:760px){
  .hw{padding-top:30px}
  .hw-flow{grid-template-columns:minmax(0,1fr)}
  .hw-arrow{transform:rotate(90deg);justify-self:start;margin-left:8px}
  .hw-tl3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hw-ev li{grid-template-columns:44px minmax(0,1fr);gap:4px 18px}
  .hw-ev li em{grid-column:2;justify-self:start}
  .hw-ev::before,.hw-ev li::before{display:none}
  .hw-route li em{display:none}
}
@media (max-width:520px){
  .hw-after .det{grid-template-columns:30px minmax(0,1fr)}
  .hw-after .det .chip{grid-column:2;justify-self:start}
}