/*
 * Blackbook Engine — design system
 * P0: tokens + reset + base + container.
 * Source: Venture CRM UI kit (decoded .fig) — see .agents/venture-ds/.
 * Locked decisions: Inter Tight · black-on-white · black primary ·
 * green=positive / red=negative / violet=rare accent.
 */
:root {
  /* --- Action --- */
  --ds-action-primary: #1D1D1F;
  --ds-action-primary-hover: #000000;
  --ds-action-primary-disabled: #E2E2E5;
  --ds-action-secondary-bg: #FFFFFF;
  --ds-action-secondary-border: #1D1D1F;
  --ds-action-secondary-text: #1D1D1F;
  --ds-action-outline: #1D1D1F;
  --ds-action-destructive: #DC2626;
  --ds-action-destructive-hover: #B91C1C;

  /* --- Accent (violet) ---
     Marks, never fills: active-nav marker, signal scores, chips, focus ring.
     --ds-text-accent is a step darker than the accent so violet *text* clears AA. */
  --ds-accent: #855CF7;
  --ds-accent-hover: #6D28D9;
  --ds-accent-on-dark: #B9A5FF;
  /* Semantic pairs for the inverse (dark) surface. The light-ground tokens are
     too dark to read there, so a market strip on ink needs its own step. */
  --ds-text-positive-on-dark: #34D37B;
  --ds-text-negative-on-dark: #FF6B6B;
  /* The inverse surface's own ink ladder and hairline. --ds-ink-inverse is full
     white, which is the account name's weight in the buying window; the why-now
     line below it whispers, and --ds-ink-muted is far too dark to read on
     --ds-bg-inverse. --ds-border-inverse is the rule the committee gap sits
     behind: a hairline *on ink*, which --ds-border cannot be. */
  --ds-ink-inverse-muted: #C9C9CE;
  --ds-border-inverse: #333333;

  /* --- Backgrounds --- */
  --ds-canvas: #F5F5F7;
  --ds-bg: #FFFFFF;
  --ds-bg-subtle: #F5F5F7;
  --ds-bg-hover: #EBEBED;
  --ds-pebble: #E2E2E5;
  --ds-bg-inverse: #1D1D1F;
  --ds-bg-positive-tint: #F0FDF4;
  --ds-bg-negative-tint: #FEF2F2;
  --ds-bg-warning-tint: #FFFBEB;
  --ds-bg-accent-tint: #F5F3FF;

  /* --- Borders ---
     --ds-border-strong is the app's form-control border and must stay a hairline.
     The artifact's heavy #707070 border is a separate role. */
  --ds-border: #D2D2D7;
  --ds-border-strong: #D4D4D4;
  --ds-border-heavy: #707070;
  --ds-border-positive: #22C55E;
  --ds-border-error: #EF4444;
  --ds-border-warning: #F59E0B;
  --ds-border-informative: #94A3B8;

  /* --- Content / ink --- */
  --ds-ink: #1D1D1F;
  --ds-ink-secondary: #474747;
  --ds-ink-muted: #707070;
  --ds-ink-inverse: #FFFFFF;
  --ds-text-positive: #15803D;
  --ds-text-negative: #DC2626;
  --ds-text-warning: #B45309;   /* amber *text*; --ds-border-warning is the border role */
  --ds-text-accent: #6D28D9;

  /* --- Typography --- */
  --ds-font-sans: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ds-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --ds-display: clamp(2.5rem, 5vw, 3.75rem);
  --ds-h1: 2.25rem;
  --ds-h2: 1.875rem;
  --ds-h3: 1.5rem;
  --ds-h4: 1.25rem;
  --ds-h5: 1.125rem;
  --ds-h6: 0.875rem;
  --ds-body-xl: 1.25rem;
  --ds-body-lg: 1.0625rem;
  --ds-body-md: 1rem;
  --ds-body-sm: 0.875rem;
  --ds-body-xs: 0.75rem;
  --ds-caption: 0.75rem;
  --ds-label-1: 0.875rem;
  --ds-label-2: 0.75rem;
  --ds-label-3: 0.75rem;
  --ds-label-4: 0.75rem;
  /* Tracking is size-specific. These were tuned against the system face and have
     not been re-measured for Inter Tight; Task 5 verifies them in the browser. */
  --ds-track-caption: -0.022em;
  --ds-track-body: -0.016em;
  --ds-track-subheading: -0.014em;
  --ds-track-sub: -0.01em;
  --ds-track-heading: -0.02em;

  /* --- Spacing (4px base) --- */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.5rem;
  --ds-space-6: 2rem;
  --ds-space-7: 3rem;
  --ds-space-8: 4rem;
  --ds-section-gap: 32px;
  --ds-card-padding: 16px;

  /* --- Layout --- */
  --ds-container: 1160px;
  /* Two values only: 8px containers, 980px pills. */
  --ds-radius: 8px;
  --ds-radius-sm: 8px;
  --ds-radius-lg: 8px;
  --ds-btn-radius: 980px;
  --ds-pill: 980px;

  /* --- Elevation ---
     Apple is shadowless by default; hairlines and surface shifts carry hierarchy.
     --shadow-xl is for floating surfaces only. --sh-card is y-only and bleeds
     inside the element gap. */
  --shadow-xl: rgba(0,0,0,.22) 3px 5px 30px 0px;
  --sh-card: rgba(0,0,0,.06) 0px 1px 2px 0px, rgba(0,0,0,.10) 0px 4px 10px -4px;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
/* The `hidden` attribute is how this app states "not rendered", but an author
   `display` rule outranks the UA's `[hidden] { display: none }` — so any element
   that also carries a class stating `display` silently ignores it. Measured on
   mh-strategy's .empty-state (.empty-state sets display:flex), which rendered on
   top of the populated panel it was meant to precede. campaigns.css carried this
   same rule page-locally; it is stated once here instead. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

/* --- Base --- */
body {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-body-md);
  line-height: 1.47;
  letter-spacing: var(--ds-track-body);
  color: var(--ds-ink);
  background: var(--ds-canvas);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.2; letter-spacing: var(--ds-track-heading); }

/* --- Layout --- */
.container { max-width: var(--ds-container); margin-inline: auto; padding-inline: 28px; }

/* --- P1: Typography utilities --- */
.text-display { font-size: var(--ds-display); font-weight: 700; line-height: 1.1; }
.text-body-xl { font-size: var(--ds-body-xl); line-height: 1.5; }
.text-body-lg { font-size: var(--ds-body-lg); line-height: 1.5; }
.text-body-md { font-size: var(--ds-body-md); line-height: 1.5; }
.text-body-sm { font-size: var(--ds-body-sm); line-height: 1.5; }
.text-body-xs { font-size: var(--ds-body-xs); line-height: 1.5; }
.text-label-1 { font-size: var(--ds-label-1); font-weight: 600; line-height: 1.4; }
.text-label-2 { font-size: var(--ds-label-2); font-weight: 600; line-height: 1.4; }
.text-label-3 { font-size: var(--ds-label-3); font-weight: 600; line-height: 1.4; }
.text-label-4 { font-size: var(--ds-label-4); font-weight: 600; line-height: 1.4; }
.text-caption { font-size: var(--ds-caption); line-height: 1.4; }
.text-small { font-size: var(--ds-body-xs); line-height: 1.4; }

/* ink + semantic text */
.text-secondary { color: var(--ds-ink-secondary); }
.text-muted { color: var(--ds-ink-muted); }
.text-inverse { color: var(--ds-ink-inverse); }
.text-positive { color: var(--ds-text-positive); }
.text-negative { color: var(--ds-text-negative); }
.text-accent { color: var(--ds-text-accent); }

/* --- P2: Primitives --- */

