/* Coast Music Stream — For Artists page (page-artists.php). Loaded only on that template. */
.cmsa{--g:#8DFF15;--g2:#42e600;--ink:#050706;--card:#0c100d;--line:rgba(255,255,255,.08);--mut:#9aa39c;--txt:#eef2ef;
  font-family:"Space Grotesk",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--txt);overflow-x:hidden}
.cmsa h1,.cmsa h2,.cmsa h3{font-family:"Space Grotesk",Inter,system-ui,sans-serif;letter-spacing:-.03em;margin:0}
.cmsa em{font-style:normal;background:linear-gradient(90deg,var(--g),#d9ff8a);-webkit-background-clip:text;background-clip:text;color:transparent}
.cmsa svg{width:100%;height:100%}

/* buttons */
.cmsa-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;border-radius:999px;font-weight:700;font-size:15px;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap}
.cmsa-btn span{transition:transform .2s}.cmsa-btn:hover span{transform:translateX(4px)}
.cmsa-btn--primary{background:var(--g);color:#071004;box-shadow:0 0 0 0 rgba(141,255,21,.5),0 10px 30px -10px rgba(141,255,21,.7)}
.cmsa-btn--primary:hover{transform:translateY(-2px);box-shadow:0 0 0 6px rgba(141,255,21,.12),0 16px 40px -12px rgba(141,255,21,.8)}
.cmsa-btn--ghost{border:1px solid rgba(255,255,255,.18);color:#fff;background:rgba(255,255,255,.03)}
.cmsa-btn--ghost:hover{border-color:var(--g);color:var(--g)}
.cmsa-btn--block{width:100%}
.cmsa-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.cmsa-cta--center{justify-content:center}

/* hero */
.cmsa-hero{position:relative;padding:90px 0 110px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#050706,#060a07)}
.cmsa-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 60% 40%,#000 20%,transparent 70%)}
.cmsa-glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.cmsa-glow--a{width:520px;height:520px;right:-80px;top:-60px;background:rgba(141,255,21,.22)}
.cmsa-glow--b{width:380px;height:380px;left:-120px;bottom:-140px;background:rgba(66,230,0,.14)}
.cmsa-hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.cmsa-kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid rgba(141,255,21,.35);border-radius:999px;background:rgba(141,255,21,.07);color:#d9ff8a;font-size:13px;font-weight:600}
.cmsa-dot{width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 0 0 rgba(141,255,21,.7);animation:cmsa-pulse 2s infinite}
.cmsa-h1{font-size:clamp(52px,7.4vw,104px);line-height:.92;font-weight:700;margin:22px 0 22px}
.cmsa-sub{font-size:19px;line-height:1.6;color:#c4ccc6;max-width:560px;margin:0}
.cmsa-trust{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;color:#cfd6d1;font-size:14px}
.cmsa-trust li{display:flex;align-items:center;gap:8px}.cmsa-trust svg{width:16px;height:16px;color:var(--g)}

/* dashboard mockup */
.cmsa-mock{position:relative;justify-self:end;width:min(460px,100%)}
.cmsa-mock-card{position:relative;padding:22px;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 80px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(14px);transform:perspective(1200px) rotateY(-8deg) rotateX(4deg);animation:cmsa-float 6s ease-in-out infinite}
.cmsa-mock-top{display:flex;align-items:center;gap:12px}
.cmsa-avatar{width:48px;height:48px;border-radius:14px;background:conic-gradient(from 200deg,#8DFF15,#00c2ff,#a24bff,#ff6b00,#8DFF15)}
.cmsa-mock-name{font-weight:700;display:flex;align-items:center;gap:6px}
.cmsa-verified{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--g);color:#061003;padding:3px}
.cmsa-mock-meta{font-size:12px;color:var(--mut);margin-top:2px}
.cmsa-badge{margin-left:auto;font-size:11px;font-weight:700;padding:6px 10px;border-radius:999px;background:rgba(141,255,21,.14);color:var(--g);border:1px solid rgba(141,255,21,.35)}
.cmsa-mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.cmsa-mock-stats div{padding:12px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid var(--line)}
.cmsa-mock-stats b{display:block;font-size:20px}.cmsa-mock-stats span{font-size:11px;color:var(--mut)}
.cmsa-mock-stats div:last-child b{color:var(--g)}
.cmsa-chart{height:110px;display:flex;align-items:flex-end;gap:7px;padding:12px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid var(--line)}
.cmsa-chart i{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--g),rgba(141,255,21,.25));transform-origin:bottom;animation:cmsa-grow .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
.cmsa-mock-track{display:flex;align-items:center;gap:12px;margin-top:14px;padding:10px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid var(--line)}
.cmsa-cover{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#ff6b00,#a24bff)}
.cmsa-track-lines b{display:block;font-size:14px}.cmsa-track-lines span{font-size:11px;color:var(--mut)}
.cmsa-eq{margin-left:auto;display:flex;gap:3px;align-items:flex-end;height:22px}
.cmsa-eq i{width:4px;border-radius:2px;background:var(--g);animation:cmsa-eq 1s ease-in-out infinite}
.cmsa-eq i:nth-child(2){animation-delay:.2s}.cmsa-eq i:nth-child(3){animation-delay:.4s}.cmsa-eq i:nth-child(4){animation-delay:.6s}
.cmsa-float{position:absolute;padding:10px 14px;border-radius:14px;font-size:13px;font-weight:600;background:#0f1510;border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 40px -15px rgba(0,0,0,.8);white-space:nowrap}
.cmsa-float--1{left:-48px;bottom:70px;animation:cmsa-float 5s ease-in-out infinite reverse}
.cmsa-float--2{right:-18px;top:-22px;color:var(--g);animation:cmsa-float 7s ease-in-out infinite}

/* sections */
.cmsa-section{padding:96px 0;border-bottom:1px solid var(--line)}
.cmsa-head{margin-bottom:44px}.cmsa-head h2{font-size:clamp(32px,4vw,52px);line-height:1.02;margin-top:12px}
.cmsa-head--center{text-align:center}
.cmsa-head--split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.cmsa-head--split p{color:#bcc4be;font-size:17px;line-height:1.6;margin:0}
.cmsa-eyebrow{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--g)}

/* steps */
.cmsa-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s;position:relative}
.cmsa-steps:before{content:"";position:absolute;left:6%;right:6%;top:31px;height:2px;background:linear-gradient(90deg,transparent,rgba(141,255,21,.5),transparent)}
.cmsa-steps li{position:relative;padding:0 6px}
.cmsa-steps span{position:relative;display:grid;place-items:center;width:62px;height:62px;border-radius:18px;background:#0c120d;border:1px solid rgba(141,255,21,.45);color:var(--g);font-weight:700;font-size:20px;box-shadow:0 0 30px -8px rgba(141,255,21,.6)}
.cmsa-steps h3{font-size:22px;margin:20px 0 8px}.cmsa-steps p{color:var(--mut);line-height:1.55;margin:0}

/* plans */
.cmsa-plans-wrap{background:radial-gradient(ellipse at 50% 0%,rgba(141,255,21,.09),transparent 55%)}
.cmsa-toggle{display:inline-flex;margin-top:26px;padding:5px;border-radius:999px;background:#0c100d;border:1px solid var(--line)}
.cmsa-toggle button{border:0;background:transparent;color:#cfd6d1;font:600 14px "Space Grotesk",Inter,sans-serif;padding:10px 18px;border-radius:999px;cursor:pointer}
.cmsa-toggle button em{font-size:11px;margin-left:6px}
.cmsa-toggle button.is-on{background:var(--g);color:#071004}.cmsa-toggle button.is-on em{background:none;-webkit-text-fill-color:#071004;color:#071004}
.cmsa-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.cmsa-plan{position:relative;padding:30px 26px;border-radius:24px;background:var(--card);border:1px solid var(--line);transition:transform .25s,border-color .25s}
.cmsa-plan:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.18)}
.cmsa-plan h3{font-size:22px}
.cmsa-plan-for{color:var(--mut);margin:6px 0 20px;font-size:14px}
.cmsa-price{display:flex;align-items:baseline;gap:6px;margin-bottom:22px}
.cmsa-price b{font-size:52px;line-height:1;letter-spacing:-.04em}.cmsa-price span{color:var(--mut);font-size:15px}
.cmsa-plan ul{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.cmsa-plan li{display:flex;gap:10px;font-size:15px;color:#d9dfdb;line-height:1.4}
.cmsa-plan li svg{flex:none;width:18px;height:18px;color:var(--g);margin-top:1px}
.cmsa-plan--pro{background:linear-gradient(#0e140f,#0e140f) padding-box,linear-gradient(140deg,var(--g),rgba(141,255,21,.1) 45%,#00c2ff) border-box;border:1.5px solid transparent;box-shadow:0 30px 80px -30px rgba(141,255,21,.45);transform:translateY(-12px)}
.cmsa-plan--pro:hover{transform:translateY(-16px)}
.cmsa-ribbon{position:absolute;top:-14px;left:26px;padding:6px 12px;border-radius:999px;background:var(--g);color:#071004;font-size:12px;font-weight:700}
.cmsa-boost{margin-top:36px;display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;padding:26px 30px;border-radius:24px;background:linear-gradient(110deg,rgba(141,255,21,.16),rgba(0,194,255,.08) 60%,rgba(162,75,255,.12));border:1px solid rgba(141,255,21,.3)}
.cmsa-boost-art{width:64px;height:64px;padding:16px;border-radius:18px;background:var(--g);color:#071004}
.cmsa-boost h3{font-size:26px;margin-top:6px}.cmsa-boost h3 b{color:var(--g);margin-left:6px}
.cmsa-boost p{margin:6px 0 0;color:#c4ccc6}

/* services bento */
.cmsa-services{background:#070a08}
.cmsa-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(220px,auto);gap:16px}
.cmsa-svc{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:26px;border-radius:24px;border:1px solid var(--line);background:var(--card);transition:transform .25s,border-color .25s}
.cmsa-svc:before{content:"";position:absolute;inset:0;opacity:.55;transition:opacity .25s;background:radial-gradient(circle at 85% 0%,var(--c),transparent 55%)}
.cmsa-svc:hover{transform:translateY(-4px);border-color:var(--c)}.cmsa-svc:hover:before{opacity:.9}
.cmsa-svc>*{position:relative}
.cmsa-svc--big{grid-column:span 2;grid-row:span 2;justify-content:flex-end;background:radial-gradient(circle at 70% 25%,rgba(141,255,21,.28),transparent 45%),repeating-linear-gradient(90deg,transparent 0 22px,rgba(141,255,21,.08) 23px 25px),var(--card)}
.cmsa-svc--big h3{font-size:34px}.cmsa-svc--big p{font-size:16px;max-width:420px}
.cmsa-svc--wide{grid-column:span 3}
.cmsa-svc-icon{width:48px;height:48px;padding:12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--c);margin-bottom:auto}
.cmsa-svc h3{font-size:20px;margin:22px 0 8px}.cmsa-svc p{color:#aab3ad;font-size:14px;line-height:1.55;margin:0 0 18px}
.cmsa-quote{font-size:13px;font-weight:700;color:var(--c)}
.cmsa-c1{--c:#8DFF15}.cmsa-c2{--c:#00c2ff}.cmsa-c3{--c:#3dffb4}.cmsa-c4{--c:#ff6bd6}.cmsa-c5{--c:#ff8a1f}.cmsa-c6{--c:#b48cff}.cmsa-c7{--c:#ffd60a}

/* faq */
.cmsa-faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.cmsa-faq-note{color:var(--mut);margin-top:16px}.cmsa-faq-note a{color:var(--g);font-weight:700}
.cmsa-faq details{border:1px solid var(--line);border-radius:18px;background:var(--card);padding:6px 22px;margin-bottom:12px;transition:border-color .2s}
.cmsa-faq details[open]{border-color:rgba(141,255,21,.35)}
.cmsa-faq summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:700;font-size:17px;display:flex;justify-content:space-between;gap:16px}
.cmsa-faq summary::-webkit-details-marker{display:none}
.cmsa-faq summary:after{content:"+";color:var(--g);font-size:22px;line-height:1;transition:transform .2s}
.cmsa-faq details[open] summary:after{transform:rotate(45deg)}
.cmsa-faq p{margin:0 0 18px;color:#b9c1bb;line-height:1.65}

/* final cta */
.cmsa-final{position:relative;overflow:hidden;padding:120px 0;text-align:center;background:radial-gradient(ellipse at 50% 100%,rgba(141,255,21,.25),transparent 60%),#050706}
.cmsa-wave{position:absolute;left:0;right:0;bottom:0;height:60%;display:flex;align-items:flex-end;gap:6px;padding:0 2%;opacity:.35}
.cmsa-wave i{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--g),transparent);animation:cmsa-wave 2.4s ease-in-out infinite alternate;animation-delay:var(--d);transform-origin:bottom}
.cmsa-final-inner{position:relative}
.cmsa-final h2{font-size:clamp(44px,6.5vw,92px);line-height:.95}

/* motion */
@keyframes cmsa-pulse{70%{box-shadow:0 0 0 10px rgba(141,255,21,0)}100%{box-shadow:0 0 0 0 rgba(141,255,21,0)}}
@keyframes cmsa-float{50%{transform:perspective(1200px) rotateY(-8deg) rotateX(4deg) translateY(-10px)}}
.cmsa-float{animation-name:cmsa-bob}@keyframes cmsa-bob{50%{transform:translateY(-8px)}}
@keyframes cmsa-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes cmsa-eq{0%,100%{height:30%}50%{height:100%}}
@keyframes cmsa-wave{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.cmsa *{animation:none!important}}

/* responsive */
@media(max-width:980px){
  .cmsa-hero-grid{grid-template-columns:1fr}.cmsa-mock{justify-self:center;margin-top:20px}
  .cmsa-float--1{left:-6px}.cmsa-float--2{right:-6px}
  .cmsa-steps{grid-template-columns:repeat(2,1fr);row-gap:36px}.cmsa-steps:before{display:none}
  .cmsa-plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}.cmsa-plan--pro{transform:none}.cmsa-plan--pro:hover{transform:translateY(-4px)}
  .cmsa-boost{grid-template-columns:1fr;text-align:left}
  .cmsa-head--split{grid-template-columns:1fr;gap:16px}
  .cmsa-bento{grid-template-columns:repeat(2,1fr)}.cmsa-svc--wide{grid-column:span 2}
  .cmsa-faq-grid{grid-template-columns:1fr;gap:20px}
}
@media(max-width:600px){
  .cmsa-hero{padding:56px 0 72px}.cmsa-section{padding:68px 0}
  .cmsa-mock-card{transform:none;animation:none}.cmsa-float{display:none}
  .cmsa-steps{grid-template-columns:1fr}
  .cmsa-bento{grid-template-columns:1fr}.cmsa-svc--big,.cmsa-svc--wide{grid-column:auto;grid-row:auto}
  .cmsa-toggle button{padding:9px 12px}
}
