/* ===========================================================================
   wf — the FinePrint workflow figure (2026-09-15)
   ---------------------------------------------------------------------------
   Replaces the sfA3 figure in the homepage #how band.  Same register (dark
   plate, raised cards, Instrument Serif titles, Instrument Sans kickers, mono
   status words), same colour rule (teal is the run, amber is the answer coming
   back), same crispness rules (wide layout at viewBox 0 0 1112 576 = the live
   .hcp .c-wrap content width, so it renders 1:1; integer grid; 1px hairlines
   on .5 centre lines; 2px connectors on integer centre lines; geometric-
   Precision text; -webkit-font-smoothing:auto set explicitly).

   FIVE numbered stations and one gate.  01 Ask (prompt field) · 02 Legal AI
   Counsel (the endpoint card, four work rows) · 03 FinePrint LM (the core,
   tethered UP into the card: it powers the agents) · TRUST SCORE, unnumbered
   (a diamond gate on the rail — a decision, not a step: the work is SCORED,
   an act, never a number, and leaves by one of two exits) · 04 AnswerLoop
   (amber: an independent lawyer verifies) · 05 Legal Room (the record:
   cleared work arrives in teal from the gate, verified work in amber from
   AnswerLoop).  The numbering is the live sfA3 figure's, founder-approved.  The second amber loop is AnswerLoop -> FinePrint LM:
   the lawyer's answer trains the model — *next time, FinePrint knows*.

   TWO palettes, ONE geometry:  .wf-fig.wf-dark  (primary, deep navy plate)
                                .wf-fig.wf-light (paper plate)
   Every colour — including inside @keyframes — goes through a custom
   property, so one keyframe set drives both.

   ONE 18s clock.  Every animated rule is
       animation:NAME 18s EASE infinite; animation-delay:var(--wf-t0,0s)
   (no angle brackets anywhere in this sheet: it is also embedded in the
   standalone deck SVGs, where an angle bracket would be parsed as a tag)
   so a still parks the whole figure with a negative --wf-t0 + paused (park.py).
   Nothing bounces except the one bloom ring at the LM core.

   STRUCTURE NEVER FADES.  Plate, washes, every card and hairline, the prompt
   field, the diamond, the kickers and titles, the standing labels and the
   pale rails are drawn permanently; only content, colour and the lanes'
   ink animate, so the loop never resets to an empty plate.

   BEAT TABLE (seconds on the 18s clock)
     0.30-1.62  01 ASK — six words type into the prompt field, caret blinks
     1.70-2.00  the send button lights
     2.00-2.50  teal draws the connector into 02 LEGAL AI COUNSEL; card lifts
     2.70       03 FinePrint LM wakes: rings, core, halo; dots drift UP the
                tether into the card (POWERS THE AGENTS) until 12.4
     2.90-4.95  rows 1-4 resolve: bullet teal -> solid, `done` lands
     5.20-5.75  teal draws the rail into the TRUST SCORE gate, token rides
     5.80-6.70  the gate SCORES: its outline sweeps teal, `scoring`
     6.90       `scored` lands, the diamond tints
     7.10-7.70  cleared: teal draws down into 05 Legal Room, `cleared`
     7.95-8.20  the record takes `+ 7 documents`, `+ board consent`
     7.50-8.40  lawyer review: AMBER draws into 04 AnswerLoop, `lawyer review`
     8.45-8.60  AnswerLoop's bar lights, `verifying` (amber)
    10.10       `verifying` -> `verified` (teal)
    10.30-10.80 amber draws AnswerLoop -> Legal Room; `+ state filing`,
                `+ review history` stack in; 11.60 `checked` stamps
    10.60-11.50 AMBER token rides the training lane into the LM core, `trains`
    11.50-12.30 the core blooms once and settles
    12.80       *next time, FinePrint knows* fades up
    16.80-18.00 content dissolves back to the resting frame; structure stays
   =========================================================================== */

.wf-fig{
  --wf-display:'Instrument Serif',ui-serif,Georgia,serif;
  --wf-body:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --wf-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --wf-t0:0s;
  position:relative; container-type:inline-size; border-radius:24px;
  font-family:var(--wf-body);
  /* the host page (.hcp) sets antialiased; on a navy plate that thins every
     light glyph, so `auto` is set EXPLICITLY here */
  -webkit-font-smoothing:auto;
  box-shadow:var(--wf-shadow);
}
.wf-fig svg{display:block;width:100%;height:auto}
.wf-fig .wf-lay-m{display:none;max-width:440px;margin:0 auto}

