/* ════════════════════════════════════════════════════════════════
 * BiV Design System
 * Single shared stylesheet. Loaded by every BiV surface via <link>.
 *
 * Tokens > primitives > patterns > utilities.
 *
 * Locked decisions: white surface, NHG with 4 weights, zero negative
 * tracking, sans-tabular for all human-readable numbers (money, days,
 * counts, percentages — everywhere), mono reserved for code-like
 * values only (paths, IDs, hashes, timestamps, terminal output),
 * seven-color brand-accent rotation handled by biv-accent.js.
 * ════════════════════════════════════════════════════════════════ */


/* ════ Fonts ════ */
@font-face { font-family: 'NHG'; src: url('./brand-review/fonts/NeueHaasDisplayRoman.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'NHG'; src: url('./brand-review/fonts/NeueHaasDisplayMediu.ttf')  format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'NHG'; src: url('./brand-review/fonts/NeueHaasDisplayBold.ttf')   format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'NHG'; src: url('./brand-review/fonts/NeueHaasDisplayBlack.ttf')  format('truetype'); font-weight: 900; font-display: swap; }


/* ════ Tokens ════ */
:root {
  /* Surface neutrals */
  --bg:       #ffffff;
  --panel:    #fafafa;
  --ink:      #0c0c0d;
  --sec:      #65656a;
  --tert:     #a5a5a8;
  --bord:     #e4e4e7;
  --bord-lt:  #f0f0f2;

  /* Brand accent — runtime-injected by biv-accent.js. Default violet. */
  --accent:    #5533ff;
  --accent-bg: #ede9ff;

  /* Status semantics */
  --ok:    #16a34a;  --ok-bg:   #f0fdf4;
  --warn:  #ca8a04;  --warn-bg: #fefce8;
  --bad:   #c01818;  --bad-bg:  #fef2f2;
  --info:  #2563eb;  --info-bg: #eff6ff;

  /* Type scale */
  --t-display: 56px;
  --t-h1:      28px;
  --t-h2:      18px;
  --t-h3:      14px;
  --t-body:    14px;
  --t-meta:    12px;
  --t-micro:   11px;

  /* Fonts */
  --f-sans: 'NHG','Inter','SF Pro Text','Helvetica Neue',Helvetica,sans-serif;
  --f-mono: 'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace;

  /* Weights — 4 total. No 300, no 600. */
  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;
  --w-black:   900;

  /* Letter-spacing — zero negative tracking. Tracked uppercase = 0.05em. */
  --ls-tracked: 0.05em;

  /* Spacing scale (4/8 grid) */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  20px;
  --s6:  24px;
  --s8:  32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;
}


/* ════ Reset ════ */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }


/* ════ Base ════ */
html { scroll-behavior: smooth; }

body {
  font-family: var(--f-sans);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum' 1;
}

a { color: inherit; text-decoration: none; }
a.link {
  color: var(--accent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
a.link:hover { border-bottom-color: var(--accent); }

.skip-link {
  position: fixed;
  top: var(--s2);
  left: var(--s2);
  z-index: 1000;
  padding: var(--s2) var(--s3);
  color: var(--bg);
  background: var(--ink);
  transform: translateY(calc(-100% - var(--s4)));
  transition: transform 0.15s ease;
}
.skip-link:focus { transform: translateY(0); }

strong, b { font-weight: var(--w-bold); }
em, i { font-style: italic; }

p { line-height: 1.6; }

code, kbd, samp, pre {
  font-family: var(--f-mono);
  font-size: 0.92em;
}
code {
  background: var(--bord-lt);
  padding: 1px 5px;
}


/* ════ Document chrome ════ */

/* Document header: title + meta */
.doc-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--ink);
  padding-bottom: var(--s6);
  margin-bottom: var(--s12);
}
.doc-h h1 {
  font-size: var(--t-display);
  font-weight: var(--w-black);
  line-height: 1;
}
.doc-h .subtitle {
  font-size: var(--t-h2);
  font-weight: var(--w-regular);
  color: var(--sec);
  margin-top: var(--s2);
}
.doc-h .meta {
  font-size: var(--t-meta);
  color: var(--sec);
  text-align: right;
  line-height: 1.6;
}

/* Section: chapter-mark numeral + heading + 2px ink underline */
.section {
  margin-bottom: var(--s10);
  scroll-margin-top: var(--s10);
}
.section-h {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: end;
  gap: var(--s6);
  border-bottom: 2px solid var(--ink);
  padding-bottom: var(--s4);
  margin-bottom: var(--s8);
}
.section-h .num {
  font-size: var(--t-h1);
  font-weight: var(--w-black);
  color: var(--tert);
  line-height: 1.1;
}
.section-h h2 {
  font-size: var(--t-h1);
  font-weight: var(--w-black);
  line-height: 1.1;
}

/* Sub-section heading */
.sub { margin-bottom: var(--s12); }
.sub > h3 {
  font-size: var(--t-h2);
  font-weight: var(--w-bold);
  margin-bottom: var(--s3);
}

/* Standalone headings — same rules outside .section/.sub wrappers */
h1 { font-size: var(--t-h1);     font-weight: var(--w-black);   line-height: 1.1; }
h2 { font-size: var(--t-h2);     font-weight: var(--w-bold); }
h3 { font-size: var(--t-h3);     font-weight: var(--w-bold); }


/* ════ Prose helpers ════ */
.lede {
  font-size: var(--t-h3);
  color: var(--sec);
  line-height: 1.6;
  margin-bottom: var(--s8);
}
.note {
  font-size: var(--t-body);
  color: var(--sec);
  line-height: 1.6;
  margin-bottom: var(--s4);
}
.subtitle {
  font-size: var(--t-h2);
  font-weight: var(--w-regular);
  color: var(--sec);
  letter-spacing: 0;
}


/* ════ Lists ════ */
ul.bullet-emdash,
ul.bullet-emdash li { list-style: none; }
ul.bullet-emdash { padding-left: 20px; }
ul.bullet-emdash li { margin-bottom: var(--s2); line-height: 1.6; position: relative; }
ul.bullet-emdash li::before {
  content: '\2014';
  position: absolute;
  left: -20px;
  color: var(--sec);
}


/* ════════════════════════════════════════════════════════════════
 * Primitives
 * ════════════════════════════════════════════════════════════════ */


/* ────── .label-cap ────── */
/* Tracked uppercase label. The 15+ inline copies in legacy CSS
 * collapse into this single class.
 */
.label-cap {
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--sec);
}


/* ────── .tag ────── */
/* Single chip primitive. Default inline-block, content-sized — use
 * inline next to a metric label or in prose. Status modifiers for
 * ok/warn/bad/info. Pill-shaped; no border on default.
 *
 * .tag.is-block — when used in a grid column (e.g. .row's third
 * slot), stretches to full column width with centered text so a
 * stack of OK/AGING/LATE renders as identical-size boxes, aligned.
 */
.tag {
  display: inline-block;
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  padding: 3px 10px;
  color: var(--sec);
  background: var(--bord-lt);
  border-radius: 999px;
}
.tag.is-block {
  display: block;
  width: 100%;
  text-align: center;
  padding: 3px 0;
}
.tag.is-ok    { color: var(--ok);    background: var(--ok-bg); }
.tag.is-warn  { color: var(--warn);  background: var(--warn-bg); }
.tag.is-bad   { color: var(--bad);   background: var(--bad-bg); }
.tag.is-info  { color: var(--info);  background: var(--info-bg); }


/* ────── .metric ────── */
/* Display number + label. Label sits ABOVE the number as a 14px h3
 * (so it anchors, not floats). No mono delta indicator. When delta
 * matters, compose with a .tag inline at the metric head.
 */
