/* Muse Models — Website v2 Home (card M1-2 Part 1). Page-scoped (`hm-` prefix); the hero, proof
   strip, Traction and "Who it's for" keep the live styles in css/base.css. Values follow mockup v1.9
   and the brand tokens in css/tokens.css. */

/* problem (live two-column layout) */
.hm-problem .eyebrow{display:block;margin-bottom:18px}
.hm-problem p+p{margin-top:18px}

/* how it works: 5 steps */
.hm-steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:14px}
.hm-step{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:8px}
.hm-num{font-family:var(--font-mono);font-size:12px;color:var(--violet-bright)}
.hm-step h3{font-size:1.12rem}
.hm-step p{color:var(--text-2);font-size:.92rem;line-height:1.55}
.hm-link{display:inline-block;font-size:15px;color:var(--violet-bright);transition:color .2s var(--ease)}
.hm-link:hover{color:var(--text)}
.hm-steps+.hm-link{margin-top:36px}

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

/* plan teaser (card W1, W0 pricing mockup): Trial, Growth (emphasised), Scale — one tile per plan the
   Portal's offers make renderable (card W2), centred at the 3-up tile width */
.hm-plans{text-align:center}
.hm-plans h2{margin:14px 0 10px}
.hm-plans-lead{color:var(--text-2);max-width:44ch;margin:0 auto 32px}
.hm-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:960px;margin:0 auto 28px;text-align:left}
.hm-tile{flex:0 1 calc((100% - 28px) / 3);min-width:0;background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--r-card);padding:22px;display:flex;flex-direction:column;gap:6px}
.hm-tile.hm-feature{border-color:rgba(217,183,121,.55)}
.hm-name{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-bright);margin-bottom:2px}
.hm-feature .hm-name{color:var(--gold)}
.hm-tile h3{font-size:1.2rem}
.hm-from{font-family:var(--font-head);font-weight:700;color:var(--gold);font-size:1.5rem;line-height:1.2}
.hm-from small{font-family:var(--font-body);font-weight:400;font-size:.85rem;color:var(--text-2)}
.hm-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* loading skeleton (no numbers) at the tile's size */
.hm-skel .hm-name .mm-skel{width:4.5em}
.hm-skel-h{font-family:var(--font-head);font-size:1.2rem;line-height:1.05}
.hm-skel-h .mm-skel{width:75%}
.hm-skel .hm-from .mm-skel{width:55%;height:.8em}

/* vision */
.hm-vision{text-align:center;max-width:760px}
.hm-vision .tag{margin-bottom:18px}
.hm-vision h2{margin-bottom:16px}
.hm-vision p{max-width:56ch;margin:0 auto}

@media(max-width:760px){
  .hm-tiles{max-width:460px}
  .hm-tile{flex-basis:100%}
}