/* Alacrity: existing systems -> intelligence -> accountable human decision. */
.l-system-map { margin: 25px 0 22px; color: var(--text); }
.l-map-caption { display: flex; align-items: center; gap: 16px; color: var(--l-muted); font-size: 11px; }
.l-map-caption i { height: 1px; flex: 1; background: var(--l-border); }
.l-map-stage { position: relative; display: grid; grid-template-columns: 23% 54% 23%; align-items: center; height: 228px; margin-top: 14px; direction: ltr; }
html[lang="fa"] .l-map-stage { direction: rtl; }
.l-map-wires { position: absolute; inset: 4px 0; width: 100%; height: 220px; overflow: visible; pointer-events: none; }
html[lang="fa"] .l-map-wires { transform: scaleX(-1); }
.l-map-wire { stroke: var(--l-border); stroke-width: 1; }
.l-map-current { stroke: var(--l-accent); stroke-width: 1.5; stroke-dasharray: 9 260; animation: l-transfer 5.2s linear infinite; opacity: .8; }
.l-map-sources { display: flex; flex-direction: column; justify-content: center; gap: 18px; position: relative; height: 100%; }
.l-map-label { color: var(--l-muted); font-size: 10px; font-weight: 500; line-height: 1.6; }
.l-map-sources > .l-map-label { position: absolute; inset-block-start: -2px; inset-inline-start: 0; white-space: nowrap; }
.l-map-source { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 10px; border: 1px solid var(--l-border); border-radius: 7px; background: var(--l-panel); color: var(--dim); font-size: 11px; transition: border-color .3s, color .3s; }
.l-map-source .l-icon { width: 17px; height: 17px; color: var(--l-muted); }
.l-map-source i { width: 3px; height: 3px; margin-inline-start: auto; background: var(--l-border); border-radius: 50%; }
.l-map-engine { display: grid; place-items: center; gap: 14px; position: relative; }
.l-map-core { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 108px; height: 112px; border: 1px solid var(--l-accent); border-radius: 12px; background: var(--l-panel-2); outline: 7px solid var(--l-panel); box-shadow: 0 0 0 8px var(--l-border); }
.l-map-core strong { font: 600 12px/1.7 var(--font-ui); color: var(--text); text-align: center; padding-inline: 7px; }
.l-map-core > .l-icon { width: 32px; height: 32px; color: var(--l-accent); stroke-width: 1.25; }
.l-map-corner { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; background: var(--l-accent); border: 2px solid var(--l-panel); border-radius: 50%; }
.l-map-process { display: flex; gap: 4px; direction: ltr; }
.l-map-process i { width: 10px; height: 2px; border-radius: 1px; background: var(--l-border); }
.l-map-engine > .l-map-label { position: absolute; top: calc(100% + 18px); white-space: nowrap; }
.l-map-human { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 14px; gap: 8px; border-block: 1px solid var(--l-border); }
.l-map-person { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--l-border); border-radius: 50%; background: var(--l-panel); color: var(--l-muted); transition: background .3s, color .3s; }
.l-map-person .l-icon { width: 24px; height: 24px; }
.l-map-human strong { font-size: 12px; color: var(--text); line-height: 1.7; }
.l-map-human > span { font-size: 9px; line-height: 1.7; color: var(--l-muted); }
.l-map-result { display: flex; gap: 5px; align-items: center; margin-top: 3px; color: var(--l-muted); font-size: 9px; line-height: 1.7; }
.l-map-result .l-icon { width: 13px; height: 13px; }
.l-map-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--l-muted); font-size: 10px; }
.l-map-counter { direction: ltr; font: 10px var(--font-mono); color: var(--l-accent); }
.l-map-counter i { font-style: normal; color: var(--l-muted); }
#heroExperience[data-step="0"] .l-map-source { border-color: var(--l-accent); color: var(--text); }
#heroExperience[data-step="0"] .l-map-source i { background: var(--l-accent); }
#heroExperience[data-step="1"] .l-map-process i:nth-child(-n+2),
#heroExperience[data-step="2"] .l-map-process i:nth-child(-n+3),
#heroExperience[data-step="3"] .l-map-process i { background: var(--l-accent); }
#heroExperience[data-step="2"] .l-map-result { color: var(--l-accent); }
#heroExperience[data-step="3"] .l-map-person { background: var(--l-accent); color: var(--l-accent-ink); border-color: var(--l-accent); }
.l-motion-paused .l-map-current { animation-play-state: paused; }
.l-motion { min-width: 44px; min-height: 44px; }
#heroExperience .l-step-marker { display: none; }
#heroExperience .l-flow-panel p { max-width: 100%; }
#heroExperience .l-flow-panel h2 { text-wrap: balance; }
.l-flow-tabs button:focus-visible, .l-motion:focus-visible { outline: 2px solid var(--l-accent); outline-offset: 3px; }
#heroExperience .l-flow-panel h2 { color: var(--text) !important; }
#heroExperience .l-flow-panel { min-height: 132px; }
@keyframes l-transfer { to { stroke-dashoffset: -538; } }
@media (max-width: 1100px) and (min-width: 721px), (max-width: 420px) {
  .l-map-stage { grid-template-columns: 24% 52% 24%; }
  .l-map-source { flex-direction: column; justify-content: center; gap: 4px; padding: 5px 2px; font-size: 10px; }
  .l-map-source i { display: none; }
  .l-map-core { width: 82px; height: 94px; gap: 8px; border-radius: 10px; }
  .l-map-core strong { font-size: 10px; }
  .l-map-core > .l-icon { width: 26px; height: 26px; }
  .l-map-human strong { font-size: 10px; }
  .l-map-human > span { font-size: 9px; }
  .l-map-result { flex-direction: column; font-size: 9px; gap: 2px; }
  .l-map-sources > .l-map-label { font-size: 9px; }
  .l-map-caption { font-size: 10px; }
}
@media (max-width: 360px) {
  .l-map-core { width: 70px; height: 86px; }
  .l-map-process i { width: 8px; }
  .l-map-engine > .l-map-label { font-size: 9px; }
  .l-map-footer { font-size: 9px; }
  .l-board-top { font-size: 10px; }
  .l-sample { font-size: 9px; padding-inline: 5px; }
  .l-motion { min-width: 44px; }
}
@media (max-width: 420px) {
  #heroExperience .l-flow-panel h2 { font-size: 17px !important; line-height: 1.65 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .l-map-current { animation: none; stroke-dasharray: none; opacity: .3; }
}