.metric {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.metric .l {
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  color: var(--ink);
}
.metric .v {
  font-size: var(--t-display);
  font-weight: var(--w-black);
  line-height: 1;
  font-feature-settings: 'tnum' 1;
}
.metric .v.is-ok   { color: var(--ok); }
.metric .v.is-warn { color: var(--warn); }
.metric .v.is-bad  { color: var(--bad); }
.metric .v.is-info { color: var(--info); }

.metric.compact .v { font-size: var(--t-h1); }   /* 28px */

/* Metric with inline delta tag */
.metric.with-delta { gap: 0; }
.metric.with-delta .l {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s3);
}


/* ────── .row ────── */
/* Horizontal data record. Four standard zones via CSS grid:
 *   1. identity   (name + optional context line)
 *   2. progress   (status indicator / tag / mid-content)
 *   3. primary    (mono value, right-aligned)
 *   4. secondary  (mono value, right-aligned)
 *
 * Column widths set by surface via data-context modifiers below;
 * default is a balanced 4-zone layout.
 */
.row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(0, 1.6fr) 80px 80px;
  gap: var(--s4);
  align-items: center;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--bord-lt);
}
.row:last-child { border-bottom: none; }

.row .nm {
  font-size: var(--t-body);
  font-weight: var(--w-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row .nm .meta {
  display: block;
  color: var(--sec);
  font-size: var(--t-meta);
  font-weight: var(--w-regular);
  margin-top: 2px;
}

.row .v {
  font-size: var(--t-body);
  font-weight: var(--w-bold);
  text-align: right;
  color: var(--ink);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.row .v.dim       { color: var(--sec); }
.row .v.is-ok     { color: var(--ok); }
.row .v.is-warn   { color: var(--warn); }
.row .v.is-bad    { color: var(--bad); }


/* ────── .callout ────── */
/* Accent-tinted side-rule block for emphasis / notes / warnings.
 */
.callout {
  border-left: 3px solid var(--accent);
  background: var(--accent-bg);
  padding: var(--s4) var(--s5);
  margin: var(--s5) 0;
}
.callout .l {
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--accent);
  margin-bottom: var(--s1);
  display: block;
}
.callout.is-ok    { border-left-color: var(--ok);    background: var(--ok-bg); }
.callout.is-ok .l { color: var(--ok); }
.callout.is-warn  { border-left-color: var(--warn);  background: var(--warn-bg); }
.callout.is-warn .l { color: var(--warn); }
.callout.is-bad   { border-left-color: var(--bad);   background: var(--bad-bg); }
.callout.is-bad .l { color: var(--bad); }


/* ────── .card ────── */
/* Bordered container. Use sparingly — most data wants a pattern
 * (crit-strip, hero, table), not a card. Cards are right when each
 * item is independently interactive (clickable deal, sub-surface).
 */
.card {
  border: 1px solid var(--bord);
  background: var(--bg);
  padding: var(--s5) var(--s6);
  transition: border-color 0.15s;
}
.card.hoverable:hover { border-color: var(--ink); }


/* ════════════════════════════════════════════════════════════════
 * Patterns
 * ════════════════════════════════════════════════════════════════ */


/* ────── P1 · Crit-strip ────── */
/* Inline label + value pairs, mono values for operator-dense scan.
 * Labels are 14px medium (sans, tracked), values 18px black (mono).
 * For dashboard headers and dense state callouts.
 */
.crit-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s8);
  padding: var(--s4) 0;
  align-items: baseline;
}
.crit-strip .crit {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
}
.crit-strip .crit .l {
  font-size: var(--t-h3);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--sec);
}
.crit-strip .crit .v {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  color: var(--ink);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.crit-strip .crit .v.is-ok    { color: var(--ok); }
.crit-strip .crit .v.is-warn  { color: var(--warn); }
.crit-strip .crit .v.is-bad   { color: var(--bad); }


/* ────── P2 · Hero panel ────── */
/* Single display number + supporting narrative prose below.
 * Heavy ink rule under the number separates hero from prose.
 */
.hero-panel { border: 1px solid var(--bord); }
.hero-panel .h-block {
  padding: var(--s5) var(--s6) var(--s6);
  border-bottom: 2px solid var(--ink);
}
.hero-panel .h-block .l {
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  margin-bottom: var(--s2);
}
.hero-panel .h-block .v {
  font-size: var(--t-display);
  font-weight: var(--w-black);
  line-height: 1;
  font-feature-settings: 'tnum' 1;
}
.hero-panel .h-prose {
  padding: var(--s4) var(--s6);
  font-size: var(--t-meta);
  color: var(--sec);
  line-height: 1.6;
}


/* ────── P3 · Comparison table ────── */
/* Side-by-side feature-or-tier comparison. Sans-tabular for money
 * (editorial feel — not mono operator data). First/last cells
 * inline-padded so text isn't pinned to walls.
 */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-h3);
}
.compare-table th {
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--sec);
  padding: var(--s2) 0;
  border-bottom: 2px solid var(--ink);
  text-align: right;
}
.compare-table th:first-child { text-align: left; padding-left: var(--s2); }
.compare-table th:last-child  { padding-right: var(--s2); }
.compare-table td {
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--bord-lt);
}
.compare-table td:first-child { padding-left: var(--s2); }
.compare-table td:last-child  { padding-right: var(--s2); }
.compare-table td.money {
  text-align: right;
  font-weight: var(--w-bold);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.compare-table td.money.empty {
  color: var(--tert);
  font-weight: var(--w-regular);
}
.compare-table tr.total td {
  border-bottom: none;
  padding-top: var(--s4);
  font-weight: var(--w-bold);
}
.compare-table tr.total td.money { font-weight: var(--w-black); }


/* ════════════════════════════════════════════════════════════════
 * Utilities
 * ════════════════════════════════════════════════════════════════ */


/* Status text color modifiers — applicable to any element */
.is-ok    { color: var(--ok); }
.is-warn  { color: var(--warn); }
.is-bad   { color: var(--bad); }
.is-info  { color: var(--info); }

/* Mono text override — for inline IDs, hashes, paths, codes */
.mono { font-family: var(--f-mono); font-feature-settings: 'tnum' 1; }

/* Tabular numerals — apply to sans elements that need column-aligned digits */
.tnum { font-feature-settings: 'tnum' 1, 'lnum' 1; }

/* Sec / tert text */
.sec  { color: var(--sec); }
.tert { color: var(--tert); }

/* Density mode — apply to body or container. Bumps body to 13,
 * compresses row padding for operator-dense surfaces (biv-app).
 */
[data-density="compact"] {
  font-size: 13px;
}
[data-density="compact"] .row { padding: var(--s2) 0; }
[data-density="compact"] .row .nm { font-size: 13px; }
[data-density="compact"] .crit-strip { gap: var(--s5); padding: var(--s3) 0; }


/* ════════════════════════════════════════════════════════════════
 * Extended chrome
 * ════════════════════════════════════════════════════════════════ */


/* ────── .doc-header ────── */
/* Top wordmark bar. Distinct from .doc-h (heavy title hero).
 * Use on proposals, reports, biv-systems landing — every surface
 * that has a wordmark + hairline rule above the document title.
 * Wordmark height configurable via --doc-wordmark-h. */
.doc-header {
  display: flex;
  align-items: center;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--bord);
}
.doc-header.is-bare { border-bottom: none; }


/* ────── .wordmark ────── */
/* The BiV mark. Height inherits from --doc-wordmark-h (60px default).
 * Anchor inside is clickable for "back to top" — line-height 0
 * removes inline-image whitespace. */
:root { --doc-wordmark-h: 60px; }
.wordmark { line-height: 0; }
.wordmark a { cursor: pointer; display: inline-block; line-height: 0; }
.wordmark img {
  height: var(--doc-wordmark-h);
  max-height: var(--doc-wordmark-h);
  width: auto;
}


