/* Spyce — artists & agents page */
.hl{color:var(--c-text)}

/* ---------- hero: one statement, then the story told without words ---------- */
.ah{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:clamp(40px,7vw,96px);position:relative;isolation:isolate}
.ah::before{content:"";position:absolute;inset:-10% -20% auto;height:90%;z-index:-1;background:radial-gradient(40% 50% at 50% 30%,rgba(255,166,142,.35),transparent 70%)}
.ah h1{font-size:clamp(42px,6vw,84px);line-height:1.04;letter-spacing:-.035em;max-width:20ch;text-wrap:balance}
.ah h1 span{display:block;color:var(--c-text)}
.ah .lead{max-width:50ch;margin:0}
.ah .cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:4px}
/* one single, many feeds: the same sound lights up video after video */
.feed-wall{width:100%;max-width:1100px;margin-top:clamp(24px,4vw,56px);display:flex;justify-content:center;align-items:center;gap:clamp(8px,1.3vw,16px);padding-block:20px}
.fw-t{--w:clamp(80px,9.4vw,128px);flex:none;width:var(--w);aspect-ratio:9/16;border-radius:clamp(14px,1.6vw,22px);position:relative;overflow:hidden;background:var(--g);
  box-shadow:0 18px 40px -22px rgba(42,21,17,.45);animation:fwOn 8.4s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(var(--i) * .45s)}
.fw-t:nth-child(even){transform:translateY(18px)}
.fw-t.fw-c{--w:clamp(100px,11.8vw,160px)}
.fw-t::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,10,8,.45));pointer-events:none}
.fw-side{position:absolute;right:8%;bottom:26%;display:flex;flex-direction:column;gap:8px;z-index:1}
.fw-side i{width:clamp(10px,1.1vw,14px);height:clamp(10px,1.1vw,14px);border-radius:50%;background:rgba(255,255,255,.85)}
.fw-snd{position:absolute;inset-inline:8%;bottom:7%;z-index:1;height:clamp(20px,2.2vw,28px);border-radius:999px;background:rgba(255,255,255,.95);display:flex;align-items:center;gap:6px;padding-inline:8px;
  opacity:0;transform:translateY(8px) scale(.9);animation:fwSnd 8.4s cubic-bezier(.34,1.56,.64,1) infinite;animation-delay:calc(var(--i) * .45s)}
