/* =========================================================
   Audience landing page shared styles
   ========================================================= */

.aud-hero {
  padding: 170px 0 80px;
  position: relative;
  overflow: hidden;
}
.aud-hero-inner { position: relative; z-index: 2; }
.aud-hero h1 {
  font-size: clamp(44px, 6.5vw, 92px);
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.aud-hero h1 em { color: var(--mw-relief); }
.aud-hero p.lead {
  margin-top: 28px;
  max-width: 54ch;
  font-size: clamp(18px, 1.4vw, 21px);
  color: var(--mw-text);
}

/* "The sentences you hear" — signature opener */
.sentence-stage {
  padding: var(--r-7) 0;
  border-top: 1px solid var(--mw-border);
  border-bottom: 1px solid var(--mw-border);
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(255,107,107,.05), transparent 60%);
  overflow: hidden;
}
.sentence-stage .intro {
  max-width: 800px;
  margin: 0 auto 48px;
  text-align: center;
}
.sentence-stage .intro h2 {
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.1;
}
.sentence-stage .intro p {
  margin: 20px auto 0;
  max-width: 56ch;
  color: var(--mw-text-2);
}

.sentence-rail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
}
.sentence {
  padding: 24px 28px;
  border-radius: 16px;
  border: 1px solid var(--mw-border);
  background: var(--mw-surface);
  position: relative;
  transition: all .3s ease;
}
.sentence:hover { border-color: rgba(255,107,107,.35); transform: translateY(-2px); }
.sentence .quote-mark {
  position: absolute;
  top: 10px; left: 16px;
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--mw-tension);
  opacity: .4;
}
.sentence .said {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mw-text-2);
  margin-bottom: 10px;
  margin-left: 28px;
}
.sentence p {
  margin: 0 0 0 28px;
  color: var(--mw-text);
  font-family: var(--font-display);
  font-size: 19px;
  font-style: italic;
  line-height: 1.35;
}
@media (max-width: 720px) { .sentence-rail { grid-template-columns: 1fr; } }

/* Bridge section */
.bridge {
  padding: 120px 0;
  background: linear-gradient(180deg, transparent, rgba(60,242,214,.03));
}
.bridge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.bridge h2 { font-size: clamp(32px, 4vw, 52px); max-width: 14ch; }
.bridge h2 em { color: var(--mw-relief); }
.bridge p { font-size: 17px; color: var(--mw-text); max-width: 54ch; }
.bridge p + p { margin-top: 16px; }
@media (max-width: 900px) { .bridge-grid { grid-template-columns: 1fr; } }

.bridge-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  border: 1px solid var(--mw-border);
  background:
    radial-gradient(60% 80% at 20% 10%, rgba(60,242,214,.18), transparent 60%),
    radial-gradient(60% 80% at 100% 100%, rgba(124,92,255,.25), transparent 60%),
    #0a0c14;
  overflow: hidden;
}
.bridge-visual svg { width: 100%; height: 100%; display: block; }

/* After-state */
.after {
  padding: 100px 0;
  border-top: 1px solid var(--mw-border);
}
.after-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.after-card {
  padding: 32px 28px;
  border-radius: 18px;
  border: 1px solid var(--mw-border);
  background: var(--mw-surface);
  position: relative;
  transition: all .3s ease;
}
.after-card:hover {
  border-color: rgba(60,242,214,.45);
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -20px rgba(60,242,214,.25);
}
.after-card .num {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--mw-relief);
  font-weight: 300;
  line-height: 1;
}
.after-card h3 {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.after-card p { margin-top: 10px; font-size: 14px; color: var(--mw-text-2); line-height: 1.5; }
@media (max-width: 900px) { .after-grid { grid-template-columns: 1fr; } }

/* Final CTA */
.cta-final {
  padding: 80px 64px;
  border-radius: 28px;
  text-align: center;
  background:
    radial-gradient(50% 80% at 0% 0%, rgba(124,92,255,.15), transparent 60%),
    radial-gradient(60% 80% at 100% 100%, rgba(60,242,214,.12), transparent 60%),
    #0a0d16;
  border: 1px solid rgba(124,92,255,.3);
  margin-top: 40px;
}
.cta-final h2 { max-width: 22ch; margin: 18px auto 0; }
.cta-final p { max-width: 52ch; margin: 20px auto; color: var(--mw-text); }
.cta-final .row {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
@media (max-width: 700px) { .cta-final { padding: 56px 28px; } }