/* =========================================================
   Hayduk presentation site
   Palette, type and spacing are derived from the product's
   own console, then pushed into a printed-field-atlas register.
   ========================================================= */

@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0b120f;
  --ink-2: #0d1712;
  --glass: #111d18;
  --line: rgba(236, 241, 230, 0.13);
  --line-strong: rgba(236, 241, 230, 0.23);
  --line-soft: rgba(236, 241, 230, 0.07);
  --chalk: #edf1e7;
  --sage: #a4b5a8;
  --dim: #7e9083;
  --signal: #c8f09a;
  --signal-strong: #d8f8b0;
  --signal-ink: #15230f;
  --route: #b9a6f8;
  --route-dim: rgba(185, 166, 248, 0.12);
  --amber: #e9bc80;
  --amber-dim: rgba(233, 188, 128, 0.12);

  --paper: #e9ebdf;
  --paper-ink: #131a14;
  --paper-muted: #4f5c51;
  --paper-line: #c8cebd;
  --paper-line-soft: #d8ddcf;

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --max: 1360px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-pad: clamp(76px, 9vw, 132px);
  --radius: 12px;
  --radius-sm: 8px;

  --focus: var(--signal);
}

/* ---- reset ---------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
p,
figure,
dl,
dd { margin: 0; }

ul,
ol { margin: 0; padding: 0; list-style: none; }

img,
svg,
video { display: block; }

img { max-width: 100%; height: auto; }

button,
input { font: inherit; color: inherit; }

button { border: 0; background: none; cursor: pointer; }

a { color: inherit; }

table { border-collapse: collapse; width: 100%; }

::selection { background: rgba(200, 240, 154, 0.28); }

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

.paper-section :focus-visible { --focus: #3e6629; }

/* ---- shared --------------------------------------------------------- */

.wrap {
  width: min(calc(100% - (var(--gutter) * 2)), var(--max));
  margin-inline: auto;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mono { font-family: var(--mono); font-variant-ligatures: none; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--signal);
  color: var(--signal-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.skip-link:focus-visible { transform: translateY(0); }

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}

.dot-live {
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(200, 240, 154, 0.08);
}

.dot-login { background: var(--amber); }
.dot-idle { background: #7f9788; }
.dot-route { background: var(--route); }

.route-swatch {
  width: 17px;
  height: 0;
  border-top: 1px dashed var(--route);
  display: inline-block;
  flex: none;
}

.paper-section .dot-live { background: #4f7b31; box-shadow: none; }
.paper-section .dot-login { background: #8a5b16; }
.paper-section .dot-idle { background: #64766a; }
.paper-section .dot-route { background: #6c55c4; }
.paper-section .route-swatch { border-color: #6c55c4; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 21px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.btn svg { width: 13px; height: 13px; flex: none; }

.btn-primary {
  background: var(--signal);
  color: var(--signal-ink);
}

.btn-primary:hover { background: var(--signal-strong); }

.btn-primary:focus-visible { outline-color: var(--chalk); }

.btn-ghost {
  border-color: var(--line-strong);
  color: var(--chalk);
  background: rgba(236, 241, 230, 0.015);
}

.btn-ghost:hover {
  border-color: rgba(236, 241, 230, 0.42);
  background: rgba(236, 241, 230, 0.05);
}

.btn-small {
  min-height: 38px;
  padding: 0 15px;
  font-size: 13px;
  border-radius: 7px;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  box-shadow: inset 0 -1px 0 transparent;
  transition: background-color 220ms ease, box-shadow 220ms ease, backdrop-filter 220ms ease;
}

.site-header.is-scrolled {
  background: rgba(8, 14, 11, 0.86);
  box-shadow: inset 0 -1px 0 var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
}

.header-inner {
  width: min(calc(100% - (var(--gutter) * 2)), var(--max));
  height: 76px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--chalk);
  text-decoration: none;
  flex: none;
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.brand-word {
  font-size: 22px;
  font-weight: 620;
  font-stretch: 112%;
  letter-spacing: -0.052em;
  line-height: 1;
}

.brand-dot { color: var(--signal); }

.brand:focus-visible { outline-offset: 5px; border-radius: 4px; }

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 32px);
  margin-left: auto;
}

.primary-nav a {
  position: relative;
  padding: 8px 0;
  color: var(--sage);
  font-size: 14px;
  font-weight: 450;
  text-decoration: none;
  transition: color 140ms ease;
}

.primary-nav a:hover { color: var(--chalk); }

.primary-nav a.is-current { color: var(--chalk); }

.primary-nav a.is-current::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--signal);
  transform: translateX(-50%);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: none;
}

.github-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--sage);
  font-size: 13.5px;
  text-decoration: none;
  transition: color 140ms ease;
}

.github-link:hover { color: var(--chalk); }

.icon-github { width: 17px; height: 17px; }

.menu-toggle {
  display: none;
  width: 40px;
  height: 39px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: var(--chalk);
  transition: background-color 140ms ease, border-color 140ms ease;
}

.menu-toggle:hover {
  background: rgba(236, 241, 230, 0.05);
  border-color: rgba(236, 241, 230, 0.38);
}

.menu-toggle svg { width: 20px; height: 20px; }

/* ---- hero ----------------------------------------------------------- */

.hero {
  position: relative;
  padding: clamp(42px, 5.6vw, 76px) 0 clamp(58px, 7vw, 92px);
  overflow: hidden;
}

.hero-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at center, rgba(200, 240, 154, 0.17) 1px, transparent 1.25px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 78% 74% at 62% 34%, #000 0%, rgba(0, 0, 0, 0.45) 55%, transparent 82%);
  mask-image: radial-gradient(ellipse 78% 74% at 62% 34%, #000 0%, rgba(0, 0, 0, 0.45) 55%, transparent 82%);
  opacity: 0.42;
}

.hero-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(310px, 0.72fr);
  gap: clamp(30px, 5vw, 78px);
  align-items: end;
}

.hero-title {
  font-size: clamp(3.05rem, 8.12vw, 7.55rem);
  line-height: 0.86;
  font-weight: 470;
  font-stretch: 112%;
  letter-spacing: -0.06em;
  color: var(--chalk);
  text-wrap: balance;
}

.hero-title-line { display: block; }

.hero-support { padding-bottom: 5px; }

.hero-sub {
  max-width: 39ch;
  color: var(--sage);
  font-size: clamp(16px, 1.3vw, 17.5px);
  line-height: 1.58;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.hero-note {
  margin-top: 18px;
  max-width: 40ch;
  color: var(--dim);
  font-size: 12.5px;
  line-height: 1.55;
}

/* ---- workspace map ------------------------------------------------- */

.workspace {
  position: relative;
  margin-top: clamp(34px, 4.4vw, 60px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--ink-2);
  overflow: hidden;
  box-shadow: 0 38px 90px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(236, 241, 230, 0.04);
}

.workspace-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  min-height: 52px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.14);
}

