/* The /for/<audience> landing pages (page_layouts/audience.py). Every rule sits under body.t-audience. */
/* --- rows: a full-width article, one row per section (heading on the left, body on the right). The same block is in
   audience.css, about.css, method.css and tool.css, each under its own body class. --- */
body.t-audience .article .wrap { grid-template-columns: minmax(0, 1fr); }
body.t-audience .toc { display: none; }
body.t-audience .prose { --gap: clamp(24px, 4.4vw, 64px); --row: clamp(52px, 7vw, 96px); --frame: 0 0 0 5px var(--paper), 0 0 0 7px var(--ink);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap); row-gap: var(--row); }
body.t-audience .prose > * { grid-column: 1 / -1; margin-top: 0; min-width: 0; }
body.t-audience .au { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--row); }
body.t-audience .au > * { min-width: 0; }
body.t-audience .au-sec { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap); padding-top: 26px; border-top: var(--came) solid var(--ink); }
body.t-audience .au-sec::before { content: ""; position: absolute; left: 0; top: -2px; width: 44px; height: 8px; background: var(--accent); }
body.t-audience .au-sec h2 { margin: 0; padding: 0; border: 0; font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem); line-height: 1.06; overflow-wrap: break-word; }
body.t-audience .au-sec h2::before { content: none; }
body.t-audience .au-h, body.t-audience .au-b { min-width: 0; }
body.t-audience .au-b > * { margin: 0; }
body.t-audience .au-b > * + * { margin-top: 1.1em; }
body.t-audience .au-b > p, body.t-audience .au-b > ul:not([class]) > li, body.t-audience .au-b > ol:not([class]) > li { max-width: 64ch; }
body.t-audience .au-sec--wide { grid-template-columns: minmax(0, 1fr); }
body.t-audience .au-sec--wide > .au-h { margin-bottom: 24px; max-width: 26ch; }
@media (min-width: 901px) {
  body.t-audience .au-sec:not(.au-sec--wide) > .au-h > h2 { position: sticky; top: calc(var(--bar) + 44px); }
}
@media (max-width: 900px) {
  body.t-audience .prose, body.t-audience .au-sec { grid-template-columns: minmax(0, 1fr); }
  body.t-audience .au-sec > .au-h { margin-bottom: 18px; }
}
/* a stained glass window hung in the page */
body.t-audience .au-win { min-width: 0; margin: 7px; background: var(--night) center / cover no-repeat; background-image: var(--w-m); border: var(--came) solid var(--ink); box-shadow: var(--frame); }
@media (max-width: 600px) { body.t-audience .au-win { background-image: var(--w-s); } }
@media (min-width: 1700px) { body.t-audience .au-win { background-image: var(--w-l); } }
/* bold-led items as leaded cells, plain items as ruled rows */
body.t-audience ul.au-cells { list-style: none; margin-left: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--came); background: var(--ink); border: var(--came) solid var(--ink); }
body.t-audience ul.au-cells > li { margin: 0; max-width: none; padding: 18px 20px 20px; background: var(--tint); font-size: 1rem; line-height: 1.55; }
body.t-audience ul.au-cells > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
body.t-audience ul.au-cells > li > strong:first-child { font-size: 1.0625rem; }
body.t-audience ul.au-rows { list-style: none; padding: 0; border-top: var(--came) solid var(--ink); }
body.t-audience ul.au-rows > li { position: relative; margin: 0; max-width: none; padding: 14px 0 14px 32px; border-bottom: 1px solid var(--ink); }
body.t-audience ul.au-rows > li::before { content: ""; position: absolute; left: 4px; top: calc(14px + .5em); width: 10px; height: 10px; background: var(--accent); }
@media (max-width: 700px) { body.t-audience ul.au-cells { grid-template-columns: minmax(0, 1fr); } }
/* count tables: a bar per row */
body.t-audience .table-wrap { margin: 0; }
body.t-audience .au-bars table { min-width: 0; }
body.t-audience .au-bars .bar-cell { width: 44%; vertical-align: middle; }
body.t-audience .au-bars .bar-track { display: block; height: 16px; border: 1.5px solid var(--ink); background: var(--paper); }
body.t-audience .au-bars .bar-fill { display: block; height: 100%; background: var(--accent); }
body.t-audience .au-bars td .mark { margin-right: 9px; }
body.t-audience .au-bars td:not(:first-child):not(.bar-cell) { font-family: var(--f-mono); font-size: .9375rem; white-space: nowrap; }
body.t-audience .au-bars td:has(> .mark) { white-space: nowrap; }
@media (max-width: 600px) {
  body.t-audience .au-bars .bar-cell { width: 34%; }
  body.t-audience .au-bars th, body.t-audience .au-bars td { padding: 10px; }
  body.t-audience .au-bars table:has(tr > :nth-child(4)) .bar-cell { display: none; }
}
/* the questions and the sources, after the rows */
body.t-audience .prose > h2#faq { grid-column: 1; align-self: start; margin: 0 calc(-1 * var(--gap)) 0 0; padding: 26px var(--gap) 0 0; font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem); line-height: 1.06; }
body.t-audience .prose > .faq-list { grid-column: 2; margin: 0; }
body.t-audience .prose > .sources { margin: 0; }
@media (min-width: 901px) {
  body.t-audience .prose > .sources ol { columns: 2; column-gap: var(--gap); }
  body.t-audience .prose > .sources li { break-inside: avoid; }
}
@media (max-width: 900px) {
  body.t-audience .prose > h2#faq { grid-column: 1; margin: 0 0 calc(18px - var(--row)); padding-right: 0; }
  body.t-audience .prose > .faq-list { grid-column: 1; }
}

