/* Nodus landing styles — modular barrel */

/* Nodus landing: frontier terminal aesthetic. No glass, no glow, no restricted hues. */

:root {
  color-scheme: light;
  --bg: #ecece8;
  --bg-elev: #e3e3de;
  --bg-deep: #d8d8d2;
  --fg: #0d0d0c;
  --fg-soft: #2a2a26;
  --fg-dim: #6a6a63;
  --fg-faint: #8e8e85;
  --line: #c8c8c1;
  --line-strong: #8a8a82;
  --focus: #0a0a0a;
  --signal: #0d0d0c;
  --signal-ink: #0d0d0c;
  /* Type system: serif for prose, mono for chrome / data / code. */
  --font-serif: "Iowan Old Style", "Charter", "Georgia", "Cambria", "Times New Roman", serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Menlo", "Consolas", monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font: var(--font-serif);
  --space: 1rem;
  --page-inline: clamp(1.5rem, 5vw, 4rem);
  --max: 38rem;
  --max-prose: 44rem;
  --max-wide: 72rem;
  --radius: 0;
  /* Pitch slide 06: wedge callout accent (trust-slide style) */
  --slide-accent: #234a62;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--fg);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--fg);
  color: var(--bg);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.5rem 0.75rem;
  background: var(--focus);
  color: var(--bg);
  text-decoration: none;
  z-index: 100;
}

.skip:focus {
  left: 0.5rem;
  top: 0.5rem;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}

a:hover {
  text-decoration-thickness: 1px;
  text-decoration-color: var(--fg-dim);
}

a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}




/* Mono helper for chrome / labels / data. */
.mono {
  font-family: var(--font-mono);
  letter-spacing: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 0;
  background: rgba(236, 236, 232, 0.92);
  backdrop-filter: saturate(120%);
  -webkit-backdrop-filter: saturate(120%);
}

.site-header__inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0.85rem var(--page-inline);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-header__top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.mark {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.mark::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--fg);
}

.mark:hover {
  text-decoration: none;
  color: var(--fg-soft);
}

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.5rem;
}

.nav a {
  font-family: var(--font-mono);
  text-decoration: none;
  color: var(--fg-dim);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.2rem 0;
}

.nav a:hover,
.nav a.is-active {
  color: var(--fg);
  text-decoration: none;
}

/* Clear current-page indicator on tab links so visitors always know
   which section they're in — applies to both hash-driven SPA tabs and
   real page routes (docs, field notes). */
.nav__tab {
  position: relative;
}

.nav__tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.35rem;
  height: 2px;
  background: var(--fg);
}

.nav__cta {
  border: 1px solid var(--fg);
  padding: 0.45rem 0.85rem !important;
  color: var(--fg) !important;
  text-decoration: none !important;
  background: transparent;
  transition: background 140ms ease, color 140ms ease;
}

.nav__cta:hover {
  background: var(--fg);
  color: var(--bg) !important;
  text-decoration: none !important;
}

.nav__cta--primary {
  background: var(--fg);
  color: var(--bg) !important;
}

.nav__cta--primary:hover {
  background: var(--bg);
  color: var(--fg) !important;
}

.nav__ctas {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

main {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 4rem var(--page-inline) 3.5rem;
  scroll-margin-top: 5.5rem;
}

@media (max-width: 640px) {
  .site-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem var(--page-inline);
  }
  .nav__list {
    width: 100%;
    justify-content: flex-start;
    gap: 0.25rem 1.15rem;
  }
  main {
    padding: 2.5rem var(--page-inline) 3rem;
  }
}

#product,
#pricing,
#roadmap {
  scroll-margin-top: 5.5rem;
}

.tab-panel {
  outline: none;
}

/*
 * Both panels ship visible in the HTML so the Product section exists without
 * JavaScript. For JS users that would paint the whole Product section and then
 * yank it away when main.js boots, so hide the non-default panel from the very
 * first paint -- `js` is set by an inline script in <head>, before any layout.
 *
 * Scoped to :not(.tabs-ready): main.js adds that class immediately after the
 * initial setTab(), and from then on the `hidden` property alone decides which
 * panel shows. Without it this rule would keep #panel-details hidden forever.
 */
html.js:not(.tabs-ready) #panel-details {
  display: none;
}

.tab-panel:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

.hero {
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
  margin-bottom: 0;
}

.hero__intro {
  display: contents;
}

.hero__copy {
  min-width: 0;
  order: 1;
}

#panel-home #product {
  margin-bottom: 0;
  padding-bottom: 3.5rem;
}

.hero__eyebrow {
  margin: 0 0 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: inline-flex;
  align-items: center;
  /* Wraps so the badge drops to a second line on a narrow phone instead of
     pushing the eyebrow row past the shell edge. */
  flex-wrap: wrap;
  gap: 0.5rem 0.55rem;
}

.hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--fg-dim);
}

/* Investor badge riding the hero eyebrow: no vertical space of its own, and the
   strongest credibility signal reads before the headline. Sits beside the
   wordmark, divided by a rule, in the eyebrow's own mono voice. */
.yc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: 0.55rem;
  border-left: 1px solid var(--line);
  color: var(--fg-dim);
  letter-spacing: 0.14em;
  text-decoration: none;
  transition: color 140ms ease;
}

.yc-badge img {
  display: block;
  flex: none;
  width: 14px;
  height: 14px;
}

.yc-badge:hover {
  color: var(--fg);
}

.yc-badge:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Only the narrowest phones wrap this row; once the badge starts a line of its
   own the divider reads as a dangling rule, so the gap carries it instead. */
@media (max-width: 380px) {
  .yc-badge {
    padding-left: 0;
    border-left: 0;
  }
}

.hero__title {
  margin: 0 0 1.5rem;
  font-family: var(--font-serif);
  /* Sized so the longest line lands just short of the shell edge: the copy
     column is ~0.9vw wide until the 72rem cap, and the wider title line runs
     13.1em, so 6.7vw fills it without wrapping. */
  font-size: clamp(2.4rem, 6.7vw, 4.8rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
  max-width: none;
}

.hero__title-line {
  display: block;
}

.hero__title-dim {
  color: var(--fg-faint);
  font-style: italic;
}

.hero__lede {
  margin: 0 0 1.25rem;
  width: 100%;
  max-width: 100%;
  color: var(--fg-soft);
  font-size: 1.1875rem;
  line-height: 1.55;
}

.hero__lede-row {
  display: block;
}

.hero__lede-row + .hero__lede-row {
  margin-top: 0.4rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.35rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 800px) {
  .hero__intro {
    display: contents;
  }
}

/* Routing map: the hero explains the product through the routing decision itself. */



/* Shared components */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.78rem 1.15rem;
  border: 1px solid var(--fg);
  background: var(--fg);
  color: var(--bg);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.btn::after {
  content: "→";
  font-family: var(--font-mono);
  font-size: 0.85em;
  letter-spacing: 0;
  transition: transform 140ms ease;
}

.btn:hover {
  background: var(--bg);
  color: var(--fg);
}

.btn:hover::after {
  transform: translateX(2px);
}

.btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-strong);
}

.btn--ghost:hover {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.btn--small {
  padding: 0.55rem 0.85rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.btn--small::after {
  display: none;
}

.section {
  margin-bottom: 4.5rem;
}

.section--rule {
  padding-top: 3.5rem;
  border-top: 1px solid var(--line);
}

.hero + .section--rule {
  border-top: none;
  padding-top: 3.5rem;
}

.section__head {
  margin-bottom: 2.5rem;
  width: 100%;
  max-width: 100%;
}

.section__head[data-num]::before {
  content: attr(data-num);
  display: inline-block;
  margin-bottom: 1.25rem;
  padding-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  border-top: 1px solid var(--fg);
  min-width: 9rem;
}

.section__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.1;
  max-width: 100%;
}

.section__dek {
  margin: 0;
  color: var(--fg-soft);
  width: 100%;
  max-width: 100%;
}

.section__head .section__dek {
  margin-top: 0.85rem;
  font-size: 1.125rem;
  line-height: 1.55;
}

.list {
  margin: 0;
  padding-left: 0;
  width: 100%;
  max-width: 100%;
  list-style: none;
}

.list li {
  position: relative;
  padding-left: 1.5rem;
}

.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.75rem;
  height: 1px;
  background: var(--fg-faint);
}

.list--tight li + li {
  margin-top: 1rem;
}

.list strong {
  color: var(--fg);
  font-weight: 600;
}

.muted {
  color: var(--fg-dim);
  max-width: none;
}

.tight-top {
  margin-top: 1.25rem;
}

/* One-line workload row: no wrap, no scroll, no ellipsis. Keep the string short enough to fit typical viewports. */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 4rem 0 2.5rem;
  margin-top: 0;
}

.site-footer__inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 var(--page-inline);
}

.site-footer__mark {
  margin: 0 0 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.site-footer__mark::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--fg);
}

.site-footer__ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.site-footer__tagline {
  margin: 0 0 1.25rem;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--fg-soft);
  max-width: 22rem;
}

.site-footer__legal {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 0;
}

.site-footer__col--mark .site-footer__mark {
  margin-bottom: 0.6rem;
}

.site-footer__h {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  color: var(--fg);
}

.site-footer__list li {
  line-height: 1.5;
}

.site-footer__list li + li {
  margin-top: 0.55rem;
}

.site-footer__list a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: border-color 140ms ease;
}

.site-footer__list a:hover {
  border-bottom-color: var(--fg);
}

.site-footer__base {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  align-items: baseline;
}

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

@media (max-width: 460px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}

.panel-head {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
  min-width: 0;
  overflow-wrap: anywhere;
}

.panel-head__eyebrow {
  margin: 0 0 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.panel-head__eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--fg-dim);
}

.panel-head__title {
  margin: 0 0 0.85rem;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.15;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.panel-head__dek {
  margin: 0;
  color: var(--fg-soft);
  max-width: 100%;
  min-width: 0;
  font-size: 1.1rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.panel-head__meta {
  margin: 1.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.65rem;
  align-items: center;
}

.panel-head__meta-link {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: border-color 140ms ease, color 140ms ease;
}

.panel-head__meta-link:hover {
  border-color: var(--fg);
  color: var(--fg);
}

.panel-head__meta-sep {
  color: var(--fg-faint);
}

.inline-code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 0.1em 0.4em;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  letter-spacing: 0;
}




/* Home page */

.routing-map {
  order: 4;
  margin: 1.25rem 0 0;
  min-width: 0;
  max-width: 46rem;
  width: 100%;
}

.routing-map svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  background: transparent;
  font-family: "Iowan Old Style", "Charter", "Georgia", "Cambria", "Times New Roman", serif;
}