/* Button — two variants and one size modifier. Never two filled buttons in a view. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2);
  padding: 10px 15px; border-radius: var(--ds-btn-radius); border: 1px solid transparent;
  font-family: inherit; font-size: var(--ds-body-md); font-weight: 400; line-height: 1.2;
  letter-spacing: var(--ds-track-body);
  white-space: nowrap; cursor: pointer; text-decoration: none; text-underline-offset: 0;
  transition: transform .12s cubic-bezier(.2,.8,.2,1), background-color .12s, border-color .12s, color .12s;
}
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; }
.btn-sm { padding: 8px 14px; font-size: var(--ds-body-sm); }
.btn-lg { padding: 12px 20px; font-size: var(--ds-body-lg); }
.btn-primary { background: var(--ds-action-primary); color: var(--ds-ink-inverse); }
.btn-primary:hover { background: var(--ds-action-primary-hover); }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] { background: var(--ds-action-primary-disabled); color: var(--ds-ink-muted); }

/* .btn-ghost is the outlined action. It absorbed the old .btn-secondary. */
.btn-ghost { background: var(--ds-bg); color: var(--ds-ink); border-color: var(--ds-ink); }
.btn-ghost:hover { background: var(--ds-canvas); }
.btn-outline { background: transparent; color: var(--ds-action-outline); border-color: var(--ds-action-outline); }
.btn-outline:hover { background: var(--ds-canvas); }
/* Outline destructive: the destructive action that is not the page's one filled
   button — row actions in a table, mostly. */
.btn-destructive-outline { background: transparent; color: var(--ds-text-negative); border-color: var(--ds-border-error); }
.btn-destructive-outline:hover { background: var(--ds-bg-negative-tint); }
/* The outlined family carries its whole state in ink and border, so the base
   `.btn:disabled` rule — cursor alone — left a disabled one painting exactly
   like an enabled one. `.btn-primary:disabled` above sets a background because
   .btn-primary has one to set; these have none, so mute both parts instead. */
.btn-ghost:disabled, .btn-ghost[aria-disabled="true"],
.btn-outline:disabled, .btn-outline[aria-disabled="true"],
.btn-destructive-outline:disabled,
.btn-destructive-outline[aria-disabled="true"] { color: var(--ds-ink-muted); border-color: var(--ds-border); }
.btn-destructive { background: var(--ds-action-destructive); color: var(--ds-ink-inverse); }
.btn-destructive:hover { background: var(--ds-action-destructive-hover); }
.btn-link { background: transparent; color: var(--ds-ink); padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.btn-link:hover { color: var(--ds-ink-secondary); }

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: var(--ds-space-1);
  padding: 0.125rem 0.5rem; border-radius: var(--ds-pill); border: 1px solid transparent;
  font-size: var(--ds-label-2); font-weight: 400; line-height: 1.4; white-space: nowrap;
}
.badge-neutral { background: var(--ds-bg-subtle); color: var(--ds-ink-secondary); border-color: var(--ds-border); }
.badge-positive { background: var(--ds-bg-positive-tint); color: var(--ds-text-positive); border-color: var(--ds-border-positive); }
.badge-negative { background: var(--ds-bg-negative-tint); color: var(--ds-text-negative); border-color: var(--ds-border-error); }
.badge-accent { background: var(--ds-bg-accent-tint); color: var(--ds-text-accent); border-color: var(--ds-accent); }
.badge-warning { background: var(--ds-bg-subtle); color: var(--ds-ink-secondary); border-color: var(--ds-border-warning); }
.badge-inverse { background: var(--ds-bg-inverse); color: var(--ds-ink-inverse); }

/* Tag */
.tag {
  display: inline-flex; align-items: center; gap: var(--ds-space-1);
  padding: 0.25rem 0.625rem; border-radius: var(--ds-pill);
  background: var(--ds-bg-subtle); border: 1px solid var(--ds-border);
  font-size: var(--ds-label-2); font-weight: 400; color: var(--ds-ink-secondary); white-space: nowrap;
}

/* Avatar */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--ds-bg-subtle); border: 1px solid var(--ds-border);
  color: var(--ds-ink); font-size: var(--ds-body-sm); font-weight: 600; flex: none;
}
.avatar-sm { width: 1.75rem; height: 1.75rem; font-size: var(--ds-body-xs); }
.avatar-lg { width: 3rem; height: 3rem; font-size: var(--ds-body-md); }
.avatar-accent { background: var(--ds-bg-accent-tint); color: var(--ds-text-accent); }

/* Form controls */
.input, .textarea, .select {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  background: var(--ds-bg); color: var(--ds-ink);
  font-family: inherit; font-size: var(--ds-body-sm); line-height: 1.4;
  letter-spacing: var(--ds-track-body);
}
.input::placeholder, .textarea::placeholder { color: var(--ds-ink-muted); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--ds-ink-secondary); }
.input:focus, .textarea:focus, .select:focus { outline: 2px solid var(--ds-accent); outline-offset: 0; border-color: var(--ds-ink); }
.input:disabled, .textarea:disabled, .select:disabled { background: var(--ds-bg-subtle); color: var(--ds-ink-muted); cursor: not-allowed; }
.input-error, .input[aria-invalid="true"] { border-color: var(--ds-border-error); }
.textarea { resize: vertical; min-height: 6rem; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' stroke='%231D1D1F' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.25rem;
}
.checkbox, .radio { accent-color: var(--ds-action-primary); width: 1rem; height: 1rem; cursor: pointer; }

/* Inline-editable text. Lived in crm.css, which campaigns.html does not load,
   so the page's own .editable spans rendered with no styling at all. */
.editable { cursor: pointer; border-bottom: 1px dashed var(--ds-border-strong); }
.editable:hover { border-bottom-color: var(--ds-ink); }
.editable input { font-size: inherit; border: 1px solid var(--ds-ink); border-radius: var(--ds-radius-sm); padding: 2px 6px; width: 100%; }

/* Form groups. Four pages hand-rolled this label before it was shared. */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: var(--ds-label-2); color: var(--ds-ink-secondary); }

/* Toggle */
.toggle {
  appearance: none; width: 38px; height: 22px; border-radius: var(--ds-pill);
  background: var(--ds-pebble); position: relative; cursor: pointer;
  transition: background-color .12s; flex: none;
}
.toggle:checked { background: var(--ds-action-primary); }
.toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--ds-bg);
  transition: left .12s cubic-bezier(.2,.8,.2,1);
}
.toggle:checked::after { left: 18px; }
.toggle:disabled { opacity: .5; cursor: not-allowed; }

/* Tooltip (use data-tooltip="…" on the element) */
.tooltip { position: relative; }
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--ds-bg-inverse); color: var(--ds-ink-inverse);
  padding: 0.25rem 0.5rem; border-radius: var(--ds-radius-sm);
  font-size: var(--ds-body-xs); font-weight: 500; white-space: nowrap;
  opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none;
  z-index: 10;
}
.tooltip:hover::after, .tooltip:focus-visible::after { opacity: 1; visibility: visible; }

/* Divider */
.divider { border: 0; border-top: 1px solid var(--ds-border); margin: var(--ds-space-4) 0; }
.divider-vertical { border: 0; border-left: 1px solid var(--ds-border); }

/* Spinner */
.spinner {
  width: 1.25rem; height: 1.25rem; flex: none;
  border: 2px solid var(--ds-border); border-top-color: var(--ds-ink); border-radius: 50%;
  animation: ds-spin .7s linear infinite;
}
.spinner-sm { width: 0.875rem; height: 0.875rem; }
@keyframes ds-spin { to { transform: rotate(360deg) } }

