/* ══ SONARA PAGES — POLISH LAYER ═══════════════════════════════════════
   Shared by for-artists, for-fans, how-it-works and our-story.
   Loaded after each page's own <style>; refines only, removes nothing.
   To roll back: delete the <link> to this file in the page's <head>.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Global feel ────────────────────────────────────────────────────── */
::selection { background: rgba(147,51,234,.55); color: #fff; }

html { scrollbar-color: rgba(147,51,234,.5) transparent; scrollbar-width: thin; }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--purple), var(--blue));
  border-radius: 10px;
  border: 3px solid #000;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--purple-light);
  outline-offset: 3px;
  border-radius: 10px;
}

/* No more one-word orphan lines in headings ("…Works / For You") */
.page-hero h1, .section-heading, .cta-banner h2,
.feature-title, .value-card-title, .step-content h3 { text-wrap: balance; }
.page-hero p, .section-sub, .feature-desc, .value-card-desc,
.step-content p, .quote-block p { text-wrap: pretty; }

/* ── Hero: the same purple aurora the app has, instead of flat black ── */
.page-hero { position: relative; isolation: isolate; }
.page-hero::before {
  content: "";
  position: absolute;
  inset: -10% -30% 0;
  z-index: -1;
  background:
    radial-gradient(40% 55% at 35% 40%, rgba(147,51,234,.22), transparent 70%),
    radial-gradient(35% 50% at 68% 55%, rgba(99,102,241,.16), transparent 70%);
  filter: blur(20px);
  animation: snr-aurora 14s ease-in-out infinite alternate;
  pointer-events: none;
}
/* Small equaliser motif under the hero — Sonara's "sound" signature */
.page-hero-cta::after {
  content: "";
  flex-basis: 100%;
  height: 18px;
  margin-top: 2.5rem;
  background: linear-gradient(90deg, transparent, var(--purple-light) 30%, var(--blue) 70%, transparent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 18'%3E%3Cg%3E%3Crect x='0' y='8' width='3' height='10' rx='1.5'/%3E%3Crect x='6' y='4' width='3' height='14' rx='1.5'/%3E%3Crect x='12' y='10' width='3' height='8' rx='1.5'/%3E%3Crect x='18' y='1' width='3' height='17' rx='1.5'/%3E%3Crect x='24' y='6' width='3' height='12' rx='1.5'/%3E%3Crect x='30' y='11' width='3' height='7' rx='1.5'/%3E%3Crect x='36' y='3' width='3' height='15' rx='1.5'/%3E%3Crect x='42' y='0' width='3' height='18' rx='1.5'/%3E%3Crect x='48' y='5' width='3' height='13' rx='1.5'/%3E%3Crect x='54' y='9' width='3' height='9' rx='1.5'/%3E%3Crect x='60' y='2' width='3' height='16' rx='1.5'/%3E%3Crect x='66' y='7' width='3' height='11' rx='1.5'/%3E%3Crect x='72' y='12' width='3' height='6' rx='1.5'/%3E%3Crect x='78' y='9' width='3' height='9' rx='1.5'/%3E%3C/g%3E%3C/svg%3E") center / 252px 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 18'%3E%3Cg%3E%3Crect x='0' y='8' width='3' height='10' rx='1.5'/%3E%3Crect x='6' y='4' width='3' height='14' rx='1.5'/%3E%3Crect x='12' y='10' width='3' height='8' rx='1.5'/%3E%3Crect x='18' y='1' width='3' height='17' rx='1.5'/%3E%3Crect x='24' y='6' width='3' height='12' rx='1.5'/%3E%3Crect x='30' y='11' width='3' height='7' rx='1.5'/%3E%3Crect x='36' y='3' width='3' height='15' rx='1.5'/%3E%3Crect x='42' y='0' width='3' height='18' rx='1.5'/%3E%3Crect x='48' y='5' width='3' height='13' rx='1.5'/%3E%3Crect x='54' y='9' width='3' height='9' rx='1.5'/%3E%3Crect x='60' y='2' width='3' height='16' rx='1.5'/%3E%3Crect x='66' y='7' width='3' height='11' rx='1.5'/%3E%3Crect x='72' y='12' width='3' height='6' rx='1.5'/%3E%3Crect x='78' y='9' width='3' height='9' rx='1.5'/%3E%3C/g%3E%3C/svg%3E") center / 252px 100% no-repeat;
  opacity: .45;
}
/* …but not inside the closing CTA banner */
.cta-banner .page-hero-cta::after { content: none; }

@keyframes snr-aurora {
  0%   { transform: translate3d(-3%, 0, 0) scale(1); }
  100% { transform: translate3d(3%, 4%, 0) scale(1.08); }
}

/* ── Stat chips: a touch of life ─────────────────────────────────────── */
.stat-chip {
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.23,1,.32,1), border-color .3s, box-shadow .3s;
}
.stat-chip::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--purple-light), var(--blue), transparent);
  opacity: .6;
}
.stat-chip:hover {
  transform: translateY(-4px);
  border-color: rgba(147,51,234,.4);
  box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 32px rgba(147,51,234,.22);
}