/* --- the layout swap: the wide layout only when it is genuinely wide --- */
@media (max-width:860px){
  .wf-fig{border-radius:20px}
  .wf-fig .wf-lay-d{display:none}
  .wf-fig .wf-lay-m{display:block}
}
@container (max-width:860px){
  .wf-fig{border-radius:20px}
  .wf-fig .wf-lay-d{display:none}
  .wf-fig .wf-lay-m{display:block}
}

/* ---------- palette: DARK (primary) ---------- */
.wf-fig.wf-dark{
  --wf-plate:#0C1A24; --wf-plateEdge:rgba(236,237,234,.10);
  --wf-card:#12242F;  --wf-cardEdge:rgba(236,237,234,.16);
  --wf-boxEdge:rgba(236,237,234,.10);
  --wf-field:#1B333F; --wf-fieldEdge:rgba(236,237,234,.22);
  --wf-title:#F2EDE3; --wf-bodyc:#BCC9D2; --wf-quiet:#7E8F99;
  --wf-rail:rgba(236,237,234,.20); --wf-dashc:rgba(188,201,210,.45);
  --wf-accent:#8FC1D4; --wf-accentDim:rgba(143,193,212,.34);
  --wf-amber:#F59E0B; --wf-ambertxt:#F59E0B; --wf-amberDim:rgba(245,158,11,.34);
  --wf-bullet:#F2EDE3; --wf-send:#8FC1D4; --wf-sendFg:#0C1A24;
  --wf-tokEdge:#0C1A24; --wf-tint:.12;
  --wf-washO:1; --wf-haloMax:1;
  --wf-shadow:0 30px 60px -34px rgba(6,14,20,.72),0 2px 8px -4px rgba(6,14,20,.5);
}
/* ---------- palette: LIGHT ---------- */
.wf-fig.wf-light{
  --wf-plate:#FFFFFF; --wf-plateEdge:#E4E8E9;
  --wf-card:#FFFFFF;  --wf-cardEdge:#DDE3E5;
  --wf-boxEdge:#E4E8E9;
  --wf-field:#F5F2EC; --wf-fieldEdge:#DDE3E5;
  --wf-title:#101E28; --wf-bodyc:#33454F; --wf-quiet:#566873;
  --wf-rail:#D6DEE1; --wf-dashc:#AFBDC5;
  --wf-accent:#17627A; --wf-accentDim:#AFBDC5;
  --wf-amber:#F59E0B; --wf-ambertxt:#C77C05; --wf-amberDim:#E8CFA0;
  --wf-bullet:#101E28; --wf-send:#17627A; --wf-sendFg:#FFFFFF;
  --wf-tokEdge:#FFFFFF; --wf-tint:.08;
  --wf-washO:0; --wf-haloMax:.35;
  --wf-shadow:0 22px 50px -30px rgba(12,26,36,.32),0 2px 6px -3px rgba(12,26,36,.08);
}

/* ---------- type scale ----------
   WIDE renders 1:1 at 1112px, so these in-viewBox px ARE rendered px there.
   STACKED has its own viewBox (360) and cap (440px): measured separately
   in NOTES.md.  Floor: nothing under 13.5px rendered anywhere. */
.wf-fig .wf-lay-d{--wf-fs-key:14px;--wf-fs-q:34px;--wf-fs-mono:18px;
  --wf-fs-row:17.5px;--wf-fs-st:15.5px;--wf-fs-t:21px;--wf-fs-sm:17px;
  --wf-fs-cap:20px}
.wf-fig .wf-lay-m{--wf-fs-key:15px;--wf-fs-q:30px;--wf-fs-mono:16px;
  --wf-fs-row:16.5px;--wf-fs-st:15px;--wf-fs-t:19.5px;--wf-fs-sm:16px;
  --wf-fs-cap:18px}

.wf-fig text{font-family:var(--wf-body);text-rendering:geometricPrecision}
.wf-fig .wf-key{font-size:var(--wf-fs-key);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;fill:var(--wf-quiet)}
.wf-fig .wf-q{font-family:var(--wf-display);font-size:var(--wf-fs-q);fill:var(--wf-title)}
.wf-fig .wf-mono{font-family:var(--wf-mono);font-size:var(--wf-fs-mono);
  font-weight:500;letter-spacing:-.01em}
