/* Purpose-led figures in human guides. Container queries preserve readable labels beside
   the contents rail and replace spatial drawings with explicit relationships on phones. */
.pg .explanation-figure{container-type:inline-size;margin:32px 0 40px;padding:24px;background:var(--lavender,#F4F1FA);border:1px solid var(--line-strong,#CEC7DC);border-radius:12px;color:var(--ink,#1B1726)}
.pg .explanation-figure .figure-kicker{font:500 16px/1.4 var(--mono);color:var(--gold-ink,#8A5A14)}
.pg .explanation-figure figcaption h3{font:650 28px/1.15 "Familjen Grotesk",sans-serif;letter-spacing:-.025em;margin:8px 0 12px;color:var(--ink,#1B1726)}
.pg .explanation-figure figcaption p{font:400 18px/1.5 var(--sans);margin:0;color:var(--ink-2,#4A4458)}
.pg .figure-canvas{display:block;width:100%;height:auto;margin:24px 0;overflow:visible}
.pg .figure-node rect{fill:#FFFFFF;stroke:#5E5870;stroke-width:1.5}
.pg .figure-node-tag,.pg .figure-lane-label{font:500 18px var(--mono);fill:#8A5A14}
.pg .figure-node-label{font:650 20px var(--sans);fill:#1B1726}
.pg .figure-node-detail{font:400 18px var(--sans);fill:#4A4458}
.pg .figure-edge{fill:none;stroke:#8A5A14;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.pg .figure-arrowhead{fill:#8A5A14}
.pg .figure-edge-label{font:500 18px var(--sans);fill:#4A4458;paint-order:stroke;stroke:#F4F1FA;stroke-width:8px;stroke-linejoin:round}
.pg .figure-lane{fill:#FFFFFF;fill-opacity:.4;stroke:#CEC7DC;stroke-width:1}
.pg .figure-mobile{display:none}
.pg .figure-equivalent{border-top:1px solid #CEC7DC;padding-top:18px}
.pg .figure-equivalent h4{font:650 18px/1.4 var(--sans);margin:0 0 8px}
.pg .figure-equivalent p{font:400 18px/1.55 var(--sans);color:#4A4458;margin:0}
@container (max-width:599px){
  .pg .figure-canvas{display:none}
  .pg .figure-mobile{display:grid;list-style:none;padding:0;margin:24px 0;gap:16px}
  .pg .figure-mobile li{margin:0;padding:18px;background:#FFFFFF;border:1px solid #5E5870;border-radius:8px}
  .pg .figure-mobile-tag{display:block;font:500 16px/1.4 var(--mono);color:#8A5A14;margin-bottom:6px}
  .pg .figure-mobile b{display:block;font:650 20px/1.3 var(--sans)}
  .pg .figure-mobile p{font:400 18px/1.45 var(--sans);margin:8px 0 0;color:#4A4458}
  .pg .figure-mobile .figure-next{padding-top:12px;margin-top:12px;border-top:1px solid #CEC7DC;color:#8A5A14}
}
@media(max-width:599px){.pg .explanation-figure{padding:18px}.pg .explanation-figure figcaption h3{font-size:25px}}