/* ---------- the title plate: the one action, and who gets asked ---------- */
body.t-audience .au-act { display: flex; flex-wrap: wrap; align-items: stretch; padding: 0; border-top: var(--came) solid var(--ink); }
body.t-audience .au-act .btn { flex: 0 0 auto; min-height: 60px; padding: 0 26px; gap: 18px; border: 0; }
body.t-audience .au-asks { flex: 1 1 260px; container-type: inline-size; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; list-style: none; margin: 0; padding: 0; border-left: var(--came) solid var(--ink); }
body.t-audience .au-asks li { min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border-right: 1px solid var(--ink); font: 700 .6875rem/1 var(--f-head); text-transform: uppercase; white-space: nowrap; }
body.t-audience .au-asks li:last-child { border-right: 0; }
body.t-audience .au-asks .mark { width: 16px; height: 16px; vertical-align: 0; }
@container (max-width: 610px) {
  body.t-audience .au-asks li span:not(.mark) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body.t-audience .au-asks .mark { width: 20px; height: 20px; }
}
body.t-audience .au-act { order: 1; }
body.t-audience .llm-row { order: 2; }
body.t-audience .page-head .lede { padding-bottom: 14px; }
body.t-audience .byline { padding-bottom: clamp(18px, 2.4vw, 26px); }

/* ---------- the opening: their problem, next to their window ---------- */
body.t-audience .au-open { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: stretch; }
body.t-audience .au-open-t { align-self: center; }
body.t-audience .au-open-t > p { margin: 0; max-width: 60ch; }
body.t-audience .au-open-t > p + p { margin-top: 1.05em; }
body.t-audience .au-open-t > .au-say { max-width: 26em; font: 500 clamp(1.3125rem, 1.05rem + 1.25vw, 1.9375rem)/1.24 var(--f-body); letter-spacing: -.015em; text-wrap: balance; }
body.t-audience .au-open-t > .au-say + p { margin-top: 1.3em; }
body.t-audience .au-win { min-height: clamp(260px, 30vw, 420px); }

/* ---------- inside a row ---------- */
body.t-audience .au-b .stat { margin: 1.6em 0 0; }
body.t-audience ol.au-prompts { list-style: none; counter-reset: q; padding: 0; display: grid; gap: 10px; }
body.t-audience ol.au-prompts > li { counter-increment: q; position: relative; margin: 0; max-width: none; min-height: 56px; padding: 14px 62px 14px 54px; background: var(--tint); border: var(--came) solid var(--ink); font-size: 1.0625rem; line-height: 1.45; }
body.t-audience ol.au-prompts > li::before { content: counter(q); position: absolute; left: 0; top: 0; width: 40px; height: 100%; display: grid; place-items: center; border-right: 1px solid var(--ink); font: 500 .8125rem/1 var(--f-mono); color: var(--sub); }
body.t-audience ol.au-prompts > li::after { content: ""; position: absolute; right: 12px; top: 50%; width: 30px; height: 30px; margin-top: -15px; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='M12 19V6M6.5 11.5L12 6l5.5 5.5'/%3E%3C/svg%3E") center / 18px no-repeat; }
body.t-audience .au-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--came); background: var(--ink); border: var(--came) solid var(--ink); }
body.t-audience .au-points > p { margin: 0; max-width: none; padding: 18px 20px 20px; background: var(--tint); font-size: 1rem; line-height: 1.55; }
body.t-audience .au-points > p:last-child:nth-child(odd) { grid-column: 1 / -1; }
body.t-audience .au-points > p > strong:first-child { display: block; margin-bottom: 6px; font-size: 1.0625rem; line-height: 1.3; }

