:root {
  --bg: #f7fbff;
  --surface: #ffffff;
  --surface-strong: #f1f7ff;
  --navy: #071a44;
  --text: #14284d;
  --muted: #5b6b88;
  --line: #d8e5f5;
  --blue: #155eef;
  --blue-dark: #073fb7;
  --cyan: #0fb5d8;
  --green: #11a36a;
  --amber: #b76e00;
  --shadow: 0 24px 60px rgba(7, 26, 68, 0.12);
  --radius: 22px;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 16%, rgba(21, 94, 239, 0.12), transparent 34rem),
    radial-gradient(circle at 92% 8%, rgba(15, 181, 216, 0.16), transparent 30rem),
    linear-gradient(180deg, #f9fcff 0%, var(--bg) 46%, #ffffff 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--blue);
}

code {
  border: 1px solid #dbe7f5;
  border-radius: 8px;
  background: #f4f8fd;
  color: #08214f;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
  padding: 0.14rem 0.34rem;
}

pre {
  overflow-x: auto;
  margin: 0;
  border: 1px solid #d9e7f7;
  border-radius: 18px;
  background: #081936;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #eaf4ff;
  padding: 1.1rem 1.25rem;
}

pre code {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
}

.notice {
  border-bottom: 1px solid var(--line);
  background: rgba(226, 240, 255, 0.82);
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.7rem 1rem;
  text-align: center;
}

.notice a {
  color: var(--blue-dark);
  margin-left: 0.35rem;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(216, 229, 245, 0.9);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.8rem 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.66rem;
  color: var(--navy);
  font-size: 1.06rem;
  font-weight: 850;
  letter-spacing: -0.04em;
  line-height: 1;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.23rem;
  width: 2rem;
  height: 2rem;
  border: 1px solid #c9d7ef;
  border-radius: 0.24rem;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(7, 26, 68, 0.08);
  color: transparent;
  flex: 0 0 auto;
}

.brand-mark span {
  display: block;
  width: 0.24rem;
  height: 1.1rem;
  border-radius: 0.04rem;
  background: var(--blue);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 700;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.menu-toggle {
  display: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-weight: 800;
  padding: 0.55rem 0.8rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
  font-weight: 800;
  font-size: 0.92rem;
  padding: 0.6rem 0.92rem;
  box-shadow: 0 8px 22px rgba(7, 26, 68, 0.06);
}

.button.primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: #fff;
  box-shadow: 0 14px 30px rgba(21, 94, 239, 0.28);
}

.button:hover {
  transform: translateY(-1px);
}

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 3.2rem 0 2.8rem;
}

.hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background-image:
    linear-gradient(rgba(21, 94, 239, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 94, 239, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 82%, transparent 100%);
}

.hero-grid {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(460px, 0.9fr) minmax(650px, 1.1fr);
  gap: 2rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid #c9ddf7;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--blue-dark);
  font-size: 0.86rem;
  font-weight: 850;
  padding: 0.42rem 0.72rem;
}

.pulse {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 6px rgba(17, 163, 106, 0.14);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 640px;
  margin-bottom: 1.2rem;
  color: var(--navy);
  font-size: clamp(2.45rem, 3.85vw, 3.85rem);
  font-weight: 900;
  letter-spacing: -0.048em;
  line-height: 1.06;
}

h2 {
  color: var(--navy);
  font-size: clamp(1.75rem, 2.7vw, 2.75rem);
  font-weight: 880;
  letter-spacing: -0.042em;
  line-height: 1.08;
}

h3 {
  color: var(--navy);
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.lead {
  max-width: 610px;
  color: #263b61;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 1.55rem 0 1.2rem;
}

.mini-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  color: var(--muted);
  font-size: 0.84rem;
}

.mini-proof span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  padding: 0.35rem 0.65rem;
}

.architecture-card {
  width: 100%;
  max-width: 100%;
  margin-top: 0.45rem;
  border: 1px solid #c6daf3;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 252, 255, 0.9)),
    linear-gradient(135deg, rgba(21, 94, 239, 0.08), transparent);
  box-shadow: var(--shadow);
  padding: 1rem;
}

.diagram {
  display: grid;
  align-items: center;
  grid-template-columns:
    minmax(82px, 0.82fr)
    24px
    minmax(88px, 0.9fr)
    24px
    minmax(174px, 1.48fr)
    24px
    minmax(96px, 0.96fr);
  gap: 0.52rem;
  min-height: 238px;
}

.node,
.stack,
.rail {
  border: 1px solid #c9dbf0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
}

.node {
  display: flex;
  min-height: 118px;
  flex-direction: column;
  justify-content: center;
  gap: 0.34rem;
  padding: 0.78rem;
  text-align: center;
}

.node strong,
.stack strong,
.rail strong {
  color: var(--navy);
}

.node small,
.stack small,
.rail small {
  color: var(--muted);
  font-weight: 650;
  line-height: 1.3;
}

.node small {
  font-size: 0.72rem;
}

.node strong,
.stack strong {
  font-size: 0.86rem;
}