.fw-snd b{display:flex;align-items:flex-end;gap:2px;height:55%}
.fw-snd b i{width:3px;height:100%;border-radius:2px;background:var(--c-500);transform-origin:bottom;animation:fwEq 1s ease-in-out infinite}
.fw-snd b i:nth-child(2){animation-delay:-.3s}.fw-snd b i:nth-child(3){animation-delay:-.6s}.fw-snd b i:nth-child(4){animation-delay:-.15s}
.fw-snd em{flex:1;height:4px;border-radius:2px;background:var(--hair)}
@keyframes fwSnd{0%,6%{opacity:0;transform:translateY(8px) scale(.9)}14%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(4px) scale(.96)}}
@keyframes fwOn{0%,6%{box-shadow:0 18px 40px -22px rgba(42,21,17,.45)}14%,82%{box-shadow:0 0 0 3px var(--c-500),0 22px 44px -20px rgba(253,97,69,.55)}92%,100%{box-shadow:0 18px 40px -22px rgba(42,21,17,.45)}}
@keyframes fwEq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* ---------- four pillars, each with its concrete parts ---------- */
.head h2{max-width:24ch;text-wrap:balance}
.head h2 .hl{display:block}
.pls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pl{position:relative;overflow:hidden;isolation:isolate;background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow-soft);padding:clamp(26px,3.4vw,40px);display:flex;flex-direction:column;gap:12px;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.pl::before{content:"";position:absolute;inset:0 0 auto auto;width:60%;height:70%;z-index:-1;background:radial-gradient(70% 70% at 100% 0%,var(--c-50),transparent 70%)}
.pl:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.pl h3{font-size:clamp(23px,2.2vw,29px);line-height:1.2;letter-spacing:-.02em}
.pl p{margin:0;color:var(--mute);font-size:17px;line-height:1.65;max-width:44ch}
.pl ul{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pl li{background:var(--bg-2);border-radius:14px;padding:13px 16px;font-size:15.5px;font-weight:600;color:var(--ink-2);line-height:1.35}

/* ---------- comparison ---------- */
.cm{max-width:1060px;margin-inline:auto;background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow-soft);overflow:hidden}
.cm-row{display:grid;grid-template-columns:.8fr 1.1fr 1.1fr;align-items:stretch}
.cm-row>span{padding:20px 26px;font-size:16.5px;line-height:1.45;display:flex;align-items:center;gap:10px}
.cm-row:not(.cm-head):nth-child(odd){background:#FCFAF8}
.cm-l{font-weight:700;color:var(--ink)}
.cm-t{color:var(--mute)}
.cm-u{color:var(--ink);font-weight:600;background:rgba(255,231,223,.35);box-shadow:inset -3px 0 0 var(--c-500)}
.cm-row svg{width:18px;height:18px;flex:none}
.cm-t svg{color:#C9BFB9}
.cm-u svg{color:#fff;background:var(--c-500);border-radius:50%;padding:3px;width:20px;height:20px}
.cm-head>span{font-weight:700;font-size:16px;padding-block:22px}
.cm-head .cm-l,.cm-head .cm-t{background:#16100E;color:rgba(255,255,255,.85)}
.cm-head .cm-u{background:var(--c-500);color:#fff;box-shadow:none}

/* ---------- timeline, synced to release day ---------- */
.tl{list-style:none;margin:0 auto;padding:0;max-width:1060px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;position:relative;--p:0}
.tl::before,.tl::after{content:"";position:absolute;top:11px;inset-inline:12px;height:3px;border-radius:3px;background:var(--hair)}
.tl::after{background:linear-gradient(270deg,var(--c-300),var(--c-500));transform-origin:right;transform:scaleX(var(--p))}
.tl-i{position:relative;display:flex;flex-direction:column;gap:8px;padding-top:40px}
.tl-dot{position:absolute;top:0;inset-inline-start:0;width:25px;height:25px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 3px var(--c-200);z-index:1;transition:box-shadow .4s,background-color .4s}
.tl-i.on .tl-dot{background:var(--c-500);box-shadow:inset 0 0 0 3px var(--c-500),0 0 0 6px rgba(253,97,69,.15)}
.tl-i small{font-size:14px;font-weight:700;color:var(--c-700)}
.tl-i h3{font-size:clamp(21px,1.9vw,25px);line-height:1.2}
.tl-i p{margin:0;color:var(--mute);font-size:16px;line-height:1.65}

/* ---------- who & when ---------- */
.fts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ft{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow-soft);padding:26px 26px 28px;display:flex;flex-direction:column;gap:12px;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.ft:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.ft-h{display:flex;align-items:center;gap:12px}
.ft-n{flex:none;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--c-50);color:var(--c-700);font-weight:700;font-size:15px}
.ft h3{font-size:clamp(19px,1.6vw,22px);line-height:1.25}
.ft p{margin:0;color:var(--mute);font-size:16px;line-height:1.65}

/* ---------- FAQ: centered accordion ---------- */
.a-faq .acc{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:10px}
.a-faq .acc details{background:var(--card);border-radius:22px;box-shadow:var(--shadow-soft);transition:box-shadow .3s}
.a-faq .acc details:hover{box-shadow:var(--shadow-lift)}
.a-faq .acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 26px;font-weight:700;font-size:clamp(17px,1.4vw,19px)}
.a-faq .acc summary::-webkit-details-marker{display:none}
.a-faq .acc summary:focus-visible{outline:3px solid var(--c-300);outline-offset:2px;border-radius:22px}
.a-faq .acc summary::after{content:"";flex:none;width:32px;height:32px;border-radius:50%;background:var(--c-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23FD6145' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.a-faq .acc details p{padding:0 26px 24px;color:var(--mute);font-size:17px;line-height:1.65;margin:0}

@media (max-width:980px){
  .fts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl{grid-template-columns:1fr 1fr;row-gap:36px}
  .tl::before,.tl::after{display:none}
}
@media (max-width:640px){
  .ah{gap:16px;padding-top:28px}
  .ah h1{font-size:clamp(30px,8.6vw,36px);line-height:1.12;letter-spacing:-.025em}
  .ah .lead{font-size:17px;max-width:32ch}
  .ah .cta-row{display:grid;grid-template-columns:1fr;width:100%;gap:10px}
  .ah .cta-row .btn{width:100%;height:52px}
  .feed-wall{gap:8px;padding-block:14px}
  .fw-t{--w:16.5vw}.fw-t.fw-c{--w:21vw}
  .fw-t:nth-child(1),.fw-t:nth-child(7){display:none}
  .fw-t:nth-child(even){transform:translateY(10px)}
  .fw-side{gap:5px}.fw-snd{padding-inline:5px;gap:4px}
  .pls{grid-template-columns:1fr;gap:14px}
  .pl{padding:24px 20px;border-radius:26px}
  .pl h3{font-size:21px}
  .pl p{font-size:16px}
  .pl ul{gap:8px}
  .pl li{font-size:14px;padding:11px 12px}
  .cm{border-radius:26px}
  .cm-head{display:none}
  .cm-row{grid-template-columns:1fr;padding:18px 18px 16px;gap:8px;background:var(--card)!important;border-top:1px solid var(--hair)}
  .cm-row:nth-child(2){border-top:0}
  .cm-row>span{padding:0;font-size:15.5px}
  .cm-l{font-size:17px!important;margin-bottom:2px}
  .cm-u{background:none;box-shadow:none}
  .tl{grid-template-columns:1fr;gap:0;padding-inline-start:40px}
  .tl::before,.tl::after{display:block;top:6px;bottom:6px;height:auto;width:3px;inset-inline-start:11px;inset-inline-end:auto}
  .tl::after{transform-origin:top;transform:scaleY(var(--p))}
  .tl-i{padding:0 0 28px}
  .tl-dot{inset-inline-start:-40px;top:2px}
  .tl-i h3{font-size:20px}
  .fts{grid-template-columns:1fr;gap:12px}
  .ft{padding:20px}
  .ft h3{font-size:18px}
  .ft-n{width:38px;height:38px;border-radius:12px;font-size:14px}
  .a-faq .acc summary{padding:18px 20px;font-size:16.5px}
  .a-faq .acc details p{padding:0 20px 20px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .fw-t,.fw-snd,.fw-snd b i{animation:none}.fw-snd{opacity:1;transform:none}
}

/* pillars: a small wordless plate per card + lighter parts */
.pl{padding:10px 10px clamp(24px,3vw,34px)}
.pl>h3,.pl>p,.pl>ul{margin-inline:clamp(16px,2.4vw,30px)}
.pl::before{display:none}
.pl-vis{height:112px;border-radius:calc(var(--r-xl) - 10px);margin-bottom:10px;display:flex;align-items:center;justify-content:flex-start;padding-inline:28px;overflow:hidden;
  background:radial-gradient(60% 120% at 100% 0%,#FFE7DF,transparent 70%),radial-gradient(50% 120% at 0% 100%,#FFCDBD,transparent 70%),#FFF5F1}
.pl li{background:var(--card);box-shadow:inset 0 0 0 1px var(--hair);display:flex;align-items:center;gap:10px}
.pl li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-500);flex:none}
.pv-bars{display:flex;align-items:flex-end;gap:6px;height:56px}
.pv-bars i{width:10px;height:100%;border-radius:4px;background:var(--c-200);transform-origin:bottom;animation:pvG 2.6s ease-in-out infinite}
.pv-bars i:nth-child(3n){background:var(--c-500)}
.pv-bars i:nth-child(2){animation-delay:-.5s}.pv-bars i:nth-child(3){animation-delay:-1s}.pv-bars i:nth-child(4){animation-delay:-1.5s}.pv-bars i:nth-child(5){animation-delay:-.3s}.pv-bars i:nth-child(6){animation-delay:-.8s}.pv-bars i:nth-child(7){animation-delay:-1.3s}.pv-bars i:nth-child(8){animation-delay:-.2s}.pv-bars i:nth-child(9){animation-delay:-1.8s}
@keyframes pvG{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.pv-faces{display:flex}
.pv-faces i{width:46px;height:46px;border-radius:50%;margin-inline-start:-10px;border:3px solid #FFF5F1;background:linear-gradient(135deg,#FFA68E,#FD6145);animation:pvF 5s ease-in-out infinite;animation-delay:calc(var(--k) * .6s)}
.pv-faces i:first-child{margin-inline-start:0}
.pv-faces i:nth-child(2n){background:linear-gradient(135deg,#FFCDBD,#C9412A)}
.pv-faces i:nth-child(5){background:#E5DDD8}
@keyframes pvF{0%,24%,100%{transform:none;box-shadow:none}10%{transform:translateY(-8px);box-shadow:0 0 0 3px #FD6145}}
.pv-brief{width:170px;background:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 10px 24px -14px rgba(42,21,17,.3);display:flex;flex-direction:column;gap:7px}
.pv-brief i{display:block;height:7px;border-radius:4px;background:var(--hair)}
.pv-brief i:nth-child(1){width:45%;background:var(--ink-2);opacity:.8}
.pv-brief i.ty{background:var(--c-300);animation:pvT 4s ease-in-out infinite}
@keyframes pvT{0%,10%{width:0}55%,85%{width:70%}100%{width:70%;opacity:0}}
.pv-trend{width:170px;height:60px;flex:none;overflow:visible;display:block}
.pv-trend path{fill:none;stroke:var(--c-500);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;animation:pvD 5s ease-in-out infinite}
.pv-trend circle{fill:var(--c-500);animation:pvO 5s ease-in-out infinite}
@keyframes pvD{0%{stroke-dashoffset:1}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes pvO{0%,50%{opacity:0}60%,85%{opacity:1}100%{opacity:0}}
@media (max-width:640px){.pl{padding:8px 8px 22px}.pl>h3,.pl>p,.pl>ul{margin-inline:14px}.pl-vis{height:96px;padding-inline:20px}}
@media (prefers-reduced-motion:reduce){.pl-vis *{animation:none!important}}
.ah h1{font-size:clamp(40px,5.2vw,76px);max-width:24ch}
.ah h1{font-size:clamp(38px,4.7vw,68px);max-width:26ch}
.cm-brand{display:inline-flex;align-items:center;gap:9px}.cm-brand img{width:22px;height:auto;filter:brightness(0) invert(1)}