/* How It Works — process rail, requirement cards, and closing flow. */
.hiw-hero-actions{justify-content:center;margin-top:8px}
.hiw-highlights{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;list-style:none;margin:38px 0 0;padding:0}
.hiw-highlights li{display:flex;flex-direction:column;gap:2px;min-width:150px;padding:14px 22px;border:1px solid var(--border);border-radius:14px;background:rgba(0,0,0,.28)}
.hiw-highlights b{font:600 1.35rem Poppins,sans-serif;color:var(--gold)}
.hiw-highlights span{color:var(--muted);font-size:.72rem;letter-spacing:.04em}

.hiw-process{padding-bottom:40px}
.hiw-steps{list-style:none;counter-reset:none;margin:0 auto;padding:0;max-width:920px;display:grid;gap:18px}
.hiw-step{position:relative;display:grid;grid-template-columns:66px 1fr;gap:22px;align-items:start}
/* Connector rail between the numbered nodes. */
.hiw-step:not(:last-child):before{content:"";position:absolute;left:33px;top:66px;bottom:-18px;width:1px;background:linear-gradient(var(--border),transparent)}
.hiw-step-number{display:grid;place-items:center;width:66px;height:66px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(150deg,rgba(255,255,255,.05),transparent);color:var(--gold);font:600 1.15rem Poppins,sans-serif;letter-spacing:-.02em}
.hiw-step-card{padding:24px 26px;transition:transform .25s,border-color .25s}
.hiw-step:hover .hiw-step-card{transform:translateY(-3px);border-color:var(--border)}
.hiw-step-card h3{margin:0 0 8px}
.hiw-step-card p{margin:0;font-size:.92rem}
.hiw-step-detail{display:inline-block;margin-top:14px;padding:5px 11px;border:1px solid var(--border);border-radius:99px;color:var(--muted);font-size:.7rem;letter-spacing:.03em}

.hiw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hiw-info-card{padding:30px;transition:transform .25s,border-color .25s}
.hiw-info-card:hover{transform:translateY(-4px);border-color:var(--border)}
.hiw-info-card h3{margin:0 0 10px;font-size:1.05rem}
.hiw-info-card p{margin:0;font-size:.88rem}
.hiw-control-card{border-left:2px solid var(--gold)}

.hiw-faq{padding-top:40px}
.hiw-faq .faq-button-wrap{margin-top:32px;text-align:center}

.hiw-flow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 30px;list-style:none;margin:0 auto 34px;padding:0;max-width:940px}
.hiw-flow li{position:relative;padding:9px 16px;border:1px solid var(--border);border-radius:99px;background:rgba(0,0,0,.3);color:#d7d7d7;font-size:.78rem}
/* Arrows sit in the gutter between pills rather than inside their borders. */
.hiw-flow li:not(:last-child):after{content:"→";position:absolute;right:-21px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:.8rem}
.hiw-disclaimer{max-width:820px;margin:38px auto 0;text-align:left}

/* Entrance animation runs on load so content is never hidden without JS. */
@media(prefers-reduced-motion:no-preference){
.hiw-step,.hiw-info-card,.hiw-highlights li{opacity:0;animation:hiwRise .55s cubic-bezier(.22,.68,.35,1) forwards}
.hiw-step:nth-child(2),.hiw-info-card:nth-child(2),.hiw-highlights li:nth-child(2){animation-delay:.07s}
.hiw-step:nth-child(3),.hiw-info-card:nth-child(3),.hiw-highlights li:nth-child(3){animation-delay:.14s}
.hiw-step:nth-child(4){animation-delay:.21s}
.hiw-step:nth-child(5){animation-delay:.28s}
.hiw-step:nth-child(6){animation-delay:.35s}
}
@keyframes hiwRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media(max-width:900px){
.hiw-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
.hiw-step{grid-template-columns:48px 1fr;gap:16px}
.hiw-step:not(:last-child):before{left:24px;top:48px}
.hiw-step-number{width:48px;height:48px;border-radius:14px;font-size:.95rem}
.hiw-step-card{padding:20px}
.hiw-highlights li{min-width:0;flex:1 1 140px;padding:12px 16px;text-align:center;align-items:center}
.hiw-flow{flex-direction:column;align-items:stretch;gap:10px}
.hiw-flow li{text-align:center}
.hiw-flow li:not(:last-child):after{display:none}
.hiw-disclaimer{text-align:left}
}
