/* /how explainer: extends buy.css (same palette, type, banner, header, FAQ, sticky bar). */
.cta-mini{margin-left:auto;font-size:14px;font-weight:700;padding:10px 16px;white-space:nowrap;border-radius:22px;background:var(--green);color:var(--green-ink)}
.cta-mini:hover{text-decoration:none;filter:brightness(1.06)}
.how-hero{text-align:center;padding:24px 0 4px}
.kicker{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.how-hero h1{font-size:clamp(30px,7.6vw,50px);line-height:1.1;letter-spacing:-1.6px;margin:0 0 12px}
.how-hero h1 b,.big-line b,.lead b,.rows dd b,.tok b,.callout b,.ex-title b{color:var(--green)}
a.primary.big{display:block;text-align:center;color:var(--green-ink);text-decoration:none}
a.primary.big:hover{text-decoration:none}
.how .cta{max-width:420px;margin:0 auto}
.center{text-align:center;margin-top:12px}
.how h2{display:flex;align-items:center;gap:12px;font-size:28px;margin-bottom:14px}
.n{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#262f22;border:1px solid #465637;color:var(--green);font-size:15px;letter-spacing:0}
.card{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:20px 22px}
.big-line{margin:0 0 12px;font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:600;letter-spacing:-.5px}
.rows{margin:0 0 12px;display:grid}
.rows div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid #262d26}
.rows div:last-child{border-bottom:0}
.rows dt{color:var(--muted)}
.rows dd{margin:0;font-weight:600;text-align:right}
.tok-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tok h3{font-size:28px;letter-spacing:-.6px;margin:6px 0 6px}
.tok p{margin:0;color:#d6e8bd;font-size:16px}
.tag{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px 30px}
.flow li{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px 16px;min-height:86px;display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.flow li b{font-size:17px;line-height:1.25}
.flow li:nth-child(n+4){border-color:#465637;background:linear-gradient(165deg,#222d1e,#171c18)}
.flow li:last-child b{color:var(--green)}
.step{font:700 12px 'Space Grotesk',sans-serif;color:var(--muted);letter-spacing:1px}
.flow li::after{content:'→';position:absolute;right:-24px;top:50%;transform:translateY(-50%);color:var(--green);font-weight:700;font-size:18px}
.flow li:nth-child(3n)::after,.flow li:last-child::after{content:none}
.loop-note{margin:14px 0 0;color:var(--muted);font-size:15px}
.lead{margin:0 0 14px;color:#d6e8bd;font-size:18px}
.ex-title{margin:0 0 6px;font-weight:600}
.callout{margin:14px 0 0;padding:14px 18px;border-left:3px solid var(--green);background:#161c17;border-radius:0 12px 12px 0}
.wallets{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.wallets .w{display:inline-flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border:1px solid var(--border);border-radius:14px;background:var(--panel2);font-weight:600}
.end-cta{text-align:center}
.end-cta .big-line{font-size:22px}
.sticky-buy a.primary{flex:none;padding:14px 22px;font-size:17px;border-radius:12px;text-decoration:none;font-weight:700}
@media(max-width:680px){
 .cta-mini{font-size:13px;padding:9px 13px}
 .how-hero{padding-top:8px}
 .how h2{font-size:24px}
 .lead{font-size:16px}
 .big-line{font-size:20px}
 .card{padding:16px 16px}
 .tok-grid{grid-template-columns:1fr}
 .flow{grid-template-columns:1fr;gap:22px}
 .flow li{min-height:0;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px}
 .flow li::after{content:'↓';right:auto;left:50%;top:auto;bottom:-21px;transform:translateX(-50%);font-size:16px}
 .flow li:nth-child(3n)::after{content:'↓'}
 .flow li:last-child::after{content:none}
 .rows dt{font-size:14px}
 .rows dd{font-size:15px}
}
.rows dd small{display:block;font-size:13px;font-weight:500;color:var(--muted)}
.uses{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.uses li{font-size:15px;color:#d6e8bd;padding:8px 10px;background:#141916;border-radius:10px}
.uses b{display:inline-block;min-width:78px;color:var(--muted);font-weight:600}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.checks li{position:relative;padding:12px 14px 12px 42px;background:var(--panel);border:1px solid var(--border);border-radius:14px;color:#d6e8bd;font-size:16px}
.checks li::before{content:'✓';position:absolute;left:15px;top:11px;color:var(--green);font-weight:700}
.ex-body{margin:0 0 10px;font-size:18px;color:#d6e8bd}
.ex-body b{color:var(--green)}