.gateway-node {
  border-color: rgba(21, 94, 239, 0.38);
  background: linear-gradient(180deg, #ffffff, #eef6ff);
}

.icon-badge {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  margin: 0 auto 0.25rem;
  border-radius: 0.9rem;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
}

.arrow {
  position: relative;
  width: 24px;
  height: 2px;
  justify-self: center;
  align-self: center;
  background: var(--navy);
  border-radius: 999px;
  color: var(--navy);
}

.arrow::after {
  position: absolute;
  top: 50%;
  right: -1px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--navy);
  border-right: 2px solid var(--navy);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.stack {
  display: grid;
  gap: 0.5rem;
  border-style: dashed;
  border-color: #8fb8ff;
  padding: 0.64rem;
}

.stack-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.58rem;
  border: 1px solid #d6e4f4;
  border-radius: 14px;
  background: #fff;
  padding: 0.66rem;
}

.stack-icon {
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border-radius: 0.7rem;
  background: #edf5ff;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 900;
}

.rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 0.82rem;
  overflow: hidden;
}

.rail div {
  min-height: 66px;
  border-right: 1px solid var(--line);
  padding: 0.72rem;
}

.rail div:last-child {
  border-right: 0;
}

.section {
  padding: 3.6rem 0;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.6rem;
}

.section-heading p {
  max-width: 560px;
  color: var(--muted);
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 16px 42px rgba(7, 26, 68, 0.07);
  padding: 1.35rem;
}

.card:hover {
  border-color: #a9c8ef;
  box-shadow: 0 24px 52px rgba(7, 26, 68, 0.12);
}

.feature-icon {
  display: grid;
  width: 3.1rem;
  height: 3.1rem;
  place-items: center;
  margin-bottom: 1rem;
  border-radius: 1.1rem;
  background: linear-gradient(135deg, #eef6ff, #dff9ff);
  color: var(--blue);
  font-size: 1.32rem;
  font-weight: 900;
}

.card p,
.doc-card p,
.callout p {
  color: var(--muted);
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--blue);
  font-weight: 850;
}

.architecture-deep {
  border-block: 1px solid var(--line);
  background:
    radial-gradient(circle at 12% 0%, rgba(21, 94, 239, 0.1), transparent 28rem),
    radial-gradient(circle at 95% 20%, rgba(15, 181, 216, 0.12), transparent 24rem),
    #f8fbff;
}

.architecture-panels {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: 1rem;
}

.blueprint-card {
  border: 1px solid #cbdcf0;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 20px 52px rgba(7, 26, 68, 0.08);
  min-width: 0;
  padding: 1.1rem;
}

.blueprint-wide {
  grid-row: span 2;
}

.blueprint-heading {
  margin-bottom: 1rem;
}

.blueprint-kicker {
  display: inline-flex;
  margin-bottom: 0.45rem;
  border: 1px solid #c9ddf7;
  border-radius: 999px;
  background: #eef6ff;
  color: var(--blue-dark);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  padding: 0.25rem 0.55rem;
  text-transform: uppercase;
}

.component-map {
  display: grid;
  gap: 0.74rem;
}

.component-band {
  border: 1px dashed #8fb8ff;
  border-radius: 16px;
  background: #eef6ff;
  color: var(--navy);
  font-weight: 850;
  padding: 0.85rem;
  text-align: center;
}

.component-band.evidence {
  background: #f0fbff;
  border-color: #8ed7e8;
}

.component-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.74rem;
}

.component-tile {
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--navy);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 0.7rem;
  text-align: center;
}

.component-tile.strong {
  background: #f7fbff;
  border-color: #bdd4f2;
}

.component-tile.focus {
  border-color: rgba(21, 94, 239, 0.45);
  background: linear-gradient(135deg, #eef6ff, #e9fbff);
  color: var(--blue-dark);
}

.control-plane-row {
  position: relative;
}

.component-connector {
  width: 2px;
  height: 24px;
  margin: -0.15rem auto;
  background: #9db9dc;
}

.path-diagram {
  display: grid;
  gap: 0.7rem;
}

.path-step {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--navy);
  font-weight: 850;
  font-size: 0.9rem;
  padding: 0.85rem;
  text-align: center;
}

.gateway-step {
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff;
}

.path-arrow {
  width: 2px;
  height: 26px;
  margin: -0.12rem auto;
  background: #9db9dc;
  position: relative;
}