/* Skeleton */
.skeleton { background: var(--ds-pebble); border-radius: var(--ds-radius-sm); animation: ds-pulse 1.6s ease-in-out infinite; }
@keyframes ds-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.5 } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.4s; }
  .skeleton { animation: none; }
}

/* --- P3: Composites --- */

/* App shell — the rail is canvas, not a card: it recedes behind a hairline. */
.sidebar {
  width: 216px; flex: none;
  display: flex; flex-direction: column; gap: 2px;
  padding: 20px 12px;
  background: var(--ds-canvas); border-right: 1px solid var(--ds-border);
}
.rail-brand {
  display: flex; align-items: center; padding: 0 10px 20px;
  text-decoration: none; font-weight: 600; font-size: var(--ds-body-lg);
  letter-spacing: var(--ds-track-sub); color: var(--ds-ink);
}
.rail-brand span { color: var(--ds-ink-muted); font-weight: 400; }
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: var(--ds-radius);
  color: var(--ds-ink-secondary); font-size: var(--ds-body-sm); font-weight: 400;
  letter-spacing: var(--ds-track-body);
  text-decoration: none; background: none; width: 100%; text-align: left;
  transition: background-color .12s, color .12s;
}
.nav-item .nav-n {
  font-size: var(--ds-body-xs); color: var(--ds-ink-muted);
  font-variant-numeric: tabular-nums;
}
/* The rail is canvas, so a subtle hover on it would be invisible. */
.nav-item:hover { background: var(--ds-bg-hover); color: var(--ds-ink); }
/* Selected lifts to a white surface; the violet bar is the only marker. */
.nav-item.is-active { background: var(--ds-bg); color: var(--ds-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--ds-accent); }
.nav-item.is-active .nav-n { color: var(--ds-text-accent); }
.rail-sep { height: 1px; background: var(--ds-border); margin: 8px 2px; }
.rail-door { margin-top: auto; }
.topbar {
  display: flex; align-items: center; gap: var(--ds-space-3); flex-wrap: wrap;
  min-height: 64px; padding: 14px 28px;
  background: var(--ds-bg); border-bottom: 1px solid var(--ds-border);
}
.nav-toggle-btn {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: none; border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  color: var(--ds-ink); cursor: pointer; flex: none;
}
.nav-toggle-btn:hover { background: var(--ds-bg-subtle); }
.nav-toggle-btn span { display: block; width: 16px; height: 2px; background: currentColor; margin: 2px 0; border-radius: 1px; }
@media (max-width: 768px) {
  .nav-toggle-btn { display: inline-flex; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 90;
    transform: translateX(-100%); transition: transform .18s ease;
    width: 216px; max-width: 78vw;
  }
  .dashboard-shell.sidebar-open .sidebar { transform: translateX(0); box-shadow: 0 0 0 100vmax rgba(29,29,31,.35); }
  .dashboard-shell .dashboard-main { min-width: 0; }
  .topbar .page-title { flex: 1; }
  .topbar .search-input { order: 5; max-width: none !important; width: 100%; }
}
.board-toolbar {
  display: flex; align-items: center; gap: var(--ds-space-2); flex-wrap: wrap;
  padding: 14px 28px;
  background: var(--ds-bg); border-bottom: 1px solid var(--ds-border);
}

/* Card */
.card { background: var(--ds-bg); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); padding: var(--ds-card-padding); }
/* A card the user has taken out of the working set, kept in view. */
.card.is-removed { opacity: .55; background: var(--ds-bg-hover); }

.card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); margin-bottom: var(--ds-space-3); }
.card-title { font-size: var(--ds-h5); font-weight: 600; letter-spacing: var(--ds-track-subheading); }

/* The only y-only elevation: surfaces that sit on the canvas and need to read
   as lifted. Every other shadow in this file is --shadow-xl, for floating
   surfaces, or a token-based marker. */
.card, .stat-tile, .detail-section, .chart-card,
.search-group { box-shadow: var(--sh-card); }

/* Stat tile */
.stat-tile { background: var(--ds-bg); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); padding: var(--ds-card-padding); }
.stat-tile .stat-label { font-size: var(--ds-label-2); font-weight: 600; color: var(--ds-ink-muted); }
.stat-tile .stat-value { font-size: var(--ds-h2); font-weight: 700; margin-top: var(--ds-space-1); }
.stat-delta-up { color: var(--ds-text-positive); font-size: var(--ds-body-sm); font-weight: 600; }
.stat-delta-down { color: var(--ds-text-negative); font-size: var(--ds-body-sm); font-weight: 600; }

/* Table */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--ds-body-sm); }
.table th { text-align: left; font-size: var(--ds-label-2); font-weight: 400; color: var(--ds-ink-muted); padding: 8px 10px; border-bottom: 1px solid var(--ds-border); white-space: nowrap; position: sticky; top: 0; background: var(--ds-bg); }
.table td { padding: 10px; border-bottom: 1px solid var(--ds-border); vertical-align: middle; letter-spacing: var(--ds-track-body); }
.table tbody tr:hover { background: var(--ds-canvas); }
.table tbody tr:last-child td { border-bottom: 0; }

/* Dropdown (CSS-only; JS toggles .is-open if needed) */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 11rem; background: var(--ds-bg); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); box-shadow: var(--shadow-xl); padding: var(--ds-space-1); z-index: 20; opacity: 0; visibility: hidden; transition: opacity .12s; }
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; }
.dropdown-item { display: flex; align-items: center; gap: var(--ds-space-2); width: 100%; padding: 0.5rem 0.625rem; border-radius: var(--ds-radius-sm); font-size: var(--ds-body-sm); color: var(--ds-ink); background: none; border: 0; cursor: pointer; text-align: left; text-decoration: none; }
.dropdown-item:hover { background: var(--ds-bg-subtle); }
.dropdown-item.is-danger { color: var(--ds-text-negative); }

/* Modal (toggle .is-open) */
/* Wide sheet variant: the ICP builder's conversation and wizard sheets need a
   much larger measure than a dialog. Opted into at the openModal call site. */
.modal.modal-wide { width: min(94vw, 1060px); padding: 0; }

.modal-overlay { position: fixed; inset: 0; background: rgba(29,29,31,.42); display: flex; align-items: center; justify-content: center; padding: var(--ds-space-4); z-index: 100; opacity: 0; visibility: hidden; transition: opacity .15s; }
.modal-overlay.is-open { opacity: 1; visibility: visible; }
.modal { background: var(--ds-bg); border-radius: var(--ds-radius); width: min(560px, 100%); padding: var(--ds-space-5); box-shadow: var(--shadow-xl); max-height: calc(100vh - var(--ds-space-4) - var(--ds-space-4)); max-height: calc(100dvh - var(--ds-space-4) - var(--ds-space-4)); overflow-y: auto; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ds-space-3); }
.modal-title { font-size: var(--ds-h4); font-weight: 700; }
/* Footer: a hairline rule, actions right-aligned, one outlined action paired
   with one filled. See docs/superpowers/specs/2026-09-12-apple-appendix-rulings.md §3. */
.modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--ds-space-2);
  border-top: 1px solid var(--ds-border); padding-top: 12px; margin-top: var(--ds-space-3); }

/* Toast */
.toast { position: fixed; bottom: var(--ds-space-5); right: var(--ds-space-5); display: flex; align-items: center; gap: var(--ds-space-2); background: var(--ds-bg-inverse); color: var(--ds-ink-inverse); padding: 0.75rem 1rem; border-radius: var(--ds-radius); font-size: var(--ds-body-sm); font-weight: 500; box-shadow: var(--shadow-xl); z-index: 120; }
.toast-positive { background: var(--ds-text-positive); }
.toast-negative { background: var(--ds-text-negative); }

