/* Mon studio: "Everything in your plan" tool grid (static/home.js). Colors per tool via --c. */
.hmAll{margin-top:28px}
.hmAll>h2{display:flex;align-items:center;gap:10px;margin:0;font-size:22px}
.hmAll>h2 svg{width:22px;height:22px;color:#22c55e}
.hmAll>p{margin:6px 0 18px;color:var(--muted)}
.hmGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hmCard{position:relative;display:flex;flex-direction:column;gap:14px;text-align:left;font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.hmCard:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c) 55%,var(--line));box-shadow:0 10px 30px -14px color-mix(in srgb,var(--c) 60%,transparent)}
.hmTop{display:flex;gap:12px;align-items:flex-start}
.hmIcon{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent)}
.hmIcon svg{width:20px;height:20px}
.hmTop b{display:block;font-size:16px;margin-bottom:4px}
.hmTop p{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.hmVisual{min-height:86px;border-radius:12px;padding:12px;display:flex;flex-direction:column;justify-content:center;gap:10px;background:color-mix(in srgb,var(--c) 8%,transparent);border:1px solid color-mix(in srgb,var(--c) 18%,transparent)}
.hmStatus{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-top:auto}
.hmStatus svg{width:14px;height:14px;color:#22c55e}
.hmPrice{align-self:flex-start;font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:999px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.hmPrice.free{color:#16a34a;background:#16a34a1f}
.hmPrice.soon{color:#06b6d4;background:#06b6d41f}
.hmPerks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px;font-size:13px;color:var(--muted)}
.hmPerks span{display:inline-flex;align-items:center;gap:6px}.hmPerks svg{width:15px;height:15px}
/* Visuals */
.hvRow{display:flex;align-items:center;gap:10px}
.hvWave{flex:1;display:flex;align-items:center;gap:2px;height:40px}
.hvWave i{flex:1;min-width:2px;border-radius:2px;background:var(--c);opacity:.85}
.hvWave.short{flex:0 0 70px}.hvWave.full{height:48px}
.hvWave.flat i{background:var(--muted);opacity:.45;transform:scaleY(.45)}
.hvPlay{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:12px;color:#fff;background:var(--c)}
.hvFaces{display:flex;align-items:center}
.hvFaces img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid var(--panel);margin-left:-8px}
.hvFaces img:first-child{margin-left:0}
.hvFaces span{margin-left:6px;font-size:12px;font-weight:700;color:var(--c)}
.hvArrow,.hvGo{color:var(--c);font-weight:700}
.hvLines{flex:1;display:flex;flex-direction:column;gap:6px}
.hvLines div{display:flex;align-items:center;gap:6px}
.hvLines b{font-size:10.5px;color:var(--c);font-variant-numeric:tabular-nums}
.hvLines i{flex:1;height:6px;border-radius:3px;background:color-mix(in srgb,var(--text) 18%,transparent)}
.hvThumbs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hvThumbs.three{grid-template-columns:repeat(3,1fr)}
.hvThumbs div{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden}
.hvThumbs img{width:100%;height:100%;object-fit:cover;display:block}
.hvThumbs span{position:absolute;inset:0;margin:auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:10px;color:#fff;background:#0009}
.hvBA{display:flex;align-items:center;gap:10px}.hvBA>div{flex:1}
.hvBA small{display:block;font-size:10.5px;color:var(--muted);margin-bottom:2px}
.hvMerge{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted)}
.hvMerge span{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent)}
.hvMerge span.on{width:46px;color:#fff;background:var(--c)}.hvMerge b{color:var(--c)}
.hvChips{display:flex;flex-wrap:wrap;gap:6px}
.hvChips span{font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:999px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.hvVip{display:grid;place-items:center;color:var(--c)}
.hvVip svg{width:40px;height:40px;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c) 70%,transparent))}
@media(max-width:1200px){.hmGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.hmGrid{grid-template-columns:1fr}}
/* Hero: headline like the offers pages (white line + violet→cyan line), outline like a selected price card */
.hmHero{border:2px solid #7c3aed;box-shadow:0 14px 36px color-mix(in srgb,#7c3aed 24%,transparent);transition:transform .25s ease,box-shadow .25s ease}
.hmHero:hover{transform:translateY(-3px);box-shadow:0 18px 44px color-mix(in srgb,#7c3aed 32%,transparent)}
.hero.hmHero h2{font-size:34px;line-height:1.1;letter-spacing:-1px;font-weight:650;color:var(--text);margin:14px 0 10px}
.hero.hmHero h2 .grad2{background:linear-gradient(90deg,#8b5cf6,#38cfff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.theme-light .hero.hmHero{border-color:#7c3aed}
@media(max-width:640px){.hero.hmHero h2{font-size:26px}}