.workspace-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--glass);
  color: var(--chalk);
  font-size: 12.5px;
  font-weight: 450;
}

.workspace-name svg { width: 15px; height: 15px; color: var(--dim); }

.workspace-title {
  justify-self: center;
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 0.01em;
}

.workspace-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-self: end;
  color: var(--sage);
  font-size: 12px;
  white-space: nowrap;
}

.workspace-body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 50px minmax(188px, 0.55fr) minmax(275px, 0.8fr);
  gap: 20px;
  padding: 20px;
  align-items: stretch;
  background-image: radial-gradient(circle at center, rgba(236, 241, 230, 0.15) 1px, transparent 1.15px);
  background-size: 22px 22px;
  background-position: 11px 11px;
}

.subnet {
  min-width: 0;
  padding: 15px;
  border: 1px solid #26382d;
  border-radius: 11px;
  background: rgba(8, 16, 12, 0.78);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14);
}

.subnet-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  color: var(--sage);
}

.subnet-head svg { width: 16px; height: 16px; color: var(--dim); flex: none; }

.subnet-cidr {
  color: var(--chalk);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: -0.01em;
}

.subnet-count {
  margin-left: auto;
  color: var(--dim);
  font-size: 11.5px;
}

.host-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 13px;
}

.host-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  min-height: 104px;
  padding: 11px 12px 10px;
  border: 1px solid #24362b;
  border-radius: 8px;
  background: #121f18;
  color: var(--sage);
  text-align: left;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.host-card:hover {
  border-color: #3b5142;
  background: #15251c;
}

.host-card.is-selected {
  border-color: rgba(200, 240, 154, 0.85);
  background: #17271d;
  box-shadow: 0 0 0 1px rgba(200, 240, 154, 0.15), 0 8px 24px rgba(0, 0, 0, 0.18);
}

.host-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--dim);
}

.host-top svg { width: 14px; height: 14px; flex: none; }

.host-os {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  letter-spacing: 0.005em;
}

.host-name {
  margin-top: 5px;
  color: var(--chalk);
  font-size: 15.5px;
  font-weight: 520;
  letter-spacing: -0.018em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.host-ip {
  margin-top: 1px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: -0.01em;
}

.host-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 10.5px;
}

.host-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--sage);
  min-width: 0;
  white-space: nowrap;
}

.host-services {
  color: var(--dim);
  white-space: nowrap;
}

.host-card .dot { width: 5px; height: 5px; }

.route-link {
  position: relative;
  align-self: center;
  height: 1px;
  width: 100%;
}

.route-line {
  display: block;
  width: 100%;
  height: 0;
  border-top: 1px dashed rgba(185, 166, 248, 0.62);
  transform-origin: left center;
  animation: route-draw 850ms cubic-bezier(0.2, 0.72, 0.2, 1) 350ms both;
}

.route-head {
  position: absolute;
  right: -2px;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 6px solid var(--route);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: translateY(-50%);
  opacity: 0;
  animation: route-head-in 120ms ease 1120ms forwards;
}

@keyframes route-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

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

.routed-node {
  position: relative;
  align-self: center;
  min-width: 0;
  padding: 17px 14px 14px;
  border: 1px dashed rgba(185, 166, 248, 0.5);
  border-radius: 9px;
  background: rgba(185, 166, 248, 0.045);
  color: var(--sage);
  text-align: left;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.routed-node:hover {
  border-color: rgba(185, 166, 248, 0.8);
  background: rgba(185, 166, 248, 0.08);
}

.session-tag {
  position: absolute;
  top: -10px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border: 1px solid rgba(185, 166, 248, 0.38);
  border-radius: 4px;
  background: #181525;
  color: var(--route);
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.4;
  white-space: nowrap;
}

.session-tag .dot { width: 4px; height: 4px; }

.routed-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  color: var(--chalk);
}

.routed-head svg { width: 17px; height: 17px; flex: none; color: var(--route); }

