/* ============================================================
   v10 — diagram layer. Uses tokens from base.css.
   ============================================================ */

/* ---------- 1. Converge (hero) ---------- */
.cvg{margin:64px 0 0;padding:0}
.cvg-svg{display:none;width:100%;height:auto;color:var(--line)}
@media(min-width:820px){.cvg-svg{display:block}}
.cvg-gridwrap{opacity:.5}
.cvg-lab{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;fill:var(--fg-4)}
.cvg-lab-b{fill:var(--blue-2)}
.cvg-box{fill:var(--bg-1);stroke:var(--line-2);stroke-width:1}
.cvg-box-b{fill:var(--blue-dim);stroke:var(--blue)}
.cvg-t{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.04em;fill:var(--fg-2)}
.cvg-t-b{fill:var(--blue-2)}
.cvg-w{fill:none;stroke:var(--line-2);stroke-width:1.25}
.cvg-w-b{stroke:color-mix(in oklab,var(--blue) 45%,transparent)}
.cvg-p{fill:none;stroke:var(--fg-3);stroke-width:2;stroke-linecap:round;stroke-dasharray:5 140;animation:cvgFlow 3.4s linear infinite}
.cvg-p-b{stroke:var(--blue-2)}
@keyframes cvgFlow{from{stroke-dashoffset:0}to{stroke-dashoffset:-145}}
.cvg-jn{fill:var(--bg-2);stroke:var(--fg);stroke-width:1.5}
.cvg-jt{font-size:15px;font-weight:700;letter-spacing:-.02em;fill:var(--fg)}
.cvg-v{fill:none;stroke:var(--line-2);stroke-width:1.25}
.cvg-vp{fill:none;stroke:var(--blue-2);stroke-width:2;stroke-linecap:round;stroke-dasharray:4 60;animation:cvgV 2.2s linear infinite}
@keyframes cvgV{from{stroke-dashoffset:0}to{stroke-dashoffset:-64}}
.cvg-node{fill:var(--bg-1);stroke:var(--line-2);stroke-width:1}
.cvg-nt{font-size:15px;font-weight:700;letter-spacing:-.022em;fill:var(--fg)}
.cvg-ns{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;fill:var(--fg-3)}
.cvg-dot{fill:var(--blue);animation:cvgPulse 2.2s var(--e) infinite}
@keyframes cvgPulse{0%,100%{opacity:.35;r:3.5}50%{opacity:1;r:5}}
.cvg-cap{margin:18px 0 0;font-size:13px;line-height:1.6;color:var(--fg-3);max-width:64ch}
.cvg-cap b{color:var(--fg-2);font-weight:600}

.cvg-mini{display:grid;gap:8px}
@media(min-width:820px){.cvg-mini{display:none}}
.cvg-mini-r{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:baseline;padding:14px 16px;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r2)}
.cvg-mini-b{background:var(--bg-2);border-color:var(--line-2)}
.cvg-mini-l{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-4)}
.cvg-mini-b .cvg-mini-l{color:var(--blue-2)}
.cvg-mini-r b{font-size:12.5px;font-weight:600;letter-spacing:-.016em;color:var(--fg);line-height:1.45}
.cvg-mini-f{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.09em;color:var(--fg-3);text-align:center;padding:2px 0}
.cvg-mini-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.cvg-mini-g span{background:var(--bg-1);padding:13px 10px;text-align:center;font-size:12.5px;font-weight:600;color:var(--fg)}