/* The bordered error surface. Not a status line — the copy states the failure
   and the action, and the colour never carries it alone. */
.error-block { border: 1px solid var(--ds-border-error); border-radius: var(--ds-radius);
  padding: var(--ds-space-3); font-size: var(--ds-body-sm); color: var(--ds-text-negative); }

/* Tabs */
.tabs { display: flex; gap: var(--ds-space-1); border-bottom: 1px solid var(--ds-border); overflow-x: auto; }
.tabs > .tab { flex: 0 0 auto; white-space: nowrap; }
.tab { padding: 0.5rem 0.75rem; font-size: var(--ds-body-sm); font-weight: 600; color: var(--ds-ink-muted); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.tab:hover { color: var(--ds-ink); }
.tab.is-active { color: var(--ds-ink); border-bottom-color: var(--ds-action-primary); }

/* Empty state */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--ds-space-2); padding: var(--ds-space-7) var(--ds-space-4); color: var(--ds-ink-muted); }
.empty-state .empty-icon { font-size: 2rem; }

/* Progress bar */
.progress-bar { height: 4px; background: var(--ds-pebble); border-radius: var(--ds-pill); overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--ds-action-primary); border-radius: var(--ds-pill); }
.progress-bar-fill.is-positive { background: var(--ds-border-positive); }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-body-sm); color: var(--ds-ink-muted); }
.breadcrumb a { color: var(--ds-ink-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--ds-ink); text-decoration: underline; }
.breadcrumb-item + .breadcrumb-item::before { content: '/'; color: var(--ds-border-strong); margin-right: var(--ds-space-2); }

/* Accordion (native <details>/<summary>) */
.accordion { border: 1px solid var(--ds-border); border-radius: var(--ds-radius); background: var(--ds-bg); }
.accordion summary { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; cursor: pointer; font-size: var(--ds-body-sm); font-weight: 600; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; color: var(--ds-ink-muted); font-weight: 600; }
.accordion[open] summary::after { content: '−'; }
.accordion .accordion-body { padding: 0 1rem 0.75rem; font-size: var(--ds-body-sm); color: var(--ds-ink-secondary); }

/* Search input */
.search-input input {
  width: 100%; padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius);
  font: inherit; font-size: var(--ds-body-sm); background-color: var(--ds-bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><circle cx='7' cy='7' r='4.5' fill='none' stroke='%23707070' stroke-width='1.5'/><path d='M10.5 10.5L14 14' stroke='%23707070' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: left 0.75rem center;
}
.search-input input:focus { outline: 2px solid var(--ds-accent); outline-offset: 0; border-color: var(--ds-ink); }

/* List item */
.list-item { display: flex; align-items: center; gap: var(--ds-space-3); padding: 0.625rem 0.75rem; border-radius: var(--ds-radius); font-size: var(--ds-body-sm); }
.list-item:hover { background: var(--ds-bg-subtle); }
.list-item-title { font-weight: 600; color: var(--ds-ink); }
.list-item-sub { font-size: var(--ds-body-xs); color: var(--ds-ink-muted); }
.list-item-meta { margin-left: auto; font-size: var(--ds-body-xs); color: var(--ds-ink-muted); }

/* Segmented control — the artifact's `.seg` (L227-230). One control for six
   near-identical implementations across the artifact and the app; the brief rules
   it. `.seg-fill` is the artifact's `.lseg` case: a control that fills its
   container rather than sizing to content.

   The frame is --ds-border-heavy, NOT --ds-border-strong. The artifact reads
   `var(--ds-border-strong)` here, but that token is #707070 in the artifact and
   #D4D4D4 in the app, where it is the form-control hairline. */
.seg { display: inline-flex; border: 1px solid var(--ds-border-heavy);
  border-radius: var(--ds-radius); overflow: hidden; background: var(--ds-bg); }
.seg button { flex: none; border: none; background: transparent; font-size: 0.75rem;
  font-weight: 600; padding: 6px 13px; color: var(--ds-ink-secondary);
  border-left: 1px solid var(--ds-border); cursor: pointer; }
.seg button:first-child { border-left: none; }
.seg button.on { background: var(--ds-action-primary); color: var(--ds-ink-inverse); }
/* The artifact's comment: segmented controls clip at their own edge, so they dim
   rather than scale. */
.seg button:active { opacity: .72; }
.seg-fill { display: flex; }
.seg-fill button { flex: 1; padding: 6px 0; background: var(--ds-bg); }
.seg-fill button.on { font-weight: 600; }

/* The strip a segmented control sits in and the label that names it — the
   artifact's `.segbar`/`.seg-lab` (L221-222), promoted here for the same reason
   `.seg` was: the accounts screen and the approved Account Strategy screen are
   two call sites, and a page-local copy would be the second dialect. A control
   inside a panel that already spaces its children states its own
   `margin-bottom: 0`; brief §7's one-override pattern. */
.segbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.seg-lab { font-size: 0.75rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ds-ink-muted); }

/* The committee-gap answer row — the artifact's `.gapq` (L731). Moved here from
   index.css, where nothing produced a gap task; the Account Strategy screen is
   now its live call site and the Front Page can reach it from this file too.
   `.st` carries margin-left:auto to trail an .arow, which would drag the first
   chip right in a chip row, so a call site states `.gapq .st{margin-left:0}`. */
.gapq { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.gapq button { font-size: 0.8125rem; padding: 7px 14px; border-radius: var(--ds-pill);
  border: 1px solid var(--ds-ink); background: var(--ds-bg); color: var(--ds-ink); cursor: pointer; }
.gapq button:hover { background: var(--ds-canvas); }

/* Settings list — the artifact's Configure screen (L370-380), promoted whole.
   A .cfg is a bordered container of static key/value rows; .cfg-out is the
   footnote band below it, on canvas rather than white so it reads as an aside.

   Two artifact asymmetries are carried deliberately: .cfg-nm states no
   letter-spacing, and .cfg-row has no hover state. It is read-only. */
.cfg { border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  overflow: hidden; background: var(--ds-bg); }
.cfg-row { display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-bottom: 1px solid var(--ds-border); }
.cfg-row:last-child { border-bottom: none; }
.cfg-nm { font-weight: 600; font-size: 0.9375rem; }
.cfg-sub { font-size: 0.75rem; color: var(--ds-ink-muted); margin-top: 2px;
  letter-spacing: var(--ds-track-caption); }
.cfg-tag { margin-left: auto; font-family: var(--ds-font-mono); font-size: 0.75rem;
  border: 1px solid var(--ds-border-heavy); border-radius: var(--ds-pill);
  padding: 3px 11px; color: var(--ds-ink-secondary); white-space: nowrap; }
.cfg-out { border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  padding: 16px 18px; background: var(--ds-canvas); }
.cfg-out-lab { font-family: var(--ds-font-mono); font-size: 0.75rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ds-ink-muted); }
.cfg-out-txt { font-size: 0.875rem; line-height: 1.45; margin-top: 6px;
  color: var(--ds-ink-secondary); }

/* The artifact's row vocabulary, promoted whole. Three slices need it and §4.2's
   ownership rule allows no file in two rows, so it is shared here or the three
   sessions collide on this file.

   Three merges were made, per the brief:
     .arow absorbs .qrow   — identical hover and identical inset-violet selection;
                             the artifact chose .on for one and .sel for the other.
     .st absorbs .asig     — both are 2px 10px pills; .asig.hot and .st.ok are the
                             same "this is good" signal.
     .qnm's two definitions — byte-identical at artifact L136 and L343. */