.routed-cidr {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.routed-sub {
  display: block;
  margin-top: 5px;
  color: var(--sage);
  font-size: 10.5px;
  line-height: 1.4;
}

.routed-hint {
  display: block;
  margin-top: 2px;
  color: #9b8cb5;
  font-size: 10px;
  line-height: 1.4;
}

.inspector {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(17, 29, 24, 0.94);
  box-shadow: inset 0 1px 0 rgba(236, 241, 230, 0.035);
}

.inspector-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.inspector-name {
  color: var(--chalk);
  font-size: 16.5px;
  font-weight: 540;
  letter-spacing: -0.025em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.inspector-os {
  margin-top: 2px;
  color: var(--dim);
  font-size: 10.5px;
  line-height: 1.35;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  max-width: 132px;
  padding: 3px 7px;
  border: 1px solid rgba(200, 240, 154, 0.22);
  border-radius: 999px;
  background: rgba(200, 240, 154, 0.07);
  color: var(--signal);
  font-size: 9.5px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-pill .dot { width: 4px; height: 4px; box-shadow: none; }

.status-login {
  color: var(--amber);
  border-color: rgba(233, 188, 128, 0.26);
  background: rgba(233, 188, 128, 0.07);
}

.status-idle {
  color: var(--sage);
  border-color: var(--line);
  background: rgba(236, 241, 230, 0.035);
}

.status-route {
  color: var(--route);
  border-color: rgba(185, 166, 248, 0.3);
  background: var(--route-dim);
}

.inspector-ip {
  margin-top: 9px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: -0.01em;
}

.inspector-services {
  display: grid;
  gap: 0;
  margin-top: 11px;
  border-top: 1px solid var(--line-soft);
}

.service-row {
  display: grid;
  grid-template-columns: 47px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 10.5px;
  min-width: 0;
}

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

.service-port { color: var(--dim); font-family: var(--mono); }

.service-name { color: var(--sage); }

.service-version {
  color: var(--dim);
  font-family: var(--mono);
  font-size: 9.5px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspector-access {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.inspector-label {
  display: block;
  color: var(--dim);
  font-size: 9px;
  line-height: 1.3;
}

.access-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 5px;
}

.access-line .dot { width: 5px; height: 5px; box-shadow: none; }

.access-label {
  color: var(--chalk);
  font-size: 11.5px;
  line-height: 1.3;
  white-space: nowrap;
}

.access-kind {
  overflow: hidden;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspector-note {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
  color: var(--sage);
  font-size: 11px;
  line-height: 1.5;
}

.inspector-action {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 13px;
  color: var(--signal);
  font-size: 11.5px;
  font-weight: 450;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 240, 154, 0.28);
  line-height: 1.8;
  transition: color 140ms ease, border-color 140ms ease;
}

.inspector-action:hover {
  color: var(--signal-strong);
  border-color: var(--signal);
}

.inspector-action[hidden] { display: none; }

.workspace-foot {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 44px;
  padding: 11px 20px;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.13);
}

.map-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 17px;
  font-size: 11px;
  color: var(--sage);
}

.map-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.map-legend .dot { width: 5px; height: 5px; box-shadow: none; }

.map-note {
  margin-left: auto;
  color: var(--dim);
  font-size: 10.5px;
  line-height: 1.45;
  text-align: right;
}

/* ---- paper sections ------------------------------------------------- */

.paper-section {
  position: relative;
  padding: var(--section-pad) 0;
  background: var(--paper);
  color: var(--paper-ink);
  overflow: hidden;
}

.paper-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.14;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.paper-section > .wrap {
  position: relative;
  z-index: 1;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(300px, 0.72fr);
  gap: clamp(30px, 5.5vw, 92px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 68px);
}

.section-title {
  font-size: clamp(2.5rem, 5.35vw, 5.1rem);
  line-height: 0.92;
  font-weight: 480;
  font-stretch: 108%;
  letter-spacing: -0.052em;
  color: var(--paper-ink);
  text-wrap: balance;
}

.line-break { display: block; }

.section-intro {
  max-width: 47ch;
  color: var(--paper-muted);
  font-size: clamp(15.5px, 1.2vw, 17px);
  line-height: 1.6;
  text-wrap: pretty;
}

.section-intro p + p { margin-top: 13px; }

.section-head--dark .section-title { color: var(--chalk); }

.section-head--dark .section-intro { color: var(--sage); }

.lineage {
  max-width: 70ch;
  margin-top: clamp(32px, 4vw, 48px);
  color: var(--paper-muted);
  font-size: 14px;
  line-height: 1.62;
}

.lineage a,
.security-note a,
.text-link {
  color: var(--paper-ink);
  text-decoration: underline;
  text-decoration-color: var(--paper-line);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.lineage a:hover,
.security-note a:hover,
.text-link:hover { text-decoration-color: currentColor; }

.product-figure { margin: 0; }

.product-frame {
  padding: clamp(7px, 0.9vw, 12px);
  border-radius: 16px;
  background: #0b130f;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 34px 80px rgba(29, 43, 31, 0.2), 0 0 0 1px rgba(19, 29, 22, 0.1);
}

.product-frame img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.product-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 26px;
  margin-top: 15px;
  color: var(--paper-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.caption-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  flex: none;
}

.caption-actions a {
  color: var(--paper-ink);
  font-size: 12.5px;
  text-decoration: underline;
  text-decoration-color: var(--paper-line);
  text-underline-offset: 3px;
}

.caption-actions a:hover { text-decoration-color: currentColor; }

.state-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 42px);
  margin-top: clamp(48px, 6vw, 76px);
  padding-top: 28px;
  border-top: 1px solid var(--paper-line);
}

.state-item h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  color: var(--paper-ink);
  font-size: 15px;
  font-weight: 590;
  letter-spacing: -0.012em;
}

.state-item h3 .route-swatch { width: 16px; }

.state-item p {
  max-width: 33ch;
  color: var(--paper-muted);
  font-size: 13.5px;
  line-height: 1.58;
  text-wrap: pretty;
}

/* ---- campaign ------------------------------------------------------- */

.campaign-section {
  position: relative;
  padding: var(--section-pad) 0;
  background: var(--ink);
}

.campaign-section .section-head { margin-bottom: clamp(30px, 4vw, 44px); }

.steps {
  position: relative;
  margin-top: clamp(24px, 3.5vw, 40px);
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(24px, 4.2vw, 64px);
  align-items: start;
  padding: clamp(38px, 4.8vw, 62px) 0;
}

.step + .step { border-top: 1px solid var(--line); }

.step:first-child { padding-top: 12px; }

.step-rail {
  position: relative;
  align-self: stretch;
  min-height: 118px;
}

.step-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(200, 240, 154, 0.34);
  border-radius: 50%;
  background: var(--ink);
  color: var(--signal);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1;
}

.step-rail::after {
  content: "";
  position: absolute;
  top: 36px;
  bottom: -80px;
  left: 18px;
  width: 0;
  border-left: 1px dashed rgba(200, 240, 154, 0.19);
}

.step:last-child .step-rail::after { display: none; }

.step-copy { padding-top: 3px; }

.step-copy h3 {
  margin-bottom: 11px;
  color: var(--chalk);
  font-size: clamp(1.55rem, 2.5vw, 2.15rem);
  font-weight: 540;
  font-stretch: 103%;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.step-copy p {
  max-width: 46ch;
  color: var(--sage);
  font-size: clamp(15px, 1.15vw, 16px);
  line-height: 1.62;
  text-wrap: pretty;
}

.step-art { min-width: 0; }

.artifact {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(236, 241, 230, 0.035);
}

.artifact-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  padding: 11px 17px;
  border-bottom: 1px solid var(--line-soft);
}

.artifact-title {
  color: var(--chalk);
  font-size: 12.5px;
  font-weight: 550;
  letter-spacing: -0.005em;
}

.artifact-count,
.artifact-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--dim);
  font-size: 11px;
  white-space: nowrap;
}

.artifact-state { color: var(--signal); }

.artifact-state .dot { width: 4px; height: 4px; }

.artifact-note {
  padding: 11px 17px 14px;
  border-top: 1px solid var(--line-soft);
  color: var(--dim);
  font-size: 10.5px;
  line-height: 1.55;
}

.artifact-spec { padding-bottom: 0; }

.spec-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 11px 17px;
  border-bottom: 1px solid var(--line-soft);
}

.spec-row:last-of-type { border-bottom: 0; }

.spec-key {
  color: var(--dim);
  font-size: 11px;
}

.spec-value {
  color: var(--chalk);
  font-size: 11.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.spec-value.mono { font-size: 11px; }

.spec-result {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  padding: 12px 17px;
  border-top: 1px solid var(--line-soft);
  background: rgba(200, 240, 154, 0.035);
  color: var(--signal);
  font-size: 11px;
}

.spec-result .dot { width: 5px; height: 5px; }

.service-table {
  font-size: 11px;
  table-layout: fixed;
}

.service-table th {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--dim);
  font-size: 9.5px;
  font-weight: 450;
  letter-spacing: 0.01em;
  text-align: left;
}

.service-table th:first-child,
.service-table td:first-child { padding-left: 17px; }

.service-table th:last-child,
.service-table td:last-child { padding-right: 17px; }

.service-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--sage);
  font-size: 10.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.service-table td:first-child { color: var(--chalk); }

.service-table .mono { font-size: 9.5px; color: var(--dim); }