/* ---------- 2. Stack ---------- */
.stkv{margin:20px 0 0;padding:24px 26px;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r3)}
.stkv-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:18px}
.stkv-lab{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-2)}
.stkv-note{font-size:12.5px;color:var(--fg-3)}
.stkv-body{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:820px){.stkv-body{grid-template-columns:1fr 92px;gap:20px}}
.stkv-rows{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.stkv-r{display:grid;grid-template-columns:38px 1fr;gap:4px 12px;background:var(--bg);padding:13px 15px;border-left:3px solid var(--lc);transition:background-color .22s var(--e)}
@media(min-width:620px){.stkv-r{grid-template-columns:38px 168px 1fr 14px;align-items:center;gap:16px}}
.stkv-r:hover{background:var(--bg-2)}
.stkv-k{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.07em;color:var(--fg-4)}
.stkv-n{font-size:13.5px;font-weight:600;letter-spacing:-.02em;color:var(--fg)}
.stkv-d{font-size:12px;line-height:1.5;color:var(--fg-3);grid-column:2}
@media(min-width:620px){.stkv-d{grid-column:auto}}
.stkv-bar{display:none;width:10px;height:10px;border-radius:3px;background:var(--lc);opacity:.85}
@media(min-width:620px){.stkv-bar{display:block}}
.stkv-brace{display:none;position:relative;align-items:center;gap:10px}
@media(min-width:820px){.stkv-brace{display:flex}}
.stkv-brace-l{width:1px;align-self:stretch;background:linear-gradient(180deg,transparent,var(--line-2) 12%,var(--line-2) 88%,transparent);flex:none;position:relative}
.stkv-brace-l::before,.stkv-brace-l::after{content:'';position:absolute;left:0;width:9px;height:1px;background:var(--line-2)}
.stkv-brace-l::before{top:12%}
.stkv-brace-l::after{bottom:12%}
.stkv-brace-t{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.09em;color:var(--fg-3);line-height:1.6;text-transform:uppercase}

/* ---------- 3. Gates ---------- */
.gt{position:relative;display:grid;gap:10px;margin-top:2px}
@media(min-width:700px){.gt{grid-template-columns:auto repeat(4,1fr) auto;align-items:start;gap:0 10px;padding-top:4px}}
.gt-rail{display:none}
@media(min-width:700px){
  .gt-rail{display:block;position:absolute;left:52px;right:52px;top:15px;height:1px;background:repeating-linear-gradient(90deg,var(--line-2) 0 5px,transparent 5px 10px)}
}
.gt-start,.gt-end{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-4);padding:6px 10px;border:1px solid var(--line-2);border-radius:var(--rp);white-space:nowrap;justify-self:start;background:var(--bg-1)}
.gt-end{color:var(--blue-2);border-color:var(--blue);background:var(--blue-dim)}
@media(min-width:700px){.gt-start,.gt-end{align-self:start;margin-top:-2px}}
.gt-g{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:baseline;padding:11px 13px;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r2)}
@media(min-width:700px){
  .gt-g{grid-template-columns:1fr;gap:8px;background:none;border:0;padding:0;justify-items:center;text-align:center}
}
.gt-n{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--fg-4)}
@media(min-width:700px){.gt-n{order:2}}
.gt-pill{display:none}
@media(min-width:700px){
  .gt-pill{display:block;order:1;width:2px;height:22px;border-radius:2px;background:var(--ic,var(--blue));opacity:.85}
}
.gt-t{font-size:12.5px;line-height:1.45;color:var(--fg-2)}
@media(min-width:700px){.gt-t{order:3;font-size:12px;max-width:20ch}}

/* ---------- 4. Perimeter ---------- */
.pm{margin:0}
.pm-z{position:relative;border-radius:var(--r3);padding:26px 18px 18px}
.pm-out{border:1px dashed var(--line-2);background:var(--bg)}
.pm-mid{margin-top:14px;border:1px solid var(--line-2);background:var(--bg-1)}
.pm-in{margin-top:14px;border:1px solid var(--blue);background:color-mix(in oklab,var(--blue) 6%,var(--bg-2))}
.pm-zl{position:absolute;top:9px;left:16px;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-4)}
.pm-zl-in{color:var(--blue-2)}
.pm-chips{display:flex;flex-wrap:wrap;gap:7px}
.pm-chips-b{margin-bottom:2px}
.pm-chips span{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;padding:6px 11px;border-radius:var(--rp);border:1px solid var(--line-2);color:var(--fg-3);background:var(--bg)}
.pm-chips .pm-hl{border-color:var(--blue);color:var(--blue-2);background:var(--blue-dim)}
.pm-cap{margin:16px 0 0;font-size:12.5px;line-height:1.6;color:var(--fg-3)}
.pm-cap b{color:var(--fg-2);font-weight:600}