/* ---------- the price table as tiles ---------- */
body.t-audience .au-plans { overflow: visible; margin: 0 7px; border: 0; background: none; }
body.t-audience .au-plans table { display: block; min-width: 0; font-size: 1rem; }
body.t-audience .au-plans thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.t-audience .au-plans tbody { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--came); background: var(--ink); border: var(--came) solid var(--ink); box-shadow: var(--frame); }
body.t-audience .au-plans--3 tbody { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.t-audience .au-plans tr { display: flex; flex-direction: column; background: var(--paper); }
body.t-audience .au-plans td { display: block; border: 0; padding: 0 18px; }
body.t-audience .au-plans td:first-child { order: 0; padding: 12px 18px; background: var(--ink); color: var(--paper); font: 700 .9375rem/1.2 var(--f-head); text-transform: uppercase; letter-spacing: -.01em; }
body.t-audience .au-plans tr:first-child td:first-child { background: var(--accent); color: var(--on-accent); }
body.t-audience .au-plans td:last-child { order: 1; padding-top: 20px; font-size: .9375rem; line-height: 1.4; font-weight: 500; color: var(--sub); }
body.t-audience .au-plans .au-amt { display: block; margin-bottom: 8px; font: 900 clamp(2.25rem, 1.5rem + 2.2vw, 3.5rem)/.95 var(--f-head); letter-spacing: -.04em; color: var(--accent); }
body.t-audience .au-plans td:nth-child(2):not(:last-child) { order: 2; flex: 1; padding-top: 14px; padding-bottom: 22px; font-size: .9375rem; line-height: 1.55; }
body.t-audience .au-sec--wide .au-b > p { max-width: 72ch; }
body.t-audience .au-fine { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 var(--gap); margin-top: 34px; }
body.t-audience .au-fine > p { margin: 0; max-width: 46ch; padding-top: 14px; border-top: 1px solid var(--ink); font-size: 1rem; line-height: 1.55; }
body.t-audience .au-fine > p:first-child { font-weight: 600; }
@media (max-width: 600px) { body.t-audience .au-fine > p + p { margin-top: 16px; } }

/* ---------- the call that closes the rows ---------- */
body.t-audience .au-call { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; margin: 0 7px; background: var(--ink); color: var(--paper); border: var(--came) solid var(--ink); box-shadow: var(--frame); }
body.t-audience .au-call > p { margin: 0; max-width: none; }
body.t-audience .au-call > p:first-child:not(:last-child) { align-self: center; padding: clamp(20px, 3vw, 34px); font: 700 clamp(1.0625rem, .9rem + .9vw, 1.625rem)/1.16 var(--f-head); text-transform: uppercase; letter-spacing: -.02em; text-wrap: balance; }
body.t-audience .au-call > p:last-child { display: flex; }
body.t-audience .au-call .btn { flex: 1; height: 100%; min-height: 68px; padding: 0 30px; border: 0; }
body.t-audience .au-call :focus-visible { outline-color: var(--paper); }
body.t-audience .au-call ::selection { background: var(--paper); color: var(--ink); }

@media (max-width: 1000px) {
  body.t-audience .au-plans tbody, body.t-audience .au-plans--3 tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  body.t-audience .au-open { grid-template-columns: minmax(0, 1fr); }
  body.t-audience .au-win { min-height: 0; height: clamp(190px, 54vw, 420px); }
  body.t-audience .au-call { grid-template-columns: minmax(0, 1fr); }
  body.t-audience .au-call .btn { white-space: normal; text-align: left; justify-content: space-between; }
}
@media (max-width: 700px) {
  body.t-audience .au-points { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  body.t-audience .au-act .btn { flex: 1 1 100%; justify-content: space-between; white-space: normal; text-align: left; }
  body.t-audience .au-asks { border-left: 0; border-top: var(--came) solid var(--ink); }
  body.t-audience .au-asks { flex-basis: 100%; }
  body.t-audience .au-asks li { padding: 12px 6px; }
  body.t-audience .au-plans tbody, body.t-audience .au-plans--3 tbody { grid-template-columns: minmax(0, 1fr); }
  body.t-audience ol.au-prompts > li { padding-right: 54px; font-size: 1rem; }
}