/* ============================================================
   AB MEDIA KIT — design system
   Restyled 2026-08-11 as a sibling of aqua-media-kit / wfb-media-kit.

   Family model (verified against both sibling repos): one STRUCTURAL
   system — neutral ramp, 1180px content width, 64px sticky nav,
   80–96px section rhythm, source-line treatment, mobile burger nav —
   with a per-publication brand layer: brand hues, --ink, and the
   display face. AB's layer: AB Red, near-black ink, Proxima Nova
   (uppercase headlines; Zilla Slab retired Sept 2026). SUPERSESSION 2026-08-17 (family parity ordered by
   Jared): the 2026-08-11 hard-edge ruling is retired — the family
   radii (--radius cards, 100px pills), hover-lifts, cream beds and
   display-numeral scale are adopted site-wide.

   Token naming diverges from the siblings ON PURPOSE: they put brand
   color in a variable named --blue (WFB's --blue is green). Here it
   is --brand/--brand-dark/--brand-light to avoid --blue:#C8102E.
   Mapping for family-wide recipes: --brand ≙ sibling --blue,
   --brand-dark ≙ --blue-dark, --brand-light ≙ --blue-light.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  /* brand layer (AB) */
  --brand:#C42428;   /* official AB red — Cordell Walker, Sept 29 2026 (was #C8102E) */
  --brand-dark:#8C191C;
  --brand-light:#FBEDEF;
  --ink:#23252B;   /* softened Sept 30 2026 (Jared: black felt harsh) — was #23252B */
  --ink-soft:#2A2D34;
  /* family neutral ramp — byte-identical in both sibling repos */
  --text:#111827;
  --muted:#6b7280;
  --subtle:#9ca3af;
  --light:#f9fafb;
  --light-2:#f3f4f6;
  --border:#e5e7eb;
  --border-strong:#D1D3D4;   /* official AB gray — Cordell Walker */
  --white:#ffffff;
  --green:#16a34a;
  /* type — 2027 revisions (Sept 2026): Proxima Nova, AB's official brand font (per Cordell
     Walker, AB Art Director), replaces Zilla Slab + the mono labels site-wide. Factoria (AB's
     stencil face) is NOT used anywhere. Proxima Nova is licensed and will load from an Adobe
     Fonts kit — see TODO font_kit in assets/ab-data.js. Until then Montserrat (Google Fonts)
     stands in. When the kit lands: add its <link> to every page and drop the Montserrat link;
     this stack already lists "proxima-nova" first, so no CSS edit is needed. */
  --font-sans:"proxima-nova", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --display:var(--font-sans);
  --body:var(--font-sans);
  --label:var(--font-sans); /* small-caps eyebrow/label slot (formerly monospace) */
  --max:1180px;
  --cream:#faf7f5;
  --radius:14px;
}
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 84px; } /* sticky nav is 64px — keep anchored headings visible (family rule) */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body { font-family: var(--body); background: var(--white); color: var(--text); overflow-x: hidden; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--brand); }
button, input, select, textarea { font-family: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ---------- type ---------- */
h1,h2,h3 { font-family: var(--display); line-height: 1.08; letter-spacing: -.005em; }
h1 { font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 800; text-transform: uppercase; text-wrap: balance; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 700; text-transform: uppercase; text-wrap: balance; }
h3 { font-size: 1.15rem; font-weight: 700; }
/* mono eyebrow — family section-label language (AQUA/WFB .ahero-eyebrow / .section-num) */
.eyebrow { font-family: var(--label); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
.lede { font-size: 1.1rem; color: var(--muted); max-width: 62ch; line-height: 1.6; }
.lede strong { color: var(--text); font-weight: 600; }
.smallnote { font-size: .8rem; color: var(--muted); }
/* source lines — family treatment: italic, subtle, inline with the number they support */
.src { font-size: .72rem; color: var(--subtle); line-height: 1.45; margin-top: 6px; font-style: italic; }

/* ---------- nav (family pattern: 64px sticky, logo left, links center, action right, burger <900px) ---------- */
nav.site-nav { position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid var(--border); height: 64px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 0 40px; column-gap: 24px; }
.nav-logo { display: flex; align-items: baseline; gap: .55rem; text-decoration: none; }
.nav-logo { align-items: center; }
/* header logo slot — AB logo SVG pending (TODO logoSvg in assets/ab-data.js); until then a clearly marked placeholder */
.logo-slot { display: inline-flex; align-items: center; height: 40px; }
/* official AB logo SVG (Cordell Walker, Sept 30 2026) — vector, so any height is sharp */
.logo-img { height: 30px; width: auto; display: block; }
@media (max-width: 640px) { .logo-img { height: 25px; } }
.logo-ph { display: inline-flex; align-items: center; gap: .45em; height: 36px; padding: 0 12px; border: 2px dashed var(--brand); border-radius: 6px; font-family: var(--display); font-weight: 800; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); white-space: nowrap; cursor: help; }
.logo-ph small { font-family: var(--label); font-size: .56rem; font-weight: 700; letter-spacing: .1em; color: #5c4400; background: #fff3bf; border-radius: 3px; padding: 2px 5px; }
.nav-logo .sub { font-size: .66rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.nav-links { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; justify-self: end; } /* 2027: right-aligned next to Contact */
.nav-links a { font-size: .875rem; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .15s; }
.nav-links a:hover { color: var(--text); }
.nav-links a.is-active { color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand); padding-bottom: 2px; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-btn { white-space: nowrap; font-size: .82rem; font-weight: 700; color: var(--white); background: var(--brand); text-decoration: none; padding: 8px 18px; border-radius: 100px; text-transform: uppercase; letter-spacing: .06em; transition: background .15s; }
.nav-btn:hover { background: var(--brand-dark); }
.nav-burger { display: none; appearance: none; background: none; border: 0; width: 36px; height: 36px; position: relative; cursor: pointer; z-index: 102; }
.nav-burger span { display: block; width: 18px; height: 2px; background: var(--text); position: absolute; left: 9px; transition: transform .2s, opacity .2s, top .2s; }
.nav-burger span:nth-child(1) { top: 14px; }
.nav-burger span:nth-child(2) { top: 19px; }
.nav-burger span:nth-child(3) { top: 24px; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }
@media (max-width: 900px) {
  .nav-burger { display: inline-flex; }
  .nav-links { display: flex !important; flex-direction: column; align-items: stretch; justify-self: auto; width: 100%; gap: 0; position: fixed; top: 64px; left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--border); padding: 8px 0 16px; box-shadow: 0 12px 32px rgba(0,0,0,.08); transform: translateY(calc(-100% - 120px)); transition: transform .25s cubic-bezier(.22,1,.36,1); z-index: 99; margin: 0; }
  .nav-links[data-open="true"] { transform: translateY(0); }
  .nav-links li { border-top: 1px solid var(--border); }
  .nav-links li:first-child { border-top: 0; }
  .nav-links a { display: block; padding: 16px 24px; font-size: 1rem; color: var(--text); font-weight: 500; }
  .nav-links a.is-active { box-shadow: inset 3px 0 0 var(--brand); }
}
@media (max-width: 640px) {
  nav.site-nav { padding: 0 20px; column-gap: 12px; }
  .logo-ph { font-size: .8rem; padding: 0 8px; }
  .logo-img { height: 24px; }
  .nav-logo .sub { display: none; }
  .nav-btn { padding: 8px 12px; font-size: .76rem; }
}

/* ---------- layout (family rhythm: 1180px, 40px/20px gutters, 80–96px bands) ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 40px; }
section.band { padding: 96px 0; }
section.band.tight { padding: 64px 0; }
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  section.band { padding: 64px 0; }
  section.band.tight { padding: 48px 0; }
}
.band.stone { background: var(--cream); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.band.ink { background: var(--ink); color: rgba(255,255,255,.82); }
.band.ink .eyebrow { color: rgba(255,255,255,.5); }
.band.ink h2 { color: var(--white); }
.band.ink .lede, .band.ink p { color: rgba(255,255,255,.72); }
.band.red { background: var(--brand); color: var(--white); }
.band.red .eyebrow { color: rgba(255,255,255,.65); }
.band.red p { color: rgba(255,255,255,.85); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.grid2 > *, .grid3 > *, .grid4 > * { min-width: 0; } /* let .tbl-scroll actually scroll instead of blowing out the grid */
@media (max-width: 1024px) { .grid4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .grid2, .grid3, .grid4 { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- components ---------- */
/* stat block — family numeral treatment (display face, tabular-nums) on AB's red top rule */
.stat { border-top: 4px solid var(--brand); padding-top: 16px; }
.stat .n { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.band.ink .stat .n, .band.red .stat .n { color: var(--white); }
.stat .l { font-size: .85rem; font-weight: 600; margin-top: 8px; line-height: 1.45; }
.band.ink .stat .l { color: rgba(255,255,255,.85); }
.stat .d { font-size: .76rem; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.band.ink .stat .d { color: rgba(255,255,255,.5); }
.band.red .stat .d { color: rgba(255,255,255,.7); }

.btn { display: inline-block; background: var(--brand); color: var(--white); font-weight: 700; font-size: .92rem; padding: 14px 28px; border: none; border-radius: 100px; cursor: pointer; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; transition: background .15s, transform .15s, box-shadow .15s; }
.btn:hover { background: var(--brand-dark); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--brand); border: 2px solid var(--brand); padding: 12px 24px; }
.btn.ghost:hover { background: var(--brand); color: var(--white); transform: translateY(-1px); }
.band.ink .btn.ghost, .band.red .btn.ghost { color: var(--white); border-color: rgba(255,255,255,.45); }
.band.ink .btn.ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.band.red .btn.ghost:hover { background: var(--white); color: var(--brand); border-color: var(--white); }
.band.red .btn:not(.ghost) { background: var(--ink); }
.band.red .btn:not(.ghost):hover { background: #000; }

.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.data th { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; text-align: left; color: var(--muted); border-bottom: 2px solid var(--text); padding: 10px 12px; font-weight: 600; }
table.data td { padding: 11px 12px; border-bottom: 1px solid var(--border); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tr.total td { font-weight: 700; border-top: 2px solid var(--text); }
/* dark-band tables — replaces the inline color overrides audience.html used to carry */
.band.ink table.data th { color: rgba(255,255,255,.55); border-bottom-color: rgba(255,255,255,.4); }
.band.ink table.data td { color: rgba(255,255,255,.78); border-bottom-color: rgba(255,255,255,.14); }

.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.band.stone .card { border-color: var(--border-strong); }
.card h3 { margin-bottom: 10px; }
.card ul { padding-left: 1.1rem; font-size: .92rem; }
.card li { margin: .3rem 0; }
.pricecard { background: var(--white); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; }
.pricecard.hot { border: 2px solid var(--brand); box-shadow: 6px 6px 0 var(--brand); }
.pricecard .tier { font-family: var(--display); font-weight: 700; font-size: 1.4rem; text-transform: uppercase; }
.pricecard .price { font-family: var(--display); font-weight: 700; font-size: 1.9rem; color: var(--brand); margin: 6px 0 3px; font-variant-numeric: tabular-nums; }
.pricecard ul { list-style: none; padding: 0; margin-top: 14px; font-size: .88rem; }
.pricecard li { padding: 4px 0 4px 1.4rem; position: relative; }
.pricecard li::before { content: "✓"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }

.quote { border-left: 4px solid var(--brand); padding: 6px 0 6px 22px; font-size: 1.02rem; color: var(--ink-soft); }
.quote .who { display: block; margin-top: 12px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text); }
.band.ink .quote { color: rgba(255,255,255,.78); }
.band.ink .quote .who { color: var(--white); }

/* signature: market spread bar (interactive — hover/tap/focus behaviour must survive) */
.spread { margin-top: 40px; }
.spreadbar { display: flex; width: 100%; height: 72px; border: 1px solid var(--border-strong); }
.spreadbar .seg { position: relative; height: 100%; cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.spreadbar .seg:hover, .spreadbar .seg:focus-visible { filter: brightness(1.18); transform: translateY(-4px); }
.spread-legend { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px 28px; margin-top: 20px; font-size: .85rem; }
@media (max-width: 860px) { .spread-legend { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .spread-legend { grid-template-columns: 1fr; } }
.spread-legend .item { display: flex; align-items: center; gap: 10px; padding: 3px 6px; cursor: default; }
.spread-legend .sw { width: 14px; height: 14px; flex: none; border: 1px solid rgba(0,0,0,.25); }
.spread-legend .item b { font-variant-numeric: tabular-nums; margin-left: auto; }
.spread-legend .item.hi { background: var(--brand-light); }
.spreadtip { margin-top: 16px; min-height: 2.4rem; font-size: .95rem; font-weight: 600; }
.spreadtip span { color: var(--muted); font-weight: 400; }

/* crossover diagram */
.venn { display: flex; align-items: center; gap: 0; justify-content: center; margin: 32px 0 16px; }
.venn .c { width: 220px; height: 220px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; font-size: .82rem; font-weight: 600; }
.venn .c .n { font-family: var(--display); font-weight: 700; font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.venn .c.print { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); color: var(--white); margin-right: -46px; z-index: 1; }
.venn .c.show { background: var(--brand); color: var(--white); }
/* .venn.nested — overlap version (Sept 28 2026): the show circle sits ~inside the print circle, because
   92% of AB Show 2025 attendees are print subscribers. Decorative only (aria-hidden); not drawn to scale. */
.venn.nested .c.print { width: 280px; height: 280px; margin-right: -120px; padding: 24px 150px 24px 26px; }
.venn.nested .c.show { width: 130px; height: 130px; padding: 12px; position: relative; z-index: 2; font-size: .7rem; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.venn.nested .c.show .n { font-size: 1.4rem; }
@media (max-width: 560px) { .venn.nested { transform: scale(.8); margin: 8px 0 0; } .venn.nested .c.print { width: 280px; height: 280px; margin-right: -120px; } .venn.nested .c.show { width: 130px; height: 130px; font-size: .7rem; } .venn.nested .c .n { font-size: 1.4rem; } }
@media (max-width: 560px) { .venn .c { width: 160px; height: 160px; font-size: .72rem; } .venn .c .n { font-size: 1.25rem; } .venn .c.print { margin-right: -34px; } }

/* editorial calendar */
.cal { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 1000px) { .cal { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cal { grid-template-columns: 1fr; } }
.issue { background: var(--white); border: 1px solid var(--border); border-top: 4px solid var(--brand); border-radius: var(--radius); padding: 22px; }
.issue .mo { font-family: var(--display); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; }
.issue .close { font-family: var(--label); font-weight: 600; font-size: .68rem; color: var(--muted); margin: 4px 0 12px; letter-spacing: .02em; }
.issue .theme { font-weight: 700; font-size: .95rem; }
.issue ul { padding-left: 1.05rem; font-size: .85rem; margin-top: 8px; color: var(--muted); }
.issue .bonus { margin-top: 12px; font-size: .72rem; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .06em; }

/* contact */
.person { background: var(--white); border: 1px solid var(--border); padding: 28px; text-align: left; }
.person .role { font-family: var(--label); font-weight: 600; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }
.person h3 { font-size: 1.3rem; margin: 8px 0 2px; }
.person .title { font-size: .9rem; color: var(--muted); margin-bottom: 14px; }
.person a { display: block; font-size: .92rem; margin: 3px 0; text-decoration: none; }
.person a:hover { text-decoration: underline; }

/* ---------- footer (family pattern: dark, centered, logo/meta/links + AB's disclaimer line) ---------- */
footer.site { background: var(--ink); color: rgba(255,255,255,.55); padding: 56px 40px 44px; text-align: center; font-size: .82rem; }
.footer-logo { font-family: var(--display); font-size: 1.35rem; font-weight: 700; color: var(--white); text-transform: uppercase; margin-bottom: 10px; }
.footer-logo span { color: var(--brand); }
.footer-meta { color: rgba(255,255,255,.55); margin-bottom: 20px; }
.footer-links { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.footer-links a { color: rgba(255,255,255,.75); text-decoration: none; }
.footer-links a:hover { color: var(--white); }
.footer-disclaimer { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.45); font-size: .76rem; }
@media (max-width: 640px) { footer.site { padding: 44px 20px 36px; } }

/* ---------- hero (family dark hero: radial brand glow; 2027: grid overlay + 50 watermark removed) ---------- */
.hero { background: var(--ink); color: rgba(255,255,255,.82); position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 82% 12%, rgba(196,36,40,.28), transparent 50%), radial-gradient(circle at 8% 92%, rgba(196,36,40,.12), transparent 55%); pointer-events: none; }
.hero .wrap { padding-top: 96px; padding-bottom: 96px; position: relative; z-index: 1; }
.hero h1 { color: var(--white); }
.hero h1 .accent { color: var(--brand); display: block; }
.hero .eyebrow { color: rgba(255,255,255,.5); }
.hero .lede { color: rgba(255,255,255,.72); margin-top: 20px; }
.hero .cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .hero .wrap { padding-top: 64px; padding-bottom: 64px; } .hero .cta .btn { flex: 1; text-align: center; } }

/* page-title bands (interior pages) */
.band.tight h1 { color: var(--text); }
.band.ink a:not(.btn) { color: rgba(255,255,255,.85); }

/* ============================================================
   AUDIENCE PAGE COMPONENTS — ported from wfb-media-kit audience
   patterns 2026-08-11, adapted to AB's brand layer (square
   corners, brand-sans numerals, ink→red data ramp).
   ============================================================ */
/* hero KPI strip (family .ahero-kpis pattern) */
.hero-kpis { margin-top: 48px; display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.hero-kpi { padding: 28px 26px; border-right: 1px solid rgba(255,255,255,.08); }
.hero-kpi:last-child { border-right: 0; }
.hero-kpi:first-child { padding-left: 0; }
.hero-kpi-num { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 3.4vw, 3rem); line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.hero-kpi-lbl { font-size: .8rem; color: rgba(255,255,255,.55); line-height: 1.45; }
.hero-kpis.five { grid-template-columns: repeat(5,1fr); }
.hero-kpis.five .hero-kpi { padding: 28px 20px; }
.hero-kpis.five .hero-kpi:first-child { padding-left: 0; }
.hero-kpis.five .hero-kpi-num { font-size: clamp(2rem, 2.9vw, 2.6rem); }
@media (max-width: 900px) { .hero-kpis, .hero-kpis.five { grid-template-columns: 1fr 1fr; } .hero-kpis.five .hero-kpi:last-child { grid-column: 1 / -1; } .hero-kpi:nth-child(2) { border-right: 0; } .hero-kpi { border-bottom: 1px solid rgba(255,255,255,.08); padding: 20px 18px; } .hero-kpi:first-child { padding-left: 18px; } }

/* market distribution bars (WFB geo-state pattern) */
.mbars { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
.mbar { display: grid; grid-template-columns: 230px 1fr 130px; gap: 16px; align-items: center; }
.mbar-name { font-size: .88rem; font-weight: 600; color: var(--text); }
.mbar-track { display: block; height: 12px; background: var(--light-2); overflow: hidden; }
.mbar-fill { display: block; height: 100%; transform-origin: left; animation: grow 1.1s cubic-bezier(.22,1,.36,1); }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mbar-val { font-size: .86rem; font-weight: 600; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mbar-val b { color: var(--text); }
@media (max-width: 700px) { .mbar { grid-template-columns: 1fr auto; grid-template-areas: "name val" "track track"; row-gap: 6px; } .mbar-name { grid-area: name; } .mbar-val { grid-area: val; } .mbar-track { grid-area: track; } }

/* decision-maker donut (WFB dm pattern) */
.dm-grid { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: center; margin-top: 40px; }
.donut-wrap { display: flex; flex-direction: column; align-items: center; }
.donut { width: 300px; height: 300px; border-radius: 50%; position: relative; box-shadow: 0 16px 40px rgba(35,37,43,.14); }
.donut::after { content: ''; position: absolute; inset: 64px; border-radius: 50%; background: var(--white); }
.band.stone .donut::after { background: var(--light); }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; text-align: center; }
.donut-center .big { font-family: var(--display); font-size: 3.4rem; font-weight: 700; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.donut-center .sub { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 6px; max-width: 14ch; }
.dm-legend { display: flex; flex-direction: column; }
.dm-leg-row { display: grid; grid-template-columns: 16px 1fr auto auto; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--border); }
.dm-leg-row:last-child { border-bottom: 0; }
.dm-dot { width: 14px; height: 14px; align-self: center; }
.dm-leg-name { font-size: .92rem; font-weight: 600; color: var(--text); }
.dm-leg-n { font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.dm-leg-pct { font-family: var(--display); font-size: 1.25rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }
@media (max-width: 1000px) { .dm-grid { grid-template-columns: 1fr; gap: 40px; justify-items: center; } .dm-legend { width: 100%; max-width: 560px; } }
@media (max-width: 480px) { .donut { width: 240px; height: 240px; } .donut::after { inset: 52px; } .donut-center .big { font-size: 2.7rem; } .dm-leg-row { grid-template-columns: 14px 1fr auto; } .dm-leg-n { display: none; } }

/* cross-channel venn (WFB venn pattern) */
.venn2-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; margin-top: 40px; }
.venn-svg { width: 100%; height: auto; display: block; }
.venn-svg .vc { stroke: rgba(35,37,43,.35); stroke-width: 2; cursor: pointer; transition: opacity .15s, stroke .15s; }
.venn-svg #vc-print { fill: rgba(35,37,43,.78); }
.venn-svg #vc-email { fill: rgba(196,36,40,.62); }
.venn-svg .vlens { fill: rgba(94,22,37,.85); stroke: rgba(35,37,43,.5); stroke-width: 1.5; cursor: pointer; transition: fill .15s; }
.venn-svg.sel-print #vc-print { stroke: var(--ink); stroke-width: 4; }
.venn-svg.sel-email #vc-email { stroke: var(--ink); stroke-width: 4; }
.venn-svg.sel-both .vlens { stroke: var(--ink); stroke-width: 3; }
.venn-svg .vn { font-family: var(--display); font-size: 26px; font-weight: 700; fill: #fff; text-anchor: middle; pointer-events: none; }
.venn-svg .vl { font-family: var(--body); font-size: 11px; font-weight: 600; fill: rgba(255,255,255,.85); text-anchor: middle; pointer-events: none; text-transform: uppercase; letter-spacing: .08em; }
.venn-svg .vtag { font-family: var(--label); font-size: 10px; font-weight: 700; fill: var(--muted); text-anchor: middle; pointer-events: none; letter-spacing: .14em; }
.venn-panel-zone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--label); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.venn-dot { width: 12px; height: 12px; }
.venn-panel-num { font-family: var(--display); font-size: clamp(2.8rem, 5.5vw, 4rem); font-weight: 700; line-height: 1; color: var(--text); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.venn-panel-sub { font-size: .82rem; color: var(--muted); margin-bottom: 18px; }
.venn-panel-msg { font-size: 1.02rem; line-height: 1.55; color: var(--text); }
.venn-panel-msg strong { font-weight: 700; }
.venn-controls { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.venn-btn { appearance: none; border: 1px solid var(--border-strong); background: var(--white); color: var(--text); font-family: inherit; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 9px 14px; cursor: pointer; transition: all .15s; }
.venn-btn:hover { border-color: var(--text); }
.venn-btn[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
@media (max-width: 900px) { .venn2-grid { grid-template-columns: 1fr; gap: 32px; } }

/* engagement meter cards (WFB eng pattern) */
.eng-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 40px; }
.eng-card { background: var(--white); border: 1px solid var(--border); padding: 30px; }
.eng-num { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 4.5vw, 3.4rem); line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums; }
.eng-lbl { font-size: .95rem; font-weight: 700; margin-top: 14px; color: var(--text); line-height: 1.4; }
.eng-desc { font-size: .82rem; color: var(--muted); line-height: 1.55; margin-top: 6px; }
.eng-track { height: 10px; background: var(--light-2); overflow: hidden; margin-top: 20px; }
.eng-fill { height: 100%; background: linear-gradient(90deg, var(--ink), var(--brand)); transform-origin: left; animation: grow 1.3s cubic-bezier(.22,1,.36,1); }
@media (max-width: 900px) { .eng-grid { grid-template-columns: 1fr; } }

/* foundation cards (WFB trust pattern) */
.trust-num { font-family: var(--display); font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--brand); margin-bottom: 12px; font-variant-numeric: tabular-nums; }

/* state grid map (WFB usmap pattern, AB layer: square cells, red heat ramp) */
.usmap-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 48px; align-items: center; margin-top: 40px; }
.usmap-svg { width: 100%; height: auto; display: block; }
.usmap-svg .st rect { transition: fill .15s, stroke .15s; stroke: transparent; stroke-width: 2; cursor: pointer; }
.usmap-svg .st:hover rect, .usmap-svg .st.active rect { stroke: var(--ink); }
.usmap-svg .st:focus { outline: none; }
.usmap-svg .st:focus rect { stroke: var(--ink); }
.usmap-legend { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: .72rem; color: var(--muted); }
.usmap-legend .lg-bar { flex: 1; height: 8px; background: linear-gradient(90deg, #FBEDEF, #8C191C); max-width: 220px; }
.usmap-panel { background: var(--white); border: 1px solid var(--border-strong); padding: 28px; }
.usmap-panel-st { font-family: var(--display); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; color: var(--text); margin-bottom: 2px; }
.usmap-panel-hint { font-size: .74rem; color: var(--subtle); margin-bottom: 22px; }
.usmap-rows { display: flex; flex-direction: column; }
.usmap-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.usmap-row:last-child { border-bottom: 0; }
.usmap-row .k { font-size: .88rem; color: var(--text); font-weight: 500; }
.usmap-row .k small { display: block; color: var(--muted); font-weight: 400; font-size: .72rem; margin-top: 1px; }
.usmap-row .v { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.usmap-row.lead .v { color: var(--brand); }
.usmap-row .v.txt { font-size: 1rem; font-family: var(--body); font-weight: 600; text-align: right; }
@media (max-width: 900px) { .usmap-grid { grid-template-columns: 1fr; gap: 28px; } .usmap-panel { order: -1; } }

/* audience explorer (WFB xp pattern, AB layer: square chips, ink result panel) */
.xp-questions { display: flex; gap: 8px; flex-wrap: wrap; margin: 32px 0 24px; }
.xp-q { appearance: none; border: 1px solid var(--border-strong); background: var(--white); color: var(--text); font-family: var(--display); font-size: .92rem; font-weight: 600; padding: 10px 18px; cursor: pointer; transition: all .15s; }
.xp-q:hover { border-color: var(--brand); background: var(--brand-light); }
.xp-q.reset { font-family: var(--body); font-size: .8rem; font-weight: 600; color: var(--muted); }
.xp-grid { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }
.xp-panel { background: var(--white); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 28px; }
.xp-lbl { font-family: var(--label); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.xp-row { margin-bottom: 24px; }
.xp-row:last-child { margin-bottom: 0; }
.xp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { appearance: none; border: 1px solid var(--border-strong); background: var(--white); color: var(--text); font-family: inherit; font-size: .84rem; font-weight: 600; padding: 8px 16px; border-radius: 100px; cursor: pointer; transition: all .13s; display: inline-flex; align-items: center; gap: 7px; }
.chip:hover { border-color: var(--text); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.chip[aria-pressed="true"] .chip-n { color: #f4a9b5; }
.chip-n { font-size: .72rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.xp-result { background: var(--ink); color: var(--white); padding: 30px 28px; position: sticky; top: 88px; overflow: hidden; }
.xp-result::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 8%, rgba(196,36,40,.35), transparent 55%); pointer-events: none; }
.xp-result > * { position: relative; z-index: 1; }
.xr-k { font-family: var(--label); font-weight: 600; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 12px; }
.xr-num { font-family: var(--display); font-size: clamp(2.8rem, 5vw, 4.2rem); font-weight: 700; line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; }
.xr-sub { font-size: .9rem; color: rgba(255,255,255,.75); line-height: 1.5; margin-top: 10px; }
.xr-sub b { color: var(--white); }
.xr-rows { margin-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.xr-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.xr-row .k { font-size: .82rem; color: rgba(255,255,255,.65); }
.xr-row .v { font-family: var(--display); font-size: 1.15rem; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; white-space: nowrap; }
.xr-desc { font-size: .8rem; color: rgba(255,255,255,.55); line-height: 1.55; margin-top: 16px; min-height: 3.4em; }
.xr-cta { margin-top: 18px; }
.xr-cta .btn { width: 100%; text-align: center; }
.xp-map-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.xp-map-clear { appearance: none; border: 0; background: transparent; color: var(--brand); font-family: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 980px) { .xp-grid { grid-template-columns: 1fr; } .xp-result { position: static; order: -1; } }
@media (max-width: 640px) { .xp-panel { padding: 18px; } }

/* ============================================================
   PRODUCTS PAGE — AQUA/WFB product-row pattern (2026-08-11),
   AB layer: square corners, brand-sans numerals, brand red.
   ============================================================ */
.products { padding: 24px 40px 64px; }
.products-inner { max-width: var(--max); margin: 0 auto; }
.group-divider { padding: 72px 0 8px; }
.group-divider .group-label { font-family: var(--label); font-weight: 600; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; }
.group-divider h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.product-row { display: grid; grid-template-columns: 200px 1fr 340px; gap: 48px; padding: 60px 0; border-bottom: 1px solid var(--border); align-items: start; }
.product-row:last-child { border-bottom: 0; }
.product-aside { position: sticky; top: 88px; }
.product-num { font-family: var(--display); font-size: clamp(3rem, 5vw, 4.2rem); font-weight: 700; line-height: .9; color: var(--brand); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.product-channel { font-family: var(--label); font-weight: 600; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.product-title { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; text-transform: uppercase; line-height: 1.05; margin-bottom: 16px; color: var(--text); }
.product-desc { font-size: 1rem; color: var(--muted); line-height: 1.65; margin-bottom: 24px; max-width: 58ch; }
.product-desc strong { color: var(--text); font-weight: 600; }
.product-feats { border-top: 1px solid var(--border); margin-bottom: 26px; }
.product-feat { display: grid; grid-template-columns: 20px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: .92rem; color: var(--text); line-height: 1.5; align-items: baseline; }
.product-feat::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); align-self: center; justify-self: center; } /* 2027: plain dot — the red "+" read as an expand/accordion control */
.product-feat-list { display: contents; }
.product-feat-price { grid-template-columns: 20px 1fr auto; }
.product-feat-price b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.product-feat-price b small { font-size: .78em; font-weight: 500; color: var(--muted); margin-left: 2px; }
.product-links { display: flex; flex-wrap: wrap; gap: 10px; }
.product-links a { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); text-decoration: none; border: 1px solid var(--border-strong); padding: 9px 16px; transition: all .15s; }
.product-links a:hover { border-color: var(--brand); background: var(--brand-light); }
.product-links a.primary { background: var(--ink); color: var(--white); border-color: var(--ink); }
.product-links a.primary:hover { background: #000; }
.product-side { display: flex; flex-direction: column; gap: 16px; }
/* Product thumbnails — WFB products-page treatment (wfb-media-kit products.html, read 2026-09-28):
   real captures of AB's own surfaces, 14px radius, soft shadow, small centered caption.
   Images live in /brand/. Captures only — never mockups of surfaces AB doesn't have. */
.product-shot { margin-bottom: 4px; }
.product-shot img { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 40px rgba(17,17,17,.12); }
.product-shot img.mag-shot { width: auto; max-width: 62%; margin: 0 auto; }
.product-shot-caption { font-size: .72rem; color: var(--subtle); margin-top: 10px; text-align: center; line-height: 1.5; }
.product-stat { background: var(--light); border: 1px solid var(--border-strong); padding: 20px 22px; }
.product-stat-num { font-family: var(--display); font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--text); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.product-stat-lbl { font-size: .78rem; color: var(--muted); line-height: 1.45; }
.product-side .quote { font-size: .95rem; }
.product-side table.data { font-size: .85rem; }
@media (max-width: 1024px) {
  .product-row { grid-template-columns: 160px 1fr; }
  .product-side { grid-column: 2; }
}
@media (max-width: 760px) {
  .products { padding: 12px 20px 48px; }
  .product-row { grid-template-columns: 1fr; gap: 24px; padding: 48px 0; }
  .product-aside { position: static; display: flex; align-items: baseline; gap: 16px; }
  .product-num { font-size: 2.4rem; margin-bottom: 0; }
  .product-side { grid-column: auto; }
  .group-divider { padding: 48px 0 4px; }
}

/* ============================================================
   HOMEPAGE — sibling homepage pattern (2026-08-11), AB layer.
   Family structure: ahero + KPI strip, explorer teaser, partner
   bar, quote wall, spread, show band, path cards, contact CTA.
   ============================================================ */
/* verb rotator (family .verb-rotator) */
.verb-rotator { display: inline-block; overflow: hidden; height: 1em; line-height: 1; vertical-align: bottom; color: var(--white); }
.verb-rotator .vt { display: block; animation: verbspin 7.5s cubic-bezier(.7,0,.2,1) infinite; }
.verb-rotator .vt > span { display: block; height: 1em; line-height: 1; }
.verb-rotator .vt b { display: inline-block; font-weight: inherit; box-shadow: inset 0 -0.08em 0 var(--brand); }
@keyframes verbspin { 0%,28%{transform:translateY(0);} 33.3%,61.6%{transform:translateY(-1em);} 66.6%,95%{transform:translateY(-2em);} 100%{transform:translateY(-3em);} }
.hero .cta-note { margin-top: 14px; font-size: .85rem; color: rgba(255,255,255,.55); }
.hero .cta-note a { color: rgba(255,255,255,.8); }
/* mobile chip-stat ticker (family .m-ticker) */
.m-ticker { display: none; }
@media (max-width: 640px) {
  .hero .hero-kpis { display: none; }
  .m-ticker { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 5px; row-gap: 2px; font-size: clamp(.58rem, 2.7vw, .78rem); line-height: 1.45; padding: 10px 0; margin-top: 26px; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.82); }
  .m-ticker > span { white-space: nowrap; }
  .m-ticker b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--white); }
  .m-ticker .tk-dot { opacity: .45; }
}

/* explorer teaser (family .xpt) */
.xpt { padding: 96px 0; border-bottom: 1px solid var(--border); }
.xpt-inner { max-width: var(--max); margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.xpt-widget { background: var(--light); border: 1px solid var(--border-strong); padding: 28px; }
.xpt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.xpt-chip { appearance: none; border: 1px solid var(--border-strong); background: var(--white); color: var(--text); font-family: var(--display); font-size: .92rem; font-weight: 600; padding: 9px 18px; border-radius: 100px; cursor: pointer; transition: all .13s; }
.xpt-chip:hover { border-color: var(--brand); background: var(--brand-light); }
.xpt-chip[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.xpt-out { text-align: left; }
.xpt-num { font-family: var(--display); font-size: clamp(3.4rem, 8vw, 5.6rem); font-weight: 700; line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums; }
.xpt-lbl { font-size: .95rem; color: var(--muted); margin-top: 8px; }
.xpt-sub { margin-top: 6px; font-size: .88rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.xpt-num.is-todo { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.xpt-go { display: inline-block; margin-top: 20px; background: var(--ink); color: var(--white); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 12px 22px; text-decoration: none; transition: background .15s; }
.xpt-go:hover { background: #000; }
@media (max-width: 900px) { .xpt { padding: 64px 0; } .xpt-inner { grid-template-columns: 1fr; gap: 32px; padding: 0 20px; } }

/* Premium Partners strip — WFB's partner-strip treatment (wfb-media-kit index.html, read
   2026-09-26): transparent PNG logos at 50px tall (max 170px wide, contain), grayscale at
   .72 opacity, full color on hover (.3s), 64px gaps, two identical tracks on a linear loop
   that pauses on hover, 6% edge fades. AB layer: logos are trimmed to the artwork, so no
   per-logo height overrides are needed; partners without a logo keep the text word-mark. */
.logo-bar { background: var(--light); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 48px 0; overflow: hidden; }
.logo-bar-label { font-family: var(--label); font-weight: 600; font-size: .72rem; color: var(--muted); text-align: center; margin-bottom: 22px; letter-spacing: .14em; text-transform: uppercase; padding: 0 40px; }
.logo-marquee { display: flex; width: 100%; overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); }
.logo-marquee-track { display: flex; align-items: center; gap: 64px; padding-right: 64px; flex-shrink: 0; min-width: 100%; animation: logo-scroll 80s linear infinite; } /* WFB runs 60s for 10 logos; 80s keeps a similar pace for AB's 13 */
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
@keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
/* WFB treatment RESTORED Sept 30 2026 (Jared: "make the logos like wfb sales site") — grayscale at
   .72 opacity, full color on hover. Supersedes Charli's Sept 28 full-color request. */
.logo-marquee img.pl { height: 50px; width: auto; max-width: 170px; object-fit: contain; flex-shrink: 0; filter: grayscale(1); opacity: .72; transition: filter .3s ease, opacity .3s ease; }
.logo-marquee img.pl:hover { filter: none; opacity: 1; }
.logo-marquee .wm { display: inline-flex; align-items: center; height: 50px; font-family: var(--display); font-size: clamp(1.05rem, 1.6vw, 1.5rem); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); white-space: nowrap; opacity: .7; transition: opacity .3s, color .3s; flex-shrink: 0; }
.logo-marquee .wm:hover { opacity: 1; color: var(--text); }
@media (max-width: 640px) { .logo-bar { padding: 24px 0; } }

/* advertiser quote wall (family .rl-card shape, static grid, ink band) */
.quote-wall .rl-card { background: var(--white); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 26px 28px; display: flex; flex-direction: column; gap: 16px; }
.quote-wall .rl-quote { font-size: 1rem; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.quote-wall .rl-quote::before { content: '\201C'; color: var(--brand); font-family: var(--display); font-weight: 700; }
.quote-wall .rl-quote::after { content: '\201D'; color: var(--brand); font-family: var(--display); font-weight: 700; }
.quote-wall .rl-by { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: auto; }

/* path cards (family .path-grid) */
.path-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 40px; }
.path-card { background: var(--white); border: 1px solid var(--border-strong); padding: 30px; display: flex; flex-direction: column; }
.path-card.hot { border: 2px solid var(--brand); box-shadow: 6px 6px 0 var(--brand); }
.path-n { font-family: var(--display); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--brand); margin-bottom: 14px; }
.path-h { font-family: var(--display); font-size: 1.25rem; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; }
.path-d { font-size: .92rem; color: var(--muted); line-height: 1.6; margin-bottom: 20px; }
.path-d strong { color: var(--text); font-weight: 600; }
.path-cta { margin-top: auto; display: inline-block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand); text-decoration: none; }
.path-cta:hover { text-decoration: underline; }
@media (max-width: 900px) { .path-grid { grid-template-columns: 1fr; } }

/* contact cards in the final CTA (family .contact-card) */
.cta-contacts { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.contact-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); padding: 24px 30px; min-width: 250px; text-align: center; }
.contact-name { font-family: var(--display); font-size: 1.2rem; font-weight: 700; text-transform: uppercase; color: var(--white); }
.contact-region { font-size: .78rem; color: rgba(255,255,255,.7); margin: 4px 0 12px; }
.contact-links a { display: block; font-size: .92rem; color: var(--white); text-decoration: none; margin: 3px 0; }
.contact-links a:hover { text-decoration: underline; }

/* digital-reach band v2 — the family .sos construction (WFB/AQUA share it verbatim:
   split bar + stat cards + first-party pill + source note), AB layer: square corners.
   AQUA precedent: absolute counts in the split bar segments, not percentages. */
/* 2027: eyebrow, H2 and intro left-aligned like the rest of the page; the chart block below stays centered */
.sosab .sosab-bar-meta, .sosab .sosab-bar, .sosab .sosab-bar-caption, .sosab .sosab-cards { margin-left: auto; margin-right: auto; }
.sosab .sosab-bar-caption, .sosab-fp-wrap { text-align: center; }
/* Header block centered to match the centered bar/cards below (Charli, Sept 28 2026: the
   left-aligned heading over a centered body read as odd spacing). One 960px column for the
   whole band so the bar, its labels and the cards share the same edges. */
.sosab > .wrap > .eyebrow, .sosab > .wrap > h2 { text-align: center; }
.sosab > .wrap > .lede { text-align: center; max-width: 820px; margin-left: auto; margin-right: auto; }
.sosab-bar-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; max-width: 960px; margin: 40px auto 12px; font-family: var(--label); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sosab-bar { display: flex; max-width: 960px; margin: 0 auto; overflow: hidden; text-align: left; }
.sosab-bar-seg { padding: 22px 24px; min-width: 0; }
.sosab-bar-seg .sosab-bar-label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.sosab-bar-seg .sosab-bar-value { font-family: var(--display); font-size: clamp(1.7rem, 4.5vw, 2.5rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.sosab-bar-us { flex: none; width: 69.07%; background: var(--brand); color: var(--white); }
.sosab-bar-us .sosab-bar-label { color: rgba(255,255,255,.75); }
.sosab-bar-them { flex: none; width: 30.93%; background: var(--light-2); color: var(--muted); text-align: right; }
.sosab-bar-them .sosab-bar-value { color: var(--ink-soft); }
.sosab-bar-caption { max-width: 960px; margin: 14px auto 36px; font-size: .8rem; color: var(--muted); }
.sosab-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; max-width: 960px; margin: 0 auto 36px; text-align: left; }
.sosab-card { background: var(--white); border: 1px solid var(--border-strong); padding: 24px 22px; }
.sosab-card .sosab-card-value { font-family: var(--display); font-size: 2.2rem; font-weight: 700; color: var(--brand); line-height: 1; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.sosab-card p { font-size: .88rem; line-height: 1.5; color: var(--muted); }
.sosab-card p strong { color: var(--text); font-weight: 600; }
.sosab-firstparty { display: inline-block; background: var(--white); border: 1px solid var(--border-strong); padding: 12px 24px; font-size: .88rem; color: var(--muted); margin-bottom: 8px; }
.sosab-firstparty strong { color: var(--text); font-weight: 700; }
@media (max-width: 860px) { .sosab-cards { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .sosab-bar { flex-direction: column; }
  .sosab-bar-us, .sosab-bar-them { width: 100%; }
  .sosab-bar-them { text-align: left; }
  .sosab-cards { display: none; }
  .sosab .m-ticker { display: flex; border-color: var(--border); color: var(--muted); margin: 0 0 24px; }
  .sosab .m-ticker b { color: var(--brand); }
}

/* Reader Voices (reader-voices.html) — family reader-page pattern (AQUA/WFB): unified
   flex-card grid (quote first, role footer pushed to the bottom), toolbar, progressive
   load. AB layer: square corners, brand-red quote marks, uppercase footer. */
.rv-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; margin-top: 2.2rem; }
.rv-card { background: var(--white); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 22px 24px; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.rv-quote { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--text); }
.rv-quote::before { content: '\201C'; color: var(--brand); font-family: var(--display); font-weight: 700; }
.rv-quote::after { content: '\201D'; color: var(--brand); font-family: var(--display); font-weight: 700; }
.rv-who { margin-top: auto; font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.rv-study { display: inline-block; margin-left: 6px; font-family: var(--label); font-weight: 600; font-size: .64rem; letter-spacing: .08em; color: var(--subtle); }
.rv-tools { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin-top: 2rem; }
.rv-search { flex: 1 1 260px; max-width: 420px; border: 1px solid var(--border-strong); border-radius: 100px; background: var(--white); padding: 11px 18px; font: inherit; font-size: .9rem; color: var(--text); }
.rv-search:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-count { margin-top: 1.2rem; font-family: var(--label); font-weight: 600; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rv-browse { margin-top: 1.2rem; }

/* Reader wall — homepage #reader-wall band, the family rl-section treatment (both
   siblings, extracted 2026-08-17): full-bleed dark, display-scale numeral in the accent
   slot (AB red), two-row staggered card marquee (opposite directions, pause on hover,
   edge fades), pill CTA. Small text on ink stays translucent white — tiny AB red fails
   contrast on the dark bed; the red accent slots are the numeral and quote marks. */
.reader-band { overflow: hidden; }
.reader-band .rl-head { max-width: var(--max); margin: 0 auto 48px; padding: 0 40px; }
.reader-band .rl-bigrow { display: flex; align-items: center; /* 2027: text block vertically centered on the numeral */ gap: 22px; flex-wrap: wrap; margin-top: .6rem; }
.reader-band .rl-bignum { font-family: var(--display); font-weight: 600; font-size: clamp(4.5rem, 12vw, 9rem); letter-spacing: -.04em; line-height: .82; color: var(--brand); font-variant-numeric: tabular-nums; }
.reader-band .rl-bigtxt { font-family: var(--display); font-weight: 600; font-size: clamp(1.8rem, 3.4vw, 2.8rem); letter-spacing: -.01em; line-height: 1.05; color: var(--white); max-width: 16ch; }
.reader-band .rl-sub { margin-top: 22px; max-width: 56ch; color: rgba(255,255,255,.65); line-height: 1.6; }
.reader-band .rl-sub strong { color: var(--white); font-weight: 600; }
.rl-marquee { position: relative; display: flex; flex-direction: column; gap: 20px; }
.rl-marquee::before, .rl-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 3; pointer-events: none; }
.rl-marquee::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.rl-marquee::after { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }
.rl-mq-row { overflow: hidden; }
.rl-mq-track { display: flex; gap: 20px; width: max-content; will-change: transform; }
.rl-mq-row1 .rl-mq-track { animation: rl-scroll 80s linear infinite; }
.rl-mq-row2 .rl-mq-track { animation: rl-scroll-rev 88s linear infinite; }
.rl-marquee:hover .rl-mq-track { animation-play-state: paused; }
@keyframes rl-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rl-scroll-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.rl-mq-group { display: flex; gap: 20px; }
.rl-mq-card { width: 360px; flex-shrink: 0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; margin: 0; }
.rl-mq-quote { margin: 0; font-size: 1rem; line-height: 1.5; color: rgba(255,255,255,.92); text-wrap: pretty; }
.rl-mq-quote::before { content: '\201C'; color: var(--brand); font-family: var(--display); font-weight: 600; }
.rl-mq-quote::after { content: '\201D'; color: var(--brand); font-family: var(--display); font-weight: 600; }
.rl-mq-who { margin-top: auto; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.rl-mq-who .rv-study { color: rgba(255,255,255,.4); }
.reader-band .rl-foot { max-width: var(--max); margin: 44px auto 0; padding: 0 40px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.reader-band .rl-foot-note { font-size: .78rem; color: rgba(255,255,255,.4); font-style: italic; line-height: 1.5; max-width: 56ch; }
@media (max-width: 640px) { .rl-mq-card { width: 300px; } .reader-band .rl-head, .reader-band .rl-foot { padding: 0 20px; } }

/* Partner-story band (index #case-studies) — family proof-band pattern (AQUA's
   .case-band), AB layer. Text-only card: no standalone Matrix image asset in the repo. */
.case-band { display: block; background: var(--white); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 36px 40px; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; margin-top: 2.2rem; }
.case-band:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(35,37,43,.08); }
.case-tag { font-family: var(--label); font-weight: 600; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; }
.case-name { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.8rem); text-transform: uppercase; line-height: 1.15; color: var(--text); max-width: 30ch; }
.case-sub { margin-top: 12px; color: var(--muted); line-height: 1.6; max-width: 66ch; }
.case-stats { display: flex; gap: 48px; flex-wrap: wrap; margin-top: 22px; }
.case-stat-num { font-family: var(--display); font-weight: 700; font-size: 2.2rem; color: var(--brand); line-height: 1; font-variant-numeric: tabular-nums; }
.case-stat-lbl { font-size: .78rem; color: var(--muted); margin-top: 4px; max-width: 24ch; }
.case-cta { margin-top: 24px; font-weight: 700; color: var(--brand); }
.case-cta::after { content: ' \2192'; }
@media (max-width: 640px) { .case-band { padding: 24px 20px; } }

/* Baxter proof strip — separately-labeled block for Baxter figures inside product/category
   surfaces (routing rule: its own label + its own attribution, never shared with
   audience-file figures). */
.bx-strip { border: 1px solid var(--border-strong); border-left: 3px solid var(--brand); border-radius: 10px; background: var(--light); padding: 14px 18px; margin-top: 18px; }
.bx-strip-k { font-family: var(--label); font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.bx-strip-row { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.bx-strip-row span { font-size: .84rem; color: var(--text); line-height: 1.5; }
.bx-strip-row span b { color: var(--brand); font-variant-numeric: tabular-nums; }
.bx-strip-src { font-size: .7rem; color: var(--subtle); font-style: italic; margin-top: 10px; line-height: 1.5; }
.bx-strip-src a { color: var(--muted); }

/* Who-do-you-sell-to index (products #for) + /for/ category pages */
.for-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 2rem; }
.for-card { display: block; background: var(--white); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 20px 22px; text-decoration: none; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.for-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(35,37,43,.08); }
.for-card b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text); }
.for-card b::after { content: ' →'; color: var(--brand); }
.for-card span { display: block; margin-top: 6px; font-size: .8rem; color: var(--muted); line-height: 1.45; }
@media (max-width: 860px) { .for-grid { grid-template-columns: 1fr; } }

/* Next-close countdown strip (index + products, under the nav). Deliberately quiet —
   no urgency styling; the fact is the urgency. */
.close-strip { background: var(--light-2); border-bottom: 1px solid var(--border); font-family: var(--label); font-weight: 600; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; }
.close-strip .wrap { max-width: var(--max); margin: 0 auto; padding: 9px 24px; text-align: center; }
.close-strip a { color: var(--muted); text-decoration: none; }
.close-strip a b { color: var(--brand); font-weight: 700; }
.close-strip a:hover { color: var(--text); }

/* Reader wall — #readership Layer 2 (index). Typographic names only; lives in the ink band. */
.reader-wall { margin-top: 3.5rem; border-top: 1px solid rgba(255,255,255,.18); padding-top: 2.4rem; }
.rw-frame { font-size: .95rem; max-width: 720px; }
.rw-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 36px 40px; margin-top: 2rem; }
.rw-head { font-family: var(--display); font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); border-top: 2px solid var(--brand); padding-top: 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rw-count { font-family: var(--label); font-size: .74rem; font-weight: 600; letter-spacing: .08em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rw-names { list-style: none; margin: .7rem 0 0; padding: 0; }
.rw-names li { font-size: .84rem; line-height: 1.45; padding: .3rem 0; color: var(--text); border-bottom: 1px solid var(--border); }
.band.ink .rw-head { color: var(--white); } .band.ink .rw-count { color: rgba(255,255,255,.55); } .band.ink .rw-names li { color: rgba(255,255,255,.72); border-bottom-color: rgba(255,255,255,.08); }
.rw-names li:last-child { border-bottom: none; }
.rw-note { font-size: .74rem; font-style: italic; margin-top: 2.2rem; line-height: 1.5; }
.band.ink .rw-note { color: rgba(255,255,255,.45); }
@media (max-width: 860px) { .rw-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ============================================================
   2027 REVISIONS (Sept 2026) — data-module placeholders.
   Values still marked T('...') in assets/ab-data.js render as a
   visible {{TODO}} so reviewers can see what is pending; values
   with a provisional string show it plus a small TODO flag.
   ============================================================ */
[hidden] { display: none !important; }
.todo { display: inline-block; max-width: 100%; font-family: var(--label); font-size: max(.72rem, .3em); font-weight: 700; line-height: 1.35; letter-spacing: 0; text-transform: none; white-space: normal; vertical-align: middle; color: #5c4400; background: #fff3bf; border: 1px dashed #b08900; border-radius: 6px; padding: .25em .6em; font-variant-numeric: normal; }
.todo-flag { display: inline-block; margin-left: .45em; vertical-align: super; font-family: var(--label); font-size: max(.6rem, .22em); font-weight: 700; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: #5c4400; background: #fff3bf; border: 1px dashed #b08900; border-radius: 4px; padding: .3em .45em; cursor: help; }

/* Closing CTA (#start, 2027): larger headline in near-black (#111) on AB red (#C42428).
   Contrast 3.21:1 — passes WCAG AA for LARGE text only (>=3:1; this headline is always
   >=2.6rem bold). It would fail AA for normal text (4.5:1); white on the same red is 5.88:1.
   Keep #111 to headline-size text only. */
.band.red.cta-dark .cta-headline { color: #111; font-size: clamp(2.6rem, 6.4vw, 5rem); font-weight: 800; line-height: 1; letter-spacing: -.01em; }

/* Products — in-card sub-section (Product Spotlight inside Sponsored Content, 2027) */
.product-sub { background: var(--cream); border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: 10px; padding: 18px 20px; margin: -6px 0 26px; }
.product-sub-k { font-family: var(--display); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: .02em; color: var(--text); margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.product-sub p { font-size: .92rem; color: var(--muted); line-height: 1.6; }
.product-sub p strong { color: var(--text); }
.product-sub-todo .todo { font-size: .62rem; }

/* ============================================================
   2027 EDITORIAL CALENDAR (products #calendar + editorial-calendar.html)
   Rendered by ab-bind.js from AB.calendar. Table >= 900px, stacked cards below.
   ============================================================ */
.cal-actions { margin: 22px 0 28px; }
.cal-table-wrap { background: var(--white); border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }
.cal-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cal-table thead th { font-family: var(--label); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-align: left; color: var(--white); background: var(--ink); padding: 14px 16px; }
.cal-table td, .cal-table tbody th { padding: 18px 16px; border-top: 1px solid var(--border); vertical-align: top; text-align: left; }
.cal-table tbody tr:nth-child(even) { background: var(--light); }
.cal-table .cal-issue { font-family: var(--display); font-weight: 800; font-size: 1rem; text-transform: uppercase; white-space: nowrap; color: var(--text); }
.cal-table .cal-date { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--brand); }
.cal-cov { font-weight: 700; color: var(--text); }
.cal-desc { font-size: .86rem; color: var(--muted); line-height: 1.55; margin-top: 4px; max-width: 46ch; }
.cal-also { list-style: none; padding: 0; margin: 0; font-size: .86rem; line-height: 1.5; color: var(--text); }
.cal-also li { padding: 1px 0; }
.cal-table .cal-bonus { font-size: .82rem; font-weight: 600; color: var(--text); }
.cal-none { color: var(--subtle); }
.cal-star { color: var(--brand); font-weight: 800; }
.cal-red { color: var(--brand); font-weight: 700; }
.cal-foot { margin-top: 14px; font-size: .85rem; color: var(--muted); }
.cal-cards { display: none; }
@media (max-width: 900px) {
  .cal-table-wrap { display: none; }
  .cal-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .cal-card { background: var(--white); border: 1px solid var(--border-strong); border-top: 4px solid var(--brand); border-radius: var(--radius); padding: 20px; }
  .cal-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
  .cal-card .cal-issue { font-family: var(--display); font-weight: 800; font-size: 1.2rem; text-transform: uppercase; }
  .cal-card-dates { display: flex; gap: 14px; font-size: .78rem; color: var(--muted); }
  .cal-card-dates b { color: var(--brand); font-variant-numeric: tabular-nums; }
  .cal-card .cal-desc { max-width: none; margin: 4px 0 12px; }
  .cal-k { font-family: var(--label); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
  .cal-card .cal-bonus { margin-top: 12px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
}
.cal-card .cal-k { display: block; }
/* In Every Issue grid of 8 */
.ei-head { margin-top: 56px; font-size: clamp(1.3rem, 2.4vw, 1.7rem); text-transform: uppercase; }
.ei-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; }
.ei-card { background: var(--white); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 20px; }
.ei-card h3 { font-size: .98rem; text-transform: uppercase; margin-bottom: 6px; }
.ei-card p { font-size: .86rem; color: var(--muted); line-height: 1.55; }
@media (max-width: 1024px) { .ei-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ei-grid { grid-template-columns: 1fr; } }

/* Rates page (2027) */
.rates-match { margin-top: 1.1rem; font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-weight: 600; color: var(--text); max-width: 60ch; line-height: 1.45; }
.lede .lede-red { color: var(--brand); font-weight: 700; }
.rates-pair { margin-top: 3.5rem; align-items: start; }
table.data td.num { white-space: nowrap; } /* keep price ranges on one line so paired tables align row-for-row */
.pkg-lead { margin: .6rem 0 1.8rem; font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-weight: 600; color: var(--text); }
.pkg-value { font-size: .9rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }

/* Button pairs — one shared row: side by side when they fit, stacked flush-left with a
   consistent gap when they don't (no inline margins, so a wrapped button is never indented). */
.btn-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px; }
.btn-row .btn { margin: 0; }
.band .grid2 .btn-row .btn { padding-left: 20px; padding-right: 20px; }
@media (max-width: 640px) { .btn-row { flex-direction: column; align-items: flex-start; } }

/* approximate-figure qualifier ("nearly 30,000"): small caps line above the numeral in stat slots */
.num-qual { font-size: inherit; font-weight: inherit; } /* in prose "nearly" reads as normal text */
.hero-kpi-num .num-qual, .xpt-num .num-qual, .product-stat-num .num-qual { display: block; font-family: var(--label); font-size: max(.62rem, .26em); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1; margin-bottom: .35em; opacity: .75; }
.xpt-src { margin-top: 6px; font-size: .72rem; font-style: italic; color: var(--subtle); }
.hero-kpi-num { position: relative; }
.hero-kpi-num .num-qual { position: absolute; left: 0; bottom: 100%; margin-bottom: .45em; } /* sits in the padding so all KPI numerals share a baseline */

/* Products — 2027 Product Spotlight schedule (#product-spotlight), rendered by ab-bind.js from
   AB.spotlight. Reuses .product-sub (in-card box) + .product-feat rows; issue | topic columns. */
.ps-block { margin: 0 0 26px; }
.ps-list { list-style: none; margin: 10px 0 14px; padding: 0; }
.ps-row { grid-template-columns: 20px 92px 1fr; }
.ps-issue { font-weight: 700; color: var(--text); white-space: nowrap; }
.ps-topic { color: var(--text); }
.ps-shows { margin-left: 4px; }
.ps-shows-only { margin-left: -6px; }
.ps-show { display: inline-block; margin: 2px 0 2px 6px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--brand-dark); background: var(--brand-light); border-radius: 100px; padding: 2px 10px; white-space: nowrap; vertical-align: 1px; }
.ps-specs { margin-top: 14px; }
@media (max-width: 640px) {
  .ps-row { grid-template-columns: 20px 1fr; row-gap: 2px; }
  .ps-row .ps-topic { grid-column: 2; }
  .ps-shows { display: block; margin: 4px 0 0; }
  .ps-shows-only { margin-top: 0; }
  .ps-show { margin: 2px 6px 2px 0; }
}

/* ============================================================
   FACILITY PHOTOGRAPHY (Sept 30 2026) — AB editorial photos from Cordell
   Walker's Salesite folder. Captions: facility name only (AB.photos).
   ============================================================ */
/* homepage hero: photo under a heavy ink wash so the headline + KPI strip keep contrast */
.hero.hero-home { background: var(--ink) url('../brand/facilities/uwsp-exterior-1600.webp') center 40% / cover no-repeat; }
.hero.hero-photo::before { background: linear-gradient(100deg, rgba(35,37,43,.96) 0%, rgba(35,37,43,.90) 45%, rgba(35,37,43,.70) 100%), radial-gradient(circle at 8% 92%, rgba(196,36,40,.18), transparent 55%); }
@media (max-width: 900px) { .hero.hero-home { background-image: url('../brand/facilities/uwsp-exterior-900.webp'); } .hero.hero-photo::before { background: rgba(35,37,43,.9); } }
.photo-credit { position: absolute; right: 16px; bottom: 10px; z-index: 1; font-size: .64rem; letter-spacing: .02em; color: rgba(255,255,255,.42); max-width: 60%; text-align: right; line-height: 1.4; }

/* homepage facility mosaic */
.fac-grid { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 10px; margin-top: 36px; }
.fac-grid figure { position: relative; overflow: hidden; border-radius: 12px; background: var(--ink-soft); }
.fac-grid figure.tall { grid-row: span 2; }
.fac-grid figure.wide { grid-column: span 2; }
.fac-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.fac-grid figure:hover img { transform: scale(1.03); }
.fac-grid figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; font-size: .7rem; line-height: 1.35; font-weight: 600; color: #fff; background: linear-gradient(180deg, transparent, rgba(0,0,0,.72)); }
@media (max-width: 900px) { .fac-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; } }
@media (max-width: 520px) { .fac-grid { grid-auto-rows: 140px; gap: 8px; } .fac-grid figure.wide { grid-column: span 2; } }
@media (prefers-reduced-motion: reduce) { .fac-grid img { transition: none; } }

/* products page: full-bleed photo breaks between channel groups (WFB products-page pattern) */
.photo-band { position: relative; height: clamp(200px, 30vw, 380px); margin: 72px calc(50% - 50vw) 0; overflow: hidden; background: var(--ink); }
.photo-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-band figcaption { position: absolute; right: 16px; bottom: 10px; font-size: .68rem; font-weight: 600; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.photo-band + .group-divider { padding-top: 48px; }
@media (max-width: 640px) { .photo-band { margin-top: 48px; } }

/* rates #specs list (Sept 30 2026) */
.spec-list { list-style: none; margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 32px; }
.spec-list li { padding: 12px 0; border-bottom: 1px solid var(--border-strong); font-size: .95rem; }
.spec-list a { font-weight: 600; }
.spec-tag { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .1em; color: var(--brand); border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; vertical-align: 2px; }
@media (max-width: 700px) { .spec-list { grid-template-columns: 1fr; } }

/* generic photo hero (Sept 30 2026): <img class="hero-bg"> as first child of .hero.hero-photo */
.hero.hero-photo { isolation: isolate; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
/* full-bleed photo band between top-level page sections */
.photo-band.solo { margin: 0; }
.photo-band.solo + .band, .band + .photo-band.solo { border-top: 0; }

/* Matrix partner-story card, visual version (Sept 30 2026): red logo panel + story */
.case-band.case-visual { display: grid; grid-template-columns: minmax(240px, 34%) 1fr; padding: 0; overflow: hidden; }
.case-visual .case-art { background: var(--brand); color: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 36px 32px; position: relative; overflow: hidden; }
.case-visual .case-art::after { content: ''; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; border: 36px solid rgba(255,255,255,.08); }
.case-visual .case-logo { width: 150px; height: auto; display: block; }
.case-visual .case-big { font-weight: 800; font-size: clamp(4rem, 9vw, 6.5rem); line-height: .9; letter-spacing: -.02em; }
.case-visual .case-big small { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin-top: 10px; line-height: 1.4; }
.case-visual .case-body { padding: 36px 40px; }
.case-visual:hover .case-cta { text-decoration: underline; }
@media (max-width: 760px) { .case-band.case-visual { grid-template-columns: 1fr; } .case-visual .case-art { padding: 28px 24px; } .case-visual .case-body { padding: 24px 20px; } }

/* #start closing CTA, rich version (Sept 30 2026) */
.cta-rich { position: relative; overflow: hidden; isolation: isolate; padding: 104px 0; }
.cta-rich .cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; opacity: .38; filter: grayscale(1) contrast(1.1); z-index: -1; }
.cta-rich::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(140,25,28,.55) 0%, rgba(196,36,40,0) 60%); }
.cta-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.cta-rich .eyebrow { color: rgba(255,255,255,.8); }
.band.red.cta-dark.cta-rich .cta-headline { color: #fff; text-align: left; font-size: clamp(2.8rem, 6vw, 4.8rem); line-height: .98; }
.cta-rich .cta-lede { color: rgba(255,255,255,.9); font-size: 1.12rem; line-height: 1.6; margin-top: 18px; max-width: 34rem; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.cta-rich .cta-btn-light { background: #fff; color: var(--brand); border-color: #fff; }
.cta-rich .cta-btn-light:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.cta-rich .cta-btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.7); }
.cta-rich .cta-btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.cta-reps { display: grid; gap: 16px; }
.rep { background: #fff; color: var(--text); border-radius: var(--radius); padding: 22px 24px; box-shadow: 0 18px 40px rgba(40,6,8,.28); transition: transform .15s ease; }
.rep:hover { transform: translateY(-2px); }
.rep-top { display: flex; align-items: center; gap: 14px; }
.rep-init { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: .95rem; letter-spacing: .04em; display: grid; place-items: center; }
.rep-name { font-weight: 800; font-size: 1.1rem; line-height: 1.2; color: var(--ink); }
.rep-role { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.rep-terr { margin-left: auto; font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); background: var(--brand-light); border-radius: 100px; padding: 5px 10px; }
.rep-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rep-btn { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; color: var(--ink); text-decoration: none; border: 1px solid var(--border-strong); border-radius: 100px; padding: 8px 14px; transition: border-color .15s, color .15s; }
.rep-btn:hover { border-color: var(--brand); color: var(--brand); }
.rep-btn svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 900px) { .cta-grid { grid-template-columns: 1fr; gap: 36px; } .cta-rich { padding: 72px 0; } }
@media (max-width: 420px) { .rep-btn { font-size: .78rem; } .rep { padding: 18px; } }

/* closing CTA buttons (beat the .band.red .btn defaults) */
.band.red.cta-rich .btn.cta-btn-light { background: #fff; color: var(--brand); }
.band.red.cta-rich .btn.cta-btn-light:hover { background: var(--ink); color: #fff; }
.band.red.cta-rich .btn.cta-btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.7); }
.band.red.cta-rich .btn.cta-btn-ghost:hover { background: rgba(255,255,255,.14); }

/* AB Show feature (#show, Sept 30 2026) */
.show-feature { position: relative; overflow: hidden; padding: 112px 0; background: radial-gradient(circle at 85% 20%, rgba(196,36,40,.35), transparent 55%), radial-gradient(circle at 0% 100%, rgba(196,36,40,.18), transparent 50%), var(--ink); }
.show-watermark { position: absolute; right: -2vw; bottom: -3vw; font-weight: 800; font-size: clamp(6rem, 19vw, 17rem); line-height: .8; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.07); pointer-events: none; user-select: none; }
.show-feature .wrap { position: relative; }
.show-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 28px; }
.show-head .eyebrow { flex-basis: 100%; color: rgba(255,255,255,.6); }
.show-title { color: #fff; font-size: clamp(3.2rem, 9vw, 7rem); line-height: .9; letter-spacing: -.02em; }
.show-title span { color: var(--brand); }
.show-countdown { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--brand); border-radius: 100px; padding: 8px 16px; margin-bottom: 10px; }
.show-countdown b { font-size: 1.05rem; margin-right: 2px; }
.show-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 48px; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.show-fact { padding: 26px 24px 26px 0; }
.show-fact + .show-fact { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.14); }
.sf-k { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brand); }
.sf-v { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 800; color: #fff; margin-top: 8px; line-height: 1.2; }
.sf-s { font-size: .88rem; color: rgba(255,255,255,.62); margin-top: 6px; }
.show-body { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: center; margin-top: 56px; }
.show-ring { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1; }
.show-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.show-ring .ring-bg { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 10; }
.show-ring .ring-fg { fill: none; stroke: var(--brand); stroke-width: 10; stroke-linecap: round; }
.ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; font-weight: 800; font-size: clamp(3.2rem, 7vw, 4.6rem); line-height: 1; }
.ring-num small { font-size: .74rem; font-weight: 600; line-height: 1.4; color: rgba(255,255,255,.7); max-width: 150px; margin-top: 10px; letter-spacing: .02em; }
.show-copy h3 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.1; }
.show-copy p { color: rgba(255,255,255,.75); margin-top: 14px; font-size: 1.05rem; line-height: 1.6; max-width: 40rem; }
.show-ctas { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.band.ink .btn.show-btn { background: var(--brand); color: #fff; }
.band.ink .btn.show-btn:hover { background: #fff; color: var(--brand); }
.show-copy .smallnote { margin-top: 18px; color: rgba(255,255,255,.45); font-size: .78rem; }
@media (max-width: 900px) { .show-facts { grid-template-columns: 1fr; } .show-fact, .show-fact + .show-fact { padding: 18px 0; border-left: 0; } .show-fact + .show-fact { border-top: 1px solid rgba(255,255,255,.14); } .show-body { grid-template-columns: 1fr; gap: 32px; } .show-ring { max-width: 240px; margin: 0 auto; } .show-feature { padding: 72px 0; } }

/* homepage rhythm after the Sept 30 reorder: #facilities moves onto ink so the photos pop and the
   page alternates dark / light again (hero D · logos · readership L · facilities D · explorer L ·
   reader-wall D · digital-reach L · show D · case-studies L · CTA red) */
.band.ink .src { color: rgba(255,255,255,.45); }


/* homepage facility wall runs edge to edge (Sept 30 2026) */
.fac-grid.fac-bleed { margin: 40px 0 0; padding: 0 10px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(200px, 17vw, 300px); gap: 10px; }
.fac-grid.fac-bleed figure { border-radius: 8px; }
.fac-grid.fac-bleed figcaption { font-size: .74rem; padding: 30px 14px 12px; }
@media (max-width: 900px) { .fac-grid.fac-bleed { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; padding: 0 8px; gap: 8px; } }
@media (max-width: 520px) { .fac-grid.fac-bleed { grid-auto-rows: 140px; } }

/* Matrix partner story — WFB Saroyan construction in the AB layer (Sept 30 2026): dark card, story left,
   the partner's own AB ad right. Overrides the earlier red-panel .case-visual version. */
.case-band.case-dark { display: grid; grid-template-columns: 1.15fr .85fr; padding: 0; border: 0; border-radius: 18px; overflow: hidden; color: #fff; min-height: 340px;
  background: radial-gradient(circle at 12% 110%, rgba(196,36,40,.45), transparent 55%), linear-gradient(150deg, #2c2f36 0%, var(--ink) 65%, #1b1c21 100%);
  box-shadow: 0 18px 44px rgba(24,26,31,.18); transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s; }
.case-band.case-dark:hover { transform: translateY(-5px); box-shadow: 0 24px 48px rgba(24,26,31,.3); border-color: transparent; }
.case-dark .case-body { padding: 44px 44px 40px; display: flex; flex-direction: column; }
.case-dark .case-logo { width: 130px; height: auto; margin-bottom: 22px; opacity: .95; }
.case-dark .case-tag { color: #ff8a8d; }
.case-dark .case-name { color: #fff; font-size: clamp(1.5rem, 2.5vw, 2.1rem); line-height: 1.05; text-transform: uppercase; }
.case-dark .case-sub { color: rgba(255,255,255,.66); max-width: 46ch; }
.case-dark .case-stats { margin-top: auto; padding-top: 28px; display: flex; gap: 40px; flex-wrap: wrap; }
.case-dark .case-stat-num { color: #ff5a5f; font-size: 2.6rem; }
.case-dark .case-stat-lbl { color: rgba(255,255,255,.6); max-width: 22ch; }
.case-dark .case-cta { color: #fff; margin-top: 24px; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; }
.case-dark .case-img { position: relative; overflow: hidden; background: #15161a; display: flex; align-items: center; justify-content: center; padding: 28px; }
.case-dark .case-img img { height: 100%; max-height: 420px; width: auto; max-width: 100%; object-fit: contain; display: block; box-shadow: 0 20px 40px rgba(0,0,0,.45); transform: rotate(2deg); transition: transform .3s ease; }
.case-band.case-dark:hover .case-img img { transform: rotate(0deg) scale(1.02); }
.case-dark .case-img-cap { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: .66rem; color: rgba(255,255,255,.45); }
@media (max-width: 860px) { .case-band.case-dark { grid-template-columns: 1fr; } .case-dark .case-body { padding: 30px 24px; } .case-dark .case-img { padding: 24px 24px 36px; } .case-dark .case-img img { max-height: 340px; } }

.xpt.xpt-cream { background: var(--cream); }

/* ============================================================
   LIGHT PASS (Sept 30 2026, Jared: dark bands felt harsh; WFB made the same move) —
   #reader-wall and #show go light; only the hero stays dark. Overrides only; the
   original dark rules above are untouched, so removing .rl-light / .sf-light reverts.
   ============================================================ */
.rl-light { background: var(--white); }
.rl-light .eyebrow { color: var(--brand); }
.rl-light .rl-bigtxt { color: var(--ink); }
.rl-light .rl-sub { color: var(--muted); }
.rl-light .rl-sub strong { color: var(--text); }
.rl-light .rl-marquee::before { background: linear-gradient(90deg, var(--white), transparent); }
.rl-light .rl-marquee::after { background: linear-gradient(270deg, var(--white), transparent); }
.rl-light .rl-mq-card { background: var(--cream); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(35,37,43,.04); }
.rl-light .rl-mq-quote { color: var(--text); }
.rl-light .rl-mq-who { color: var(--ink); }
.rl-light .rl-mq-who .rv-study { color: var(--muted); }
.rl-light .rl-foot-note { color: var(--muted); }

.show-feature.sf-light { background: radial-gradient(circle at 88% 12%, rgba(196,36,40,.10), transparent 50%), var(--white); }
.sf-light .show-watermark { -webkit-text-stroke: 1px rgba(35,37,43,.07); }
.sf-light .show-head .eyebrow { color: var(--brand); }
.sf-light .show-title { color: var(--ink); }
.sf-light .show-facts, .sf-light .show-fact + .show-fact { border-color: var(--border-strong); }
.sf-light .sf-v { color: var(--ink); }
.sf-light .sf-s { color: var(--muted); }
.sf-light .sf-s a { color: var(--brand) !important; }
.sf-light .show-ring .ring-bg { stroke: var(--border); }
.sf-light .ring-num { color: var(--ink); }
.sf-light .ring-num small { color: var(--muted); }
.sf-light .show-copy h3 { color: var(--ink); }
.sf-light .show-copy p { color: var(--muted); }
.sf-light .show-copy .smallnote { color: var(--subtle); }
.sf-light .btn.show-btn { background: var(--brand); color: #fff; }
.sf-light .btn.show-btn:hover { background: var(--ink); color: #fff; }
.sf-light .btn.ghost { color: var(--ink); border: 2px solid var(--border-strong); background: transparent; }
.sf-light .btn.ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
@media (max-width: 900px) { .sf-light .show-fact + .show-fact { border-top-color: var(--border-strong); } }

/* SLATE (Sept 30 2026, Jared: black too harsh, full light too light — "just adjust it"): a softer,
   lighter charcoal for the two interior dark bands. The hero keeps --ink. The .rl-light/.sf-light
   light versions above remain available but unused. */
.band.ink.band-slate { background: linear-gradient(160deg, #40434b 0%, #33363d 100%); }
.show-feature.band-slate { background: radial-gradient(circle at 85% 18%, rgba(196,36,40,.28), transparent 55%), radial-gradient(circle at 0% 100%, rgba(196,36,40,.14), transparent 50%), linear-gradient(160deg, #40434b 0%, #33363d 100%); }
.band-slate .rl-marquee::before { background: linear-gradient(90deg, #3a3d44, transparent); }
.band-slate .rl-marquee::after { background: linear-gradient(270deg, #373a41, transparent); }
.band-slate .rl-mq-card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }
.band-slate .show-ring .ring-bg { stroke: rgba(255,255,255,.14); }
.band-slate .sf-k, .band-slate .rl-mq-quote::before, .band-slate .rl-mq-quote::after { color: #ff7b7f; }

/* rich footer (Sept 30 2026) — replaces the centered one-liner on every page */
footer.site.site-rich { text-align: left; padding: 72px 40px 32px; background: var(--ink); color: rgba(255,255,255,.62); font-size: .88rem; }
.foot-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 40px; }
.foot-logo { width: 190px; height: auto; display: block; }
.foot-tag { margin-top: 16px; color: rgba(255,255,255,.8); font-weight: 600; line-height: 1.45; max-width: 28ch; }
.foot-addr { margin-top: 14px; line-height: 1.6; color: rgba(255,255,255,.5); font-size: .82rem; }
.foot-col { display: flex; flex-direction: column; gap: 9px; }
.foot-h { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #ff7b7f; margin-bottom: 6px; }
.foot-col a { color: rgba(255,255,255,.8); text-decoration: none; overflow-wrap: anywhere; }
.foot-col a:hover { color: #fff; }
.foot-rep { color: #fff; font-weight: 600; margin-top: 4px; }
.foot-rep + a { margin-top: -5px; font-size: .84rem; }
.foot-bottom { max-width: var(--max); margin: 48px auto 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; gap: 12px 32px; flex-wrap: wrap; justify-content: space-between; font-size: .74rem; color: rgba(255,255,255,.42); }
.site-rich .footer-disclaimer { margin: 0; padding: 0; border: 0; max-width: 80ch; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { footer.site.site-rich { padding: 56px 20px 28px; } .foot-grid { grid-template-columns: 1fr; gap: 28px; } }

/* closing CTA v3 (Sept 30 2026, Jared: "not attractive") — contained red card on a light bed, no photo */
.cta-card-band { background: var(--cream); padding: 96px 0; border-top: 1px solid var(--border); }
.cta-card { position: relative; overflow: hidden; isolation: isolate; border-radius: 22px; padding: 64px 60px; color: #fff;
  background: radial-gradient(circle at 100% 0%, rgba(255,255,255,.14), transparent 45%), linear-gradient(135deg, #d33a3e 0%, var(--brand) 45%, #9e1d20 100%);
  box-shadow: 0 30px 60px rgba(140,25,28,.25); display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.cta-card::before { content: ''; position: absolute; right: -120px; bottom: -160px; width: 460px; height: 460px; border-radius: 50%; border: 70px solid rgba(255,255,255,.07); z-index: -1; }
.cta-card::after { content: ''; position: absolute; left: -80px; top: -120px; width: 260px; height: 260px; border-radius: 50%; border: 40px solid rgba(255,255,255,.05); z-index: -1; }
.cta-card .eyebrow { color: rgba(255,255,255,.85); }
.cta-card h2 { color: #fff; font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: .98; letter-spacing: -.01em; }
.cta-card .cta-lede { color: rgba(255,255,255,.92); font-size: 1.1rem; line-height: 1.6; margin-top: 18px; max-width: 32rem; }
.cta-card .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.cta-card .btn.cta-btn-light { background: #fff; color: var(--brand); }
.cta-card .btn.cta-btn-light:hover { background: var(--ink); color: #fff; }
.cta-card .btn.cta-btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.7); }
.cta-card .btn.cta-btn-ghost:hover { background: rgba(255,255,255,.14); }
.cta-card .cta-reps { display: grid; gap: 14px; }
.cta-card .rep { box-shadow: 0 16px 36px rgba(60,8,10,.28); }
@media (max-width: 900px) { .cta-card { grid-template-columns: 1fr; padding: 44px 28px; gap: 32px; } .cta-card-band { padding: 64px 0; } }

/* hero KPI strip with six figures (Sept 30 2026: GA4 pageviews moved here from #digital-reach) */
.hero-kpis.six { grid-template-columns: repeat(6,1fr); }
.hero-kpis.six .hero-kpi { padding: 26px 16px; }
.hero-kpis.six .hero-kpi-num { font-size: clamp(1.7rem, 2.4vw, 2.3rem); }
@media (max-width: 900px) { .hero-kpis.six { grid-template-columns: 1fr 1fr; } .hero-kpis.six .hero-kpi:last-child { grid-column: auto; } }

/* slimmed digital reach */
.sosab-slim .sosab-slim-grid { max-width: 960px; margin: 36px auto 0; display: grid; grid-template-columns: 1fr 250px; gap: 32px; align-items: end; }
.sosab-mini { display: grid; gap: 14px; }
.sosab-mini > div { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.sosab-mini b { display: block; font-size: 2rem; font-weight: 800; line-height: 1; color: var(--brand); }
.sosab-mini span { display: block; font-size: .84rem; line-height: 1.4; color: var(--muted); margin-top: 6px; }
.sosab-slim .sosab-src { max-width: 960px; margin: 22px auto 0; text-align: center; }
@media (max-width: 860px) { .sosab-slim .sosab-slim-grid { grid-template-columns: 1fr; } .sosab-mini { grid-template-columns: 1fr 1fr; } }

/* #readership → explorer handoff strip (Sept 30 2026) */
.xp-invite { margin-top: 48px; display: grid; grid-template-columns: 1.1fr 1.3fr auto; gap: 24px 32px; align-items: center; background: var(--cream); border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: 14px; padding: 26px 30px; }
.xp-invite-h { font-weight: 800; font-size: 1.25rem; color: var(--ink); line-height: 1.2; }
.xp-invite-copy p { margin-top: 6px; font-size: .9rem; color: var(--muted); line-height: 1.5; }
.xp-invite-links { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-invite-links a { font-size: .84rem; font-weight: 600; color: var(--ink); text-decoration: none; background: var(--white); border: 1px solid var(--border-strong); border-radius: 100px; padding: 8px 14px; transition: border-color .15s, color .15s; }
.xp-invite-links a:hover { border-color: var(--brand); color: var(--brand); }
.xp-invite-btn { white-space: nowrap; }
@media (max-width: 1000px) { .xp-invite { grid-template-columns: 1fr; } .xp-invite-btn { justify-self: start; } }
@media (max-width: 520px) { .xp-invite { padding: 22px 20px; } .xp-invite-btn { white-space: normal; justify-self: stretch; text-align: center; } }

/* ---- Case studies: two smaller cards under the Matrix feature (Sept 30 2026) ---- */
.case-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.case-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border-strong); border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.case-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(35,37,43,.12); border-color: var(--brand); }
.case-card-img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--light); border-bottom: 1px solid var(--border); }
.case-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .35s ease; }
.case-card:hover .case-card-img img { transform: scale(1.03); }
.case-card-body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.case-card-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .95rem; color: var(--text); margin-bottom: 14px; }
.case-card-brand img { width: 32px; height: 32px; border-radius: 7px; display: block; }
.case-card-brand img.wide { width: auto; height: 30px; border-radius: 0; }
.case-card-name { font-weight: 800; font-size: 1.3rem; line-height: 1.2; color: var(--text); margin-bottom: 10px; }
.case-card-sub { color: var(--muted); font-size: .95rem; line-height: 1.55; }
.case-card-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: auto; padding-top: 22px; }
.case-card-stats b { display: block; color: var(--brand); font-size: 1.9rem; font-weight: 800; line-height: 1; }
.case-card-stats span { display: block; color: var(--muted); font-size: .8rem; margin-top: 6px; max-width: 20ch; }
.case-card .case-cta { margin-top: 20px; }
@media (max-width: 760px) { .case-pair { grid-template-columns: 1fr; } .case-card-body { padding: 22px 20px 24px; } }

/* ---- AB Show page (show.html, Sept 30 2026) ---- */
.show-page-hero { padding: 96px 0 88px; }
.show-deck { color: rgba(255,255,255,.78); font-size: 1.15rem; line-height: 1.6; max-width: 44rem; margin-top: 22px; }
.show-overlap { display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: center; margin-top: 1rem; }
.show-ring.light .ring-bg { stroke: var(--border); }
.show-ring.light .ring-num { color: var(--ink); }
.show-ring.light .ring-num small { color: var(--muted); }
.show-contact { display: flex; gap: 24px; align-items: center; margin-top: 1.8rem; padding: 28px 32px; border: 1px solid var(--border-strong); border-radius: var(--radius); max-width: 640px; background: var(--white); }
.sc-initials { flex: none; width: 72px; height: 72px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; }
.sc-name { font-weight: 800; font-size: 1.3rem; color: var(--text); }
.sc-title { color: var(--muted); font-size: .92rem; margin-top: 2px; }
.sc-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
@media (max-width: 760px) { .show-overlap { grid-template-columns: 1fr; gap: 28px; } .show-overlap .show-ring { max-width: 220px; margin: 0 auto; } .show-contact { flex-direction: column; align-items: flex-start; padding: 22px 20px; } .show-page-hero { padding: 64px 0 56px; } }

/* ---- Homepage slim AB Show banner (replaces the full #show feature, Sept 30 2026) ---- */
.show-strip { background: var(--brand); color: #fff; }
.show-strip a { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 22px 0; color: #fff; text-decoration: none; }
.show-strip .ss-title { font-weight: 800; font-size: 1.35rem; letter-spacing: -.01em; }
.show-strip .ss-bit { font-weight: 600; font-size: .95rem; color: rgba(255,255,255,.88); }
.show-strip .ss-bit { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.35); }
.show-strip .ss-go { margin-left: auto; font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; border: 2px solid rgba(255,255,255,.7); border-radius: 100px; padding: 9px 18px; transition: background .15s ease, color .15s ease; }
.show-strip a:hover .ss-go { background: #fff; color: var(--brand); border-color: #fff; }
@media (max-width: 760px) { .show-strip .ss-bit { padding-left: 0; border-left: 0; flex-basis: 100%; } .show-strip .ss-go { margin-left: 0; } }
.show-overlap h2 + .lede { margin-top: 14px; }

/* ---- Homepage AB Show closing card (replaces .show-strip, Sept 30 2026) ---- */
.show-close { padding: 72px 0; }
.show-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 48px 52px; border-radius: 18px; text-decoration: none; color: #fff; background: radial-gradient(circle at 88% 15%, rgba(196,36,40,.45), transparent 55%), linear-gradient(160deg, #40434b, #33363d); transition: transform .15s ease, box-shadow .15s ease; }
.show-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(35,37,43,.25); }
.show-card-mark { position: absolute; right: -1vw; bottom: -2.2vw; font-weight: 800; font-size: clamp(5rem, 14vw, 12rem); line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.08); pointer-events: none; }
.show-card > span:not(.show-card-mark) { position: relative; }
.show-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.show-card-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.show-card .show-countdown { margin: 0; }
.show-card-title { font-weight: 800; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: .95; letter-spacing: -.02em; text-transform: uppercase; margin-top: 18px; }
.show-card-title span { color: #ff5a5f; }
.show-card-line { font-weight: 700; font-size: 1.1rem; margin-top: 18px; }
.show-card-sub { color: rgba(255,255,255,.72); font-size: 1rem; line-height: 1.6; max-width: 36rem; margin-top: 8px; }
.show-card-go { margin-top: 26px; font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; background: var(--brand); border-radius: 100px; padding: 12px 22px; transition: background .15s ease, color .15s ease; }
.show-card-go::after { content: ' \2192'; }
.show-card:hover .show-card-go { background: #fff; color: var(--brand); }
@media (max-width: 640px) { .show-card { padding: 32px 24px; } .show-close { padding: 48px 0; } }

/* ---- products #reporting: advertiser report + Baxter (Sept 30 2026) ---- */
#reporting { border-top: 1px solid var(--border); }
.rep-head { max-width: 760px; }
.rep-head h2 .accent { color: var(--brand); }
.rep-head .lede { margin-top: 14px; }
.rep-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 56px; margin-top: 44px; align-items: start; }
.rep-shot { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 48px rgba(35,37,43,.18); border: 1px solid var(--border); background: var(--white); }
.rep-shot img { display: block; width: 100%; height: auto; }
.rep-shot figcaption { padding: 14px 18px 16px; font-size: .84rem; color: var(--muted); line-height: 1.5; border-top: 1px solid var(--border); }
.rep-tag { display: inline-block; font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); background: rgba(196,36,40,.08); border-radius: 100px; padding: 4px 10px; margin-right: 8px; }
.rep-note { margin-top: 16px; padding: 16px 18px; border: 1px solid var(--border-strong); border-radius: 10px; font-size: .86rem; color: var(--muted); line-height: 1.55; background: var(--light); }
.rep-note b { color: var(--text); }
.rep-stats { border-top: 2px solid var(--text); }
.rep-stat { padding: 22px 0; border-bottom: 1px solid var(--border); }
.rep-stat .n { font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums; }
.rep-stat .l { margin-top: 10px; font-size: .95rem; color: var(--muted); line-height: 1.5; }
.rep-stat .l b { color: var(--text); }
.rep-stats .src { margin-top: 14px; }
@media (max-width: 900px) { .rep-grid { grid-template-columns: 1fr; gap: 36px; } }
/* homepage #reporting: points column instead of Baxter stats */
.rep-points { border-top: 2px solid var(--text); }
.rep-point { padding: 20px 0; border-bottom: 1px solid var(--border); }
.rp-k { font-weight: 800; font-size: 1.05rem; color: var(--text); }
.rp-v { margin-top: 6px; font-size: .93rem; color: var(--muted); line-height: 1.55; }
.rep-more { margin-top: 24px; }
#case-studies.band.stone { border-top: 1px solid var(--border); }

/* #facilities wall on wide desktops (Jared, Sept 30 2026): break out of the 1180px column to
   use the full width, 6 columns, slightly taller rows, plus three xl-only tiles (24 cells, 4 rows). */
.fac-grid .xl-only { display: none; }
@media (min-width: 1440px) {
  #facilities .wrap { max-width: min(1760px, 100vw); }
  #facilities .fac-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 230px; }
}

/* #readership emphasis (Charli Muchow, Oct 5 2026): the conference names carry AB red in the
   headline and on their two counts; the "Who reads AB" label is sized up so it doesn't get lost. */
#readership h2 .hl { color: var(--brand); }
#readership .stat.stat-hl .n { color: var(--brand); }
.eyebrow.eyebrow-lg { font-size: 1rem; letter-spacing: .14em; margin-bottom: 16px; }
@media (max-width: 520px) { .eyebrow.eyebrow-lg { font-size: .86rem; } }

/* photo heroes: inline emphasis and small labels must stay light on the dark photo wash
   (Jared, Sept 30 2026 — the reader-voices claim rendered in body-dark on the photo) */
.hero.hero-photo strong, .hero.hero-photo b { color: #fff; }
.hero.hero-photo .eyebrow { color: rgba(255,255,255,.78); }
.hero.hero-photo .accent { color: #ff5a5f; }            /* AB red fails on the dark wash (2.65:1); brightened red = family small-red-on-dark fix */
.hero.hero-photo .btn.ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.hero.hero-photo .btn.ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero.hero-photo .src { color: rgba(255,255,255,.62) !important; }
.hero.hero-photo .photo-credit { color: rgba(255,255,255,.7); }

/* ---- Case-study card concept graphics (Oct 1 2026: replace the ad/cover images) ---- */
.case-card-img.cc-art { position: relative; display: flex; align-items: center; padding: 28px 30px; color: #fff; overflow: hidden; }
.cc-playtech { background: radial-gradient(circle at 88% 30%, rgba(254,76,12,.42), transparent 55%), linear-gradient(160deg, #2c2f36, #1e2025); gap: 20px; justify-content: space-between; }
.cc-playtech .cca-steps { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; display: flex; flex-direction: column; gap: 18px; }
.cc-playtech .cca-steps::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(#fe4c0c, rgba(254,76,12,.25)); }
.cc-playtech .cca-steps li { position: relative; }
.cc-playtech .cca-steps li::before { content: ''; position: absolute; left: -22px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #fe4c0c; box-shadow: 0 0 0 4px rgba(254,76,12,.22); }
.cc-playtech .cca-steps span { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.cc-playtech .cca-steps b { display: block; font-size: 1.02rem; font-weight: 700; margin-top: 2px; }
.cc-playtech .cca-result { text-align: center; flex: none; }
.cc-playtech .cca-result b { display: block; font-size: clamp(5rem, 11vw, 7.5rem); font-weight: 800; line-height: .85; color: #ff6a33; letter-spacing: -.04em; }
.cc-playtech .cca-result span { display: block; margin-top: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.82); line-height: 1.4; }
.cc-dsb { flex-direction: column; align-items: stretch; justify-content: center; gap: 16px; background: radial-gradient(circle at 15% 10%, rgba(36,110,77,.5), transparent 55%), linear-gradient(160deg, #1f2a26, #15191a); }
.cc-dsb .cca-board-top { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.14); padding-bottom: 10px; }
.cc-dsb .cca-board-top span { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.cc-dsb .cca-board-top b { font-size: 1.5rem; font-weight: 800; color: #5fd39b; text-shadow: 0 0 18px rgba(95,211,155,.45); letter-spacing: -.01em; }
.cc-dsb .cca-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cc-dsb .cca-grid span { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; line-height: 1.2; color: rgba(255,255,255,.88); background: rgba(255,255,255,.05); border: 1px solid rgba(95,211,155,.22); border-radius: 8px; padding: 10px 10px; min-height: 48px; }
.cc-dsb .cca-grid i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #5fd39b; box-shadow: 0 0 8px rgba(95,211,155,.8); }
.case-card:hover .cc-art { filter: brightness(1.06); }
@media (max-width: 420px) { .case-card-img.cc-art { padding: 20px; } .cc-dsb .cca-grid span { font-size: .7rem; padding: 8px; min-height: 42px; } .cc-playtech .cca-steps b { font-size: .9rem; } }
.cc-dsb > * { width: 100%; }
.cc-dsb .cca-board-top { gap: 16px; }
@media (max-width: 420px) { .cc-dsb { gap: 10px; } .cc-dsb .cca-board-top b { font-size: 1.2rem; } }

/* ---- Case cards, take 2 (Oct 1 2026): Matrix-style creative stacks on a dark panel ---- */
.case-card-img.cc-stack { position: relative; overflow: hidden; background: radial-gradient(circle at 80% 20%, rgba(196,36,40,.35), transparent 55%), linear-gradient(160deg, #2c2f36, #1c1e22); }
.cc-stack-dsb { background: radial-gradient(circle at 80% 20%, rgba(36,110,77,.5), transparent 55%), linear-gradient(160deg, #263029, #171a19) !important; }
.cc-stack-pt { background: radial-gradient(circle at 80% 20%, rgba(254,76,12,.35), transparent 55%), linear-gradient(160deg, #2c2f36, #1c1e22) !important; }
.cc-stack img { position: absolute; display: block; box-shadow: 0 18px 36px rgba(0,0,0,.5); transition: transform .35s ease; width: auto; height: auto; object-fit: initial; }
.cc-stack .cs-cap { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: .66rem; color: rgba(255,255,255,.55); }
/* PlayTech: landscape print ad behind-left, tall email in front-right */
.cc-stack-pt .cs-back { width: 58%; left: 7%; top: 22%; transform: rotate(-5deg); }
.cc-stack-pt .cs-front { height: 80%; right: 12%; top: 7%; transform: rotate(3deg); border-radius: 4px; }
/* DSB: cover behind-left, full-page ad in front-right */
.cc-stack-dsb .cs-back { height: 76%; left: 17%; top: 11%; transform: rotate(-6deg); }
.cc-stack-dsb .cs-front { height: 84%; right: 17%; top: 6%; transform: rotate(3deg); }
.case-card:hover .cc-stack .cs-front { transform: rotate(0deg) scale(1.03); }
.case-card:hover .cc-stack .cs-back { transform: rotate(-3deg); }
/* case cards: same uppercase display treatment as the Matrix card title (Oct 1 2026) */
.case-card-name { text-transform: uppercase; font-weight: 800; font-size: 1.22rem; line-height: 1.15; letter-spacing: -.005em; }

/* specs.html (Oct 5 2026) — on-site ad specs, rebuilt from the old sales site's web-only spec pages */
.spec-toc { margin-bottom: 44px; }
.spec-stack { display: grid; gap: 22px; }
.spec-card { padding: 32px; }
.spec-card > .eyebrow { margin-bottom: 8px; }
.spec-card h3 { margin-bottom: 12px; }
.spec-card > p { color: var(--muted); max-width: 72ch; line-height: 1.6; }
.spec-card h4 { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text); margin: 22px 0 6px; }
.spec-card ul { padding-left: 1.1rem; font-size: .93rem; line-height: 1.55; }
.spec-card li { margin: .35rem 0; }
.spec-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; }
.spec-cols > div { min-width: 0; }
.spec-card .spec-more { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); font-size: .9rem; font-weight: 600; color: var(--text); max-width: none; }
@media (max-width: 760px) { .spec-cols { grid-template-columns: 1fr; } .spec-card { padding: 24px 20px; } }

/* Oct 7 2026 — nine nav items (Specs added per Charli). Keep every item on one line and tighten
   the spacing on narrow desktops so "AB Show" doesn't wrap before the burger takes over at 900px. */
.nav-links a { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1100px) { .nav-links { gap: 14px; } .nav-links a { font-size: .82rem; } }

/* Oct 13 2026 — #readership grows to eight tiles (High School 13,736 + Parks 6,090 added per Diane):
   4 × 2 on desktop, 2 × 4 on tablets, single column on phones (grid4's 860px rule). */
@media (min-width: 861px) and (max-width: 1100px) { #readership .rl-grid { grid-template-columns: repeat(2,1fr); } }

/* Oct 13 2026 — Custom Email list builder (products #custom-email-builder, Diane). */
.ce-builder { margin-top: 22px; border: 1px solid var(--border); border-radius: var(--radius, 14px); background: var(--cream, #faf7f5); padding: 22px 22px 16px; }
.ce-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ce-kicker { font-weight: 700; font-size: 1rem; color: var(--text); }
.ce-help { margin: 4px 0 0; font-size: .86rem; color: var(--muted); }
.ce-tabs { display: inline-flex; background: var(--white); border: 1px solid var(--border-strong); border-radius: 100px; padding: 3px; }
.ce-tab { appearance: none; border: 0; background: none; font: inherit; font-size: .82rem; font-weight: 600; color: var(--muted); padding: 7px 14px; border-radius: 100px; cursor: pointer; }
.ce-tab[aria-selected="true"] { background: var(--brand); color: #fff; }
.ce-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ce-chips .chip { font-size: .8rem; padding: 7px 13px; }
.ce-result { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.ce-num { font-size: 1.9rem; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.ce-of { font-size: .88rem; color: var(--muted); }
.ce-actions { display: flex; align-items: center; gap: 12px; }
.ce-clear { appearance: none; border: 0; background: none; font: inherit; font-size: .84rem; color: var(--muted); text-decoration: underline; cursor: pointer; }
.ce-src { margin: 12px 0 0; font-size: .76rem; }
.ce-send { padding: 11px 20px; font-size: .8rem; }
.ce-rate { margin-top: 14px; padding: 12px 14px; background: var(--white); border: 1px solid var(--border); border-radius: 10px; font-size: .9rem; font-weight: 600; color: var(--text); }
.ce-rate a { margin-left: 6px; font-weight: 600; color: var(--brand); white-space: nowrap; }
.ce-rate b { font-size: 1.15rem; color: var(--brand); }
.ce-rate-lbl { color: var(--muted); font-weight: 600; }
.ce-rate-note { display: block; margin-top: 4px; font-size: .8rem; font-weight: 500; color: var(--muted); }
#custom-email-builder > .ce-actions { margin-top: 14px; }