/* Sharetru · File journey through the certified boundary (2026)
   The figure's own styles. Section, head, cards and buttons use Shared styles (st26). Reads the
   theme tokens (--st-*) with the ST26 aliases as fallbacks. The figure is authored in its END STATE;
   the choreography runs on a view timeline bound to the figure (no scroll-jacking), plays once where
   view timelines are unsupported (module.js adds .js-once / .in), and is off under reduced motion
   and when the theme's "Allow motion" is off (html[data-motion="off"]). */
.st26 .fjour__fig { margin: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0 0; padding: 0; view-timeline-name: --fjour; view-timeline-axis: block; }
.st26 .fjour__scroll { outline: none; }
.st26 .fjour__scroll:focus-visible { outline: 2px solid var(--st-accent, var(--accent)); outline-offset: 4px; border-radius: 12px; }
.st26 .fjour__svg { display: block; width: 100%; height: auto; font-family: inherit; overflow: visible; }
.st26 .fjour__stage { position: relative; }
/* the file pill sits over the SVG exactly where the drawing's right box receives it: x 950-1052, y 280-312 of 1100 x 468 */
.st26 .fjour__tok { position: absolute; left: 86.3636%; top: 59.8291%; width: 9.2727%; height: 6.8376%; margin: 0; pointer-events: none; }
.st26 .fjour__toksvg { display: block; width: 100%; height: 100%; overflow: visible; }
.st26 .fjour__swipe { display: none; }

