/* ============================================================
   GoldenI — Audience surfaces (For clinicians · patients · CMOs)
   Persona-lensed pages. Shares the site shell; adds the
   gap / what-changes / foundation / where-it-stands rhythm.
   ============================================================ */

/* ---------- Hero pull-quote (right rail of the dark hero) ---------- */
.aud-pull { display: flex; align-items: center; }
.aud-pull blockquote {
  margin: 0; padding: 6px 0 6px 30px;
  border-left: 2px solid var(--gi-gold-500);
}
.aud-pull p {
  font: 400 clamp(22px,2.4vw,30px)/1.32 var(--font-serif);
  font-style: italic; letter-spacing: -0.012em;
  color: var(--fg-on-dark-1); margin: 0; text-wrap: balance;
}

/* ---------- The gap & the foundation: lede split ---------- */
.aud-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
.aud-split h2 { font: 500 clamp(28px,3.4vw,42px)/1.12 var(--font-sans); letter-spacing: -0.022em; color: var(--fg-1); margin: 0; text-wrap: balance; }
.sec.dark .aud-split h2, .sec.ink .aud-split h2 { color: var(--fg-1); }
.aud-split .body p { font: 400 16.5px/1.66 var(--font-sans); color: var(--fg-2); margin: 0 0 18px; }
.aud-split .body p:last-child { margin-bottom: 0; }
.aud-split .body strong { color: var(--fg-1); font-weight: 600; }
.aud-split .body .ajar { font-style: italic; color: var(--fg-3); }
.aud-split .eyebrow { display: block; margin-bottom: 18px; }

/* ---------- What changes: numbered change list ---------- */
.changes { border-top: 1px solid var(--gi-ink-700); margin-top: 4px; }
.change { display: grid; grid-template-columns: 64px 1fr; gap: 32px; padding: 34px 0; border-bottom: 1px solid var(--gi-border); align-items: start; }
.change .cn { font: 500 13px/1 var(--font-mono); letter-spacing: 0.1em; color: var(--accent-ink); padding-top: 6px; }
.change h3 { font: 500 22px/1.32 var(--font-sans); letter-spacing: -0.016em; color: var(--fg-1); margin: 0 0 10px; max-width: 880px; text-wrap: pretty; }
.change p { font: 400 16px/1.62 var(--font-sans); color: var(--fg-2); margin: 0; max-width: 880px; }
.change p .em { color: var(--fg-1); font-style: italic; }

/* ---------- Where this stands ---------- */
.stands { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: start; padding: 40px 44px; border: 1px solid var(--gi-border); border-radius: var(--r-lg); background: var(--gi-bg-raised); }
.stands .pill { align-self: start; }
.stands p { font: 400 16.5px/1.64 var(--font-sans); color: var(--fg-2); margin: 0 0 14px; }
.stands p:last-child { margin-bottom: 0; }
.stands strong { color: var(--fg-1); font-weight: 600; }

/* ---------- Doorway links (cross-page, in-prose) ---------- */
.doorways { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 36px; }
.doorway { font: 500 14.5px/1 var(--font-sans); color: var(--accent-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; padding-bottom: 2px; border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); transition: border-color var(--dur-fast); }
.doorway:hover { border-color: var(--accent); }

/* ---------- Audience close (dark CTA) ---------- */
.aud-close { background: var(--gi-bg-dark); color: var(--fg-on-dark-1); padding: 116px 0; }
.aud-close .wrap { text-align: center; }
.aud-close h2 { font: 500 clamp(30px,4vw,50px)/1.1 var(--font-sans); letter-spacing: -0.026em; color: var(--fg-on-dark-1); margin: 32px auto 0; max-width: 780px; text-wrap: balance; }
.aud-close h2 .ser { font-family: var(--font-serif); font-weight: 400; font-style: italic; color: var(--gi-gold-500); }
.aud-close p { font: 400 17px/1.6 var(--font-sans); color: var(--fg-on-dark-2); margin: 24px auto 0; max-width: 600px; }
.aud-close .cta-row { justify-content: center; margin-top: 38px; display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .aud-split { grid-template-columns: 1fr; gap: 20px; }
  .aud-pull { order: -1; }
  .aud-pull blockquote { padding-left: 22px; }
  .change { grid-template-columns: 1fr; gap: 8px; }
  .change .cn { padding-top: 0; }
  .stands { grid-template-columns: 1fr; gap: 18px; padding: 30px 24px; }
}