.wf-fig .wf-slugq{fill:var(--wf-quiet)}
.wf-fig .wf-slugt{fill:var(--wf-accent)}
.wf-fig .wf-row{font-size:var(--wf-fs-row);fill:var(--wf-bodyc)}
.wf-fig .wf-st{font-family:var(--wf-mono);font-size:var(--wf-fs-st);fill:var(--wf-quiet)}
.wf-fig .wf-t{font-family:var(--wf-display);font-size:var(--wf-fs-t);
  font-weight:400;fill:var(--wf-title);letter-spacing:0}
.wf-fig .wf-tsep{fill:var(--wf-bodyc)}
.wf-fig .wf-sm{font-size:var(--wf-fs-sm);fill:var(--wf-bodyc)}
.wf-fig .wf-quiet{fill:var(--wf-quiet)}
.wf-fig .wf-cap{font-family:var(--wf-display);font-style:italic;
  font-size:var(--wf-fs-cap);fill:var(--wf-bodyc)}
.wf-fig .wf-tt{fill:var(--wf-accent)}
.wf-fig .wf-amb{fill:var(--wf-ambertxt)}
.wf-fig .wf-caret{fill:var(--wf-accent);opacity:0}
.wf-fig .wf-gh{fill-opacity:0}

/* ---------- flat parts ----------
   Static hairlines: 1px on a .5 centre line, non-scaling-stroke so they stay
   1px when the layout IS scaled.  Dashed and dash-animated strokes excluded. */
.wf-fig .wf-plate{fill:var(--wf-plate);stroke:var(--wf-plateEdge);stroke-width:1}
.wf-fig .wf-wash{opacity:var(--wf-washO)}
.wf-fig .wf-card{fill:var(--wf-card);stroke:var(--wf-cardEdge);stroke-width:1}
.wf-fig .wf-box{stroke:var(--wf-accentDim)}
.wf-fig .wf-field{fill:var(--wf-field);stroke:var(--wf-fieldEdge);stroke-width:1}
.wf-fig .wf-gate{fill:var(--wf-card);stroke:var(--wf-cardEdge);stroke-width:1}
.wf-fig .wf-p{fill:none;stroke:var(--wf-rail);stroke-width:1}
.wf-fig .wf-plate,.wf-fig .wf-card,.wf-fig .wf-field,.wf-fig .wf-gate,
.wf-fig .wf-p{vector-effect:non-scaling-stroke}
.wf-fig .wf-ce{shape-rendering:crispEdges}
.wf-fig .wf-dash{stroke:var(--wf-dashc);stroke-dasharray:2 3.6;
  stroke-linecap:round;vector-effect:none;shape-rendering:auto}
.wf-fig .wf-bar{fill:var(--wf-amber)}
.wf-fig .wf-send{fill:var(--wf-send)}
.wf-fig .wf-sendg{fill:var(--wf-sendFg)}
.wf-fig .wf-sendp{fill:none;stroke:var(--wf-accent);stroke-width:1.5;stroke-opacity:0}
.wf-fig .wf-flash{fill:none;stroke:var(--wf-accent);stroke-width:1.6;stroke-opacity:0}
.wf-fig .wf-ah{fill:var(--wf-accent)}
.wf-fig .wf-ah-l,.wf-fig .wf-ah-v,.wf-fig .wf-ah-t{fill:var(--wf-amber)}
.wf-fig .wf-h{fill:none;stroke:var(--wf-accent);stroke-width:2;
  stroke-linecap:butt;stroke-linejoin:miter;stroke-dashoffset:0}
.wf-fig .wf-amber{stroke:var(--wf-amber);stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round}
.wf-fig .wf-legA{stroke-dasharray:var(--wf-lA)}
.wf-fig .wf-legG{stroke-dasharray:var(--wf-lG)}
.wf-fig .wf-legC{stroke-dasharray:var(--wf-lC)}
.wf-fig .wf-legL{stroke-dasharray:var(--wf-lL)}
.wf-fig .wf-legV{stroke-dasharray:var(--wf-lV)}
.wf-fig .wf-legT{stroke-dasharray:var(--wf-lT)}
/* the gate's scoring sweep: a teal copy of the diamond that draws round it,
   then stays as the scored outline + a faint tint */
.wf-fig .wf-gated{fill:var(--wf-accent);fill-opacity:var(--wf-tint);
  stroke:var(--wf-accent);stroke-width:2;stroke-linejoin:round;
  stroke-dasharray:var(--wf-lD);stroke-dashoffset:0}
.wf-fig .wf-b{fill:var(--wf-bullet)}
.wf-fig .wf-tok{opacity:0;fill:var(--wf-accent);stroke:var(--wf-tokEdge);
  stroke-width:2;offset-rotate:0deg}
