/* Scoped visual journey; all steps remain readable when JavaScript is off. */
.how-experience { margin:34px 0 58px; }
.how-path { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.how-step { position:relative; flex-direction:column; gap:11px; padding:23px 10px 19px; border:1px solid var(--line); border-radius:17px; background:white; color:var(--ink); font-size:15px; font-weight:500; min-height:130px; }
.how-step[aria-selected="true"] { background:var(--ink); color:white; border-color:var(--ink); }
.how-step-number { position:absolute; left:14px; top:12px; font-size:11px; opacity:.6; }
.how-step-icon svg { width:31px; height:31px; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.how-step[aria-selected="true"] .how-step-icon { color:var(--lime); }
.how-stage { display:grid; grid-template-columns:1fr 1fr; min-height:380px; border:1px solid var(--line); border-radius:25px; overflow:hidden; background:white; margin:0 0 18px; }
.how-stage-copy { padding:45px; display:flex; align-items:flex-start; flex-direction:column; justify-content:center; }
.how-stage-copy .eyebrow { font-size:11px; margin:0 0 22px; }
.how-stage-copy h2 { font-size:clamp(28px,3.5vw,42px); letter-spacing:-1.5px; line-height:1.12; margin:0 0 19px; }
.how-stage-copy p { color:var(--muted); font-size:17px; line-height:1.6; max-width:370px; margin:0 0 24px; }
.how-stage-copy .button { font-size:14px; }
.how-stage-art { background:#edf1e5; min-width:0; padding:34px; display:grid; place-items:center; position:relative; overflow:hidden; }
.how-account-demo { background:white; border-radius:19px; padding:30px; width:min(100%,310px); transform:rotate(-3deg); box-shadow:0 18px 35px #20251f0b; border:1px solid var(--line); }
.how-mini-label { font-size:9px; letter-spacing:2px; color:var(--muted); }
.how-field { margin-top:18px; border:1px solid var(--line); border-radius:9px; padding:14px 12px; color:var(--muted); font-size:13px; }
.how-field span { color:var(--ink); margin-right:12px; font-weight:600; }
.how-faux-button { background:var(--ink); color:white; text-align:center; border-radius:8px; padding:13px; margin-top:20px; font-size:13px; }
.how-inline-note { font-size:10px; text-align:center; margin-top:18px; color:var(--muted); }
.how-inline-note span { color:#6c8244; margin-right:3px; }
.how-card-choice { width:100%; max-width:340px; }
.how-demo-card { position:relative; aspect-ratio:1.62; border-radius:18px; overflow:hidden; transform:rotate(-7deg); box-shadow:0 24px 30px -15px #20251f35; }
.how-demo-card img { position:absolute; width:104.7%; height:114.8%; max-width:none; left:-2.35%; top:-7.45%; object-fit:fill; }
.how-choice-chips { display:flex; justify-content:center; gap:7px; margin-top:34px; flex-wrap:wrap; }
.how-choice-chips span { font-size:11px; padding:9px 12px; background:white; border-radius:100px; }
.how-choice-chips span:first-child { background:var(--lime); }
.how-receipt { width:100%; max-width:330px; background:white; border-radius:18px; padding:28px; box-shadow:0 14px 25px #20251f0b; transform:rotate(3deg); }
.how-receipt-head { font-size:18px; font-weight:600; padding-bottom:20px; border-bottom:1px dashed var(--line); }
.how-receipt-head span { display:block; margin-top:9px; font-size:9px; letter-spacing:1.4px; color:var(--muted); font-weight:400; }
.how-receipt-row { display:flex; justify-content:space-between; gap:12px; font-size:12px; margin-top:22px; }
.how-receipt-row span { color:var(--muted); }
.how-receipt-row b { font-size:14px; white-space:nowrap; }
.how-receipt-total { margin-top:24px; border-radius:10px; background:#edf1e5; display:flex; align-items:center; justify-content:space-between; padding:15px; font-size:12px; }
.how-receipt-total svg { width:25px; fill:none; stroke:currentColor; stroke-width:1.4; }
.how-funding-demo { display:flex; width:100%; align-items:center; justify-content:center; flex-wrap:wrap; }
.how-currency-bubble { width:115px; height:115px; background:var(--lime); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:28px; font-weight:600; }
.how-currency-bubble span { font-size:9px; margin-top:7px; font-weight:400; }
.how-currency-dark { background:var(--ink); color:white; }
.how-transfer-path { display:flex; gap:5px; padding:0 10px; }
.how-transfer-path span { height:4px; width:4px; border-radius:50%; background:#8a9a6e; }
.how-quote-note { width:100%; text-align:center; font-size:12px; margin-top:34px; color:var(--muted); }
.how-quote-note b { display:block; font-size:16px; color:var(--ink); margin-top:8px; }
.how-shopping-demo { display:flex; gap:24px; align-items:center; flex-wrap:wrap; justify-content:center; }
.how-shop-bag { width:120px; height:140px; background:var(--ink); color:var(--lime); border-radius:24px; transform:rotate(-8deg); display:grid; place-items:center; }
.how-shop-bag svg { width:70px; height:70px; fill:none; stroke:currentColor; stroke-width:1; stroke-linecap:round; stroke-linejoin:round; }
.how-shop-caption span { font-size:8px; letter-spacing:1.5px; color:var(--muted); }
.how-shop-caption strong { display:block; font-size:22px; font-weight:500; line-height:1.4; margin-top:12px; }
.how-shop-tag { flex-basis:80%; text-align:center; padding:13px 18px; background:white; border-radius:100px; font-size:13px; margin-top:16px; }
.how-controls { display:flex; align-items:center; justify-content:space-between; padding:0 2px; }
.how-controls > span { font-size:12px; color:var(--muted); letter-spacing:2px; }
.how-controls > div { display:flex; gap:8px; }
.how-controls button { font-size:13px; padding:11px 16px; }
.how-demo-caption { font-size:12px; color:var(--muted); margin:18px 0 0; }
.how-details { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-bottom:40px; }
.how-detail { min-width:0; }
.how-detail h2 { font-size:23px; letter-spacing:-.6px; margin:24px 0 13px; }
.how-detail p { font-size:15px; line-height:1.6; color:var(--muted); margin:0 0 15px; }
.how-detail-art { border-radius:20px; background:#edf1e5; height:205px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.how-mail-tile { width:100px; height:100px; background:white; border:1px solid var(--line); display:grid; place-items:center; border-radius:20px; transform:rotate(-9deg); }
.how-mail-tile svg { width:56px; fill:none; stroke:#819064; stroke-width:1.3; }
.how-check-badge { position:absolute; top:35px; left:calc(50% + 20px); width:38px; height:38px; border-radius:50%; background:var(--lime); display:grid; place-items:center; font-size:22px; }
.how-small-pill { position:absolute; bottom:19px; font-size:11px; color:var(--muted); }
.how-detail-cost { gap:12px; padding-bottom:25px; }
.how-cost-large { font-size:35px; letter-spacing:-1px; }
.how-cost-plus { color:#819064; font-size:23px; }
.how-cost-fee { font-size:25px; background:var(--lime); border-radius:16px; padding:14px; }
.how-cost-fee small { display:block; font-size:10px; }
.how-cost-network { position:absolute; bottom:24px; font-size:11px; color:var(--muted); }
.how-detail-track { flex-direction:column; gap:15px; }
.how-detail-track > div { width:70%; font-size:12px; display:flex; align-items:center; gap:12px; }
.how-detail-track i { width:17px; height:17px; border:1px solid #a5b58c; background:#f8f9f5; border-radius:50%; position:relative; }
.how-detail-track > div:not(:last-child) i::after { content:''; height:16px; width:1px; background:#a5b58c; position:absolute; top:16px; left:7px; }
.how-detail-track > div:last-child i { background:var(--lime); border-color:var(--lime); }
.how-detail-track > div:last-child i::before { content:'✓'; position:absolute; font-size:12px; inset:0; text-align:center; }
@media (max-width:900px) {
  .how-stage-copy { padding:30px; }
  .how-stage-art { padding:25px; }
  .how-details { gap:17px; }
  .how-detail h2 { font-size:21px; }
  .how-detail-cost { gap:8px; }
  .how-cost-large { font-size:29px; }
  .how-cost-fee { font-size:21px; padding:10px; }
  .how-currency-bubble { width:95px; height:95px; font-size:23px; }
}
@media (max-width:650px) {
  .how-path { gap:6px; }
  .how-step { min-height:101px; padding:25px 5px 10px; font-size:10px; gap:8px; border-radius:11px; line-height:1.2; }
  .how-step-number { font-size:8px; top:8px; left:8px; }
  .how-step-icon svg { width:25px; height:25px; }
  .how-stage { grid-template-columns:1fr; }
  .how-stage-copy { padding:28px; }
  .how-stage-copy h2 { font-size:32px; }
  .how-stage-copy p { font-size:16px; }
  .how-stage-art { min-height:300px; padding:30px; }
  .how-details { grid-template-columns:1fr; gap:34px; }
  .how-detail h2 { margin-top:18px; font-size:24px; }
  .how-detail-art { height:210px; }
  .how-currency-bubble { width:112px; height:112px; font-size:27px; }
  .how-demo-caption { line-height:1.5; }
}
@media (prefers-reduced-motion:no-preference) {
  .how-enhanced .how-stage:not([hidden]) { animation:how-step-enter .24s ease; }
  @keyframes how-step-enter { from { opacity:.5; transform:translateY(6px); } to { opacity:1; transform:none; } }
}