.col-head { font-size: 1.125rem; font-weight: 600; letter-spacing: var(--ds-track-subheading);
  line-height: 1.24; display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.col-head .count { margin-left: auto; font-size: 0.75rem; color: var(--ds-ink-muted);
  font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: var(--ds-track-caption); }

/* The .arow container. Two pages render it — the accounts screen and the approved
   Account Strategy screen — which is the same two-call-site case that promoted
   `.segbar`. It was defined page-local in target-accounts.css, so mh-strategy's list
   consumed the name without the rule and rendered borderless.
   The elevation is the artifact's own (its grouped rule at artifact L413 names
   .acct-list with .committee/.feedrow/.queue): top-level card surfaces only, nested
   insets staying flat so shadows never stack on shadows. */
.acct-list { border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  overflow: hidden; background: var(--ds-bg); box-shadow: var(--sh-card); }
/* The rows are tabbable and the shared .arow states hover and selection but no focus
   ring, so the container states one for every page that renders it. */
.acct-list .arow:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: -2px; }

/* The selectable row. .qrow's `gap:10px;padding:12px 16px` and its `.sel` modifier are
   deliberately dropped — collapsing the two is the point, and .arow's own rhythm wins.
   The artifact lists only .arow/.qrow in its transition table; .15s is applied to all
   four row shapes by the brief, because omitting it from .taskrow was an oversight. */
.arow { display: flex; align-items: center; gap: 11px; padding: 14px 16px;
  border-bottom: 1px solid var(--ds-border); cursor: pointer; transition: background .15s; }
.arow:last-child { border-bottom: none; }
.arow:hover { background: var(--ds-canvas); }
.arow.on { background: var(--ds-canvas); box-shadow: inset 3px 0 0 var(--ds-action-primary); }

/* Row internals. `.an`/`.ac`/`.ac-nm`/`.ac-sub` are `.arow`'s own slots and two
   pages in slice A render them (the accounts screen and the approved Account
   Strategy screen), which is the same two-call-site case that promoted `.segbar`.
   `.arev` is not here: it is the accounts screen's revenue slot, one call site. */
.an { font-weight: 600; font-size: 0.9375rem; color: var(--ds-ink-muted); width: 18px;
  text-align: center; flex: none; font-variant-numeric: tabular-nums; }
.arow.on .an { color: var(--ds-ink); }
.ac { flex: 1; min-width: 0; }
.ac-nm { font-weight: 600; font-size: 0.9375rem; letter-spacing: var(--ds-track-sub); }
.ac-sub { font-size: 0.75rem; color: var(--ds-ink-muted); margin-top: 1px;
  letter-spacing: var(--ds-track-caption); }

.qrank { font-family: var(--ds-font-mono); font-size: 0.75rem; color: var(--ds-ink-muted);
  width: 16px; flex: none; padding-top: 2px; font-variant-numeric: tabular-nums; }
.qbody { flex: 1; min-width: 0; }
.qhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* No layout properties: one call site renders this as a <span> in a flex row and
   the other as a <div> in block flow. */
.qnm { font-weight: 600; font-size: 0.9375rem; }
.qco { font-size: 0.75rem; color: var(--ds-ink-muted); letter-spacing: var(--ds-track-caption); }
.qsub { font-size: 0.75rem; color: var(--ds-ink-muted); letter-spacing: var(--ds-track-caption); }
.qtag { font-size: 0.75rem; border-radius: var(--ds-pill); font-weight: 400; padding: 3px 11px;
  border: 1px solid var(--ds-border); color: var(--ds-ink-secondary); white-space: nowrap; }
.qwhy { font-size: 0.75rem; color: var(--ds-ink-secondary); margin-top: 4px; line-height: 1.45; }
.qav { width: 26px; height: 26px; border-radius: 50%; background: var(--ds-canvas);
  border: 1px solid var(--ds-border); display: flex; align-items: center;
  justify-content: center; font-size: 0.75rem; font-weight: 600; flex: none; }

/* The status pill. .asig's bordered neutral is the base and the artifact's .st
   variants sit on top of it; .st-end is the artifact's `margin-left:auto` case,
   which belongs on the call site and not on every status pill. */
.st { font-size: 0.75rem; font-weight: 600; border-radius: var(--ds-pill); padding: 2px 10px;
  border: 1px solid var(--ds-border); color: var(--ds-ink-muted); white-space: nowrap; }
.st.todo { border: 1px solid var(--ds-border-heavy); color: var(--ds-ink-secondary); }
.st.ok { border: 1px solid var(--ds-border-positive); color: var(--ds-text-positive); }
.st-end { margin-left: auto; }

/* --- P4: Page archetypes --- */

/* App pages */
.dashboard-shell { display: flex; min-height: 100vh; }
.dashboard-shell .dashboard-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dashboard-shell .dashboard-content { padding: 28px 28px var(--ds-section-gap); }
/* The reading column. The artifact's `.main` (L88) uses var(--ds-container) = 1160px.
   Five pages declared this at four widths before it was shared, and the cascade —
   not the design system — decided which one rendered. */
.board-body { max-width: var(--ds-container); margin: 0 auto; }

/* The artifact's page wrapper (L94). Every screen is a flex column at a 16px gap. */
.screen { display: flex; flex-direction: column; gap: var(--ds-space-4); }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-4); flex-wrap: wrap; }
/* The topbar lays out as a row; the title and its lede are one column inside it. */
.topbar-head { display: flex; flex-direction: column; min-width: 0; }
/* The artifact's `.topbar h1` (L90). Stated as a literal because the artifact does;
   --ds-h1 shares the value but --ds-display is a marketing clamp. */
.page-title { font-size: 2.25rem; font-weight: 600; letter-spacing: var(--ds-track-heading); line-height: 1.14; }
.page-actions { display: flex; gap: var(--ds-space-2); }
.data-table-page, .form-page, .detail-page { padding: var(--ds-space-5); display: flex; flex-direction: column; gap: var(--ds-space-4); }

/* Board (kanban) */
.board-page { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ds-space-4); align-items: start; }
.board-column { display: flex; flex-direction: column; gap: var(--ds-space-2); background: var(--ds-bg); border-radius: var(--ds-radius-lg); padding: var(--ds-space-3); }
.board-column-title { font-size: var(--ds-label-2); font-weight: 600; color: var(--ds-ink-secondary); padding: 0 var(--ds-space-2) var(--ds-space-2); }
.board-card { background: var(--ds-bg); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); padding: var(--ds-space-3); }

/* Auth */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--ds-space-4); background: var(--ds-bg-subtle); }
.auth-card { width: 100%; max-width: 24rem; background: var(--ds-bg); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: var(--ds-space-6); box-shadow: var(--shadow-xl); }

/* Calendar */
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); overflow: hidden; }
.calendar-dow { font-size: var(--ds-label-3); font-weight: 600; color: var(--ds-ink-muted); padding: 0.375rem; border-bottom: 1px solid var(--ds-border); }
.calendar-day { min-height: 72px; padding: var(--ds-space-1); border-top: 1px solid var(--ds-border); border-left: 1px solid var(--ds-border); font-size: var(--ds-body-xs); color: var(--ds-ink-secondary); }
.calendar-day.is-today { background: var(--ds-bg-accent-tint); }
.calendar-day.is-muted { color: var(--ds-ink-muted); }

