/* About page "How we work" motion graphic (about-flow.js). Same language and colour field as the
   home hero board (hero-board.css): site tokens, one 2px line, paper panels on a soft lilac field
   with a lime glow. Opacity is driven from the script, so these rules set colour and type only. */
.flow-stage {
  --af-field: #e7e2f4; --af-glow: rgb(184 217 138 / .55); --af-wash: rgb(246 184 212 / .4);
  --af-deco: #c9bdf0; --af-shadow: rgb(74 56 140 / .16); --af-folder: #c9bdf0;
  position: relative; overflow: hidden; aspect-ratio: 16 / 9; max-height: 760px; width: 100%;
  border-radius: 24px; color: var(--text);
  background: radial-gradient(50% 60% at 72% 70%, var(--af-glow), transparent 70%),
    radial-gradient(45% 55% at 18% 20%, var(--af-wash), transparent 70%), var(--af-field);
}
[data-theme='dark'] .flow-stage {
  --af-field: #15141b; --af-glow: rgb(184 217 138 / .15); --af-wash: rgb(201 189 240 / .13);
  --af-deco: #3b3456; --af-shadow: rgb(0 0 0 / .5); --af-folder: #3b3456;
}
@media (max-width: 760px) { .flow-stage { aspect-ratio: 7 / 10; max-height: none; border-radius: 22px; } }
.flow-stage .af-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.af-dot { fill: var(--text); opacity: .14; }
.af-deco { fill: var(--af-deco); }
.af-deco-lime { fill: var(--shape-lime); }
.af-ink-fill, .af-ink { fill: var(--text); }
.af-lime { fill: var(--shape-lime); }
.af-lilac { fill: var(--shape-lilac); }
.af-soft { fill: var(--text); fill-opacity: .2; }
.af-bar { fill: var(--panel); }
.af-on-fill { fill: var(--shape-on-accent); }
.af-paper { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.af-paper-edge { fill: var(--surface); stroke: var(--text); stroke-width: 2; }
.af-shadowed { filter: drop-shadow(0 24px 40px var(--af-shadow)); }
.af-folder { fill: var(--af-folder); }
.af-track { fill: var(--panel); }

.af-rail { fill: none; stroke: var(--text); stroke-opacity: .18; stroke-width: 2; stroke-dasharray: 4 8; }
.af-rail-on { fill: none; stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.af-step { font-family: var(--shape-font); font-weight: 500; letter-spacing: -.02em; fill: var(--text); }
.af-step-dot { fill: var(--surface); stroke: var(--text); stroke-width: 2; }
.af-step-num { font: 500 15px/1 var(--shape-font); fill: var(--text); }
.af-tick-light { fill: none; stroke: var(--shape-lime); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.af-name { font: 500 20px/1 var(--shape-font); letter-spacing: -.02em; fill: var(--text); }
.af-muted { font: 400 16px/1 var(--shape-font); fill: var(--muted); }
.af-avatar-text { font: 600 20px/1 var(--shape-font); fill: var(--shape-on-accent); }
.af-avatar-mini { font: 600 13px/1 var(--shape-font); fill: var(--surface); }
.af-bubble { fill: var(--panel); }
.af-msg { font: 400 21px/1 var(--shape-font); letter-spacing: -.02em; fill: var(--text); }
.af-msg.af-on { fill: var(--shape-on-accent); font-weight: 500; }
.af-title { font: 500 38px/1 var(--shape-font); letter-spacing: -.04em; fill: var(--text); }
.af-title-sm { font: 500 28px/1 var(--shape-font); letter-spacing: -.03em; fill: var(--text); }
.af-item { font: 500 22px/1 var(--shape-font); letter-spacing: -.02em; fill: var(--text); }
.af-pill { fill: var(--shape-lilac); }
.af-pill-text { font: 500 15px/1 var(--shape-font); fill: var(--shape-on-accent); }
.af-check { fill: var(--surface); stroke: var(--text); stroke-opacity: .5; stroke-width: 2; }
.af-tick { fill: none; stroke: var(--shape-on-accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.af-stamp-text { font: 500 22px/1 var(--shape-font); letter-spacing: -.02em; fill: var(--shape-on-accent); }
.af-line { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.af-pulse { fill: var(--shape-lime); stroke: var(--text); stroke-width: 2; }
.af-string { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.af-smile { fill: none; stroke: var(--shape-on-accent); stroke-width: 2.5; stroke-linecap: round; }
.af-caption { font: 500 30px/1 var(--shape-font); letter-spacing: -.03em; fill: var(--text); }