.module-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin: 13px 14px 0;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0b1410;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.module-search:focus-within {
  border-color: rgba(200, 240, 154, 0.5);
  box-shadow: 0 0 0 3px rgba(200, 240, 154, 0.07);
}

.module-search svg { width: 15px; height: 15px; color: var(--dim); flex: none; }

.module-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 5px 0;
  background: transparent;
  color: var(--chalk);
  font-size: 11.5px;
  outline: 0;
}

.module-search input::placeholder { color: #6e8175; }

.module-search input:focus-visible { outline: none; }

.module-clear {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  color: var(--dim);
  font-size: 15px;
  line-height: 1;
  flex: none;
}

.module-clear:hover { color: var(--chalk); background: rgba(236, 241, 230, 0.07); }

.module-clear[hidden] { display: none; }

.module-list {
  margin-top: 9px;
}

.module-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
  padding: 6px 17px;
  border-bottom: 1px solid var(--line-soft);
}

.module-list li[hidden] { display: none; }

.module-list li:last-child { border-bottom: 0; }

.module-path {
  color: var(--sage);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: -0.012em;
  line-height: 1.5;
  overflow-wrap: normal;
  word-break: normal;
}

.module-type {
  flex: none;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 8.5px;
  line-height: 1.5;
}

.module-empty {
  padding: 22px 17px;
  color: var(--sage);
  font-size: 11.5px;
  line-height: 1.55;
}

.module-empty[hidden] { display: none; }


.artifact-terminal { background: #09110d; }

.terminal-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 45px;
  padding: 9px 15px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
}

.terminal-session {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--chalk);
  font-size: 11.5px;
  font-weight: 500;
}

.terminal-session .dot { width: 5px; height: 5px; box-shadow: none; }

.terminal-host {
  color: var(--dim);
  font-family: var(--mono);
  font-size: 10px;
}

.terminal-demo {
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid rgba(233, 188, 128, 0.22);
  border-radius: 3px;
  background: var(--amber-dim);
  color: var(--amber);
  font-size: 9px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.terminal-body { padding: 13px 15px 0; }

.terminal-log {
  height: 258px;
  overflow: auto;
  padding: 0 1px 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--sage);
  overscroll-behavior: contain;
  white-space: normal;
  scrollbar-width: thin;
  scrollbar-color: #354b3d transparent;
}

.term-line {
  min-height: 1.7em;
  white-space: pre;
}

.term-prompt { color: var(--signal); margin-right: 7px; }

.term-command { color: var(--chalk); }

.term-line.is-note { color: var(--dim); font-style: normal; }

.terminal-form {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 43px;
  border-top: 1px solid var(--line);
}

.terminal-form .term-prompt { flex: none; }

.terminal-form input {
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 10px 0;
  background: transparent;
  color: var(--chalk);
  font-family: var(--mono);
  font-size: 11.5px;
  caret-color: var(--signal);
  outline: 0;
}

.terminal-form input::placeholder { color: #6a7e70; }

.artifact-terminal:focus-within {
  border-color: rgba(200, 240, 154, 0.4);
  box-shadow: 0 0 0 3px rgba(200, 240, 154, 0.055), 0 24px 60px rgba(0, 0, 0, 0.18);
}

.terminal-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 15px 12px;
  border-top: 1px solid var(--line-soft);
}

.terminal-hint {
  max-width: 30ch;
  color: var(--dim);
  font-size: 9.5px;
  line-height: 1.5;
}

.terminal-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.terminal-suggestions button {
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(236, 241, 230, 0.02);
  color: var(--sage);
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.45;
  transition: border-color 140ms ease, color 140ms ease;
}

.terminal-suggestions button:hover {
  border-color: rgba(200, 240, 154, 0.35);
  color: var(--chalk);
}

.artifact-export { padding: 18px; }

.export-file {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line-soft);
}

.export-file svg { width: 28px; height: 28px; color: var(--signal); flex: none; }

.export-name {
  color: var(--chalk);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.export-meta {
  margin-top: 2px;
  color: var(--dim);
  font-size: 10px;
}

.export-counts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 0;
}

.export-counts div {
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}

.export-counts div:nth-last-child(-n + 2) { border-bottom: 0; }

.export-counts dt {
  color: var(--dim);
  font-size: 9.5px;
  line-height: 1.4;
}

.export-counts dd {
  margin-top: 3px;
  color: var(--chalk);
  font-size: 24px;
  font-weight: 480;
  letter-spacing: -0.03em;
  line-height: 1;
}

.artifact-export .artifact-note { padding: 13px 0 0; border-top: 1px solid var(--line-soft); }

.campaign-fineprint {
  margin-top: 6px;
  color: var(--dim);
  font-size: 11px;
  text-align: right;
}

/* ---- handoff -------------------------------------------------------- */

.handoff-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  gap: clamp(42px, 6vw, 96px);
  align-items: start;
}

.handoff-copy h3 {
  margin-bottom: 11px;
  color: var(--paper-ink);
  font-size: clamp(1.3rem, 1.8vw, 1.55rem);
  font-weight: 590;
  letter-spacing: -0.027em;
  line-height: 1.15;
}

.handoff-copy > p {
  max-width: 47ch;
  color: var(--paper-muted);
  font-size: 14.5px;
  line-height: 1.62;
  text-wrap: pretty;
}

.code-row {
  display: flex;
  align-items: stretch;
  min-width: 0;
  min-height: 44px;
  border: 1px solid #283a2f;
  border-radius: 7px;
  background: #0c1510;
  overflow: hidden;
}

.code-row pre {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 11px 13px;
  overflow-x: auto;
  color: #dfe9db;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.6;
  scrollbar-width: thin;
  scrollbar-color: #354b3d transparent;
}

.code-row code { font-family: inherit; white-space: pre; }

.code-row .copy-btn {
  flex: none;
  min-width: 52px;
  min-height: 44px;
  padding: 0 12px;
  border-left: 1px solid #283a2f;
  background: rgba(236, 241, 230, 0.025);
  color: #9eb0a2;
  font-size: 10.5px;
  line-height: 1;
  transition: background-color 140ms ease, color 140ms ease;
}

.code-row .copy-btn:hover {
  background: rgba(200, 240, 154, 0.06);
  color: var(--signal);
}

.code-row .copy-btn.is-copied { color: var(--signal); }

.code-row--paper { margin-top: 18px; }