.routing-map text {
  font-family: "Iowan Old Style", "Charter", "Georgia", "Cambria", "Times New Roman", serif;
}

.routing-map figcaption {
  margin: 0.55rem 0 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--fg-soft);
}

.route-map__node,
.route-map__router {
  fill: var(--bg);
  stroke: var(--fg);
  stroke-width: 1.4;
}

.route-map__router {
  fill: #f4f4f0;
  stroke: var(--signal);
  stroke-width: 2;
}

.route-map__node--muted {
  fill: #f3f3ef;
  stroke: var(--line-strong);
}

.route-map__node--selected {
  fill: #e9e9e4;
  stroke: var(--signal);
  stroke-width: 2;
}

.route-map__signal {
  fill: var(--signal);
}

.route-map__signal--dark {
  fill: var(--fg);
}

.route-map__line {
  fill: none;
  stroke-width: 1.45;
}

.route-map__line--input {
  stroke: var(--fg);
  color: var(--fg);
}

.route-map__line--candidate {
  stroke: var(--line-strong);
  stroke-dasharray: 5 5;
  color: var(--line-strong);
}

.route-map__line--selected {
  stroke: var(--signal);
  stroke-width: 2.5;
  color: var(--signal);
}

.route-map__arrow {
  fill: currentColor;
}

.route-map__rule {
  stroke: var(--line-strong);
  stroke-width: 1;
}

.routing-map .route-map__eyebrow,
.routing-map .route-map__label,
.routing-map .route-map__edge-label,
.routing-map .route-map__footer {
  fill: var(--fg-dim);
  font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Menlo", "Consolas", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
}

.route-map__label--selected {
  fill: var(--signal-ink);
}

.route-map__title {
  fill: var(--fg);
  font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Menlo", "Consolas", monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.routing-map .route-map__detail {
  fill: var(--fg-dim);
  font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Menlo", "Consolas", monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.route-map__decision {
  fill: var(--fg);
  font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Menlo", "Consolas", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.route-map__outcome {
  fill: var(--signal-ink);
  font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Menlo", "Consolas", monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.11em;
}

/* The hero image is an atmospheric routing field, not a labelled flowchart. */
.route-map__contour {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}

.route-map__source circle:first-child {
  fill: var(--bg);
  stroke: var(--fg);
  stroke-width: 1.4;
}

.route-map__source circle:nth-child(2) {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
}

.route-map__source circle:not(:first-child):not(:nth-child(2)) {
  fill: var(--fg);
}

.route-map__path {
  fill: none;
  stroke-linecap: round;
}

.route-map__path--input {
  stroke: var(--fg);
  stroke-width: 1.5;
}

.route-map__path--quiet {
  stroke: var(--line-strong);
  stroke-width: 1.25;
  stroke-dasharray: 5 7;
}

.route-map__path--selected {
  stroke: var(--signal);
  stroke-width: 2.5;
}

.route-map__workload circle {
  fill: var(--fg);
}

.route-map__hub circle:first-child {
  fill: #f4f4f0;
  stroke: var(--signal);
  stroke-width: 1.8;
}

.route-map__hub circle:nth-child(2) {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1;
  opacity: 0.55;
}

.route-map__hub circle:nth-child(3) {
  fill: var(--signal);
}

.route-map__hub text {
  fill: var(--signal-ink);
  font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Menlo", "Consolas", monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.route-map__hub--compact text {
  font-size: 13px;
}

.route-map__capacity circle {
  fill: var(--bg);
  stroke: var(--line-strong);
  stroke-width: 1.5;
}

.route-map__capacity--selected circle {
  fill: var(--signal);
  stroke: var(--signal);
}

.route-map__capacity--selected .route-map__label {
  fill: var(--signal-ink);
}

.route-map__destination circle {
  fill: var(--bg);
  stroke-width: 1.4;
}

.route-map__destination line {
  stroke-width: 1.4;
  stroke-linecap: round;
}

.route-map__destination--quiet circle,
.route-map__destination--quiet line {
  stroke: var(--line-strong);
}

.route-map__destination--selected circle,
.route-map__destination--selected line {
  stroke: var(--signal);
}

.route-map__destination--selected circle:nth-child(3) {
  fill: var(--signal);
  stroke: none;
}

@media (max-width: 800px) {
  .routing-map {
    max-width: 46rem;
  }
}

.workload-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.25rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  max-width: 100%;
}

.workload-strip__label {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.workload-strip__text {
  flex: 1 1 auto;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  letter-spacing: 0;
  color: var(--fg-soft);
  line-height: 1.45;
}

.deck {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 100%;
}

.deck__block {
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  /* minmax(0,…) lets the prose column shrink and wrap instead of clipping (grid default min-width: auto). */
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0.75rem 2rem;
  align-items: start;
  min-width: 0;
}

.deck__block:first-child {
  padding-top: 0;
}

.deck__block:last-child {
  border-bottom: none;
}

.deck__h {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding-top: 0.55rem;
  border-top: 1px solid var(--fg);
  align-self: start;
  justify-self: stretch;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  line-height: 1.35;
}

.deck__p {
  margin: 0;
  color: var(--fg);
  max-width: 100%;
  min-width: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  grid-column: 2;
  overflow-wrap: anywhere;
}

.deck__block > *:not(.deck__h) {
  grid-column: 2;
  min-width: 0;
}

.deck__block .list {
  overflow-wrap: anywhere;
}

.deck__block figure {
  min-width: 0;
  max-width: 100%;
}

.deck__block .deck__p + .list,
.deck__block .deck__p + .terminal,
.deck__block .deck__p + figure {
  margin-top: 1.25rem;
}

.deck__p--tight {
  margin-top: 0.85rem;
}

.deck__p strong,
.deck__block .list strong {
  color: var(--fg);
  font-weight: 600;
}

.pricing-tiers {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 0.5rem;
  font-family: var(--font-sans);
  table-layout: fixed;
}

.pricing-tiers thead th {
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--fg);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-soft);
  background: var(--bg-elev);
}

.pricing-tiers thead tr + tr th {
  border-top: 1px solid var(--line);
}

.pricing-tiers thead th[rowspan] {
  vertical-align: middle;
}

.pricing-tiers__th-group {
  text-align: center;
  letter-spacing: 0.12em;
}

.pricing-tiers tbody td {
  padding: 0.85rem 0.85rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  font-size: 0.95rem;
}

.pricing-tiers tbody tr:last-child td {
  border-bottom: 1px solid var(--fg);
}

.pricing-tiers td:first-child {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--fg);
  width: 42%;
}

.pricing-tiers td:nth-child(2) {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--fg);
  width: 22%;
}

.pricing-tiers td:nth-child(3) {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--fg-soft);
}

/* SKU price card: 6 columns (SKU · Nodus · Tier-3 · Neocloud · Hyperscaler · Savings) */
.pricing-tiers--sku td:first-child {
  width: 18%;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  font-weight: 500;
}
.pricing-tiers--sku td:nth-child(2) {
  width: 13%;
  font-size: 1rem;
}
.pricing-tiers--sku td:nth-child(3),
.pricing-tiers--sku td:nth-child(4),
.pricing-tiers--sku td:nth-child(5) {
  width: 15%;
  font-size: 0.8rem;
  color: var(--fg-soft);
  text-decoration: line-through;
  text-decoration-color: var(--line);
}
.pricing-tiers--sku td:nth-child(6) {
  width: 24%;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: 0.02em;
  text-decoration: none;
}

/* Commitment plan card: 3 columns (Plan · SKU discount · Platform fee) */
.pricing-tiers--commits td:first-child {
  width: 28%;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
  font-weight: 500;
}
.pricing-tiers--commits td:nth-child(2) {
  width: 18%;
  font-size: 1rem;
}
.pricing-tiers--commits td:nth-child(3) {
  width: 54%;
  font-size: 0.82rem;
}


.pricing-example {
  margin: 1.5rem 0 0;
  padding: 1.1rem 1.25rem 1.25rem;
  border: 1px solid var(--fg);
  background: var(--bg-elev);
}

.pricing-example__h {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}

.pricing-example__lede {
  margin: 0.35rem 0 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--fg-soft);
}

.pricing-example__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pricing-example__list li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.pricing-example__list li:last-child {
  border-bottom: 0;
}

.pricing-example__k {
  color: var(--fg-soft);
  letter-spacing: 0.04em;
}

.pricing-example__v {
  color: var(--fg);
  text-align: right;
  font-weight: 500;
}

.pricing-example__total {
  margin-top: 0.25rem;
  border-top: 1px solid var(--fg) !important;
  border-bottom: 0 !important;
  padding-top: 0.7rem !important;
}

.pricing-example__total .pricing-example__k {
  color: var(--fg);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.pricing-example__total .pricing-example__v {
  font-size: 1rem;
  font-weight: 600;
}

.pricing-example__note {
  margin: 0.85rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--fg-soft);
  font-style: italic;
}

@media (max-width: 600px) {
  .pricing-example__list li {
    flex-direction: column;
    gap: 0.2rem;
  }
  .pricing-example__v {
    text-align: left;
  }
  .pricing-tiers--sku td:nth-child(3),
  .pricing-tiers--sku td:nth-child(4),
  .pricing-tiers--sku td:nth-child(5) {
    text-decoration: none;
  }
  .pricing-tiers--sku td:nth-child(2)::before {
    content: "Nodus PAYG: ";
    color: var(--fg-soft);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-right: 0.4rem;
  }
  .pricing-tiers--sku td:nth-child(3)::before {
    content: "Tier-3 (ref.): ";
    color: var(--fg-soft);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-right: 0.4rem;
  }
  .pricing-tiers--sku td:nth-child(4)::before {
    content: "Neocloud (ref.): ";
    color: var(--fg-soft);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-right: 0.4rem;
  }
  .pricing-tiers--sku td:nth-child(5)::before {
    content: "Hyperscaler (AWS): ";
    color: var(--fg-soft);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-right: 0.4rem;
  }
  .pricing-tiers--sku td:nth-child(6)::before {
    content: "Savings vs hyperscaler: ";
    color: var(--fg-soft);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-right: 0.4rem;
  }
  .pricing-tiers--commits td:nth-child(3)::before {
    content: "Includes: ";
    color: var(--fg-soft);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-right: 0.4rem;
  }
  .pricing-tiers thead {
    display: none;
  }
  .pricing-tiers,
  .pricing-tiers tbody,
  .pricing-tiers tr,
  .pricing-tiers td {
    display: block;
    width: 100%;
  }
  .pricing-tiers tr {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
  }
  .pricing-tiers tr:last-child {
    border-bottom: 1px solid var(--fg);
  }
  .pricing-tiers td {
    border: 0;
    padding: 0.15rem 0;
  }
  .pricing-tiers td:first-child {
    font-size: 0.7rem;
    color: var(--fg-soft);
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }
  .pricing-tiers--sku td:nth-child(2) {
    font-size: 1.4rem;
  }
}

