.how-page{min-height:100svh}.how-content{padding-top:max(40px, env(safe-area-inset-top,0px));padding-bottom:max(80px, env(safe-area-inset-bottom,0px));justify-content:flex-start;width:100%;max-width:960px;margin:0 auto}.back-link{color:var(--text-dim);align-self:flex-start;align-items:center;gap:8px;margin-bottom:32px;font-size:14px;font-weight:500;text-decoration:none;transition:color .25s;display:inline-flex}.back-link svg{width:16px;height:16px}.back-link:hover{color:#fff}.product-pill{font-family:var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:#fffffff2;background:linear-gradient(135deg,#7d9bff26 0%,#50dca01f 100%);border:1px solid #7d9bff40;border-radius:999px;margin:0 0 20px;padding:12px 24px;font-size:clamp(14px,1.8vw,16px);font-weight:600;line-height:1;animation:3s ease-in-out infinite pill-glow;display:inline-block;box-shadow:0 4px 20px #7d9bff26}@keyframes pill-glow{0%,to{box-shadow:0 4px 20px #7d9bff26}50%{box-shadow:0 4px 28px #7d9bff40}}.how-title{font-family:var(--font-display);letter-spacing:-.02em;color:#fff;margin:0;font-size:clamp(36px,6vw,56px);font-weight:300;line-height:1.1}.how-lead{max-width:520px;color:var(--text-dim);margin:20px 0 0;font-size:clamp(15px,2vw,17px);line-height:1.6}.diagram-grid{grid-template-columns:1fr auto 1fr;align-items:stretch;gap:20px;width:100%;margin-top:48px;display:grid}.diagram-divider{color:#ffffff59;background:#ffffff08;border:1px solid #ffffff14;border-radius:50%;justify-content:center;align-self:center;align-items:center;width:36px;height:36px;display:flex}.diagram-divider svg{flex-shrink:0;width:18px;height:18px}.flow-panel{background:#ffffff04;border:1px solid #ffffff14;border-radius:16px;padding:24px 24px 20px;position:relative}.flow-panel__header{margin-bottom:20px}.flow-panel__badge{letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:4px 10px;font-size:10px;font-weight:600;display:inline-block}.flow-panel--before .flow-panel__badge{color:#ffb4a0f2;background:#ff64501a;border:1px solid #ff786433;animation:2.5s infinite badge-glitch}.flow-panel--after .flow-panel__badge{color:#b4c8fff2;background:#7d9bff1a;border:1px solid #7d9bff38}.flow-panel__title{font-family:var(--font-display);color:#fff;margin:10px 0 0;font-size:clamp(18px,2.5vw,22px);font-weight:400;line-height:1.2}.flow-diagram{padding-left:20px;position:relative}.flow-steps{margin:0;padding:0;list-style:none}.flow-track{pointer-events:none;width:1px;position:absolute;top:0;bottom:0;left:4px}.flow-track__line,.flow-track__fill{border-radius:1px;width:1px;position:absolute;top:0;left:0}.flow-track__line{background:#ffffff14;height:100%}.flow-panel--before .flow-track__fill{background:linear-gradient(#ff7864b3 0%,#ff503c73 100%);animation:.8s infinite fill-glitch;box-shadow:0 0 8px #ff645040}.flow-panel--after .flow-track__fill{background:linear-gradient(#7d9bffbf 0%,#50dca080 100%);box-shadow:0 0 8px #7d9bff33}.flow-track__fill{transform-origin:top;height:0;transition:height 1.1s cubic-bezier(.22,.61,.36,1)}.flow-track__head{background:var(--bg);border:2px solid #ffffff80;border-radius:50%;width:11px;height:11px;margin-top:-5.5px;margin-left:-5.5px;transition:top 1.1s cubic-bezier(.22,.61,.36,1);position:absolute;top:0;left:50%;box-shadow:0 0 12px #ffffff26}.flow-panel--before .flow-track__head{border-color:#ff7864e6;box-shadow:0 0 14px #ff645073}.flow-panel--after .flow-track__head{border-color:#7d9bffe6;box-shadow:0 0 14px #7d9bff66}.flow-step{margin:0;padding:6px 0;position:relative}.flow-step:before{content:"";background:var(--bg);box-sizing:border-box;opacity:0;border:2px solid #fff3;border-radius:50%;width:9px;height:9px;transition:transform .35s cubic-bezier(.34,1.4,.64,1),opacity .25s;position:absolute;top:50%;left:-20px;transform:translateY(-50%)scale(0)}.flow-step.is-active:before{opacity:1;transform:translateY(-50%)scale(1)}.flow-panel--before .flow-step:before{border-color:#ff786480}.flow-panel--after .flow-step:before{border-color:#7d9bff8c}.flow-panel--before .flow-step--end.is-active:before{background:#ff503c40;border-color:#ff6450d9}.flow-panel--after .flow-step--end.is-active:before{background:#3cc88c40;border-color:#50dca0d9}.flow-step__label{opacity:.35;transform-origin:0;border-radius:8px;padding:8px 14px;font-size:14px;font-weight:500;line-height:1.35;transition:opacity .35s,transform .4s cubic-bezier(.34,1.4,.64,1),box-shadow .35s;display:block;transform:scale(.96)}.flow-step.is-active .flow-step__label{opacity:1;transform:scale(1)}.flow-panel--before .flow-step__label{color:#ffdcd2eb;background:#ff503c0f;border:1px solid #ff78641f}.flow-panel--after .flow-step__label{color:#dce6fff2;background:#7d9bff0f;border:1px solid #7d9bff24}.flow-panel--before .flow-step.is-active .flow-step__label{box-shadow:0 0 20px #ff64501f}.flow-panel--after .flow-step.is-active .flow-step__label{box-shadow:0 0 20px #7d9bff1f}.flow-panel--before .flow-step--end.is-active .flow-step__label{color:#ffaa96f2;background:#ff3c321a;border-color:#ff64503d;font-weight:600}.flow-panel--after .flow-step--end.is-active .flow-step__label{color:#a0ffd2f2;background:#3cc88c1a;border-color:#50dca03d;font-weight:600}.how-actions{opacity:1;margin-top:56px;animation:none}@media (width<=720px){.how-content{max-width:520px;padding-left:20px;padding-right:20px}.product-pill{letter-spacing:.06em;margin-bottom:16px;padding:10px 20px;font-size:13px}.diagram-grid{grid-template-columns:1fr;gap:16px;margin-top:40px}.diagram-divider{background:0 0;border:none;border-radius:0;width:100%;height:auto;padding:4px 0}.diagram-divider:before,.diagram-divider:after{content:"";background:#ffffff14;flex:1;height:1px}.diagram-divider svg{transform:rotate(90deg)}.flow-panel{padding:20px 18px 16px}.flow-panel__header{margin-bottom:16px}.flow-step__label{padding:7px 12px;font-size:13px}.how-actions{width:100%;max-width:340px;margin-top:44px}.how-actions .btn{justify-content:center;width:100%}}@media (prefers-reduced-motion:reduce){.flow-track__fill,.flow-track__head,.flow-step:before,.flow-step__label{transition:none}.flow-step__label{opacity:1;transform:none}.flow-step.is-active:before{opacity:1;transform:translateY(-50%)scale(1)}.flow-panel--before .flow-panel__badge,.flow-panel--before,.flow-panel--before .flow-step__label,.flow-panel--before .flow-track__fill,.flow-panel--before .flow-panel__title,.flow-panel--after .flow-step.is-active .flow-step__label{animation:none}}.flow-panel--after{transition:transform .3s,box-shadow .3s}.flow-panel--after:hover{transform:translateY(-2px);box-shadow:0 8px 32px #7d9bff26}.flow-panel--after .flow-panel__badge{transition:transform .3s,box-shadow .3s}.flow-panel--after:hover .flow-panel__badge{transform:scale(1.05);box-shadow:0 0 12px #7d9bff4d}.flow-panel--after .flow-step__label{transition:transform .3s,box-shadow .3s}.flow-panel--after .flow-step.is-active .flow-step__label{animation:.5s forwards smooth-appear}@keyframes smooth-appear{0%{opacity:0;transform:scale(.9)translateY(4px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes badge-glitch{0%,to{opacity:1;transform:translate(0)}20%{opacity:.9;transform:translate(-2px,1px)}21%{opacity:1;transform:translate(2px,-1px)}40%{opacity:.85;transform:translate(-1px,2px)}41%{opacity:1;transform:translate(1px,-2px)}60%{opacity:.8;transform:translate(3px,1px)}61%{opacity:1;transform:translate(-3px,-1px)}80%{opacity:.9;transform:translate(-1px,-2px)}81%{opacity:1;transform:translate(1px,2px)}}@keyframes fill-glitch{0%,to{opacity:1;transform:scaleY(1)}15%{opacity:.8;transform:scaleY(1.05)}16%{opacity:1;transform:scaleY(.95)}30%{opacity:.7;transform:scaleY(1.1)}31%{opacity:1;transform:scaleY(1)}45%{opacity:.85;transform:scaleY(.9)}46%{opacity:1;transform:scaleY(1.05)}60%{opacity:.75;transform:scaleY(1.15)}61%{opacity:1;transform:scaleY(1)}75%{opacity:.9;transform:scaleY(.95)}76%{opacity:1;transform:scaleY(1)}}.flow-panel--before{animation:3s infinite panel-glitch}@keyframes panel-glitch{0%,to{border-color:#ffffff14;transform:translate(0)}15%{border-color:#ff786426;transform:translate(-1px)}16%{border-color:#ffffff14;transform:translate(1px)}30%{border-color:#ff786433;transform:translateY(-1px)}31%{border-color:#ffffff14;transform:translateY(1px)}45%{border-color:#ff78642e;transform:translate(-2px,1px)}46%{border-color:#ffffff14;transform:translate(2px,-1px)}60%{border-color:#ff786438;transform:translate(1px,2px)}61%{border-color:#ffffff14;transform:translate(-1px,-2px)}75%{border-color:#ff786426;transform:translate(-1px,1px)}76%{border-color:#ffffff14;transform:translate(1px,-1px)}}.flow-panel--before .flow-step__label{animation:4s infinite text-glitch}@keyframes text-glitch{0%,to{text-shadow:none;transform:scale(.96)}10%{text-shadow:2px 0 #ff64504d,-2px 0 #ff64504d;transform:scale(.96)translate(1px)}11%{text-shadow:-2px 0 #ff64504d,2px 0 #ff64504d;transform:scale(.96)translate(-1px)}25%{text-shadow:1px 1px #ff645033,-1px -1px #ff645033;transform:scale(.96)}26%{text-shadow:none;transform:scale(.96)}40%{text-shadow:3px 0 #ff645040,-3px 0 #ff645040;transform:scale(.96)translate(-2px)}41%{text-shadow:-3px 0 #ff645040,3px 0 #ff645040;transform:scale(.96)translate(2px)}55%{text-shadow:2px 2px #ff645026,-2px -2px #ff645026;transform:scale(.96)}56%{text-shadow:none;transform:scale(.96)}70%{text-shadow:1px 0 #ff645033,-1px 0 #ff645033;transform:scale(.96)translate(1px)}71%{text-shadow:-1px 0 #ff645033,1px 0 #ff645033;transform:scale(.96)translate(-1px)}85%{text-shadow:none;transform:scale(.96)}}.flow-panel--before .flow-panel__title{animation:3.5s infinite title-glitch}@keyframes title-glitch{0%,to{text-shadow:none;transform:translate(0)}12%{text-shadow:2px 0 #ff645066,-2px 0 #ff645066;transform:translate(-1px)}13%{text-shadow:-2px 0 #ff645066,2px 0 #ff645066;transform:translate(1px)}25%{text-shadow:none;transform:translate(0)}37%{text-shadow:3px 0 #ff64504d,-3px 0 #ff64504d;transform:translate(2px)}38%{text-shadow:-3px 0 #ff64504d,3px 0 #ff64504d;transform:translate(-2px)}50%{text-shadow:none;transform:translate(0)}62%{text-shadow:1px 1px #ff645059,-1px -1px #ff645059;transform:translate(-1px)}63%{text-shadow:-1px -1px #ff645059,1px 1px #ff645059;transform:translate(1px)}75%{text-shadow:none;transform:translate(0)}87%{text-shadow:2px 0 #ff645040,-2px 0 #ff645040;transform:translate(1px)}88%{text-shadow:-2px 0 #ff645040,2px 0 #ff645040;transform:translate(-1px)}}