/* ==========================================================================
   LandauOne — product site
   Self-contained: no webfonts, no CDN, no external assets.
   Themed light and dark, following the OS preference.
   ========================================================================== */

:root {
  color-scheme: light dark;

  --hue: 222;

  /* Light */
  --bg: hsl(var(--hue) 40% 99%);
  --bg-alt: hsl(var(--hue) 34% 96.5%);
  --bg-raise: hsl(0 0% 100%);
  --line: hsl(var(--hue) 22% 89%);
  --line-soft: hsl(var(--hue) 22% 93%);
  --ink: hsl(var(--hue) 32% 12%);
  --ink-soft: hsl(var(--hue) 14% 38%);
  --ink-faint: hsl(var(--hue) 12% 52%);
  --accent: hsl(211 92% 44%);
  --accent-ink: hsl(0 0% 100%);
  --accent-soft: hsl(211 92% 44% / 0.09);
  --accent-line: hsl(211 92% 44% / 0.28);
  --shadow: 0 1px 2px hsl(var(--hue) 30% 20% / 0.05), 0 8px 24px -12px hsl(var(--hue) 30% 20% / 0.16);
  --shadow-lg: 0 2px 6px hsl(var(--hue) 30% 20% / 0.06), 0 28px 60px -28px hsl(var(--hue) 30% 20% / 0.3);
  --radius: 14px;
  --radius-sm: 9px;
  --shell: 1160px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue) 30% 7%);
    --bg-alt: hsl(var(--hue) 28% 9.5%);
    --bg-raise: hsl(var(--hue) 26% 12%);
    --line: hsl(var(--hue) 20% 22%);
    --line-soft: hsl(var(--hue) 20% 17%);
    --ink: hsl(var(--hue) 30% 96%);
    --ink-soft: hsl(var(--hue) 16% 74%);
    --ink-faint: hsl(var(--hue) 12% 58%);
    --accent: hsl(207 96% 63%);
    --accent-ink: hsl(var(--hue) 40% 8%);
    --accent-soft: hsl(207 96% 63% / 0.14);
    --accent-line: hsl(207 96% 63% / 0.34);
    --shadow: 0 1px 2px hsl(0 0% 0% / 0.4), 0 10px 30px -14px hsl(0 0% 0% / 0.7);
    --shadow-lg: 0 2px 8px hsl(0 0% 0% / 0.45), 0 34px 70px -30px hsl(0 0% 0% / 0.8);
  }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, 'Liberation Mono', monospace;
  font-size: 0.88em;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 5px;
  padding: 0.08em 0.36em;
  color: inherit;
  white-space: nowrap;
}

h1, h2, h3, h4 {
  line-height: 1.18;
  letter-spacing: -0.021em;
  margin: 0;
  font-weight: 660;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.6rem 1rem;
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

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

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

/* ============================ Top bar ============================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.7) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 1.14rem;
}
.brand:hover { text-decoration: none; }
.brand__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  /* white tile so the slate mark stays legible in dark mode */
  background: #fff;
  border: 1px solid var(--line);
}
.brand__mark img { display: block; }
.brand__word-accent { color: var(--accent); }
.brand--sm { font-size: 1rem; }

.topnav {
  display: flex;
  gap: 1.5rem;
  margin-left: auto;
  font-size: 0.945rem;
}
.topnav a {
  color: var(--ink-soft);
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  /* A label is one unit: half of "Live-Daten" hanging on a second line is not navigation. */
  white-space: nowrap;
}
.topnav a:hover { color: var(--ink); text-decoration: none; }
.topnav a.is-active { color: var(--ink); border-bottom-color: var(--accent); }

.langnav {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  font-size: 0.75rem;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.18rem;
}
.langnav a {
  color: var(--ink-soft);
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
}
.langnav a:hover { color: var(--ink); text-decoration: none; }
.langnav a[aria-current] {
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--accent-line);
  padding: calc(0.18rem - 1px) calc(0.5rem - 1px);
}

/* The language switcher costs the bar ~150px the original spacing never budgeted for, and the
   translated labels run longer than the English ones it was drawn for. So the bar is set tight
   enough for the widest translation, and the section nav collapses while there is still room —
   not after it has started folding labels onto two lines. */
.topbar__inner { gap: 0.75rem; }
.topnav { gap: 0.6rem; font-size: 0.9rem; }

@media (max-width: 1199px) {
  .topnav { display: none; }
  .langnav { margin-left: auto; }
}

/* ============================ Hero ============================ */