.wf-fig .wf-tam{fill:var(--wf-amber)}
.wf-fig .wf-glow{filter:drop-shadow(0 0 7px rgba(245,158,11,.62))}
.wf-fig .wf-ldot{fill:var(--wf-accent);offset-rotate:0deg}
.wf-fig .wf-ld{opacity:0}
.wf-fig .wf-halo{opacity:var(--wf-haloMax)}
.wf-fig .wf-ring{fill:none;stroke:var(--wf-accent);stroke-width:1.5;
  stroke-dasharray:6 5;transform-box:fill-box;transform-origin:center}
.wf-fig .wf-ring2{fill:none;stroke:var(--wf-accent);stroke-width:1;opacity:.5}
.wf-fig .wf-corec{fill:var(--wf-accent)}
.wf-fig .wf-pit{fill:var(--wf-plate)}
/* interim words are hidden in the finished frame */
.wf-fig .wf-gs1,.wf-fig .wf-ing{opacity:0}

/* ---------- the 18s clock ---------- */
.wf-fig .wf-w1{animation:wf-w1 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-w2{animation:wf-w2 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-w3{animation:wf-w3 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-w4{animation:wf-w4 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-w5{animation:wf-w5 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-w6{animation:wf-w6 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-c1{animation:wf-c1 18.0s steps(1,end) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-c2{animation:wf-c2 18.0s steps(1,end) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-c3{animation:wf-c3 18.0s steps(1,end) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-c4{animation:wf-c4 18.0s steps(1,end) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-c5{animation:wf-c5 18.0s steps(1,end) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-c6{animation:wf-c6 18.0s steps(1,end) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-sendp{animation:wf-sendp 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-legA{animation:wf-legA 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-tokA{animation:wf-tokA 18.0s ease-in-out infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-ah-a{animation:wf-ahA 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-box{animation:wf-box 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-b1{animation:wf-b1 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-s1{animation:wf-s1 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-b2{animation:wf-b2 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-s2{animation:wf-s2 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-b3{animation:wf-b3 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-s3{animation:wf-s3 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-b4{animation:wf-b4 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-s4{animation:wf-s4 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-ld{animation:wf-ld 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-ld1{animation:wf-drift 3s ease-in-out infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-ld2{animation:wf-drift 3s ease-in-out infinite;animation-delay:calc(var(--wf-t0,0s) + 1.0s)}
.wf-fig .wf-ld3{animation:wf-drift 3s ease-in-out infinite;animation-delay:calc(var(--wf-t0,0s) + 2.0s)}
.wf-fig .wf-ring{animation:wf-ringc 18.0s cubic-bezier(.4,0,.2,1) infinite,wf-spin 18.0s linear infinite;animation-delay:var(--wf-t0,0s),var(--wf-t0,0s)}
.wf-fig .wf-corec{animation:wf-corec 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-halo{animation:wf-halo 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-flash{animation:wf-bloom 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-legG{animation:wf-legG 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-tokG{animation:wf-tokG 18.0s ease-in-out infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-ah-g{animation:wf-ahG 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-gated{animation:wf-gated 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-gs1{animation:wf-gs1 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-gs2{animation:wf-gs2 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-legC{animation:wf-legC 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-tokC{animation:wf-tokC 18.0s ease-in-out infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-ah-c{animation:wf-ahC 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-lc{animation:wf-lc 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-legL{animation:wf-legL 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-tokL{animation:wf-tokL 18.0s ease-in-out infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-ah-l{animation:wf-ahL 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-ll{animation:wf-ll 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-bar{animation:wf-bar 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-ing{animation:wf-ing 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-ed{animation:wf-ed 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-legV{animation:wf-legV 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-tokV{animation:wf-tokV 18.0s ease-in-out infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-ah-v{animation:wf-ahV 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-legT{animation:wf-legT 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-tokT{animation:wf-tokT 18.0s ease-in-out infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-ah-t{animation:wf-ahT 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-lt{animation:wf-lt 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-l1{animation:wf-l1 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-l2{animation:wf-l2 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-l3{animation:wf-l3 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-l4{animation:wf-l4 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-chk{animation:wf-chk 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}
.wf-fig .wf-cap{animation:wf-cap 18.0s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--wf-t0,0s)}

@keyframes wf-w1{0%{fill-opacity:0}1.667%{fill-opacity:0}3.333%{fill-opacity:1}93.333%{fill-opacity:1}100%{fill-opacity:0}}
@keyframes wf-w2{0%{fill-opacity:0}2.889%{fill-opacity:0}4.556%{fill-opacity:1}93.333%{fill-opacity:1}100%{fill-opacity:0}}
@keyframes wf-w3{0%{fill-opacity:0}4.111%{fill-opacity:0}5.778%{fill-opacity:1}93.333%{fill-opacity:1}100%{fill-opacity:0}}
@keyframes wf-w4{0%{fill-opacity:0}5.333%{fill-opacity:0}7.0%{fill-opacity:1}93.333%{fill-opacity:1}100%{fill-opacity:0}}
@keyframes wf-w5{0%{fill-opacity:0}6.556%{fill-opacity:0}8.222%{fill-opacity:1}93.333%{fill-opacity:1}100%{fill-opacity:0}}
@keyframes wf-w6{0%{fill-opacity:0}7.778%{fill-opacity:0}9.444%{fill-opacity:1}93.333%{fill-opacity:1}100%{fill-opacity:0}}
@keyframes wf-c1{0%{opacity:0}2.556%{opacity:1}3.778%{opacity:0}100%{opacity:0}}
@keyframes wf-c2{0%{opacity:0}3.778%{opacity:1}5.0%{opacity:0}100%{opacity:0}}
@keyframes wf-c3{0%{opacity:0}5.0%{opacity:1}6.222%{opacity:0}100%{opacity:0}}
@keyframes wf-c4{0%{opacity:0}6.222%{opacity:1}7.444%{opacity:0}100%{opacity:0}}
@keyframes wf-c5{0%{opacity:0}7.444%{opacity:1}8.667%{opacity:0}100%{opacity:0}}
@keyframes wf-c6{0%{opacity:0}8.667%{opacity:1}10.667%{opacity:0}11.667%{opacity:0}100%{opacity:0}}
@keyframes wf-sendp{0%{stroke-opacity:0;r:var(--wf-fr)}9.444%{stroke-opacity:0;r:var(--wf-fr)}10.222%{stroke-opacity:.85;r:var(--wf-fr)}13.889%{stroke-opacity:0;r:var(--wf-fr2)}100%{stroke-opacity:0;r:var(--wf-fr2)}}
@keyframes wf-legA{0%{stroke-dashoffset:var(--wf-lA)}11.111%{stroke-dashoffset:var(--wf-lA)}13.889%{stroke-dashoffset:0}93.333%{stroke-dashoffset:0}100%{stroke-dashoffset:var(--wf-lA)}}
@keyframes wf-tokA{0%{opacity:0;offset-distance:0%}10.444%{opacity:0;offset-distance:0%}11.111%{opacity:1;offset-distance:0%}13.889%{opacity:1;offset-distance:100%}14.667%{opacity:0;offset-distance:100%}100%{opacity:0;offset-distance:100%}}
@keyframes wf-ahA{0%{fill:var(--wf-accentDim)}12.778%{fill:var(--wf-accentDim)}13.889%{fill:var(--wf-accent)}93.333%{fill:var(--wf-accent)}100%{fill:var(--wf-accentDim)}}
@keyframes wf-box{0%{stroke:var(--wf-boxEdge)}13.056%{stroke:var(--wf-boxEdge)}14.167%{stroke:var(--wf-accentDim)}93.333%{stroke:var(--wf-accentDim)}100%{stroke:var(--wf-boxEdge)}}
@keyframes wf-b1{0%{fill:var(--wf-rail)}15.0%{fill:var(--wf-rail)}16.111%{fill:var(--wf-accent)}18.889%{fill:var(--wf-accent)}20.0%{fill:var(--wf-bullet)}93.333%{fill:var(--wf-bullet)}100%{fill:var(--wf-rail)}}
@keyframes wf-s1{0%{fill-opacity:0}18.333%{fill-opacity:0}20.278%{fill-opacity:1}93.333%{fill-opacity:1}100%{fill-opacity:0}}
@keyframes wf-b2{0%{fill:var(--wf-rail)}18.056%{fill:var(--wf-rail)}19.167%{fill:var(--wf-accent)}21.944%{fill:var(--wf-accent)}23.056%{fill:var(--wf-bullet)}93.333%{fill:var(--wf-bullet)}100%{fill:var(--wf-rail)}}
@keyframes wf-s2{0%{fill-opacity:0}21.389%{fill-opacity:0}23.333%{fill-opacity:1}93.333%{fill-opacity:1}100%{fill-opacity:0}}
@keyframes wf-b3{0%{fill:var(--wf-rail)}21.111%{fill:var(--wf-rail)}22.222%{fill:var(--wf-accent)}25.0%{fill:var(--wf-accent)}26.111%{fill:var(--wf-bullet)}93.333%{fill:var(--wf-bullet)}100%{fill:var(--wf-rail)}}
@keyframes wf-s3{0%{fill-opacity:0}24.444%{fill-opacity:0}26.389%{fill-opacity:1}93.333%{fill-opacity:1}100%{fill-opacity:0}}
@keyframes wf-b4{0%{fill:var(--wf-rail)}24.167%{fill:var(--wf-rail)}25.278%{fill:var(--wf-accent)}28.056%{fill:var(--wf-accent)}29.167%{fill:var(--wf-bullet)}93.333%{fill:var(--wf-bullet)}100%{fill:var(--wf-rail)}}
@keyframes wf-s4{0%{fill-opacity:0}27.5%{fill-opacity:0}29.444%{fill-opacity:1}93.333%{fill-opacity:1}100%{fill-opacity:0}}
@keyframes wf-ld{0%{opacity:0}15.0%{opacity:0}16.944%{opacity:1}68.889%{opacity:1}70.833%{opacity:0}93.333%{opacity:0}100%{opacity:0}}
@keyframes wf-drift{0%{offset-distance:0%;opacity:0}14%{opacity:1}86%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes wf-spin{to{transform:rotate(360deg)}}
@keyframes wf-ringc{0%{stroke:var(--wf-accentDim)}13.889%{stroke:var(--wf-accentDim)}15.0%{stroke:var(--wf-accent)}93.333%{stroke:var(--wf-accent)}100%{stroke:var(--wf-accentDim)}}
@keyframes wf-corec{0%{fill:var(--wf-accentDim)}13.889%{fill:var(--wf-accentDim)}15.0%{fill:var(--wf-accent)}93.333%{fill:var(--wf-accent)}100%{fill:var(--wf-accentDim)}}
@keyframes wf-halo{0%{opacity:0}15.0%{opacity:0}18.333%{opacity:var(--wf-haloMax)}93.333%{opacity:var(--wf-haloMax)}100%{opacity:0}}
@keyframes wf-bloom{0%{stroke-opacity:0;r:var(--wf-fr)}63.889%{stroke-opacity:0;r:var(--wf-fr)}64.889%{stroke-opacity:.9;r:var(--wf-fr)}68.333%{stroke-opacity:0;r:var(--wf-fr2)}100%{stroke-opacity:0;r:var(--wf-fr2)}}
@keyframes wf-legG{0%{stroke-dashoffset:var(--wf-lG)}28.889%{stroke-dashoffset:var(--wf-lG)}31.944%{stroke-dashoffset:0}93.333%{stroke-dashoffset:0}100%{stroke-dashoffset:var(--wf-lG)}}
@keyframes wf-tokG{0%{opacity:0;offset-distance:0%}28.222%{opacity:0;offset-distance:0%}28.889%{opacity:1;offset-distance:0%}31.944%{opacity:1;offset-distance:100%}32.722%{opacity:0;offset-distance:100%}100%{opacity:0;offset-distance:100%}}
@keyframes wf-ahG{0%{fill:var(--wf-accentDim)}30.833%{fill:var(--wf-accentDim)}31.944%{fill:var(--wf-accent)}93.333%{fill:var(--wf-accent)}100%{fill:var(--wf-accentDim)}}
@keyframes wf-gated{0%{stroke-dashoffset:var(--wf-lD);fill-opacity:0}32.222%{stroke-dashoffset:var(--wf-lD);fill-opacity:0}37.222%{stroke-dashoffset:0;fill-opacity:0}37.222%{fill-opacity:0}38.333%{fill-opacity:var(--wf-tint)}93.333%{stroke-dashoffset:0;fill-opacity:var(--wf-tint)}100%{stroke-dashoffset:var(--wf-lD);fill-opacity:0}}
@keyframes wf-gs1{0%{opacity:0}32.5%{opacity:0}34.167%{opacity:1}36.389%{opacity:1}38.333%{opacity:0}93.333%{opacity:0}100%{opacity:0}}
@keyframes wf-gs2{0%{opacity:0}38.333%{opacity:0}40.278%{opacity:1}93.333%{opacity:1}100%{opacity:0}}
@keyframes wf-legC{0%{stroke-dashoffset:var(--wf-lC)}39.444%{stroke-dashoffset:var(--wf-lC)}42.778%{stroke-dashoffset:0}93.333%{stroke-dashoffset:0}100%{stroke-dashoffset:var(--wf-lC)}}
@keyframes wf-tokC{0%{opacity:0;offset-distance:0%}38.778%{opacity:0;offset-distance:0%}39.444%{opacity:1;offset-distance:0%}42.778%{opacity:1;offset-distance:100%}43.556%{opacity:0;offset-distance:100%}100%{opacity:0;offset-distance:100%}}
@keyframes wf-ahC{0%{fill:var(--wf-accentDim)}41.667%{fill:var(--wf-accentDim)}42.778%{fill:var(--wf-accent)}93.333%{fill:var(--wf-accent)}100%{fill:var(--wf-accentDim)}}
@keyframes wf-lc{0%{opacity:0}42.778%{opacity:0}44.722%{opacity:1}93.333%{opacity:1}100%{opacity:0}}
@keyframes wf-legL{0%{stroke-dashoffset:var(--wf-lL)}41.667%{stroke-dashoffset:var(--wf-lL)}46.667%{stroke-dashoffset:0}93.333%{stroke-dashoffset:0}100%{stroke-dashoffset:var(--wf-lL)}}
@keyframes wf-tokL{0%{opacity:0;offset-distance:0%}41.0%{opacity:0;offset-distance:0%}41.667%{opacity:1;offset-distance:0%}46.667%{opacity:1;offset-distance:100%}47.444%{opacity:0;offset-distance:100%}100%{opacity:0;offset-distance:100%}}
@keyframes wf-ahL{0%{fill:var(--wf-amberDim)}45.556%{fill:var(--wf-amberDim)}46.667%{fill:var(--wf-amber)}93.333%{fill:var(--wf-amber)}100%{fill:var(--wf-amberDim)}}
@keyframes wf-ll{0%{opacity:0}46.667%{opacity:0}48.611%{opacity:1}93.333%{opacity:1}100%{opacity:0}}
@keyframes wf-bar{0%{fill:var(--wf-amberDim)}45.833%{fill:var(--wf-amberDim)}46.944%{fill:var(--wf-amber)}93.333%{fill:var(--wf-amber)}100%{fill:var(--wf-amberDim)}}
@keyframes wf-ing{0%{opacity:0}47.778%{opacity:0}49.722%{opacity:1}54.167%{opacity:1}56.111%{opacity:0}93.333%{opacity:0}100%{opacity:0}}
@keyframes wf-ed{0%{opacity:0}56.111%{opacity:0}58.056%{opacity:1}93.333%{opacity:1}100%{opacity:0}}
@keyframes wf-legV{0%{stroke-dashoffset:var(--wf-lV)}57.222%{stroke-dashoffset:var(--wf-lV)}60.0%{stroke-dashoffset:0}93.333%{stroke-dashoffset:0}100%{stroke-dashoffset:var(--wf-lV)}}
@keyframes wf-tokV{0%{opacity:0;offset-distance:0%}56.556%{opacity:0;offset-distance:0%}57.222%{opacity:1;offset-distance:0%}60.0%{opacity:1;offset-distance:100%}60.778%{opacity:0;offset-distance:100%}100%{opacity:0;offset-distance:100%}}
@keyframes wf-ahV{0%{fill:var(--wf-amberDim)}58.889%{fill:var(--wf-amberDim)}60.0%{fill:var(--wf-amber)}93.333%{fill:var(--wf-amber)}100%{fill:var(--wf-amberDim)}}
@keyframes wf-legT{0%{stroke-dashoffset:var(--wf-lT)}58.889%{stroke-dashoffset:var(--wf-lT)}63.889%{stroke-dashoffset:0}93.333%{stroke-dashoffset:0}100%{stroke-dashoffset:var(--wf-lT)}}
@keyframes wf-tokT{0%{opacity:0;offset-distance:0%}58.222%{opacity:0;offset-distance:0%}58.889%{opacity:1;offset-distance:0%}63.889%{opacity:1;offset-distance:100%}64.667%{opacity:0;offset-distance:100%}100%{opacity:0;offset-distance:100%}}
@keyframes wf-ahT{0%{fill:var(--wf-amberDim)}62.778%{fill:var(--wf-amberDim)}63.889%{fill:var(--wf-amber)}93.333%{fill:var(--wf-amber)}100%{fill:var(--wf-amberDim)}}
@keyframes wf-lt{0%{opacity:0}63.889%{opacity:0}65.833%{opacity:1}93.333%{opacity:1}100%{opacity:0}}
@keyframes wf-l1{0%{opacity:0;transform:translateY(6px)}44.167%{opacity:0;transform:translateY(6px)}46.5%{opacity:1;transform:translateY(0)}93.333%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(6px)}}
@keyframes wf-l2{0%{opacity:0;transform:translateY(6px)}45.556%{opacity:0;transform:translateY(6px)}47.889%{opacity:1;transform:translateY(0)}93.333%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(6px)}}
@keyframes wf-l3{0%{opacity:0;transform:translateY(6px)}60.278%{opacity:0;transform:translateY(6px)}62.611%{opacity:1;transform:translateY(0)}93.333%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(6px)}}
@keyframes wf-l4{0%{opacity:0;transform:translateY(6px)}61.667%{opacity:0;transform:translateY(6px)}64.0%{opacity:1;transform:translateY(0)}93.333%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(6px)}}
@keyframes wf-chk{0%{opacity:0}64.444%{opacity:0}66.667%{opacity:1}93.333%{opacity:1}100%{opacity:0}}
@keyframes wf-cap{0%{opacity:0;transform:translateY(8px)}71.111%{opacity:0;transform:translateY(8px)}74.167%{opacity:1;transform:translateY(0)}93.333%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(8px)}}

/* ---------- reduced motion: same selectors, same specificity ----------
   The base rules above are already the finished frame. */
@media (prefers-reduced-motion:reduce){
  .wf-fig .wf-w1{animation:none}
  .wf-fig .wf-w2{animation:none}
  .wf-fig .wf-w3{animation:none}
  .wf-fig .wf-w4{animation:none}
  .wf-fig .wf-w5{animation:none}
  .wf-fig .wf-w6{animation:none}
  .wf-fig .wf-c1{animation:none}
  .wf-fig .wf-c2{animation:none}
  .wf-fig .wf-c3{animation:none}
  .wf-fig .wf-c4{animation:none}
  .wf-fig .wf-c5{animation:none}
  .wf-fig .wf-c6{animation:none}
  .wf-fig .wf-sendp{animation:none}
  .wf-fig .wf-legA{animation:none}
  .wf-fig .wf-tokA{animation:none}
  .wf-fig .wf-ah-a{animation:none}
  .wf-fig .wf-box{animation:none}
  .wf-fig .wf-b1{animation:none}
  .wf-fig .wf-s1{animation:none}
  .wf-fig .wf-b2{animation:none}
  .wf-fig .wf-s2{animation:none}
  .wf-fig .wf-b3{animation:none}
  .wf-fig .wf-s3{animation:none}
  .wf-fig .wf-b4{animation:none}
  .wf-fig .wf-s4{animation:none}
  .wf-fig .wf-ld{animation:none}
  .wf-fig .wf-ld1{animation:none}
  .wf-fig .wf-ld2{animation:none}
  .wf-fig .wf-ld3{animation:none}
  .wf-fig .wf-ring{animation:none}
  .wf-fig .wf-corec{animation:none}
  .wf-fig .wf-halo{animation:none}
  .wf-fig .wf-flash{animation:none}
  .wf-fig .wf-legG{animation:none}
  .wf-fig .wf-tokG{animation:none}
  .wf-fig .wf-ah-g{animation:none}
  .wf-fig .wf-gated{animation:none}
  .wf-fig .wf-gs1{animation:none}
  .wf-fig .wf-gs2{animation:none}
  .wf-fig .wf-legC{animation:none}
  .wf-fig .wf-tokC{animation:none}
  .wf-fig .wf-ah-c{animation:none}
  .wf-fig .wf-lc{animation:none}
  .wf-fig .wf-legL{animation:none}
  .wf-fig .wf-tokL{animation:none}
  .wf-fig .wf-ah-l{animation:none}
  .wf-fig .wf-ll{animation:none}
  .wf-fig .wf-bar{animation:none}
  .wf-fig .wf-ing{animation:none}
  .wf-fig .wf-ed{animation:none}
  .wf-fig .wf-legV{animation:none}
  .wf-fig .wf-tokV{animation:none}
  .wf-fig .wf-ah-v{animation:none}
  .wf-fig .wf-legT{animation:none}
  .wf-fig .wf-tokT{animation:none}
  .wf-fig .wf-ah-t{animation:none}
  .wf-fig .wf-lt{animation:none}
  .wf-fig .wf-l1{animation:none}
  .wf-fig .wf-l2{animation:none}
  .wf-fig .wf-l3{animation:none}
  .wf-fig .wf-l4{animation:none}
  .wf-fig .wf-chk{animation:none}
  .wf-fig .wf-cap{animation:none}
}