/**
 * marketing.css — the components the public positioning pages added.
 *
 * WHY A NEW SHEET RATHER THAN homepage.css. homepage.css is the landing page's
 * own sheet, shared with one other page for two dark bands only, and its header
 * warns against putting anything general in it. These rules are used by the
 * homepage, /platform, /organizations and /pricing, so they belong somewhere all
 * four can link without inheriting the landing hero's animation machinery.
 *
 * WHY NOT db-system.css. That sheet is pinned with a hand-bumped ?v= on 57
 * pages; adding to it means touching all 57 in one commit or leaving returning
 * readers on a stale cache. Same reasoning as db-blocks.css, which is the sheet
 * this one sits beside.
 *
 * EVERYTHING IS TOKEN-DRIVEN. No raw hex, so dark mode needs no rules of its
 * own. The two exceptions where a colour is stated are the availability chips,
 * and they state it through the escalation-ladder tokens, which are re-authored
 * for dark ground in tokens.css rather than inverted.
 *
 * GEOMETRY. --db-radius-pill is 3px in this design system, deliberately: nothing
 * here is a capsule. If a chip below looks like it wants to be rounded, it does
 * not.
 */

/* ── Availability chips ───────────────────────────────────────────────────── */

/* The whole positioning rests on a visitor being able to tell what is running
   from what is planned at a glance. These carry that distinction, so they are
   never decorative and never omitted. Text plus a rule weight, not colour
   alone — the chips still separate in greyscale. */
.mkt-avail {
  display: inline-flex;
  align-items: center;
  gap: var(--db-space-xs);
  padding: 2px var(--db-space-sm);
  border: var(--db-rule) solid var(--db-border);
  border-radius: var(--db-radius-xs);
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-text-xs);
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--db-muted);
  background: var(--db-card);
}
.mkt-avail::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: currentColor;
}
.mkt-avail--now {
  color: var(--db-level-low);
  border-color: var(--db-level-low);
}
/* Outlined mark rather than a filled one: in pilots is a real state, but it is
   not the same claim as running today, and the mark should not read as one. */
.mkt-avail--pilot {
  color: var(--db-level-moderate);
  border-color: var(--db-level-moderate);
}
.mkt-avail--pilot::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.mkt-avail--planned {
  color: var(--db-muted);
  border-style: dashed;
}
.mkt-avail--planned::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }

/* ── Figures ──────────────────────────────────────────────────────────────── */

/* The hairline grid is drawn by each tile's own outline rather than by a
   coloured container showing through 1px gaps. Five tiles never divide evenly
   into an auto-fit track count, and with the gap technique the leftover cell
   renders as a solid grey block that reads like a broken tile. Outlines
   overlap inside the gap, so the rule between two tiles is still one hairline,
   and an empty track is simply the page. */
.mkt-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  border: var(--db-rule) solid var(--db-border);
}
.mkt-stat {
  background: var(--db-card);
  outline: var(--db-rule) solid var(--db-border);
  padding: var(--db-space-lg);
  min-width: 0;
}
.mkt-stat-value {
  margin: 0 0 var(--db-space-xs);
  font-family: var(--db-font-num);
  font-size: var(--db-text-2xl);
  line-height: var(--db-leading-tight);
  color: var(--db-char);
  font-variant-numeric: tabular-nums;
}
.mkt-stat-label {
  margin: 0;
  font-size: var(--db-text-sm);
  line-height: var(--db-leading-snug);
  color: var(--db-char);
}
.mkt-stat-note {
  display: block;
  margin-top: var(--db-space-xs);
  font-size: var(--db-text-xs);
  color: var(--db-muted);
}
.mkt-asof {
  margin: var(--db-space-md) 0 0;
  font-size: var(--db-text-xs);
  color: var(--db-muted);
  max-width: var(--db-read-measure);
}

/* ── Capability groups (the eight need-based categories) ──────────────────── */

.mkt-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--db-space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mkt-group {
  min-width: 0;
  border-top: var(--db-rule-strong) solid var(--db-navy);
  padding-top: var(--db-space-md);
}
.mkt-group-kicker {
  display: block;
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-text-xs);
  letter-spacing: var(--db-tracking-widest);
  text-transform: uppercase;
  color: var(--db-muted);
  margin-bottom: var(--db-space-xs);
}
.mkt-group-title {
  margin: 0 0 var(--db-space-sm);
  font-size: var(--db-text-lg);
  line-height: var(--db-leading-snug);
  color: var(--db-char);
}
.mkt-group-sub {
  margin: 0 0 var(--db-space-md);
  font-size: var(--db-text-sm);
  line-height: var(--db-leading-body);
  color: var(--db-muted);
}
.mkt-group-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--db-space-sm); }
.mkt-group-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--db-space-sm);
  flex-wrap: wrap;
  font-size: var(--db-text-sm);
  line-height: var(--db-leading-snug);
  color: var(--db-char);
  border-bottom: var(--db-rule) solid var(--db-border);
  padding-bottom: var(--db-space-sm);
}
.mkt-group-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.mkt-cap-name { min-width: 0; }

/* ── Audience grid ────────────────────────────────────────────────────────── */