/* ---------- 5. Case marks ---------- */
.cmk{width:100%;height:64px;margin-bottom:4px}
.cmk-svg{width:120px;height:64px;fill:var(--fg-5);transition:fill .25s var(--e)}
.cmk-ln{fill:none;stroke:var(--fg-5);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s var(--e)}
.cs:hover .cmk-svg{fill:var(--blue-2)}
.cs:hover .cmk-ln{stroke:var(--blue-2)}

/* ---------- 6. Photo slots ---------- */
.ph{position:relative;border-radius:var(--r3);overflow:hidden;background:var(--bg-2);border:1px solid var(--line)}
.ph image-slot{display:block;width:100%;height:100%}
.ph-wide{aspect-ratio:16/9}
.ph-cap{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--fg-4)}
.cm-by-ph{display:flex;align-items:center;gap:14px}

/* ---------- Print ---------- */
@media print{
  .cvg-p,.cvg-vp,.cvg-dot{animation:none}
  .cvg-svg{display:block}
  .cvg-mini{display:none}
}

/* ---------- 7. Security two-column ---------- */
.sb-two{display:grid;gap:18px}
@media(min-width:1000px){.sb-two{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:24px;align-items:start}}
@media(min-width:1000px){.sb-two .sb-grid{grid-template-columns:1fr 1fr}}
@media(min-width:620px) and (max-width:999px){.sb-two .sb-grid{grid-template-columns:1fr 1fr}}

/* ---------- 8. Company photo band ---------- */
.cm-photos{display:grid;gap:14px;margin-top:18px}
@media(min-width:700px){.cm-photos{grid-template-columns:1fr 1fr;gap:18px}}

/* ---------- 9. Artifact evidence ---------- */
.art{margin-top:18px;display:grid;gap:22px;padding:26px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r3)}
@media(min-width:900px){.art{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;align-items:center;padding:30px 32px}}
.art-h{font-size:clamp(20px,2.2vw,25px);font-weight:700;letter-spacing:-.03em;line-height:1.2;margin:12px 0 0;color:var(--fg)}
.art-h em{font-style:normal;color:var(--blue-2)}
.art-p{margin:14px 0 0;font-size:13.5px;line-height:1.65;color:var(--fg-3)}
.art-l2{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.art-l2 li{font-size:12.5px;line-height:1.45;color:var(--fg-2);padding-left:15px;position:relative}
.art-l2 li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--blue)}
.art-slot{aspect-ratio:16/10}

/* ---------- 10. Gap path — echoes the hero chain ---------- */
.gpath{display:none;align-items:center;gap:10px;margin-bottom:22px}
@media(min-width:760px){.gpath{display:flex}}
.gpath-e{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-4);padding:6px 12px;border:1px solid var(--line-2);border-radius:var(--rp);background:var(--bg);white-space:nowrap}
.gpath-ok{color:var(--blue-2);border-color:var(--blue);background:var(--blue-dim)}
.gpath-n{font-size:12px;font-weight:600;letter-spacing:-.016em;color:var(--fg);padding:6px 13px;border:1px solid var(--line-2);border-radius:var(--rp);background:var(--bg-1);white-space:nowrap}
.gpath-seg{flex:1;height:1px;position:relative;background:repeating-linear-gradient(90deg,var(--line-2) 0 5px,transparent 5px 10px);overflow:hidden}
.gpath-seg i{position:absolute;top:-1.5px;left:-14px;width:14px;height:4px;border-radius:2px;background:var(--blue-2);opacity:.9;animation:gseg 2.6s linear infinite}
.gpath-seg:nth-child(4) i{animation-delay:.65s}
.gpath-seg:nth-child(6) i{animation-delay:1.3s}
.gpath-seg:nth-child(8) i{animation-delay:1.95s}
@keyframes gseg{from{left:-14px}to{left:100%}}
@media print{.gpath-seg i{animation:none}}