/* ────── .doc-hero ────── */
/* Left-aligned document title + lead paragraph. Distinct from .doc-h
 * (which has title + subtitle + right-aligned meta) and from
 * .hero-center (centered landing). Used by rate-card, consulting,
 * any single-pitch doc that opens with a title and one-paragraph lede. */
.doc-hero {
  padding: var(--s8) 0 var(--s5);
  border-bottom: 2px solid var(--ink);
  margin-bottom: var(--s6);
}
.doc-hero h1 {
  font-size: clamp(30px, 4.6vw, 48px);
  font-weight: var(--w-black);
  line-height: 1.05;
  text-wrap: balance;
  margin: 0;
}
.doc-hero .lead {
  font-size: var(--t-h2);
  line-height: 1.55;
  color: var(--sec);
  margin-top: var(--s3);
}


/* ────── .hero-center ────── */
/* Centered marketing-landing hero. Used on biv-systems index.
 * Wordmark + tagline + subtitle stacked on white. */
.hero-center { text-align: center; padding: var(--s16) 0; }
.hero-center .hero-wordmark { height: clamp(48px, 8vh, 80px); width: auto; margin-bottom: var(--s6); }
.hero-center .hero-tagline {
  font-size: clamp(16px, 2vh, 22px);
  font-weight: var(--w-regular);
  max-width: 600px;
  margin: 0 auto var(--s3);
  line-height: 1.6;
  text-wrap: balance;
}
.hero-center .hero-subtitle { font-size: var(--t-h3); color: var(--sec); }


/* ────── .sub-head ────── */
/* Section-head row: title left, optional note right, 2px ink rule below.
 * Used in rate-card "À La Carte / Bundle / Volume" sections, anywhere
 * a chunk needs a titled header inside a wider section. */
.sub-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--ink);
  margin-bottom: var(--s3);
}
.sub-head h3,
.sub-head .sub-head-title {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  margin: 0;
}
.sub-head .sub-head-note {
  font-size: var(--t-meta);
  color: var(--sec);
  max-width: 56ch;
  text-align: right;
}
@media (max-width: 720px) {
  .sub-head { flex-wrap: wrap; }
  .sub-head .sub-head-note { text-align: left; }
}


/* ────── .nav-sticky ────── */
/* Sticky top nav under a wordmark — brand-review surfaces.
 * Z-index 100 sits above body content but below modals (1000+). */
.nav-sticky {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 100;
  border-bottom: 1px solid var(--bord);
  display: flex;
  align-items: flex-end;
  gap: var(--s6);
}
.nav-sticky a {
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  color: var(--ink);
  padding: var(--s4) var(--s4) var(--s3);
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s;
}
.nav-sticky a:hover { border-bottom-color: var(--accent); }


/* ────── .breadcrumb ────── */
.breadcrumb { font-size: var(--t-body); margin-bottom: var(--s3); }
.breadcrumb a { color: var(--sec); transition: color 0.15s; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .bc-current { color: var(--ink); font-weight: var(--w-medium); }
.breadcrumb .bc-sep { margin: 0 var(--s2); color: var(--tert); }


/* ────── .toc ────── */
/* Table-of-contents card. Border + body. */
.toc { border: 1px solid var(--bord); padding: var(--s6) var(--s6); margin-bottom: var(--s12); }
.toc .toc-label {
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--sec);
  margin-bottom: var(--s3);
}
.toc a { display: block; font-size: var(--t-body); color: var(--ink); padding: var(--s1) 0; }
.toc a:hover { color: var(--accent); }
.toc a.toc-indent { padding-left: var(--s4); color: var(--sec); }


/* ────── .pagination, .pg-btn ────── */
.pagination { display: flex; align-items: center; gap: var(--s1); }
.pg-btn {
  font-family: inherit;
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  padding: var(--s1) var(--s3);
  border: 1px solid var(--bord);
  background: var(--bg);
  color: var(--sec);
  cursor: pointer;
  font-feature-settings: 'tnum' 1;
  transition: border-color 0.15s, color 0.15s;
}
.pg-btn:hover { border-color: var(--accent); color: var(--accent); }
.pg-btn.is-active { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.pg-btn.is-disabled { color: var(--tert); cursor: default; opacity: 0.5; }
.pg-btn.is-disabled:hover { border-color: var(--bord); color: var(--tert); }


/* ────── .shortcut-hint ────── */
.shortcut-hint { font-size: var(--t-meta); color: var(--sec); }
.shortcut-hint kbd {
  font-family: inherit;
  font-size: var(--t-meta);
  font-weight: var(--w-bold);
  padding: 2px 6px;
  border: 1px solid var(--bord);
  background: var(--panel);
}


/* ════════════════════════════════════════════════════════════════
 * Extended prose & lists
 * ════════════════════════════════════════════════════════════════ */


/* ────── .bullet-middot, .bullet-dot, .bullet-dot-lg ────── */
ul.bullet-middot { list-style: none; padding-left: 16px; }
ul.bullet-middot li { margin-bottom: 6px; font-size: var(--t-body); line-height: 1.6; position: relative; }
ul.bullet-middot li::before {
  content: '\00B7';
  position: absolute;
  left: -12px;
  color: var(--sec);
  font-weight: var(--w-black);
}

ul.bullet-dot { list-style: none; padding-left: 0; }
ul.bullet-dot li { font-size: 13px; line-height: 1.55; margin-bottom: 10px; padding-left: 14px; position: relative; }
ul.bullet-dot li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
ul.bullet-dot-lg li { font-size: var(--t-body); }


/* ────── .doc-defs (definition list) ────── */
/* Label-cap term over body desc. Spaced. */
.doc-defs .doc-def { margin-bottom: var(--s4); }
.doc-defs .doc-def:last-child { margin-bottom: 0; }
.doc-defs .doc-def-term {
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--sec);
  margin-bottom: 2px;
}
.doc-defs .doc-def-desc { font-size: var(--t-body); line-height: 1.5; }


/* ════════════════════════════════════════════════════════════════
 * Extended primitives
 * ════════════════════════════════════════════════════════════════ */


/* ────── .tag — extended modifiers ────── */
/* .is-outline:    bordered chip, no fill (report filter chips)
 * .is-accent:     accent-colored border + text
 * .is-clickable:  cursor + hover-accent
 * .is-active:     active filter (color + bg tint) */
.tag.is-outline {
  border: 1px solid var(--bord);
  background: transparent;
  color: var(--ink);
}
.tag.is-accent {
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
}
.tag.is-clickable {
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.tag.is-clickable:hover { border-color: var(--accent); color: var(--accent); }
.tag.is-active { border: 1px solid var(--accent); color: var(--accent); background: var(--accent-bg); }


/* ────── .label-cap status variants ────── */
.label-cap.is-ok   { color: var(--ok); }
.label-cap.is-warn { color: var(--warn); }
.label-cap.is-bad  { color: var(--bad); }
.label-cap.is-info { color: var(--info); }


/* ────── .metric — extended with .d descriptor row ────── */
/* .l is the label above (14px h3 700). .v is the display value.
 * .d is the descriptor under the value (13px sec) — used by report
 * stat cards: "across 5 platforms", "combined playlist followers". */
.metric .d {
  font-size: 13px;
  color: var(--sec);
  margin-top: var(--s1);
  line-height: 1.4;
}


/* ────── .dot-indicator ────── */
/* Status dot + inline text label. e.g. "● Placed", "● Pending". */
.dot-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-body); }
.dot-indicator::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--sec);
}
.dot-indicator.is-ok::before   { background: var(--ok); }
.dot-indicator.is-warn::before { background: var(--warn); }
.dot-indicator.is-bad::before  { background: var(--bad); }
.dot-indicator.is-info::before { background: var(--info); }