.workload-classes {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 0.5rem;
  font-family: var(--font-sans);
  table-layout: fixed;
}

.workload-classes thead th {
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--fg);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-soft);
  background: var(--bg-elev);
}

.workload-classes tbody td {
  padding: 0.85rem 0.85rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--fg-soft);
}

.workload-classes tbody tr:last-child td {
  border-bottom: 1px solid var(--fg);
}

.workload-classes td:first-child {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--fg);
  width: 22%;
  text-transform: uppercase;
}

.workload-classes td:nth-child(2) {
  width: 38%;
}

.workload-classes__tag {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.18rem 0.45rem;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  background: var(--bg);
  white-space: nowrap;
}

.workload-classes__tag--live {
  color: var(--bg);
  background: var(--fg);
  border-color: var(--fg);
}

.vs-table td:first-child {
  width: 24%;
}

.vs-table td:nth-child(2) {
  width: 38%;
  color: var(--fg-soft);
}

.vs-table td:nth-child(3) {
  width: 38%;
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}

@media (max-width: 720px) {
  .workload-classes thead {
    display: none;
  }
  .workload-classes,
  .workload-classes tbody,
  .workload-classes tr,
  .workload-classes td {
    display: block;
    width: 100%;
  }
  .workload-classes tr {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
  }
  .workload-classes tr:last-child {
    border-bottom: 1px solid var(--fg);
  }
  .workload-classes td {
    border: 0;
    padding: 0.2rem 0;
  }
  .workload-classes td:first-child {
    font-size: 0.95rem;
    color: var(--fg);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0.35rem;
  }
  .workload-classes__tag {
    margin-left: 0.5rem;
    margin-top: 0;
  }
}

@media (max-width: 900px) {
  .deck__block {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .deck__h,
  .deck__p,
  .deck__block > * {
    grid-column: 1;
  }
}

.lede-inset {
  margin: 0;
  max-width: none;
  color: var(--fg-soft);
  font-size: 1.125rem;
  line-height: 1.55;
}

.lede-inset strong {
  color: var(--fg);
  font-weight: 600;
}

/* Homepage conversion paths: one clear route for operators, one for investors. */
.workload-intake,
.investor-brief {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--fg);
}

.workload-intake__head {
  max-width: none;
}

.workload-intake__eyebrow,
.investor-brief__eyebrow {
  margin: 0 0 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.workload-intake h2,
.investor-brief h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.workload-intake__head > p:last-child,
.investor-brief__copy > p:last-child {
  margin: 1rem 0 0;
  max-width: none;
  color: var(--fg-soft);
  font-size: 1.05rem;
  line-height: 1.55;
}

.workload-intake__steps {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 1.1rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.workload-intake__steps li {
  min-height: 0;
  padding: 0.75rem 1.1rem;
  border-right: 0;
}

.workload-intake__steps li:last-child {
  border-right: 0;
}

.workload-intake__steps span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--fg-dim);
}

.workload-intake__steps h3 {
  margin: 1rem 0 0.5rem;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.15;
}

.workload-intake__steps p,
.investor-brief__proof p {
  margin: 0;
  color: var(--fg-soft);
  font-size: 0.94rem;
  line-height: 1.48;
}

.workload-intake__action {
  margin-top: 0.65rem;
  padding: 0.65rem 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.1rem;
  border-bottom: 0;
}

.workload-intake__action p {
  margin: 0;
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

.investor-brief {
  margin-bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.92fr);
  gap: 2.25rem;
  align-items: start;
}

.investor-brief__proof {
  padding: 0;
  border-top: 0;
}

.investor-brief__proof p + p {
  margin-top: 0.85rem;
}

.investor-brief__proof strong {
  color: var(--fg);
  font-weight: 600;
}

.investor-brief__proof .btn {
  margin-top: 1.5rem;
}

@media (max-width: 720px) {
  .workload-intake,
  .investor-brief {
    margin-top: 2.75rem;
  }

  .workload-intake__steps,
  .investor-brief {
    grid-template-columns: 1fr;
  }

  .workload-intake__steps li {
    min-height: 0;
    border-right: 0;
    border-bottom: 0;
  }

  .workload-intake__steps li:last-child {
    border-bottom: 0;
  }

  .workload-intake__steps h3 {
    margin-top: 1.15rem;
  }

  .workload-intake__action {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.6rem;
  }
}

@media (max-width: 720px) {
  .targets {
    grid-template-columns: 1fr;
  }
  .targets__cell {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .targets__cell:last-child {
    border-bottom: none;
  }
}

@media (max-width: 600px) {
  .targets {
    grid-template-columns: 1fr;
  }
}

/* Diagrams: monochrome, theme-aware. */
.diagram {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 2rem 0 0;
  color: var(--fg);
  border: 1px solid var(--line);
  background: var(--bg);
}

figure {
  margin: 2rem 0 0;
}

figure + .diagram__caption,
.diagram + .diagram__caption {
  margin-top: 0.85rem;
}

.diagram--inset {
  margin-top: 1rem;
}

/* Routing loop: real solid edges (no dash animation). Feedback edges stay dashed, readable. */
.diagram--routing .routing-edge--action {
  stroke: currentColor;
  stroke-width: 1.65;
  opacity: 1;
}

.diagram--routing .routing-edge--feedback {
  stroke: currentColor;
  stroke-width: 1.35;
  opacity: 0.72;
}

.diagram--routing text.routing-label {
  fill: var(--fg);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.diagram__caption {
  display: block;
  margin: 0.85rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.diagram__caption-note {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: none;
  font-weight: 400;
}

.diagram--routing .routing-edge--feedback.dgm-stroke--dashed {
  stroke-dasharray: 6 5;
}

/* SVG primitives shared across diagrams. */
.dgm-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.dgm-stroke--strong {
  stroke-width: 1.5;
}

.dgm-stroke--dim {
  stroke: currentColor;
  opacity: 0.4;
}

.dgm-stroke--dashed {
  stroke-dasharray: 4 4;
}

.dgm-fill-bg {
  fill: var(--bg-elev);
}

.dgm-fill-fg {
  fill: currentColor;
}

.dgm-text {
  fill: currentColor;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.dgm-text--label {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--fg-dim);
}

.dgm-text--mono {
  font-size: 10px;
  letter-spacing: 0.02em;
}

/* Marching-ants animation along data paths. Brutalist motion: monochrome only. */
@keyframes dgm-flow {
  to { stroke-dashoffset: -16; }
}

.dgm-flow {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 4 4;
  animation: dgm-flow 1.6s linear infinite;
  vector-effect: non-scaling-stroke;
}

.dgm-flow--slow {
  animation-duration: 3.2s;
}

@keyframes dgm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.dgm-pulse {
  animation: dgm-pulse 2s ease-in-out infinite;
}

@keyframes dgm-blink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0; }
}

.dgm-cursor {
  animation: dgm-blink 1s steps(1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .dgm-flow,
  .dgm-pulse,
  .dgm-cursor {
    animation: none;
  }
  .dgm-flow {
    stroke-dashoffset: 0;
  }
}

/* Inline icon row used above What-Nodus-does bullets. */
.icon-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 2rem;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--line);
  background: var(--bg);
}

.icon-row__cell {
  padding: 1.25rem 1.35rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-right: 1px solid var(--line);
}

.icon-row__cell:last-child {
  border-right: none;
}

.icon-row__svg {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  color: var(--fg);
  shape-rendering: geometricPrecision;
  stroke-width: 1.25;
}

.icon-row__label {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  letter-spacing: 0;
  color: var(--fg);
  line-height: 1.4;
}

.icon-row__k {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

@media (max-width: 640px) {
  .icon-row {
    grid-template-columns: 1fr;
  }
  .icon-row__cell {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .icon-row__cell:last-child {
    border-bottom: none;
  }
}

/* Terminal/code block: looks like a real CLI capture, fits the brutalist shell. */
.terminal {
  margin: 2rem 0 0;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  max-width: var(--max-wide);
  overflow: hidden;
}

.terminal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  background: var(--bg);
}

.terminal__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--fg-faint);
  margin-right: 0.45rem;
  vertical-align: middle;
}

.terminal__body {
  margin: 0;
  padding: 1rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--fg);
  white-space: pre;
  overflow-x: auto;
  background: var(--bg-elev);
}

.terminal__prompt {
  color: var(--fg-dim);
}

.terminal__comment {
  color: var(--fg-dim);
}

.terminal__ok {
  color: var(--fg);
  font-weight: 700;
}

/* ---------------------------------------------------------------- */
/* Field notes (blog tab). Reuses .panel-head, .terminal, .inline-code,
   and the existing diagram primitives. New classes are blog-specific. */
/* ---------------------------------------------------------------- */

/* --- Index view (default at #blog) -------------------------------- */

/* Hero proof strip: design-partner profile. */
.capability-strip {
  order: 2;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  width: 100%;
  max-width: 100%;
}

