/* =============================================================
   senaros.com — styles
   Tokens come verbatim from "Senaros Design System.md" §10.1.
   Desktop matches slide 14, mobile matches slide 15.
   Breakpoint: 900px.
   ============================================================= */

:root {
  /* primary palette */
  --paper:   #F1EFEA;
  --card:    #FFFFFF;
  --surface: #ECE8DD;
  --ink:     #0E1116;
  --ink-2:   #2A2F38;
  --muted:   #6B7280;
  --rule:    #D9D5CB;
  --signal:  #C8501E;

  /* reverse */
  --ink-paper:      #F2F1EC;
  --ink-rule:       rgba(255,255,255,0.18);
  --ink-muted:      rgba(255,255,255,0.55);
  --reverse-stable: #6BCB99;
  --reverse-watch:  #E8B776;

  /* status */
  --state-stable:   #1F7A4C;
  --state-adoption: #2C5599;
  --state-active:   #1F7A4C;
  --state-watch:    #B27510;
  --state-action:   #B23A2A;
  --state-unknown:  #5B4E8A;
  --state-stale:    #8A8275;

  /* type */
  --font-sans:  "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, monospace;
  --font-serif: "IBM Plex Serif", Georgia, serif;

  /* spacing */
  --s-1: 4px; --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* radius */
  --radius-0: 0; --radius-1: 2px;

  /* shadow */
  --shadow-card:  0 1px 0 var(--rule);
  --shadow-float: 0 30px 60px -30px rgba(0,0,0,0.18);

  /* layout */
  --page-pad-x: 56px;
}

/* =============================================================
   base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--font-sans);
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
em { font-style: italic; }
input, textarea, select { font: inherit; color: inherit; }

/* Anchor jumps land below the sticky topnav with breathing room.
   Topnav height is ~68px on desktop, ~52px on mobile. */
:target,
section[id],
[id="contact"] { scroll-margin-top: 96px; }
html { scroll-behavior: smooth; }
@media (max-width: 900px) {
  :target,
  section[id],
  [id="contact"] { scroll-margin-top: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.tnum, .mono { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* italic serif accent — used once per display headline */
.italic-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal);
}

/* =============================================================
   reusable: wordmark
   ============================================================= */
.logo {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 22px/1 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.logo .dot {
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--state-stable) 0 38%, transparent 40%);
  flex-shrink: 0;
}
.logo.reverse { color: var(--ink-paper); }
.logo.reverse .dot {
  background: radial-gradient(circle at center, var(--reverse-stable) 0 38%, transparent 40%);
}

/* eyebrow / micro caption */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.crumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-block;
  max-width: 720px;
  line-height: 1.55;
}

/* =============================================================
   buttons
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 15px/1 var(--font-sans);
  padding: 13px 22px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  text-align: left;
}
.btn:hover  { background: var(--ink); color: var(--ink-paper); }
.btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.btn.primary   { background: var(--ink); color: var(--ink-paper); }
.btn.primary:hover { background: #000; }
.btn.secondary { background: transparent; color: var(--ink); }
.btn.ghost     { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover { border-color: var(--ink); background: transparent; }

.btn.compact   { font-size: 14px; padding: 11px 18px; }

.btn .arrow { font-family: var(--font-mono); }

/* on-dark variant */
.btn.on-dark { border-color: var(--ink-paper); color: var(--ink-paper); }
.btn.on-dark.primary { background: var(--ink-paper); color: var(--ink); }
.btn.on-dark.secondary { background: transparent; color: var(--ink-paper); }
.btn.on-dark.secondary:hover { background: var(--ink-paper); color: var(--ink); }

/* =============================================================
   topnav
   ============================================================= */
.topnav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  padding: 22px var(--page-pad-x);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 50;
}
.topnav .links {
  display: flex; gap: 32px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2);
}
.topnav .links a { transition: color 120ms ease; }
.topnav .links a:hover { color: var(--ink); }
.topnav .nav-cta { font: 500 14px/1 var(--font-sans); padding: 11px 18px; }
.topnav .menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--rule);
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  padding: 0;
}
.topnav .menu-toggle i {
  display: block; width: 18px; height: 1.5px; background: var(--ink);
}

/* =============================================================
   hero
   ============================================================= */
.hero {
  padding: 80px var(--page-pad-x) 64px;
  display: grid; grid-template-columns: 1.45fr 1fr;
  gap: 56px; align-items: stretch;
  border-bottom: 1px solid var(--rule);
}
.hero > div:first-child {
  display: flex; flex-direction: column; justify-content: flex-start;
  min-width: 0;
}
.hero h1 {
  font: 300 clamp(48px, 5.8vw, 84px)/0.96 var(--font-sans);
  letter-spacing: -0.035em;
  margin-top: 20px;
  text-wrap: balance;
}
/* Force the italic ending to start on its own line — keeps the headline
   to a 3-line rhythm: setup / setup / italic payoff. */
