/* ============================================================
   Audiences page — October 2026 restyle, in the approved homepage's
   language. Loaded by audiences.html only, after theme.css; every
   rule is scoped to body.page-audiences so nothing leaks. Shared
   pieces (rhythm, hero, the closing .formcard) live in theme.css.

   Rhythm, as on the homepage: dark hero, two dark sections, one
   lifted dark band (the audience cards and the buying window), dark
   close. The owner chose dark bands, white kept for long reading.
   ============================================================ */

/* The homepage's section spacing, not the previous design's 128px. */
.page-audiences main { display: flex; flex-direction: column; }
.page-audiences .aud-examples { order: 1; }
.page-audiences .pagehero { order: 2; }
.page-audiences .aud-precision { order: 3; }
.page-audiences .aud-reach { order: 4; }
.page-audiences .aud-advantage { order: 5; }
.page-audiences .close { order: 6; }
.page-audiences .section:not(.pagehero) { padding-block: clamp(64px, 7.5vw, 104px); }
.page-audiences .intro > * { min-width: 0; }
.page-audiences .aud-examples .label { font-size: 30px; }
.page-audiences .aud-examples .label::before { width: 40px; height: 10.9px; border-radius: 5.45px; }

/* ---------- centred section head on a 708px measure ---------- */
.page-audiences .aud-head { display: block; max-width: 708px; margin-inline: auto; text-align: center; }
.page-audiences .aud-head .h-section { margin-inline: auto; }
/* Both centred standfirsts share one measure; balance was squeezing one to 405px. */
.page-audiences .aud-head .lede { max-width: 600px; margin: 20px auto 0; text-wrap: pretty; }
.page-audiences .aud-reach .label, .page-audiences .aud-examples .label { justify-content: center; }

/* ---------- audience precision: three criteria as dark cards ---------- */
/* One row per card (icon beside text), so a two-line criterion fills it. */
.page-audiences .ticks--wide { margin-top: clamp(48px, 6vw, 72px); gap: 24px; }
.page-audiences .ticks--wide li {
  display: flex; align-items: center; gap: 20px;
  background: var(--sa-card); border: 0; border-radius: 12px;
  padding: 24px;
  font-family: var(--sa-body); font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em;
  color: var(--sa-ink);
}
/* The homepage's 64px icon tile, filled with Genly's deep teal-to-navy. */
.page-audiences .aud-icon {
  flex: none; display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 10px;
  background: linear-gradient(150deg, #0A4F5C 0%, #0B3B74 100%);
}
.page-audiences .aud-icon svg {
  width: 30px; height: 30px; fill: none;
  stroke: var(--sa-sky); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.page-audiences .aud-filter-cards li {
  display: block;
  min-height: 168px;
}
.page-audiences .aud-filter-cards h3 {
  margin: 0 0 10px;
  font-family: var(--sa-body);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--sa-ink);
}
.page-audiences .aud-filter-cards p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--sa-muted);
}
@media (max-width: 619px) {
  .page-audiences .aud-filter-cards li { min-height: 0; }
  .page-audiences .aud-filter-cards h3 { font-size: 20px; }
}

/* ---------- cross-channel reach: the diagram on the gradient stage ----------
   The SVG is drawn for a white ground (navy labels, pale dots), so it keeps
   a white card and sits on the teal-to-ocean stage the homepage uses for its
   product screen. */
.page-audiences .aud-diagram {
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: 0; background: none; border: 0; border-radius: 12px; overflow: visible;
}
.page-audiences .aud-stage {
  position: relative; overflow: visible;
  background: none;
  border-radius: 0;
  padding: 0;
}
.page-audiences .aud-stage::before {
  content: none;
}
.page-audiences .aud-stage__card {
  position: relative;
  background: none; border-radius: 0;
  padding: 0;
  overflow-x: visible;
  box-shadow: none;
}
/* Two drawings of the same diagram with the same labels: the wide one, and a
   stacked one for phones and tablets, where the wide one's labels shrink to 9px.
   display:none takes the hidden one out of the accessibility tree too. */
.page-audiences .aud-diagram__narrow { display: none; }
.page-audiences .aud-diagram__wide,
.page-audiences .aud-diagram__narrow,
.page-audiences .aud-diagram .diagram__hint { display: none; }
.page-audiences .aud-diagram__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.page-audiences .aud-diagram figcaption {
  max-width: 708px; margin: 24px auto 0; text-align: center;
  font-size: 16px; color: var(--sa-muted);
}
.page-audiences .aud-diagram .diagram__hint { text-align: center; color: var(--sa-muted); font-size: 14px; }
/* Below 1024px the wide drawing's smallest label would fall under 11px,
   so tablets get the stacked one too, held to a phone-like width. */
