/* =============================================================================
 * Periphery Digital — Design System (Canonical Stylesheet)
 * -----------------------------------------------------------------------------
 * Generated from: wiki/brand/*.md (Ari's modular brand wiki)
 * Generated date: 2026-05-10
 *
 * Source files (versions per frontmatter at generation time):
 *   - wiki/brand/design.md              — design system overview
 *   - wiki/brand/core/tokens.md         — color, type, spacing, radius, shadow
 *   - wiki/brand/components/*.md        — KPI, table, band, chart specs
 *
 * Loaded by: any internal HTML artifact via a relative <link rel="stylesheet">
 *   <link rel="stylesheet" href="../../wiki/brand/design-system.css">
 *   (Adjust depth to artifact location.)
 *
 * Re-generation: Re-run the html-render generator when Ari updates any file in
 *   wiki/brand/*.md. Do not hand-edit values that originate in tokens.md —
 *   change tokens.md and regenerate.
 *
 * -----------------------------------------------------------------------------
 * FORBIDDEN VALUES — never reintroduce, ever:
 *   - #EF7125            (retired orange — pre-2025 brand)
 *   - #2DB9C5            (retired teal — pre-2025 brand)
 *   - #FFFFFF / #fff     (pure white — use Cloud White #F7F9F2)
 *   - #5B3DF5            (wrong purple from legacy email signature)
 *   - Europa, Nunito Sans (retired typefaces — use DM Sans + Inter)
 *   - Any emoji glyph or emoji string in rendered output
 * =============================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@200;300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* =============================================================================
 * TOKENS
 * ============================================================================= */
:root {
  /* === COLORS — PRIMARY === */
  --color-purple: #5229D3;     /* Insight Purple — leading brand color */
  --color-lime: #C3E05A;       /* Spark Lime — secondary; never standalone primary */

  /* === COLORS — NEUTRAL === */
  --color-pine: #2A4E45;       /* Anchor Pine — stability */
  --color-inkwell: #0F0F0F;    /* Near-black — primary text (NOT pure #000000) */
  --color-white: #F7F9F2;      /* Cloud White — default page background (NOT pure #FFFFFF) */

  /* === COLORS — ACCENT (decorative; most fail WCAG on white as small text) === */
  --color-coral: #FF8C8C;      /* Connection Coral — KPI down-trend */
  --color-sky: #A1D4FF;        /* Soft Sky */
  --color-amber: #F0D26F;      /* Optimist Amber */
  --color-stone: #6E6E6E;      /* Stone Beige — secondary text; AA 4.8:1 on Cloud White */

  /* === COLORS — UTILITY === */
  --color-border: #E5E5E5;     /* Default border, row separators */
  --color-row-alt: #F0F0F8;    /* Data-table alt-row tint AND KPI card tint */
  --color-row-hover: #EAE8FF;  /* Data-table hover */
  --color-grid: #F0F0F0;       /* Chart grid lines */
  --color-disclaimer: #333333; /* Email disclaimer text */

  /* === GRADIENTS === */
  /* TODO: Pink → Purple gradient — pink stop unspecified by creative team. Add when defined. */
  --gradient-purple-black: linear-gradient(135deg, #5229D3 0%, #0F0F0F 100%);
  --gradient-purple-lime:  linear-gradient(135deg, #5229D3 0%, #C3E05A 100%);
  --gradient-lime-black:   linear-gradient(135deg, #C3E05A 0%, #0F0F0F 100%);
  --gradient-text:         linear-gradient(90deg, #FF8C8C 0%, #5229D3 100%); /* Gradient text for headlines on light bgs */

  /* === FONTS === */
  --font-display: 'DM Sans', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* === SPACING ⚠️ working convention, pending creative team validation === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* === RADII ⚠️ working convention, pending creative team validation === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* === SHADOWS ⚠️ working convention, pending creative team validation === */
  --shadow-sm: 0 1px 3px rgba(15,15,15,0.08);
  --shadow-md: 0 4px 12px rgba(15,15,15,0.12);
  --shadow-lg: 0 8px 24px rgba(15,15,15,0.20);

  /* === TYPE SCALE ⚠️ pending creative team sign-off === */
  --fs-display:        64px;
  --fs-h1:             44px;
  --fs-h2:             30px;
  --fs-h3:             22px;
  --fs-h4:             18px;
  --fs-body-lg:        18px;
  --fs-body:           16px;
  --fs-body-sm:        14px;
  --fs-caption:        12px;
  --fs-label:          12px;
  --fs-kpi-value:      56px;
  --fs-kpi-label:      13px;
  --fs-section-label:  11px;
  --fs-table-header:   13px;
  --fs-table-body:     13px;
}

/* =============================================================================
 * RESET / BASE
 * ============================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-inkwell);
  background: var(--color-white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-purple);
  text-decoration: none;
}

/* =============================================================================
 * COMPONENTS — BANDS
 * ============================================================================= */

/* Header band — top of reports/decks; matches Ari's reports.md exactly */
.header-band {
  background: var(--color-purple);
  color: var(--color-white);
  padding: 32px 40px; /* asymmetric on purpose — do NOT tokenize */
}

.header-band h1,
.header-band .title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.1;
  color: var(--color-white);
}

.header-band .subtitle,
.header-band .meta {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--color-white);
  opacity: 0.85;
  margin-top: var(--space-2);
}

/* Report footer — has copyright + meta */
.footer-band {
  background: var(--color-inkwell);
  color: var(--color-white);
  padding: 24px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
}

.footer-band .copyright {
  color: var(--color-white);
  opacity: 0.7;
}

.footer-band .wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Slide footer — presentations; NO copyright, just wordmark + page number */
.slide-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 40px;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--color-stone);
  border-top: 1px solid var(--color-border);
}

.slide-footer .wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-inkwell);
}

.slide-footer .page-number {
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
 * COMPONENTS — KPI CARDS
 * -----------------------------------------------------------------------------
 * V3 hybrid default: tinted block, no chrome. Card-ness comes from bg tint
 * alone. Pair with .section-label ABOVE a group of cards to structure the page.
 *
 * REJECTED patterns (never reintroduce):
 *   - border-left: 3px solid var(--color-purple)  (too "AI dashboard template")
 *   - box-shadow on .kpi-card  (V3 has none)
 *   - border-radius on .kpi-card  (V3 has none — sharp corners are intentional)
 * ============================================================================= */
.kpi-card {
  background: var(--color-row-alt); /* #F0F0F8 pale purple tint */
  padding: 20px 24px;
  /* no border, no shadow, no border-radius — intentional */
}

/* Optional modifier: doubles as a section divider when one card per row */
.kpi-card--ruled {
  border-top: 1px solid var(--color-inkwell);
}

.kpi-card .value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-kpi-value); /* 56px */
  line-height: 1.0;
  color: var(--color-inkwell);
}

.kpi-card .label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-kpi-label); /* 13px */
  line-height: 1.4;
  color: var(--color-stone);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: var(--space-2);
}

/* Trend indicators */
.kpi-trend-up {
  color: var(--color-pine); /* DEFAULT — Anchor Pine, WCAG-accessible */
}

/* Decorative modifier only — fails WCAG AA as small text on white.
 * Use only for large display contexts (>=24px) or non-essential decoration. */
.kpi-trend-up--accent {
  color: var(--color-lime);
}

.kpi-trend-down {
  color: var(--color-coral);
}

.kpi-trend-neutral {
  color: var(--color-stone);
}

/* =============================================================================
 * COMPONENTS — SECTION LABELS
 * Used ABOVE groups of KPI cards or content sections to structure the page.
 * ============================================================================= */
.section-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-section-label); /* 11px */
  line-height: 1.4;
  color: var(--color-stone);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--space-3);
}

/* =============================================================================
 * COMPONENTS — DATA TABLES
 * ============================================================================= */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-table-body); /* 13px */
}

.data-table thead {
  background: var(--color-purple);
  color: var(--color-white);
}

.data-table th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-table-header);
  line-height: 1.4;
  padding: 10px 16px;
  text-align: left;
  color: var(--color-white);
}

.data-table td {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-table-body);
  line-height: 1.6;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-inkwell);
}

.data-table tbody tr:nth-child(even) {
  background: var(--color-row-alt);
}

.data-table tbody tr:hover {
  background: var(--color-row-hover);
}

.data-table tr.totals {
  background: var(--color-inkwell);
  color: var(--color-white);
  font-weight: 600;
}

.data-table tr.totals td {
  color: var(--color-white);
  border-bottom: none;
}