.path-arrow::after {
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #9db9dc;
  border-bottom: 2px solid #9db9dc;
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.path-fork {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}

.path-fork span {
  border: 1px solid #cbdcf0;
  border-radius: 14px;
  background: #f7fbff;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 780;
  padding: 0.6rem;
  text-align: center;
}

.adapter-map {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.72rem;
  align-items: stretch;
  width: 100%;
}

.adapter-side,
.adapter-core {
  display: grid;
  gap: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  min-width: 0;
  padding: 0.8rem;
}

.adapter-side {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.adapter-side strong,
.adapter-core strong {
  color: var(--navy);
  min-width: 0;
  text-align: center;
}

.adapter-side strong {
  grid-column: 1 / -1;
}

.adapter-side span,
.adapter-core span {
  display: grid;
  min-width: 0;
  min-height: 56px;
  place-items: center;
  border-radius: 12px;
  background: #f4f8fd;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.35;
  overflow-wrap: anywhere;
  padding: 0.55rem;
  text-align: center;
}

.adapter-core {
  justify-items: stretch;
  border-color: rgba(21, 94, 239, 0.36);
  background: linear-gradient(180deg, #ffffff, #eef6ff);
}

.adapter-core strong {
  padding: 0.2rem 0;
}

.blueprint-note {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.embedded-planes {
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.embedded-planes .blueprint-heading {
  margin-bottom: 0.75rem;
}

.embedded-planes .plane-diagram {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.embedded-planes .plane-arrow {
  display: none;
}

.embedded-planes .plane-lane {
  min-height: 132px;
  padding: 0.85rem;
}

.embedded-planes .plane-lane strong {
  font-size: 0.9rem;
}

.embedded-planes .plane-lane span {
  font-size: 0.72rem;
}

.plane-diagram {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr 28px 1fr;
  gap: 0.6rem;
  align-items: stretch;
}

.plane-lane {
  display: flex;
  min-height: 156px;
  flex-direction: column;
  justify-content: center;
  gap: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  min-width: 0;
  padding: 1rem;
}

.plane-lane.highlight {
  border-color: rgba(21, 94, 239, 0.45);
  background: linear-gradient(135deg, #eef6ff, #eafbff);
}

.plane-lane.evidence {
  border-color: #8ed7e8;
  background: #f0fbff;
}

.plane-lane strong {
  color: var(--navy);
  font-size: 0.98rem;
  line-height: 1.16;
}

.plane-lane span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 690;
  line-height: 1.38;
}

.plane-arrow,
.demo-arrow {
  position: relative;
  width: 100%;
  height: 2px;
  align-self: center;
  background: #9db9dc;
  border-radius: 999px;
}

.plane-arrow::after,
.demo-arrow::after {
  position: absolute;
  top: 50%;
  right: -1px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #9db9dc;
  border-right: 2px solid #9db9dc;
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.component-guide {
  margin-top: 2rem;
}

.compact-heading {
  align-items: start;
}

.component-guide-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
}

.component-guide-grid article {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 30px rgba(7, 26, 68, 0.05);
  padding: 1rem;
}

.component-guide-grid h3 {
  margin-bottom: 0.45rem;
  color: var(--blue-dark);
  font-size: 1rem;
}

.component-guide-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.demo-diagram {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr 28px 1fr;
  gap: 0.65rem;
  align-items: stretch;
  margin: 1.2rem 0 0;
}

.demo-column {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 1rem;
}

.demo-column strong {
  color: var(--navy);
  font-size: 0.95rem;
  line-height: 1.18;
}

.demo-column span {
  border-radius: 12px;
  background: #f4f8fd;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.24;
  padding: 0.52rem 0.6rem;
}

.demo-column.needs {
  background: #fffdf7;
}

.demo-column.installed,
.demo-column.namespace {
  background: #f8fbff;
}

.demo-column.optional {
  background: #f0fbff;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(390px, 1.1fr);
  gap: 2rem;
  align-items: stretch;
}

.terminal {
  border-radius: 24px;
  background: #071a44;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.9rem 1rem;
}

.dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  background: #ff6b6b;
}

.dot:nth-child(2) {
  background: #ffd166;
}

.dot:nth-child(3) {
  background: #34d399;
}

.terminal pre {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.band {
  border-block: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(21, 94, 239, 0.08), rgba(15, 181, 216, 0.1));
}

.doc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.doc-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  padding: 1.2rem;
}

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

.status-item {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 1rem;
}

.status-item strong {
  display: block;
  color: var(--navy);
  font-size: 1.8rem;
  line-height: 1;
}

.callout {
  border: 1px solid #f0d8a5;
  border-radius: 22px;
  background: #fff9ed;
  padding: 1.35rem;
}

.callout strong {
  color: #704300;
}

.page-hero {
  padding: 3.4rem 0 2.4rem;
}

.page-hero h1 {
  max-width: 920px;
  font-size: clamp(2.35rem, 4vw, 3.85rem);
}

.arch-page-section {
  padding: 0 0 3rem;
}

.arch-visual {
  border: 1px solid #cbdcf0;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 18%, rgba(21, 94, 239, 0.12), transparent 28rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 255, 0.9));
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: 1.15rem;
}

.arch-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.arch-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  padding: 0.32rem 0.6rem;
}

.legend-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--blue);
}

.legend-dot.runtime {
  background: var(--cyan);
}

.legend-dot.execution {
  background: var(--green);
}

.legend-dot.evidence {
  background: var(--amber);
}

.arch-canvas {
  position: relative;
  display: grid;
  gap: 1rem;
  overflow: hidden;
  border-radius: 24px;
  padding: 1rem;
}

.arch-canvas::before {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background-image:
    linear-gradient(rgba(21, 94, 239, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 94, 239, 0.055) 1px, transparent 1px);
  background-size: 34px 34px;
  content: "";
  pointer-events: none;
}

.arch-lane {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(203, 220, 240, 0.9);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  padding: 1rem;
}

.arch-lane-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.8rem;
}

.arch-lane-header strong {
  color: var(--navy);
  font-size: 0.92rem;
  font-weight: 900;
}

.arch-lane-header span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 720;
}

.arch-lane-grid {
  display: grid;
  align-items: stretch;
  gap: 0.72rem;
}

.setup-flow {
  grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr) 38px minmax(0, 1fr);
}