.capability-strip li {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.capability-strip__k {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.capability-strip__v {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--fg);
}

/* Hero flow: an outcome-led alternative to an infrastructure diagram. */
.hero-flow {
  margin: 2.75rem 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  border: 1px solid var(--line-strong);
  background: var(--bg);
}

.hero-flow__card {
  min-height: 15rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-flow__card--nodus {
  color: var(--bg);
  background: var(--fg);
}

.hero-flow__k {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.hero-flow__card--nodus .hero-flow__k {
  color: var(--bg-deep);
}

.hero-flow__title {
  margin: auto 0 0.85rem;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.hero-flow__body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--fg-soft);
}

.hero-flow__card--nodus .hero-flow__body {
  color: var(--bg-deep);
}

.hero-flow__arrow {
  width: 2.5rem;
  display: grid;
  place-items: center;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  color: var(--fg-dim);
}

@media (max-width: 600px) {
  .capability-strip {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .hero-flow {
    grid-template-columns: 1fr;
  }

  .hero-flow__card {
    min-height: 0;
    padding: 1.25rem;
  }

  .hero-flow__arrow {
    width: auto;
    height: 2.25rem;
    transform: rotate(90deg);
  }
}

/* Hero credibility band: founder background, single mono row. */
.cred-strip {
  order: 5;
  margin: 1.25rem 0 0;
  padding: 0.7rem 0 0;
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: center;
}

.cred-strip__k {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}

.cred-strip__v {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--fg);
}

.cred-strip__logos {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  /* One equal column per item, whatever the count. A hardcoded track count
     left an empty trailing cell the moment an unsupported employer was
     removed from the strip. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  width: min(100%, 70rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cred-strip__logos li {
  min-height: 3.6rem;
  padding: 0.7rem 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  border-right: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--fg);
  white-space: nowrap;
}

.cred-strip__logos li:last-child {
  border-right: 0;
}

/* Marks sit next to the wordmark, desaturated so six different brand palettes
   read as one strip rather than six competing accents. */
.cred-strip__logos img {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.15);
}

@media (max-width: 600px) {
  .cred-strip {
    margin-top: 1.5rem;
  }

  .cred-strip__logos {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cred-strip__logos li {
    padding: 0.7rem 0.55rem;
  }

  .cred-strip__logos li:nth-child(2n) {
    border-right: 0;
  }

  /* Every row except the last, so the final row does not double up against
     the container's own border-bottom. Counting from the end keeps this
     correct for any number of items. */
  .cred-strip__logos li:not(:nth-last-child(-n + 2)) {
    border-bottom: 1px solid var(--line);
  }
}


/* Investor line: the strip's own label grammar, one step quieter. Scoped to the
   ul above, the grayscale filter does not reach this mark — deliberately, since
   recolouring YC's logo would misuse it. */
.cred-strip__backed {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
  /* No font-family: inherits the serif so it brackets the band in the same
     voice as .cred-strip__k above, with the mono logo row between them. */
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-decoration: none;
  transition: color 140ms ease;
}

.cred-strip__backed img {
  display: block;
  flex: none;
  width: 15px;
  height: 15px;
}

.cred-strip__backed:hover {
  color: var(--fg);
}

.cred-strip__backed:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}



/* Product phase explorer: routing graph with clickable regions */
.phase-explorer {
  margin: 0.5rem 0 0;
  max-width: none;
  width: 100%;
}

.phase-explorer__hint {
  margin: 0 0 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.phase-explorer__graph {
  margin: 0;
  max-width: 46rem;
  width: 100%;
}

.phase-graph {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--fg);
  touch-action: manipulation;
}

.journey-svg__layer {
  fill: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.journey-svg__mesh path {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 0.9;
  opacity: 0.22;
}

.journey-svg__edge {
  fill: none;
  stroke: var(--fg);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.journey-svg__edge--best {
  stroke-width: 2.1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: journey-draw 880ms ease-out 60ms forwards;
}

.journey-svg__edge--backup {
  stroke-width: 1.25;
  stroke-dasharray: 3.5 3.5;
  opacity: 0.5;
}

/* Recovery lane: distinct from the fallback graph above it — that one is a
   plan, this one is the return trip. */
.journey-svg__edge--recover {
  stroke-width: 1.15;
  stroke-dasharray: 2 3;
}

.phase-graph__arrow {
  fill: var(--fg);
  stroke: none;
}

.journey-svg__node circle {
  fill: var(--bg);
  stroke: var(--fg);
  stroke-width: 1.15;
}

.journey-svg__node text {
  fill: var(--fg);
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.journey-svg__node--dim {
  opacity: 0.36;
}

.journey-svg__node--focus circle {
  stroke-width: 1.6;
}

.journey-svg__node--best circle,
.journey-svg__node--done circle {
  fill: var(--fg);
  stroke: var(--fg);
}

.journey-svg__node--best text,
.journey-svg__node--done text {
  fill: var(--bg);
}

.journey-svg__node--backup circle {
  stroke-dasharray: 2.5 2;
}

.journey-svg__node--done text {
  font-size: 8px;
  letter-spacing: 0.06em;
}

.journey-svg__mesh,
.phase-graph__paths,
.phase-graph__col,
.phase-graph__region-labels,
.journey-svg__layer {
  pointer-events: none;
}

.phase-graph__hit {
  fill: transparent;
  cursor: pointer;
  pointer-events: all;
}

.phase-graph__hit:hover {
  fill: color-mix(in srgb, var(--fg) 4%, transparent);
}

.phase-graph__hit:focus {
  outline: none;
}

.phase-graph__hit:focus-visible {
  fill: color-mix(in srgb, var(--fg) 6%, transparent);
  stroke: var(--fg);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.phase-graph__hit.is-active {
  fill: color-mix(in srgb, var(--fg) 5%, transparent);
}

.phase-graph__region-label {
  fill: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
}

.phase-graph[data-active-phase="profile"] .phase-graph__region-label[data-phase-label="profile"],
.phase-graph[data-active-phase="routing"] .phase-graph__region-label[data-phase-label="routing"],
.phase-graph[data-active-phase="bidding"] .phase-graph__region-label[data-phase-label="bidding"],
.phase-graph[data-active-phase="execution-checkpoint"] .phase-graph__region-label[data-phase-label="execution-checkpoint"],
.phase-graph[data-active-phase="recovery"] .phase-graph__region-label[data-phase-label="recovery"] {
  fill: var(--fg);
  opacity: 1;
}

/* Every column starts dim; each phase lights the one it consumes and the one
   it produces. Recovery lights the market it re-enters, not just its own lane. */
.phase-graph__col {
  opacity: 0.28;
}

.phase-graph[data-active-phase="profile"] .phase-graph__col[data-col="workloads"],
.phase-graph[data-active-phase="profile"] .phase-graph__col[data-col="envelopes"],
.phase-graph[data-active-phase="routing"] .phase-graph__col[data-col="envelopes"],
.phase-graph[data-active-phase="routing"] .phase-graph__col[data-col="offers"],
.phase-graph[data-active-phase="bidding"] .phase-graph__col[data-col="offers"],
.phase-graph[data-active-phase="bidding"] .phase-graph__col[data-col="bids"],
.phase-graph[data-active-phase="execution-checkpoint"] .phase-graph__col[data-col="bids"],
.phase-graph[data-active-phase="execution-checkpoint"] .phase-graph__col[data-col="finish"],
.phase-graph[data-active-phase="recovery"] .phase-graph__col[data-col="offers"],
.phase-graph[data-active-phase="recovery"] .phase-graph__col[data-col="bids"],
.phase-graph[data-active-phase="recovery"] .phase-graph__col[data-col="recovery"] {
  opacity: 1;
}

/* The primary path is what recovery has just lost, so it steps back. */
.phase-graph[data-active-phase="recovery"] .phase-graph__paths .journey-svg__edge--best {
  opacity: 0.3;
}

.phase-explorer__chrome {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin: 0.85rem 0 0;
  padding: 0.35rem 0;
  max-width: 46rem;
}

.phase-explorer__nav[data-phase-prev] {
  justify-self: start;
}

.phase-explorer__nav[data-phase-next] {
  justify-self: end;
}

.phase-explorer__dots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.45rem;
  align-items: center;
  justify-self: center;
}

.phase-explorer__nav {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.35rem 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  cursor: pointer;
  border-bottom: 1px solid var(--line-strong);
}

.phase-explorer__nav:hover {
  border-bottom-color: var(--fg);
}

.phase-explorer__nav:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.phase-explorer__nav:disabled {
  opacity: 0.35;
  cursor: default;
  border-bottom-color: transparent;
}

.phase-explorer__dots button {
  appearance: none;
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 1px solid var(--fg);
  background: transparent;
  cursor: pointer;
}

.phase-explorer__dots button.is-active {
  background: var(--fg);
}

.phase-explorer__dots button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.phase-panel {
  margin-top: 1.15rem;
  min-height: 9.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1.15rem;
}

.phase-panel__card {
  margin: 0;
  max-width: none;
  animation: phase-in 280ms ease-out both;
}

.phase-panel__card[hidden] {
  display: none;
}

.phase-panel__k {
  margin: 0 0 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.phase-panel__title {
  margin: 0 0 0.55rem;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--fg);
}

.phase-panel__body {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--fg-soft);
}

/* Stage handoff rows: what the step consumes, what it emits, and what makes
   the handoff durable — the same three columns the design docs use. */
.phase-panel__io {
  margin: 1rem 0 0;
  display: grid;
  gap: 0.4rem;
  border-top: 1px solid var(--line);
  padding-top: 0.85rem;
  max-width: 54rem;
}

.phase-panel__io > div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
}

.phase-panel__io dt {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.phase-panel__io dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--fg-soft);
}

.phase-panel__io code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  color: var(--fg);
}

@keyframes journey-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes phase-in {
  from {
    opacity: 0;
    transform: translateY(0.4rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-svg__edge--best,
  .phase-panel__card {
    animation: none;
  }

  .journey-svg__edge--best {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}

@media (max-width: 640px) {
  .phase-graph__region-label {
    font-size: 6.5px;
  }

  .phase-explorer__chrome {
    gap: 0.65rem;
  }

  .phase-panel {
    min-height: 11rem;
  }

  /* Two columns of handoff rows do not survive a phone; stack them. */
  .phase-panel__io > div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}




/* Blog / field notes */


.blog-index {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.blog-index__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 0;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--fg);
}

.blog-index__head--upcoming {
  margin-top: 2.5rem;
  border-bottom-color: var(--line);
}

.blog-index__section-h {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.blog-index__count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--fg-dim);
}

.blog-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.blog-index__list > li {
  border-bottom: 1px solid var(--line);
}

.blog-index__list > li:first-child {
  border-top: none;
}

.blog-index__link,
.blog-index__item--upcoming {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr) 6rem;
  gap: 1.5rem;
  align-items: start;
  padding: 1.4rem 0.25rem 1.5rem;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background 120ms ease, padding-left 160ms ease;
}

.blog-index__link::before {
  /* Hairline that grows on hover — brutalist rather than animated underline. */
  content: "";
  position: absolute;
  left: -1.25rem;
  top: 1.6rem;
  bottom: 1.55rem;
  width: 2px;
  background: var(--fg);
  opacity: 0;
  transition: opacity 140ms ease, left 160ms ease;
}

.blog-index__link:hover {
  background: var(--bg-elev);
  padding-left: 1rem;
}

.blog-index__link:hover::before {
  opacity: 1;
  left: -0.25rem;
}

.blog-index__link:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: -2px;
}

.blog-index__num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
  padding-top: 0.25rem;
  white-space: nowrap;
}

.blog-index__main {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.blog-index__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.18rem;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--fg);
}

.blog-index__dek {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--fg-soft);
  max-width: none;
}

.blog-index__meta {
  margin: 0.2rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.blog-index__cta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  text-align: right;
  padding-top: 0.3rem;
  white-space: nowrap;
  align-self: start;
}

.blog-index__list--upcoming .blog-index__title {
  color: var(--fg-soft);
}

.blog-index__status {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-align: right;
  padding-top: 0.3rem;
  white-space: nowrap;
  align-self: start;
}

.blog-index__foot {
  margin: 1.5rem 0 0;
  font-family: var(--font-serif);
  font-size: 0.98rem;
  color: var(--fg-soft);
}