/* ────── .accent-dot ────── */
/* Small inline accent-colored mark. */
.accent-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
  vertical-align: middle;
}


/* ────── Form primitives ────── */
/* .form-b on a wrapper applies brutalist input styling to descendants.
 * No rounded chrome on inputs; checkbox/radio stay circular (mark shape). */
.form-b input[type="text"],
.form-b textarea,
.form-b select {
  font-family: inherit;
  font-size: var(--t-body);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--bord);
  background: var(--bg);
  color: var(--ink);
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}
.form-b input[type="text"]:focus,
.form-b textarea:focus,
.form-b select:focus { border-color: var(--ink); }
.form-b textarea { resize: vertical; min-height: 80px; }
.form-b select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2365656a' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: var(--s8);
}
.form-group { margin-bottom: var(--s4); }
.form-label {
  display: block;
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--sec);
  margin-bottom: 6px;
}
.form-check {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-body);
  margin-bottom: var(--s2);
  cursor: pointer;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--bord);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  background: var(--bg);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.form-check input[type="checkbox"]:hover,
.form-check input[type="radio"]:hover { border-color: var(--accent); }
.form-check input[type="checkbox"]:checked,
.form-check input[type="radio"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}


/* ════════════════════════════════════════════════════════════════
 * Extended patterns
 * ════════════════════════════════════════════════════════════════ */


/* ────── P3b · Feature-dot comparison ────── */
/* Side-by-side feature matrix with dot indicators per tier.
 * Sibling to P3 (text-cell compare-table). */
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr repeat(var(--cols, 3), 100px);
  font-size: 13px;
  margin-bottom: var(--s2);
}
.cg-header {
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--sec);
  padding: var(--s3) 0;
  border-bottom: 2px solid var(--bord);
  text-align: left;
}
.cg-header.cg-tier { text-align: center; }
.cg-cell {
  padding: 9px 0;
  border-bottom: 1px solid var(--bord-lt);
  text-align: center;
}
.cg-cell.feature { font-weight: var(--w-regular); color: var(--ink); text-align: left; }
.dot-yes, .dot-no { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot-yes { background: var(--accent); }
.dot-no { background: var(--bord); }


/* ────── P4 · Tier Pricing ────── */
/* Multi-tier pricing card grid with subgrid row alignment so labels,
 * names, prices, and timeline rows line up across all tier cards
 * regardless of body-text length. */
.tier-cards {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  grid-template-rows: repeat(7, auto);
  gap: 0 var(--s6);
  margin-bottom: var(--s8);
}
.tier-card {
  border: 1px solid var(--bord);
  padding: var(--s8);
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 7;
}
.tier-label {
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--sec);
  margin-bottom: var(--s2);
}
.tier-name {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  align-self: end;
  padding-bottom: var(--s1);
}
.tier-price {
  font-size: var(--t-h1);
  font-weight: var(--w-black);
  font-feature-settings: 'tnum' 1;
  align-self: start;
  padding-bottom: var(--s4);
}
.tier-divider {
  border: none;
  border-top: 1px solid var(--bord-lt);
  align-self: center;
}
.tier-includes {
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--tert);
  padding-top: var(--s4);
  padding-bottom: var(--s3);
  align-self: start;
}
.tier-timeline {
  font-size: var(--t-meta);
  font-weight: var(--w-medium);
  color: var(--sec);
  padding-top: var(--s4);
  border-top: 1px solid var(--bord-lt);
  align-self: end;
}


/* ────── P5 · Pricing Strip ────── */
/* Subgrid pricing strip — N cells, each cell follows the same
 * label → price → meta vertical order so prices line up across cells.
 * --cols sets the column count (default 3). Use for bundle pricing,
 * volume discounts, anywhere a money-grid is the pattern. */
.strip {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  grid-template-rows: auto auto auto;
  gap: 0;
  border-left: 1px solid var(--bord);
  margin-bottom: var(--s3);
}
.strip-cell {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: var(--s2);
  padding: var(--s4) var(--s4);
  border-right: 1px solid var(--bord);
  border-bottom: 1px solid var(--bord);
}
.strip-label {
  font-size: 10px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--sec);
  line-height: 1;
  white-space: nowrap;
}
.strip-price {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  line-height: 1;
}
.strip-meta {
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  color: var(--sec);
  font-feature-settings: 'tnum' 1;
  line-height: 1;
}
.strip-meta.is-accent { color: var(--accent); }
.strip-foot { font-size: var(--t-micro); color: var(--tert); margin-top: var(--s2); }

@media (max-width: 720px) {
  .strip {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    border-left: none;
    border-top: 1px solid var(--bord);
  }
  .strip-cell {
    grid-row: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "label price"
      "meta  meta";
    row-gap: var(--s1);
    column-gap: var(--s4);
    padding: var(--s3) 0;
    border-right: none;
  }
  .strip-cell:last-child { border-bottom: none; }
  .strip-cell .strip-label { grid-area: label; }
  .strip-cell .strip-price { grid-area: price; text-align: right; }
  .strip-cell .strip-meta  { grid-area: meta; }
}


/* ────── P6 · Spec Table ────── */
/* Variable-column subgrid table — phase reference, outcomes table,
 * anything where rows share aligned columns with varying content
 * widths (first col bold/black, rest secondary). Set --cols via
 * grid-template-columns on the .spec wrapper. .spec-row is a
 * subgrid row spanning all columns. .spec-head styles the header row. */
.spec {
  display: grid;
  column-gap: var(--s8);
  font-size: 13px;
  line-height: 1.55;
}
.spec-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: baseline;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--bord);
}
.spec-row:not(.spec-head) > :first-child {
  font-size: 15px;
  font-weight: var(--w-black);
}
.spec-row:not(.spec-head) > :nth-child(2) {
  font-style: italic;
  color: var(--sec);
  line-height: 1.45;
  font-weight: var(--w-regular);
}
.spec-row.spec-head {
  padding: 0 0 var(--s2);
  border-bottom: 1px solid var(--ink);
}
.spec-row.spec-head > * {
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--sec);
  font-style: normal;
}
@media (max-width: 720px) {
  .spec { grid-template-columns: 1fr !important; column-gap: 0; }
  .spec-row { grid-template-columns: 1fr; row-gap: var(--s1); }
  .spec-head { display: none; }
}


/* ────── Service Grid (vertical cards) ────── */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s4);
  margin-bottom: var(--s6);
}
.service-card {
  border: 1px solid var(--bord);
  padding: var(--s6);
  transition: border-color 0.15s;
}
.service-card:hover { border-color: var(--ink); }
.service-card .service-name { font-size: var(--t-body); font-weight: var(--w-bold); margin-bottom: var(--s2); }
.service-card .service-desc { font-size: 13px; color: var(--sec); line-height: 1.5; }


/* ────── Service Row (horizontal: name | desc | price) ────── */
/* For rate-card-style à la carte layouts where each service is one
 * horizontal row with name (left), description (middle), price (right). */
.service-row-grid { }
.service-row {
  display: grid;
  grid-template-columns: 180px 1fr 140px;
  gap: var(--s8);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--bord);
  align-items: start;
}
.service-row:last-child { border-bottom: none; }
.service-row-name {
  font-size: 17px;
  font-weight: var(--w-black);
  line-height: 1;
}
.service-row-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.service-row-price {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-feature-settings: 'tnum' 1;
}
.service-row-price-amount {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  line-height: 1;
}
.service-row-price-label {
  font-size: 10px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--sec);
}
@media (max-width: 720px) {
  .service-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "name  price"
      "desc  desc";
    gap: var(--s2) var(--s4);
  }
  .service-row-name { grid-area: name; }
  .service-row-desc { grid-area: desc; }
  .service-row-price { grid-area: price; align-items: flex-end; }
}