/* Marketing */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-6); align-items: center; padding: var(--ds-space-8) 0; }
.hero-eyebrow { font-size: var(--ds-label-1); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ds-accent); }
.hero h1 { font-size: var(--ds-display); line-height: 1.1; margin-top: var(--ds-space-3); }
.hero-sub { font-size: var(--ds-body-lg); color: var(--ds-ink-secondary); margin-top: var(--ds-space-3); max-width: 34rem; }
.hero-cta { display: flex; gap: var(--ds-space-3); margin-top: var(--ds-space-5); flex-wrap: wrap; }
@media (max-width: 768px) { .hero { grid-template-columns: 1fr; } }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--ds-space-5); }
.feature-card { padding: var(--ds-space-5); }
.feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--ds-radius); background: var(--ds-bg-subtle); margin-bottom: var(--ds-space-3); }
.pricing-card { display: flex; flex-direction: column; gap: var(--ds-space-4); padding: var(--ds-space-6); }
.pricing-card.is-featured { box-shadow: var(--sh-card); border-color: var(--ds-action-primary); }
.pricing-price { font-size: var(--ds-h1); font-weight: 700; }
.pricing-period { font-size: var(--ds-body-sm); color: var(--ds-ink-muted); }
.blog-card { display: flex; flex-direction: column; gap: var(--ds-space-2); padding: var(--ds-space-4); text-decoration: none; }
.blog-card:hover { border-color: var(--ds-border-strong); }
.blog-card .blog-date { font-size: var(--ds-label-3); color: var(--ds-ink-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.blog-card h3 { font-size: var(--ds-h5); }
.cta-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-5); flex-wrap: wrap; background: var(--ds-bg-inverse); color: var(--ds-ink-inverse); border-radius: var(--ds-radius-lg); padding: var(--ds-space-7) var(--ds-space-6); }
.cta-banner h2 { font-size: var(--ds-h3); color: var(--ds-ink-inverse); margin: 0; }
.cta-banner .cta-sub { color: rgba(255,255,255,.7); }
.footer { border-top: 1px solid var(--ds-border); padding: var(--ds-space-6) 0; color: var(--ds-ink-muted); font-size: var(--ds-body-sm); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-4); flex-wrap: wrap; }
.footer-links { display: flex; gap: var(--ds-space-4); }
.footer-links a { color: var(--ds-ink-secondary); text-decoration: none; }
.footer-links a:hover { color: var(--ds-ink); }

/* --- P5: Marketing site revamp (2026-08-20) — shared chrome + home archetypes --- */

/* Site nav (shared chrome) */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--ds-bg);
  border-bottom: 1px solid var(--ds-border);
}
.site-nav .nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-4);
  flex-wrap: wrap; padding: 0.75rem 0;
}
.site-nav .logo { display: inline-flex; align-items: center; gap: var(--ds-space-2); text-decoration: none; }
.site-nav .logo img { height: 30px; }
.nav-links { display: flex; align-items: center; gap: var(--ds-space-1); flex-wrap: wrap; }
.nav-links a {
  padding: 0.5rem 0.75rem; border-radius: var(--ds-radius);
  font-size: var(--ds-body-sm); font-weight: 600; color: var(--ds-ink-secondary);
  text-decoration: none;
}
.nav-links a:hover { color: var(--ds-ink); background: var(--ds-bg-subtle); }
.nav-links a[aria-current="page"] { color: var(--ds-ink); }
.nav-cta { display: flex; align-items: center; gap: var(--ds-space-2); }
@media (max-width: 720px) { .nav-cta { width: 100%; justify-content: center; } }

/* Section rhythm */
.section { padding: var(--ds-space-8) 0; }
/* The heading of an app-page section. Two pages declared this at two different
   sizes before it was shared; mh-strategy consumed it with no rule at all. */
.section-title { font-size: var(--ds-h3); font-weight: 600; letter-spacing: var(--ds-track-heading); margin: 0 0 var(--ds-space-4); }
.section-alt { background: var(--ds-bg-subtle); }
.section-head { text-align: center; max-width: 44rem; margin: 0 auto var(--ds-space-7); }
.section-head .eyebrow { font-size: var(--ds-label-1); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ds-ink-muted); }
.section-head h1 { font-size: var(--ds-h1); margin-top: var(--ds-space-3); }
.section-head h2 { font-size: var(--ds-h2); margin-top: var(--ds-space-3); }
.section-head p { color: var(--ds-ink-secondary); margin-top: var(--ds-space-3); font-size: var(--ds-body-lg); }

/* Split hero (two-column — product visual right, Venture home style) */
.hero--split { display: block; }
.hero--split .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-7); align-items: center; }
@media (max-width: 768px) { .hero--split .container { grid-template-columns: 1fr; } }

/* Narrative lede — the artifact's `.lede` (L92-93). Weight 300 is the artifact's
   "signature whisper-voice for descriptors"; 62ch is its measure. This replaced a
   marketing variant that was centred and capped at 40rem.
   line-height 1.5, not the artifact's 1.24: at 18px/300 with a 62ch measure the lede
   is multi-line body copy, and 1.24 packs the lines tight enough to hurt readability.
   1.5 is what `.text-body-lg` already uses at this exact size. */
.lede { max-width: 62ch; font-size: 1.125rem; font-weight: 300; line-height: 1.5;
  letter-spacing: var(--ds-track-subheading); color: var(--ds-ink-secondary); }
.lede p + p { margin-top: var(--ds-space-4); }
.lede strong { color: var(--ds-ink); }

/* Engine steps */
.engine-steps { display: grid; gap: var(--ds-space-5); max-width: 46rem; margin: 0 auto; }
.engine-step { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--ds-space-4); align-items: baseline; text-align: left; }
.engine-step .step-num { font-size: var(--ds-label-1); font-weight: 600; color: var(--ds-ink-muted); font-variant-numeric: tabular-nums; }
.engine-step h3 { font-size: var(--ds-h5); }
.engine-step p { color: var(--ds-ink-secondary); margin-top: var(--ds-space-1); font-size: var(--ds-body-sm); }

/* Proof band (stats-only) */
.proof-band { background: var(--ds-bg-inverse); color: var(--ds-ink-inverse); padding: var(--ds-space-8) 0; }
.proof-stats { max-width: 40rem; margin: 0 auto; text-align: center; }
.proof-stats .proof-big { font-size: clamp(3rem, 7vw, 5rem); font-weight: 700; line-height: 1; }
.proof-stats .proof-big--muted { color: rgba(255, 255, 255, 0.45); }
.proof-stats .proof-caption { color: rgba(255, 255, 255, 0.7); margin: var(--ds-space-2) auto 0; font-size: var(--ds-body-sm); max-width: 18rem; }
.proof-stats .proof-ratio { margin-top: var(--ds-space-5); color: var(--ds-text-accent); font-weight: 600; font-size: var(--ds-body-sm); }

/* Board preview (hero dashboard mockup — David swaps in the real execution board later) */
.board-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); padding: var(--ds-space-3) 0; border-top: 1px solid var(--ds-border); }
.board-row:first-of-type { border-top: 0; }
.board-row h4 { font-size: var(--ds-body-sm); font-weight: 600; }
.board-row p { font-size: var(--ds-body-xs); color: var(--ds-ink-muted); margin-top: 2px; }
.board-row .board-meta { flex: none; text-align: right; }

/* Footer columns */
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--ds-space-6); }
.footer-grid h4 { font-size: var(--ds-label-2); font-weight: 600; color: var(--ds-ink-secondary); margin-bottom: var(--ds-space-3); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-2); }
.footer-grid a { color: var(--ds-ink-muted); text-decoration: none; font-size: var(--ds-body-sm); }
.footer-grid a:hover { color: var(--ds-ink); }
.footer-brand img { height: 30px; }
.footer-brand p { color: var(--ds-ink-muted); font-size: var(--ds-body-sm); margin-top: var(--ds-space-2); max-width: 22rem; }
.footer-bottom { margin-top: var(--ds-space-6); padding-top: var(--ds-space-4); border-top: 1px solid var(--ds-border); color: var(--ds-ink-muted); font-size: var(--ds-body-xs); }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }

/* --- P5: Subpage support (features, intel-assets, pricing, about, contact, blog) --- */

/* Two-column feature grid (detail cards with bullets) */
.feature-grid--2 { grid-template-columns: repeat(2, 1fr); }
.feature-grid--2 .feature-card p { color: var(--ds-ink-secondary); margin-top: var(--ds-space-2); }
.feature-grid--2 .feature-card ul { list-style: none; margin: var(--ds-space-3) 0 0; padding: 0; display: grid; gap: var(--ds-space-2); }
.feature-grid--2 .feature-card li { padding-left: 1.25rem; position: relative; font-size: var(--ds-body-sm); color: var(--ds-ink-secondary); }
.feature-grid--2 .feature-card li::before { content: '—'; position: absolute; left: 0; color: var(--ds-ink-muted); }
@media (max-width: 768px) { .feature-grid--2 { grid-template-columns: 1fr; } }

/* Article prose (blog) */
.article { max-width: 44rem; margin: 0 auto; }
.article p { font-size: var(--ds-body-lg); line-height: 1.7; color: var(--ds-ink-secondary); }
.article p + p { margin-top: var(--ds-space-4); }
.article h2 { font-size: var(--ds-h3); margin: var(--ds-space-7) 0 var(--ds-space-3); color: var(--ds-ink); }
.article h3 { font-size: var(--ds-h4); margin: var(--ds-space-6) 0 var(--ds-space-2); color: var(--ds-ink); }
.article ul, .article ol { color: var(--ds-ink-secondary); font-size: var(--ds-body-lg); padding-left: 1.5rem; }
.article li { margin-top: var(--ds-space-2); }
.article strong { color: var(--ds-ink); }
.article .illustration { display: block; max-width: 100%; height: auto; border-radius: var(--ds-radius-lg); margin: var(--ds-space-5) auto; }

/* Blog index + article meta */
.blog-meta { display: flex; align-items: center; justify-content: center; gap: var(--ds-space-3); color: var(--ds-ink-muted); font-size: var(--ds-label-2); margin-top: var(--ds-space-4); }
.blog-meta .avatar { font-size: var(--ds-body-xs); overflow: hidden; }
.blog-meta .avatar img { width: 100%; height: 100%; object-fit: cover; }
.blog-card .blog-date { font-size: var(--ds-label-3); color: var(--ds-ink-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.blog-card h3 { font-size: var(--ds-h5); }
.blog-card p { color: var(--ds-ink-secondary); font-size: var(--ds-body-sm); }
.blog-card .tag { align-self: flex-start; }

/* Pricing cards + FAQ */
.pricing-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-2); }
.pricing-card li { padding-left: 1.25rem; position: relative; font-size: var(--ds-body-sm); color: var(--ds-ink-secondary); }
.pricing-card li::before { content: '—'; position: absolute; left: 0; color: var(--ds-ink-muted); }
.faq-list { display: grid; gap: var(--ds-space-3); max-width: 44rem; margin: 0 auto; }

/* Contact form */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ds-space-4); max-width: 44rem; margin: 0 auto; }
.form-field { display: grid; gap: var(--ds-space-2); }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: var(--ds-label-2); font-weight: 600; color: var(--ds-ink-secondary); }
.hp-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ── Counters ─────────────────────────────────────────────────────────
   A live count against a cap, on the Campaigns review pane and in the
   composer's in-frame action row (spec 2026-09-15 §2.4). Shared on two pages,
   so it is owned here. */
.counter { font-family: var(--ds-font-mono); font-size: 0.62rem; padding: 2px 8px; border-radius: var(--ds-pill); background: var(--ds-bg-subtle); border: 1px solid var(--ds-border); white-space: nowrap; }
.counter.over { background: var(--ds-bg-negative-tint); color: var(--ds-text-negative); border-color: var(--ds-border-error); }

/* ── CRM extensions (platform repo) ── */

/* App shell: the sidebar is a fixed 240px rail; below 768px it becomes an
   off-canvas drawer opened by the topbar hamburger (.nav-toggle-btn). */
@media (max-width: 768px) {
  .dashboard-shell .sidebar { display: flex; }
}

/* ── CRM app foundation (renders into #crm-root) ── */

/* Entity rows — compact list rows */
.entity-row { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); border-bottom: 1px solid var(--ds-border); background: var(--ds-bg); }
.entity-row:last-child { border-bottom: 0; }
.entity-row:hover { background: var(--ds-bg-hover); }
.entity-row-title { font-weight: 600; font-size: var(--ds-body-sm); color: var(--ds-ink); }
.entity-row-sub { font-size: var(--ds-body-xs); color: var(--ds-ink-muted); margin-top: 2px; }
.entity-row-meta { margin-left: auto; flex: none; font-family: var(--ds-font-mono); font-size: var(--ds-label-3); color: var(--ds-ink-muted); }

/* Note composer + tag entry */
.note-composer { display: flex; flex-direction: column; gap: var(--ds-space-2); }
.note-tags { display: flex; align-items: center; gap: var(--ds-space-2); flex-wrap: wrap; }
.tag-input { flex: 1; min-width: 8rem; padding: 0.375rem 0.625rem; border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-sm); background: var(--ds-bg); color: var(--ds-ink); font-family: var(--ds-font-mono); font-size: var(--ds-label-2); }
.tag-input::placeholder { color: var(--ds-ink-muted); }
.tag-input:focus { outline: 2px solid var(--ds-accent); outline-offset: 0; border-color: var(--ds-ink); }

/* Pagination */

/* Calendar — week toolbar, week grid, day view, events */
.calendar-toolbar { display: flex; align-items: center; gap: var(--ds-space-2); flex-wrap: wrap; margin-bottom: var(--ds-space-3); }
.calendar-toolbar .spacer { margin-left: auto; }
.calendar-week { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); overflow: hidden; background: var(--ds-bg); }
.calendar-week > * { min-width: 0; }
.calendar-day-view { display: grid; grid-template-rows: repeat(24, minmax(3rem, auto)); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); overflow: hidden; background: var(--ds-bg); }
.calendar-day-view .calendar-hour { border-top: 1px solid var(--ds-border); padding: var(--ds-space-1) var(--ds-space-2); font-family: var(--ds-font-mono); font-size: var(--ds-label-3); color: var(--ds-ink-muted); }
.calendar-day-view .calendar-hour:first-child { border-top: 0; }
.calendar-day.has-events { cursor: pointer; }
.event-card { display: flex; flex-direction: column; gap: var(--ds-space-1); background: var(--ds-bg); border: 1px solid var(--ds-border); border-left: 3px solid var(--ds-action-primary); border-radius: var(--ds-radius-sm); padding: var(--ds-space-2) var(--ds-space-3); }
.event-time { font-family: var(--ds-font-mono); font-size: var(--ds-label-3); color: var(--ds-ink-muted); }
.event-title { font-weight: 600; font-size: var(--ds-body-sm); color: var(--ds-ink); }
.event-flag { font-family: var(--ds-font-mono); font-size: var(--ds-label-4); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-ink-muted); }
.calendar-legend { display: flex; align-items: center; gap: var(--ds-space-3); flex-wrap: wrap; font-size: var(--ds-label-3); color: var(--ds-ink-muted); }
.calendar-legend .legend-item { display: inline-flex; align-items: center; gap: var(--ds-space-1); }
.calendar-legend .legend-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ds-border-strong); }

