/* Product illustrations belong only to How Weave Works. */
body[data-page="how"] .editorial-hero{position:relative;isolation:isolate}
body[data-page="how"] .editorial-hero:before{content:'';position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background-color:#b6dbfa;background-image:linear-gradient(0deg,#f8faf7 0,transparent 19%),url('assets/hero-world.webp');background-size:100% 100%,max(135%,1150px) auto;background-position:center,center top;background-repeat:no-repeat;pointer-events:none}
body[data-page="how"] .editorial-hero .kicker{color:#476b73}
body[data-page="how"] .editorial-hero>div>p{color:#3e626d}
@media(max-width:760px){body[data-page="how"] .editorial-hero:before{background-size:100% 100%,auto 190%}}
body[data-page="how"] .journey{grid-template-columns:130px minmax(0,1fr);gap:42px}
body[data-page="how"] .journey article{grid-template-columns:.85fr 1.15fr;gap:42px;padding:66px 0 76px;min-width:0}
body[data-page="how"] .journey article>div:first-child{max-width:430px}
.how-visual{margin:0;min-width:0;position:relative;align-self:center}
.how-visual-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 10px 12px}
.how-visual-number{font:9px var(--mono);letter-spacing:1.3px;color:#87968f}
.how-visual-controls{display:flex;gap:4px;border-bottom:1px solid #dce6de}
.how-visual-controls button{padding:10px 9px 11px;font-size:11px;color:#7b8a82;position:relative;white-space:nowrap}
.how-visual-controls button[aria-pressed="true"]{color:#234c3b;font-weight:550}
.how-visual-controls button[aria-pressed="true"]:after{content:'';position:absolute;bottom:-1px;height:2px;left:9px;right:9px;background:#577d5b}
.how-visual-controls button:hover{color:#193a2c}
.how-visual-stage{width:100%;aspect-ratio:640/440;isolation:isolate}
.how-visual-stage>svg{display:block;width:100%;height:100%;overflow:visible}
.how-visual-stage text{font-family:var(--sans);fill:#243d35;font-weight:450}
.how-visual-stage .hv-label{font-family:var(--mono);font-size:10px;letter-spacing:1.25px;fill:#7d8f83}
.how-visual-stage .hv-small{font-size:12px;fill:#72857a}
.how-visual-stage .hv-body{font-size:15px}
.how-visual-stage .hv-title{font-size:20px;letter-spacing:-.5px}
.how-visual-stage .hv-value{font-family:var(--mono);font-size:16px;font-weight:400;letter-spacing:-.6px}
.how-visual-stage .hv-positive{fill:#527952}
.how-visual-stage .hv-muted{fill:#92a198}
.how-visual-stage .hv-negative{fill:#a27852}
.how-visual-stage .hv-route{stroke-linecap:round;fill:none}
.how-visual-stage .hv-face{filter:drop-shadow(0 10px 11px #3f66431b)}
.how-visual-stage .hv-settle{transform-box:fill-box;transform-origin:center;animation:hv-settle .65s ease-out both}
.how-visual .hv-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes hv-settle{from{transform:translateY(4px)}to{transform:translateY(0)}}
@media(min-width:1450px){body[data-page="how"] .journey{max-width:1590px}}
@media(max-width:1100px){body[data-page="how"] .journey{grid-template-columns:100px minmax(0,1fr);gap:24px}body[data-page="how"] .journey article{grid-template-columns:.8fr 1.2fr;gap:22px}.how-visual-toolbar{padding-inline:0}.how-visual-number{display:none}.how-visual-controls{margin-left:auto}.how-visual-controls button{font-size:10px;padding-inline:7px}}
@media(max-width:900px) and (min-width:761px){body[data-page="how"] .journey{display:block}body[data-page="how"] .journey>nav{position:static;flex-direction:row;padding:0 0 25px}body[data-page="how"] .journey article{grid-template-columns:.8fr 1.2fr}}
@media(max-width:760px){body[data-page="how"] .journey{display:block}body[data-page="how"] .journey article{grid-template-columns:1fr;gap:32px;padding:38px 0 45px}body[data-page="how"] .journey article>div:first-child{max-width:none}.how-visual{margin-inline:-8px}.how-visual-number{display:block}.how-visual-controls button{font-size:11px}.how-visual-stage .hv-small{font-size:14px}.how-visual-stage .hv-label{font-size:11px}.how-visual-stage .hv-body{font-size:17px}.how-visual-stage .hv-value{font-size:18px}}
@media(prefers-reduced-motion:reduce){.how-visual-stage .hv-settle{animation:none}}
@media(max-width:600px){.how-visual-stage{aspect-ratio:400/440}.how-visual-stage .hv-body{font-size:14px}.how-visual-stage .hv-small{font-size:12px}.how-visual-stage .hv-label{font-size:9px;letter-spacing:.8px}.how-visual-stage .hv-value{font-size:15px}.how-visual-stage .hv-title{font-size:20px}}
.how-visual-stage .hv-wallet{filter:drop-shadow(0 9px 10px #3f664310)}
.how-visual-stage .hv-wallet-title{font-size:12px;font-weight:550;fill:#304b3d}
.how-visual-stage .hv-wallet-meta{font-size:10px;fill:#839187}
.how-visual-stage .hv-wallet-detail{font-size:11px;fill:#3c5648}
.how-visual-stage .hv-trade-asset{font-size:13px;letter-spacing:-.25px}
.how-visual-stage .hv-share-value{font-size:47px;letter-spacing:-2px;font-weight:500}
@media(max-width:600px){
  [data-how-visual="compose"] .hv-body{font-size:16px}
  [data-how-visual="compose"] .hv-value{font-size:17px}
  [data-how-visual="compose"] .hv-small{font-size:13px}
  [data-how-visual="compose"] .hv-label{font-size:10px}
  .how-visual-stage .hv-wallet-title{font-size:14px}
  .how-visual-stage .hv-wallet-meta{font-size:12px}
  .how-visual-stage .hv-wallet-detail{font-size:12px}
}