.hero h1 .h1-break { display: block; margin-top: 4px; }
.hero h1 em {
  color: var(--signal);
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
}
.hero .sub {
  margin-top: 28px; max-width: 620px;
  font-size: 19px; line-height: 1.55; color: var(--ink-2);
}
.hero .sub .q {
  font-family: var(--font-serif); font-style: italic; color: var(--ink);
}
.hero .ctas { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero .badge { margin-top: 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

/* hero telemetry panel */
.hero .panel {
  background: var(--ink); color: var(--ink-paper);
  border: 1px solid var(--ink);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative; overflow: hidden;
}
.hero .panel::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0/120px 100%,
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0/100% 80px;
  pointer-events: none;
}
.hero .panel .ph {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink-rule);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-muted);
  position: relative; z-index: 1;
}
.hero .panel .ph .live {
  display: inline-flex; align-items: center; gap: 10px; color: var(--ink-paper);
}
.hero .panel .ph .live::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  background: var(--state-stable); border-radius: 50%;
}
.hero .panel .pkpis {
  display: flex; flex-direction: column; gap: 14px;
  position: relative; z-index: 1;
}
.hero .panel .pkpi {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  column-gap: 14px; row-gap: 2px;
}
.hero .panel .pkpi .l {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted);
}
.hero .panel .pkpi .v {
  font-family: var(--font-mono); font-size: 22px;
  letter-spacing: -0.01em;
  justify-self: end;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
}
.hero .panel .pkpi .v.watch { color: var(--reverse-watch); }
.hero .panel .pkpi .v.good  { color: var(--reverse-stable); }
.hero .panel .pkpi .d {
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,0.5);
  grid-column: 1;
}

/* hero panel — recommended actions block */
.hero .panel .palerts-h {
  margin-top: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-rule);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-muted);
  position: relative; z-index: 1;
}
.hero .panel .palerts {
  display: flex; flex-direction: column;
  position: relative; z-index: 1;
}
.hero .panel .palert {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 12px; align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink-rule);
  font-size: 13px;
}
.hero .panel .palert:last-child { border-bottom: none; }
.hero .panel .palert i {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.hero .panel .palert.linked i {
  box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 2.5px var(--state-adoption);
}
.hero .panel .palert .vname { font-weight: 500; line-height: 1.35; }
.hero .panel .palert .pr-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 3px 8px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--reverse-stable);
  border: 1px solid currentColor;
  text-decoration: none;
  width: fit-content;
  transition: background 120ms ease, color 120ms ease;
}
.hero .panel .palert .pr-link:hover {
  background: var(--reverse-stable); color: var(--ink);
}
.hero .panel .palert .pr-link .arrow { font-size: 11px; line-height: 1; }
.hero .panel .palert .act {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 5px 10px; border: 1px solid currentColor;
  align-self: start; margin-top: 2px;
}
.hero .panel .palert.bad     .act { color: var(--state-action); }
.hero .panel .palert.watch   .act { color: var(--reverse-watch); }
.hero .panel .palert.unknown .act { color: var(--state-unknown); }

/* =============================================================
   sections (shared)
   ============================================================= */
.section {
  padding: 80px var(--page-pad-x);
  border-bottom: 1px solid var(--rule);
}
.section-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  margin-bottom: 48px;
}
.section .eyebrow { margin-bottom: 14px; }
.section h2 {
  font: 300 clamp(38px, 5vw, 60px)/1.0 var(--font-sans);
  letter-spacing: -0.03em;
}
.section h2 em {
  color: var(--signal);
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
}
.section .lede {
  font-size: 18px; line-height: 1.6; color: var(--ink-2);
  margin-top: 8px;
}

/* =============================================================
   problem grid (6-up, ruled)
   ============================================================= */
.problem-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
.problem-tile {
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 22px 22px 24px;
  background: var(--card);
  display: flex; flex-direction: column; gap: 8px;
  min-height: 240px;
}
.problem-tile .n {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
}
.problem-tile .t {
  font-size: 14px; line-height: 1.5; color: var(--ink);
  min-height: calc(14px * 1.5 * 5); /* reserves 5 lines so the divider lines up across all six tiles */
}
.problem-tile .b {
  padding-top: 14px;
  border-top: 1px dotted var(--rule);
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
  font-family: var(--font-mono);
}

