/* the client's whole journey (#forloebet): the client's app (a phone-shaped card) and the behandler's desk (a wide card),
   with what goes back and forth flying between them, and the step's words in the middle (journey.js). Plays round and
   round while in view. A screen's resting style is its end state; the animations run from the start state
   while the step is on, so a screen sliding out keeps what happened on it. */

.flow {
    --step: 0;
    --brand: #3f8f6b;
    --brand-deep: #2f6f53;
    --screen: #ffffff;
    --ink: #10232c;
    --ink-2: #66777f;
    --rule: #e6ecef;
    --wash: #f2f6f8;
    --slide: cubic-bezier(.65, 0, .35, 1);
}
.flow-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.flow svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the stage: the two of them, and the words between (under them where the screen is narrower) ---- */
.flow-stage {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "client . pro" "caps caps caps";
    align-items: center;
    column-gap: 28px;
    padding: 24px 0 26px;
    user-select: none;
    -webkit-user-select: none;
}
/* a sideways swipe is ours (it changes the step); an up-or-down one still scrolls the page */
.flow-swipe { touch-action: pan-y; }
.dev { position: relative; isolation: isolate; }
/* each leans a little away from the words between them */
.dev.client { grid-area: client; transform: rotate(-4deg); }
.dev.pro { grid-area: pro; transform: rotate(3deg); }
.dev::before {
    content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%);
    border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--orange) 20%, transparent), transparent); pointer-events: none;
}
.dev.pro::before { width: 120%; background: radial-gradient(closest-side, color-mix(in srgb, var(--sky) 38%, transparent), transparent); }
.track { display: flex; height: 100%; transform: translateX(calc(var(--step) * -100%)); transition: transform .7s var(--slide); }
.scr { flex: 0 0 100%; position: relative; min-width: 0; overflow: hidden; color: var(--ink); line-height: 1.3; }

.who {
    position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px;
    border-radius: 999px; background: var(--orange); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(12, 44, 57, .18);
}
.pro .who { background: var(--teal-700); }
.who i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.who svg { width: 14px; height: 14px; stroke-width: 2.2; }
.who.hop { animation: flow-hop .55s var(--hop) both; }