/* ────── Platform Breakdown (reports) ────── */
/* Auto-fit grid of platform cards: stat (top), count, name (bottom).
 * Used by campaign reports. */
.platform-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s6);
}
.platform-card {
  text-align: center;
  padding: var(--s4);
  border: 1px solid var(--bord);
  transition: border-color 0.15s;
}
.platform-card:hover { border-color: var(--accent); }
.platform-card .num {
  font-size: var(--t-h1);
  font-weight: var(--w-black);
  font-feature-settings: 'tnum' 1;
  line-height: 1.1;
}
.platform-card .platform-stat {
  font-size: var(--t-h2);
  font-weight: var(--w-bold);
  line-height: 1.3;
  font-feature-settings: 'tnum' 1;
}
.platform-card .label {
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  color: var(--sec);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  margin-top: var(--s1);
}
.platform-card .platform-name {
  font-size: var(--t-body);
  font-weight: var(--w-bold);
  color: var(--sec);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 6px;
}


/* ────── .grid-metrics ────── */
/* Auto-fit grid of .metric primitives. Reports' "stat-cards" replacement. */
.grid-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s4);
  margin-bottom: var(--s6);
}


/* ────── Bar Chart (vertical + horizontal variants) ────── */
.bar-chart { display: flex; align-items: flex-end; gap: var(--s2); }
.bar-chart .bar-group { display: flex; flex-direction: column; align-items: center; gap: var(--s1); flex: 1; }
.bar-chart .bar {
  width: 100%;
  max-width: 48px;
  background: var(--accent);
  min-height: 4px;
}
.bar-chart .bar-label,
.bar-chart .bar-value {
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  color: var(--sec);
  font-feature-settings: 'tnum' 1;
}
.bar-chart.is-horizontal {
  display: grid;
  grid-template-columns: 70px 1fr 36px;
  gap: 6px var(--s3);
  align-items: center;
  font-size: var(--t-micro);
}
.bar-chart.is-horizontal .bar-label { font-weight: var(--w-medium); color: var(--ink); }
.bar-chart.is-horizontal .bar-track { background: var(--bord-lt); height: 12px; }
.bar-chart.is-horizontal .bar-fill { background: var(--ink); height: 100%; }
.bar-chart.is-horizontal .bar-count {
  font-weight: var(--w-black);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  text-align: right;
}


/* ────── Sparkline ────── */
.sparkline-wrap { display: flex; align-items: center; gap: var(--s4); }
.sparkline-wrap svg { display: block; }
.sparkline-label {
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--sec);
}


/* ────── Dot Chart ────── */
.dot-chart { position: relative; padding: var(--s4) 0; display: flex; align-items: flex-end; margin: 0 auto; }
.dot-chart-line { position: absolute; bottom: 34px; left: 0; right: 0; height: 1px; background: var(--bord); }
.dot-chart-points { display: flex; align-items: flex-end; justify-content: space-around; width: 100%; position: relative; z-index: 1; }
.dot-chart-point { display: flex; flex-direction: column; align-items: center; gap: var(--s1); }
.dot-chart-point .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent);
}
.dot-chart-point .dot-label {
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  color: var(--sec);
  font-feature-settings: 'tnum' 1;
}


/* ────── Progress Bar ────── */
.progress-bar-wrap { margin-bottom: var(--s4); }
.progress-label {
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--sec);
  margin-bottom: 6px;
}
.progress-track { height: 6px; background: var(--bord-lt); overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); }


/* ────── Timeline (compact inline) ────── */
.timeline-c .tl-entry {
  font-size: var(--t-body);
  line-height: 1.8;
  display: flex;
  align-items: center;
  position: relative;
}
.timeline-c .tl-date {
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-weight: var(--w-bold);
  flex-shrink: 0;
  min-width: 90px;
}
.timeline-c .tl-line { flex: 1; height: 1px; background: var(--bord); margin: 0 var(--s3); }
.timeline-c .tl-content { flex-shrink: 0; text-align: right; }
.timeline-c .tl-entry.tl-past { color: var(--sec); }
@media (max-width: 720px) {
  .timeline-c .tl-entry { flex-wrap: wrap; gap: 2px; }
  .timeline-c .tl-date { min-width: auto; font-size: var(--t-meta); }
  .timeline-c .tl-line { display: none; }
  .timeline-c .tl-content { text-align: left; width: 100%; font-size: 13px; color: var(--sec); }
}


/* ────── Collapsible section / subsection (details/summary) ────── */
/* Plain .section (existing) is static. .section.is-collapsible uses
 * details/summary for click-to-expand sections — proposals, reports. */
.section.is-collapsible > summary {
  font-size: 22px;
  font-weight: var(--w-black);
  border-bottom: 2px solid var(--ink);
  padding-bottom: var(--s2);
  margin-bottom: var(--s6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  cursor: pointer;
}
.section.is-collapsible > summary::-webkit-details-marker { display: none; }
.toggle {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
  transition: transform 0.2s;
  flex-shrink: 0;
}
details:not([open]) > summary > .toggle { transform: rotate(0deg); }
details[open] > summary > .toggle { transform: rotate(90deg); }

/* Subsection labels (static) */
.subsection-label {
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  color: var(--sec);
  margin: var(--s8) 0 var(--s4);
}
.subsection-label:first-child { margin-top: 0; }

/* Collapsible subsection (details-based) */
details.subsection { margin: var(--s8) 0 0; }
details.subsection:first-child { margin-top: 0; }
details.subsection > summary {
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  color: var(--sec);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin-bottom: var(--s4);
}
details.subsection > summary::-webkit-details-marker { display: none; }
details.subsection > summary > .toggle { border-width: 4px 0 4px 6px; }
details > .section-body { padding-top: var(--s3); }


/* ────── Compare Panel ────── */
.compare-panel { border: 1px solid var(--bord); padding: var(--s8); }
.compare-panel-label {
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--tert);
  margin-bottom: var(--s5);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--bord-lt);
}
.compare-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
  margin-bottom: var(--s6);
}