/* =============================================================
   solution (4-up cards on surface)
   ============================================================= */
.solution { background: var(--surface); }
.solution-list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.solution-card {
  background: var(--card); border: 1px solid var(--ink);
  padding: 22px 22px 24px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 240px;
}
.solution-card .ico {
  width: 28px; height: 28px; border: 1.5px solid var(--ink);
}
.solution-card .ico.circle {
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--state-stable) 0 30%, transparent 32%);
}
.solution-card .ico.square { border-radius: 0; }
.solution-card .ico.ruled  {
  background: repeating-linear-gradient(to bottom, var(--ink) 0 1.5px, transparent 1.5px 5px);
}
.solution-card .ico.diamond {
  transform: rotate(45deg);
}
.solution-card .t {
  font: 500 18px/1.3 var(--font-sans);
  letter-spacing: -0.005em;
}
.solution-card .b {
  font-size: 14px; line-height: 1.55; color: var(--ink-2);
}
.solution-card .footnote {
  margin-top: auto;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase;
}

/* =============================================================
   dashboard preview (dark section break)
   ============================================================= */
.dash-section {
  background: var(--ink); color: var(--ink-paper);
  border-bottom: none;
}
.dash-section h2 { color: var(--ink-paper); }
.dash-section h2 em { color: var(--reverse-watch); }
.dash-section .lede   { color: rgba(255,255,255,0.8); }
.dash-section .eyebrow { color: rgba(255,255,255,0.55); }

/* =============================================================
   Command Center — dark vertical frame
   KPI row → vendor portfolio table → action queue
   ============================================================= */
.dash-preview {
  background: var(--ink); color: var(--ink-paper);
  border: 1px solid var(--ink);
  padding: 32px 32px;
  display: flex; flex-direction: column;
}

/* live header */
.dash-preview .cc-h {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px; margin-bottom: 22px;
  border-bottom: 1px solid var(--ink-rule);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.dash-preview .cc-h .lh {
  display: inline-flex; align-items: center; gap: 10px; color: var(--ink-paper);
}
.dash-preview .cc-h .lh::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--state-stable);
}

/* KPI tiles */
.dash-preview .cc-kpis {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
  margin-bottom: 22px;
}
.dash-preview .cc-kpi {
  border: 1px solid var(--ink-rule);
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
}
.dash-preview .cc-kpi .l {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.dash-preview .cc-kpi .v {
  font-family: var(--font-mono); font-size: 22px;
  margin-top: 4px; letter-spacing: -0.01em;
}
.dash-preview .cc-kpi .v.watch { color: var(--reverse-watch); }
.dash-preview .cc-kpi .v.good  { color: var(--reverse-stable); }
.dash-preview .cc-kpi .d {
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,0.55); margin-top: 2px;
}

/* Section labels between bands */
.dash-preview .cc-section-label {
  display: flex; justify-content: space-between; align-items: end;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  padding-bottom: 12px; margin-top: 8px;
  border-bottom: 1px solid var(--ink-rule);
}

/* Vendor portfolio table */
.dash-preview .cc-vendors {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 22px;
}
.dash-preview .cc-vendors th {
  text-align: left;
  padding: 12px 12px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); font-weight: 500;
  border-bottom: 1px solid var(--ink-rule);
}
.dash-preview .cc-vendors td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--ink-rule);
}
.dash-preview .cc-vendors tr:last-child td { border-bottom: none; }
.dash-preview .cc-vendors td.num {
  font-family: var(--font-mono); text-align: right;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.dash-preview .cc-vendors td.unowned { color: var(--state-unknown); }
.dash-preview .cc-vendors td .commit-unit {
  color: rgba(255,255,255,0.4); font-size: 10px;
}
.dash-preview .cc-vendors .v-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
}
.dash-preview .cc-vendors tr.linked .v-dot {
  box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 2.5px var(--state-adoption);
}
.dash-preview .cc-vendors td .vbar {
  display: inline-block;
  width: 80px; height: 6px;
  background: rgba(255,255,255,0.08);
  position: relative; vertical-align: middle;
}
.dash-preview .cc-vendors td .vbar i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--ink-paper);
}
.dash-preview .cc-vendors td .vbar i.over { background: var(--state-action); }

/* status pills (dark-context) */
.dash-preview .cc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border: 1px solid currentColor;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap;
}
.dash-preview .cc-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.dash-preview .cc-pill.stable  { color: var(--reverse-stable); }
.dash-preview .cc-pill.watch   { color: var(--reverse-watch); }
.dash-preview .cc-pill.action  { color: var(--state-action); }
.dash-preview .cc-pill.unknown { color: var(--state-unknown); }
.dash-preview .cc-pill.stale   { color: var(--state-stale); }