/* =============================================================================
 * COMPONENTS — CHART CONTAINER
 * Container styling only. Charts themselves come from a charting library at
 * render time. No gradients inside charts — flat fills only.
 * Grid lines should use var(--color-grid) #F0F0F0 (set by the chart library).
 * ============================================================================= */
.chart-container {
  background: var(--color-white);
  padding: var(--space-4);
  /* No border — chart itself provides visual structure (V3 minimalism). */
}

.chart-container .chart-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h4);
  color: var(--color-inkwell);
  margin-bottom: var(--space-3);
}

.chart-container .chart-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--color-stone);
  margin-top: var(--space-3);
}

/* =============================================================================
 * COMPONENTS — PASSWORD GATE
 * Included for completeness (client-report use case). Not used by internal
 * artifacts today, but keeps a single canonical stylesheet for both.
 * ============================================================================= */
.password-gate {
  position: fixed;
  inset: 0;
  background: var(--color-purple);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.password-gate .gate-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.password-gate input {
  background: transparent;
  border: 1px solid var(--color-white);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: 12px 16px;
  width: 320px;
  max-width: 80vw;
  outline: none;
}

.password-gate input::placeholder {
  color: var(--color-white);
  opacity: 0.6;
}

.password-gate button.unlock {
  background: var(--color-lime);
  color: var(--color-inkwell);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-body);
  padding: 12px 24px;
  border: none;
  margin-top: var(--space-3);
  cursor: pointer;
}

/* =============================================================================
 * COMPONENTS — GRADIENT TEXT
 * Light backgrounds only. Do not use on purple or dark surfaces.
 * ============================================================================= */
.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* =============================================================================
 * ARTICLE — wiki/explainer prose styles
 * Used by internal markdown-rendered docs (knowledge articles, plans, etc.)
 * ============================================================================= */
.article {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px;
  font-family: var(--font-body);
  color: var(--color-inkwell);
}

.article h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1); /* 44px */
  line-height: 1.1;
  margin-bottom: var(--space-3);
}

.article .subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg); /* 18px */
  color: var(--color-stone);
  margin-bottom: var(--space-5);
}

.article h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2); /* 30px */
  line-height: 1.2;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.article h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3); /* 22px */
  line-height: 1.2;
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
}

.article h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h4); /* 18px */
  line-height: 1.2;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

.article p,
.article ul,
.article ol {
  font-family: var(--font-body);
  font-size: var(--fs-body); /* 16px */
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

.article ul,
.article ol {
  padding-left: var(--space-4);
}

.article li {
  margin-bottom: var(--space-1);
}

.article a {
  color: var(--color-purple);
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}

.article a:hover {
  border-bottom-color: var(--color-purple);
}

.article blockquote {
  border-left: 3px solid var(--color-purple);
  padding: var(--space-3) var(--space-4);
  background: #FAFAFA;
  color: #3A3A3A;
  margin: var(--space-4) 0;
}

.article blockquote p:last-child {
  margin-bottom: 0;
}

.article code {
  font-family: Menlo, Monaco, 'SF Mono', monospace;
  font-size: 0.9em;
  background: var(--color-row-alt);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-inkwell);
}

.article pre {
  background: var(--color-inkwell);
  color: var(--color-white);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--space-3) 0;
  font-family: Menlo, Monaco, 'SF Mono', monospace;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}

.article pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  border-radius: 0;
}

/* Lighter table style for prose — no purple header band, just bold th + rules */
.article table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
}

.article table th {
  font-weight: 600;
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-inkwell);
  color: var(--color-inkwell);
}

.article table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-inkwell);
}

.article hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-5) 0;
}

.article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* =============================================================================
 * COMPONENTS — CALLOUTS
 * Used in articles/plans/specs to surface side-notes, warnings, tips.
 * No left-stripe accent (rejected pattern). Subtle tinted bg + bold title.
 * ============================================================================= */
.callout {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--color-inkwell);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
}

.callout .callout-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-inkwell);
  margin-bottom: var(--space-1);
}

.callout p {
  margin: 0;
}

.callout p + p {
  margin-top: var(--space-2);
}

.callout--info {
  background: #E8F1F6; /* Soft Sky tinted onto Cloud White */
}

.callout--warning {
  background: #FAF3DC; /* Optimist Amber tinted onto Cloud White */
}

.callout--success {
  background: #EAF1DA; /* Spark Lime tinted onto Cloud White */
}

.callout--tip {
  background: var(--color-row-alt); /* #F0F0F8 pale purple tint */
}

.callout--note {
  background: var(--color-white);
  border-top: 1px solid var(--color-stone);
}

/* =============================================================================
 * COMPONENTS — STATUS BADGES
 * Small inline pills for marking statuses (Draft, Active, Shipped, etc.).
 * ============================================================================= */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

.badge--draft {
  background: #E5E5E5;
  color: #3A3A3A;
}

.badge--active {
  background: var(--color-lime);
  color: var(--color-inkwell);
}

.badge--review {
  background: var(--color-amber);
  color: var(--color-inkwell);
}

.badge--blocked {
  background: var(--color-coral);
  color: var(--color-inkwell);
}

.badge--shipped {
  background: var(--color-purple);
  color: var(--color-white);
}

.badge--archived {
  background: var(--color-stone);
  color: var(--color-white);
}

/* =============================================================================
 * COMPONENTS — DECISION MATRIX
 * Compact table for "Option A vs B vs C with pros/cons". Lighter than
 * .data-table — no purple header band — so it slots into articles.
 * ============================================================================= */
.decision-matrix {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  margin: var(--space-4) 0;
  background: var(--color-white);
}

.decision-matrix th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  text-align: left;
  padding: 16px 20px;
  border-bottom: 2px solid var(--color-inkwell);
  color: var(--color-inkwell);
  background: var(--color-white);
}

.decision-matrix td {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  padding: 16px 20px;
  vertical-align: top;
  color: var(--color-inkwell);
}

.decision-matrix tr:not(:last-child) td {
  border-bottom: 1px solid var(--color-border);
}

.decision-matrix td + td,
.decision-matrix th + th {
  border-left: 1px solid var(--color-border);
}

.decision-matrix .pro {
  display: block;
  color: var(--color-pine);
  margin-bottom: var(--space-1);
}

.decision-matrix .pro::before {
  content: "+ ";
  font-weight: 600;
}

.decision-matrix .con {
  display: block;
  color: var(--color-coral);
  margin-bottom: var(--space-1);
}

.decision-matrix .con::before {
  content: "\2013\00a0"; /* en dash + nbsp, never emoji */
  font-weight: 600;
}

/* =============================================================================
 * COMPONENTS — ANNOTATED CODE
 * Code block on the left, severity-coded annotations on the right.
 * Inspired by inline-margin annotation pattern for review artifacts.
 * ============================================================================= */
.annotated-code {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  align-items: start;
}

.annotated-code pre {
  background: var(--color-inkwell);
  color: var(--color-white);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 0;
  font-family: Menlo, Monaco, 'SF Mono', monospace;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}

.annotated-code .annotations {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.annotated-code .annotation {
  padding: 10px 12px;
  border-left: 3px solid var(--color-border);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-inkwell);
}

.annotated-code .annotation .annotation-line {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  color: var(--color-stone);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.annotated-code .annotation--info {
  border-left-color: var(--color-sky);
}

.annotated-code .annotation--warning {
  border-left-color: var(--color-amber);
}

.annotated-code .annotation--severe {
  border-left-color: var(--color-coral);
}

@media (max-width: 720px) {
  .annotated-code {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
 * COMPONENTS — COMPARISON GRID
 * Side-by-side option cards. Unlike .grid-3, each card has a fixed shape:
 * label overline, title, body, tradeoff (pushed to bottom).
 * Border IS intentional here — comparison cards are box-like by design.
 * ============================================================================= */
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.comparison-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
}

.comparison-card .label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-section-label);
  line-height: 1.4;
  color: var(--color-stone);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--space-2);
}

.comparison-card .title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  color: var(--color-inkwell);
  margin-bottom: var(--space-2);
}

.comparison-card .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-inkwell);
  margin-bottom: var(--space-3);
}

.comparison-card .tradeoff {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-stone);
  margin-top: auto;
}

/* =============================================================================
 * COMPONENTS — CHART HELPERS
 * Title + legend helpers for inline SVG charts that live in .chart-container.
 * Charts themselves use flat fills only (no gradients) per reports.md.
 * ============================================================================= */
.chart-container .chart-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--color-inkwell);
  margin-bottom: var(--space-3);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-stone);
}

.chart-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.chart-legend .legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
}

/* =============================================================================
 * COMPONENTS — PULL QUOTE
 * Large display quote for long-form articles. Insight Purple opening glyph.
 * ============================================================================= */