.blog-index__mail {
  color: var(--fg);
  border-bottom: 1px solid var(--fg);
  padding-bottom: 1px;
  text-decoration: none;
  margin-left: 0.35rem;
}

/* --- Posts container + back link --------------------------------- */

.blog-posts {
  /* No layout of its own — children are full-width articles. */
}

.blog__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding: 0.5rem 0.75rem 0.5rem 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}

.blog__back:hover {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

.blog__back-arrow {
  display: inline-block;
  transition: transform 140ms ease;
}

.blog__back:hover .blog__back-arrow {
  transform: translateX(-3px);
}

.blog__back--bottom {
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.blog__post {
  border-top: 1px solid var(--fg);
  padding-top: 2.25rem;
}

.blog__post-head {
  margin-bottom: 2.5rem;
}

.blog__post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  margin: 0 0 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.blog__post-meta-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.blog__post-meta-k {
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.62rem;
}

.blog__post-meta-v {
  color: var(--fg);
}

.blog__post-title {
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.2vw, 2.35rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.18;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.blog__post-lede {
  margin: 0;
  max-width: none;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--fg-soft);
}

.blog__post-body {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-width: none;
}

.blog__post-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.blog__post-h {
  margin: 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.blog__post-p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.blog__post-pull {
  margin: 0.4rem 0;
  padding: 0.85rem 1rem 0.9rem 1.1rem;
  border-left: 2px solid var(--fg);
  background: var(--bg-elev);
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--fg);
}

/* Interim-runtime callout. These notes describe the destination stack, so
   every boundary states where the shipping pilot actually differs — quieter
   than a pull quote, which is for the argument rather than the caveat. */
.blog__post-note {
  margin: 0.35rem 0;
  padding: 0.8rem 1rem 0.85rem;
  border: 1px dashed var(--line-strong);
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--fg-soft);
}

.blog__post-note__k {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.blog__post-list {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.6;
}

.blog__post-list li + li {
  margin-top: 0.55rem;
}

.blog__post-list strong {
  font-family: var(--font-serif);
  font-weight: 600;
}

.blog__fig {
  margin: 0.5rem 0 0.25rem;
  max-width: var(--max-wide);
  width: 100%;
}

/* --- Live canvas visualizations ----------------------------------- */

.blog__viz {
  margin: 0.85rem 0 0.15rem;
  max-width: var(--max-wide);
  width: 100%;
}

.blog__viz-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: var(--viz-h, 280px);
  min-height: var(--viz-h, 280px);
  border: 1px solid var(--fg);
  background: var(--bg);
  overflow: hidden;
}

.blog__viz-canvas {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--bg);
}

.blog__viz-status {
  flex: 0 0 auto;
  min-height: 2.05rem;
  padding: 0.55rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--fg);
  pointer-events: none;
  border-top: 1px solid var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

/* No-JS / empty-stage fallback copy (replaced when canvas mounts). */
.blog__viz-stage:empty::before {
  content: attr(aria-label);
  display: block;
  padding: 1.25rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--fg-dim);
}

.blog__viz .diagram__caption {
  display: block;
  margin: 1rem 0 0;
  padding: 0 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  line-height: 1.55;
}

html.js .blog__viz {
  opacity: 0;
  transform: translateY(0.65rem);
  transition:
    opacity 640ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.js .blog__viz.is-in {
  opacity: 1;
  transform: none;
}

/* --- Visual aids (HTML strips) ------------------------------------ */

.blog__aid {
  margin: 0.35rem 0 0;
  border: 1px solid var(--line);
  background: var(--bg);
  max-width: var(--max-wide);
  width: 100%;
}

.blog__aid--grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.blog__aid__cell {
  padding: 1.15rem 1.15rem 1.25rem;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.blog__aid__cell:last-child {
  border-right: none;
}

.blog__aid__k {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.blog__aid__v {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--fg);
}

.blog__aid__s {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
  line-height: 1.4;
}

.blog__stack {
  margin: 0.35rem 0 0;
  border: 1px solid var(--line);
  background: var(--bg);
  max-width: var(--max-wide);
  width: 100%;
  display: flex;
  flex-direction: column;
}

.blog__stack__row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
}

.blog__stack__row:last-child {
  border-bottom: none;
}

.blog__stack__row--reserve {
  background: var(--bg-elev);
}

.blog__stack__k {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.blog__stack__bar {
  height: 0.55rem;
  background: var(--fg);
  transform-origin: left center;
}

.blog__stack__bar--dim {
  background: var(--line-strong);
}

.blog__stack__bar--ghost {
  background: var(--line);
}

.blog__stack__v {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--fg);
  white-space: nowrap;
}

.blog__modes {
  margin: 0.35rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  background: var(--bg);
  max-width: var(--max-wide);
  width: 100%;
}

.blog__mode {
  padding: 1.2rem 1.25rem 1.3rem;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.blog__mode:last-child {
  border-right: none;
}

.blog__mode__tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}

.blog__mode__body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--fg-soft);
}

.blog__mode__path {
  margin: 0.15rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
  line-height: 1.4;
}

html.js .blog__aid[data-reveal] .blog__aid__cell,
html.js .blog__modes[data-reveal] .blog__mode,
html.js .blog__stack[data-reveal] .blog__stack__row {
  opacity: 0;
  transform: translateY(0.4rem);
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

html.js .blog__aid[data-reveal].is-in .blog__aid__cell,
html.js .blog__modes[data-reveal].is-in .blog__mode,
html.js .blog__stack[data-reveal].is-in .blog__stack__row {
  opacity: 1;
  transform: none;
}

html.js .blog__stack[data-reveal] .blog__stack__bar {
  transform: scaleX(0);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 120ms);
}

html.js .blog__stack[data-reveal].is-in .blog__stack__bar {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  html.js .blog__viz,
  html.js .blog__aid[data-reveal] .blog__aid__cell,
  html.js .blog__modes[data-reveal] .blog__mode,
  html.js .blog__stack[data-reveal] .blog__stack__row,
  html.js .blog__stack[data-reveal] .blog__stack__bar {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 820px) {
  .blog__aid--grid {
    grid-template-columns: 1fr;
  }

  .blog__aid__cell {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .blog__aid__cell:last-child {
    border-bottom: none;
  }

  .blog__modes {
    grid-template-columns: 1fr;
  }

  .blog__mode {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .blog__mode:last-child {
    border-bottom: none;
  }

  .blog__stack__row {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .blog__viz-stage {
    min-height: var(--viz-h-mobile, 220px);
  }
}

.blog__post-section .terminal {
  margin: 0.25rem 0 0;
  /* Code blocks should match the diagram width, not the prose column. */
  max-width: var(--max-wide);
}

.blog__post-foot {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  align-items: baseline;
}

.blog__post-foot-line {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--fg-soft);
  flex: 1 1 18rem;
}

.blog__post-foot-mail {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--fg);
  border-bottom: 1px solid var(--fg);
  padding-bottom: 1px;
  text-decoration: none;
}

/* --- Mobile ------------------------------------------------------- */

@media (max-width: 720px) {
  .blog-index__link,
  .blog-index__item--upcoming {
    grid-template-columns: 3rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 0.4rem;
    gap: 0.4rem 1rem;
    padding: 1.1rem 0.25rem 1.2rem;
  }
  .blog-index__cta,
  .blog-index__status {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    padding-top: 0.1rem;
  }
  .blog-index__link:hover {
    padding-left: 0.25rem;
  }
  .blog-index__link::before {
    display: none;
  }
  .blog__post-meta {
    gap: 0.5rem 1.25rem;
  }
}

/* ================================================================ */
/* Docs (SDK reference).                                             */
/* Two-column layout: sticky sidebar nav + content area.             */
/* Under 960px the sidebar collapses to a block above the content.   */
/* ================================================================ */

/* The docs page gets a wider canvas than prose pages so reference
   tables and long signatures don't crowd the content column. */
main.docs-page {
  max-width: 88rem;
}

/* Pitch deck: wide SKU tables and two-column slides match docs canvas. */
main.pitch-page {
  max-width: 88rem;
}



/* Nodus Labs — frontier surface (incoming). */

.labs-page main.labs {
  padding-top: 0;
}

.labs-hero {
  position: relative;
  margin: 0 calc(-1 * var(--page-inline)) 2.75rem;
  min-height: min(72vh, 36rem);
  display: grid;
  align-items: end;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #f4f4f0 0%, transparent 55%),
    linear-gradient(180deg, #e8e8e2 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}

.labs-hero__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  mask-image: linear-gradient(180deg, #000 35%, transparent 96%);
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 96%);
}

.labs-hero__ascii {
  margin: 0;
  padding: 1.25rem var(--page-inline) 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: clamp(0.55rem, 1.05vw, 0.72rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--fg);
  white-space: pre;
  user-select: none;
}

.labs-hero__copy {
  position: relative;
  z-index: 1;
  padding: 3.5rem var(--page-inline) 2.75rem;
  max-width: 40rem;
}

.labs-hero__brand {
  margin: 0 0 1.1rem;
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg);
}

.labs-hero__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 4.2vw, 2.85rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--fg);
}

.labs-hero__dek {
  margin: 1.15rem 0 0;
  max-width: 34rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--fg-soft);
}

/* The model stamp. Every number on this page is model output, and the caveat
   travels with them rather than sitting in a footnote nobody reaches. */
.labs-stamp {
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 0 0 3rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--fg-soft);
}

.labs-stamp__tag {
  padding: 0.1rem 0.45rem;
  background: var(--fg);
  color: var(--bg);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* On a note the stamp sits under the title rather than under the hero. */
.labs-stamp--note {
  margin: 1.75rem 0 0;
}

.labs-prose {
  max-width: var(--max-prose);
}

.labs-eyebrow {
  margin: 0 0 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.labs-pullquote {
  margin: 1.6rem 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--fg);
  font-size: 1.12rem;
  line-height: 1.45;
  color: var(--fg);
}

.labs-note-inline {
  margin-top: 1.75rem;
}

/* Findings index: the two research questions, as an ordered list. */
.labs-findings {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.labs-finding {
  border-bottom: 1px solid var(--line-strong);
}

.labs-finding__link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  padding: 1.6rem 0;
  text-decoration: none;
}

.labs-finding__link:hover .labs-finding__title {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.labs-finding__num {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  color: var(--fg-faint);
}

.labs-finding__body {
  display: block;
  min-width: 0;
}

.labs-finding__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.labs-finding__title {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.6vw, 1.65rem);
  line-height: 1.2;
  color: var(--fg);
}

.labs-finding__dek {
  display: block;
  margin-top: 0.55rem;
  max-width: 44rem;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--fg-soft);
}

