/* Production SOP animation — designer A version (source of truth: sop_anim/A_code/index.html, 18:29 "electric current" timings, JR-confirmed). Scoped to .sopa */
.sopa{--g:#02483E;--ln:#D9DFDC;--mu:#5d6b67;--ink:#1d2a27;--enter:cubic-bezier(.05,.7,.1,1);--std:cubic-bezier(.2,0,0,1);--sine:cubic-bezier(.45,.05,.55,.95);list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:relative}
@media (max-width:767px){.sop-flow{overflow-x:clip}}
.sopa .track{position:absolute;left:calc(100%/12);right:calc(100%/12);top:60px;height:1px;background:var(--ln)}
.sopa .track i{position:absolute;inset:0;background:var(--g);opacity:.35;transform:scaleX(0);transform-origin:left}
.sopa .step{text-align:center;padding:0 4px;opacity:0;transform:translateY(8px);margin:0;list-style:none}
.sopa .step::before,.sopa .step::after{content:none}
.sopa .icw{height:120px;display:grid;place-items:center}
.sopa .ic{position:relative;width:80px;height:80px;margin:0 auto;border-radius:50%;border:1px solid var(--ln);background:#fff;display:grid;place-items:center;z-index:1;isolation:auto}
.sopa .ic svg{width:40px;height:40px;fill:none;stroke:var(--g);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.sopa .d{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0}
.sopa .n{display:block;margin-top:14px;font-size:13px;letter-spacing:.12em;color:var(--mu);font-variant-numeric:tabular-nums}
.sopa .t{display:block;margin-top:6px;font-size:22px;font-weight:600;color:var(--ink);line-height:1.35}
.sopa .s{display:block;margin-top:8px;font-size:14px;white-space:nowrap;line-height:1.6;color:var(--mu)}
.sopa .t{word-break:keep-all;line-break:strict}
.sopa.sopa--t2 .t{min-height:2.7em;display:flex;align-items:flex-end;justify-content:center}
.sopa.sopa--wrap .s{white-space:normal;font-size:13px;text-wrap:pretty;max-width:18ch;margin-inline:auto}
.sopa .hero .ic{width:116px;height:116px;border-color:#E9D9C7}
.sopa .hero .ic svg{width:84px;height:84px;stroke-width:1.25}.sopa .hero .pot{stroke-width:1.75}
.sopa .glow{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;background:radial-gradient(closest-side,rgba(224,145,47,1),rgba(224,145,47,.35) 45%,rgba(224,145,47,0));opacity:0;z-index:-1;pointer-events:none}
.sopa .hero .t{color:var(--g)}
.sopa .fl{transform-box:fill-box;transform-origin:50% 100%;opacity:0}
.sopa .fl path{fill:none;stroke-width:.8}
.sopa .f1 path{stroke:#C8651B}.sopa .f2 path{stroke:#E0912F}.sopa .f3 path{stroke:#F2C46B;fill:rgba(242,196,107,.15)}
.sopa .steam{stroke:#9aa8a4;stroke-width:1;opacity:0}
/* play once on .is-in (IO threshold 0) */
.sopa{--step:860ms;--line:4800ms;--fire:5000ms}
.sopa.is-in .track i{animation:sopFill var(--line) cubic-bezier(.45,0,.55,1) 300ms forwards}
.sopa.is-in .step{animation:sopIn 900ms var(--enter) forwards;animation-delay:calc(300ms + var(--i)*var(--step))}
.sopa.is-in .d{animation:sopDraw 1200ms var(--enter) forwards;animation-delay:calc(450ms + var(--i)*var(--step))}
.sopa.is-in .glow{animation:sopGlowIn 1400ms var(--std) var(--fire) forwards,sopBreathe 4.2s var(--sine) calc(var(--fire) + 1400ms) infinite}
.sopa.is-in .f1{animation:sopShow 500ms var(--std) var(--fire) forwards,sopFa 1.8s var(--sine) calc(var(--fire) + 500ms) infinite}
.sopa.is-in .f2{animation:sopShow 500ms var(--std) calc(var(--fire) + 100ms) forwards,sopFb 2.4s var(--sine) calc(var(--fire) + 600ms) infinite}
.sopa.is-in .f3{animation:sopShow 500ms var(--std) calc(var(--fire) + 200ms) forwards,sopFc 3.1s var(--sine) calc(var(--fire) + 700ms) infinite}
.sopa.is-in .steam{animation:sopSteam 5s var(--sine) forwards}
.sopa.is-in .steam.a{animation-delay:calc(var(--fire) + 1000ms)}.sopa.is-in .steam.b{animation-delay:calc(var(--fire) + 1600ms)}
.sopa.is-off .fl,.sopa.is-off .glow{animation-play-state:paused}
@keyframes sopIn{to{opacity:1;transform:none}}
@keyframes sopDraw{0%{opacity:1}to{opacity:1;stroke-dashoffset:0}}
@keyframes sopFill{to{transform:scaleX(1)}}
@keyframes sopFillY{to{transform:scaleY(1)}}
@keyframes sopShow{to{opacity:1}}
@keyframes sopGlowIn{to{opacity:.18}}
@keyframes sopBreathe{0%,100%{opacity:.18}50%{opacity:.14}25%{opacity:.20}}
@keyframes sopFa{0%,100%{transform:scale(1,1) skewX(0)}30%{transform:scale(1.02,1.05) skewX(-2deg);opacity:.9}65%{transform:scale(.99,.95) skewX(1.5deg);opacity:1}}
@keyframes sopFb{0%,100%{transform:scale(1,1) skewX(0)}40%{transform:scale(.98,1.04) skewX(2deg);opacity:.86}75%{transform:scale(1.01,.94) skewX(-1deg)}}
@keyframes sopFc{0%,100%{transform:scale(1,1)}50%{transform:scale(1.02,1.05) skewX(-1.5deg);opacity:.85}}
@keyframes sopSteam{0%{opacity:0;transform:translateY(0)}25%{opacity:.3}100%{opacity:0;transform:translateY(-8px)}}
/* narrow container (e.g. FAQ answer) where notes would exceed 3 lines: vertical layout, same motion */
.sopa.sopa--stack{grid-template-columns:1fr;gap:0}
.sopa.sopa--stack .track{left:40px;right:auto;top:40px;bottom:70px;width:1px;height:auto}
.sopa.sopa--stack .track i{transform:scaleY(0);transform-origin:top}
.sopa.sopa--stack.is-in .track i{animation-name:sopFillY}
.sopa.sopa--stack .step{display:grid;grid-template-columns:80px 1fr;column-gap:20px;text-align:left;padding:0 0 22px;transform:translateY(8px)}
.sopa.sopa--stack.is-in .step{transform:none}
.sopa.sopa--stack .icw{grid-row:1/4;height:80px}.sopa.sopa--stack .ic{margin:0}
.sopa.sopa--stack .hero .ic{width:80px;height:80px}.sopa.sopa--stack .hero .ic svg{width:64px;height:64px}
.sopa.sopa--stack .glow{width:160px;height:160px;margin:-80px 0 0 -80px}
.sopa.sopa--stack .n{margin-top:8px}.sopa.sopa--stack .t{margin-top:2px;font-size:19px}.sopa.sopa--stack .s{white-space:normal;margin-top:2px;font-size:14px;max-width:56ch}
.sopa.sopa--stack .t{min-height:0;display:block}.sopa.sopa--stack .s{margin-inline:0}
:lang(en) .sopa.sopa--wrap:not(.sopa--stack) .s{max-width:none}
@media (max-width:767px){
 .sopa{grid-template-columns:1fr;margin-top:24px;gap:0}
 .sopa .track{left:32px;right:auto;top:32px;bottom:60px;width:1px;height:auto}
 .sopa .track i{transform:scaleY(0);transform-origin:top}
 .sopa.is-in .track i{animation-name:sopFillY}
 .sopa .step{display:grid;grid-template-columns:64px 1fr;column-gap:20px;text-align:left;padding:0 0 22px}
 .sopa .s{white-space:normal}.sopa .step .icw{grid-row:1/4;height:64px}.sopa .step .ic{margin:0;width:64px;height:64px}.sopa .ic svg{width:32px;height:32px}.sopa .n{margin-top:6px}.sopa .t{margin-top:2px;font-size:18px}.sopa .s{margin-top:2px}
 .sopa .hero .ic{width:64px;height:64px;margin:0}.sopa .hero .ic svg{width:52px;height:52px}
 .sopa .glow{width:180px;height:180px;margin:-90px 0 0 -90px}
 .sopa{--step:700ms;--line:calc(var(--n,6)*700ms);--fire:4200ms}
 .sopa .t{min-height:0;display:block}
}
@media (prefers-reduced-motion:reduce){
 .sopa .step,.sopa .d,.sopa .track i,.sopa.is-in .step,.sopa.is-in .d,.sopa.is-in .track i{animation:none!important;opacity:1;transform:none;stroke-dashoffset:0}
 .sopa .fl,.sopa .glow,.sopa .steam,.sopa.is-in .fl,.sopa.is-in .glow,.sopa.is-in .steam{animation:none!important}
 .sopa .fl{opacity:1}.sopa .glow{opacity:.18}.sopa .steam{display:none}
 .sopa .step{transition:opacity 120ms linear}
}

/* reduced motion (unified, designer ea367d8f): no animation, opacity-only 120ms */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:opacity 120ms linear!important;scroll-behavior:auto!important}}

.sopa .s{text-wrap:pretty}