/* Platform page mechanisms — drawing language mapped to theme tokens,
   so the same SVG follows the cyberpunk dark / white / crème bases. */
.mechs{max-width:780px;margin:40px auto 0}
.mech-tabs{display:inline-flex;margin:0 auto 16px}
.mechs .mech-tabs{display:flex;justify-content:center;width:max-content;margin-left:auto;margin-right:auto}
.mech-stage{position:relative;padding:12px 14px 6px}
.mech-stage[hidden]{display:none!important}
.mech-stage svg{display:block;width:100%;height:auto;overflow:hidden}
.mech-note{text-align:center;margin:6px 0 0}
.mech-stage .ln{fill:none;stroke:var(--ink,var(--navy));stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mech-stage .ln.thin{stroke-width:1}
.mech-stage .cons{fill:none;stroke:var(--line-2);stroke-width:1;stroke-dasharray:4 4}
.mech-stage .br{fill:var(--brass)}
.mech-stage .brl{fill:none;stroke:var(--brass);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mech-stage .rs{fill:var(--rust)}
.mech-stage .rsl{fill:none;stroke:var(--rust);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.mech-stage .vt{fill:var(--volt,var(--brass));stroke:var(--ink,var(--navy));stroke-width:1}
.mech-stage .hollow{fill:var(--bg);stroke:var(--ink,var(--navy));stroke-width:1.4}
.mech-stage .hatch{stroke:var(--line-2);stroke-width:1}
.mech-stage .lbl{font-family:var(--mono);font-size:8.5px;fill:var(--muted);letter-spacing:.08em}
.mech-stage .lbl.on{fill:var(--brass)}
.mech-stage .lbl.rs2{fill:var(--rust)}
.mech-stage .lbl.k{fill:var(--ink,var(--navy))}
.mech-stage .armed{cursor:pointer}
@media (max-width:700px){.mechs{margin-top:28px}.mech-stage{padding:8px 4px 4px}.mech-stage .lbl{font-size:10px}}

/* home page: the product's mechanism, switched by the selected product */
.mech-mini{max-width:660px;margin:28px auto 0}
.mech-mini .mech-stage{padding:10px 12px 4px}
.mech-mini .mech-cap{text-align:center;margin:8px 0 0;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
/* the second machine, alongside "how it works" */
.mech-how{max-width:760px;margin:0 auto 34px}
@media (max-width:640px){
  .mech-stage{padding:6px 2px 2px}
  .mech-stage .lbl{font-size:12px;letter-spacing:.04em}
  .mech-note{font-size:12px}
}