.labs-tiles--pair {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

/* Note index. */
.labs-notes {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.labs-note {
  border-bottom: 1px solid var(--line);
}

.labs-note__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.25rem;
  align-items: baseline;
  padding: 1.15rem 0;
  text-decoration: none;
}

.labs-note__link:hover .labs-note__title {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.labs-note__num,
.labs-note__meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--fg-faint);
}

.labs-note__body {
  display: block;
  min-width: 0;
}

.labs-note__title {
  display: block;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--fg);
}

.labs-note__summary {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--fg-dim);
}

@media (max-width: 600px) {
  .labs-note__link {
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
  }

  .labs-note__meta {
    display: none;
  }
}

.labs-prose p {
  margin: 0 0 1.1rem;
}

.labs-h3 {
  margin: 2rem 0 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* Two regimes, side by side. */
.labs-regimes {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  margin: 2rem 0 1.5rem;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}

.labs-regime {
  padding: 1.4rem 1.35rem;
  background: var(--bg);
}

.labs-regime--alt {
  background: var(--bg-elev);
}

.labs-regime__name {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.labs-regime__sub {
  margin: 0.3rem 0 1.1rem;
  font-size: 0.9rem;
  color: var(--fg-dim);
}

.labs-regime__facts {
  margin: 0;
}

.labs-regime__facts > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
}

.labs-regime__facts dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.labs-regime__facts dd {
  margin: 0;
  font-size: 0.96rem;
  color: var(--fg);
}

/* Headline numbers. No color encoding — these are text, in text tokens. */
.labs-tiles {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}

.labs-tile {
  padding: 1.4rem 1.35rem;
  background: var(--bg);
}

.labs-tile__value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--fg);
}

.labs-tile__unit {
  margin: 0.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.labs-tile__label {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--fg-soft);
}

.labs-tile__note {
  margin: 0.6rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--fg-dim);
}

/* Tables. Wide content scrolls inside its own box; the page never does. */
.labs-tablewrap {
  overflow-x: auto;
  margin: 0 0 1.5rem;
  border: 1px solid var(--line-strong);
}

.labs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.labs-table__caption {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--line-strong);
  background: var(--bg-elev);
  text-align: left;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--fg-dim);
}

.labs-table th,
.labs-table td {
  padding: 0.7rem 1rem;
  text-align: left;
  border-top: 1px solid var(--line);
  vertical-align: top;
}

.labs-table thead th {
  border-top: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  white-space: nowrap;
}

.labs-table tbody th {
  font-weight: 400;
  color: var(--fg-soft);
}

.labs-table td {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--fg);
  white-space: nowrap;
}

.labs-table--dense th,
.labs-table--dense td {
  padding: 0.55rem 1rem;
}

/* The hazard curve. Sign is carried by which side of the baseline a bar sits
   on and by its own label — never by color. The site has no categorical
   palette and this chart does not need one. */
.labs-figure {
  margin: 0 0 1.75rem;
}

.labs-figure__caption {
  max-width: var(--max-prose);
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--fg-dim);
}

.labs-curve {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.5rem;
  padding: 0 0.5rem;
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
}

/* The two plot rows are sized to the extremes they contain, so one dollar is
   the same number of pixels above and below the baseline without spending half
   the chart on empty space. Labels sit in their own rows, so a sliver of a half
   still gets a readable number. */
.labs-curve__col {
  display: grid;
  grid-template-rows:
    [pos-label] 1.4rem
    [up] var(--labs-axis-up, 6rem)
    [down] var(--labs-axis-down, 6rem)
    [neg-label] 1.4rem
    [tick] auto;
  min-width: 0;
}

.labs-curve__half {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
}

.labs-curve__half--up {
  justify-content: flex-end;
  border-bottom: 1px solid var(--line-strong);
}

.labs-curve__half--down {
  justify-content: flex-start;
}

.labs-curve__bar {
  width: min(100%, 2.75rem);
  background: var(--fg);
}

/* Negative bars are hatched as well as inverted, so the distinction survives
   grayscale, print, and forced-colors. */
.labs-curve__bar--neg {
  background: repeating-linear-gradient(
    135deg,
    var(--fg-dim) 0 2px,
    transparent 2px 5px
  );
  border: 1px solid var(--fg-dim);
}

.labs-curve__label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1;
  color: var(--fg-soft);
  white-space: nowrap;
}

.labs-curve__tick {
  margin: 0;
  padding: 0.5rem 0 0.75rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--fg-dim);
}

@media (max-width: 720px) {
  .labs-hero {
    min-height: min(68vh, 30rem);
  }

  .labs-curve__label {
    font-size: 0.62rem;
  }

  .labs-curve__bar {
    width: min(100%, 1.5rem);
  }
}

@media (forced-colors: active) {
  .labs-curve__bar {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .labs-curve__bar--neg {
    background: Canvas;
    border: 1px solid CanvasText;
  }
}



/* Docs + playground */

/* --- Page header ------------------------------------------------ */

/* Lives inside .docs-content so it aligns with the content column
   rather than spanning full canvas (sidebar + content). */
.docs-page__head {
  margin: 0 0 2.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
}

.docs-page__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 2rem;
  margin: 0 0 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.docs-page__meta-cell {
  display: inline-flex;
  align-items: baseline;

  gap: 0.55rem;
}

.docs-page__meta-k {
  color: var(--fg-dim);
}

.docs-page__meta-v {
  color: var(--fg);
}

.docs-page__title {
  margin: 0 0 0.85rem;
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 3.8vw, 2.6rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.005em;
}

.docs-page__dek {
  margin: 0;
  max-width: none;
  color: var(--fg-soft);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.55;
}

/* --- Two-column layout ----------------------------------------- */

.docs-layout {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  max-width: none;
  margin: 0;
}

@media (max-width: 960px) {
  .docs-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
}

/* --- Sidebar --------------------------------------------------- */

.docs-sidebar {
  position: sticky;
  top: 4.75rem;
  align-self: start;
  max-height: calc(100vh - 5.5rem);
  overflow-y: auto;
  padding: 0.25rem 0.75rem 1.5rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.docs-sidebar::-webkit-scrollbar {
  width: 6px;
}

.docs-sidebar::-webkit-scrollbar-thumb {
  background: var(--line);
}

@media (max-width: 960px) {
  .docs-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0 0 1.5rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.5rem;
  }
}

.docs-nav__group + .docs-nav__group {
  margin-top: 1.75rem;
}

.docs-nav__label {
  margin: 0 0 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.docs-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.docs-nav__list a {
  display: block;
  padding: 0.3rem 0 0.3rem 0.75rem;
  margin-left: -0.75rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--fg-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.docs-nav__list a:hover {
  color: var(--fg);
}

.docs-nav__list a.is-active {
  color: var(--fg);
  border-left-color: var(--fg);
  font-weight: 500;
}

/* Docs spans three pages, so the sidebar has to say which one you are on.
   Groups you are not reading stay legible but recede. */
.docs-nav__group.is-current .docs-nav__label {
  color: var(--fg);
}

.docs-nav__group:not(.is-current) .docs-nav__list a {
  color: var(--fg-dim);
}

.docs-nav__group:not(.is-current) .docs-nav__list a:hover {
  color: var(--fg);
}

/* --- Cross-page footer nav -------------------------------------- */

.docs-next {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}

.docs-next__item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1.25rem;
  background: var(--bg);
  text-decoration: none;
  transition: background 120ms ease;
}

.docs-next__item:hover {
  background: var(--bg-alt, #e9e9e4);
}

.docs-next__k {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.docs-next__item:hover .docs-next__k {
  color: var(--fg);
}

.docs-next__v {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--fg-soft);
}

/* --- Content --------------------------------------------------- */

.docs-content {
  min-width: 0;
}

.docs-section {
  padding: 0 0 2.75rem;
  scroll-margin-top: 5rem;
}

.docs-section + .docs-section {
  border-top: 1px solid var(--line);
  padding-top: 2.5rem;
}

.docs-section__h {
  position: relative;
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.docs-section__anchor {
  position: absolute;
  left: -1.35rem;
  top: 0.05em;
  width: 1.35rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--fg-dim);
  text-decoration: none;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease;
}

.docs-section__h:hover .docs-section__anchor,
.docs-section__anchor:focus-visible {
  opacity: 1;
}

.docs-section__anchor:hover {
  color: var(--fg);
}

@media (max-width: 960px) {
  .docs-section__anchor {
    display: none;
  }
}

.docs-sub-h {
  margin: 2rem 0 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.docs-sub-h--name {
  font-size: 0.95rem;
  font-family: var(--font-mono);
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
  font-weight: 500;
  margin-top: 2rem;
}

.docs-p {
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: none;
  color: var(--fg);
}

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

.docs-p a {
  text-decoration-color: var(--line-strong);
}

.docs-list {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  max-width: none;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
}

.docs-list li {
  padding-left: 1.25rem;
  position: relative;
}

.docs-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 0.4rem;
  height: 1px;
  background: var(--fg-dim);
}

.docs-list li + li {
  margin-top: 0.4rem;
}

/* --- API entry (class / method / function) -------------------- */

.docs-entry {
  margin: 1.5rem 0;
}

.docs-entry + .docs-entry {
  margin-top: 2rem;
}

.docs-entry__kind {
  margin: 0 0 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.docs-entry__sig {
  margin: 0 0 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--bg-elev);
  border-left: 2px solid var(--fg);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--fg);
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: normal;
}

.docs-entry__sig a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.2em;
}

.docs-entry__desc {
  margin: 0 0 0.75rem;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
  max-width: none;
  color: var(--fg);
}

.docs-entry__returns {
  margin: 0.25rem 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
}

.docs-entry__returns strong {
  font-weight: 500;
  color: var(--fg);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-right: 0.55rem;
}

/* --- Reference tables ------------------------------------------ */

.docs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  table-layout: auto;
}

.docs-table th,
.docs-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 1.25rem 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

.docs-table thead th {
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
  border-bottom-color: var(--fg);
  padding-bottom: 0.55rem;
}

.docs-table tbody tr:last-child td {
  border-bottom: 0;
}

.docs-table td:first-child {
  color: var(--fg);
  font-weight: 500;
}

.docs-table code {
  white-space: nowrap;
  font-size: 0.82rem;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Last column is prose — serif, wraps, unconstrained width. */
.docs-table td:last-child,
.docs-table th:last-child {
  padding-right: 0;
  white-space: normal;
}

.docs-table td:last-child {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--fg-soft);
}

.docs-table td:last-child code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  color: var(--fg);
}

/* --- Terminal blocks inside docs ------------------------------ */

.docs-section .terminal {
  margin: 1rem 0;
  max-width: none;
  width: 100%;
}

/* --- Foot ----------------------------------------------------- */

