/* ============================================================================
 * Suunta.ai Landing v2 — Audiences  (V3 — minimalist typography-led)
 * ----------------------------------------------------------------------------
 * DARK anchor. Filosofian muutos: aiempi kortti-pohjainen layout korvattu
 * typography-led splittillä jossa EI OLE container-boxeja. Vain typografia,
 * hairline-divider keskellä + reilu whitespace. Linear / Vercel / Attio
 * -tyylinen pidättyvä premium.
 *
 * Rakenne:
 *   1. Head (eyebrow + h2 + lead) — centered
 *   2. Split — 2-col jakaja jossa hairline vertical divider keskellä.
 *      Vasen: "Leaders" emerald-pill + h3 + 4 bulletia
 *      Oikea: "Every employee" emerald-pill + h3 + 4 bulletia
 *      EI: borders, EI: card-bg, EI: drop-shadows.
 *   3. Try asking — hairline divider yläpuolella, eyebrow + 3 question
 *      kursivoituina lainausmerkeissä. EI container-cardia.
 *
 * Ops styleguide:
 *   - Yksi accent (emerald) — role-pill + bullet-prefix + smart-quotes
 *   - Typography > Visual frames
 *   - Hairline-divider visual seam (ei border boxeja)
 *   - Reilu padding-y jotta sisältö hengittää
 * ============================================================================ */

.v2-audiences__head {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-16);
}

.v2-audiences__head h2 { margin-top: var(--space-4); }
.v2-audiences__head .lead { margin-top: var(--space-6); }

/* ─── Split — 2-col typography ─────────────────────────────────────── *
 * Desktop: 2-col grid, hairline VERTICAL divider keskellä (via border-left
 *   toiselle col:lle + padding-left jotta teksti ei kosketa divideria).
 * Mobile: stack vertikaalisesti, HORIZONTAL hairline divider välissä
 *   (vaihdetaan border-left → border-top).
 */
.v2-audiences__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  max-width: 980px;
  margin-inline: auto;
  margin-bottom: var(--space-16);
}

@media (min-width: 768px) {
  /* Tasapainoinen 1fr / 1fr split — markkinoinnin palaute 2026-05-26:
     "kaksi palstaa on erikokoiset". Molemmat audiencet samanarvoiset. */
  .v2-audiences__split {
    grid-template-columns: 1fr 1fr;
    gap: 0;                                       /* gap 0 jotta divider näkyy puhtaasti */
  }
}

.v2-audiences__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-block: var(--space-8);
}

/* Hairline divider — mobile horizontal, desktop vertical */
.v2-audiences__col + .v2-audiences__col {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: var(--space-12);
}

@media (min-width: 768px) {
  .v2-audiences__col + .v2-audiences__col {
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: var(--space-8);
    padding-left: var(--space-12);
  }
  .v2-audiences__col {
    padding-right: var(--space-12);
  }
  .v2-audiences__col + .v2-audiences__col {
    padding-right: 0;
  }
}

/* Role-label — muted white uppercase (poistettu emerald V3 polish:ssa).
   Pelkkä typografinen eyebrow, ei aksenttiväriä — sama "one-accent-per-
   section" -periaate kuin Problem/Loop/Security/How V3:ssa. */
.v2-audiences__role {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

/* H3 — iso display-typografia, calibrated tracking. Tämä on osion
   pää-väite — saa olla painokas. */
.v2-audiences__h3 {
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: var(--weight-medium);
  letter-spacing: -0.022em;
  color: var(--text-primary);
  line-height: 1.18;
  margin: 0;
  max-width: 420px;
}

/* ─── Benefit list — minimalistic, emerald-prefix vain pieni char ──── *
 * Aiempi check-icon emerald-circle bg poistettu (visual weight liikaa).
 * Käytetään unicode-tikkiä (✓) emerald-värissä, kompaktimpi ja tighter.
 */
.v2-audiences__list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.v2-audiences__list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--text-base);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: -0.005em;
}

/* Tikit muted white (oli emerald) — pelkkä semanttinen indicator,
   ei aksentti. */
.v2-audiences__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 1px;
  color: rgba(255, 255, 255, 0.40);
  font-size: 13px;
  font-weight: var(--weight-medium);
  line-height: 1.5;
}

/* ─── Try asking — minimalistic typography stack, EI container ─────── *
 * Hairline divider yläpuolella visual seam splittistä → try-asking
 * tuntuu omaksi "kysymys-momentti" -osakseen vaikka ei ole framea.
 * Eyebrow + 3 italic-kysymystä smart quotes:eissa.
 */
.v2-audiences__ask {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
  padding-top: var(--space-12);
  text-align: center;
}

/* Hairline divider yläosaan — neutral white (oli emerald 40%) */
.v2-audiences__ask::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.v2-audiences__ask-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 var(--space-6);
}

/* Questions — pure typography, smart quotes, italic. EI chip-frame:a.
   Subtle hover-state: opacity nousee 0.78 → 1, ei layout shift. */
.v2-audiences__questions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}

.v2-audiences__questions li {
  position: relative;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-style: italic;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 400;
  max-width: 620px;
  transition: color var(--transition-hover);
  cursor: default;
}

.v2-audiences__questions li:hover {
  color: rgba(255, 255, 255, 0.96);
}

/* Smart quotes — muted white (oli emerald 55%) — typografinen
   yksityiskohta, ei aksenttiväriä */
.v2-audiences__questions li::before {
  content: '\201C';                              /* opening curly */
  color: rgba(255, 255, 255, 0.35);
  margin-right: 4px;
  font-style: normal;
  font-weight: 500;
}

.v2-audiences__questions li::after {
  content: '\201D';                              /* closing curly */
  color: rgba(255, 255, 255, 0.35);
  margin-left: 4px;
  font-style: normal;
  font-weight: 500;
}

/* ─── Mobile tarkennukset ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .v2-audiences__col { padding-block: var(--space-6); }
  .v2-audiences__col + .v2-audiences__col {
    padding-top: var(--space-10);
  }
  .v2-audiences__h3 {
    font-size: 22px;
  }
  .v2-audiences__list li {
    font-size: var(--text-sm);
  }
  .v2-audiences__ask {
    padding-top: var(--space-10);
  }
  .v2-audiences__questions li {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-audiences__questions li {
    transition: none;
  }
}