/* Search results */
.search-results { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.search-group { border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); overflow: hidden; background: var(--ds-bg); }
.search-group-title { padding: var(--ds-space-2) var(--ds-space-3); font-size: var(--ds-label-2); font-weight: 600; color: var(--ds-ink-muted); background: var(--ds-bg-subtle); border-bottom: 1px solid var(--ds-border); text-transform: uppercase; letter-spacing: 0.06em; }
.search-result-row { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); border-bottom: 1px solid var(--ds-border); }
.search-result-row:last-child { border-bottom: 0; }
.search-result-row:hover { background: var(--ds-bg-hover); }
.search-no-result { padding: var(--ds-space-6) var(--ds-space-4); text-align: center; color: var(--ds-ink-muted); font-size: var(--ds-body-sm); }

/* Vertical group headers for board-account lists (mh-strategy, intel) */
.account-group-head { padding: var(--ds-space-2) var(--ds-space-1); font-size: var(--ds-label-2); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-ink-muted); }
.account-group-head .count { font-family: var(--ds-font-mono); color: var(--ds-ink-muted); }

/* KPI grid + chart cards */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ds-space-3); }
.chart-card { background: var(--ds-bg); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: var(--ds-space-4); }
.chart-canvas-wrap { position: relative; height: 260px; }
.chart-empty { display: flex; align-items: center; justify-content: center; min-height: 160px; border: 1px dashed var(--ds-border-strong); border-radius: var(--ds-radius); color: var(--ds-ink-muted); font-size: var(--ds-body-sm); }

/* Detail layout — two-column entity detail */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--ds-space-4); align-items: start; }
@media (max-width: 860px) { .detail-layout { grid-template-columns: 1fr; } }
.detail-section { background: var(--ds-bg); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: var(--ds-space-4); }
.detail-label { font-family: var(--ds-font-mono); font-size: var(--ds-label-3); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-ink-muted); }
.detail-value { font-size: var(--ds-body-sm); color: var(--ds-ink); margin-top: var(--ds-space-1); }

/* Tasks */
.task-check { accent-color: var(--ds-action-primary); width: 1rem; height: 1rem; cursor: pointer; flex: none; }
.task-priority-low { color: var(--ds-text-positive); }
.task-priority-medium { color: var(--ds-ink-secondary); }
.task-priority-high { color: var(--ds-text-negative); }
.task-due { font-family: var(--ds-font-mono); font-size: var(--ds-label-3); color: var(--ds-ink-muted); }

/* Pipeline stage columns (extends crm.css .stage-col / .deal-card) */
.stage-col-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-2); padding: 0 var(--ds-space-2) var(--ds-space-2); }
.stage-summary { display: flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-label-3); color: var(--ds-ink-muted); }
.stage-summary .count { font-family: var(--ds-font-mono); font-weight: 600; color: var(--ds-ink); }
.deal-card.is-overdue { border: 1px solid var(--ds-border-error); }
.deal-card.is-overdue .deal-name { color: var(--ds-text-negative); }

/* Utilities */
.clickable-row { cursor: pointer; }
.clickable-row:hover { background: var(--ds-bg-hover); }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted-note { font-size: var(--ds-body-xs); color: var(--ds-ink-muted); }
.stack-gap { display: flex; flex-direction: column; gap: var(--ds-space-3); }

/* ── Guided tour ─────────────────────────────────────────────── */
.bb-tour-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid var(--ds-border); border-radius:8px; background:var(--ds-bg); font:inherit; font-size:12.5px; font-weight:600; color:var(--ds-ink); cursor:pointer; }
.bb-tour-btn:hover { background:var(--ds-bg-subtle); }
.bb-tour-dim { position:fixed; inset:0; z-index:1000; }
.bb-tour-cut { position:absolute; border:2px solid var(--ds-accent); border-radius:var(--ds-radius); box-shadow:0 0 0 9999px rgba(29,29,31,.62), 0 0 40px color-mix(in srgb, var(--ds-accent) 35%, transparent); pointer-events:none; transition:top .24s ease,left .24s ease,width .24s ease,height .24s ease; }
.bb-tour-tip { position:fixed; z-index:1001; width:356px; background:var(--ds-bg); color:var(--ds-ink); border:1px solid var(--ds-border); border-radius:var(--ds-radius); box-shadow:var(--shadow-xl); overflow:visible; font-family:var(--ds-font-sans); }
.bb-tour-arrow { position:absolute; width:12px; height:12px; background:var(--ds-bg); border-left:1px solid var(--ds-border); border-top:1px solid var(--ds-border); transform:rotate(45deg); top:-7px; left:24px; }
.bb-tour-head { display:flex; align-items:center; gap:8px; padding:14px 16px 0; }
.bb-tour-step { font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ds-accent); }
.bb-tour-module { margin-left:auto; font-size:10.5px; font-weight:600; color:var(--ds-ink-muted); background:var(--ds-bg-subtle); border:1px solid var(--ds-border); padding:2px 8px; border-radius:99px; }
.bb-tour-title { font-size:15.5px; font-weight:700; letter-spacing:-.01em; padding:6px 16px 0; }
.bb-tour-body { font-size:13px; line-height:1.55; color:var(--ds-ink-secondary); padding:8px 16px 0; }
.bb-tour-src { display:flex; gap:7px; align-items:flex-start; font-size:11.5px; color:var(--ds-ink-muted); padding:10px 16px 0; line-height:1.45; }
.bb-tour-src svg { flex:0 0 auto; margin-top:1px; color:var(--ds-accent); }
.bb-tour-foot { display:flex; align-items:center; gap:8px; padding:14px 16px 16px; margin-top:6px; border-top:1px solid var(--ds-border); }
.bb-tour-dots { display:flex; gap:5px; }
.bb-tour-dot { width:6px; height:6px; border-radius:99px; background:var(--ds-border-strong); }
.bb-tour-dot.is-on { background:var(--ds-accent); }
.bb-tour-skip { margin-left:auto; background:none; border:none; color:var(--ds-ink-muted); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; padding:7px 8px; }
.bb-tour-skip:hover { color:var(--ds-ink); }
.bb-tour-next { display:inline-flex; align-items:center; gap:6px; background:var(--ds-action-primary); color:var(--ds-ink-inverse); border:none; border-radius:8px; padding:8px 14px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
.bb-tour-next:hover { background:var(--ds-action-primary-hover); }
@media (prefers-reduced-motion: reduce) {
  .bb-tour-cut { transition:none; }
}

/* ── Home-board per-account drill (board-intel.js) ─────────────────── */
.board-intel-meta { font-size:0.8rem; color:var(--ds-ink-muted); }
.board-intel-feed-head { display:flex; justify-content:flex-end; align-items:center; margin-bottom:8px; }
.board-intel-drafter { padding:8px 12px; margin:10px 0; border:1px solid var(--ds-border); border-radius:8px; font-size:0.85rem; background:var(--ds-bg-subtle); }
.board-intel-signal { padding:10px 0; border-bottom:1px solid var(--ds-border); }

/* --- Motion + accessibility (Apple: transform, never layout) ---
   `.scrim` is the artifact's name and does not exist in the app — adding it would
   be dead CSS. `.seg` was in this list until the composition port promoted it as
   the shared segmented control (Phase 0 Task 6); the rule lives in P3. */
.tab, .badge, .tag, .nav-item, .list-item, .entity-row {
  transition: transform .12s cubic-bezier(.2,.8,.2,1), background-color .12s, color .12s;
}
.list-item:active, .entity-row:active { transform: scale(.97); }
@supports (backdrop-filter: blur(1px)) {
  .modal-overlay { backdrop-filter: blur(20px) saturate(180%); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .spinner { animation-duration: 1.4s; }
}
@media (prefers-reduced-transparency: reduce) {
  .modal-overlay { backdrop-filter: none; background: rgba(29,29,31,.72); }
}
@media (prefers-contrast: more) {
  :root { --ds-border: #A1A1A6; --ds-ink-muted: #48484A; }
}