/* Recommended actions queue */
.dash-preview .cc-queue { display: flex; flex-direction: column; }
.dash-preview .cc-queue .a {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink-rule);
  align-items: center; font-size: 13px;
}
.dash-preview .cc-queue .a:last-child { border-bottom: none; }
.dash-preview .cc-queue .a i {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.dash-preview .cc-queue .a.linked i {
  box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 2.5px var(--state-adoption);
}
.dash-preview .cc-queue .a .vname { font-weight: 500; }
.dash-preview .cc-queue .a .meta  {
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,0.55); letter-spacing: 0.04em;
}
.dash-preview .cc-queue .a .act {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 5px 10px; border: 1px solid currentColor;
}
.dash-preview .cc-queue .a.bad     .act { color: var(--state-action); }
.dash-preview .cc-queue .a.watch   .act { color: var(--reverse-watch); }
.dash-preview .cc-queue .a.unknown .act { color: var(--state-unknown); }
.dash-preview .cc-queue .a.stale   .act { color: var(--state-stale); }

/* PR / code-link chip */
.dash-preview .cc-queue .a .pr-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 3px 8px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--reverse-stable);
  border: 1px solid currentColor;
  text-decoration: none;
  align-self: flex-start;
  width: fit-content;
  transition: background 120ms ease, color 120ms ease;
}
.dash-preview .cc-queue .a .pr-link:hover {
  background: var(--reverse-stable); color: var(--ink);
}
.dash-preview .cc-queue .a .pr-link .arrow {
  font-size: 11px; line-height: 1;
}

/* =============================================================
   closing — early access
   ============================================================= */
.closing {
  background: var(--paper);
  padding: 96px var(--page-pad-x) 112px;
}
.closing-block {
  max-width: 760px;
}
.closing-block .eyebrow {
  display: block;
  margin-bottom: 18px;
}
.closing-block h2 {
  font: 300 clamp(40px, 5vw, 72px)/1.0 var(--font-sans);
  letter-spacing: -0.035em;
  margin-bottom: 24px;
}
.closing-block h2 em {
  color: var(--signal);
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
}
.closing-lede {
  font-size: 18px; line-height: 1.6; color: var(--ink-2);
  margin-bottom: 32px;
  max-width: 640px;
}
.closing-block .ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
}

/* =============================================================
   footer
   ============================================================= */
.footer {
  padding: 28px var(--page-pad-x);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  border-top: 1px solid var(--ink);
  background: var(--paper);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.footer .mark {
  display: inline-flex; align-items: center; gap: 10px;
}
.footer .mark .dot {
  width: 10px; height: 10px; border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--state-stable) 0 38%, transparent 40%);
}

/* =============================================================
   early-access modal
   ============================================================= */
