/* Muse Models — Website v2 How it works (card M1-2 Part 4). Page-scoped (`hw-` prefix). Values
   follow mockup v1.9 and the brand tokens in css/tokens.css. */

/* intro */
.hw-hero{background:radial-gradient(900px 420px at 50% 0%,rgba(139,108,255,.14),transparent 70%)}
.hw-hero-inner{max-width:820px;padding-top:76px;padding-bottom:48px;display:flex;flex-direction:column;gap:16px}
.hw-hero h1{font-size:clamp(2.3rem,5.2vw,3.25rem);line-height:1.08}
.hw-lead{color:var(--text-2);font-size:1.12rem}

/* the 5 steps */
.hw-steps-wrap{padding:24px 0 72px}
.hw-steps{list-style:none;max-width:920px}
.hw-step{display:grid;grid-template-columns:72px minmax(0,1fr);gap:20px;padding:28px 0;border-bottom:1px solid var(--line)}
.hw-step:last-child{border-bottom:none}
.hw-num{font-family:var(--font-mono);font-size:14px;color:var(--violet-bright);padding-top:6px}
.hw-step-body{display:flex;flex-direction:column;gap:8px}
.hw-step-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.hw-step h2{font-size:1.62rem;line-height:1.2;letter-spacing:-0.015em}
.hw-step p{color:var(--text-2)}
.hw-badge{font-family:var(--font-mono);font-size:11px;color:var(--violet-bright);border:1px solid rgba(139,108,255,.5);padding:2px 8px;border-radius:999px}
.hw-badge-gold{color:var(--gold);border-color:rgba(217,183,121,.5)}

/* shared section heads */
.hw-head{display:flex;flex-direction:column;gap:12px;max-width:720px}
.hw-head h2{font-size:clamp(1.8rem,3.2vw,2.15rem);line-height:1.15}

/* organic / conversion */
.hw-head+.hw-pair{margin-top:28px}
.hw-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px}
.hw-kind{padding:30px;display:flex;flex-direction:column;gap:10px}
.hw-kind h3{font-size:1.38rem;margin:0}
.hw-kind p{font-size:1rem}
.hw-kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--violet-bright)}
.hw-kicker-gold{color:var(--gold)}

/* Customer Portal */
.hw-portal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:40px;align-items:start}
.hw-ticks{list-style:none;display:flex;flex-direction:column;gap:12px}
.hw-ticks li{display:flex;gap:12px;align-items:flex-start}
.hw-tick{color:var(--violet-bright);font-weight:600;flex:none}

@media(max-width:860px){
  .hw-hero-inner{padding-top:56px}
  .hw-step{grid-template-columns:48px minmax(0,1fr);gap:14px}
}