/* Focused audience and engagement comparison; loaded after homepage-refresh. */
#comparison .comparison-header-toggle th {cursor:pointer;}
#for-you.client-audience .section-intro,
#comparison.client-comparison .section-intro {
  align-items: start;
  gap: clamp(28px, 5vw, 70px);
  margin-bottom: 32px;
}
#for-you.client-audience .section-intro h2 { max-width: 510px; }
#for-you.client-audience .section-intro > p,
#comparison.client-comparison .section-intro > p {
  margin: 0;
  padding-top: 29px;
  font: 400 var(--type-body)/var(--line-body) var(--sans);
}

#for-you .audience-tabs {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--line);
}
#for-you .audience-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  margin: 0;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--body);
  font: 400 12px/1.4 var(--mono);
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
#for-you .audience-tabs button:hover {
  color: var(--ink);
  background: rgba(255,255,255,.45);
  border-color: rgb(var(--brand-burgundy-rgb) / .1);
}
#for-you .audience-tabs button[aria-selected="true"] {
  color: #fff;
  border-color: var(--brand-burgundy);
  background: var(--brand-burgundy);
}
#for-you .audience-tabs svg,
#comparison .comparison-feature svg,
#comparison .comparison-heading-label svg {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#for-you .audience-tabs button:focus-visible,
#comparison .comparison-scroll:focus-visible {
  outline: 2px solid var(--brand-burgundy);
  outline-offset: 4px;
}
#for-you .audience-panel[hidden] { display: none; }
#for-you .audience-panel table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
#for-you .audience-panel th,
#for-you .audience-panel td {
  padding: 22px 26px;
  border-bottom: 1px solid var(--line);
  font: 400 16px/1.55 var(--sans);
  text-align: left;
  vertical-align: top;
}
#for-you .audience-panel th:first-child { width: 43%; padding-left: 0; }
#for-you .audience-panel tbody th { color: var(--body); font-weight: 400; }
#for-you .audience-panel td { color:#32131c; background:#e8dedd; }
#for-you .audience-panel thead th {
  padding-block: 20px 16px;
  color: var(--muted);
  font: 400 12px/1.5 var(--mono);
  letter-spacing: .025em;
  text-transform: uppercase;
}
#for-you .audience-panel thead th:last-child { color:var(--brand-burgundy); background:#e8dedd; }
#for-you .audience-panel td strong { color:var(--brand-burgundy); }
#for-you .audience-panel strong { color: var(--ink); font-weight: 600; }
#for-you .audience-panel em { font-style: italic; }
#for-you .audience-context {
  display: block;
  max-width: 760px;
  margin: 18px 0 0;
  color: var(--muted);
  font: 400 13px/1.55 var(--sans);
}
#for-you .audience-context a { color: inherit; text-underline-offset: 3px; }
#for-you .audience-context a:hover { color: var(--brand-burgundy); }
#for-you .audience-takeaway {
  display: grid;
  grid-template-columns: 43% 57%;
  align-items: start;
  gap: 0;
  margin-top: 24px;
  font: 400 15px/1.55 var(--sans);
}
#for-you .audience-takeaway strong { padding-right: 26px; font-weight: 600; }
#for-you .audience-takeaway span { padding-inline: 26px; color: var(--body); }

#comparison .comparison-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 6px;
  background: rgba(255,255,255,.38);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  mask-image: none;
  -webkit-mask-image: none;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--brand-burgundy-rgb) / .25) transparent;
}
#comparison .approach-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font: 400 15px/1.5 var(--sans);
}
#comparison .comparison-feature-col { width: 23%; }
#comparison .comparison-represent-col { width: 29%; }
#comparison .comparison-alternative-col { width: 24%; }
#comparison .approach-table th,
#comparison .approach-table td {
  padding: 22px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--body);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}
#comparison .approach-table th:first-child { width: auto; padding-left: 20px; }
#comparison .approach-table thead th {
  padding-block: 19px;
  color: var(--muted);
  font: 400 12px/1.5 var(--mono);
  text-transform: uppercase;
}
#comparison .approach-table tbody th { color: var(--ink); font-weight: 500; }
#comparison .approach-table tbody tr:last-child th,
#comparison .approach-table tbody tr:last-child td { border-bottom: 0; }
#comparison .approach-table .represent-column {
  background: var(--accent);
  color: #fff;
  border-inline: 1px solid var(--accent);
  border-bottom-color:rgba(255,255,255,.24);
  font-weight: 400;
}
#comparison .approach-table .represent-column strong { font-weight: 600; }
body.home-refresh #comparison .approach-table .represent-column :is(strong,span) { color:#fff; }
#comparison .comparison-feature,
#comparison .comparison-heading-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
#comparison .comparison-feature svg { margin-top: 2px; color: #6f6766; }
#comparison .comparison-heading-label { align-items: center; gap: 8px; }
#comparison .comparison-heading-label svg {
  width: 20px;
  height: 20px;
  padding: 2px;
  border-radius: 50%;
  color: #fff;
  background: var(--brand-burgundy);
  stroke-width: 1.7;
}
#comparison .comparison-scroll-hint { display: none; }
#comparison .comparison-scope-note {
  margin: 14px 0 0;
  color: var(--muted);
  font: 400 13px/1.5 var(--sans);
}