/* ────── FAQ Accordion ────── */
.faq-a .faq-item { border-bottom: 1px solid var(--bord); }
.faq-a .faq-item:first-child { border-top: 1px solid var(--bord); }
.faq-a .faq-item summary {
  font-size: var(--t-body);
  font-weight: var(--w-bold);
  padding: var(--s4) 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-a .faq-item summary::-webkit-details-marker { display: none; }
.faq-a .faq-item .faq-content {
  font-size: var(--t-body);
  color: var(--sec);
  padding: 0 0 var(--s4);
  line-height: 1.6;
  max-width: 72ch;
}


/* ────── Inline Fact Strip ────── */
/* One-line inline fact summary with pipe separators. Distinct from
 * .crit-strip (grid). Used by consulting case-study for outcome lines. */
.fact-strip {
  font-size: var(--t-body);
  font-weight: var(--w-medium);
  line-height: 1.6;
  border-top: 1px solid var(--bord);
  border-bottom: 1px solid var(--bord);
  padding: var(--s4) 0;
  margin-bottom: var(--s8);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.fact-strip strong { font-weight: var(--w-black); }
.fact-strip-sep { color: var(--tert); padding: 0 var(--s3); }


/* ────── Contact Block (vertical: label + value) ────── */
.contact-block { margin-bottom: var(--s4); }
.contact-block .contact-label {
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--sec);
  margin-bottom: var(--s1);
}
.contact-block .contact-value { font-size: var(--t-body); }
.contact-block .contact-value a {
  color: var(--ink);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  transition: border-color 0.15s;
}
.contact-block .contact-value a:hover { border-bottom-color: var(--accent); }


/* ────── Page Footer / Contact Footer ────── */
/* Single band at page bottom: label/value left, controls, brand-gif right.
 * Replaces rc-contact-row, bs-contact-row, and style.css .page-footer. */
.page-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s6);
  padding: var(--s4) 0;
  border-top: 1px solid var(--bord);
  margin-top: var(--s12);
}
.page-footer .footer-meta { font-size: var(--t-body); color: var(--ink); }
.page-footer .footer-controls { display: flex; gap: var(--s2); }
.page-footer .footer-brand {
  display: flex;
  align-items: center;
  gap: var(--s1);
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.2s;
  line-height: 0;
  margin-left: auto;
}
.page-footer .footer-brand:hover { opacity: 0.65; }
.page-footer .footer-brand .footer-brain-gif {
  height: 80px;
  width: auto;
  max-height: 80px;
  object-fit: contain;
}
.footer-btn {
  font-family: inherit;
  font-size: var(--t-body);
  font-weight: var(--w-bold);
  padding: 6px var(--s4);
  border: 1px solid var(--bord);
  background: var(--bg);
  color: var(--tert);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.footer-btn:hover { color: var(--ink); border-color: var(--ink); }

/* Contact bar variant — used by rate-card / consulting for an
 * inline label + value + value + brain-gif horizontal row. */
.contact-bar {
  display: flex;
  align-items: center;
  gap: var(--s4) var(--s6);
  flex-wrap: wrap;
  padding: var(--s4) 0;
  border-top: 2px solid var(--ink);
  margin-top: var(--s8);
}
.contact-bar .contact-bar-label {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
}
.contact-bar .contact-bar-value {
  font-size: 16px;
  font-weight: var(--w-black);
}
.contact-bar .contact-bar-value a {
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  cursor: pointer;
}
.contact-bar .contact-bar-gif { display: inline-flex; line-height: 0; cursor: pointer; margin-left: auto; flex-shrink: 0; }
.contact-bar .contact-bar-gif img { height: 72px; width: auto; vertical-align: baseline; }

/* .contact-bar-aux — auxiliary links (Privacy, Terms, etc.). When present,
 * the contact label takes the full first row and the aux links share the row
 * beneath it with the brain-gif: [aux ⋯ gif]. Scoped via :has() so the inline
 * label+value footer (rate-card, no aux) is left untouched. The gif keeps its
 * margin-left:auto, so it stays right-aligned on that second row. */
.contact-bar:has(.contact-bar-aux) { align-items: flex-end; }
.contact-bar:has(.contact-bar-aux) .contact-bar-label { flex-basis: 100%; }
.contact-bar:has(.contact-bar-aux) .contact-bar-aux { order: 1; }
.contact-bar:has(.contact-bar-aux) .contact-bar-gif { order: 2; }
.contact-bar .contact-bar-aux {
  font-size: var(--t-meta);
  color: var(--sec);
}
.contact-bar .contact-bar-aux a {
  color: var(--sec);
  border-bottom: 1px solid var(--bord);
  transition: color 0.15s, border-color 0.15s;
}
.contact-bar .contact-bar-aux a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

@media (max-width: 720px) {
  .contact-bar .contact-bar-gif img { height: 56px; }
}


/* ════════════════════════════════════════════════════════════════
 * Report table primitives
 *
 * Campaign reports compose 95% of their UI from these. Single source
 * of truth for generate-reports.js emissions.
 * ════════════════════════════════════════════════════════════════ */


/* ────── Base table ────── */
table { width: 100%; border-collapse: collapse; margin-bottom: var(--s6); }
th {
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  text-align: left;
  padding: var(--s2) var(--s4) var(--s2) 0;
  border-bottom: 2px solid var(--ink);
  color: var(--sec);
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th.sortable::after { content: ''; display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: middle; }
th.sort-asc::after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid currentColor; }
th.sort-desc::after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; }
td {
  font-size: var(--t-body);
  padding: var(--s4) var(--s4) var(--s4) 0;
  border-bottom: 1px solid var(--bord-lt);
  vertical-align: top;
}
th:last-child, td:last-child { text-align: right; padding-right: 0; }
th.num, td.num { text-align: right; font-feature-settings: 'tnum' 1, 'lnum' 1; }
tr.clickable { cursor: pointer; transition: background 0.15s; }
tr.clickable:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }


/* ────── .table-wrap ────── */
.table-wrap { overflow: visible; }
@media (max-width: 768px) {
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 500px; }
}


/* ────── Report table cell types ────── */
td.curator { max-width: 180px; }
td.playlist { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
td.playlist a { text-decoration: none; }
td.playlist a:hover { opacity: 0.8; }
td.feedback-text {
  font-style: italic;
  color: var(--sec);
  max-width: 340px;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
td.feedback-text:not(:empty)::before { content: '\201C'; }
td.feedback-text:not(:empty)::after  { content: '\201D'; }
td.feedback-text:hover { white-space: normal; overflow: visible; }
td.days-in { text-align: right; font-feature-settings: 'tnum' 1, 'lnum' 1; white-space: nowrap; }
th.days-in { text-align: right; }


/* ────── Report grouping rows ────── */
td.group-label {
  padding: var(--s5) 0 var(--s2);
  border-bottom: 2px solid var(--bord);
  cursor: pointer;
  user-select: none;
  text-align: left;
}
.group-label-text {
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--sec);
}
.group-toggle { float: right; font-size: 13px; color: var(--sec); }
.group-header.collapsed .group-toggle::before { content: '\25B8'; }
.group-header:not(.collapsed) .group-toggle::before { content: '\25BE'; }
td.vertical-label {
  padding: var(--s8) 0 var(--s1);
  text-align: left;
  font-size: 13px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  border-bottom: 3px solid var(--ink);
}
.group-header.pending-group .group-label-text {
  color: var(--sec);
  font-style: italic;
}
tr[data-status="forthcoming"] td.feedback-text { color: var(--sec); }
.group-subtotal td {
  font-size: var(--t-meta);
  font-weight: var(--w-bold);
  color: var(--sec);
  border-top: 1px solid var(--bord);
  padding: var(--s2) 0;
}
.group-total td {
  font-size: 13px;
  font-weight: var(--w-bold);
  color: var(--ink);
  border-top: 2px solid var(--ink);
  padding: var(--s3) 0;
}


/* ────── Curator platform icons (revealed on row hover) ────── */
.curator-platforms {
  display: none;
  gap: var(--s1);
  margin-top: 2px;
  align-items: center;
  flex-wrap: wrap;
}
tr:hover .curator-platforms { display: flex; }
.curator-platforms a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  opacity: 0.4;
  transition: opacity 0.15s;
}
.curator-platforms a:hover { opacity: 1; }
.curator-platforms svg { width: 12px; height: 12px; fill: var(--ink); }


/* ────── Filter row ────── */
.filter-row {
  margin-bottom: var(--s3);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.filter-row-label {
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--sec);
  margin-right: var(--s2);
}