@media (max-width: 1023px) {
  .page-audiences .aud-diagram__wide { display: none; }
  .page-audiences .aud-diagram__narrow { display: block; width: 100%; max-width: 440px; min-width: 0; height: auto; margin-inline: auto; }
  .page-audiences .aud-diagram .diagram__hint { display: none; }
}
@media (max-width: 760px) {
  .page-audiences .aud-stage { padding: 0; }
  .page-audiences .aud-stage__card { padding: 0; overflow: visible; }
}
.page-audiences .aud-diagram__wide,
.page-audiences .aud-diagram__narrow,
.page-audiences .aud-diagram .diagram__hint { display: none !important; }

/* ---------- the band: the homepage's lifted near-black ----------
   Marked section--navy on-navy so theme.css flips labels, ledes and focus
   to their dark-ground colours; the ground itself steps up from #05080F. */
.page-audiences .aud-band { background: #0A111C; --wipe-bg: #0A111C; color: var(--sa-ink); }
.page-audiences .aud-examples {
  background-color: var(--sa-black);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 260' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M0 214 C260 214 300 150 560 128 S1000 96 1280 60' fill='none' stroke='%231685C1' stroke-width='1.5' opacity='.5'/%3E%3Cg fill='%238FC7ED' opacity='.38'%3E%3Ccircle cx='24' cy='214' r='1.1'/%3E%3Ccircle cx='135' cy='205' r='1.2'/%3E%3Ccircle cx='292' cy='185' r='1.5'/%3E%3Ccircle cx='509' cy='151' r='2'/%3E%3Ccircle cx='644' cy='171' r='1.7'/%3E%3Ccircle cx='858' cy='129' r='2.7'/%3E%3Ccircle cx='976' cy='143' r='3'/%3E%3Ccircle cx='1119' cy='136' r='3.1'/%3E%3Ccircle cx='1193' cy='142' r='3'/%3E%3C/g%3E%3Cg fill='%2316A897' opacity='.42'%3E%3Ccircle cx='381' cy='171' r='1.8'/%3E%3Ccircle cx='892' cy='166' r='2.6'/%3E%3Ccircle cx='1084' cy='53' r='3.4'/%3E%3C/g%3E%3Cg fill='%23F2AE2E' opacity='.4'%3E%3Ccircle cx='334' cy='179' r='1.8'/%3E%3Ccircle cx='728' cy='130' r='2.1'/%3E%3Ccircle cx='1040' cy='14' r='3.4'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(60% 110% at 92% 8%, rgba(22,133,193,0.40), transparent 62%),
    radial-gradient(45% 80% at 68% 100%, rgba(22,168,151,0.22), transparent 66%);
  background-repeat: no-repeat;
  background-size: 100% 260px, auto, auto;
  background-position: center top, center, center;
}
.page-audiences .aud-band .lede { color: var(--sa-muted); }
/* Two sections share the band, so the second does not double the gap. */
.page-audiences .aud-advantage { padding-top: 0 !important; }

/* ---------- audience examples: flat rounded photo cards, 4 then 3 centred ---------- */
.page-audiences .aud { margin-top: clamp(48px, 6vw, 72px); gap: 24px; }
@media (min-width: 620px)  { .page-audiences .aud__item { flex-basis: calc((100% - 24px) / 2); } }
@media (min-width: 1040px) { .page-audiences .aud__item { flex-basis: calc((100% - 3 * 24px) / 4); } }
.page-audiences .aud__item {
  display: flex; flex-direction: column;
  background: #121D30; border: 1px solid var(--sa-line); border-radius: 12px; overflow: hidden;
}
.page-audiences .aud__img { aspect-ratio: 4 / 3; border-radius: 0; margin: 0; background: var(--sa-card); }
/* Genly's teal-to-ocean accent where the photo meets the card. */
.page-audiences .aud__img::after { width: 64px; height: 4px; background: linear-gradient(90deg, #16A897, #1685C1); }
.page-audiences .aud h3 {
  padding: 24px 24px 0; margin: 0;
  font-size: 22px; line-height: 1.3; letter-spacing: -0.02em; color: var(--sa-ink);
}
/* "Restaurants +" never breaks, so no line starts with the plus. */
.page-audiences .aud-nowrap { white-space: nowrap; }
.page-audiences .aud p { padding: 10px 24px 28px; font-size: 16px; line-height: 1.5; color: var(--sa-muted); }
/* Four across, one title takes two lines: every title gets two lines'
   room, top-aligned under the photo, so the descriptions still start
   level. Column flex also puts the break exactly after "Restaurants +". */
@media (min-width: 1040px) {
  .page-audiences .aud h3 {
    display: flex; flex-direction: column; justify-content: flex-start;
    min-height: calc(24px + 2 * 1.3em);
  }
}
/* Phones: wide photos keep seven stacked cards short. */
@media (max-width: 619px) {
  .page-audiences .aud__img { aspect-ratio: 16 / 9; }
  .page-audiences .aud h3 { padding: 20px 20px 0; font-size: 20px; }
  .page-audiences .aud p { padding: 8px 20px 24px; }
}

/* ---------- the audience carousel (motion lab option A) ----------
   audiences.js adds .aud--carousel only when JS runs and motion is
   allowed; otherwise the 4 + 3 grid above is the layout. The centre
   card faces the reader, neighbours angle away in perspective. */
.page-audiences .aud.aud--carousel {
  display: block;
  /* Clip the angled neighbours at the screen edge, not the column edge,
     so they peek in without widening the page. */
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  overflow-x: clip;
}
.page-audiences .aud__stage {
  perspective: 1400px;
  display: grid; place-items: center;
  padding-block: 24px 40px;
  touch-action: pan-y;            /* vertical scroll stays native; sideways swipes turn */
  user-select: none; -webkit-user-select: none;
  border-radius: 14px;
}
.page-audiences .aud__stage:focus { outline: none; }
.page-audiences .aud__stage:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.page-audiences .aud__ring {
  position: relative; width: 320px; max-width: 72vw;
  transform-style: preserve-3d;
}
.page-audiences .aud--carousel .aud__item {
  position: absolute; top: 0; left: 0; width: 100%;
  cursor: pointer;
  transition: transform 0.9s cubic-bezier(.2,.8,.2,1), opacity 0.9s, filter 0.9s, box-shadow 0.6s, border-color 0.6s;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.85);
}
.page-audiences .aud--carousel .aud__item img { -webkit-user-drag: none; pointer-events: none; }
/* The centre card: a teal edge and a soft glow, the lab cards' finish. */
.page-audiences .aud--carousel .aud__item.is-active {
  cursor: default;
  border-color: rgba(95, 217, 199, 0.45);
  box-shadow: 0 0 0 1px rgba(95, 217, 199, 0.18), 0 36px 80px -36px rgba(22, 168, 151, 0.55), 0 30px 60px -30px rgba(0, 0, 0, 0.85);
}
.page-audiences .aud--carousel .aud__item::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(95, 217, 199, 0.10), transparent 45%);
  opacity: 0; transition: opacity 0.6s;
}
.page-audiences .aud--carousel .aud__item.is-active::before { opacity: 1; }
/* One card at a time: the two-line title room of the grid is not needed. */
.page-audiences .aud--carousel .aud h3, .page-audiences .aud--carousel .aud__item h3 { display: block; min-height: 0; }
.page-audiences .aud__controls {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.page-audiences .aud__controls .btn { font-size: 16px; padding: 10px 20px; }
@media (min-width: 1040px) { .page-audiences .aud__ring { width: 340px; } }
/* The three controls stay on one row down to 320px. */
@media (max-width: 380px) { .page-audiences .aud__controls { gap: 8px; } .page-audiences .aud__controls .btn { font-size: 15px; padding: 9px 12px !important; } }
@media (max-width: 620px) {
  .page-audiences .aud__ring { width: 260px; }
  .page-audiences .aud--carousel .aud__img { aspect-ratio: 4 / 3; }
  .page-audiences .aud__controls .btn { padding: 10px 16px; }
}

/* ---------- the buying window, on a raised dark card ---------- */
.page-audiences .window {
  margin-top: clamp(48px, 6vw, 72px);
  background: #121D30; border: 1px solid var(--sa-line); border-radius: 12px;
  padding: clamp(24px, 3vw, 32px);
}
/* The two spans stand on their own with a light tick at the boundary
   between them (where intent appears), instead of grey track showing
   through the gap. */
.page-audiences .window__track { height: 14px; border-radius: 7px; background: none; }
.page-audiences .window__early, .page-audiences .window__late { border-radius: 7px; }
.page-audiences .window__early { background: linear-gradient(90deg, #16A897, #1685C1); }
.page-audiences .window__late { background: var(--gold); }
.page-audiences .window__track::after {
  content: ""; position: absolute; left: 75%; top: -9px;
  width: 3px; height: 32px; margin-left: -1.5px; border-radius: 2px;
  background: var(--sa-ink);
}
.page-audiences .window__marks { margin-top: 32px; font-size: 17px; gap: 20px 32px; }
.page-audiences .window__marks b { font-size: 22px; line-height: 1.3; letter-spacing: -0.02em; color: var(--sa-ink); margin-bottom: 6px; }
.page-audiences .window__marks span { color: var(--sa-muted); }

/* ---------- the close: theme.css's .formcard; only the sent state here ---------- */
.page-audiences .formcard .form__done { margin: 0; border-radius: 10px; }
.page-audiences .formcard .form__done p { color: var(--sa-muted); }

@media print {
  .page-audiences .aud-stage { background: none; padding: 0; }
  .page-audiences .aud__item, .page-audiences .window { border: 1px solid #ccc; }
}