/* Section 04: reading order places the original chart right in FA, left in EN. */
.l-transformation-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 72px); margin-top: 32px; }
.l-transformation-visual { position: relative; min-width: 0; margin: 0; padding-top: 20px; }
.l-transformation-visual .axes { display: block; width: 100%; height: auto; overflow: visible; direction: ltr; }
#transformationSvg text { fill: var(--l-muted); font-size: 10px !important; }
.l-transformation-visual figcaption { margin-top: 12px; font-size: 11px; line-height: 1.8; color: var(--l-muted); text-align: center; }
.l-transformation-motion { position: absolute; inset-inline-end: 0; top: 0; z-index: 1; }
.l-transformation-paused .axes * { animation-play-state: paused !important; }
#transformationSec .ba { margin: 0; gap: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); background: transparent; border: 0; }
#transformationSec .ba > div { min-width: 0; padding: 24px 0; background: transparent; border-top: 1px solid var(--line2); }
#transformationSec .ba .lbl { font-size: 12px; line-height: 1.8; margin-bottom: 20px; }
#transformationSec .ba li { font-size: 14px; line-height: 1.9; }
@media (max-width: 980px) {
  .l-transformation-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .l-transformation-visual { width: 100%; max-width: 580px; margin-inline: auto; }
}
@media (max-width: 480px) {
  #transformationSvg text { font-size: 15px !important; letter-spacing: 0; }
  #transformationSec .ba { gap: 18px; }
  #transformationSec .ba li { font-size: 12px; line-height: 1.9; }
  #transformationSec .ba .lbl { font-size: 11px; }
  .l-transformation-visual figcaption { font-size: 10px; }
}