.code-note {
  margin-top: 7px;
  color: var(--paper-muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.security-note {
  margin-top: 22px;
  padding: 12px 14px;
  border-left: 2px solid #9a6819;
  border-radius: 0 4px 4px 0;
  background: rgba(138, 91, 22, 0.055);
  color: #435044;
  font-size: 12.5px;
  line-height: 1.6;
}

.also-title {
  margin-top: 34px !important;
  margin-bottom: 4px !important;
  font-size: 15.5px !important;
  letter-spacing: -0.012em !important;
}

.also-list {
  border-top: 1px solid var(--paper-line);
  margin-top: 9px;
}

.also-list li {
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--paper-line-soft);
}

.also-name {
  color: var(--paper-ink);
  font-size: 13px;
  font-weight: 580;
  letter-spacing: -0.01em;
  line-height: 1.45;
}

.also-text {
  color: var(--paper-muted);
  font-size: 12.5px;
  line-height: 1.56;
}

.report-figure { margin: 0; min-width: 0; }

.report-sheet {
  padding: clamp(20px, 2.7vw, 32px);
  border: 1px solid #d4dacb;
  border-radius: 5px;
  background: #f7f8f1;
  color: #1a211a;
  box-shadow: 0 30px 70px rgba(35, 50, 36, 0.15), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #c8cebd transparent;
}

.report-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid #dce1d4;
}

.report-brand {
  color: #172017;
  font-size: 18px;
  font-weight: 650;
  font-stretch: 112%;
  letter-spacing: -0.052em;
  line-height: 1;
}

.report-brand-dot { color: #5d8a39; }

.report-type {
  color: #626e61;
  font-size: 10.5px;
  letter-spacing: 0.015em;
}

.report-meta {
  margin-top: 11px;
  color: #616c60;
  font-size: 10.5px;
  line-height: 1.5;
}

.report-meta strong { color: #222b22; font-weight: 600; }

.report-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 15px;
  padding: 12px 0;
  border-top: 1px solid #e0e4d8;
  border-bottom: 1px solid #e0e4d8;
}

.report-counts div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.report-num {
  color: #162016;
  font-size: 21px;
  font-weight: 480;
  letter-spacing: -0.03em;
  line-height: 1;
}

.report-label {
  color: #6a7469;
  font-size: 9px;
  line-height: 1.3;
}

.report-table {
  margin-top: 8px;
  font-size: 10px;
  table-layout: fixed;
}

.report-table th {
  padding: 7px 6px;
  border-bottom: 1px solid #dce1d4;
  color: #697468;
  font-size: 8.5px;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0.01em;
}

.report-table td {
  padding: 8px 6px;
  border-bottom: 1px solid #e5e9dd;
  color: #2c362c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-table th:first-child,
.report-table td:first-child { padding-left: 0; }

.report-table th:last-child,
.report-table td:last-child { padding-right: 0; }

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

.report-table .mono { color: #556254; font-size: 9px; }

.access {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 8px;
  font-weight: 550;
  line-height: 1.5;
  white-space: nowrap;
}

.access-session { color: #3e672c; background: #e4eed8; }
.access-cred { color: #785111; background: #f3e8d3; }
.access-none { color: #586456; background: #eef0e7; }

.report-foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 15px;
  padding-top: 9px;
  border-top: 1px solid #dce1d4;
  color: #5f695d;
  font-size: 8.5px;
  line-height: 1.4;
}

.report-figure figcaption {
  margin-top: 12px;
  color: var(--paper-muted);
  font-size: 11.5px;
  line-height: 1.5;
}

/* ---- FAQ ------------------------------------------------------------ */

.handoff-section { padding-bottom: clamp(56px, 7vw, 96px); }

.faq-section {
  border-top: 1px solid var(--paper-line);
  padding-top: clamp(58px, 7vw, 100px);
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.faq-intro {
  position: sticky;
  top: calc(76px + 32px);
  align-self: start;
}

.faq-intro .section-title {
  font-size: clamp(2.4rem, 4.7vw, 4.35rem);
}

.faq-lede {
  max-width: 41ch;
  margin-top: 24px;
  color: var(--paper-ink);
  font-size: 16.5px;
  line-height: 1.6;
  text-wrap: pretty;
}

.faq-intro p:not(.faq-lede) {
  max-width: 44ch;
  margin-top: 13px;
  color: var(--paper-muted);
  font-size: 13.5px;
  line-height: 1.62;
  text-wrap: pretty;
}

.faq-intro .faq-links a,
.faq-answer a {
  color: var(--paper-ink);
  text-decoration: underline;
  text-decoration-color: var(--paper-line);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.faq-intro .faq-links a:hover,
.faq-answer a:hover { text-decoration-color: currentColor; }

.faq-list { border-top: 1px solid var(--paper-line); }

.faq-item { border-bottom: 1px solid var(--paper-line); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 21px 0;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }

.faq-item summary h3 {
  color: var(--paper-ink);
  font-size: clamp(1.05rem, 1.45vw, 1.23rem);
  font-weight: 580;
  letter-spacing: -0.018em;
  line-height: 1.35;
  text-wrap: pretty;
  transition: color 140ms ease;
}

.faq-item summary:hover h3 { color: #000; }

.faq-toggle {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
}

.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  border-radius: 1px;
  background: var(--paper-muted);
  transition: transform 160ms ease, opacity 160ms ease, background-color 140ms ease;
}

.faq-toggle::before {
  left: 0;
  top: 7.5px;
  width: 16px;
  height: 1px;
}

.faq-toggle::after {
  left: 7.5px;
  top: 0;
  width: 1px;
  height: 16px;
}

.faq-item[open] .faq-toggle::after {
  opacity: 0;
  transform: scaleY(0);
}

.faq-item summary:hover .faq-toggle::before,
.faq-item summary:hover .faq-toggle::after { background: var(--paper-ink); }

.faq-answer {
  max-width: 64ch;
  padding: 0 0 23px;
  color: var(--paper-muted);
  font-size: 14.5px;
  line-height: 1.66;
  text-wrap: pretty;
}

.faq-answer p + p { margin-top: 10px; }

.faq-answer .mono {
  color: var(--paper-ink);
  font-size: 0.92em;
}

.product-frame picture,
.media-dialog picture { display: block; }

/* ---- setup ---------------------------------------------------------- */

.setup-section {
  position: relative;
  padding: var(--section-pad) 0 calc(var(--section-pad) - 6px);
  background: var(--ink);
  overflow: hidden;
}

.setup-section::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -120px;
  width: 640px;
  height: 560px;
  pointer-events: none;
  background-image: radial-gradient(circle at center, rgba(200, 240, 154, 0.17) 1px, transparent 1.25px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 68%);
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 68%);
  opacity: 0.3;
}

.setup-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.setup-copy .section-title { max-width: 12ch; color: var(--chalk); }

.setup-intro {
  max-width: 43ch;
  margin-top: 24px;
  color: var(--sage);
  font-size: clamp(15.5px, 1.2vw, 17px);
  line-height: 1.62;
  text-wrap: pretty;
}

.setup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 29px;
}

.setup-note {
  margin-top: 16px;
  max-width: 41ch;
  color: var(--dim);
  font-size: 11.5px;
  line-height: 1.55;
}

.setup-release {
  margin-top: 15px;
  color: var(--sage);
  font-size: 12.5px;
  line-height: 1.55;
}

.setup-release strong {
  color: var(--chalk);
  font-weight: 560;
}

.setup-release a {
  color: var(--chalk);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.setup-release a:hover { color: var(--signal); }

.setup-release + .setup-note { margin-top: 9px; }

.quickstart {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(13, 23, 18, 0.92);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(236, 241, 230, 0.035);
  overflow: hidden;
}

.quickstart-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.14);
}

.quickstart-title {
  color: var(--chalk);
  font-size: 12.5px;
  font-weight: 550;
}

.quickstart-time {
  color: var(--dim);
  font-size: 10.5px;
}

.quickstart-step {
  padding: 17px 20px 18px;
}

.quickstart-step + .quickstart-step { border-top: 1px solid var(--line-soft); }

.quickstart-step-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}

.quickstart-num {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1px solid rgba(200, 240, 154, 0.3);
  border-radius: 50%;
  color: var(--signal);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
  flex: none;
}

.quickstart-step-head h3 {
  color: var(--chalk);
  font-size: 13px;
  font-weight: 540;
  letter-spacing: -0.005em;
}

.quickstart-step .code-row { margin-top: 0; }

.quickstart-note {
  margin-top: 7px;
  color: var(--dim);
  font-size: 10.5px;
  line-height: 1.5;
}

.quickstart-note code {
  font-family: var(--mono);
  color: var(--sage);
  font-size: 9.5px;
}

.field-list {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 0 14px;
  margin: 4px 0 0;
}

.field-list div {
  display: contents;
}

.field-list dt,
.field-list dd {
  padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 10.5px;
  line-height: 1.5;
}

.field-list dt { color: var(--dim); }

.field-list dd {
  color: var(--chalk);
  font-family: var(--mono);
  font-size: 10px;
}

.lab-strip {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.7fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
  margin-top: clamp(48px, 6vw, 72px);
  padding: 27px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.lab-copy h3 {
  margin-bottom: 6px;
  color: var(--chalk);
  font-size: 16px;
  font-weight: 550;
  letter-spacing: -0.015em;
}

.lab-copy p {
  max-width: 58ch;
  color: var(--sage);
  font-size: 13px;
  line-height: 1.58;
}

.lab-copy .text-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--chalk);
  font-size: 12px;
  text-decoration-color: var(--line-strong);
}

.lab-copy .text-link:hover { text-decoration-color: currentColor; }

.code-row--wide { justify-self: end; width: 100%; max-width: 402px; }

.authorized-note {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-top: 34px;
  padding: 18px 20px;
  border: 1px solid rgba(233, 188, 128, 0.17);
  border-radius: 9px;
  background: rgba(233, 188, 128, 0.035);
}

.authorized-icon {
  width: 25px;
  height: 25px;
  color: var(--amber);
  flex: none;
  margin-top: 1px;
}

.authorized-note h3 {
  color: var(--chalk);
  font-size: 13.5px;
  font-weight: 550;
  letter-spacing: -0.008em;
}

.authorized-note p {
  max-width: 82ch;
  margin-top: 4px;
  color: var(--sage);
  font-size: 12px;
  line-height: 1.6;
}

/* ---- footer --------------------------------------------------------- */

.site-footer {
  padding: 64px 0 32px;
  border-top: 1px solid var(--line);
  background: #080d0a;
}

.footer-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--line);
}

