/* component ב, 18.10 (v2) — the persona-card hero each audience page needs to actually look like the
   home page's own "למי זה" section, not a generic docs page. Scoped to main.audience-page, loaded
   alongside postpro-marketing-core.css (never instead of it) — every color below is copied verbatim
   from home-v3.css's per-audience tokens so the two pages read as the same product. */
main.audience-page{--ink:#0d1527;--ink-2:#3a4357}

main.audience-page .persona{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);grid-template-areas:"name pic" "body pic";align-content:start;column-gap:8px;padding:12px;background:var(--bg);border-radius:34px;margin-block-start:36px}
main.audience-page .persona-name{grid-area:name;margin:0;display:flex;align-items:center;gap:12px;padding:26px 24px 0;font-size:clamp(1.75rem,2.6vw,2.5rem);font-weight:700;letter-spacing:-.026em;line-height:1.1;color:var(--ink)}
main.audience-page .persona-name::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 5px rgba(255,255,255,.7)}
main.audience-page .persona-pic{grid-area:pic;position:relative;overflow:hidden;border-radius:24px;min-height:340px;background:var(--pbg)}
main.audience-page .persona-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 16%}
main.audience-page .persona-body{grid-area:body;display:flex;flex-direction:column;gap:16px;padding:16px 24px 26px}
main.audience-page .persona-body p{margin:0;font-size:1.125rem;line-height:1.55;color:var(--ink-2)}
main.audience-page .persona-body .persona-plus{color:var(--ink);font-weight:500}
main.audience-page .persona-tags{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
main.audience-page .persona-tags li{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.85);border-radius:999px;padding:7px 16px 7px 14px;font-size:0.9375rem;font-weight:500;line-height:1.4;color:var(--ink)}
main.audience-page .persona-tags li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ac)}

@media (max-width:860px){
  main.audience-page .persona{grid-template-columns:1fr;grid-template-areas:"pic" "name" "body";padding:10px;border-radius:28px}
  main.audience-page .persona-pic{min-height:0;aspect-ratio:4/3;border-radius:22px}
  main.audience-page .persona-name{padding:20px 16px 0}
  main.audience-page .persona-body{padding:14px 16px 20px}
  main.audience-page .persona-body p{font-size:1.0625rem}
}