.ea-modal {
  border: 1px solid var(--ink);
  padding: 0;
  max-width: 560px; width: calc(100% - 32px);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-float);
}
.ea-modal::backdrop {
  background: rgba(14,17,22,0.7);
  backdrop-filter: blur(4px);
}
.ea-modal[open] {
  display: flex; flex-direction: column;
}
.ea-head {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.ea-close {
  background: transparent; border: 1px solid var(--rule);
  width: 28px; height: 28px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 14px; color: var(--ink);
  padding: 0;
}
.ea-close:hover { border-color: var(--ink); }

.ea-form {
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.ea-form h2 {
  font: 300 32px/1.05 var(--font-sans);
  letter-spacing: -0.025em;
}
.ea-form h2 em {
  color: var(--signal);
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
}
.ea-form .lede {
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
  margin-top: -4px;
}
.ea-field { display: flex; flex-direction: column; gap: 6px; }
.ea-field label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}
.ea-field input, .ea-field textarea {
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 10px 12px;
  font: 400 15px/1.4 var(--font-sans);
  color: var(--ink);
  border-radius: 0;
  transition: border-color 120ms ease;
}
.ea-field input:focus, .ea-field textarea:focus {
  outline: none; border-color: var(--ink);
}
.ea-field textarea { resize: vertical; min-height: 80px; }
.ea-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.ea-actions {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 12px; flex-wrap: wrap;
  margin-top: 4px;
}
.ea-status {
  display: none;
  padding: 12px 14px; border: 1px solid var(--state-stable);
  font-family: var(--font-mono); font-size: 12px;
  color: var(--state-stable); letter-spacing: 0.04em;
}
.ea-status.error {
  border-color: var(--state-action); color: var(--state-action);
}
.ea-status.visible { display: block; }

/* mobile drawer (hidden by default; shown via @media below) */
.mobile-drawer { display: none; }

/* =============================================================
   RESPONSIVE — < 900px (mobile, slide 15 grammar)
   ============================================================= */
@media (max-width: 900px) {
  :root { --page-pad-x: 22px; }

  /* topnav — collapse to logo + menu */
  .topnav { padding: 14px var(--page-pad-x); }
  .topnav .links     { display: none; }
  .topnav .nav-cta   { display: none; }
  .topnav .menu-toggle { display: inline-flex; }

  /* mobile drawer */
  .mobile-drawer {
    position: fixed; inset: 60px 0 auto 0;
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
    padding: 22px var(--page-pad-x);
    display: none; flex-direction: column; gap: 18px;
    z-index: 49;
  }
  .mobile-drawer.open { display: flex; }
  .mobile-drawer a {
    font-family: var(--font-mono); font-size: 13px;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2);
    padding: 8px 0; border-bottom: 1px solid var(--rule);
  }
  .mobile-drawer .btn { align-self: flex-start; margin-top: 4px; }

  /* hero — stacks, big telemetry below text */
  .hero {
    padding: 40px var(--page-pad-x) 48px;
    grid-template-columns: 1fr; gap: 32px;
  }
  .hero h1 { font-size: clamp(38px, 11vw, 52px); margin-top: 14px; }
  .hero .sub { font-size: 16px; margin-top: 20px; }
  .hero .ctas { margin-top: 24px; }
  .hero .ctas .btn { flex: 1 1 auto; justify-content: center; }
  .hero .panel { padding: 18px 18px; }
  .hero .panel .pkpi .v { font-size: 18px; }
  .hero .panel .pkpi .d { display: none; }

  /* sections */
  .section { padding: 56px var(--page-pad-x); }
  .section-head {
    grid-template-columns: 1fr; gap: 16px;
    margin-bottom: 32px;
  }
  .section .lede { font-size: 16px; }

  /* problem — 2-up grid */
  .problem-grid { grid-template-columns: repeat(2, 1fr); }
  .problem-tile { min-height: 0; padding: 18px 18px 20px; }
  .problem-tile .t { font-size: 13px; }
  .problem-tile .b { font-size: 12px; }

  /* solution — 1-up */
  .solution-list { grid-template-columns: 1fr; gap: 12px; }
  .solution-card { min-height: 0; padding: 20px 20px 22px; }

  /* Command Center — stacks, denser */
  .dash-preview { padding: 22px 18px; }
  .dash-preview .cc-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dash-preview .cc-kpi { padding: 10px 12px; }
  .dash-preview .cc-kpi .v { font-size: 18px; }

  /* Hide the bar / commit / owner columns on mobile — keep vendor, spend, status */
  .dash-preview .cc-vendors th:nth-child(4),
  .dash-preview .cc-vendors td:nth-child(4),
  .dash-preview .cc-vendors th:nth-child(5),
  .dash-preview .cc-vendors td:nth-child(5),
  .dash-preview .cc-vendors th:nth-child(6),
  .dash-preview .cc-vendors td:nth-child(6) { display: none; }
  .dash-preview .cc-vendors th,
  .dash-preview .cc-vendors td { padding: 9px 8px; font-size: 12px; }
  .dash-preview .cc-pill { font-size: 9px; padding: 2px 6px; }

  .dash-preview .cc-queue .a {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 4px;
  }
  .dash-preview .cc-queue .a .vname { grid-column: 2 / 4; }
  .dash-preview .cc-queue .a .meta  { grid-column: 2 / 4; }
  .dash-preview .cc-queue .a .pr-link { grid-column: 2 / 4; }
  .dash-preview .cc-queue .a .act   { grid-column: 3 / 4; grid-row: 1 / 3; align-self: center; }

  /* closing */
  .closing { padding: 56px var(--page-pad-x) 64px; }
  .closing-block h2 { font-size: clamp(32px, 9vw, 44px); }
  .closing-lede { font-size: 16px; }
  .closing-block .ctas .btn { flex: 1 1 auto; justify-content: center; }

  /* footer */
  .footer { padding: 22px var(--page-pad-x); justify-content: flex-start; }
  .footer > div { width: 100%; }

  /* modal */
  .ea-form { padding: 20px 20px 18px; }
  .ea-form h2 { font-size: 26px; }
  .ea-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero .panel .pkpi { grid-template-columns: 1fr; }
  .hero .panel .pkpi .v { justify-self: start; grid-row: auto; grid-column: 1; }
}

/* =============================================================
   reduced motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}