.brand--footer .brand-word { font-size: 25px; }

.brand--footer .brand-mark { width: 30px; height: 30px; }

.footer-tagline {
  color: var(--dim);
  font-size: 13px;
  text-align: right;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, 0.75fr);
  gap: 36px;
  margin-top: 38px;
}

.footer-about {
  max-width: 34ch;
  color: var(--dim);
  font-size: 12.5px;
  line-height: 1.6;
}

.footer-about strong {
  display: block;
  margin-bottom: 7px;
  color: var(--chalk);
  font-size: 13px;
  font-weight: 550;
}

.footer-about a {
  color: var(--sage);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.footer-about a:hover { color: var(--chalk); }

.footer-col h2 {
  margin-bottom: 12px;
  color: var(--dim);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.footer-col a {
  display: block;
  width: fit-content;
  margin-bottom: 9px;
  color: var(--sage);
  font-size: 12.5px;
  line-height: 1.45;
  text-decoration: none;
  transition: color 140ms ease;
}

.footer-col a:hover { color: var(--chalk); }

.footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 10.5px;
  line-height: 1.6;
}

.footer-legal p { max-width: 50ch; }

/* ---- dialogs -------------------------------------------------------- */

dialog {
  color: var(--chalk);
  border: 0;
}

dialog::backdrop {
  background: rgba(3, 7, 5, 0.78);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.media-dialog {
  width: min(1080px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--ink-2);
  color: var(--chalk);
  box-shadow: 0 50px 140px rgba(0, 0, 0, 0.64);
  overflow: hidden;
}

.media-dialog--wide { width: min(1380px, calc(100vw - 32px)); }

.media-dialog[open] { animation: dialog-in 180ms ease both; }

dialog[open]::backdrop { animation: backdrop-in 180ms ease both; }

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(0.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.media-dialog-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.media-dialog-top h2 {
  color: var(--chalk);
  font-size: 16px;
  font-weight: 550;
  letter-spacing: -0.02em;
}

.media-dialog-top p {
  margin-top: 3px;
  color: var(--sage);
  font-size: 11px;
  line-height: 1.45;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--sage);
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}

.icon-button:hover {
  border-color: var(--line-strong);
  background: rgba(236, 241, 230, 0.04);
  color: var(--chalk);
}

.icon-button svg { width: 17px; height: 17px; }

.media-dialog video,
.media-dialog img {
  display: block;
  width: 100%;
  max-height: 72svh;
  background: #020604;
  object-fit: contain;
}

.media-note {
  padding: 10px 20px 13px;
  color: var(--dim);
  font-size: 10.5px;
}

.media-note a {
  color: var(--sage);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.media-note a:hover { color: var(--chalk); }

/* menu */

.menu-dialog {
  width: min(398px, calc(100vw - 20px));
  height: calc(100svh - 20px);
  max-height: none;
  margin: 10px 10px 10px auto;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0d1712;
  color: var(--chalk);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}

.menu-dialog[open] {
  display: flex;
  flex-direction: column;
  animation: menu-in 190ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes menu-in {
  from { opacity: 0.4; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}

.menu-dialog-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line);
}

.menu-title {
  color: var(--dim);
  font-size: 12px;
}

.menu-nav {
  display: flex;
  flex-direction: column;
  margin-top: 26px;
}

.menu-nav a {
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--chalk);
  font-size: clamp(1.65rem, 5.2vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.15;
  text-decoration: none;
}

.menu-nav a:hover { color: var(--signal); }

.menu-nav a:last-child {
  color: var(--sage);
  font-size: 15px;
  letter-spacing: 0;
  padding-top: 18px;
}

.menu-dialog-foot {
  margin-top: auto;
  padding-top: 24px;
}

.menu-dialog-foot .btn { width: 100%; }

.menu-dialog-foot p {
  margin-top: 10px;
  color: var(--dim);
  font-size: 11px;
  text-align: center;
}

/* ---- copy status ---------------------------------------------------- */

.copy-status {
  position: fixed;
  bottom: 20px;
  left: 50%;
  z-index: 200;
}

.no-js .copy-btn,
.no-js .module-search,
.no-js .terminal-form,
.no-js .terminal-suggestions,
.no-js .menu-toggle { display: none; }

.no-js .host-card,
.no-js .routed-node { cursor: default; }

html.has-dialog,
html.has-dialog body { overflow: hidden; }

/* ---- responsive ----------------------------------------------------- */

@media (max-width: 1240px) {
  .workspace-body {
    grid-template-columns: minmax(0, 1.6fr) 42px minmax(180px, 0.55fr);
  }

  .inspector {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(160px, 0.9fr) minmax(120px, 0.6fr) minmax(220px, 1.2fr) auto;
    align-items: center;
    gap: 18px;
    padding: 13px 16px;
  }

  .inspector-top { display: block; }

  .inspector-top .status-pill { margin-top: 5px; }

  .inspector-ip { margin-top: 0; }

  .inspector-services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    margin-top: 0;
    border-top: 0;
  }

  .service-row { grid-template-columns: 43px minmax(0, 1fr); }

  .service-version { display: none; }

  .inspector-action {
    margin-top: 0;
    padding-top: 0;
    white-space: nowrap;
  }

  .inspector-access { display: none; }

  .inspector-note {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}

@media (max-width: 1180px) {
  .hero-head {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }

  .hero-support {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 38px;
    align-items: end;
    max-width: 100%;
  }

  .hero-sub { grid-column: 1; max-width: 52ch; }

  .hero-actions { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-top: 0; }

  .hero-note { grid-column: 1; margin-top: 6px; }
}

@media (max-width: 1100px) {
  .primary-nav { display: none; }
  .menu-toggle { display: grid; }
  .header-actions { gap: 14px; }
}

@media (max-width: 980px) {
  .hero-head {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }

  .hero-title { font-size: clamp(3.15rem, 10.4vw, 6.6rem); }

  .hero-support {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 38px;
    align-items: end;
    max-width: 100%;
  }

  .hero-sub { grid-column: 1; max-width: 52ch; }

  .hero-actions { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-top: 0; }

  .hero-note { grid-column: 1; margin-top: 6px; }

  .section-head {
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
  }

  .section-intro { max-width: 60ch; }

  .state-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 36px; }

  .setup-head { grid-template-columns: 1fr; gap: 38px; }

  .setup-copy .section-title { max-width: 15ch; }

  .handoff-grid { grid-template-columns: 1fr; gap: 44px; }

  .handoff-copy { max-width: 660px; }

  .report-figure { max-width: 760px; }

  .lab-strip { grid-template-columns: 1fr; gap: 20px; }

  .code-row--wide { justify-self: start; max-width: 460px; }

  .footer-grid { grid-template-columns: 1.2fr repeat(3, 0.8fr); gap: 24px; }
}

@media (max-width: 860px) {
  :root { --section-pad: clamp(64px, 10vw, 88px); }

  .workspace-body {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 15px;
  }

  .route-link {
    justify-self: center;
    align-self: stretch;
    width: 1px;
    height: 34px;
    margin: 5px 0;
  }

  .route-line {
    width: 0;
    height: 100%;
    border-top: 0;
    border-left: 1px dashed rgba(185, 166, 248, 0.62);
    transform-origin: center top;
    animation-name: route-draw-y;
  }

  @keyframes route-draw-y {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
  }

  .route-head {
    right: auto;
    top: auto;
    bottom: -2px;
    left: 50%;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid var(--route);
    border-bottom: 0;
    transform: translateX(-50%);
  }

  .routed-node { align-self: stretch; margin-top: 0; }

  .inspector {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 13px;
    padding: 14px;
  }

  .inspector-top {
    display: flex;
    align-items: flex-start;
  }

  .inspector-top .status-pill { margin-top: 1px; }

  .inspector-access { display: block; }

  .inspector-services {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--line-soft);
    padding-top: 3px;
  }

  .service-row {
    grid-template-columns: 47px minmax(0, 1fr) auto;
    padding: 7px 0;
  }

  .service-version { display: inline; }

  .inspector-action { margin-top: 4px; padding-top: 6px; }

  .workspace-foot {
    flex-wrap: wrap;
    gap: 9px 20px;
    padding: 12px 15px;
  }

  .map-note { margin-left: 0; text-align: left; }

  .steps::before { display: none; }

  .step {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 18px;
    padding: 34px 0;
  }

  .step-rail { min-height: auto; }

  .step-rail::after {
    top: 36px;
    bottom: -100%;
    left: 17px;
  }

  .step:last-child .step-rail::after { display: none; }

  .step-num { width: 34px; height: 34px; font-size: 10.5px; }

  .step-copy { grid-column: 2; }

  .step-art { grid-column: 2; margin-top: 22px; }

  .campaign-fineprint { text-align: left; margin-top: 18px; }

  .terminal-log { height: 225px; }

  .footer-top { align-items: flex-start; flex-direction: column; gap: 12px; }

  .footer-tagline { text-align: left; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }

  html { scroll-padding-top: 64px; }

  .header-inner { height: 64px; gap: 14px; }

  .brand-mark { width: 26px; height: 26px; }

  .brand-word { font-size: 20px; }

  .github-link { display: none; }

  .header-actions { gap: 9px; }

  .btn-small { min-height: 36px; padding: 0 12px; font-size: 12px; }

  .primary-nav { display: none; }

  .line-break { display: inline; }

  .hero { padding-top: 34px; }

  .hero-support {
    display: block;
  }

  .hero-actions { margin-top: 22px; }

  .hero-note { margin-top: 13px; }

  .hero-title { font-size: clamp(3rem, 12.4vw, 5.2rem); }

  .workspace { margin-top: 30px; border-radius: 12px; }

  .workspace-top {
    grid-template-columns: 1fr auto;
    min-height: 48px;
    padding: 7px 12px;
    gap: 10px;
  }

  .workspace-title { display: none; }

  .workspace-name { font-size: 11.5px; padding: 0 8px; min-height: 28px; }

  .workspace-status { font-size: 10.5px; gap: 6px; }

  .workspace-body { padding: 12px; }

  .subnet { padding: 12px; }

  .host-card { min-height: 98px; padding: 10px 10px 9px; }

  .host-name { font-size: 14px; }

  .host-os { font-size: 9.5px; }

  .host-ip { font-size: 10px; }

  .host-foot { font-size: 9px; gap: 5px; }

  .host-services { display: none; }

  .routed-node { padding: 16px 13px 13px; }

  .session-tag { left: 10px; }

  .inspector { margin-top: 11px; }

  .section-title { font-size: clamp(2.2rem, 8.7vw, 3.55rem); }

  .product-caption { flex-direction: column; gap: 8px; }

  .caption-actions { gap: 16px; }

  .state-legend { grid-template-columns: 1fr; gap: 20px; }

  .state-item { display: grid; grid-template-columns: 1fr; }

  .state-item p { max-width: 58ch; }

  .state-legend { padding-top: 22px; }

  .lineage { margin-top: 28px; font-size: 12.5px; }

  .step { grid-template-columns: 28px minmax(0, 1fr); gap: 13px; padding: 28px 0; }

  .step-num { width: 28px; height: 28px; font-size: 9.5px; }

  .step-rail::after { left: 14px; top: 30px; }

  .step-copy h3 { font-size: 1.4rem; }

  .step-copy p { font-size: 14.5px; }

  .step-art { margin-top: 18px; }

  .artifact-top { padding: 10px 13px; min-height: 42px; }

  .spec-row { grid-template-columns: 74px minmax(0, 1fr); padding: 10px 13px; gap: 10px; }

  .spec-result { padding: 11px 13px; }

  .service-table th:first-child, .service-table td:first-child { padding-left: 13px; }
  .service-table th:last-child, .service-table td:last-child { padding-right: 13px; }

  .artifact-note { padding: 10px 13px 12px; }

  .module-search { margin: 11px 11px 0; }

  .module-list li { min-height: 30px; padding: 6px 13px; }

  .module-path { font-size: 10px; }

  .module-type { display: none; }

  .artifact-export { padding: 14px; }

  .terminal-body { padding: 11px 12px 0; }

  .terminal-log { height: 230px; font-size: 10.5px; }

  .terminal-form input { font-size: 10.5px; }

  .terminal-foot { flex-direction: column; gap: 7px; padding: 9px 12px 11px; }

  .terminal-hint { max-width: 40ch; }

  .terminal-suggestions { justify-content: flex-start; }

  .code-row pre { font-size: 9.5px; padding: 10px 11px; }

  .code-row code { white-space: pre-wrap; overflow-wrap: anywhere; }

  .code-row .copy-btn { min-width: 48px; font-size: 9.5px; padding: 0 9px; }

  .also-list li { grid-template-columns: 1fr; gap: 3px; }

  .report-sheet { padding: 18px 15px; }

  .report-table th:nth-child(4), .report-table td:nth-child(4) { display: none; }

  .report-counts { gap: 6px; }

  .report-foot { flex-direction: column; gap: 4px; }

  .setup-section { padding-top: 64px; }

  .setup-copy .section-title { max-width: 100%; }

  .setup-actions .btn { width: 100%; }

  .quickstart-top { padding: 10px 14px; }

  .quickstart-step { padding: 15px 14px 16px; }

  .lab-strip { padding: 22px 0; }

  .authorized-note { padding: 16px; gap: 12px; }

  .authorized-note h3 { font-size: 13px; }

  .authorized-note p { font-size: 11.5px; }

  .site-footer { padding-top: 48px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }

  .footer-about { grid-column: 1 / -1; max-width: 46ch; }

  .footer-legal { flex-direction: column; gap: 10px; margin-top: 34px; }

  .footer-legal p { max-width: 46ch; }

  .media-dialog { width: calc(100vw - 16px); max-height: calc(100svh - 16px); border-radius: 10px; }

  .media-dialog-top { padding: 13px 14px; }

  .media-dialog-top h2 { font-size: 14px; }

  .media-note { padding: 9px 14px 11px; }
}

@media (max-width: 540px) {
  .hero-actions { flex-direction: column; align-items: stretch; }

  .hero-actions .btn { width: 100%; }

  .host-grid { gap: 7px; }

  .host-card { min-height: 86px; padding: 9px; }

  .host-top svg { display: none; }

  .host-os { display: none; }

  .host-name { margin-top: 1px; font-size: 13.5px; }

  .host-ip { font-size: 9.5px; overflow-wrap: anywhere; }

  .host-foot { padding-top: 6px; font-size: 8.5px; }

  .host-state { white-space: normal; line-height: 1.3; }

  .subnet-count { font-size: 10.5px; }

  .workspace-name { font-size: 10.5px; }

  .workspace-status { font-size: 9.5px; }

  .map-legend { gap: 10px 14px; font-size: 10px; }

  .map-note { font-size: 9.5px; }

  .service-table th:nth-child(4), .service-table td:nth-child(4) { display: none; }

  .service-table th, .service-table td { font-size: 9.5px; }

  .report-head { gap: 10px; }

  .report-brand { font-size: 16px; }

  .report-type { font-size: 9px; }

  .report-counts { grid-template-columns: repeat(2, 1fr); row-gap: 10px; }

  .report-num { font-size: 19px; }

  .report-table { font-size: 9px; }

  .report-table th { font-size: 8px; }

  .report-table td { padding: 7px 4px; }

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

  .footer-col a { font-size: 12px; }

  .lab-copy p { font-size: 12px; }
}

@media (max-width: 380px) {
  :root { --gutter: 16px; }

  .hero-title { font-size: clamp(2.55rem, 12.2vw, 3rem); }

  .header-actions .btn-small { padding: 0 10px; }

  .workspace-status { font-size: 9px; }

  .workspace-name { padding: 0 6px; }

  .host-name { font-size: 12.5px; }

  .host-foot { font-size: 8px; }

  .spec-row { grid-template-columns: 66px minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .faq-grid { grid-template-columns: 1fr; gap: 34px; }

  .faq-intro { position: static; }

  .faq-lede { max-width: 58ch; }

  .faq-intro p:not(.faq-lede) { max-width: 58ch; }
}

@media (max-width: 720px) {
  .faq-section { padding-top: 56px; }

  .faq-intro .section-title { font-size: clamp(2.2rem, 8.7vw, 3.55rem); }

  .faq-lede { margin-top: 20px; font-size: 15.5px; }

  .faq-item summary { padding: 17px 0; gap: 16px; }

  .faq-answer { padding-bottom: 19px; font-size: 14px; }

  .setup-release { font-size: 12px; }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .route-line { animation: none; transform: none; }
  .route-head { animation: none; opacity: 1; }
}