.mkt-audience {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--db-border);
  border: var(--db-rule) solid var(--db-border);
}
.mkt-audience li {
  background: var(--db-card);
  padding: var(--db-space-lg);
  font-size: var(--db-text-sm);
  line-height: var(--db-leading-snug);
  color: var(--db-char);
  min-width: 0;
}
.mkt-audience b { display: block; margin-bottom: var(--db-space-xs); }
.mkt-audience span { color: var(--db-muted); font-size: var(--db-text-xs); }

/* ── Positioning matrix ───────────────────────────────────────────────────── */

/* Deliberately a table. This is a comparison a reader will scan down a column,
   and a grid of cards makes that impossible. It scrolls inside its own wrapper
   rather than making the page scroll sideways. */
.mkt-matrix-wrap { overflow-x: auto; margin: 0; }
.mkt-matrix {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--db-text-sm);
}
.mkt-matrix th,
.mkt-matrix td {
  border: var(--db-rule) solid var(--db-border);
  padding: var(--db-space-sm) var(--db-space-md);
  text-align: left;
  vertical-align: top;
  color: var(--db-char);
}
.mkt-matrix thead th {
  background: var(--db-surface-sunken);
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-text-xs);
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  color: var(--db-muted);
  font-weight: var(--db-weight-medium);
}
.mkt-matrix tbody th {
  font-weight: var(--db-weight-label);
  white-space: nowrap;
}
.mkt-matrix .is-db {
  background: var(--db-red-wash);
  border-left: var(--db-edge-width) solid var(--db-red);
}
.mkt-matrix-note {
  margin: var(--db-space-md) 0 0;
  font-size: var(--db-text-xs);
  color: var(--db-muted);
  max-width: var(--db-read-measure);
}

/* ── Hub module picker ────────────────────────────────────────────────────── */

.mkt-picker {
  border: var(--db-rule) solid var(--db-border);
  background: var(--db-card);
}
.mkt-picker-head { padding: var(--db-space-lg); border-bottom: var(--db-rule) solid var(--db-border); }
.mkt-picker-title { margin: 0 0 var(--db-space-xs); font-size: var(--db-text-lg); color: var(--db-char); }
.mkt-picker-sub { margin: 0; font-size: var(--db-text-sm); color: var(--db-muted); max-width: var(--db-read-measure); }
.mkt-picker-group { border: 0; border-bottom: var(--db-rule) solid var(--db-border); margin: 0; padding: var(--db-space-lg); }
.mkt-picker-legend {
  padding: 0;
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-text-xs);
  letter-spacing: var(--db-tracking-widest);
  text-transform: uppercase;
  color: var(--db-muted);
}
.mkt-picker-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--db-space-sm);
  margin-top: var(--db-space-md);
}
.mkt-picker-item {
  display: flex;
  align-items: center;
  gap: var(--db-space-sm);
  flex-wrap: wrap;
  padding: var(--db-space-sm);
  border: var(--db-rule) solid var(--db-border);
  font-size: var(--db-text-sm);
  color: var(--db-char);
  cursor: pointer;
  min-width: 0;
  transition: border-color var(--db-motion-fast) var(--db-ease);
}
.mkt-picker-item:hover { border-color: var(--db-border-hover); }
.mkt-picker-item:focus-within { border-color: var(--db-border-focus); }
.mkt-picker-item input { accent-color: var(--db-red); flex: 0 0 auto; }
.mkt-picker-name { flex: 1 1 auto; min-width: 0; }
.mkt-picker-count {
  margin: 0;
  padding: var(--db-space-lg);
  font-size: var(--db-text-sm);
  color: var(--db-muted);
}

/* ── Configuration chips ──────────────────────────────────────────────────── */

.mkt-configs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--db-space-xl);
}
.mkt-config {
  min-width: 0;
  border: var(--db-rule) solid var(--db-border);
  background: var(--db-card);
  padding: var(--db-space-lg);
}
.mkt-config-title { margin: 0 0 var(--db-space-xs); font-size: var(--db-text-md); color: var(--db-char); }
.mkt-config-sub { margin: 0 0 var(--db-space-md); font-size: var(--db-text-xs); color: var(--db-muted); }
.mkt-chips { display: flex; flex-wrap: wrap; gap: var(--db-space-xs); margin: 0; padding: 0; list-style: none; }
.mkt-chips li {
  padding: 2px var(--db-space-sm);
  border: var(--db-rule) solid var(--db-border);
  border-radius: var(--db-radius-xs);
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-text-xs);
  color: var(--db-char);
  background: var(--db-surface-sunken);
}

/* ── Pilot request form ───────────────────────────────────────────────────── */