/* ════════════════════════════════════════════════════════════════
 * Responsive
 * ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  body { font-size: 14px; }
  .doc-hero h1 { font-size: 26px; }
  .doc-hero .lead { font-size: 16px; }
  .section.is-collapsible > summary { font-size: 18px; padding-bottom: 6px; }
  .tier-cards { grid-template-columns: 1fr; grid-template-rows: none; gap: var(--s6); }
  .tier-card { grid-row: auto; display: flex; flex-direction: column; }
  .comparison-grid { grid-template-columns: 1fr repeat(var(--cols, 3), 80px); }
  .grid-metrics { grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .compare-3col { grid-template-columns: 1fr; gap: var(--s4); }
  .service-grid { grid-template-columns: 1fr; }
  .platform-breakdown { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
  .platform-card { padding: var(--s3) var(--s2); min-width: 0; }
  .platform-card .num { font-size: 22px; }
  .tag { font-size: 10px; padding: 3px 8px; margin: 0 4px 4px 0; }
  .breadcrumb { font-size: 13px; }
  .breadcrumb .bc-sep { margin: 0 4px; }
  .pg-btn { padding: 5px 8px; font-size: var(--t-meta); }
  .hero-center { padding: var(--s8) 0; }
  .hero-center .hero-wordmark { max-width: 80%; }
  .page-footer { gap: var(--s2) var(--s4); padding: var(--s3) 0; }
  .page-footer .footer-brand .footer-brain-gif { height: 64px; }
}

@media (max-width: 414px) {
  .doc-hero h1 { font-size: 22px; }
  .grid-metrics { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════
 * Consulting public site
 *
 * The shared design sheet also serves private proposal pages. These rules
 * stay under .consulting-page so the public-site refresh cannot restyle them.
 * ════════════════════════════════════════════════════════════════ */

body.consulting-page {
  padding: 0 40px var(--s6);
  font-size: 15px;
  --consulting-link: #b52370;
}

.consulting-page a.link,
.consulting-page .consulting-work-card-link,
.consulting-page .consulting-contact-link,
.consulting-page .contact-bar a[href^="mailto:"] {
  color: var(--consulting-link);
}

.consulting-page a.link {
  border-bottom: 0;
}

.consulting-page :where(a:not(:has(img)):not(.skip-link), .consulting-work-card-link) {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.consulting-page a.consulting-work-item {
  text-decoration: none;
}

.consulting-page .consulting-back-link,
.consulting-page .consulting-site-footer > a:first-child,
.consulting-page .contact-bar .contact-bar-aux a {
  border-bottom: 0;
}

.consulting-page .doc-header,
.consulting-page .consulting-shell {
  width: min(100%, 1180px);
  margin-inline: auto;
}

.consulting-page .doc-header {
  padding-block: var(--s2);
}

.consulting-masthead {
  justify-content: space-between;
  gap: var(--s8);
}

.consulting-back-link {
  margin-left: auto;
  border-bottom: 2px solid var(--accent);
  font-size: 15px;
  font-weight: var(--w-bold);
  line-height: 1.4;
  padding-block: 10px;
  flex-shrink: 0;
}

.consulting-page .doc-header .wordmark img {
  height: 80px;
  max-height: 80px;
}

.consulting-page :where(a, button, summary):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.consulting-page .doc-hero {
  padding: var(--s10) 0 var(--s8);
  margin-bottom: 0;
}

.consulting-page .doc-hero h1 {
  max-width: 900px;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.02;
}

.consulting-page .doc-hero .lead {
  max-width: 100%;
  margin-top: var(--s4);
  font-size: 18px;
  line-height: 1.5;
}

.consulting-page .section {
  margin-bottom: var(--s10);
  scroll-margin-top: var(--s6);
}

.consulting-page .sub-head h2 {
  font-size: 24px;
  font-weight: var(--w-black);
  line-height: 1.2;
}

.consulting-page .sub-head {
  border-bottom-width: 1px;
  margin-bottom: var(--s4);
}

.consulting-page .section > p,
.consulting-page .section > ul,
.consulting-page .consulting-prose {
  max-width: 100%;
  font-size: 15px;
  line-height: 1.6;
}

.consulting-page .section > p + p,
.consulting-page .consulting-prose p + p {
  margin-top: var(--s4);
}

.consulting-page .spec-methodology {
  grid-template-columns: max-content minmax(0, 1fr) max-content;
}

.consulting-page .cap-pillar {
  margin-top: var(--s6);
  color: var(--sec);
  font-size: var(--t-meta);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-tracked);
  text-transform: uppercase;
}

.consulting-work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s8);
}

.consulting-work-item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--s2);
  padding-top: var(--s4);
  border-top: 1px solid var(--bord);
}

.consulting-eyebrow {
  display: block;
  color: var(--sec);
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-tracked);
  text-transform: uppercase;
}

.consulting-work-item-title {
  display: block;
  font-size: 19px;
  font-weight: var(--w-bold);
  line-height: 1.1;
}

.consulting-work-item-summary {
  display: block;
  font-size: 15px;
  line-height: 1.55;
}

.consulting-work-card-link {
  display: block;
  margin-top: auto;
  padding-top: var(--s2);
  color: var(--accent);
  font-weight: var(--w-bold);
}

.consulting-work-item:hover .consulting-work-card-link,
.consulting-work-item:focus-visible .consulting-work-card-link {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.consulting-work-preview {
  position: fixed;
  z-index: 20;
  display: block;
  width: auto;
  max-width: min(400px, calc(100vw - 40px));
  max-height: min(280px, calc(100vh - 32px));
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.consulting-work-preview.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.consulting-work-preview img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(280px, calc(100vh - 32px));
  object-fit: contain;
}

.consulting-page .contact-bar {
  scroll-margin-top: var(--s6);
  border-top-width: 1px;
  gap: var(--s3) var(--s6);
}

.consulting-page .contact-bar .contact-bar-label,
.consulting-page .contact-bar .consulting-contact-link {
  font-size: 16px;
  line-height: 1.5;
}

.consulting-page .contact-bar a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

.consulting-page .contact-bar .contact-bar-gif img {
  height: 48px;
}

/* Landing-page hierarchy. Detail pages keep their denser case-study rhythm. */
.consulting-landing .doc-hero {
  padding: 32px 0 28px;
  border-bottom: none;
}

.consulting-landing .doc-hero h1 {
  max-width: 100%;
  font-size: clamp(36px, 3.5vw, 44px);
  line-height: 1.04;
  text-wrap: balance;
}

.consulting-landing .doc-hero .lead {
  max-width: 100%;
  margin-top: var(--s4);
  font-size: 16px;
  line-height: 1.5;
}

.consulting-landing .section {
  margin-bottom: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--ink);
}

.consulting-landing .consulting-section-heading {
  margin-bottom: var(--s5);
  padding: 0;
  border: 0;
}

.consulting-landing .consulting-section-heading h2 {
  max-width: 18ch;
  font-size: 24px;
  font-weight: var(--w-black);
  line-height: 1.2;
}

.consulting-method-intro {
  margin-bottom: var(--s5);
  color: var(--sec);
  font-size: 15px;
  line-height: 1.55;
}

.consulting-landing .section > p,
.consulting-landing .consulting-prose {
  max-width: 100%;
  font-size: 16px;
  line-height: 1.6;
}

.consulting-process-grid,
.consulting-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s8);
  margin-top: var(--s10);
}

.consulting-process-step,
.consulting-service-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding-top: var(--s4);
  border-top: 1px solid var(--bord);
}

.consulting-landing .consulting-process-grid {
  margin-top: 0;
}

.consulting-process-step h3,
.consulting-service-group h3 {
  margin-bottom: var(--s3);
  font-size: 19px;
  font-weight: var(--w-bold);
  line-height: 1.25;
}

.consulting-process-step > p,
.consulting-service-group li {
  font-size: 15px;
  line-height: 1.55;
}

.consulting-step-meta {
  margin-top: auto;
  padding-top: var(--s6);
  color: var(--sec);
  font-weight: var(--w-bold);
}

.consulting-landing .consulting-step-meta {
  padding-top: var(--s4);
  font-size: 13px;
}

.consulting-service-group ul {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: 0;
  list-style: none;
}

.consulting-service-grid-compact {
  margin-top: 0;
}