.docs-foot {
  margin: 3rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.docs-foot a {
  color: var(--fg-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.docs-foot a:hover {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

/* --- Mobile table treatment ----------------------------------- */

@media (max-width: 720px) {
  .docs-table,
  .docs-table thead,
  .docs-table tbody,
  .docs-table tr,
  .docs-table th,
  .docs-table td {
    display: block;
    width: 100%;
  }

  .docs-table thead {
    display: none;
  }

  .docs-table tr {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
  }

  .docs-table tr:last-child {
    border-bottom: 0;

  }

  .docs-table td {
    padding: 0.2rem 0;
    border: 0;
  }

  .docs-table td:first-child {
    padding-bottom: 0.3rem;
  }

  .docs-table code {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ============================================================
   Playground (interactive docs)
   ============================================================ */

.pg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--fg);
  padding-top: 1.5rem;
}

@media (max-width: 960px) {
  .pg {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

.pg__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.pg__row {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr 1fr;
  gap: 0.75rem;
}

.pg__row + .pg__row {
  grid-template-columns: 1fr 1.4fr;
}

.pg__row--brief {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pg__row--continuity {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
}

@media (max-width: 560px) {
  .pg__row,
  .pg__row + .pg__row,
  .pg__row--brief,
  .pg__row--continuity {
    grid-template-columns: 1fr;
  }
}

.pg__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.pg__field--wide {
  grid-column: span 1;
}

.pg__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.pg__input {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  padding: 0.55rem 0.7rem;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
}

.pg__input:hover {
  border-color: var(--fg);
}

.pg__input:focus {
  outline: none;
  border-color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--fg);
}

select.pg__input {
  background-image: linear-gradient(45deg, transparent 50%, var(--fg) 50%),
    linear-gradient(135deg, var(--fg) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.pg__check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  padding-top: 0.3rem;
}

.pg__check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--fg);
  cursor: pointer;
  user-select: none;
}

.pg__check--block {
  font-size: 0.8rem;
}

.pg__check input {
  accent-color: var(--fg);
  width: 14px;
  height: 14px;
  margin: 0;
}

.pg__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.pg__btn {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  min-width: 6.5rem;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.pg__btn:hover {
  border-color: var(--fg);
  background: var(--fg);
  color: var(--bg);
}

.pg__btn--primary {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.pg__btn--primary:hover {
  background: var(--bg);
  color: var(--fg);
}

.pg__btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.pg__btn[disabled] {
  opacity: 0.55;
  cursor: progress;
}

.pg__note {
  margin: 0.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--fg-faint);
  line-height: 1.55;
}

.pg__right {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}

.pg__pane {
  border: 1px solid var(--fg);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pg__pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pg__pane-title {
  color: var(--fg);
  font-weight: 600;
}

.pg__tabs {
  display: inline-flex;
  gap: 0.2rem;
  margin-left: auto;
  margin-right: 0.5rem;
}

.pg__tab {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--fg-dim);
  padding: 0.2rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.pg__tab:hover {
  color: var(--fg);
  border-color: var(--fg);
}

.pg__tab.is-active {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.pg__chip {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--fg-dim);
  padding: 0.2rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.pg__chip:hover {
  color: var(--fg);
  border-color: var(--fg);
}

.pg__chip.is-copied {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.pg__code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--fg);
  margin: 0;
  padding: 1.05rem 1.15rem;
  white-space: pre;
  overflow-x: auto;
  overflow-y: auto;
  max-height: none;
  tab-size: 4;
}

.pg__job-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line-strong);
  color: var(--fg);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pg__job-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--fg-dim);
}

.pg__job-status[data-state="idle"]::before { background: var(--fg-faint); }
.pg__job-status[data-state="queued"]::before,
.pg__job-status[data-state="accepted"]::before,
.pg__job-status[data-state="planning"]::before { background: var(--fg-dim); }
.pg__job-status[data-state="placed"]::before { background: var(--fg); }
.pg__job-status[data-state="recovering"]::before {
  background: var(--fg);
  animation: pg-pulse 1s ease-in-out infinite;
}
.pg__job-status[data-state="running"]::before {
  background: var(--fg);
  animation: pg-pulse 1s ease-in-out infinite;
}
.pg__job-status[data-state="completed"] {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.pg__job-status[data-state="completed"]::before { background: var(--bg); }
.pg__job-status[data-state="failed"] {
  border-color: var(--fg);
}
.pg__job-status[data-state="failed"]::before {
  background: var(--fg);
  animation: pg-pulse 1.4s ease-in-out infinite;
}

@keyframes pg-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.pg__kv {
  display: grid;
  grid-template-columns: 7rem 1fr;
  column-gap: 1rem;
  row-gap: 0.4rem;
  margin: 0;
  padding: 0.85rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.pg__kv dt {
  color: var(--fg-dim);
  text-transform: lowercase;
}

.pg__kv dd {
  margin: 0;
  color: var(--fg);
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* ============================================================
   Product page: spec-grid + CTA row
   ============================================================ */

.spec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}

@media (max-width: 800px) {
  .spec-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.spec-grid__cell {
  border-left: 1px solid var(--line);
  padding: 0 0 0 1rem;
  min-width: 0;
}

@media (max-width: 800px) {
  .spec-grid__cell {
    border-left: none;
    border-top: 1px solid var(--line);
    padding: 1rem 0 0;
  }
  .spec-grid__cell:first-child {
    border-top: none;
    padding-top: 0;
  }
}

.spec-grid__h {
  margin: 0 0 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}

.spec-grid__cell .list {
  margin: 0;
}

.deck__block--cta {
  text-align: left;
}

.deck__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.deck__cta-row .btn {
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  .deck__cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .deck__cta-row .btn {
    justify-content: space-between;
  }
}

/* --- Collapsed detail folds ------------------------------------ */

.docs-fold {
  margin: 0.5rem 0 1.1rem;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.docs-fold > summary {
  padding: 0.6rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.docs-fold > summary::-webkit-details-marker {
  display: none;
}

.docs-fold > summary::before {
  content: "+";
  display: inline-block;
  width: 1.1rem;
  color: var(--fg);
}

.docs-fold[open] > summary::before {
  content: "\2212";
}

.docs-fold[open] > summary {
  border-bottom: 1px solid var(--line);
}

.docs-fold > :not(summary) {
  margin: 0.9rem;
}

.docs-fold > .docs-table {
  width: calc(100% - 1.8rem);
}



/* Console — gate + ops dashboard */

.page-console .site-footer { margin-top: 0; }

.console {
  max-width: none;
  margin: 0;
  padding: 0 0 4rem;
  min-height: calc(100vh - 4rem);
}

/* ——— Gate ——— */
.console-gate {
  position: relative;
  min-height: calc(100vh - 3.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem var(--page-inline) 4rem;
  overflow: hidden;
}
.console-gate__plane {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(165deg, transparent 40%, rgba(13, 13, 12, 0.04) 100%),
    repeating-linear-gradient(
      -12deg,
      transparent,
      transparent 11px,
      rgba(13, 13, 12, 0.025) 11px,
      rgba(13, 13, 12, 0.025) 12px
    ),
    radial-gradient(ellipse 80% 55% at 12% 0%, var(--bg-elev), transparent 55%),
    var(--bg);
  pointer-events: none;
}
.console-gate__inner {
  position: relative;
  width: min(28rem, 100%);
  z-index: 1;
}
.console-gate__brand {
  margin: 0 0 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.console-gate__title {
  margin: 0 0 0.65rem;
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.console-gate__lede {
  margin: 0 0 1.75rem;
  color: var(--fg-soft);
  font-size: 1.02rem;
  max-width: 24rem;
}
.console-gate__modes {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line-strong);
}
.console-gate__mode {
  flex: 1;
  padding: 0.65rem 0.5rem;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  cursor: pointer;
}
.console-gate__mode.is-active {
  color: var(--fg);
  border-bottom-color: var(--fg);
}
.console-gate__panel label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.console-gate__panel input {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--fg);
  letter-spacing: 0;
  text-transform: none;
}
.console-gate__advanced {
  margin: 0 0 1rem;
}
.console-gate__advanced summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  list-style: none;
}
.console-gate__advanced summary::-webkit-details-marker { display: none; }
.console-gate__advanced[open] summary { margin-bottom: 0.55rem; }
.console-gate__actions { margin-top: 0.35rem; }
.console-gate__actions .btn { width: 100%; justify-content: center; }
.console-gate__note {
  margin: 0.85rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--fg-dim);
  line-height: 1.45;
}

/* ——— App shell ——— */
.console-app {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 1.25rem var(--page-inline) 0;
}
.console-app__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1rem 0 1.15rem;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 1.25rem;
}
.console-app__identity {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 10rem;
}
.console-app__brand {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.console-app__company {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.console-app__meta {
  margin: 0.15rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--fg-dim);
  letter-spacing: 0.04em;
}
.console-app__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  flex: 1;
  justify-content: center;
}
.console-app__tab {
  padding: 0.5rem 0.85rem;
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.console-app__tab.is-active {
  color: var(--fg);
  border-bottom-color: var(--fg);
}
.console-app__tab:hover { color: var(--fg); }
.console-app__bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.console-app__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.35rem;
}
@media (min-width: 720px) {
  .console-app__stats { grid-template-columns: repeat(4, 1fr); }
}
.console-stat {
  padding: 0.85rem 0 0.75rem;
  border-top: 1px solid var(--fg);
}
.console-stat__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 0.35rem;
}
.console-stat__value {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.console-view[hidden] { display: none !important; }
.console-view.is-active { display: block; }

.console__panel {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  padding: 1.2rem 1.3rem 1.35rem;
}
.console__panel h2,
.console__list-head h2 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 500;
}
.console__lede {
  margin: 0.65rem 0 1.1rem;
  color: var(--fg-soft);
  font-size: 0.95rem;
  max-width: 36rem;
}
.console__lede a { color: inherit; }

.console__workspace {
  display: grid;
  gap: 1.15rem;
}
@media (min-width: 960px) {
  .console__workspace {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
  }
}

.console__detail-block h3 {
  margin: 1.1rem 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 500;
}

.console__list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 0.85rem;
}
.console__list-head h2 { margin-right: auto; }

.console__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.console__filter {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.32rem 0.5rem;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--fg-dim);
  cursor: pointer;
}
.console__filter.is-active {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.console__row { display: grid; gap: 0.75rem; margin-bottom: 0.85rem; }
@media (min-width: 720px) {
  .console__row--2 { grid-template-columns: 1fr 1fr; }
}
.console label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.console input, .console select {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  color: var(--fg);
}
.console__actions { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.console__msg {
  margin: 0.75rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--fg-soft);
  white-space: pre-wrap;
  word-break: break-word;
}
.console__msg--err { color: #6b1d1d; }
.console__msg--ok { color: #1a4d3a; }
.console__muted { color: var(--fg-dim); font-family: var(--font-mono); font-size: 0.78rem; }

.console__table-wrap { overflow-x: auto; }
.console table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.console th, .console td {
  text-align: left;
  padding: 0.55rem 0.4rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.console th {
  color: var(--fg-dim);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.64rem;
}

.console__wl-row { cursor: pointer; }
.console__wl-row:hover td { background: var(--bg-elev); }
.console__wl-row.is-selected td {
  background: var(--bg-elev);
  box-shadow: inset 2px 0 0 var(--fg);
}

.console__status { display: inline-block; letter-spacing: 0.04em; }
.console__status--running,
.console__status--recovering,
.console__status--completed { color: #1a4d3a; }
.console__status--failed { color: #6b1d1d; }
.console__status--cancelled { color: var(--fg-dim); }

.console__list-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.console__list-foot .console__msg { margin: 0; flex: 1; }

.console__detail-empty {
  margin: 0.5rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--fg-soft);
}
.console__detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.console__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.console__dl dt { color: var(--fg-dim); }
.console__dl dd { margin: 0; word-break: break-word; }

.console__timeline {
  margin: 0;
  padding: 0 0 0 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
}
.console__timeline li { margin-bottom: 0.4rem; }
.console__timeline-when { color: var(--fg-dim); }

.console__artifact-list {
  margin: 0;
  padding-left: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.console__artifact-list a { color: inherit; }

.console-access { max-width: 36rem; }
.console-access__keyrow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.4rem;
}
@media (max-width: 560px) {
  .console-access__keyrow {
    grid-template-columns: 1fr 1fr;
  }
  .console-access__keyrow input { grid-column: 1 / -1; }
  .console-app__nav { justify-content: flex-start; width: 100%; order: 3; }
  .console-app__bar-actions { margin-left: auto; }
}

/* One-time key reveal. Deliberately loud: this is the only moment the raw
   value exists anywhere outside the caller's machine, and a person who scrolls
   past it has lost it permanently. */
.console-newkey {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--fg);
  background: var(--bg);
}

.console-newkey[hidden] { display: none !important; }

.console-newkey__label {
  margin: 0 0 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
}

.console-newkey input {
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

/* Revoked and expired keys stay listed, because "it is gone" and "it never
   existed" are different answers when something stops working. */
tr.is-dim { opacity: 0.55; }

/* Settings blocks: several small forms per panel, separated by rule rather
   than by card, so a panel of six controls does not read as six products. */
.console-settings {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.console__subhead {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.console__hint {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--fg-soft);
  max-width: 46rem;
}

.console__inline-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.console__select {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--fg);
}

/* The spend tile's second line. Neutral until it is not: past 80% of the cap
   somebody has a decision to make, and a readout that never changes colour is
   a readout nobody looks at. */
.console-stat__sub {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
}

.console-stat__sub.is-warn {
  color: #6b1d1d;
}

/* Sparkline. Bars, not a line chart: thirty daily totals have no meaningful
   interpolation between them. */
.console-spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 3.5rem;
  margin-top: 0.5rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--line);
}

.console-spark__bar {
  flex: 1 1 0;
  min-width: 2px;
  background: var(--fg);
  opacity: 0.75;
}

.console-spark__bar:hover { opacity: 1; }

/* First-run quickstart. Prominent while the account has never run anything,
   and gone the moment it has. */
.console__onboard {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--line-strong);
  background: var(--bg);
}

.console__onboard[hidden] { display: none !important; }

.console__onboard-k {
  margin: 0 0 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}

.console__onboard-code {
  margin: 0 0 0.75rem;
  padding: 0.75rem;
  overflow-x: auto;
  background: var(--bg-alt, #e9e9e4);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.6;
  white-space: pre;
}

/* ——— Baseline ———

   Published seller rates beside the routed rate. Styled as evidence rather than
   as a marketing tile: no colour to say "good", no big number, no arrow. The
   comparison can come out either way and the panel has to read the same when it
   does, so the only emphasis is the mono/serif contrast the rest of the console
   already uses. */

.console-baseline[hidden] { display: none !important; }

.console-baseline__dl[hidden] { display: none !important; }

.console-baseline__dl {
  margin-top: 0.6rem;
  line-height: 1.55;
}

.console-baseline__source {
  margin: 0.75rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--fg-dim);
}

.console-baseline__source a { color: inherit; }

/* The one thing on the panel that is a judgement rather than a published price,
   and the staleness stamp, share a mark. Both are boxed rather than coloured:
   an amber pill would read as a warning about the product, when what it marks
   is a limit on our own claim. */
.console-baseline__flag {
  display: inline-block;
  padding: 0.05rem 0.32rem;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}

/* The reference brief is collapsed because it is explicitly NOT about the
   workload on screen. Someone reading their own route should reach it only by
   choosing to. */
.console-baseline__ref {
  margin-top: 0.9rem;
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
}

.console-baseline__ref > summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.console-baseline__ref > summary:hover { color: var(--fg); }

.console-baseline__ref-note {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--fg-soft);
  max-width: 40rem;
}

.console-baseline__ref-note strong { font-weight: 600; }

.console-baseline__subhead {
  margin: 1.25rem 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 500;
}

.console-baseline__ref .console__table-wrap { margin-top: 0.65rem; }

.console-baseline__table th[scope="row"] {
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
}

.console-baseline__table td { white-space: nowrap; }

.console-baseline__table a { color: inherit; }

/* The picked accelerator is underlined, not filled. Filling it would rank the
   four sellers against each other, which is not what the column says — it says
   which of that seller's own two rows finishes cheaper. */
.console-baseline__pick {
  border-bottom: 1px solid var(--fg);
  padding-bottom: 1px;
}

.console-baseline__caveats {
  margin: 1.25rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--fg-dim);
  max-width: 42rem;
}

.console-gate[hidden],
.console-app[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  .console-gate__inner {
    animation: console-gate-in 420ms ease both;
  }
  .console-app:not([hidden]) {
    animation: console-app-in 320ms ease both;
  }
}
@keyframes console-gate-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes console-app-in {
  from { opacity: 0; }
  to { opacity: 1; }
}



/* Intentional motion — presence and hierarchy, not decoration. */

/* --- Hero entrance ------------------------------------------------ */

html.js .hero.is-ready .hero__eyebrow,
html.js .hero.is-ready .hero__title-line,
html.js .hero.is-ready .routing-map,
html.js .hero.is-ready .routing-map figcaption {
  animation: rise-in 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.js .hero.is-ready .hero__eyebrow {
  animation-delay: 40ms;
}

html.js .hero.is-ready .hero__title-line:first-child {
  animation-delay: 120ms;
}

html.js .hero.is-ready .hero__title-line:last-child {
  animation-delay: 220ms;
}

html.js .hero.is-ready .routing-map {
  animation-delay: 340ms;
}

html.js .hero.is-ready .routing-map figcaption {
  animation-delay: 980ms;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(0.7rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Routing map path draw ---------------------------------------- */

html.js .routing-map.is-drawn .route-map__path--input,
html.js .routing-map.is-drawn .route-map__path--selected {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: route-draw 900ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

html.js .routing-map.is-drawn .route-map__path--input {
  animation-delay: 420ms;
}

html.js .routing-map.is-drawn .route-map__path--selected {
  animation-delay: 720ms;
}

html.js .routing-map.is-drawn .route-map__path--quiet {
  opacity: 0;
  animation: route-fade 700ms ease-out 880ms forwards;
}

html.js .routing-map.is-drawn .route-map__hub--compact circle:first-child {
  animation: hub-pulse 2.8s ease-in-out 1.1s infinite;
}

html.js .routing-map.is-drawn .route-map__capacity--selected circle {
  animation: select-pop 480ms cubic-bezier(0.22, 1, 0.36, 1) 1.05s both;
}

@keyframes route-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes route-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hub-pulse {
  0%,
  100% {
    stroke-width: 1.8;
    opacity: 1;
  }
  50% {
    stroke-width: 2.4;
    opacity: 0.88;
  }
}

@keyframes select-pop {
  from {
    transform: scale(0.55);
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0.4;
  }
  to {
    transform: scale(1);
    transform-box: fill-box;
    transform-origin: center;
    opacity: 1;
  }
}

/* Soft flow dash on the selected route after draw */
html.js .routing-map.is-drawn.is-flowing .route-map__path--selected {
  stroke-dasharray: 0.08 0.12;
  stroke-dashoffset: 0;
  animation: route-flow 1.8s linear infinite;
}

@keyframes route-flow {
  to {
    stroke-dashoffset: -0.2;
  }
}

/* --- Scroll reveals ----------------------------------------------- */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

html.js .workload-intake__steps li[data-reveal] {
  transition-delay: var(--reveal-delay, 0ms);
}

/* --- Tab panel crossfade ------------------------------------------ */

html.js .tab-panel {
  animation: none;
}

html.js .tab-panel.is-entering {
  animation: panel-in 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(0.45rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Phase explorer polish ---------------------------------------- */

html.js .phase-graph .journey-svg__edge--best.is-redrawing {
  animation: none;
}

html.js .phase-graph .journey-svg__edge--best.is-redrawing {
  stroke-dashoffset: 1;
}

html.js .phase-graph[data-animating="true"] .journey-svg__edge--best {
  animation: journey-draw 880ms ease-out 40ms forwards;
}

html.js .phase-graph__col {
  transition: opacity 240ms ease;
}

html.js .phase-panel__card.is-active {
  animation: phase-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.js .phase-graph__hit.is-active {
  fill: color-mix(in srgb, var(--fg) 4%, transparent);
}

html.js .phase-explorer__dots button {
  transition:
    background 160ms ease,
    transform 160ms ease,
    border-color 160ms ease;
}

html.js .phase-explorer__dots button.is-active {
  transform: scale(1.15);
}

/* --- Reduced motion ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow,
  .hero__title-line,
  .routing-map,
  .routing-map figcaption,
  html.js [data-reveal],
  html.js .tab-panel.is-entering,
  html.js .phase-panel__card.is-active {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  html.js .routing-map.is-drawn .route-map__path--input,
  html.js .routing-map.is-drawn .route-map__path--selected,
  html.js .routing-map.is-drawn .route-map__path--quiet,
  html.js .routing-map.is-drawn .route-map__hub--compact circle:first-child,
  html.js .routing-map.is-drawn .route-map__capacity--selected circle,
  html.js .routing-map.is-flowing .route-map__path--selected,
  html.js .phase-graph[data-animating="true"] .journey-svg__edge--best {
    animation: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }

  /* Columns still dim per phase — they just switch instantly. */
  html.js .phase-graph__col {
    transition: none !important;
  }
}