/* ── Feature / value cards: icon lights up with the card ────────────── */
.feature-icon { transition: background .3s, box-shadow .3s, transform .3s cubic-bezier(.34,1.56,.64,1); }
.feature-card:hover .feature-icon {
  background: linear-gradient(135deg, rgba(147,51,234,.55), rgba(99,102,241,.45));
  box-shadow: 0 6px 20px rgba(147,51,234,.4);
  transform: scale(1.06) rotate(-3deg);
}
.value-card { transition: transform .28s cubic-bezier(.23,1,.32,1), border-color .28s, box-shadow .28s; }
.value-card:hover {
  transform: translateY(-4px);
  border-color: rgba(147,51,234,.36);
  box-shadow: 0 16px 44px rgba(0,0,0,.4), 0 0 32px rgba(147,51,234,.16);
}

/* ── How it works: steps joined into a timeline ─────────────────────── */
.step-card { position: relative; }
.step-card:not(:last-of-type)::after {
  content: "";
  position: absolute;
  left: calc(1.75rem + 21px);
  top: calc(1.75rem + 48px);
  bottom: calc(-1.25rem - 1.75rem + 4px);
  width: 2px;
  background: linear-gradient(180deg, rgba(147,51,234,.6), rgba(99,102,241,.15));
  border-radius: 2px;
  z-index: 1;
}

/* ── Comparison tables: make Sonara the obvious answer ──────────────── */
.compare-table { border-collapse: separate; border-spacing: 0; }
.compare-table th:first-child { border-top-left-radius: 12px; }
.compare-table th:last-child  { border-top-right-radius: 12px; }

/* Sonara as the last column (For Artists, How It Works) */
.compare-table--col th:last-child,
.compare-table--col td:last-child {
  background: rgba(147,51,234,.10);
  border-left: 1px solid rgba(147,51,234,.28);
  border-right: 1px solid rgba(147,51,234,.28);
}
.compare-table--col th:last-child {
  background: linear-gradient(135deg, rgba(147,51,234,.45), rgba(99,102,241,.35));
  color: #fff;
}
.compare-table--col tbody tr:last-child td:last-child {
  border-bottom: 1px solid rgba(147,51,234,.28);
  border-radius: 0 0 12px 12px;
}

/* Sonara as the last row (For Fans) */
.compare-table--row tbody tr:last-child td {
  background: rgba(147,51,234,.12);
  border-top: 1px solid rgba(147,51,234,.35);
  border-bottom: 1px solid rgba(147,51,234,.35);
}
.compare-table--row tbody tr:last-child td:first-child {
  border-left: 1px solid rgba(147,51,234,.35);
  border-radius: 12px 0 0 12px;
  box-shadow: inset 3px 0 0 var(--purple);
}
.compare-table--row tbody tr:last-child td:last-child {
  border-right: 1px solid rgba(147,51,234,.35);
  border-radius: 0 12px 12px 0;
}

/* ── Quote: a proper pull-quote ─────────────────────────────────────── */
.quote-block { position: relative; overflow: hidden; }
.quote-block::before {
  content: "\201C";
  position: absolute;
  right: 1.25rem; top: -1.6rem;
  font-family: 'Space Grotesk', Georgia, serif;
  font-size: 8rem; line-height: 1;
  color: rgba(147,51,234,.18);
  pointer-events: none;
}

/* ── Footer: gradient hairline instead of a flat rule ───────────────── */
.sonara-footer { position: relative; }
.sonara-footer::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--purple-light) 30%, var(--blue) 70%, transparent);
  opacity: .5;
}

/* ── Phones ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Wide comparison tables scroll sideways: keep the row labels pinned
     so you always know which line you're reading. */
  .compare-table th:first-child,
  .compare-table td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: #0d0a18;
    box-shadow: 6px 0 12px -6px rgba(0,0,0,.8);
  }
  .compare-table--row tbody tr:last-child td:first-child { background: #1a1030; }
  .page-hero-cta::after { margin-top: 1.75rem; height: 14px; }
  .step-card:not(:last-of-type)::after { display: none; }
}

/* ── Respect reduced-motion preferences ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .page-hero::before { animation: none; }
  .stat-chip, .feature-icon, .value-card { transition: none; }
  .stat-chip:hover, .value-card:hover, .feature-card:hover .feature-icon { transform: none; }
}