.consulting-service-grid-compact .consulting-service-group p {
  font-size: 15px;
  line-height: 1.55;
}

.consulting-founder-link {
  font-weight: var(--w-bold);
}

.consulting-home-intro .consulting-contact-link {
  font-size: inherit;
  line-height: inherit;
}

.consulting-landing .consulting-home-intro .consulting-prose,
.consulting-home-contact > span {
  font-size: 15px;
  line-height: 1.55;
}

.consulting-contact-link {
  overflow-wrap: anywhere;
  color: #ec4899;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: var(--w-bold);
  line-height: 1.1;
}

.consulting-contact-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.consulting-home-contact {
  margin-top: var(--s4);
  scroll-margin-top: var(--s6);
}

.consulting-home-contact > span {
  display: block;
  margin-bottom: var(--s2);
  font-size: inherit;
  font-weight: var(--w-bold);
}

.consulting-site-footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding-top: var(--s4);
  border-top: 1px solid var(--bord);
  color: var(--sec);
  font-size: var(--t-meta);
}

.consulting-site-footer > a:first-child {
  border-bottom: 1px solid var(--bord);
}

.consulting-footer-gif {
  display: inline-flex;
  line-height: 0;
}

.consulting-footer-gif img {
  width: auto;
  height: 56px;
}

.consulting-case-hero {
  padding: var(--s8) 0 var(--s6);
}

.consulting-case-hero h1 {
  max-width: 100%;
  font-size: clamp(32px, 3.5vw, 46px);
  line-height: 1.03;
}

.consulting-case-hero .lead {
  max-width: 100%;
  margin-top: var(--s3);
  color: var(--sec);
  font-size: 17px;
  line-height: 1.5;
}

.consulting-case-visual {
  display: block;
  margin: 0 0 var(--s8);
  overflow: hidden;
  border: 1px solid var(--bord);
  background: var(--panel);
}

.consulting-demo {
  margin-bottom: var(--s8);
  scroll-margin-top: var(--s6);
}

.consulting-demo-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.consulting-demo-heading h2 {
  font-size: 24px;
  line-height: 1.2;
}

.consulting-demo iframe {
  display: block;
  width: 100%;
  height: min(720px, 80vh);
  border: 1px solid var(--bord);
  background: var(--bg);
}

.consulting-case-visual img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
}

.consulting-case-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  margin: 0 0 var(--s10);
}

.consulting-case-fact {
  padding-top: var(--s4);
  border-top: 2px solid var(--ink);
}

.consulting-case-fact strong {
  display: block;
  margin-bottom: var(--s1);
  font-size: 16px;
}

.consulting-case-fact span {
  color: var(--sec);
  font-size: 14px;
}

.consulting-proof-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s10) var(--s12);
  margin-top: var(--s10);
}

.consulting-proof-item {
  padding-top: var(--s4);
  border-top: 1px solid var(--ink);
}

.consulting-proof-item h3 {
  margin: var(--s2) 0 var(--s4);
  font-size: 19px;
  line-height: 1.15;
}

.consulting-proof-item p {
  font-size: 15px;
  line-height: 1.6;
}

.consulting-proof-item p + p {
  margin-top: var(--s4);
}

.consulting-case-chapter {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: var(--s12);
  align-items: start;
  padding: var(--s10) 0;
  border-top: 1px solid var(--ink);
}

.consulting-case-chapter-copy h2 {
  max-width: 100%;
  margin: var(--s2) 0 var(--s4);
  font-size: 24px;
  line-height: 1.2;
}

.consulting-case-chapter-copy > p:not(.consulting-eyebrow) {
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.6;
}

.consulting-case-chapter-copy > p + p {
  margin-top: var(--s4);
}

.consulting-case-chapter-media {
  min-width: 0;
  padding: var(--s4);
  border: 1px solid var(--bord);
  background: transparent;
}

.consulting-case-chapter-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
}

.consulting-case-chapter-media figcaption {
  margin-top: var(--s3);
  color: var(--sec);
  font-size: var(--t-meta);
  line-height: 1.45;
}

.consulting-case-chapter-reverse .consulting-case-chapter-media {
  order: initial;
}

.consulting-case-media-stack {
  display: grid;
  gap: var(--s4);
}

.consulting-case-supporting {
  padding-top: var(--s8);
  border-top: 1px solid var(--ink);
}

@media (max-width: 820px) {
  body.consulting-page { padding-inline: 20px; }
  .consulting-page .doc-header .wordmark img { height: 76px; max-height: 76px; }
  .consulting-masthead { align-items: flex-end; }
  .consulting-masthead { gap: var(--s4); }
  .consulting-page .doc-header .wordmark { min-width: 0; }
  .consulting-page .doc-header .wordmark img { max-width: 100%; object-fit: contain; object-position: left; }
  .consulting-page .doc-hero { padding-block: var(--s8) var(--s6); }
  .consulting-work-grid { grid-template-columns: 1fr; }
  .consulting-process-grid,
  .consulting-service-grid { grid-template-columns: 1fr; gap: var(--s6); }
  .consulting-work-grid { gap: var(--s6); }
  .consulting-case-hero h1 { font-size: 30px; }
  .consulting-case-facts { grid-template-columns: 1fr; }
  .consulting-proof-list { grid-template-columns: 1fr; gap: var(--s8); }
  .consulting-case-chapter { grid-template-columns: 1fr; gap: var(--s8); padding-block: var(--s10); }
  .consulting-case-chapter-reverse .consulting-case-chapter-media { order: initial; }

  .consulting-landing .section {
    margin-bottom: var(--s10);
    padding-top: var(--s6);
  }
}

@media (max-width: 414px) {
  body.consulting-page { padding-inline: 16px; }
  .consulting-page .doc-header .wordmark img { height: 68px; max-height: 68px; }
  .consulting-page .doc-hero h1 { font-size: 30px; }
  .consulting-landing .doc-hero { padding-block: var(--s5); }
  .consulting-landing .doc-hero .lead { margin-top: var(--s3); font-size: 15px; }
  .consulting-landing .consulting-section-heading h2 { font-size: 22px; }
  .consulting-case-hero .lead { font-size: 16px; }
}

@media (hover: none), (pointer: coarse) {
  .consulting-work-preview { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .consulting-page *,
  .consulting-page *::before,
  .consulting-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}


/* ════════════════════════════════════════════════════════════════
 * Print
 * ════════════════════════════════════════════════════════════════ */

@media print {
  body { padding: 20px 24px !important; font-size: 12px; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  .footer-controls, .footer-btn, .filter-row { display: none !important; }
  .nav-sticky { position: static; }

  details { display: block !important; }
  details > summary { pointer-events: none; }
  details > summary::after, details > summary .toggle { display: none !important; }
  details > .section-body { display: block !important; }

  table { width: 100%; white-space: normal; }
  td, th { padding: 6px 12px 6px 0 !important; font-size: 11px; }
  .table-wrap { overflow: visible; }

  .group-header { page-break-after: avoid; }
  .group-header.collapsed { all: unset; display: table-row; }
  .group-toggle { display: none; }
  td.group-label { border-bottom: 1.5px solid var(--ink); }
  tr[data-group] { display: table-row !important; }

  .tier-card, .platform-card, .service-card { border: 1px solid var(--bord); }
  .callout { padding: var(--s3) var(--s4); }

  .group-subtotal, .group-total { page-break-before: avoid; }
  tr { page-break-inside: avoid; }
  h1, h2, summary { page-break-after: avoid; }

  .page-footer { position: static; border-top: 1px solid var(--bord); margin-top: var(--s6); padding: var(--s3) 0; }
  .page-footer .footer-brand { display: none; }
  .contact-bar-gif { display: none !important; }

  @page { margin: 15mm; }
}