.hero {
  position: relative;
  /* Bottom padding matters here: the hero used to end in a full-width screenshot that filled
     this space; without it the stats row would butt straight against the next section. */
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: -30% 0 auto;
  height: 620px;
  background:
    radial-gradient(60% 60% at 20% 0%, var(--accent-soft), transparent 70%),
    radial-gradient(50% 50% at 85% 10%, var(--accent-soft), transparent 72%);
  pointer-events: none;
}
.hero__inner { position: relative; text-align: center; }

.eyebrow {
  margin: 0 0 1rem;
  font-size: 0.79rem;
  font-weight: 640;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero h1 {
  font-size: clamp(2.15rem, 5.4vw, 3.65rem);
  letter-spacing: -0.035em;
  margin-bottom: 1.25rem;
}

.lede {
  max-width: 63ch;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin: 2.1rem 0 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.97rem;
  border: 1px solid transparent;
  transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: var(--bg-raise); }
.btn--ghost:hover { border-color: var(--accent-line); }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.75rem;
  list-style: none;
  margin: 2.8rem 0 0;
  padding: 0;
}
.hero__stats li { display: flex; flex-direction: column; align-items: center; }
.hero__stats strong {
  font-size: 1.9rem;
  font-weight: 680;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.hero__stats span {
  font-size: 0.85rem;
  color: var(--ink-faint);
  letter-spacing: 0.01em;
}

/* ============================ Screenshots ============================ */

.shot {
  margin: 0;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-raise);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.shot img { width: 100%; height: auto; }
.shot figcaption {
  padding: 0.72rem 1rem 0.85rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--line-soft);
  background: var(--bg-alt);
}

.shot--hero {
  width: min(100% - 2.5rem, calc(var(--shell) + 90px));
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  box-shadow: var(--shadow-lg);
}

/* A capture that has not been taken yet: the frame stays, and says what belongs in it. */
.shot.is-pending img { display: none; }
.shot.is-pending::before {
  content: attr(data-pending-label);
  display: grid;
  place-items: center;
  min-height: 190px;
  padding: 2rem 1.25rem;
  text-align: center;
  font-size: 0.86rem;
  color: var(--ink-faint);
  background:
    repeating-linear-gradient(
      -45deg,
      var(--bg-alt) 0 12px,
      color-mix(in srgb, var(--bg-alt) 60%, var(--line-soft)) 12px 24px
    );
}
.shot--hero.is-pending::before { min-height: 340px; }

/* ============================ Sections ============================ */

.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line-soft); }