/* ---- drawing ---------------------------------------------------------------- */
.st26 .fjour__svg .col { fill: var(--st-muted, var(--muted)); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; }
.st26 .fjour__svg .blab { fill: var(--st-accent-ink, var(--accent-ink)); font-size: 10px; font-weight: 800; letter-spacing: 0.1em; }
.st26 .fjour__svg .bound { fill: rgba(115, 88, 229, 0.045); stroke: var(--st-accent, var(--accent)); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.st26 .fjour__svg .box { fill: var(--st-surface, var(--surface)); stroke: var(--st-line-strong, var(--line-strong)); stroke-width: 1; }
.st26 .fjour__svg .person { fill: rgba(115, 88, 229, 0.16); stroke: var(--st-accent, var(--accent)); stroke-width: 1.5; }
.st26 .fjour__svg .personb { fill: none; stroke: var(--st-accent, var(--accent)); stroke-width: 1.5; stroke-linecap: round; }
.st26 .fjour__svg .bt { fill: var(--st-ink, var(--ink)); font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em; }
.st26 .fjour__svg .rt { fill: var(--st-ink-soft, var(--ink-soft)); font-size: 12px; font-weight: 600; }
.st26 .fjour__svg .layer { fill: var(--st-surface-2, var(--surface-2)); stroke: var(--st-line, var(--line)); stroke-width: 1; }
.st26 .fjour__svg .lt { fill: var(--st-ink-soft, var(--ink-soft)); font-size: 12px; font-weight: 700; }
.st26 .fjour__svg .tile { fill: var(--st-midnight, var(--midnight)); }
.st26 .fjour__svg .tlab { fill: var(--st-aqua, var(--aqua)); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; }
.st26 .fjour__svg .rail { stroke: rgba(255, 255, 255, 0.38); stroke-width: 2; stroke-dasharray: 4 6; stroke-linecap: round; }
.st26 .fjour__svg .railhead { fill: none; stroke: var(--st-accent, var(--accent)); stroke-width: 1.5; stroke-dasharray: 5 4; }
.st26 .fjour__svg .ahp { fill: var(--st-accent, var(--accent)); }
.st26 .fjour__svg .gc { fill: var(--st-green, var(--green)); stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.5; }
.st26 .fjour__svg .gn { fill: var(--st-midnight, var(--midnight)); font-size: 14px; font-weight: 900; }
.st26 .fjour__svg .gt { fill: #ffffff; font-size: 11.5px; font-weight: 700; }
.st26 .fjour__svg .logbg { fill: rgba(255, 255, 255, 0.08); stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.st26 .fjour__svg .logt { fill: #e9e7ff; font-family: var(--st-font-mono, ui-monospace, Menlo, Consolas, monospace); font-size: 11px; font-weight: 600; }
.st26 .fjour__tok .tokbg { fill: var(--st-green, var(--green)); stroke: var(--st-midnight, var(--midnight)); stroke-width: 1.5; }
.st26 .fjour__tok .tokt { fill: var(--st-midnight, var(--midnight)); font-family: var(--st-font-mono, ui-monospace, Menlo, Consolas, monospace); font-size: 12px; font-weight: 800; }

/* ---- the legend --------------------------------------------------------------- */
.st26 .fjour__legend { list-style: none; margin: 1.125rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); gap: 10px; }
.st26 .fjour__step { position: relative; display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; column-gap: 0.625rem; row-gap: 0.125rem; align-items: center; padding: 0.75rem 0.875rem; border: 1px solid var(--st-line, var(--line)); border-radius: 12px; background: var(--st-surface, var(--surface)); font-size: 0.8125rem; line-height: 1.45; }
.st26 .fjour__n { width: 1.5rem; height: 1.5rem; border-radius: 999px; display: grid; place-items: center; background: var(--st-green, var(--green)); color: var(--st-midnight, var(--midnight)); font-size: 0.75rem; font-weight: 900; grid-row: 1 / span 2; }
.st26 .fjour__ic { width: 1.25rem; height: 1.25rem; grid-row: 1 / span 2; }
.st26 .fjour__ic svg { width: 100%; height: 100%; fill: none; stroke: var(--st-accent-ink, var(--accent-ink)); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.st26 .fjour__step b { color: var(--st-ink, var(--ink)); font-weight: 800; }
.st26 .fjour__d { color: var(--st-ink-soft, var(--ink-soft)); grid-column: 3; }
.st26 .fjour__cap { margin: 1.125rem 0 0; font-size: 0.84375rem; line-height: 1.6; color: var(--st-muted, var(--muted)); }
.st26 .fjour__cap p { margin: 0; max-width: none; font-size: inherit; line-height: inherit; color: inherit; }
.st26 .fjour__cap b, .st26 .fjour__cap strong { color: var(--st-ink-soft, var(--ink-soft)); }
.st26 .fjour__cards { margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); padding: 0; list-style: none; }
.st26 .fjour__cards .bcard { align-items: flex-start; }
.st26 .fjour__cards .bcard > div { min-width: 0; }
.st26 .fjour__kicker { margin: 0 0 0.25rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--st-accent-ink, var(--accent-ink)); }
.st26 .fjour__cards .bcard p { margin: 0 0 0.5rem; }
.st26 .fjour__cards .bcard p:last-child { margin-bottom: 0; }
.st26 .fjour .sec-cta { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

/* ---- the choreography ------------------------------------------------------------
   Everything is drawn in its end state; the keyframes only describe where things were.
   The file pill is an HTML overlay (.fjour__tok), not part of the SVG, so its transform runs on the
   compositor and stays locked to the scroll instead of repainting the SVG on every frame. Its path is one
   continuous line with rounded corners (radius 40 figure units), sampled at constant speed with an eased
   start and landing, so it never changes speed or direction abruptly. translate() percentages are of the
   pill's own box (102 x 32 figure units). Each control lights as the pill passes over it, over 5% of the
   range. Generated 18 Oct 2026 (Claude); the before-version is in Claude outputs/st26_file_journey-before-2026-10-18. */
.st26 .fjour__fig .fjour__tok, .st26 .fjour__fig .gate, .st26 .fjour__fig .logline, .st26 .fjour__fig .fjour__step { animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); animation-fill-mode: both; }
.st26 .fjour__fig .fjour__tok { animation-name: fjour-tok; animation-timing-function: linear; will-change: transform; }
.st26 .fjour__fig .logline { animation-name: fjour-log; }
@keyframes fjour-tok {
  0% { transform: translate(-885.294%, 0%); }
  1% { transform: translate(-885.169%, 0%); }
  2% { transform: translate(-884.309%, 0%); }
  3% { transform: translate(-882.05%, 0%); }
  4% { transform: translate(-877.862%, 0%); }
  5% { transform: translate(-871.401%, 0%); }
  6% { transform: translate(-862.544%, 0%); }
  7% { transform: translate(-851.396%, 0%); }
  8% { transform: translate(-838.284%, 0%); }
  9% { transform: translate(-823.725%, 0%); }
  10% { transform: translate(-808.374%, 0%); }
  11% { transform: translate(-792.866%, 0%); }
  12% { transform: translate(-777.375%, -1.431%); }
  13% { transform: translate(-762.596%, -15.404%); }
  14% { transform: translate(-751.534%, -49.167%); }
  15% { transform: translate(-746.691%, -95.785%); }
  16% { transform: translate(-746.078%, -145.127%); }
  17% { transform: translate(-746.078%, -194.559%); }
  18% { transform: translate(-746.078%, -243.991%); }
  19% { transform: translate(-746.078%, -293.423%); }
  20% { transform: translate(-746.078%, -342.855%); }
  21% { transform: translate(-744.258%, -391.794%); }
  22% { transform: translate(-737.029%, -434.986%); }
  23% { transform: translate(-724.025%, -460.931%); }
  24% { transform: translate(-708.765%, -468.666%); }
  25% { transform: translate(-693.257%, -468.75%); }
  26% { transform: translate(-677.749%, -468.75%); }
  27% { transform: translate(-662.241%, -468.75%); }
  28% { transform: translate(-646.733%, -468.75%); }
  29% { transform: translate(-631.225%, -468.75%); }
  30% { transform: translate(-615.717%, -468.75%); }
  31% { transform: translate(-600.209%, -468.75%); }
  32% { transform: translate(-584.701%, -468.75%); }
  33% { transform: translate(-569.193%, -468.75%); }
  34% { transform: translate(-553.685%, -468.75%); }
  35% { transform: translate(-538.177%, -468.75%); }
  36% { transform: translate(-522.669%, -468.75%); }
  37% { transform: translate(-507.161%, -468.75%); }
  38% { transform: translate(-491.653%, -468.75%); }
  39% { transform: translate(-476.144%, -468.75%); }
  40% { transform: translate(-460.636%, -468.75%); }
  41% { transform: translate(-445.128%, -468.75%); }
  42% { transform: translate(-429.62%, -468.75%); }
  43% { transform: translate(-414.112%, -468.75%); }
  44% { transform: translate(-398.604%, -468.75%); }
  45% { transform: translate(-383.096%, -468.75%); }
  46% { transform: translate(-367.588%, -468.75%); }
  47% { transform: translate(-352.08%, -468.75%); }
  48% { transform: translate(-336.572%, -468.75%); }
  49% { transform: translate(-321.064%, -468.75%); }
  50% { transform: translate(-305.556%, -468.75%); }
  51% { transform: translate(-290.048%, -468.75%); }
  52% { transform: translate(-274.54%, -468.75%); }
  53% { transform: translate(-259.032%, -468.75%); }
  54% { transform: translate(-243.524%, -468.75%); }
  55% { transform: translate(-228.015%, -468.75%); }
  56% { transform: translate(-212.507%, -468.75%); }
  57% { transform: translate(-196.999%, -468.75%); }
  58% { transform: translate(-181.491%, -468.75%); }
  59% { transform: translate(-166.014%, -466.657%); }
  60% { transform: translate(-151.431%, -450.847%); }
  61% { transform: translate(-140.961%, -415.218%); }
  62% { transform: translate(-136.686%, -368%); }
  63% { transform: translate(-136.275%, -318.616%); }
  64% { transform: translate(-136.275%, -269.184%); }
  65% { transform: translate(-136.275%, -219.752%); }
  66% { transform: translate(-136.275%, -170.32%); }
  67% { transform: translate(-136.264%, -120.888%); }
  68% { transform: translate(-134.008%, -72.156%); }
  69% { transform: translate(-126.126%, -30.188%); }
  70% { transform: translate(-112.72%, -6.339%); }
  71% { transform: translate(-97.397%, -0.009%); }
  72% { transform: translate(-82.092%, 0%); }
  73% { transform: translate(-67.384%, 0%); }
  74% { transform: translate(-53.649%, 0%); }
  75% { transform: translate(-41.214%, 0%); }
  76% { transform: translate(-30.334%, 0%); }
  77% { transform: translate(-21.177%, 0%); }
  78% { transform: translate(-13.82%, 0%); }
  79% { transform: translate(-8.243%, 0%); }
  80% { transform: translate(-4.326%, 0%); }
  81% { transform: translate(-1.86%, 0%); }
  82% { transform: translate(-0.559%, 0%); }
  83% { transform: translate(-0.07%, 0%); }
  84%, 100% { transform: translate(0%, 0%); }
}
@keyframes fjour-log { 0%, 84% { opacity: 0; } 94%, 100% { opacity: 1; } }
.st26 .fjour__fig[data-steps="2"] .gate.g1 { animation-name: fjour-gate-2-1; }
.st26 .fjour__fig[data-steps="2"] .fjour__step.l1 { animation-name: fjour-legend-2-1; }
@keyframes fjour-gate-2-1 { 0%, 23.4% { opacity: 0.42; } 28.4%, 100% { opacity: 1; } }
@keyframes fjour-legend-2-1 { 0%, 23.4% { opacity: 0.78; } 28.4%, 100% { opacity: 1; } }
.st26 .fjour__fig[data-steps="2"] .gate.g2 { animation-name: fjour-gate-2-2; }
.st26 .fjour__fig[data-steps="2"] .fjour__step.l2 { animation-name: fjour-legend-2-2; }
@keyframes fjour-gate-2-2 { 0%, 55% { opacity: 0.42; } 60%, 100% { opacity: 1; } }
@keyframes fjour-legend-2-2 { 0%, 55% { opacity: 0.78; } 60%, 100% { opacity: 1; } }
.st26 .fjour__fig[data-steps="3"] .gate.g1 { animation-name: fjour-gate-3-1; }
.st26 .fjour__fig[data-steps="3"] .fjour__step.l1 { animation-name: fjour-legend-3-1; }
@keyframes fjour-gate-3-1 { 0%, 23.4% { opacity: 0.42; } 28.4%, 100% { opacity: 1; } }
@keyframes fjour-legend-3-1 { 0%, 23.4% { opacity: 0.78; } 28.4%, 100% { opacity: 1; } }
.st26 .fjour__fig[data-steps="3"] .gate.g2 { animation-name: fjour-gate-3-2; }
.st26 .fjour__fig[data-steps="3"] .fjour__step.l2 { animation-name: fjour-legend-3-2; }
@keyframes fjour-gate-3-2 { 0%, 39.2% { opacity: 0.42; } 44.2%, 100% { opacity: 1; } }
@keyframes fjour-legend-3-2 { 0%, 39.2% { opacity: 0.78; } 44.2%, 100% { opacity: 1; } }
.st26 .fjour__fig[data-steps="3"] .gate.g3 { animation-name: fjour-gate-3-3; }
.st26 .fjour__fig[data-steps="3"] .fjour__step.l3 { animation-name: fjour-legend-3-3; }
@keyframes fjour-gate-3-3 { 0%, 55% { opacity: 0.42; } 60%, 100% { opacity: 1; } }
@keyframes fjour-legend-3-3 { 0%, 55% { opacity: 0.78; } 60%, 100% { opacity: 1; } }
.st26 .fjour__fig[data-steps="4"] .gate.g1 { animation-name: fjour-gate-4-1; }
.st26 .fjour__fig[data-steps="4"] .fjour__step.l1 { animation-name: fjour-legend-4-1; }
@keyframes fjour-gate-4-1 { 0%, 23.4% { opacity: 0.42; } 28.4%, 100% { opacity: 1; } }
@keyframes fjour-legend-4-1 { 0%, 23.4% { opacity: 0.78; } 28.4%, 100% { opacity: 1; } }
.st26 .fjour__fig[data-steps="4"] .gate.g2 { animation-name: fjour-gate-4-2; }
.st26 .fjour__fig[data-steps="4"] .fjour__step.l2 { animation-name: fjour-legend-4-2; }
@keyframes fjour-gate-4-2 { 0%, 33.9% { opacity: 0.42; } 38.9%, 100% { opacity: 1; } }
@keyframes fjour-legend-4-2 { 0%, 33.9% { opacity: 0.78; } 38.9%, 100% { opacity: 1; } }
.st26 .fjour__fig[data-steps="4"] .gate.g3 { animation-name: fjour-gate-4-3; }
.st26 .fjour__fig[data-steps="4"] .fjour__step.l3 { animation-name: fjour-legend-4-3; }
@keyframes fjour-gate-4-3 { 0%, 44.5% { opacity: 0.42; } 49.5%, 100% { opacity: 1; } }
@keyframes fjour-legend-4-3 { 0%, 44.5% { opacity: 0.78; } 49.5%, 100% { opacity: 1; } }
.st26 .fjour__fig[data-steps="4"] .gate.g4 { animation-name: fjour-gate-4-4; }
.st26 .fjour__fig[data-steps="4"] .fjour__step.l4 { animation-name: fjour-legend-4-4; }
@keyframes fjour-gate-4-4 { 0%, 55% { opacity: 0.42; } 60%, 100% { opacity: 1; } }
@keyframes fjour-legend-4-4 { 0%, 55% { opacity: 0.78; } 60%, 100% { opacity: 1; } }
.st26 .fjour__fig[data-steps="5"] .gate.g1 { animation-name: fjour-gate-5-1; }
.st26 .fjour__fig[data-steps="5"] .fjour__step.l1 { animation-name: fjour-legend-5-1; }
@keyframes fjour-gate-5-1 { 0%, 23.4% { opacity: 0.42; } 28.4%, 100% { opacity: 1; } }
@keyframes fjour-legend-5-1 { 0%, 23.4% { opacity: 0.78; } 28.4%, 100% { opacity: 1; } }
.st26 .fjour__fig[data-steps="5"] .gate.g2 { animation-name: fjour-gate-5-2; }
.st26 .fjour__fig[data-steps="5"] .fjour__step.l2 { animation-name: fjour-legend-5-2; }
@keyframes fjour-gate-5-2 { 0%, 31.3% { opacity: 0.42; } 36.3%, 100% { opacity: 1; } }
@keyframes fjour-legend-5-2 { 0%, 31.3% { opacity: 0.78; } 36.3%, 100% { opacity: 1; } }
.st26 .fjour__fig[data-steps="5"] .gate.g3 { animation-name: fjour-gate-5-3; }
.st26 .fjour__fig[data-steps="5"] .fjour__step.l3 { animation-name: fjour-legend-5-3; }
@keyframes fjour-gate-5-3 { 0%, 39.2% { opacity: 0.42; } 44.2%, 100% { opacity: 1; } }
@keyframes fjour-legend-5-3 { 0%, 39.2% { opacity: 0.78; } 44.2%, 100% { opacity: 1; } }
.st26 .fjour__fig[data-steps="5"] .gate.g4 { animation-name: fjour-gate-5-4; }
.st26 .fjour__fig[data-steps="5"] .fjour__step.l4 { animation-name: fjour-legend-5-4; }
@keyframes fjour-gate-5-4 { 0%, 47.1% { opacity: 0.42; } 52.1%, 100% { opacity: 1; } }
@keyframes fjour-legend-5-4 { 0%, 47.1% { opacity: 0.78; } 52.1%, 100% { opacity: 1; } }
.st26 .fjour__fig[data-steps="5"] .gate.g5 { animation-name: fjour-gate-5-5; }
.st26 .fjour__fig[data-steps="5"] .fjour__step.l5 { animation-name: fjour-legend-5-5; }
@keyframes fjour-gate-5-5 { 0%, 55% { opacity: 0.42; } 60%, 100% { opacity: 1; } }
@keyframes fjour-legend-5-5 { 0%, 55% { opacity: 0.78; } 60%, 100% { opacity: 1; } }
.st26 .fjour__fig[data-steps="6"] .gate.g1 { animation-name: fjour-gate-6-1; }
.st26 .fjour__fig[data-steps="6"] .fjour__step.l1 { animation-name: fjour-legend-6-1; }
@keyframes fjour-gate-6-1 { 0%, 23.4% { opacity: 0.42; } 28.4%, 100% { opacity: 1; } }
@keyframes fjour-legend-6-1 { 0%, 23.4% { opacity: 0.78; } 28.4%, 100% { opacity: 1; } }
.st26 .fjour__fig[data-steps="6"] .gate.g2 { animation-name: fjour-gate-6-2; }
.st26 .fjour__fig[data-steps="6"] .fjour__step.l2 { animation-name: fjour-legend-6-2; }
@keyframes fjour-gate-6-2 { 0%, 29.7% { opacity: 0.42; } 34.7%, 100% { opacity: 1; } }
@keyframes fjour-legend-6-2 { 0%, 29.7% { opacity: 0.78; } 34.7%, 100% { opacity: 1; } }
.st26 .fjour__fig[data-steps="6"] .gate.g3 { animation-name: fjour-gate-6-3; }
.st26 .fjour__fig[data-steps="6"] .fjour__step.l3 { animation-name: fjour-legend-6-3; }
@keyframes fjour-gate-6-3 { 0%, 36% { opacity: 0.42; } 41%, 100% { opacity: 1; } }
@keyframes fjour-legend-6-3 { 0%, 36% { opacity: 0.78; } 41%, 100% { opacity: 1; } }
.st26 .fjour__fig[data-steps="6"] .gate.g4 { animation-name: fjour-gate-6-4; }
.st26 .fjour__fig[data-steps="6"] .fjour__step.l4 { animation-name: fjour-legend-6-4; }
@keyframes fjour-gate-6-4 { 0%, 42.4% { opacity: 0.42; } 47.4%, 100% { opacity: 1; } }
@keyframes fjour-legend-6-4 { 0%, 42.4% { opacity: 0.78; } 47.4%, 100% { opacity: 1; } }
.st26 .fjour__fig[data-steps="6"] .gate.g5 { animation-name: fjour-gate-6-5; }
.st26 .fjour__fig[data-steps="6"] .fjour__step.l5 { animation-name: fjour-legend-6-5; }
@keyframes fjour-gate-6-5 { 0%, 48.7% { opacity: 0.42; } 53.7%, 100% { opacity: 1; } }
@keyframes fjour-legend-6-5 { 0%, 48.7% { opacity: 0.78; } 53.7%, 100% { opacity: 1; } }
.st26 .fjour__fig[data-steps="6"] .gate.g6 { animation-name: fjour-gate-6-6; }
.st26 .fjour__fig[data-steps="6"] .fjour__step.l6 { animation-name: fjour-legend-6-6; }
@keyframes fjour-gate-6-6 { 0%, 55% { opacity: 0.42; } 60%, 100% { opacity: 1; } }
@keyframes fjour-legend-6-6 { 0%, 55% { opacity: 0.78; } 60%, 100% { opacity: 1; } }

/* Scroll-driven: the beats run while the rail (about 210px below the figure's top at the content width)
   travels from 80% to 15% of the viewport's height. No pinning, no scroll-jacking. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="off"]) .st26 .fjour__fig .fjour__tok,
    html:not([data-motion="off"]) .st26 .fjour__fig .gate,
    html:not([data-motion="off"]) .st26 .fjour__fig .logline,
    html:not([data-motion="off"]) .st26 .fjour__fig .fjour__step { animation-timeline: --fjour; animation-range: cover calc(20vh + 210px) cover calc(85vh + 210px); }
  }
}
/* No view timelines: module.js adds .js-once to the figure and .in when it scrolls into view; the beats play once over nine seconds. */
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="off"]) .st26 .fjour__fig.js-once .fjour__tok,
    html:not([data-motion="off"]) .st26 .fjour__fig.js-once .gate,
    html:not([data-motion="off"]) .st26 .fjour__fig.js-once .logline,
    html:not([data-motion="off"]) .st26 .fjour__fig.js-once .fjour__step { animation-duration: 9s; animation-delay: 0.3s; animation-iteration-count: 1; animation-play-state: paused; }
    html:not([data-motion="off"]) .st26 .fjour__fig.js-once.in .fjour__tok,
    html:not([data-motion="off"]) .st26 .fjour__fig.js-once.in .gate,
    html:not([data-motion="off"]) .st26 .fjour__fig.js-once.in .logline,
    html:not([data-motion="off"]) .st26 .fjour__fig.js-once.in .fjour__step { animation-play-state: running; }
  }
}
/* Motion off (visitor or theme): the finished picture, nothing moves. */
@media (prefers-reduced-motion: reduce) { .st26 .fjour__fig .fjour__tok, .st26 .fjour__fig .gate, .st26 .fjour__fig .logline, .st26 .fjour__fig .fjour__step { animation: none !important; } }
html[data-motion="off"] .st26 .fjour__fig .fjour__tok, html[data-motion="off"] .st26 .fjour__fig .gate, html[data-motion="off"] .st26 .fjour__fig .logline, html[data-motion="off"] .st26 .fjour__fig .fjour__step { animation: none !important; }
@media print { .st26 .fjour__fig .fjour__tok, .st26 .fjour__fig .gate, .st26 .fjour__fig .logline, .st26 .fjour__fig .fjour__step { animation: none !important; } }

/* ---- phones: the figure keeps an 860px minimum and scrolls sideways with a cue (playbook B6) ---- */
@media (max-width: 1000px) {
  .st26 .fjour__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.25rem; }
  .st26 .fjour__stage { min-width: 860px; }
  .st26 .fjour__swipe { display: block; margin: 0 0 0.625rem; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--st-accent-ink, var(--accent-ink)); }
}