.runtime-flow {
  grid-template-columns: minmax(160px, 0.9fr) 38px minmax(220px, 1.15fr) 38px minmax(250px, 1.25fr) 38px minmax(160px, 0.9fr);
}

.support-flow {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.arch-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.72rem;
}

.arch-node {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  min-height: 116px;
  border: 1px solid #cbdcf0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 34px rgba(7, 26, 68, 0.08);
  padding: 0.85rem;
  text-align: center;
}

.arch-node small {
  color: var(--blue-dark);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.arch-node strong {
  color: var(--navy);
  font-size: 0.98rem;
  line-height: 1.12;
}

.arch-node span {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 690;
  line-height: 1.32;
}

.arch-node.main {
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  border-color: transparent;
  overflow: hidden;
}

.arch-node.main small,
.arch-node.main strong,
.arch-node.main span {
  position: relative;
  z-index: 1;
  color: #fff;
}

.arch-node.main::after {
  position: absolute;
  inset: -40% auto -40% -30%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  content: "";
  transform: skewX(-18deg);
  animation: gateway-shine 4.8s ease-in-out infinite;
}

.arch-stack .arch-node,
.support-flow .arch-node {
  min-height: 108px;
  padding: 0.75rem 0.68rem;
}

.arch-stack .arch-node small,
.support-flow .arch-node small {
  font-size: 0.6rem;
}

.arch-stack .arch-node strong,
.support-flow .arch-node strong {
  font-size: 0.88rem;
}

.arch-stack .arch-node span,
.support-flow .arch-node span {
  font-size: 0.66rem;
  line-height: 1.22;
}

.control-services {
  gap: 0.35rem;
}

.control-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.control-pills b {
  border: 1px solid #d6e4f6;
  border-radius: 999px;
  background: #f4f8fd;
  color: var(--blue-dark);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  padding: 0.25rem 0.45rem;
}

.arch-link {
  position: relative;
  align-self: center;
  height: 2px;
  min-width: 28px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(157, 185, 220, 0.35), rgba(21, 94, 239, 0.72));
}

.arch-link::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 0 6px rgba(21, 94, 239, 0.12);
  content: "";
  transform: translate(-50%, -50%);
  animation: arch-packet 2.8s linear infinite;
}

@keyframes arch-packet {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@keyframes arch-packet-y {
  0% { top: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@keyframes gateway-shine {
  0%, 55% { left: -35%; opacity: 0; }
  68% { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

.fleet-ecosystem-figure {
  margin: 1.2rem 0 1rem;
}

.fleet-diagram-scroll {
  overflow-x: auto;
  padding-bottom: 0.2rem;
}

.fleet-diagram {
  box-sizing: border-box;
  width: 100%;
  min-width: 1160px;
  border-radius: 28px;
  background: #e8eaee;
  color: var(--navy);
  padding: 1rem;
}

.fleet-top-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-left: 124px;
  border-radius: 12px;
  background: #f8f9fb;
  padding: 0.65rem;
}

.fleet-top-band span {
  border-radius: 8px;
  background: #e2e5eb;
  color: #23304a;
  font-size: 0.67rem;
  font-weight: 780;
  padding: 0.55rem 0.7rem;
}

.fleet-main-row {
  display: grid;
  grid-template-columns: 96px 18px 132px 18px 138px 18px 196px 18px 122px 18px 140px 18px 130px;
  gap: 0.28rem;
  align-items: center;
  margin-top: 0.95rem;
}

.fleet-box {
  display: flex;
  min-height: 98px;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  border-radius: 12px;
  background: #fff;
  padding: 0.68rem;
  text-align: center;
}

.fleet-box strong {
  color: var(--navy);
  font-size: 0.8rem;
  line-height: 1.12;
}

.fleet-box span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 720;
  line-height: 1.2;
}

.fleet-clients,
.fleet-targets {
  align-items: stretch;
}

.fleet-clients span,
.fleet-targets span {
  border-radius: 7px;
  background: #f2f4f8;
  padding: 0.34rem 0.42rem;
}

.fleet-gateway {
  background: linear-gradient(135deg, #fff, #eef7ff);
  border: 1px solid #cbdcf0;
}

.fleet-orchestrator,
.fleet-controls {
  min-height: 138px;
  background: #f9fafc;
}

.fleet-chip-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.36rem;
}

.fleet-chip-grid span {
  border-radius: 7px;
  background: #eef2f8;
  color: #33415e;
  padding: 0.36rem 0.32rem;
}

.fleet-chip-grid span:last-child {
  grid-column: 1 / -1;
}

.fleet-agent {
  background: #f9fafc;
}

.fleet-arrow {
  position: relative;
  height: 1px;
  background: #1f2937;
}

.fleet-arrow::after {
  position: absolute;
  top: 50%;
  right: -1px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #1f2937;
  content: "";
  transform: translateY(-50%);
}

.fleet-operator-band,
.fleet-evidence-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border-radius: 10px;
  background: #fff;
  padding: 0.68rem 1rem;
  text-align: center;
}

.fleet-operator-band {
  width: 68%;
  margin: 0.95rem auto 0;
}

.fleet-evidence-band {
  width: 78%;
  margin: 0.7rem auto 0;
}

.fleet-operator-band strong,
.fleet-evidence-band strong {
  color: var(--navy);
  font-size: 0.8rem;
}

.fleet-operator-band span,
.fleet-evidence-band span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 720;
}

.fleet-ecosystem-figure figcaption {
  margin-top: 0.7rem;
  color: #2b3448;
  font-size: 0.92rem;
  font-style: italic;
  text-align: center;
}

.mermaid-architecture-figure {
  margin: 1.2rem 0 1rem;
}

.mermaid-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  border: 1px solid #cbdcf0;
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: rgba(255, 255, 255, 0.96);
  padding: 0.85rem 1rem;
}