.section__head { max-width: 72ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__title {
  font-size: clamp(1.65rem, 3.2vw, 2.35rem);
  margin-bottom: 0.9rem;
}
.section__lede { margin: 0; color: var(--ink-soft); }

.band { padding: clamp(2.5rem, 5vw, 4rem) 0; }

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

/* Two card grids in a row (Alerts/Sensors above the two ingestion monitors) get clear air
   between them — without it the rows read as one crowded block. The same air goes between a
   card grid and a screenshot that follows it (the sharing section's received-view shot). */
.grid + .grid { margin-top: 1.8rem; }
.grid + .shot { margin-top: 1.8rem; }

@media (max-width: 900px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

.pillar h2 {
  font-size: 1.18rem;
  margin-bottom: 0.6rem;
}
.pillar p { margin: 0; color: var(--ink-soft); font-size: 0.96rem; }

.card {
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.55rem;
  box-shadow: var(--shadow);
}
.card h3 { font-size: 1.06rem; margin-bottom: 0.6rem; }
.card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.card--tight { padding: 1.25rem 1.35rem; }

/* A card that IS a link — the site map on the home page, the module groups on the console page.
   Inherits the text colour so it reads as a card, and tells you it is a link on hover. */
.card--link {
  display: block;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.card--link:hover {
  text-decoration: none;
  border-color: var(--accent-line);
  transform: translateY(-2px);
}
.card--link .eyebrow { margin-bottom: 0.5rem; }
.card--link h3 { color: var(--ink); }
.card--link:hover h3 { color: var(--accent); }

/* The module-group switcher on the console pages: five pills, the current one filled. */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.5rem;
}
.subnav a {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.38rem 0.95rem;
  white-space: nowrap;
}
.subnav a:hover { color: var(--ink); border-color: var(--accent-line); text-decoration: none; }
.subnav a[aria-current] {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

/* "Read more" under a module's ticks — the module has its own page. */
.module__more { margin: 1.2rem 0 0; }

/* ============================ Modules ============================ */

.category {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: clamp(2.6rem, 5vw, 3.6rem) 0 1.6rem;
  font-size: 0.8rem;
}
.category::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.category__tag {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 680;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 0.28rem 0.8rem;
}

.module {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding: clamp(1.6rem, 3vw, 2.2rem) 0;
  border-top: 1px solid var(--line-soft);
}
.module:first-of-type { border-top: 0; }

.module:nth-of-type(even) .module__text { order: 2; }

/* A module with more than one screenshot stacks them in the shot column. */
.module__shots {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-content: start;
  min-width: 0;
}

.module__name {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  margin-bottom: 0.6rem;
}
.module__lede {
  margin: 0 0 1.1rem;
  color: var(--ink-soft);
}

.module--compact {
  display: block;
  border-top: 0;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.55rem;
  box-shadow: var(--shadow);
}
.module--compact .module__name { font-size: 1.2rem; }
.module--compact .module__lede { font-size: 0.95rem; }

@media (max-width: 900px) {
  .module { grid-template-columns: 1fr; }
  .module:nth-of-type(even) .module__text { order: 0; }
}

.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.62rem;
}
.ticks li {
  position: relative;
  padding-left: 1.65rem;
  color: var(--ink-soft);
  font-size: 0.955rem;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ticks strong { color: var(--ink); font-weight: 620; }
.ticks--tight li { font-size: 0.925rem; }

.widgets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.2rem;
}
.chip {
  font-size: 0.82rem;
  font-weight: 560;
  color: var(--ink-soft);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.24rem 0.7rem;
}

.shot--inline { margin-top: 1.3rem; }
.shot--inline figcaption { display: none; }

/* A row of standalone screenshots following a row of text cards: the shots live OUTSIDE the
   cards, with clear air between the text and the imagery. */
.shot-row { margin-top: 1.8rem; }
.shot-row .shot { align-self: start; }

/* The benchmark table: figures first, context second. */
.bench-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
}
.bench-table th,
.bench-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}
.bench-table th { color: var(--ink-soft); font-weight: 600; width: 30%; }
.bench-table td:nth-child(2) { font-weight: 700; white-space: nowrap; width: 22%; }
.bench-table td:nth-child(3) { color: var(--ink-faint); }
@media (max-width: 700px) {
  .bench-table td:nth-child(3) { display: none; }
}
/* The ten-year cost table: six columns of prose, so it scrolls inside its own box on narrow
   screens rather than squeezing; the self-hosted rows are tinted to read as "ours". */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1.2rem; }
.cost-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.cost-table th,
.cost-table td {
  padding: 0.8rem 0.85rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
  color: var(--ink-soft);
}
.cost-table thead th {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
}
.cost-table tbody th { color: var(--ink); font-weight: 650; width: 17%; }
.cost-table td:last-child { color: var(--ink); width: 17%; }
.cost-table__ours th,
.cost-table__ours td { background: var(--accent-soft); }
.cost-table__ours th { color: var(--accent); }

/* Sub-headings splitting the benchmark into its write half and its read half. */
.bench-sub { font-size: 1.12rem; margin: 2.4rem 0 0.5rem; }
.bench-sub:first-of-type { margin-top: 0; }
.bench-note { margin: 0 0 1.1rem; color: var(--ink-soft); font-size: 0.95rem; max-width: 68ch; }

/* A single distinguished note under a card grid — for the claim that deserves its own line. */
.note-callout {
  margin: 1.8rem 0 0;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent, #7c6cf0);
  border-radius: var(--radius);
  background: var(--bg-raise);
  color: var(--ink-soft);
  font-size: 0.97rem;
}

/* A feature spotlight nested inside a module flow (Replay & Correlate under Dashboards).
   Deliberately NOT boxed: the surrounding modules aren't, and a lone frame would read as a
   different kind of content rather than a continuation of the dashboard story. */
.feature-callout {
  margin: 2.6rem 0 3.4rem;
}
.feature-callout > h4 {
  font-size: 1.4rem;
  margin: 0.2rem 0 0.6rem;
}
.feature-callout .section__lede { margin-bottom: 1.5rem; }
.feature-callout .shot { margin-top: 1.8rem; }

/* ============================ Split ============================ */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.split__text h3 { font-size: 1.35rem; margin-bottom: 1rem; }
.split .shot--inline { margin-top: 0; }

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

/* ============================ Flow ============================ */

.flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: flow;
}
.flow__step {
  position: relative;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1.25rem 1.35rem;
  box-shadow: var(--shadow);
}
.flow__step:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -0.72rem;
  top: 2.35rem;
  width: 0.55rem;
  height: 1px;
  background: var(--line);
}
.flow__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}
.flow__step h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.flow__step p { margin: 0; font-size: 0.885rem; color: var(--ink-soft); }

