.how-to-hero{width:100%;background:#fff;padding:40px 20px 8px}.how-to-inner,.how-to-main{max-width:1040px;margin:0 auto}.how-to-main{padding:0 20px 48px}.how-to-cta-bottom{width:100%;background:#f7f7ff;padding:48px 20px;text-align:center;margin-bottom:-40px}.how-to-cta-bottom p{font-size:16px;color:#475569;margin-bottom:20px;line-height:1.5}.how-to-hero h1{font-size:28px;font-weight:700;color:#0F172A;margin-bottom:12px;line-height:1.3}.how-to-intro{font-size:16px;line-height:1.6;color:#475569;margin-bottom:40px}.how-to-progress{display:flex;align-items:center;justify-content:center;gap:0;position:-webkit-sticky;position:sticky;top:60px;z-index:50;padding:12px 20px;margin:10px -20px 30px}.how-to-progress.stuck{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 8px rgba(0,0,0,.08);margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}.how-to-progress-step{display:flex;align-items:center;cursor:pointer;gap:0}.how-to-progress-circle{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;background:#E2E8F0;color:#475569;transition:background .3s ease,color .3s ease;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.1)}.how-to-progress-circle:focus-visible{outline:2px solid #aeaeff;outline-offset:2px}.how-to-progress-circle:focus:not(:focus-visible){outline:none}.how-to-progress-circle.active{background:#aeaeff;color:#fff}.how-to-progress-circle.completed{background:#16A34A;color:#fff}.how-to-progress-line{width:48px;height:3px;background:#CBD5E1;transition:background .3s ease}.how-to-progress-line.completed{background:#16A34A}@keyframes step-complete-pulse{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1)}}.how-to-progress-circle.completing{animation:step-complete-pulse .35s ease-out}.how-to-step{margin-bottom:56px;opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .5s ease}.how-to-step.visible{opacity:1;transform:translateY(0)}.how-to-step-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}.how-to-step-number{width:32px;height:32px;border-radius:50%;background:#aeaeff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;flex-shrink:0}.how-to-step h2{font-size:22px;font-weight:600;color:#0F172A;margin:0;line-height:1.3}.how-to-step-text{font-size:15px;line-height:1.6;color:#475569;margin-bottom:20px;padding-left:44px}.how-to-mock{border-radius:16px;padding:0;position:relative;overflow:visible;border:none;background:none}.how-to-mock-form{background:#aeaeff;border-radius:24px;box-shadow:0 4px 15px rgba(93,93,255,.3);padding:20px;display:flex;flex-direction:column;gap:8px}.how-to-mock-form-head{margin-bottom:4px}.how-to-mock-form-title{font-size:22px;font-weight:800;color:#000;letter-spacing:-.5px}.how-to-mock-form-wrapper{gap:8px}.how-to-mock-form-wrapper,.how-to-mock-select-field{display:flex;flex-direction:column;position:relative}.how-to-mock-select-field{gap:4px}.how-to-mock-field-label{font-size:13px;color:#000;font-weight:600;opacity:.7;margin-left:8px}.how-to-mock-field-wrapper{background:#fff;border-radius:20px;height:68px;box-shadow:0 2px 5px rgba(0,0,0,.05);display:flex;align-items:center;padding:0 16px;transition:box-shadow .3s ease}.how-to-mock-field-wrapper.highlight{box-shadow:0 0 0 3px rgba(30,41,59,.3),0 2px 5px rgba(0,0,0,.05)}.how-to-mock-preview{flex:1.8 1;display:flex;align-items:center;gap:10px;padding-left:0;min-width:0}.how-to-mock-currency-icon{width:32px;height:32px;border-radius:50%;flex-shrink:0;object-fit:contain}.how-to-mock-currency-text{font-size:17px;font-weight:700;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.how-to-mock-divider{width:1px;height:60%;background:#B0B0B0;flex-shrink:0;margin:0 12px}.how-to-mock-input-box{flex:1.2 1;text-align:right;font-size:20px;font-weight:600;color:#0F172A;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.how-to-mock-input-value{font-size:20px;font-weight:600;color:#0F172A}.how-to-mock-input-value.typing{border-right:2px solid #1a1a1a;animation:how-to-blink-cursor .8s step-end infinite;padding-right:2px}@keyframes how-to-blink-cursor{0%,to{border-color:#1A1A1A}50%{border-color:transparent}}.how-to-mock-swap-wrapper{position:absolute;left:50%;top:50%;margin-top:-15px;margin-left:-26px;z-index:10}.how-to-mock-swap-btn,.how-to-mock-swap-wrapper{display:flex;align-items:center;justify-content:center}.how-to-mock-swap-btn{width:52px;height:52px;background:#1A1A1A;border:4px solid #aeaeff;border-radius:50%;cursor:default;transform:rotate(90deg)}.how-to-mock-swap-btn svg{width:22px;height:22px;color:#fff}.how-to-mock-rates{display:flex;flex-direction:column;gap:12px;background:#F8FAFC;border:1px solid #e2e8f0;border-radius:16px;padding:16px}.how-to-mock-rate-card{background:#fff;border-radius:16px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.06);border:1px solid transparent;opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease,border-color .3s ease;position:relative}.how-to-mock-rate-card.card-visible{opacity:1;transform:translateY(0)}.how-to-mock-rate-card.highlight-click{transform:scale(.98);box-shadow:0 0 0 3px rgba(40,167,69,.2),0 2px 8px rgba(0,0,0,.06)}.how-to-mock-card-top{display:flex;justify-content:space-between;align-items:flex-start}.how-to-mock-card-left{display:flex;flex-direction:column;gap:6px;max-width:50%}.how-to-mock-exchanger-name{font-size:16px;font-weight:700;color:#1A1A1A}.how-to-mock-rating-wrapper{display:flex;align-items:center;gap:4px}.how-to-mock-rating-wrapper svg{width:14px;height:14px}.how-to-mock-trust-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;border-radius:8px;padding:3px 8px;margin-top:2px}.how-to-mock-trust-badge.gold_status_badge{background:#fce6aa;color:#9b6b09}.how-to-mock-trust-badge.new_status_badge{background:#ccf5d7;color:#235c25}.how-to-mock-trust-badge.diamond_status_badge{background:#cce0f9;color:#22456b}.how-to-mock-trust-badge.premium_status_badge{background:#e5d5f2;color:#522b7c}.how-to-mock-status-icon{width:14px;height:14px;object-fit:contain;flex-shrink:0}.how-to-mock-dropdown-arrow{flex-shrink:0;margin-left:6px;opacity:.5}.how-to-mock-location-selectors{display:flex;flex-direction:row;gap:10px;margin-top:12px;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}.how-to-mock-location-selectors.location-visible{opacity:1;transform:translateY(0);pointer-events:auto}.how-to-mock-location-field{flex:1 1;min-width:0}.how-to-mock-location-field .how-to-mock-field-wrapper{height:52px;cursor:pointer}.how-to-mock-location-field .how-to-mock-preview{flex:1 1;justify-content:space-between}.how-to-mock-action-container{display:flex;align-items:center}.how-to-mock-card-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.how-to-mock-rate-calc-text{font-size:12px;color:#64748B;font-weight:500}.how-to-mock-rate-result-row{display:flex;align-items:baseline;gap:4px}.how-to-mock-rate-value-big{font-size:20px;font-weight:800;color:#1A1A1A;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.how-to-mock-rate-currency-small{font-size:14px;font-weight:600;color:#718096}.how-to-mock-card-divider{height:1px;background:#EDF2F7;margin:12px 0}.how-to-mock-card-bottom{display:flex;justify-content:space-between;align-items:center}.how-to-mock-limits{display:flex;flex-direction:column;gap:2px}.how-to-mock-limit-row{font-size:12px;display:flex;gap:4px}.how-to-mock-limit-label{color:#64748B}.how-to-mock-limit-value{color:#4A5568;font-weight:600}.how-to-mock-exchange-btn{background:#28A745;border-radius:20px;padding:8px 20px;font-size:14px;font-weight:700;color:#fff;cursor:default;display:flex;align-items:center;gap:6px;box-shadow:0 2px 4px rgba(40,167,69,.2);transition:transform .2s ease,box-shadow .2s ease;white-space:nowrap}.how-to-mock-exchange-btn svg{width:14px;height:14px}.how-to-mock-exchange-btn.clicked{transform:scale(.95);box-shadow:0 1px 2px rgba(40,167,69,.3)}.how-to-cta-button{display:inline-block;background:#16A34A;color:#fff;text-decoration:none;padding:16px 40px;border-radius:10px;font-size:16px;font-weight:600;transition:all .2s ease}.how-to-cta-button:hover{background:#15803D;transform:translateY(-2px);box-shadow:0 4px 16px rgba(22,163,74,.3)}.how-to-cta-button:active{transform:scale(.98)}@keyframes how-to-fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes how-to-highlight-field{0%{border-color:#E2E8F0;box-shadow:none}30%{border-color:#aeaeff;box-shadow:0 0 0 3px rgba(174,174,255,.2)}to{border-color:#aeaeff;box-shadow:0 0 0 3px rgba(174,174,255,.2)}}@keyframes how-to-select-currency{0%{opacity:.5}50%{opacity:1}to{opacity:1}}@keyframes how-to-type-amount{0%{width:0}to{width:100%}}@keyframes how-to-click-btn{0%{transform:scale(1)}40%{transform:scale(.92)}70%{transform:scale(1.02)}to{transform:scale(1)}}.how-to-mock-exchange-btn.animate-click{animation:how-to-click-btn .4s ease}.how-to-mock-sort-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.how-to-mock-sort-title{font-size:16px;font-weight:700;color:#1a202c}.how-to-mock-toggle-switch{display:flex;border-radius:25px;background:#e0e0e0;padding:4px;width:-moz-fit-content;width:fit-content;box-shadow:inset 0 2px 4px rgba(0,0,0,.1)}.how-to-mock-toggle-option{padding:6px 16px;font-size:13px;font-weight:700;color:#333;transition:all .3s ease;border-radius:20px;cursor:default}.how-to-mock-toggle-option.active{background:#aeaeff;color:white;box-shadow:0 2px 4px rgba(0,0,0,.2)}.how-to-annotation-wrapper{position:relative}.how-to-annotation{background:#1E293B;color:#fff;font-size:13px;line-height:1.5;padding:10px 16px;border-radius:10px;opacity:0;animation:hint-appear .25s ease forwards;max-width:340px}.how-to-annotation-sort{margin-left:auto;margin-bottom:12px}.how-to-annotation-trust{margin-bottom:12px;margin-right:auto}.how-to-connectors-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:5}.how-to-connector-path{animation:draw-connector .35s ease .1s forwards}.how-to-annotation.no-anim,.tutorial-hint-flow.no-anim{animation:none;opacity:1}@keyframes draw-connector{0%{stroke-dashoffset:var(--path-length)}to{stroke-dashoffset:0}}.how-to-mock-trust-badge.hint-highlight{box-shadow:0 0 0 3px rgba(30,41,59,.3);transition:box-shadow .3s ease}.how-to-mock-toggle-switch.hint-highlight{box-shadow:inset 0 2px 4px rgba(0,0,0,.1),0 0 0 3px rgba(30,41,59,.3);transition:box-shadow .3s ease}.how-to-mock-exchange-btn.hint-highlight{box-shadow:0 2px 4px rgba(40,167,69,.2),0 0 0 3px rgba(30,41,59,.3);transition:box-shadow .3s ease}.how-to-hidden-steps{display:none}.tutorial-hint-flow{position:relative;background:#1E293B;color:#fff;font-size:13px;line-height:1.5;padding:10px 16px;border-radius:10px;margin-top:12px;display:inline-block;opacity:0;animation:hint-appear .25s ease forwards}@keyframes hint-appear{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.tutorial-hint-flow.hint-align-right{margin-left:auto}@media (min-width:768px){.how-to-mock-form-wrapper{flex-direction:row;align-items:flex-start;gap:10px}.how-to-mock-select-field{width:47%;flex:1 1}.how-to-mock-swap-wrapper{position:static;margin:6px 0 0}.how-to-mock-swap-btn{transform:rotate(0deg);margin-top:24px}.how-to-mock-rate-card{display:grid;grid-template-columns:2fr 1.5fr 1.2fr auto;align-items:center;padding:24px;grid-gap:16px;gap:16px}.how-to-mock-card-bottom,.how-to-mock-card-top{display:contents}.how-to-mock-card-divider{display:none}.how-to-mock-card-left{grid-column:1;grid-row:1;flex-direction:row;align-items:center;flex-wrap:wrap}.how-to-mock-limits{grid-column:2;grid-row:1;align-items:center}.how-to-mock-card-right{grid-column:3;grid-row:1}.how-to-mock-action-container{grid-column:4;grid-row:1}.how-to-mock-exchanger-name{font-size:18px;margin-right:12px}.how-to-mock-limit-row{font-size:14px;justify-content:center}.how-to-mock-exchange-btn{padding:10px 24px;font-size:15px}}@media (max-width:640px){.how-to-hero{padding:16px 12px 4px}.how-to-main{padding:0 12px 40px}.how-to-hero h1{font-size:22px}.how-to-step h2{font-size:18px}.how-to-step-text{padding-left:0}.how-to-progress{top:60px}.how-to-progress-line{width:20px}.how-to-progress-circle{width:32px;height:32px;font-size:13px}.how-to-mock-form{padding:16px;border-radius:20px}.how-to-mock-form-title{font-size:18px}.how-to-mock-field-wrapper{height:60px;border-radius:16px;padding:0 12px}.how-to-mock-currency-text{font-size:14px}.how-to-mock-input-value{font-size:17px}.how-to-mock-rates{padding:12px}.how-to-mock-rate-card{padding:14px}.how-to-cta-bottom{padding:24px 16px}.how-to-mock-sort-header{flex-direction:column;align-items:flex-start;gap:8px}.how-to-mock-toggle-switch{width:100%;justify-content:space-between}.how-to-mock-toggle-option{flex:1 1;text-align:center;padding:6px 10px;font-size:12px}.how-to-annotation,.tutorial-hint-flow{font-size:12px;padding:8px 12px}.how-to-annotation{max-width:280px}}@media (prefers-reduced-motion:reduce){.how-to-mock-rate-card,.how-to-step{transition:none;opacity:1;transform:none}.how-to-mock-input-value.typing{animation:none;border-color:#1A1A1A}.how-to-mock-exchange-btn.animate-click{animation:none}.how-to-annotation,.tutorial-hint-flow{animation:none;opacity:1;transform:none}.how-to-connector-path{animation:none;stroke-dashoffset:0!important}.how-to-cta-button,.how-to-mock-field-wrapper,.how-to-mock-location-selectors,.how-to-mock-toggle-option,.how-to-progress-circle,.how-to-progress-line{transition:none}.how-to-progress-circle.completing{animation:none}}