.mermaid-toolbar-title {
  display: grid;
  gap: 0.15rem;
}

.mermaid-toolbar-title strong {
  color: var(--navy);
  font-size: 0.94rem;
}

.mermaid-toolbar-title span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.mermaid-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mermaid-button-row button {
  border: 1px solid #cbdcf0;
  border-radius: 999px;
  background: #f8fbff;
  color: var(--navy);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 820;
  padding: 0.42rem 0.68rem;
}

.mermaid-button-row button:hover,
.mermaid-button-row button:focus-visible,
.mermaid-button-row button.is-active {
  border-color: rgba(21, 94, 239, 0.5);
  background: #eef6ff;
  color: var(--blue-dark);
}

.mermaid-panel {
  min-height: 640px;
  overflow: auto;
  border: 1px solid #cbdcf0;
  border-radius: 0 0 24px 24px;
  background:
    linear-gradient(rgba(21, 94, 239, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 94, 239, 0.035) 1px, transparent 1px),
    #eef1f5;
  background-size: 32px 32px;
  box-shadow: 0 16px 42px rgba(7, 26, 68, 0.08);
  cursor: grab;
  padding: 1rem;
  scroll-behavior: smooth;
  touch-action: none;
}

.mermaid-panel.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.mermaid-panel .mermaid {
  display: inline-block;
  margin: 0;
  color: var(--navy);
  font-family: inherit;
  font-size: 1rem;
}

.mermaid-panel svg {
  display: block;
  background: #eef1f5 !important;
  max-width: none;
}

.mermaid-panel svg .labelBkg,
.mermaid-panel svg .edgeLabel,
.mermaid-panel svg .cluster rect {
  background: #eef1f5 !important;
}

.mermaid-panel svg .node,
.mermaid-panel svg .cluster,
.mermaid-panel svg .edgePath,
.mermaid-panel svg .edgeLabel {
  transition: opacity 160ms ease, filter 160ms ease;
}

.mermaid-panel svg .topology-muted {
  opacity: 0.16;
}

.mermaid-panel svg .topology-focused {
  opacity: 1;
  filter: drop-shadow(0 8px 14px rgba(21, 94, 239, 0.24));
}

.mermaid-panel svg .topology-focused rect,
.mermaid-panel svg .topology-focused polygon,
.mermaid-panel svg .topology-focused path {
  stroke: var(--blue) !important;
  stroke-width: 2.5px !important;
}

.mermaid-architecture-figure figcaption {
  margin-top: 0.7rem;
  color: #2b3448;
  font-size: 0.92rem;
  font-style: italic;
  text-align: center;
}

.arch-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.arch-detail-grid article {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  padding: 1.15rem;
}

.arch-detail-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
  .arch-link::after,
  .arch-node.main::after {
    animation: none;
    opacity: 0;
  }
}