@media (max-width: 1000px) { .flow { grid-template-columns: repeat(2, 1fr); } .flow__step::after { display: none; } }
@media (max-width: 560px) { .flow { grid-template-columns: 1fr; } }

/* ============================ Module index ============================ */

.arch {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.arch__col {
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.3rem 1.4rem;
  box-shadow: var(--shadow);
}
.arch__title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--accent);
  margin-bottom: 1rem;
}
.arch__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.arch__list li { display: flex; flex-direction: column; gap: 0.12rem; }
.arch__list a { color: var(--ink); }
.arch__list a:hover { color: var(--accent); text-decoration: none; }
.arch__list span { font-weight: 600; font-size: 0.95rem; }
.arch__list em {
  font-style: normal;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.arch__note {
  margin: 1.5rem 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: 76ch;
}

@media (max-width: 1000px) { .arch { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .arch { grid-template-columns: 1fr; } }

/* ============================ Close & footer ============================ */

.close {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  text-align: center;
  background:
    radial-gradient(60% 120% at 50% 0%, var(--accent-soft), transparent 70%),
    var(--bg);
  border-top: 1px solid var(--line-soft);
}
.close h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 0.85rem; }
.close p { max-width: 60ch; margin: 0 auto 2rem; color: var(--ink-soft); }

.footer {
  border-top: 1px solid var(--line-soft);
  background: var(--bg-alt);
  padding: 1.75rem 0;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.footer__nav { display: flex; flex-wrap: wrap; gap: 1.35rem; font-size: 0.9rem; }
.footer__nav a { color: var(--ink-faint); }
.footer__nav a:hover { color: var(--ink); text-decoration: none; }

/* ============================ Pipeline illustration ============================ */

.pipeline-figure { margin: 2.4rem 0 0; }
.pipeline-figure svg { width: 100%; height: auto; display: block; }
.pipeline-figure figcaption {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
  text-align: center;
}

.pa-node { fill: var(--bg-raise); stroke: var(--line); stroke-width: 1.25; }
.pa-node--accent { stroke: var(--accent); stroke-width: 1.5; }
.pa-cyl { fill: var(--bg-raise); stroke: var(--line); stroke-width: 1.25; }
.pa-band { fill: var(--bg-alt); stroke: var(--line-soft); stroke-width: 1; }
.pa-monitor { fill: var(--bg-raise); stroke: var(--accent-line); stroke-width: 1.25; stroke-dasharray: 5 5; }
.pa-step { fill: var(--accent); }
.pa-step-text { fill: var(--accent-ink); font-size: 12px; font-weight: 700; }
.pa-ack-pill { fill: var(--accent-soft); stroke: var(--accent-line); stroke-width: 1; }
.pa-tap { fill: var(--accent); }

.pa-title { fill: var(--ink); font-size: 15px; font-weight: 650; }
.pa-sub { fill: var(--ink-soft); font-size: 11px; }
.pa-sub--s { font-size: 10.5px; }
.pa-faint { fill: var(--ink-faint); font-size: 10.5px; }
.pa-chip-text { fill: var(--ink); font-size: 12px; font-weight: 600; }
.pa-ack { fill: var(--accent); font-size: 10.5px; font-weight: 640; }
.pa-caption,
.pa-boundary-text {
  fill: var(--accent);
  font-size: 10px;
  font-weight: 640;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pa-boundary-text { fill: var(--ink-faint); letter-spacing: 0.1em; }

.pa-path { stroke: var(--line); stroke-width: 1.5; fill: none; }
.pa-dashed { stroke: var(--line); stroke-width: 1.25; fill: none; stroke-dasharray: 4 6; }
.pa-boundary { stroke: var(--accent-line); stroke-width: 1.25; fill: none; stroke-dasharray: 2 5; }
.pa-arrowhead { fill: var(--ink-faint); }

/* The moving part: a dashed accent overlay riding the same geometry as the base path, so
   reduced-motion users simply see the static diagram. */
.pa-flow {
  stroke: var(--accent);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 3 9;
  animation: pa-flow 1.4s linear infinite;
}
@keyframes pa-flow { to { stroke-dashoffset: -12; } }
@media (prefers-reduced-motion: reduce) {
  .pa-flow { animation: none; opacity: 0; }
}

/* On narrow screens the diagram keeps a readable size and pans inside its own figure,
   rather than shrinking the whole pipeline into an unreadable thumbnail. */
@media (max-width: 700px) {
  .pipeline-figure { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pipeline-figure svg { min-width: 720px; }
}

/* ============================ Contact ============================ */

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1rem;
}