.mkt-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--db-space-lg);
  border: var(--db-rule) solid var(--db-border);
  background: var(--db-card);
  padding: var(--db-space-xl);
}
.mkt-field { display: flex; flex-direction: column; gap: var(--db-space-xs); min-width: 0; }
.mkt-field--wide { grid-column: 1 / -1; }
.mkt-label {
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-text-xs);
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
  color: var(--db-muted);
}
.mkt-req { color: var(--db-red-ink); }
.mkt-input,
.mkt-select,
.mkt-textarea {
  width: 100%;
  padding: var(--db-space-sm) var(--db-space-md);
  border: var(--db-rule) solid var(--db-border);
  border-radius: var(--db-radius-xs);
  background: var(--db-bg);
  color: var(--db-char);
  font-family: var(--db-font);
  font-size: var(--db-text-base);
}
.mkt-textarea { min-height: 110px; resize: vertical; }
.mkt-input:focus-visible,
.mkt-select:focus-visible,
.mkt-textarea:focus-visible {
  outline: 2px solid var(--db-border-focus);
  outline-offset: 1px;
}
/* The honeypot. Hidden from sight and from assistive technology, but still a
   real field a naive bot will fill. Not display:none — some bots skip those. */
.mkt-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.mkt-form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--db-space-lg);
  flex-wrap: wrap;
}
.mkt-form-status {
  margin: 0;
  font-size: var(--db-text-sm);
  color: var(--db-muted);
}
.mkt-form-status.is-error { color: var(--db-red-ink); }
.mkt-form-status.is-ok { color: var(--db-level-low); }
.mkt-form-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--db-text-xs);
  color: var(--db-muted);
  max-width: var(--db-read-measure);
}

/* ── Pilot inclusions ─────────────────────────────────────────────────────── */

.mkt-includes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--db-border);
  border: var(--db-rule) solid var(--db-border);
}
.mkt-includes li {
  background: var(--db-card);
  padding: var(--db-space-lg);
  font-size: var(--db-text-sm);
  line-height: var(--db-leading-snug);
  color: var(--db-muted);
  min-width: 0;
}
.mkt-includes b { display: block; margin-bottom: var(--db-space-xs); color: var(--db-char); }

/* ── Tool-page context strip ──────────────────────────────────────────────── */

/* One line on a member tool page saying what larger thing it belongs to. It has
   to be findable by someone who arrived on the tool and useful to nobody else,
   so it is a rule and a sentence, never a banner. */
.mkt-context {
  display: flex;
  align-items: baseline;
  gap: var(--db-space-md);
  flex-wrap: wrap;
  margin: 0 0 var(--db-space-lg);
  padding-bottom: var(--db-space-sm);
  border-bottom: var(--db-rule) solid var(--db-border);
  font-size: var(--db-text-xs);
  color: var(--db-muted);
}
/* Three tool pages (daily-brief, tracker, exposure) put their page header at
   the top level of <body> rather than inside a .wrap, so the strip lands there
   too and would otherwise run edge to edge with no gutter. Constrain it only in
   that case; inside a .wrap the rule below never applies. */
body > .mkt-context,
main > .mkt-context {
  max-width: var(--db-max-width);
  margin-inline: auto;
  padding-inline: var(--db-space-xl);
}
.mkt-context p { margin: 0; }
.mkt-context nav { display: flex; gap: var(--db-space-md); margin-left: auto; }
.mkt-context a {
  color: var(--db-char);
  text-decoration: none;
  border-bottom: var(--db-rule) solid var(--db-border-hover);
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--db-tracking-wide);
  text-transform: uppercase;
}
.mkt-context a:hover { border-bottom-color: var(--db-red); }

/* ── Two-path split ───────────────────────────────────────────────────────── */

.mkt-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--db-space-xl);
}
.mkt-path {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--db-space-md);
  border: var(--db-rule) solid var(--db-border);
  background: var(--db-card);
  padding: var(--db-space-xl);
}
/* The organization path is the primary conversion, and the edge says so without
   needing the card to be bigger or the other one to look diminished. */
.mkt-path--primary { border-left: var(--db-edge-width) solid var(--db-red); }
.mkt-path-kicker {
  font-family: var(--db-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--db-text-xs);
  letter-spacing: var(--db-tracking-widest);
  text-transform: uppercase;
  color: var(--db-muted);
}
.mkt-path-title { margin: 0; font-size: var(--db-text-xl); line-height: var(--db-leading-tight); color: var(--db-char); }
.mkt-path-sub { margin: 0; font-size: var(--db-text-sm); line-height: var(--db-leading-body); color: var(--db-muted); }
.mkt-path-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--db-space-sm); }
.mkt-path-list li {
  position: relative;
  padding-left: var(--db-space-lg);
  font-size: var(--db-text-sm);
  line-height: var(--db-leading-snug);
  color: var(--db-char);
}
.mkt-path-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 1px;
  background: var(--db-red);
}
.mkt-path-actions { margin-top: auto; display: flex; gap: var(--db-space-md); flex-wrap: wrap; }

/* ── Visual section scaffolding ───────────────────────────────────────────── */

.mkt-viz {
  display: grid;
  gap: var(--db-space-xl);
  min-width: 0;
}
.mkt-viz-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.mkt-viz > * { min-width: 0; }

/* db-panel docks inline above 760px. Give it somewhere to land that is not
   inside a grid track it would then widen. */
.mkt-dock { min-width: 0; }

@media (max-width: 760px) {
  .mkt-matrix { min-width: 520px; }
  .mkt-form { padding: var(--db-space-lg); }
}