.content {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

.content section {
  margin: 2.4rem 0;
}

.content ul {
  padding-left: 1.25rem;
}

.content li {
  margin: 0.55rem 0;
}

.table {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}

.table-row {
  display: grid;
  grid-template-columns: 0.8fr 1.7fr;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.table-row:last-child {
  border-bottom: 0;
}

.table-row strong,
.table-row span {
  padding: 0.9rem 1rem;
}

.table-row strong {
  background: #f2f7ff;
  color: var(--navy);
}

.site-footer {
  border-top: 1px solid var(--line);
  background: #071a44;
  color: #d9e8ff;
  padding: 2.5rem 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: 1.5rem;
}

.site-footer a {
  display: block;
  margin: 0.35rem 0;
  color: #d9e8ff;
}

.site-footer h3 {
  color: #fff;
  font-size: 1rem;
}

.muted {
  color: var(--muted);
}

@media (max-width: 1040px) {
  .hero-grid,
  .split,
  .architecture-panels,
  .plane-diagram,
  .demo-diagram,
  .arch-detail-grid {
    grid-template-columns: 1fr;
  }

  .arch-canvas {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    min-height: auto;
  }

  .arch-node {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .setup-flow,
  .runtime-flow,
  .support-flow,
  .arch-stack {
    grid-template-columns: 1fr;
  }

  .arch-link {
    width: 2px;
    min-width: 0;
    height: 28px;
    justify-self: center;
    background: linear-gradient(180deg, rgba(157, 185, 220, 0.35), rgba(21, 94, 239, 0.72));
  }

  .arch-link::after {
    top: 0;
    left: 50%;
    animation-name: arch-packet-y;
  }

  .blueprint-wide {
    grid-row: auto;
  }

  .architecture-card {
    margin-top: 0;
  }

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

  .arrow {
    transform: rotate(90deg);
    text-align: center;
  }

  .plane-arrow,
  .demo-arrow {
    width: 2px;
    height: 28px;
    justify-self: center;
  }

  .plane-arrow::after,
  .demo-arrow::after {
    top: auto;
    right: auto;
    bottom: -1px;
    left: 50%;
    border-top: 0;
    border-left: 0;
    border-right: 2px solid #9db9dc;
    border-bottom: 2px solid #9db9dc;
    transform: translateX(-50%) rotate(45deg);
  }
}

@media (max-width: 980px) {
  .menu-toggle {
    display: inline-flex;
  }

  .nav {
    flex-wrap: wrap;
  }

  .nav-links,
  .nav-actions {
    display: none;
    width: 100%;
  }

  .nav.open .nav-links,
  .nav.open .nav-actions {
    display: grid;
    gap: 0.85rem;
  }

  .cards,
  .doc-grid,
  .status-grid,
  .footer-grid,
  .component-guide-grid {
    grid-template-columns: 1fr;
  }

  .component-row,
  .path-fork,
  .adapter-map,
  .adapter-side,
  .embedded-planes .plane-diagram {
    grid-template-columns: 1fr;
  }

  .component-tile {
    min-height: 64px;
  }

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

  h1 {
    font-size: clamp(2.55rem, 13vw, 4.1rem);
  }
}

@media (max-width: 640px) {
  /* The full request-path diagram becomes a long vertical stack on phones.
     The adjacent proof points preserve the architecture summary without
     forcing mobile visitors through a diagram before the page content. */
  .hero .architecture-card {
    display: none;
  }

  /* Pan-and-zoom topology controls are designed for pointer-sized viewports.
     Mobile readers retain the compact architecture and ecosystem diagrams. */
  .mermaid-architecture-figure {
    display: none;
  }
}

/* ==========================================================================
   Documentation shell
   Sidebar tree, reading column, and on-this-page rail. Light only by design:
   the marketing pages are light and a half-dark site reads as a bug.
   ========================================================================== */

.doc-shell {
  --doc-nav-w: 264px;
  --doc-main-pad: 40px;
  display: grid;
  grid-template-columns: var(--doc-nav-w) minmax(0, 1fr) 208px;
  gap: 0;
  max-width: 1440px;
  margin: 0 auto;
  align-items: start;
}

.doc-shell.no-toc,
.doc-shell.wide {
  grid-template-columns: var(--doc-nav-w) minmax(0, 1fr);
}

.doc-shell.wide {
  --doc-main-pad: 24px;
}

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

.doc-nav {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  padding: 28px 12px 48px 24px;
  border-right: 1px solid var(--line);
}

.doc-nav-inner {
  display: grid;
  gap: 20px;
}

.doc-nav-group {
  display: grid;
  gap: 1px;
}

.doc-nav-group p {
  margin: 0 0 6px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.doc-nav-group a {
  display: block;
  padding: 6px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  text-decoration: none;
}

.doc-nav-group a:hover {
  background: var(--surface-strong);
}

.doc-nav-group a.on {
  border-left-color: var(--blue);
  background: var(--surface-strong);
  color: var(--blue-dark);
  font-weight: 600;
}

.doc-nav-group a:focus-visible,
.doc-toc a:focus-visible,
.doc-body a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Reading column --------------------------------------------------------- */

.doc-main {
  min-width: 0;
  padding: 28px 40px 72px;
}

.doc-crumb {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--muted);
}

.doc-crumb a {
  color: var(--muted);
  text-decoration: none;
}

.doc-crumb a:hover {
  color: var(--blue);
}

.doc-crumb span {
  padding: 0 6px;
  opacity: 0.55;
}

.doc-body {
  max-width: 78ch;
}

.doc-shell.wide .doc-body {
  max-width: none;
}

.doc-body > section + section {
  margin-top: 40px;
}

.doc-body h1 {
  margin: 0 0 12px;
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.doc-body h2 {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  scroll-margin-top: 24px;
}

.doc-body h3 {
  margin: 24px 0 8px;
  font-size: 17px;
  scroll-margin-top: 24px;
}

.doc-body p,
.doc-body li {
  color: var(--text);
  line-height: 1.68;
}

.doc-body > section > p + p {
  margin-top: 12px;
}

.doc-body ul,
.doc-body ol {
  margin: 12px 0;
  padding-left: 22px;
  display: grid;
  gap: 7px;
}

.doc-body .lead {
  font-size: 18px;
  color: var(--muted);
  margin-bottom: 4px;
}

/* Heading anchors: the reason docs get linked in issues and runbooks. */
.anchor {
  margin-left: 8px;
  font-weight: 400;
  color: var(--line-2, #b9cde8);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.doc-body h2:hover .anchor,
.doc-body h3:hover .anchor,
.anchor:focus {
  opacity: 1;
  color: var(--blue);
}

/* On this page ----------------------------------------------------------- */

.doc-toc {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  padding: 30px 24px 48px 8px;
  display: grid;
  gap: 4px;
  align-content: start;
}

.doc-toc p {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.doc-toc a {
  display: block;
  padding: 3px 0 3px 12px;
  border-left: 2px solid var(--line);
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  text-decoration: none;
}

.doc-toc a.lvl3 {
  padding-left: 24px;
  font-size: 12.5px;
}

.doc-toc a:hover {
  color: var(--text);
}

.doc-toc a.on {
  border-left-color: var(--blue);
  color: var(--blue-dark);
  font-weight: 600;
}

/* Pagination ------------------------------------------------------------- */

.doc-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.pager-link {
  display: grid;
  gap: 3px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.14s ease;
}

.pager-link:hover {
  border-color: var(--blue);
}

.pager-link.next {
  text-align: right;
}

.pager-link span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.pager-link strong {
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.35;
}

/* Code blocks ------------------------------------------------------------ */

.code-block,
.code-tabs {
  margin: 16px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--navy);
}

.code-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.code-lang {
  padding: 7px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.code-copy {
  margin-left: auto;
  padding: 7px 15px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

.code-copy:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.code-copy.copied {
  color: #6ee7b7;
}

.code-tab {
  padding: 7px 15px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  cursor: pointer;
}

.code-tab:hover {
  color: #fff;
}

.code-tab.on {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--cyan);
}

.code-block pre,
.code-tabs pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Callouts --------------------------------------------------------------- */

.doc-note,
.doc-warn,
.doc-verify {
  margin: 16px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--blue);
  border-radius: 0 10px 10px 0;
  background: var(--surface-strong);
}

.doc-verify {
  border-left-color: var(--green);
  background: #e9f8f1;
}

.doc-warn {
  border-left-color: var(--amber);
  background: #fdf4e6;
}

.doc-note > strong:first-child,
.doc-warn > strong:first-child,
.doc-verify > strong:first-child {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue-dark);
}

.doc-verify > strong:first-child { color: #0b7a50; }
.doc-warn > strong:first-child { color: var(--amber); }

.doc-note p,
.doc-warn p,
.doc-verify p {
  margin: 0;
  font-size: 14.5px;
}

/* Steps ------------------------------------------------------------------ */

.doc-steps {
  display: grid;
  gap: 18px;
  margin: 18px 0;
  padding: 0;
  list-style: none;
  counter-reset: docstep;
}

.doc-steps > li {
  position: relative;
  padding-left: 44px;
  counter-increment: docstep;
}

.doc-steps > li::before {
  content: counter(docstep);
  position: absolute;
  left: 0;
  top: 1px;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.doc-steps > li > h3 {
  margin-top: 0;
}

/* Tables ----------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  margin: 16px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.ref-table th {
  position: sticky;
  top: 0;
  text-align: left;
  padding: 10px 14px;
  background: var(--surface-strong);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.ref-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--text);
}

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

.ref-field,
.ref-type {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  white-space: nowrap;
}

.ref-field { color: var(--navy); font-weight: 600; }
.ref-type { color: var(--blue-dark); }

.ref-required {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fdeceb;
  color: #b4231a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ref-meta {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
}

/* Search ----------------------------------------------------------------- */

.doc-search-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}

.doc-search-open:hover {
  border-color: var(--blue);
  color: var(--blue-dark);
}

.doc-search-open kbd {
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}

.doc-search {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  justify-items: center;
  align-content: start;
  padding: 12vh 20px 20px;
  background: rgba(7, 26, 68, 0.42);
  backdrop-filter: blur(3px);
}

.doc-search[hidden] { display: none; }

body.search-open { overflow: hidden; }

.doc-search-panel {
  width: min(660px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.doc-search-panel input {
  width: 100%;
  padding: 16px 20px;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  background: transparent;
}

.doc-search-panel input:focus { outline: none; }

.doc-search-results {
  max-height: 56vh;
  overflow-y: auto;
}

.doc-search-hint {
  margin: 0;
  padding: 18px 20px;
  color: var(--muted);
  font-size: 14px;
}

.doc-search-result {
  display: grid;
  gap: 2px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.doc-search-result:last-child { border-bottom: 0; }

.doc-search-result:hover,
.doc-search-result:focus-visible {
  background: var(--surface-strong);
  outline: none;
}

.doc-search-group {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}

.doc-search-result strong {
  font-size: 15px;
  color: var(--text);
}

.doc-search-heading {
  font-size: 13px;
  color: var(--blue-dark);
}

.doc-search-result > span:last-child {
  font-size: 13px;
  color: var(--muted);
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1180px) {
  .doc-shell,
  .doc-shell.wide,
  .doc-shell.no-toc {
    --doc-nav-w: 232px;
    grid-template-columns: var(--doc-nav-w) minmax(0, 1fr);
  }
  .doc-toc { display: none; }
  .doc-main { padding: 26px 28px 64px; }
}

@media (max-width: 880px) {
  .doc-shell,
  .doc-shell.wide,
  .doc-shell.no-toc {
    grid-template-columns: minmax(0, 1fr);
  }
  .doc-nav {
    /* The full documentation tree becomes an 800px sitemap on phones. The
       header menu keeps the key sections reachable without delaying the page. */
    display: none;
  }
  .doc-main { padding: 22px 20px 56px; }
  .doc-pager { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .anchor, .pager-link { transition: none; }
}

/* Wide pages carry diagrams that were drawn before the sidebar existed. Trim the
   reading padding and let the diagram scroller bleed back into it, so the
   architecture flow fits on a laptop instead of gaining a scrollbar it never
   had. It still scrolls on smaller screens rather than squashing. */

.doc-shell.wide .doc-main {
  padding-left: 24px;
  padding-right: 24px;
}

.doc-shell.wide .fleet-diagram-scroll {
  margin-left: -24px;
  margin-right: -24px;
  padding-left: 24px;
  padding-right: 24px;
}

/* Docs index cards. The base .doc-card rule styles an <a>, which is inline by
   default, so its block children escaped the border box and the card rendered
   as an empty pill with the text beside it. */
.doc-body .doc-card {
  display: grid;
  gap: 6px;
  align-content: start;
  text-decoration: none;
  transition: border-color 0.14s ease;
}

.doc-body .doc-card:hover {
  border-color: var(--blue);
}

.doc-body .doc-card h3 {
  margin: 0;
  font-size: 16px;
}

.doc-body .doc-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Mermaid renders into this block; it is a diagram, not code. */
.doc-body pre.mermaid {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  padding: 0;
}

/* Wide diagrams: scroll rather than clip, and show that they can be scrolled.
   fleet-ecosystem-figure defaulted to overflow visible, so on a narrow reading
   column its right edge was simply cut off. The others could scroll but macOS
   hides overlay scrollbars until you touch them, which reads as "cropped". */

.doc-body .fleet-ecosystem-figure,
.doc-body .fleet-diagram-scroll,
.doc-body .mermaid-panel {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2, #b9cde8) transparent;
  overscroll-behavior-x: contain;
}

.doc-body .fleet-ecosystem-figure::-webkit-scrollbar,
.doc-body .fleet-diagram-scroll::-webkit-scrollbar,
.doc-body .mermaid-panel::-webkit-scrollbar {
  height: 10px;
}

.doc-body .fleet-ecosystem-figure::-webkit-scrollbar-thumb,
.doc-body .fleet-diagram-scroll::-webkit-scrollbar-thumb,
.doc-body .mermaid-panel::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: #b9cde8;
  background-clip: content-box;
}

.doc-body .fleet-ecosystem-figure::-webkit-scrollbar-track,
.doc-body .fleet-diagram-scroll::-webkit-scrollbar-track,
.doc-body .mermaid-panel::-webkit-scrollbar-track {
  background: transparent;
}

/* Grid tracks size to max-content by default, so one long line inside a code
   block stretched the whole step list past its container. minmax(0, 1fr) lets
   the track shrink and hands the overflow back to the block that can scroll. */
.doc-steps {
  grid-template-columns: minmax(0, 1fr);
}

.doc-steps > li {
  min-width: 0;
}

/* ---------------------------------------------------------------------------
   Oversized diagrams on documentation pages.

   .fleet-diagram carries min-width: 1160px and .fleet-main-row is 13 fixed
   pixel columns, so the flow was drawn for a full-width marketing page. Inside
   a docs column with a sidebar there is nowhere near that room, and the figure
   was cut off at the right.

   Fix in two parts: let the figure escape the reading column and use the whole
   viewport, and below the width it was drawn for, drop the floor and let the
   row reflow instead of demanding a scrollbar.
   --------------------------------------------------------------------------- */





/* Narrower than the diagram was ever drawn for: reflow rather than clip. The
   connecting arrows stop meaning anything once boxes wrap, so they go. */
/* Inside the docs shell the reading column is never as wide as the 1160px this
   diagram was drawn for, so it always reflows here. The marketing page keeps
   the original fixed layout. */
.doc-shell .fleet-diagram {
  min-width: 0;
}

.doc-shell .fleet-main-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem;
}

.doc-shell .fleet-arrow {
  display: none;
}

.doc-shell .fleet-top-band {
  margin-left: 0;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.doc-shell .fleet-orchestrator,
.doc-shell .fleet-controls {
  min-height: 0;
}


/* The interactive topology has the same problem as the ecosystem flow: a fixed
   ~1007px canvas inside a panel that clips to round its corners. Give it the
   viewport too, so the right-hand lane is visible without hunting for the pan
   gesture. */




/* The topology's own stacking breakpoint (1040px) assumes a full-width page.
   Inside the docs shell the reading column is roughly 312px narrower than the
   viewport, so the lanes have to stack about that much earlier or the
   right-hand lane is cut off. 1400px covers 1366px laptops, which is where the
   horizontal layout first stops fitting. */
@media (max-width: 1400px) {
  .doc-shell .arch-node {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .doc-shell .setup-flow,
  .doc-shell .runtime-flow,
  .doc-shell .support-flow,
  .doc-shell .arch-stack {
    grid-template-columns: 1fr;
  }

  .doc-shell .arch-link {
    width: 2px;
    min-width: 0;
    height: 28px;
    justify-self: center;
    background: linear-gradient(180deg, rgba(157, 185, 220, 0.35), rgba(21, 94, 239, 0.72));
  }

  .doc-shell .arch-link::after {
    top: 0;
    left: 50%;
    animation-name: arch-packet-y;
  }

  .doc-shell .blueprint-wide {
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .doc-shell .fleet-operator-band,
  .doc-shell .fleet-evidence-band {
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.9rem 1rem;
    text-align: left;
  }

  .doc-shell .fleet-operator-band strong,
  .doc-shell .fleet-evidence-band strong {
    font-size: 0.82rem;
  }

  .doc-shell .fleet-operator-band span,
  .doc-shell .fleet-evidence-band span {
    font-size: 0.76rem;
    line-height: 1.45;
  }
}