.pull-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  color: var(--color-inkwell);
  margin: var(--space-6) auto;
  max-width: 600px;
  padding: 0 var(--space-3);
}

.pull-quote::before {
  content: "\201C";
  font-size: 64px;
  color: var(--color-purple);
  line-height: 0;
  vertical-align: middle;
  margin-right: 8px;
}

.pull-quote .attribution {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  color: var(--color-stone);
  margin-top: var(--space-2);
}

/* =============================================================================
 * UTILITIES — grid layouts
 * ============================================================================= */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

@media (max-width: 720px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
 * PRINT
 * ============================================================================= */
@media print {
  body {
    background: #fff;
  }
  .header-band,
  .footer-band {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* =============================================================================
 * LAYOUT & EXTENDED COMPONENTS  (promoted from channel-strategy, 2026-05-28)
 * app shell + sidebar nav, section bars, framework/role cards, channel cards +
 * platform mockups, budget gantt. The :root below aliases legacy component var
 * names to the canonical tokens above. Edit brand values in the tokens, not here.
 * ============================================================================= */
:root {
  --insight-purple:    var(--color-purple, #5229D3);
  --spark-lime:        var(--color-lime, #C3E05A);
  --connection-coral:  var(--color-coral, #FF8C8C);
  --anchor-pine:       var(--color-pine, #2A4E45);
  --inkwell:           var(--color-inkwell, #0F0F0F);
  --cloud-white:       var(--color-white, #F7F9F2);
  --bg-card:           var(--color-white, #F7F9F2);   /* was #FFFFFF — §4.1: no pure white */
  --bg-subtle:         #EFF1EA;
  --bg-tint:           var(--color-row-alt, #F0F0F8);
  --fg-primary:        var(--color-inkwell, #0F0F0F);
  --fg-secondary:      #3A3A3A;
  --fg-muted:          var(--color-stone, #6E6E6E);
  --border-subtle:     var(--color-border, #E3E6DC);
  --border-strong:     #C8CDBE;
  /* --font-display / --font-body inherit from design-system.css (same names). */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(15,15,15,0.06);
  --shadow-md: 0 4px 14px rgba(15,15,15,0.08);
}

/* =================================================================
 * Layout — sticky left nav + main column
 * ================================================================= */
.app {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 0;
  max-width: 1280px;
  margin: 0 auto;
  min-height: 100vh;
}

/* Left nav (desktop) */
.nav {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  padding: 32px 20px;
  border-right: 1px solid var(--border-subtle);
  background: var(--cloud-white);
}
.nav .brand { margin-bottom: 28px; display: flex; align-items: center; }
.nav .brand svg { height: 22px; width: auto; display: block; }
.nav .nav-section {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
  margin: 22px 0 6px;
  padding: 0 8px;
}
.nav .nav-section:first-of-type { margin-top: 0; }
.nav a {
  display: block;
  font-size: 13px;
  color: var(--fg-secondary);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  margin: 1px 0;
  line-height: 1.4;
}
.nav a:hover { background: var(--bg-tint); color: var(--insight-purple); text-decoration: none; }
.nav a.active { background: var(--insight-purple); color: var(--cloud-white); font-weight: 600; }

/* Mobile nav bar */
.mobile-bar { display: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .nav { display: none; }
  .mobile-bar {
    display: block;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--cloud-white);
    border-bottom: 1px solid var(--border-subtle);
    padding: 12px 16px 10px;
  }
  .mobile-bar .mb-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .mobile-bar .mb-top svg { height: 18px; }
  .mobile-bar .mb-crumb {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--insight-purple);
  }
  .mobile-bar .mb-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-bar .mb-chips::-webkit-scrollbar { display: none; }
  .mobile-bar .mb-chips a {
    flex: 0 0 auto;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--fg-secondary);
    background: var(--bg-subtle);
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
  }
  .mobile-bar .mb-chips a.active {
    background: var(--insight-purple);
    color: var(--cloud-white);
    font-weight: 600;
  }
  .main { padding: 28px 20px 64px !important; }
  .main h1.title { font-size: 36px !important; }
  .main p.subtitle { font-size: 15px !important; }
}

/* Main */
.main {
  padding: 56px 64px 80px;
  max-width: 980px;
}
@media (max-width: 900px) { .main { padding: 40px 24px 64px; } }

/* Bare lists in the content column — restore indentation the global reset removes,
   so list markers sit inside the margin (not hanging off the left edge). */
.main ul, .main ol { padding-left: var(--space-4); margin: 0 0 var(--space-3); }
.main li { margin-bottom: var(--space-1); line-height: 1.55; }

/* Breadcrumb */
.crumb {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
  margin-bottom: 14px;
}
.crumb span { color: var(--insight-purple); }

/* Hero */
.main h1.title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 52px;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  color: var(--inkwell);
}
.main p.subtitle {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--fg-muted);
  margin: 0 0 28px;
  letter-spacing: -0.005em;
}
hr.rule { border: none; border-top: 3px solid var(--insight-purple); width: 64px; margin: 0 0 28px; }

p.lead {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--fg-secondary);
  margin: 0 0 16px;
}
p.lead strong { color: var(--fg-primary); font-weight: 600; }

/* Framework cards (the three roles) */
.framework {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 28px 0 8px;
}
@media (max-width: 720px) { .framework { grid-template-columns: 1fr; } }
.role {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.role .role-num {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.role .role-label {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--insight-purple);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.role .role-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--insight-purple);
  flex-shrink: 0;
}
.role.coral .role-label { color: var(--connection-coral); }
.role.coral .role-label::before { background: var(--connection-coral); }
.role.lime .role-label { color: var(--anchor-pine); }
.role.lime .role-label::before { background: var(--anchor-pine); }
.role h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--inkwell);
  letter-spacing: -0.01em;
}
.role p { margin: 0; font-size: 13.5px; color: var(--fg-secondary); line-height: 1.5; }

/* Section header bars */
.section-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--insight-purple);
  color: var(--cloud-white);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  margin: 56px 0 22px;
}
.section-bar .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  background: rgba(255,255,255,0.18);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.section-bar .label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.section-bar .desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: rgba(247,249,242,0.85);
  margin-left: auto;
  letter-spacing: 0;
  text-transform: none;
}
@media (max-width: 720px) { .section-bar .desc { display: none; } }

/* Channel card */
.channel {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 820px) { .channel { grid-template-columns: 1fr; } }

.channel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.channel-logo {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.channel-logo svg { display: block; }
.channel h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  margin: 0;
  color: var(--inkwell);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.channel .formats {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--insight-purple);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.channel p { margin: 0 0 10px; color: var(--fg-secondary); font-size: 14.5px; line-height: 1.6; }
.channel p:last-child { margin-bottom: 0; }

/* Badges */
.channel .badge {
  display: inline-block;
  background: var(--spark-lime);
  color: var(--inkwell);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  margin-left: 10px;
  vertical-align: 3px;
}
.channel .badge.coral { background: var(--connection-coral); color: var(--cloud-white); }
.channel .badge.purple { background: var(--insight-purple); color: var(--cloud-white); }

/* Note callout — no left rail; tinted block with pin label */
.note {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--fg-secondary);
  border-radius: var(--radius-md);
  margin: 14px 0 0;
  line-height: 1.55;
}
.note .note-pin {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--insight-purple);
  margin-right: 8px;
  vertical-align: 1px;
}
.note strong { color: var(--inkwell); }
.note em { font-style: italic; color: var(--fg-primary); }

/* Case-study stat chips (used inside .note) */
.case-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.case-stats div {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.case-stats strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--insight-purple);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 3px;
}
.case-stats span {
  display: block;
  font-size: 10.5px;
  color: var(--fg-muted);
  line-height: 1.35;
  letter-spacing: 0.01em;
}
@media (max-width: 720px) { .case-stats { grid-template-columns: 1fr; } }
.note .case-followup {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  font-size: 13px;
}

/* Mockup column */
.mockup {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: 200px;
}
.mockup .mockup-label {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
  margin-bottom: 10px;
  text-align: center;
}

/* ---- Individual mockup styles ---- */
/* Google Search */
.mu-search { background: #fff; border-radius: 6px; padding: 12px; font-family: Arial, sans-serif; }
.mu-search .ad-tag { display: inline-block; font-size: 11px; font-weight: 700; color: #0F0F0F; margin-right: 6px; }
.mu-search .ad-url { font-size: 11px; color: #4d5156; margin-bottom: 2px; }
.mu-search .ad-host { font-size: 13px; color: #202124; margin-bottom: 4px; font-weight: 400; }
.mu-search .ad-title { font-size: 16px; color: #1a0dab; line-height: 1.25; font-weight: 400; margin-bottom: 4px; }
.mu-search .ad-desc { font-size: 12px; color: #4d5156; line-height: 1.4; }

/* Google Display banner */
.mu-display { background: #fff; border-radius: 6px; overflow: hidden; }
.mu-display .banner {
  background: linear-gradient(135deg, #5229D3 0%, #2A4E45 100%);
  height: 90px;
  display: flex; align-items: center; padding: 10px 14px;
  color: #F7F9F2;
}
.mu-display .banner-text { font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1.15; }
.mu-display .banner-cta {
  margin-left: auto;
  background: var(--spark-lime); color: var(--inkwell);
  font-size: 9.5px; font-weight: 700;
  padding: 5px 9px; border-radius: 3px; text-transform: uppercase;
  letter-spacing: 0.05em; white-space: nowrap;
}
.mu-display .ad-foot { background: #fff; padding: 6px 10px; font-size: 9px; color: #6E6E6E; display: flex; justify-content: space-between; }

/* Meta feed */
.mu-meta { background: #fff; border-radius: 6px; overflow: hidden; }
.mu-meta .post-head { display: flex; align-items: center; padding: 9px 11px; gap: 8px; }
.mu-meta .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--insight-purple); flex-shrink: 0; }
.mu-meta .post-meta { font-size: 11px; line-height: 1.2; }
.mu-meta .post-author { font-weight: 600; color: #050505; font-size: 12px; }
.mu-meta .post-spons { color: #65676b; font-size: 10px; }
.mu-meta .post-image {
  background: linear-gradient(180deg, #C3E05A 0%, #2A4E45 100%);
  height: 110px; display: flex; align-items: flex-end; padding: 12px;
}
.mu-meta .post-image-text { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: #F7F9F2; line-height: 1.05; }
.mu-meta .post-cta {
  background: #f0f2f5; padding: 8px 11px; display: flex; justify-content: space-between; align-items: center;
}
.mu-meta .post-cta-text { font-size: 10.5px; }
.mu-meta .post-cta-host { color: #65676b; font-size: 9.5px; }
.mu-meta .post-cta-headline { font-weight: 600; color: #050505; font-size: 11.5px; line-height: 1.2; }
.mu-meta .post-cta-btn { background: #e4e6eb; color: #050505; font-size: 10px; font-weight: 600; padding: 4px 9px; border-radius: 4px; }

/* Yahoo / CTV frame */
.mu-ctv {
  background: #0F0F0F; border-radius: 6px; padding: 10px;
  aspect-ratio: 16/9; display: flex; flex-direction: column;
  position: relative;
}
.mu-ctv .ctv-screen {
  flex: 1; background: linear-gradient(135deg, #2A4E45 0%, #5229D3 100%);
  border-radius: 3px; padding: 12px; display: flex; flex-direction: column; justify-content: space-between;
}
.mu-ctv .ctv-spons {
  font-family: var(--font-display); font-size: 8px; font-weight: 700; color: rgba(247,249,242,0.7);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.mu-ctv .ctv-title {
  font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #F7F9F2; line-height: 1.05;
}
.mu-ctv .ctv-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 8px; color: rgba(247,249,242,0.6); margin-top: 4px;
}

/* Yahoo Native ad */
.mu-native {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #E5E5E5;
  font-family: Arial, Helvetica, sans-serif;
}
.mu-native .nat-image {
  height: 110px;
  background-size: cover;
  background-position: center;
}
.mu-native .nat-body { padding: 10px 12px 12px; }
.mu-native .nat-spons {
  font-size: 9px;
  color: #6E6E6E;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 4px;
}
.mu-native .nat-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 700;
  color: #1F1F1F;
  line-height: 1.25;
  margin-bottom: 5px;
}
.mu-native .nat-desc {
  font-size: 11px;
  color: #555;
  line-height: 1.45;
  margin-bottom: 8px;
}
.mu-native .nat-source {
  font-size: 10px;
  color: #1F1F1F;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Spotify audio */
.mu-spotify {
  background: #121212; border-radius: 6px; padding: 12px; color: #fff;
  display: flex; flex-direction: column; gap: 10px;
}
.mu-spotify .row { display: flex; align-items: center; gap: 10px; }
.mu-spotify .cover {
  width: 56px; height: 56px; border-radius: 3px;
  background: linear-gradient(135deg, #1DB954 0%, #5229D3 100%);
  flex-shrink: 0;
}
.mu-spotify .sp-spons { font-size: 9px; font-weight: 700; color: #1DB954; letter-spacing: 0.08em; text-transform: uppercase; }
.mu-spotify .sp-title { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; line-height: 1.2; margin-top: 2px; }
.mu-spotify .sp-desc { font-size: 10px; color: rgba(255,255,255,0.65); margin-top: 2px; line-height: 1.3; }
.mu-spotify .sp-cta {
  background: #fff; color: #000; font-family: var(--font-display); font-weight: 700;
  font-size: 10px; padding: 6px 0; border-radius: 999px; text-align: center; letter-spacing: 0.04em;
}

/* Reddit */
.mu-reddit { background: #fff; border-radius: 6px; padding: 11px; }
.mu-reddit .rd-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.mu-reddit .rd-sub { font-weight: 700; font-size: 11.5px; color: #1A1A1B; }
.mu-reddit .rd-meta { font-size: 9.5px; color: #787C7E; }
.mu-reddit .rd-promoted { font-size: 9px; color: #FF4500; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-left: auto; }
.mu-reddit .rd-title { font-family: 'IBM Plex Sans', sans-serif; font-size: 13.5px; font-weight: 700; color: #1A1A1B; line-height: 1.2; margin: 4px 0 6px; }
.mu-reddit .rd-body { font-size: 11px; color: #1A1A1B; line-height: 1.4; }
.mu-reddit .rd-foot { margin-top: 8px; display: flex; gap: 12px; font-size: 10px; color: #878A8C; font-weight: 700; }

/* LinkedIn */
.mu-linkedin { background: #fff; border-radius: 6px; padding: 12px; }
.mu-linkedin .li-head { display: flex; align-items: center; gap: 8px; }
.mu-linkedin .li-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--anchor-pine); flex-shrink: 0; }
.mu-linkedin .li-org { font-size: 12px; font-weight: 600; color: #000; line-height: 1.2; }
.mu-linkedin .li-meta { font-size: 10px; color: rgba(0,0,0,0.6); }
.mu-linkedin .li-promoted { font-size: 10px; color: rgba(0,0,0,0.6); }
.mu-linkedin .li-body { font-size: 11.5px; color: #000; line-height: 1.45; margin: 9px 0; }
.mu-linkedin .li-card {
  background: #f3f2ef; border-radius: 4px; padding: 9px;
}
.mu-linkedin .li-headline { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: #000; line-height: 1.2; }
.mu-linkedin .li-domain { font-size: 9.5px; color: rgba(0,0,0,0.6); margin-top: 3px; }

/* OOH */
.mu-ooh {
  background: linear-gradient(135deg, #2A4E45 0%, #0F0F0F 100%);
  border-radius: 6px; padding: 20px 14px; min-height: 160px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; color: var(--cloud-white);
}
.mu-ooh .ooh-frame {
  border: 2px solid rgba(247,249,242,0.5); border-radius: 4px;
  padding: 14px 18px; width: 100%;
  background: rgba(82,41,211,0.15);
}
.mu-ooh .ooh-title { font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 1.05; margin-bottom: 5px; letter-spacing: -0.01em; }
.mu-ooh .ooh-sub { font-size: 10px; color: rgba(247,249,242,0.7); letter-spacing: 0.04em; }
.mu-ooh .ooh-tag { font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(247,249,242,0.55); margin-top: 12px; }

/* Principles list — clean card, no left rail */
ul.principles {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 720px) { ul.principles { grid-template-columns: 1fr; } }
ul.principles li {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  color: var(--fg-secondary);
  font-size: 14px;
  line-height: 1.55;
  box-shadow: var(--shadow-sm);
}
ul.principles li strong {
  display: block;
  color: var(--inkwell);
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 14.5px;
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}

/* Removed channel mini-cards */
.removed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 720px) { .removed-grid { grid-template-columns: 1fr; } }
.removed {
  background: var(--bg-subtle);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.removed h3 {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  margin: 0 0 6px; color: var(--fg-secondary);
  letter-spacing: -0.005em;
}
.removed p { margin: 0; font-size: 12.5px; color: var(--fg-muted); line-height: 1.5; }

/* Footer */
.foot {
  margin-top: 64px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  font-size: 11.5px;
  color: var(--fg-muted);
  text-align: center;
  letter-spacing: 0.02em;
}

/* Budget Allocation — Variant C (Gantt-style) */
.budget-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 0 18px;
}
@media (max-width: 720px) { .budget-summary { grid-template-columns: repeat(2, 1fr); } }
.budget-summary .stat {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.budget-summary .stat .lbl {
  font-family: var(--font-display);
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-muted); margin-bottom: 4px;
}
.budget-summary .stat .val {
  font-family: var(--font-display);
  font-weight: 800; font-size: 22px;
  color: var(--inkwell); letter-spacing: -0.02em; line-height: 1.1;
}
.budget-summary .stat.primary { background: var(--insight-purple); border-color: var(--insight-purple); }
.budget-summary .stat.primary .lbl { color: rgba(247,249,242,0.7); }
.budget-summary .stat.primary .val { color: var(--cloud-white); }

.budget-gantt-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
}
@media (max-width: 900px) { .budget-gantt-wrap { overflow-x: auto; } }
.budget-gantt { min-width: 720px; }

.budget-gantt .b-row,
.budget-gantt .b-swimlane,
.budget-gantt .b-months,
.budget-gantt .b-footer {
  display: grid;
  grid-template-columns: 200px repeat(6, 1fr) 84px;
  align-items: stretch;
}
.budget-gantt .b-row { border-bottom: 1px solid var(--border-subtle); min-height: 52px; }
.budget-gantt .b-row:last-of-type { border-bottom: none; }

.budget-gantt .b-label {
  padding: 14px 14px 14px 18px;
  font-size: 13.5px; font-weight: 500; color: var(--fg-primary);
  display: flex; align-items: center;
  border-right: 1px solid var(--border-subtle);
}
.budget-gantt .b-label .b-dot {
  width: 8px; height: 8px; border-radius: 50%;
  margin-right: 10px; flex-shrink: 0;
}
.budget-gantt .b-total {
  padding: 14px;
  text-align: right;
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  color: var(--insight-purple);
  background: var(--bg-subtle);
  display: flex; align-items: center; justify-content: flex-end;
  border-left: 1px solid var(--border-subtle);
}
.budget-gantt .b-cell {
  position: relative;
  border-right: 1px solid var(--border-subtle);
  padding: 6px;
  display: flex; align-items: center; justify-content: center;
}
.budget-gantt .b-cell:last-of-type { border-right: none; }
.budget-gantt .b-cell.b-off::after {
  content: "";
  position: absolute;
  top: 50%; left: 25%; right: 25%;
  border-top: 1px dashed var(--border-subtle);
}
.budget-gantt .b-pill {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  border-radius: 5px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 12px;
  color: var(--cloud-white);
  text-align: center; padding: 4px 6px;
  letter-spacing: -0.005em;
}
.budget-gantt .b-pill.h1 { min-height: 16px; opacity: 0.55; }
.budget-gantt .b-pill.h2 { min-height: 22px; opacity: 0.7; }
.budget-gantt .b-pill.h3 { min-height: 28px; opacity: 0.85; }
.budget-gantt .b-pill.h4 { min-height: 34px; opacity: 0.95; }
.budget-gantt .b-pill.h5 { min-height: 38px; opacity: 1; }

/* Channel section colors */
.budget-gantt .b-row.search   .b-pill { background: var(--insight-purple); }
.budget-gantt .b-row.search   .b-dot  { background: var(--insight-purple); }
.budget-gantt .b-row.display  .b-pill { background: #8C6FE0; color: var(--inkwell); }
.budget-gantt .b-row.display  .b-dot  { background: #8C6FE0; }
.budget-gantt .b-row.meta     .b-pill { background: var(--anchor-pine); }
.budget-gantt .b-row.meta     .b-dot  { background: var(--anchor-pine); }
.budget-gantt .b-row.yahoo    .b-pill { background: #B5972D; }
.budget-gantt .b-row.yahoo    .b-dot  { background: #B5972D; }
.budget-gantt .b-row.spotify  .b-pill { background: #75880F; }
.budget-gantt .b-row.spotify  .b-dot  { background: #75880F; }
.budget-gantt .b-row.remkt    .b-pill { background: #C75353; }
.budget-gantt .b-row.remkt    .b-dot  { background: #C75353; }
.budget-gantt .b-row.reddit   .b-pill { background: #4A85C2; }
.budget-gantt .b-row.reddit   .b-dot  { background: #4A85C2; }
.budget-gantt .b-row.linkedin .b-pill { background: #5E7A72; }
.budget-gantt .b-row.linkedin .b-dot  { background: #5E7A72; }

/* Swimlane (phase bands) */
.budget-gantt .b-swimlane { background: var(--bg-subtle); border-bottom: 1px solid var(--border-subtle); }
.budget-gantt .b-corner {
  padding: 9px 14px 9px 18px;
  font-family: var(--font-display);
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-muted);
  border-right: 1px solid var(--border-subtle);
  display: flex; align-items: center;
}
.budget-gantt .b-corner-right {
  background: var(--bg-subtle);
  padding: 9px 14px;
  font-family: var(--font-display);
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-muted);
  border-left: 1px solid var(--border-subtle);
  text-align: right;
  display: flex; align-items: center; justify-content: flex-end;
}
.budget-gantt .b-phase {
  padding: 9px 6px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--cloud-white);
  border-right: 1px solid rgba(255,255,255,0.15);
}
.budget-gantt .b-phase:last-of-type { border-right: none; }
.budget-gantt .b-phase.p1 { background: var(--insight-purple); }
.budget-gantt .b-phase.p2 { background: var(--connection-coral); color: #2B0606; }
.budget-gantt .b-phase.p3 { background: #F0D26F; color: #4D3E0A; }
.budget-gantt .b-phase.p4 { background: var(--anchor-pine); }

/* Month header */
.budget-gantt .b-months { background: var(--bg-card); border-bottom: 1px solid var(--border-subtle); }
.budget-gantt .b-months .b-month {
  padding: 11px 6px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--inkwell);
  border-right: 1px solid var(--border-subtle);
}
.budget-gantt .b-months .b-month:last-of-type { border-right: none; }
.budget-gantt .b-months .b-month .b-mtotal {
  font-size: 10px; color: var(--fg-muted);
  font-weight: 600; margin-top: 2px; letter-spacing: 0;
}

/* Section divider within gantt */
.budget-gantt .b-sectionrow {
  display: grid;
  grid-template-columns: 200px 1fr 84px;
  background: var(--insight-purple);
  color: var(--cloud-white);
  font-family: var(--font-display);
}
.budget-gantt .b-sectionrow span:nth-child(1) {
  padding: 9px 18px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.budget-gantt .b-sectionrow span:nth-child(2) {
  padding: 9px 0;
  opacity: 0.7; font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em;
}
.budget-gantt .b-sectionrow span:nth-child(3) {
  padding: 9px 14px;
  text-align: right;
  opacity: 0.7; font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em;
}

/* Footer totals */
.budget-gantt .b-footer { background: var(--inkwell); color: var(--cloud-white); }
.budget-gantt .b-footer .b-flbl {
  padding: 14px 14px 14px 18px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  border-right: 1px solid rgba(247,249,242,0.1);
  display: flex; align-items: center;
}
.budget-gantt .b-footer .b-fv {
  text-align: center; padding: 14px 6px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 13.5px;
  border-right: 1px solid rgba(247,249,242,0.1);
  display: flex; align-items: center; justify-content: center;
}
.budget-gantt .b-footer .b-fv:last-of-type { border-right: none; }
.budget-gantt .b-footer .b-fgrand {
  background: rgba(195,224,90,0.18);
  color: var(--spark-lime);
  text-align: right; padding: 14px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 13.5px;
  display: flex; align-items: center; justify-content: flex-end;
}

/* Print */
@media print {
  .nav { display: none; }
  .app { grid-template-columns: 1fr; }
  .main { padding: 0; max-width: none; }
  .channel { break-inside: avoid; }
  .section-bar { break-after: avoid; }
}

/* =============================================================================
 * LOGO  (reusable — no SVG embedding in artifacts)
 * Use: <span class="logo" role="img" aria-label="Periphery"></span>
 *   .logo         brand (purple icon + Inkwell wordmark) — light backgrounds
 *   .logo--white  all Cloud White — dark / gradient backgrounds
 *   size with --logo-h (default 22px); aspect locked to the wordmark ratio.
 * Self-contained data-URIs so the logo travels with design-system.css.
 * ============================================================================= */
.logo {
  --logo-h: 22px;
  display: inline-block;
  height: var(--logo-h);
  width: calc(var(--logo-h) * 4.74); /* 1000/211 viewBox ratio */
  background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201000%20211%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20aria-label%3D%22Periphery%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M191.434%2051.4541V0H136.324H0.0273438V51.4541H103.509V114.841H191.434V51.4541Z%22%20fill%3D%22%235229D3%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0%20133.723V176.228H32.1587H104.225V114.585H59.2654V88.2169H0V133.723Z%22%20fill%3D%22%230F0F0F%22%2F%3E%3Cpath%20d%3D%22M227.53%20210.45V88.6027H248.293L248.601%20102.279C250.622%2099.7318%20252.977%2097.4088%20255.654%2095.2976C258.33%2093.1926%20261.549%2091.4737%20265.296%2090.1472C269.043%2088.8207%20273.54%2088.1543%20278.772%2088.1543C287.344%2088.1543%20294.838%2090.0662%20301.269%2093.8901C307.692%2097.714%20312.751%20102.92%20316.445%20109.509C320.132%20116.105%20321.978%20123.665%20321.978%20132.191C321.978%20140.717%20320.105%20148.116%20316.358%20154.705C312.61%20161.3%20307.492%20166.475%20301.001%20170.243C294.51%20174.011%20287.103%20175.892%20278.772%20175.892C271.867%20175.892%20265.885%20174.702%20260.833%20172.317C255.774%20169.938%20251.819%20166.531%20248.962%20162.097V210.45H227.536H227.53ZM274.302%20158.609C279.301%20158.609%20283.737%20157.476%20287.605%20155.203C291.472%20152.936%20294.504%20149.828%20296.712%20145.898C298.913%20141.969%20300.017%20137.398%20300.017%20132.191C300.017%20126.985%20298.913%20122.364%20296.712%20118.316C294.51%20114.274%20291.472%20111.116%20287.605%20108.843C283.737%20106.576%20279.301%20105.436%20274.302%20105.436C269.304%20105.436%20264.513%20106.576%20260.645%20108.843C256.778%20111.116%20253.773%20114.243%20251.632%20118.228C249.491%20122.214%20248.42%20126.866%20248.42%20132.185C248.42%20137.503%20249.491%20141.826%20251.632%20145.811C253.773%20149.797%20256.778%20152.93%20260.645%20155.197C264.513%20157.47%20269.063%20158.603%20274.302%20158.603V158.609Z%22%20fill%3D%22%230F0F0F%22%2F%3E%3Cpath%20d%3D%22M378.567%20175.885C369.64%20175.885%20361.785%20174.06%20355%20170.405C348.215%20166.749%20342.915%20161.654%20339.108%20155.115C335.3%20148.582%20333.393%20141.047%20333.393%20132.515C333.393%20123.765%20335.267%20116.067%20339.014%20109.416C342.761%20102.771%20348.061%2097.5641%20354.906%2093.7963C361.751%2090.0285%20369.694%2088.1477%20378.741%2088.1477C387.787%2088.1477%20395.195%2089.9787%20401.685%2093.6344C408.169%2097.2901%20413.228%20102.166%20416.861%20108.257C420.488%20114.348%20422.308%20121.273%20422.308%20129.027V132.602C422.308%20133.878%20422.188%20135.292%20421.953%20136.837H348.757V124.045H400.708C400.468%20118.06%20398.266%20113.302%20394.104%20109.752C389.935%20106.208%20384.756%20104.433%20378.573%20104.433C374.17%20104.433%20370.122%20105.374%20366.435%20107.261C362.742%20109.148%20359.831%20111.944%20357.69%20115.65C355.548%20119.361%20354.478%20124.039%20354.478%20129.687V134.507C354.478%20139.714%20355.515%20144.173%20357.603%20147.885C359.684%20151.597%20362.514%20154.449%20366.081%20156.442C369.654%20158.435%20373.756%20159.431%20378.399%20159.431C383.398%20159.431%20387.533%20158.435%20390.805%20156.442C394.077%20154.449%20396.426%20151.846%20397.858%20148.632H419.638C418.213%20153.726%20415.557%20158.354%20411.696%20162.508C407.828%20166.662%20403.097%20169.931%20397.503%20172.31C391.909%20174.689%20385.599%20175.885%20378.58%20175.885H378.567Z%22%20fill%3D%22%230F0F0F%22%2F%3E%3Cpath%20d%3D%22M434.098%20173.892V88.6027H454.861L454.988%20105.767C457.25%20102.111%20459.927%2098.9844%20463.025%2096.3812C466.116%2093.778%20469.87%2091.754%20474.273%2090.3153C478.676%2088.8767%20483.56%2088.1543%20488.914%2088.1543V109.092H481.239C477.665%20109.092%20474.273%20109.509%20471.061%20110.338C467.849%20111.166%20465.079%20112.524%20462.757%20114.411C460.435%20116.298%20458.649%20118.845%20457.404%20122.052C456.153%20125.266%20455.53%20129.196%20455.53%20133.848V173.892H434.105H434.098Z%22%20fill%3D%22%230F0F0F%22%2F%3E%3Cpath%20d%3D%22M500.343%20173.893V88.6028H521.769V173.893H500.343Z%22%20fill%3D%22%230F0F0F%22%2F%3E%3Cpath%20d%3D%22M533.124%20210.45V88.6027H553.887L554.195%20102.279C556.216%2099.7318%20558.571%2097.4088%20561.248%2095.2976C563.924%2093.1926%20567.143%2091.4737%20570.89%2090.1472C574.637%2088.8207%20579.134%2088.1543%20584.366%2088.1543C592.938%2088.1543%20600.432%2090.0662%20606.863%2093.8901C613.287%2097.714%20618.345%20102.92%20622.039%20109.509C625.726%20116.105%20627.573%20123.665%20627.573%20132.191C627.573%20140.717%20625.699%20148.116%20621.952%20154.705C618.205%20161.3%20613.086%20166.475%20606.595%20170.243C600.105%20174.011%20592.697%20175.892%20584.366%20175.892C577.461%20175.892%20571.479%20174.702%20566.427%20172.317C561.368%20169.938%20557.414%20166.531%20554.556%20162.097V210.45H533.131H533.124ZM579.903%20158.609C584.902%20158.609%20589.338%20157.476%20593.206%20155.203C597.073%20152.936%20600.105%20149.828%20602.313%20145.898C604.514%20141.969%20605.618%20137.398%20605.618%20132.191C605.618%20126.985%20604.514%20122.364%20602.313%20118.316C600.111%20114.274%20597.073%20111.116%20593.206%20108.843C589.338%20106.576%20584.902%20105.436%20579.903%20105.436C574.905%20105.436%20570.114%20106.576%20566.246%20108.843C562.379%20111.116%20559.374%20114.243%20557.233%20118.228C555.092%20122.214%20554.021%20126.866%20554.021%20132.185C554.021%20137.503%20555.092%20141.826%20557.233%20145.811C559.374%20149.797%20562.379%20152.93%20566.246%20155.197C570.114%20157.47%20574.664%20158.603%20579.903%20158.603V158.609Z%22%20fill%3D%22%230F0F0F%22%2F%3E%3Cpath%20d%3D%22M638.793%20173.893V50H660.218V103.108C663.076%2098.5677%20667.064%2094.9369%20672.183%2092.2216C677.302%2089.5063%20683.13%2088.1486%20689.681%2088.1486C696.941%2088.1486%20703.13%2089.5623%20708.249%2092.3835C713.368%2095.2047%20717.262%2099.3898%20719.946%20104.926C722.622%20110.469%20723.96%20117.282%20723.96%20125.366V173.887H702.715V127.191C702.715%20119.991%20701.109%20114.48%20697.897%20110.656C694.686%20106.832%20689.741%20104.92%20683.076%20104.92C678.794%20104.92%20674.893%20105.917%20671.38%20107.909C667.867%20109.902%20665.13%20112.73%20663.169%20116.385C661.209%20120.041%20660.225%20124.419%20660.225%20129.514V173.881H638.799L638.793%20173.893Z%22%20fill%3D%22%230F0F0F%22%2F%3E%3Cpath%20d%3D%22M780.462%20175.885C771.536%20175.885%20763.68%20174.06%20756.895%20170.405C750.11%20166.749%20744.811%20161.654%20741.003%20155.115C737.196%20148.582%20735.289%20141.047%20735.289%20132.515C735.289%20123.982%20737.162%20116.067%20740.91%20109.416C744.657%20102.771%20749.956%2097.5641%20756.802%2093.7963C763.647%2090.0285%20771.589%2088.1477%20780.636%2088.1477C789.683%2088.1477%20797.09%2089.9787%20803.581%2093.6344C810.065%2097.2901%20815.124%20102.166%20818.757%20108.257C822.384%20114.348%20824.204%20121.273%20824.204%20129.027V132.602C824.204%20133.878%20824.083%20135.292%20823.849%20136.837H750.652V124.045H802.604C802.363%20118.06%20800.162%20113.302%20796%20109.752C791.831%20106.208%20786.652%20104.433%20780.469%20104.433C776.066%20104.433%20772.018%20105.374%20768.331%20107.261C764.637%20109.148%20761.726%20111.944%20759.585%20115.65C757.444%20119.361%20756.373%20124.039%20756.373%20129.687V134.507C756.373%20139.714%20757.41%20144.173%20759.498%20147.885C761.579%20151.597%20764.41%20154.449%20767.976%20156.442C771.549%20158.435%20775.651%20159.431%20780.295%20159.431C785.293%20159.431%20789.429%20158.435%20792.701%20156.442C795.973%20154.449%20798.322%20151.846%20799.753%20148.632H821.534C820.109%20153.726%20817.452%20158.354%20813.591%20162.508C809.724%20166.662%20804.993%20169.931%20799.399%20172.31C793.805%20174.689%20787.495%20175.885%20780.476%20175.885H780.462Z%22%20fill%3D%22%230F0F0F%22%2F%3E%3Cpath%20d%3D%22M835.699%20173.892V88.6027H856.462L856.589%20105.767C858.851%20102.111%20861.528%2098.9844%20864.626%2096.3812C867.717%2093.778%20871.471%2091.754%20875.874%2090.3153C880.277%2088.8767%20885.162%2088.1543%20890.515%2088.1543V109.092H882.84C879.266%20109.092%20875.874%20109.509%20872.662%20110.338C869.45%20111.166%20866.68%20112.524%20864.358%20114.411C862.036%20116.298%20860.25%20118.845%20859.005%20122.052C857.754%20125.266%20857.131%20129.196%20857.131%20133.848V173.892H835.706H835.699Z%22%20fill%3D%22%230F0F0F%22%2F%3E%3Cpath%20d%3D%22M921.443%20210.45L943.224%20164.588H937.871L901.985%2088.6028H925.371L951.969%20147.144L977.323%2088.6028H1000L944.12%20210.45H921.443Z%22%20fill%3D%22%230F0F0F%22%2F%3E%3C%2Fsvg%3E") no-repeat left center / contain;
}
.logo--white { background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%201000%20211%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20aria-label%3D%22Periphery%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M191.434%2051.4541V0H136.324H0.0273438V51.4541H103.509V114.841H191.434V51.4541Z%22%20fill%3D%22%23F7F9F2%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0%20133.723V176.228H32.1587H104.225V114.585H59.2654V88.2169H0V133.723Z%22%20fill%3D%22%23F7F9F2%22%2F%3E%3Cpath%20d%3D%22M227.53%20210.45V88.6027H248.293L248.601%20102.279C250.622%2099.7318%20252.977%2097.4088%20255.654%2095.2976C258.33%2093.1926%20261.549%2091.4737%20265.296%2090.1472C269.043%2088.8207%20273.54%2088.1543%20278.772%2088.1543C287.344%2088.1543%20294.838%2090.0662%20301.269%2093.8901C307.692%2097.714%20312.751%20102.92%20316.445%20109.509C320.132%20116.105%20321.978%20123.665%20321.978%20132.191C321.978%20140.717%20320.105%20148.116%20316.358%20154.705C312.61%20161.3%20307.492%20166.475%20301.001%20170.243C294.51%20174.011%20287.103%20175.892%20278.772%20175.892C271.867%20175.892%20265.885%20174.702%20260.833%20172.317C255.774%20169.938%20251.819%20166.531%20248.962%20162.097V210.45H227.536H227.53ZM274.302%20158.609C279.301%20158.609%20283.737%20157.476%20287.605%20155.203C291.472%20152.936%20294.504%20149.828%20296.712%20145.898C298.913%20141.969%20300.017%20137.398%20300.017%20132.191C300.017%20126.985%20298.913%20122.364%20296.712%20118.316C294.51%20114.274%20291.472%20111.116%20287.605%20108.843C283.737%20106.576%20279.301%20105.436%20274.302%20105.436C269.304%20105.436%20264.513%20106.576%20260.645%20108.843C256.778%20111.116%20253.773%20114.243%20251.632%20118.228C249.491%20122.214%20248.42%20126.866%20248.42%20132.185C248.42%20137.503%20249.491%20141.826%20251.632%20145.811C253.773%20149.797%20256.778%20152.93%20260.645%20155.197C264.513%20157.47%20269.063%20158.603%20274.302%20158.603V158.609Z%22%20fill%3D%22%23F7F9F2%22%2F%3E%3Cpath%20d%3D%22M378.567%20175.885C369.64%20175.885%20361.785%20174.06%20355%20170.405C348.215%20166.749%20342.915%20161.654%20339.108%20155.115C335.3%20148.582%20333.393%20141.047%20333.393%20132.515C333.393%20123.765%20335.267%20116.067%20339.014%20109.416C342.761%20102.771%20348.061%2097.5641%20354.906%2093.7963C361.751%2090.0285%20369.694%2088.1477%20378.741%2088.1477C387.787%2088.1477%20395.195%2089.9787%20401.685%2093.6344C408.169%2097.2901%20413.228%20102.166%20416.861%20108.257C420.488%20114.348%20422.308%20121.273%20422.308%20129.027V132.602C422.308%20133.878%20422.188%20135.292%20421.953%20136.837H348.757V124.045H400.708C400.468%20118.06%20398.266%20113.302%20394.104%20109.752C389.935%20106.208%20384.756%20104.433%20378.573%20104.433C374.17%20104.433%20370.122%20105.374%20366.435%20107.261C362.742%20109.148%20359.831%20111.944%20357.69%20115.65C355.548%20119.361%20354.478%20124.039%20354.478%20129.687V134.507C354.478%20139.714%20355.515%20144.173%20357.603%20147.885C359.684%20151.597%20362.514%20154.449%20366.081%20156.442C369.654%20158.435%20373.756%20159.431%20378.399%20159.431C383.398%20159.431%20387.533%20158.435%20390.805%20156.442C394.077%20154.449%20396.426%20151.846%20397.858%20148.632H419.638C418.213%20153.726%20415.557%20158.354%20411.696%20162.508C407.828%20166.662%20403.097%20169.931%20397.503%20172.31C391.909%20174.689%20385.599%20175.885%20378.58%20175.885H378.567Z%22%20fill%3D%22%23F7F9F2%22%2F%3E%3Cpath%20d%3D%22M434.098%20173.892V88.6027H454.861L454.988%20105.767C457.25%20102.111%20459.927%2098.9844%20463.025%2096.3812C466.116%2093.778%20469.87%2091.754%20474.273%2090.3153C478.676%2088.8767%20483.56%2088.1543%20488.914%2088.1543V109.092H481.239C477.665%20109.092%20474.273%20109.509%20471.061%20110.338C467.849%20111.166%20465.079%20112.524%20462.757%20114.411C460.435%20116.298%20458.649%20118.845%20457.404%20122.052C456.153%20125.266%20455.53%20129.196%20455.53%20133.848V173.892H434.105H434.098Z%22%20fill%3D%22%23F7F9F2%22%2F%3E%3Cpath%20d%3D%22M500.343%20173.893V88.6028H521.769V173.893H500.343Z%22%20fill%3D%22%23F7F9F2%22%2F%3E%3Cpath%20d%3D%22M533.124%20210.45V88.6027H553.887L554.195%20102.279C556.216%2099.7318%20558.571%2097.4088%20561.248%2095.2976C563.924%2093.1926%20567.143%2091.4737%20570.89%2090.1472C574.637%2088.8207%20579.134%2088.1543%20584.366%2088.1543C592.938%2088.1543%20600.432%2090.0662%20606.863%2093.8901C613.287%2097.714%20618.345%20102.92%20622.039%20109.509C625.726%20116.105%20627.573%20123.665%20627.573%20132.191C627.573%20140.717%20625.699%20148.116%20621.952%20154.705C618.205%20161.3%20613.086%20166.475%20606.595%20170.243C600.105%20174.011%20592.697%20175.892%20584.366%20175.892C577.461%20175.892%20571.479%20174.702%20566.427%20172.317C561.368%20169.938%20557.414%20166.531%20554.556%20162.097V210.45H533.131H533.124ZM579.903%20158.609C584.902%20158.609%20589.338%20157.476%20593.206%20155.203C597.073%20152.936%20600.105%20149.828%20602.313%20145.898C604.514%20141.969%20605.618%20137.398%20605.618%20132.191C605.618%20126.985%20604.514%20122.364%20602.313%20118.316C600.111%20114.274%20597.073%20111.116%20593.206%20108.843C589.338%20106.576%20584.902%20105.436%20579.903%20105.436C574.905%20105.436%20570.114%20106.576%20566.246%20108.843C562.379%20111.116%20559.374%20114.243%20557.233%20118.228C555.092%20122.214%20554.021%20126.866%20554.021%20132.185C554.021%20137.503%20555.092%20141.826%20557.233%20145.811C559.374%20149.797%20562.379%20152.93%20566.246%20155.197C570.114%20157.47%20574.664%20158.603%20579.903%20158.603V158.609Z%22%20fill%3D%22%23F7F9F2%22%2F%3E%3Cpath%20d%3D%22M638.793%20173.893V50H660.218V103.108C663.076%2098.5677%20667.064%2094.9369%20672.183%2092.2216C677.302%2089.5063%20683.13%2088.1486%20689.681%2088.1486C696.941%2088.1486%20703.13%2089.5623%20708.249%2092.3835C713.368%2095.2047%20717.262%2099.3898%20719.946%20104.926C722.622%20110.469%20723.96%20117.282%20723.96%20125.366V173.887H702.715V127.191C702.715%20119.991%20701.109%20114.48%20697.897%20110.656C694.686%20106.832%20689.741%20104.92%20683.076%20104.92C678.794%20104.92%20674.893%20105.917%20671.38%20107.909C667.867%20109.902%20665.13%20112.73%20663.169%20116.385C661.209%20120.041%20660.225%20124.419%20660.225%20129.514V173.881H638.799L638.793%20173.893Z%22%20fill%3D%22%23F7F9F2%22%2F%3E%3Cpath%20d%3D%22M780.462%20175.885C771.536%20175.885%20763.68%20174.06%20756.895%20170.405C750.11%20166.749%20744.811%20161.654%20741.003%20155.115C737.196%20148.582%20735.289%20141.047%20735.289%20132.515C735.289%20123.982%20737.162%20116.067%20740.91%20109.416C744.657%20102.771%20749.956%2097.5641%20756.802%2093.7963C763.647%2090.0285%20771.589%2088.1477%20780.636%2088.1477C789.683%2088.1477%20797.09%2089.9787%20803.581%2093.6344C810.065%2097.2901%20815.124%20102.166%20818.757%20108.257C822.384%20114.348%20824.204%20121.273%20824.204%20129.027V132.602C824.204%20133.878%20824.083%20135.292%20823.849%20136.837H750.652V124.045H802.604C802.363%20118.06%20800.162%20113.302%20796%20109.752C791.831%20106.208%20786.652%20104.433%20780.469%20104.433C776.066%20104.433%20772.018%20105.374%20768.331%20107.261C764.637%20109.148%20761.726%20111.944%20759.585%20115.65C757.444%20119.361%20756.373%20124.039%20756.373%20129.687V134.507C756.373%20139.714%20757.41%20144.173%20759.498%20147.885C761.579%20151.597%20764.41%20154.449%20767.976%20156.442C771.549%20158.435%20775.651%20159.431%20780.295%20159.431C785.293%20159.431%20789.429%20158.435%20792.701%20156.442C795.973%20154.449%20798.322%20151.846%20799.753%20148.632H821.534C820.109%20153.726%20817.452%20158.354%20813.591%20162.508C809.724%20166.662%20804.993%20169.931%20799.399%20172.31C793.805%20174.689%20787.495%20175.885%20780.476%20175.885H780.462Z%22%20fill%3D%22%23F7F9F2%22%2F%3E%3Cpath%20d%3D%22M835.699%20173.892V88.6027H856.462L856.589%20105.767C858.851%20102.111%20861.528%2098.9844%20864.626%2096.3812C867.717%2093.778%20871.471%2091.754%20875.874%2090.3153C880.277%2088.8767%20885.162%2088.1543%20890.515%2088.1543V109.092H882.84C879.266%20109.092%20875.874%20109.509%20872.662%20110.338C869.45%20111.166%20866.68%20112.524%20864.358%20114.411C862.036%20116.298%20860.25%20118.845%20859.005%20122.052C857.754%20125.266%20857.131%20129.196%20857.131%20133.848V173.892H835.706H835.699Z%22%20fill%3D%22%23F7F9F2%22%2F%3E%3Cpath%20d%3D%22M921.443%20210.45L943.224%20164.588H937.871L901.985%2088.6028H925.371L951.969%20147.144L977.323%2088.6028H1000L944.12%20210.45H921.443Z%22%20fill%3D%22%23F7F9F2%22%2F%3E%3C%2Fsvg%3E"); }

/* =============================================================================
 * MOBILE NAV — hamburger drawer (CSS-only; replaces the chip row < 900px)
 * Markup contract:
 *   <input type="checkbox" id="nav-toggle" class="nav-toggle">   (first body child)
 *   <div class="mobile-bar"><div class="mb-top"> ... <label for="nav-toggle" class="hamburger"><span></span><span></span><span></span></label></div></div>
 *   <div class="app"> <aside class="nav">…</aside> <main class="main">…</main> </div>
 *   <label for="nav-toggle" class="nav-scrim" aria-hidden="true"></label>   (after .app)
 * ============================================================================= */
.nav-toggle, .hamburger, .nav-scrim { display: none; }
.hamburger { width: 36px; height: 36px; background: transparent; border: 0; padding: 0; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--color-inkwell); transition: transform .22s ease, opacity .22s ease; }

@media (max-width: 900px) {
  .hamburger { display: inline-flex; }
  .mobile-bar .mb-chips { display: none; }            /* hamburger replaces the chips */
  .mobile-bar .logo { --logo-h: 18px; }
  .nav {
    display: block;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 284px; max-width: 84vw;
    padding: 28px 22px;
    transform: translateX(-100%);
    transition: transform .26s ease;
    z-index: 120; overflow-y: auto;
    background: var(--cloud-white);
    box-shadow: 2px 0 28px rgba(15,15,15,.20);
  }
  .nav-toggle:checked ~ .app .nav { transform: translateX(0); }
  .nav-scrim { position: fixed; inset: 0; background: rgba(15,15,15,.45); z-index: 110; }
  .nav-toggle:checked ~ .nav-scrim { display: block; }
  /* hamburger morphs into an X when open */
  .nav-toggle:checked ~ .mobile-bar .hamburger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .mobile-bar .hamburger span:nth-child(2){ opacity: 0; }
  .nav-toggle:checked ~ .mobile-bar .hamburger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}

/* =============================================================================
 * GUIDE COMPONENTS  (promoted from html-render guide.css, 2026-05-28)
 * chapter pager, chapter cards (index), changelog entries. Reusable by any
 * multi-page guide built on the shared .app/.nav/.main layout.
 * ============================================================================= */
/* === CHAPTER PAGER === */
.chapter-pager {
  display: flex;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6) var(--space-6);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-body);
  gap: var(--space-4);
}
.chapter-pager a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-inkwell);
  max-width: 45%;
}
.chapter-pager a:hover .pager-title { color: var(--color-purple); }
.chapter-pager .pager-label {
  font-size: 12px;
  color: var(--color-stone);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.chapter-pager .pager-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
}
.chapter-pager .pager-next {
  text-align: right;
  margin-left: auto;
}
.chapter-pager .pager-next .pager-title::after { content: " \2192"; }
.chapter-pager .pager-prev .pager-title::before { content: "\2190 "; }

/* === CHAPTER LIST (index page) === */
.chapter-list { margin: var(--space-5) 0; }
.chapter-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.chapter-card {
  background: var(--color-row-alt);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--color-inkwell);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 1px solid var(--color-inkwell);
}
.chapter-card:hover { background: #E5E5F5; }
.chapter-card .ch-num {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-stone);
}
.chapter-card .ch-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
}
.chapter-card .ch-desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-stone);
  line-height: 1.5;
}

/* === CHANGELOG === */
.cl-entries { margin-top: var(--space-5); }
.cl-entry {
  padding-top: var(--space-5);
  margin-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.cl-entry:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.cl-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.cl-v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-inkwell);
}
.cl-date {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-stone);
}
.cl-current {
  display: inline-block;
  padding: 2px 10px;
  background: var(--color-purple);
  color: var(--color-white);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.cl-summary {
  font-size: 16px;
  margin-bottom: var(--space-3);
  color: var(--color-inkwell);
}
.cl-section { margin-bottom: var(--space-3); }
.cl-section-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-stone);
  margin-bottom: var(--space-2);
}
.cl-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cl-section li {
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  position: relative;
  font-size: 14px;
  line-height: 1.5;
}
.cl-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 8px;
  height: 1px;
  background: var(--color-stone);
}