@media (max-width: 800px) {
  #for-you.client-audience .section-intro,
  #comparison.client-comparison .section-intro { grid-template-columns: 1fr; gap: 16px; }
  #for-you.client-audience .section-intro > p,
  #comparison.client-comparison .section-intro > p { padding-top: 0; max-width: 620px; }
  #for-you .audience-panel th,
  #for-you .audience-panel td { padding-inline: 18px; font-size: 15px; }
  #for-you .audience-takeaway strong { padding-right: 18px; }
  #for-you .audience-takeaway span { padding-inline: 18px; }
  #comparison .approach-table th,
  #comparison .approach-table td { padding: 20px 16px; }
  #comparison .approach-table th:first-child { padding-left: 16px; }
}

@media (max-width: 640px) {
  #for-you.client-audience .section-intro,
  #comparison.client-comparison .section-intro { display: grid; margin-bottom: 26px; }
  #for-you.client-audience .section-intro h2,
  #comparison.client-comparison .section-intro h2 { font-size: var(--type-section); line-height: var(--line-section); }
  #for-you.client-audience .section-intro > p,
  #comparison.client-comparison .section-intro > p { margin: 0; font-size: var(--type-body); line-height: var(--line-body); }
  #for-you .audience-tabs { gap: 6px; overflow-x: auto; padding-bottom: 16px; }
  #for-you .audience-tabs button { flex: 1 0 110px; min-width: 0; gap: 5px; padding: 11px 6px; font-size: 12px; }
  #for-you .audience-tabs svg { width: 14px; height: 14px; }
  #for-you .audience-panel th,
  #for-you .audience-panel td { padding: 18px 12px; font-size: 14px; line-height: 1.5; }
  #for-you .audience-panel th:first-child { width: 42%; padding-left: 0; }
  #for-you .audience-panel td:last-child,
  #for-you .audience-panel thead th:last-child { padding-right: 12px; }
  #for-you .audience-panel thead th { padding-block: 18px 14px; font-size: 12px; }
  #for-you .audience-context { margin-top: 16px; font-size: 13px; }
  #for-you .audience-takeaway { display: block; margin-top: 20px; font-size: 14px; }
  #for-you .audience-takeaway strong,
  #for-you .audience-takeaway span { display: block; padding: 0; }
  #for-you .audience-takeaway span { margin-top: 5px; }
  #comparison .comparison-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--muted);
    font: 400 12px/1.5 var(--mono);
  }
  #comparison .comparison-scroll-hint span { color: var(--brand-burgundy); font-size: 18px; }
  /* The first two columns are exactly one viewport wide. Alternatives scroll. */
  #comparison .approach-table { width: 200%; min-width: 0; font-size: 14px; }
  #comparison .comparison-feature-col { width: 18%; }
  #comparison .comparison-represent-col { width: 32%; }
  #comparison .comparison-alternative-col { width: 25%; }
  #comparison .approach-table th,
  #comparison .approach-table td { padding: 19px 14px; line-height: 1.5; }
  #comparison .approach-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: auto;
    padding-left: 14px;
    background: var(--paper, #f5f3f0);
  }
  #comparison .approach-table thead th { font-size: 12px; padding-block: 17px; }
  #comparison .comparison-feature { display: block; }
  #comparison .comparison-feature svg { margin: 0 0 8px; width: 17px; height: 17px; }
  #comparison .comparison-heading-label { gap: 7px; }
  #comparison .comparison-scope-note { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  #for-you .audience-tabs button { transition: none; }
}
/* Keep keyboard focus visible inside the phone's scrollable tab row. */
#for-you.client-audience .audience-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}

/* Evidence belongs to the point it supports, with the source beneath the summary. */
#for-you .audience-panel .audience-context {max-width:none;margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;line-height:1.55;scroll-margin-top:120px;}
#for-you .audience-panel sup {margin-left:3px;font:500 10px/1 var(--sans);vertical-align:super;}
#for-you .audience-panel sup a {color:var(--accent);text-decoration:none;}
#for-you .audience-panel sup a:hover {text-decoration:underline;}

body.home-refresh #comparison-summary .represent-column>strong {font-weight:400;}