/* ---- the client's app: a tall card with rounded corners ---- */
.m-ui {
    position: relative; font-size: 11px; width: 17em; height: 31em;
    border-radius: 2.6em; background: var(--screen); overflow: hidden;
    box-shadow: 0 0 0 1px rgba(12, 44, 57, .06), 0 26px 50px -14px rgba(12, 44, 57, .32);
}
.m-ui .scr { padding: 0 1.2em 1.2em; }
.ph-top { display: flex; align-items: center; gap: .55em; margin: 0 -1.2em 1em; padding: 1.5em 1.2em .8em; background: var(--brand); color: #fff; font-weight: 600; font-size: 1.05em; white-space: nowrap; }
.ph-top b { display: grid; place-items: center; flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: rgba(255, 255, 255, .25); font-size: .8em; }
.ph-h { font-size: 1.4em; font-weight: 600; margin-bottom: .25em; }
.ph-sub { color: var(--ink-2); font-size: .95em; margin-bottom: .9em; }
.ph-note { color: var(--ink-2); margin: .9em 0; }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.slots span { position: relative; padding: .6em 0; border: 1px solid var(--rule); border-radius: .65em; text-align: center; font-size: .95em; }
.slots .pick { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.tap { position: absolute; left: 50%; top: 50%; width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; border-radius: 50%; background: rgba(16, 35, 44, .25); opacity: 0; }
.ph-btn { display: block; margin-top: 1em; padding: .75em; border-radius: .8em; background: var(--brand); color: #fff; text-align: center; font-weight: 600; }
.q, .ck { display: flex; align-items: center; gap: .6em; padding: .6em 0; border-bottom: 1px solid var(--rule); font-size: .95em; }
.box { flex: none; display: grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: .35em; background: var(--brand); border: 1.5px solid var(--brand); }
.box::after { content: ""; width: .65em; height: .35em; border: solid #fff; border-width: 0 0 .17em .17em; transform: translateY(-.08em) rotate(-45deg); }
.field { display: flex; justify-content: space-between; margin-top: .9em; padding: .6em .75em; border: 1px solid var(--rule); border-radius: .65em; color: var(--ink-2); font-size: .95em; }
.field b { color: var(--ink); }
.field.wide { margin: 0 0 .9em; }
.appt { display: flex; align-items: center; gap: .7em; padding: .8em; border: 1px solid var(--rule); border-radius: .8em; background: var(--wash); }
.appt svg { flex: none; width: 2em; height: 2em; color: var(--brand); }
.appt span { font-weight: 600; font-size: 1.05em; }
.appt small { display: block; color: var(--ink-2); font-weight: 400; font-size: .85em; }
.ph-dim { display: grid; gap: .55em; margin-top: 1em; }
.ph-dim span { height: 2.6em; border-radius: .65em; background: var(--wash); }
.site .url { margin: 0 -1.2em .9em; padding: 1.4em 1em .6em; background: var(--wash); text-align: center; }
.site .url span { display: inline-block; padding: .2em .9em; border-radius: 999px; background: var(--screen); color: var(--ink-2); font-size: .85em; }
.site-hero { margin-bottom: .8em; padding: 1.1em 1em; border-radius: .8em; background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; }
.site-hero b { display: block; font-size: 1.35em; }
.site-hero span { font-size: .9em; opacity: .85; }
.pkg { position: relative; margin-bottom: .6em; padding: .75em .85em; border: 1px solid var(--rule); border-radius: .75em; }
.pkg > b { display: block; }
.pkg > span:not(.buy) { color: var(--ink-2); font-size: .9em; }
.buy { position: absolute; right: .7em; top: 50%; margin-top: -1em; display: grid; padding: .35em .85em; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 600; font-size: .9em; }
.buy > span { grid-area: 1 / 1; text-align: center; }
.buy .b1 { opacity: 0; }
.dist { display: flex; height: .8em; margin: .2em 0 1em; border-radius: .4em; overflow: hidden; }
.dist i { width: var(--w); }
.dist i:nth-child(1), .dist-key span:nth-child(1)::before { background: #f3b24a; }
.dist i:nth-child(2), .dist-key span:nth-child(2)::before { background: var(--periwinkle); }
.dist i:nth-child(3), .dist-key span:nth-child(3)::before { background: var(--brand); }
.dist-key { display: flex; gap: 1.2em; margin: -.4em 0 1em; color: var(--ink-2); font-size: .85em; }
.dist-key span::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .35em; border-radius: .2em; }
.meal { display: flex; align-items: center; gap: .55em; padding: .55em 0; border-bottom: 1px solid var(--rule); font-size: .95em; }
.meal i { width: .7em; height: .7em; border-radius: 50%; background: var(--brand); }
.meal b { margin-left: auto; }
.ring { position: relative; width: 9.5em; height: 9.5em; margin: .2em auto .9em; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3.4; }
.ring .trk { stroke: #e8eef1; }
.ring .val { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: 38; }
.ring span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--ink-2); font-size: .85em; }
.ring b { display: block; color: var(--ink); font-size: 1.7em; }
.post { display: flex; gap: .6em; margin-bottom: .6em; padding: .7em; border-radius: .8em; background: var(--wash); }
.post p { flex: 1; min-width: 0; font-size: .92em; line-height: 1.35; }
.post b { display: block; }
.post.reply { margin-left: 1.6em; background: #e8f3ed; }
.av { flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #f6d7a8; color: #7a4a05; font-style: normal; font-weight: 600; font-size: .85em; }
.av.kn { background: var(--brand); color: #fff; }
.news { display: flex; align-items: center; gap: .5em; margin-top: .8em; padding: .6em .7em; border: 1px dashed #cfd9de; border-radius: .7em; color: var(--ink-2); font-size: .9em; }
.news svg { flex: none; width: 1.5em; height: 1.5em; color: var(--brand); }
.chart { height: 11em; margin: .4em 0 .9em; padding: .6em; border-radius: .7em; background: var(--wash); }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.chart .goal { stroke: #9fb3bd; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.chart .curve { stroke: var(--brand); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.won { display: block; padding: .65em; border-radius: 999px; background: var(--orange); color: #fff; text-align: center; font-weight: 600; }

/* ---- the behandler's desk: a wide card with a window bar and the app's side menu ---- */
.d-ui {
    position: relative; font-size: 11px; width: 42em; height: 27em; display: flex; flex-direction: column;
    border-radius: 1.2em; background: var(--screen); overflow: hidden;
    box-shadow: 0 0 0 1px rgba(12, 44, 57, .06), 0 26px 50px -14px rgba(12, 44, 57, .32);
}
.d-bar { flex: none; display: flex; align-items: center; gap: .5em; height: 2.3em; padding: 0 1em; background: #eef2f4; border-bottom: 1px solid var(--rule); }
.d-bar i { width: .8em; height: .8em; border-radius: 50%; background: #cfd8dd; }
.d-ui .track { flex: 1; min-height: 0; }
.d-ui .scr { display: grid; grid-template-columns: 3.4em 1fr; }
.lt-side { display: flex; flex-direction: column; align-items: center; gap: .9em; padding-top: 1.3em; background: var(--teal-800); }
.lt-side i { width: 1.4em; height: 1.4em; border-radius: .4em; background: rgba(255, 255, 255, .22); }
.lt-side i:first-child { background: var(--orange); }
.lt-main { min-width: 0; padding: 1.1em 1.4em; }
.lt-h { margin-bottom: .8em; font-size: 1.25em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45em; height: 16em; }
.cal > div { display: flex; flex-direction: column; gap: .4em; padding: .45em; border-radius: .55em; background: var(--wash); }
.cal small { text-align: center; color: var(--ink-2); font-weight: 600; font-size: .85em; }
.cal span { display: block; height: var(--h, 2.2em); border-radius: .4em; background: #dbe4e9; }
.cal span.new { height: auto; padding: .4em; background: var(--orange); color: #fff; font-weight: 600; font-size: .9em; line-height: 1.25; }
.badge { display: inline-flex; align-items: center; gap: .5em; padding: .45em .9em; border-radius: 999px; background: #e3f2ea; color: var(--brand-deep); font-weight: 600; }
.badge svg { width: 1.4em; height: 1.4em; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; margin-top: 1.1em; }
.tiles span { padding: .7em; border-radius: .6em; background: var(--wash); font-weight: 600; }
.tiles small { display: block; color: var(--ink-2); font-weight: 400; font-size: .85em; }
.jr { padding: .9em 1em; border: 1px solid var(--rule); border-radius: .65em; }
.jr b { display: block; margin-bottom: .7em; }
.ln { display: block; width: var(--w, 80%); height: .65em; margin-bottom: .6em; border-radius: .35em; background: #dde5ea; }
.post .ln { margin: .5em 0 0; background: #c9dccf; }
.kg { display: inline-block; margin-top: .3em; padding: .3em .8em; border-radius: 999px; background: #e3f2ea; color: var(--brand-deep); font-weight: 600; font-size: .95em; }
.d-ui .ck { font-size: 1em; padding: .7em 0; }
.d-ui .box { background: var(--teal-700); border-color: var(--teal-700); }
.d-ui .chart { height: 9.5em; margin-top: 0; }
.d-ui .tiles { margin-top: 0; }
.days { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45em; }
.days span { padding: .8em .3em; border-radius: .5em; background: var(--wash); text-align: center; font-size: .85em; font-weight: 600; }
.mem { display: flex; align-items: center; gap: .7em; padding: .65em 0; border-bottom: 1px solid var(--rule); font-weight: 600; white-space: nowrap; }
.act { padding: .15em .6em; border-radius: 999px; background: #e3f2ea; color: var(--brand-deep); font-size: .8em; }
.act.quiet { background: #fdecd2; color: #9a5a00; }
.kc { margin-left: auto; width: 7em; height: .6em; border-radius: .3em; background: var(--wash); overflow: hidden; }
.kc i { display: block; width: var(--w); height: 100%; background: var(--brand); }

/* ---- what flies between them: a pill on an arc (the outer moves across, the inner rises and falls) ---- */
.tset { display: contents; }
.tok { position: absolute; z-index: 3; left: var(--ax); top: var(--ay); transform: translate(-50%, -50%); opacity: 0; pointer-events: none; }
.tok > b {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 10px;
    border-radius: 999px; background: var(--orange); color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap;
    box-shadow: 0 8px 18px rgba(224, 133, 10, .35);
}
.tok svg { width: 15px; height: 15px; stroke-width: 2.2; }
.tok.cp { --ax: var(--c-x); --ay: var(--c-y); --bx: var(--p-x); --by: var(--p-y); }
.tok.pc { --ax: var(--p-x); --ay: var(--p-y); --bx: var(--c-x); --by: var(--c-y); }
.tok.pc > b, .tok.mid > b { background: var(--teal-700); box-shadow: 0 8px 18px rgba(12, 44, 57, .3); }
.tok.mid { left: var(--m-x); top: var(--m-y); }
.tok.mid > b { padding: 10px 20px 10px 16px; font-size: 15px; }
.tok.gold > b { background: var(--orange); box-shadow: 0 8px 18px rgba(224, 133, 10, .35); }
.confetti { position: absolute; z-index: 2; left: var(--m-x); top: var(--m-y); }
.confetti i { position: absolute; width: 8px; height: 12px; border-radius: 2px; background: var(--orange); opacity: 0; }
.confetti i:nth-child(3n+1) { background: var(--teal-600); }
.confetti i:nth-child(3n+2) { background: var(--brand); width: 10px; height: 10px; border-radius: 50%; }
.confetti i:nth-child(4n) { background: var(--sky); }

/* ---- the step's animations: from the start state to the resting (end) state ---- */
.on > .tok.cp, .on > .tok.pc { animation: flow-fly var(--t) var(--d) cubic-bezier(.45, 0, .35, 1) both; }
.on > .tok.cp > b, .on > .tok.pc > b { animation: flow-arc var(--t) var(--d) linear both; }
.on > .tok.mid { animation: flow-stay .6s var(--d) cubic-bezier(.3, 1.5, .5, 1) both; }
.on > .confetti i { animation: flow-burst 1.5s 1.9s cubic-bezier(.15, .7, .3, 1) both; }
.on .tap { animation: flow-tap .6s .45s ease-out both; }
.on .pick { animation: flow-pick .25s .6s both; }
.on .press { animation: flow-press .35s var(--d) both; }
.on .pop { animation: flow-pop .5s var(--d) cubic-bezier(.3, 1.5, .5, 1) both; }
.on .grow { animation: flow-grow .45s var(--d) ease-out both; }
.on .grow-x { animation: flow-wipe .6s var(--d) ease-out both; }
.on .q .box, .on .ck .box { animation: flow-tick .25s var(--d) both; }
.on .typed { animation: flow-type .6s var(--d, 1.6s) steps(8) both; }
.on .buy { animation: flow-press .35s .8s both; }
.on .buy .b1 { animation: flow-out .2s 1s both; }
.on .buy .b2 { animation: flow-in .2s 1s both; }
.on .ring .val { animation: flow-ring 1.3s .3s ease-out both; }
.on .curve { animation: flow-draw 1.5s .3s ease-in-out both; }

@keyframes flow-fly {
    0% { left: var(--ax); top: var(--ay); opacity: 0; }
    12%, 86% { opacity: 1; }
    100% { left: var(--bx); top: var(--by); opacity: 0; }
}
@keyframes flow-arc {
    0% { transform: translateY(0) scale(.55); }
    15% { transform: translateY(-26px) scale(1); }
    35% { transform: translateY(-50px) scale(1.04) rotate(-3deg); }
    50% { transform: translateY(-56px) scale(1.05) rotate(0deg); }
    65% { transform: translateY(-50px) scale(1.04) rotate(3deg); }
    85% { transform: translateY(-26px) scale(1); }
    100% { transform: translateY(0) scale(.55); }
}
@keyframes flow-stay { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes flow-burst {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(.3); }
    75% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)); }
}
@keyframes flow-tap { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes flow-pick { from { background: transparent; border-color: var(--rule); color: var(--ink); } }
@keyframes flow-press { 50% { transform: scale(.93); } }
@keyframes flow-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes flow-grow { from { width: 0; } }
@keyframes flow-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes flow-tick { from { background: transparent; border-color: #c9d4da; } }
@keyframes flow-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes flow-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes flow-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes flow-ring { from { stroke-dashoffset: 97.4; } }
@keyframes flow-draw { from { stroke-dashoffset: 1; } }
@keyframes flow-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes flow-hop { 0%, 100% { transform: translateX(-50%); } 40% { transform: translateX(-50%) translateY(-9px); } 70% { transform: translateX(-50%) translateY(1px); } }

/* out of view everything stands still (the first step frozen at its start until the stage is seen) */
.flow.waiting .on, .flow.waiting .on *, .flow.waiting .who, .flow.waiting .bar > i { animation-play-state: paused !important; }

/* ---- captions ---- */
.flow-caps { grid-area: caps; overflow: hidden; margin-top: 36px; }
.flow-captions { list-style: none; padding: 0; margin: 0; display: flex; transform: translateX(calc(var(--step) * -100%)); transition: transform .7s .05s var(--slide); }
.flow-captions li { flex: 0 0 100%; padding: 0 8px; text-align: center; opacity: 0; transition: opacity .5s; }
.flow-captions li.on { opacity: 1; }
.flow-captions li > * { max-width: 560px; margin-left: auto; margin-right: auto; }
.flow-captions span { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-bottom: 10px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 600; }
.flow-captions h3 { font-size: 22px; margin-bottom: 6px; }
.flow-captions p { color: var(--muted); font-size: 16.5px; }

/* ---- the step buttons: a bar per step that fills while it plays ---- */
.flow-nav { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; }
.flow-dot {
    flex: 0 1 104px; display: grid; gap: 7px; padding: 8px 3px; border: 0; background: none; cursor: pointer;
    color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap;
}
.flow-dot.active, .flow-dot.done { color: var(--text); }
.bar { position: relative; display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.bar > i { position: absolute; inset: 0; background: var(--orange); transform: scaleX(0); transform-origin: left; }
.flow-dot.done .bar > i, .flow-dot.active .bar > i { transform: scaleX(1); }
.flow.playing .flow-dot.active .bar > i { animation: flow-fill var(--dwell) linear both; }
.flow.hold .bar > i { animation-play-state: paused; }
.flow-play {
    flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 8px; padding: 0;
    border: 1.5px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer;
}
.flow-play svg { display: none; width: 18px; height: 18px; }
.flow-play .i-play { fill: currentColor; }
.flow.playing .i-pause, .flow:not(.playing) .i-play { display: block; }
.flow.reduce .flow-play { display: none; }
.flow-dot:focus-visible, .flow-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* ---- a wide screen: the words centred, the two close in on either side (the desk a little narrower to fit) ---- */
@media (min-width: 1200px) {
    .flow-stage { grid-template-columns: 1fr 400px 1fr; grid-template-areas: "client caps pro"; }
    .dev.client { justify-self: end; }
    .dev.pro { justify-self: start; }
    .d-ui { font-size: 9.6px; width: 34em; }
    .flow-caps { align-self: end; margin-top: 0; }
}

/* ---- smaller screens: the same stage, scaled down; the step bars without words ---- */
@media (max-width: 999px) {
    .m-ui { font-size: 8.6px; }
    .d-ui { font-size: 7.6px; }
}
@media (max-width: 680px) {
    .flow-stage { padding: 20px 0 34px; }
    .m-ui { font-size: 6.4px; }
    .d-ui { font-size: 4.3px; }
    .who { bottom: -15px; padding: 3px 9px 3px 3px; font-size: 11px; gap: 4px; }
    .who i { width: 18px; height: 18px; }
    .who svg { width: 12px; height: 12px; }
    .tok > b { padding: 4px 9px 4px 7px; font-size: 11px; gap: 4px; }
    .tok.mid > b { padding: 6px 12px 6px 10px; font-size: 12px; }
    .tok svg { width: 12px; height: 12px; }
    .flow-caps { margin-top: 22px; }
    .flow-captions h3 { font-size: 20px; }
    .flow-captions p { font-size: 16px; }
    .flow-nav { gap: 4px; margin-top: 16px; }
    .flow-dot { flex: 1 1 0; gap: 0; padding: 14px 1px; }
    .flow-dot span { display: none; }
}

/* ---- no JS: the captions as a plain list, no buttons ---- */
.flow:not(.live) .flow-captions { display: grid; gap: 22px; transform: none; }
.flow:not(.live) .flow-captions li { opacity: 1; }
.flow:not(.live) .flow-nav { display: none; }

/* ---- reduced motion: no flying; each step shows how it ends ---- */
@media (prefers-reduced-motion: reduce) {
    .flow *, .flow *::before, .flow *::after { animation: none !important; transition: none !important; }
    .flow .tok:not(.mid), .flow .confetti { display: none; }
    .flow .on > .tok.mid { opacity: 1; }
}